Merge pull request #10 from versia-pub/refactor/shadcn

Full UI rewrite

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+insert_final_newline = true
+tab_width = 4
+trim_trailing_whitespace = true

.github/workflows/docker-publish.yml

@@ -6,74 +6,80 @@ name: Docker
 # documentation.
 
 on:
-  push:
-    branches: ["main"]
-    # Publish semver tags as releases.
-    tags: ["v*.*.*"]
-  pull_request:
-    branches: ["main"]
+    push:
+        branches: ["main", "refactor/shadcn"]
+        # Publish semver tags as releases.
+        tags: ["v*.*.*"]
+    pull_request:
+        branches: ["main"]
 
 env:
-  # Use docker.io for Docker Hub if empty
-  REGISTRY: ghcr.io
-  # github.repository as <account>/<repo>
-  IMAGE_NAME: ${{ github.repository }}
+    # Use docker.io for Docker Hub if empty
+    REGISTRY: ghcr.io
+    # github.repository as <account>/<repo>
+    IMAGE_NAME: ${{ github.repository }}
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-      # This is used to complete the identity challenge
-      # with sigstore/fulcio when running outside of PRs.
-      id-token: write
+    build:
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            packages: write
+            # This is used to complete the identity challenge
+            # with sigstore/fulcio when running outside of PRs.
+            id-token: write
 
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v4
 
-      - name: Setup QEMU
-        uses: docker/setup-qemu-action@v3
-        with:
-          platforms: all
+            - name: Setup QEMU
+              uses: docker/setup-qemu-action@v3
+              with:
+                  platforms: all
 
-      # Set up BuildKit Docker container builder to be able to build
-      # multi-platform images and export cache
-      # https://github.com/docker/setup-buildx-action
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3 # v3.0.0
+            # Set up BuildKit Docker container builder to be able to build
+            # multi-platform images and export cache
+            # https://github.com/docker/setup-buildx-action
+            - name: Set up Docker Buildx
+              uses: docker/setup-buildx-action@v3 # v3.0.0
 
-      # Login against a Docker registry except on PR
-      # https://github.com/docker/login-action
-      - name: Log into registry ${{ env.REGISTRY }}
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v3 # v3.0.0
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
+            # Login against a Docker registry except on PR
+            # https://github.com/docker/login-action
+            - name: Log into registry ${{ env.REGISTRY }}
+              if: github.event_name != 'pull_request'
+              uses: docker/login-action@v3 # v3.0.0
+              with:
+                  registry: ${{ env.REGISTRY }}
+                  username: ${{ github.actor }}
+                  password: ${{ secrets.GITHUB_TOKEN }}
 
-      # Extract metadata (tags, labels) for Docker
-      # https://github.com/docker/metadata-action
-      - name: Extract Docker metadata
-        id: meta
-        uses: docker/metadata-action@v5 # v5.0.0
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+            # Extract metadata (tags, labels) for Docker
+            # https://github.com/docker/metadata-action
+            - name: Extract Docker metadata
+              id: meta
+              uses: docker/metadata-action@v5 # v5.0.0
+              with:
+                  images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+                  tags: |
+                      type=schedule
+                      type=ref,event=branch
+                      type=ref,event=tag
+                      type=ref,event=pr
+                      type=sha
 
-      # Build and push Docker image with Buildx (don't push on PR)
-      # https://github.com/docker/build-push-action
-      - name: Build and push Docker image
-        id: build-and-push
-        uses: docker/build-push-action@v5 # v5.0.0
-        with:
-          context: .
-          push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          platforms: linux/amd64,linux/arm64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          provenance: mode=max
-          sbom: true
+            # Build and push Docker image with Buildx (don't push on PR)
+            # https://github.com/docker/build-push-action
+            - name: Build and push Docker image
+              id: build-and-push
+              uses: docker/build-push-action@v5 # v5.0.0
+              with:
+                  context: .
+                  push: ${{ github.event_name != 'pull_request' }}
+                  tags: ${{ steps.meta.outputs.tags }}
+                  labels: ${{ steps.meta.outputs.labels }}
+                  platforms: linux/amd64,linux/arm64
+                  cache-from: type=gha
+                  cache-to: type=gha,mode=max
+                  provenance: mode=max
+                  sbom: true

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+    "recommendations": ["inlang.vs-code-extension"]
+}

