ewancroft.uk
a Linkat frontend.
1# Linkat Directory
2
3[](http://unmaintained.tech/)
4
5<img src="./static/logo.png" alt="Linkat Directory" width="100"/>
6
7## Project Purpose
8
9Linkat Directory is a SvelteKit application designed to serve as an alternate frontend to Linkat, providing a curated directory of links, primarily focusing on Bluesky profiles and content. It allows for the display of user profiles, including their Decentralised Identifiers (DIDs), handles, display names, avatars, and descriptions. The application is built with a focus on responsiveness and ease of use, providing a clean interface for discovering links.
10
11## Installation
12
13To set up the Linkat Directory locally, follow these steps:
14
151. **Clone the repository:**
16 ```bash
17 git clone git@github.com:ewanc26/linkat-directory.git
18 cd linkat-directory
19 ```
20
212. **Install dependencies:**
22 ```bash
23 npm install
24 ```
25
263. **Configure environment variables:**
27 Create a `.env` file in the project root based on `.env.example`. At a minimum, you should define `DIRECTORY_OWNER` or `PUBLIC_LINKAT_USERS`.
28
29 Example for a single directory owner:
30 ```
31 DIRECTORY_OWNER=did:plc:your-did-here
32 ```
33
34 Example for multiple users:
35 ```
36 PUBLIC_LINKAT_USERS=did:plc:user1,did:web:user2
37 ```
38
39 Example for hiding the directory owner's card:
40 ```
41 HIDE_OWNER_CARD=true
42 ```
43
44 Example for displaying the user banner (default: false):
45 ```
46 DISPLAY_USER_BANNER=true
47 ```
48
49 Example for controlling the display of the user description:
50```
51DISPLAY_USER_DESCRIPTION=true
52```
53
54Note: `DISPLAY_USER_DESCRIPTION` only affects the display of user descriptions on the home page cards.
55
564. **Run the development server:**
57 ```bash
58 npm run dev
59 ```
60 The application will typically be accessible at `http://localhost:5173`. For prerendering, the `origin` defaults to `http://localhost:5713` unless the `PUBLIC_ORIGIN` environment variable is set.
61
62## Usage
63
64Once the application is running, you can:
65
66- Browse the main directory page to see configured users.
67- View individual user profiles by navigating to `/user/[did]`, where `[did]` is the user's Decentralised Identifier.
68- The application dynamically generates Open Graph and Twitter metadata for improved social sharing.
69
70## Project Structure
71
72Key directories and files:
73
74- `src/routes/`: Contains SvelteKit routes, including the main page (`+page.svelte`) and user profile pages (`user/[did]/+page.svelte`).
75- `src/lib/components/`: Reusable Svelte components, such as `DynamicHead.svelte` for managing dynamic `<head>` content, and profile-related components.
76- `src/lib/css/`: Global CSS styles, including `app.css` (for general styling) and `variables.css` (for CSS variables).
77- `src/lib/utils/`: Utility functions, such as caching mechanisms.
78- `src/lib/profile/profile.ts`: Logic for fetching and processing user profile data from Bluesky.
79- `svelte.config.js`: SvelteKit configuration, including prerendering settings. The `origin` property in `prerender` now defaults to `http://localhost:5713` unless overridden by the `PUBLIC_ORIGIN` environment variable.
80
81## Contributing
82
83Contributions are welcome! Please ensure your code adheres to the project's coding standards, including British English for comments and documentation, and responsive design principles.
84
85## Credits
86
87This project utilises data and concepts from:
88
89- [linkat.blue](https://linkat.blue) by [mkizka.dev](https://bsky.app/profile/did:plc:4gow62pk3vqpuwiwaslcwisa)
90- [atproto.com](https://atproto.com) by [Bluesky](https://bsky.social)
91
92## License
93
94This project is licensed under the [GNU Affero General Public License Version 3](LICENSE).