Add github action to publish dockerfile

2025-12-09 18:37:02 +00:00 · 2025-05-19 10:06:43 -07:00
parent 0e79e5b9cc
commit b3bc0e4957
5 changed files with 87 additions and 82 deletions
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -0,0 +1,59 @@
+name: Docker
+
+on:
+  push:
+    branches: ['master']
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      attestations: write
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value=latest,enable=${{ github.ref == 'refs/heads/master' }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          driver: docker-container
+
+      - name: Build and push Docker image
+        id: push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+      - name: Generate artifact attestation
+        uses: actions/attest-build-provenance@v2
+        with:
+          subject-name: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME}}
+          subject-digest: ${{ steps.push.outputs.digest }}
+          push-to-registry: true
--- a/4
+++ b/4
@@ -18,3 +18,7 @@ COPY . .
 # Build the application
 ENV NODE_OPTIONS=--max_old_space_size=16384
 RUN pnpm run build
+
+# Default to serving the build directory
+CMD ["npx", "serve", "build"]
+
--- a/README.md
+++ b/README.md
@@ -8,9 +8,24 @@ If you would like to be interoperable with Flotilla, please check out this guide

 To run your own Flotilla, it's as simple as:

- `pnpm install`
- `pnpm run build`
- `npx serve build`
+```sh
+pnpm install
+pnpm run build
+npx serve build
+```
+
+Or, if you prefer to use a container:
+
+```sh
+podman run -d -p 3000:3000 ghcr.io/coracle-social/flotilla:latest
+```
+
+Alternatively, you can copy the build files into a directory of your choice and serve it yourself:
+
+```sh
+mkdir ./mount
+podman run -v ./mount:/app/mount ghcr.io/coracle-social/flotilla:latest bash -c 'cp -r build/* mount'
+```

 ## Environment

@@ -28,84 +43,6 @@ You can also optionally create an `.env` file and populate it with the following

 If you're deploying a custom version of flotilla, be sure to remove the `plausible.coracle.social` script from `app.html`. This sends analytics to a server hosted by the developer.

-## Nginx/TLS (optional)
-
-If you'd like to set up flotilla on a server you control, you'll want to set up a reverse proxy and provision a TSL certificate for the domain you'll be using. You should also make sure to add swap to your server.
-
-There will be some parts of the following templates, for example `<SERVER NAME>`, which you'll need to fill in before running the code.
-
-First, create an `A` record with your DNS provider pointing to the IP of your server. This will allow certbot to create your certificate later.
-
-Next install `nginx`, `git`, and `certbot`. If you're on a debian- or ubuntu-based distro, run `sudo apt-get update && sudo apt-get install nginx git certbot python3-certbot-nginx`.
-
-Now, create a new user where your code will be stored, clone the repository, fill in your `.env` file, and build the app.
-
-```sh
-# Replace with your password
-PASSWORD=<YOUR PASSWORD HERE>
-
-# Add the user and set a password
-adduser flotilla
-echo flotilla:$PASSWORD | chpasswd
-
-# Login as flotilla
-sudo su flotilla
-
-# Go to flotilla's home directory
-cd ~
-
-# Install nvm, yarn, clone repos
-wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
-
-# Update PATH
-. ~/.bashrc
-
-# Clone repository and install dependencies
-git clone https://github.com/coracle-social/flotilla.git
-cd ~/flotilla
-nvm install
-nvm use
-pnpm i
-
-# Optionally create and populate .env to suit your use case
-
-# Build the app
-NODE_OPTIONS=--max_old_space_size=16384 pnpm run build
-
-# Exit back to root
-exit
-```
-
-Once you've exited back to root, you can set up nginx. Place the following in a file named after your domain in the `/etc/nginx/sites-available` directory, for example, `flotilla.example.com`. This should match the `A` record you registered above.
-
-```conf
-server {
-    listen              80;
-    server_name         <SERVER NAME>;
-    root                /home/flotilla/flotilla/build;
-    index               index.html;
-
-    location / {
-        try_files $uri /index.html;
-    }
-}
-```
-
-Now you can run `certbot`, which will provision a TLS certificate for your domain and update your nginx configuration.
-
-```
-certbot --nginx -d <SERVER NAME>
-```
-
-Now, enable the site and restart nginx. If you want to be careful, run `nginx -t` before restarting nginx.
-
-```
-ln -s /etc/nginx/sites-{available,enabled}/<SERVER NAME>
-service nginx restart
-```
-
-Now, visit your domain. You should be all set up!
-
 # Development