Dockerfile

@@ -1,3 +1,4 @@
+# Paraglide doesn't properly work with Bun, so it needs Node
 FROM imbios/bun-node:22-alpine AS base
 
 # Install dependencies into temp directory
@@ -6,18 +7,21 @@ FROM base AS install
 
 RUN mkdir -p /temp/dev
 COPY package.json bun.lockb /temp/dev/
+COPY project.inlang /temp/dev/project.inlang
 RUN cd /temp/dev && bun install --frozen-lockfile
 
 FROM base AS builder
 
 COPY . /app
 COPY --from=install /temp/dev/node_modules /app/node_modules
 RUN cd /app && bun run emojis:generate
-RUN cd /app && bun run build --preset node-server
+RUN cd /app && bun run build
 
-FROM oven/bun:1.1.34-alpine AS final
+# Run final web server
+FROM ghcr.io/static-web-server/static-web-server:2-alpine AS final
 
-COPY --from=builder /app/.output/ /app
+COPY --from=builder /app/.output/public /app/public
+COPY sws.toml /etc/config.toml
 
 LABEL org.opencontainers.image.authors="Gaspard Wierzbinski (https://cpluspatch.com)"
 LABEL org.opencontainers.image.source="https://github.com/versia-pub/frontend"
@@ -27,4 +31,5 @@ LABEL org.opencontainers.image.title="Versia-FE"
 LABEL org.opencontainers.image.description="Frontend for the Versia Server Project"
 
 WORKDIR /app
-CMD ["bun", "run", "server/index.mjs"]
+EXPOSE 3000
+CMD ["static-web-server", "--config-file", "/etc/config.toml"]

README.md

@@ -1,12 +1,42 @@
-<p align="center">
-  <a href="https://versia.pub"><img src="https://cdn.versia.pub/branding/logo-dark.svg" alt="Versia Logo" height="110"></a>
-</p>
-
-<center><h1><code>versia-fe</code></h1></center>
-
-**Versia-FE** is a beautiful, fast and responsive front-end for the Versia Server project.
-
-## Features
+<div align="center">
+    <a href="https://versia.pub">
+        <picture>
+            <source media="(prefers-color-scheme: dark)" srcset="https://cdn.versia.pub/branding/logo-dark.svg">
+            <source media="(prefers-color-scheme: light)" srcset="https://cdn.versia.pub/branding/logo-light.svg">
+            <img src="https://cdn.versia.pub/branding/logo-dark.svg" alt="Versia Logo" height="110" />
+        </picture>
+    </a>
+</div>
+
+
+<h2 align="center">
+  <strong><code>Versia Frontend</code></strong>
+</h2>
+
+<div align="center">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/typescript/typescript-original.svg" height="42" width="52" alt="TypeScript logo">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg" height="42" width="52" alt="Vue logo">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nuxtjs/nuxtjs-original.svg" height="42" width="52" alt="Nuxt logo">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg" height="42" width="52" alt="Docker logo">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bun/bun-original.svg" height="42" width="52" alt="Bun logo">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" height="42" width="52" alt="CSS3 logo">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" height="42" width="52" alt="HTML5 logo">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linux/linux-original.svg" height="42" width="52" alt="Linux logo">
+    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-original.svg" height="42" width="52" alt="TailwindCSS logo">
+</div>
+
+
+<br/>
+
+<div align="center">
+    <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="assets/ipad-dark.webp">
+        <source media="(prefers-color-scheme: light)" srcset="assets/ipad-light.webp">
+        <img alt="Versia-FE screenshot on an iPad Pro" src="assets/ipad-dark.webp" height="400" />
+    </picture>
+</div>
+
+# Features
 
 - [x] Timelines: public, home, local
 - [x] Login
