Skip to content

Draft: feat(ui): Rewrite frontend with Astro and new design

noClaps requested to merge frontend-rewrite into main

I've created a new base to build on top of. It uses the Bun adapter, and needs Bun to run. I'm not sure if having Node in the environment will cause issues, but if you see some weird behavior or things breaking, add a -b flag to your bun run command.

The main feature of this is the Client class in src/scripts/client.ts. This file exports a Client object that has the methods .get(), .post(), .put(), and .delete() which correspond to the different HTTP methods used in the API. Each one takes a relative URL (/_initial, /users/noClaps, etc.) and a type argument for the return type, and can be used as below:

// Astro file frontmatter
import client from "src/scripts/client.ts"; // Change this to be relative to wherever you're importing from

const { user } = Astro.params;

const userObject = await client.get<User>(`/users/${user}`); // The API types have been copied from the documentation and are globally available.

This class is not complete, and there are definitely bugs to be ironed out, so if you find any feel free to leave a comment or ping me on Discord.

I've also set up the font and colors, as well as a theme toggle component, but not much else. The actual frontend and design work is still incomplete. However, I believe this is a good base to build on top of.

When deploying, values such as the site title, description and API URL need to be set using environment variables. Here's the .env file I'm using:

SITE_NAME=Camphouse
SITE_DESCRIPTION="A free and open-source community platform."
API_URL="https://api.camphouse.org"

This means that these values can be changed dynamically. However, changing these values requires the deployment to be restarted, but at least it doesn't require a full rebuild of the site.

Closes #13

Edited by noClaps

Merge request reports