-Run `pnpm run dev` to get a dev server, and `pnpm run check:watch` to watch for typescript errors. When you're ready to commit, run `pnpm run format && pnpm run lint` and fix any errors that come up.
+Run `pnpm run dev` to get a dev server, and `pnpm run check:watch` to watch for typescript errors. When you're ready to commit, a pre-commit hook will run to lint and typecheck your work.
--- a/src/assets/icons/Heart.svg
+++ b/src/assets/icons/Heart.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.96173 18.9111L9.42605 18.3221L8.96173 18.9111ZM12 5.50088L11.4596 6.02098C11.601 6.16787 11.7961 6.25088 12 6.25088C12.2039 6.25088 12.399 6.16787 12.5404 6.02098L12 5.50088ZM15.0383 18.9111L15.5026 19.5001L15.0383 18.9111ZM9.42605 18.3221C7.91039 17.1273 6.25307 15.9605 4.93829 14.48C3.64922 13.0285 2.75 11.3347 2.75 9.13734H1.25C1.25 11.8029 2.3605 13.8363 3.81672 15.476C5.24723 17.0868 7.07077 18.3755 8.49742 19.5001L9.42605 18.3221ZM2.75 9.13734C2.75 6.98647 3.96537 5.18277 5.62436 4.42444C7.23607 3.68772 9.40166 3.88282 11.4596 6.02098L12.5404 4.98078C10.0985 2.44377 7.26409 2.02563 5.00076 3.0602C2.78471 4.07317 1.25 6.42527 1.25 9.13734H2.75ZM8.49742 19.5001C9.00965 19.9039 9.55954 20.3345 10.1168 20.6602C10.6739 20.9857 11.3096 21.2502 12 21.2502V19.7502C11.6904 19.7502 11.3261 19.6295 10.8736 19.3651C10.4213 19.1008 9.95208 18.7368 9.42605 18.3221L8.49742 19.5001ZM15.5026 19.5001C16.9292 18.3755 18.7528 17.0868 20.1833 15.476C21.6395 13.8363 22.75 11.8029 22.75 9.13734H21.25C21.25 11.3347 20.3508 13.0285 19.0617 14.48C17.7469 15.9605 16.0896 17.1273 14.574 18.3221L15.5026 19.5001ZM22.75 9.13734C22.75 6.42527 21.2153 4.07317 18.9992 3.0602C16.7359 2.02563 13.9015 2.44377 11.4596 4.98078L12.5404 6.02098C14.5983 3.88282 16.7639 3.68772 18.3756 4.42444C20.0346 5.18277 21.25 6.98647 21.25 9.13734H22.75ZM14.574 18.3221C14.0479 18.7368 13.5787 19.1008 13.1264 19.3651C12.6739 19.6295 12.3096 19.7502 12 19.7502V21.2502C12.6904 21.2502 13.3261 20.9857 13.8832 20.6602C14.4405 20.3345 14.9903 19.9039 15.5026 19.5001L14.574 18.3221Z" fill="#1C274C"/>
+</svg>
--- a/src/lib/components/Icon.svelte
+++ b/src/lib/components/Icon.svelte
@@ -43,6 +43,7 @@
  import Hashtag from "@assets/icons/Hashtag.svg?dataurl"
  import HamburgerMenu from "@assets/icons/Hamburger Menu.svg?dataurl"
  import HandPills from "@assets/icons/Hand Pills.svg?dataurl"
+  import Heart from "@assets/icons/Heart.svg?dataurl"
  import HomeSmile from "@assets/icons/Home Smile.svg?dataurl"
  import Inbox from "@assets/icons/Inbox.svg?dataurl"
  import InfoCircle from "@assets/icons/Info Circle.svg?dataurl"
@@ -136,6 +137,7 @@
    hashtag: Hashtag,
    "hamburger-menu": HamburgerMenu,
    "hand-pills": HandPills,
+    heart: Heart,
    "home-smile": HomeSmile,
    inbox: Inbox,
    "info-circle": InfoCircle,