Add new Lustre's frontend

Author: ghivert

.github/workflows/frontend.yml

@@ -0,0 +1,59 @@
+name: Lustre Frontend CI
+
+on: [push, pull_request]
+
+defaults:
+  run:
+    working-directory: ./frontend
+
+jobs:
+  test:
+    name: Test Lustre Frontend
+    runs-on: ubuntu-24.04
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install OTP and Gleam
+        uses: erlef/setup-beam@v1
+        with:
+          otp-version: 27.2
+          gleam-version: 1.12.0
+          rebar3-version: 3
+
+      - name: Install dependencies
+        run: gleam deps download
+
+      - name: Run tests
+        run: gleam test
+
+      - name: Check Gleam formatted
+        run: gleam format --check src test
+
+  build:
+    name: Build Lustre Frontend
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install OTP and Gleam
+        uses: erlef/setup-beam@v1
+        with:
+          otp-version: 27.2
+          gleam-version: 1.12.0
+          rebar3-version: 3
+
+      - name: Install dependencies
+        run: gleam deps download
+
+      - name: Build Hexdocs website
+        run: gleam run -m lustre/dev build
+
+      # - name: Copy files
+      #   run: |
+      #     mkdir _site
+      #     cp -r dist _site
+      #     cp -r assets _site
+
+      # - name: Upload artifacts
+      #   uses: actions/upload-pages-artifact@v3

.gitignore

@@ -6,3 +6,8 @@
 erl_crash.dump
 *.ez
 hexdocs-*.tar
+
+# Lustre need some additional ignores.
+/frontend/.lustre
+/frontend/build
+/frontend/dist

frontend/README.md

@@ -0,0 +1,37 @@
+# Hexdocs Frontend
+
+Hexdocs Frontend is using [Lustre](https://lustre.build), a single-page
+application running in client, interacting with the backend through asynchronous
+HTTP requests.
+
+Running a Lustre application can easily be achieved using [Gleam](https://gleam.run/)
+and the [Lustre Dev Tools](https://hexdocs.pm/lustre_dev_tools/).
+Lustre Dev Tools is a companion package to Lustre, in charge of compiling,
+bundling, and running the application in browser.
+
+## Launching the dev server
+
+With Gleam installed on your path, you can directly start the development server
+using Lustre Dev Tools.
+
+```sh
+gleam run -m lustre/dev start
+```
+
+The application will be running at `http://localhost:1234`.
+
+## Building the application
+
+Building the application can be done with the Lustre Dev Tools too.
+
+```sh
+gleam run -m lustre/dev build
+```
+
+## Quick reminder of the structure
+
+- All source files reside in `src` folder.
+- There's no `index.html` in the sources, as the file is automatically
+  generated by Lustre Dev Tools with the configuration written in `gleam.toml`.
+- `hexdocs.css` is the entrypoint for CSS for the application. Tailwind is
+  setup in that file.

frontend/assets/favicon/apple-touch-icon.png

@@ -0,0 +1,21 @@
+{
+  "name": "Hexdocs",
+  "short_name": "Hexdocs",
+  "icons": [
+    {
+      "src": "/favicon/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/favicon/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}