@@ -22,12 +52,11 @@
 - [x] Note editing
 - [x] Alt text support everywhere
 - [x] Media uploads
-- [x] WCAG 2.2 AAA compliance
-  - Testing is automated and may not catch all issues, please report any accessibility issues you find.
+- [x] WCAG 2.2 AAA testing
 - [x] Settings
 - [x] Profile editing
 
-### Browser Support
+## Browser Support
 
 The following browsers are **supported** (issues will be prioritized):
 - **Chromium**: `110+`
@@ -43,27 +72,27 @@ The following browsers will very likely work, but are not officially supported:
 
 Other browsers may work, but are not guaranteed to.
 
-## Performance
+# Performance
 
-### JavaScript Bloat
+## JavaScript
 
-The **total** JavaScript bundle size is less than `900 kB`, but this is made even smaller by the fact that the bundle is split into multiple files, and only the necessary files are loaded on each page.
+The **total** JavaScript bundle size is less than `1000 kB`, but this is made even smaller by the fact that the bundle is split into multiple files, and only the necessary files are loaded on each page.
 
-### Benchmarks
+## Benchmarks
 
-Benchmarks are due to be conducted soon™.
+Soon™.
 
-## Installation
+# Installation
 
 Versia-FE is included in the provided `docker-compose` file during [Versia Server installation](https://github.com/versia-pub/server/blob/main/docs/installation.md).
 
 To have Versia-FE and Versia Server running on the same domain, edit the Versia Server configuration to point to the Versia-FE container's address (`frontend` category inside config).
 
-### Manual Installation
+## Manual Installation
 
 Here are the steps to install Versia-FE manually:
 
-#### Docker/Podman
+### Docker/Podman
 
 ```yaml
 services:
@@ -73,29 +102,52 @@ services:
         restart: unless-stopped
         networks:
             - versia-net
-        environment:
-            NUXT_PUBLIC_API_HOST: https://yourserver.com
-            # For Tor users, set the following environment variable in addition to the above
-            # NUXT_PUBLIC_ONION_API_HOST: http://youronionserver.onion
 ```
 
-Then, the frontend will be available at `http://localhost:3000` inside the container. To link it to a Versia Server, set the `NUXT_PUBLIC_API_HOST` environment variable to the server's URL.
+Then, the frontend will be available at `http://localhost:3000` inside the container.
+
+> [!TIP]
+>
+> By default, Versia-FE will connect to any Versia Server instance running on the same domain.
+>
+> You can set the `NUXT_PUBLIC_API_HOST` environment variable to point to a different Versia Server instance.
+
+### Manual
 
-## Development
+1. Clone the repository.
+```bash
+git clone https://github.com/versia-pub/frontend.git
+```
+2. Install dependencies.
+```bash
+bun install
+```
+3. Build the project.
+```bash
+bun run build
+```
+4. Serve the static files in the `.output/public` directory.
+> [!WARNING]
+>
+> `.output/public/200.html` should be configured as a fallback for all 404 errors.
 
-Make sure to run `bun run emojis:generate` to generate the emoji list before building or running the project.
+# Development
 
-## License
+Run `bun run emojis:generate` to generate the emoji list before building or running the project.
+
+# License
 
 This project is licensed under the AGPL 3.0 - see the [LICENSE](LICENSE) file for details.
 
-## Acknowledgments
+All Versia assets (icon, logo, banners, etc) are licensed under [CC-BY-NC-SA-4.0](https://creativecommons.org/licenses/by-nc-sa/4.0).
+
+# Acknowledgments
 
-### Projects
+## Projects
 
 - [**Bun**](https://bun.sh): Thanks to the Bun team for creating an amazing JavaScript runtime.
 - [**Nuxt**](https://nuxt.com): Thanks to the Nuxt team for creating an amazing Vue framework.
 
-### People
+## People
 
-- [**April John**](https://github.com/cutestnekoaqua): Creator and maintainer of the Versia Server ActivityPub bridge.
+- [**April John**](https://github.com/cutestnekoaqua): Creator and maintainer of the Versia Server ActivityPub bridge.