Merge 9721925e28 into 5c9a47c31e

2024-05-02 04:51:26 +02:00 · 2024-05-02 04:51:26 +02:00 · a96363c564
commit a96363c564
--- a/.dockerignore
+++ b/.dockerignore
@ -0,0 +1,38 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Custom
+.env.dev
+phanpy-dist.zip
+phanpy-dist.tar.gz
+
+dist/
+node_modules/
+.github/
+readme-assets/
+README.md
+.gitignore
+.prettierrc
+Dockerfile
--- a/.github/workflows/prodtag.yml
+++ b/.github/workflows/prodtag.yml
@ -10,19 +10,84 @@ jobs:
    runs-on: ubuntu-latest
    permissions:
      contents: write
+      packages: write
    steps:
      - uses: actions/checkout@v4
        with:
          ref: production
      # - run: git tag "`date +%Y.%m.%d`.`git rev-parse --short HEAD`" $(git rev-parse HEAD)
      # - run: git push --tags
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-      - run: npm ci && npm run build
-      - run: cd dist && zip -r ../phanpy-dist.zip . && tar -czf ../phanpy-dist.tar.gz . && cd ..
+
      - id: tag_name
        run: echo ::set-output name=tag_name::$(date +%Y.%m.%d).$(git rev-parse --short HEAD)
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # @cheeaun: If you want to check out other ways to tag your Docker image:
+      # https://github.com/docker/metadata-action/blob/master/README.md
+      # I kept "tag_name" as the tag name for the Docker image for now
+      - name: Extract metadata for the Docker image
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            ${{ github.repository }}
+            ghcr.io/${{ github.repository }}
+          tags: |
+            type=raw,value=${{ steps.tag_name.outputs.tag_name }}
+
+      # @cheeaun: I think deploying to Docker Hub and GitHub is a good idea, to always have a fallback
+      # - name: Login to Docker Hub
+      #   uses: docker/login-action@v3
+      #   with:
+      #     username: ${{ secrets.DOCKERHUB_USERNAME }}
+      #     password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      # Source: https://github.com/docker/login-action?tab=readme-ov-file#github-container-registry
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          # @cheeaun: I think this is a good idea to support multiple architectures
+          # Basically here: any Windows, Mac or Linux computers, and 32-bits Raspberry Pi
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          push: true
+          load: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Extract artifacts from the Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          # @cheeaun: And this is where we extract the artifacts from the Docker image
+          # The reason I'm extracting it this way, is that you don't depend on anything else than docker,
+          # and you don't always know if your CI runner will have the tools to zip or tar a directory.
+          push: false
+          load: true
+          tags: ${{ github.repository }}:artifacts-latest
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      # Copy the artifacts files from the Docker container to the host
+      - run: |
+          docker create --name phanpy-artifacts ${{ github.repository }}:artifacts-latest
+          docker cp -q phanpy-artifacts:/root/phanpy/latest.zip ./dist/phanpy-dist.zip
+          docker cp -q phanpy-artifacts:/root/phanpy/latest.tar.gz ./dist/phanpy-dist.tar.gz
+          docker rm phanpy-artifacts
+
      - uses: softprops/action-gh-release@v1
        with:
          tag_name: ${{ steps.tag_name.outputs.tag_name }}
--- a/36
+++ b/36
@ -0,0 +1,36 @@
+#############################################
+# Install everything to build the application
+#############################################
+FROM node:20-alpine AS build
+
+WORKDIR /root/phanpy
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+##################################################
+# Special stage to easily extract the app as a zip
+##################################################
+FROM alpine:3 AS artifacts
+
+WORKDIR /root/phanpy
+
+RUN apk add zip
+COPY --from=build /root/phanpy/dist /root/phanpy/dist
+
+# Outputs:
+# - /root/phanpy/latest.zip
+# - /root/phanpy/latest.tar.gz
+RUN zip -r /root/phanpy/latest.zip dist && \
+    tar -czf /root/phanpy/latest.tar.gz dist
+
+#####################################################
+# Copy the static files to a mininal web server image
+#####################################################
+FROM nginx:1-alpine-slim
+
+ENV NGINX_ENTRYPOINT_QUIET_LOGS=1
+COPY --chown=static:static --from=build /root/phanpy/dist /usr/share/nginx/html
--- a/README.md
+++ b/README.md
@ -1,10 +1,10 @@
 <div align="center">
  <img src="design/logo-4.svg" width="128" height="128" alt="">

-Phanpy
-===
+# Phanpy

 **Minimalistic opinionated Mastodon web client.**
+
 </div>

 ![Fancy screenshot](readme-assets/fancy-screenshot.jpg)
@ -55,7 +55,7 @@ Everything is designed and engineered following my taste and vision. This is a p

 - On the timeline, the user name is displayed as `[NAME] @[username]`.
 - For the `@[username]`, always exclude the instance domain name.
- If the `[NAME]` *looks the same* as the `@[username]`, then the `@[username]` is excluded as well.
+- If the `[NAME]` _looks the same_ as the `@[username]`, then the `@[username]` is excluded as well.

 ### Boosts Carousel

@ -123,17 +123,29 @@ Some of these may change in the future. The front-end world is ever-changing.

 This is a **pure static web app**. You can host it anywhere you want.

-Two ways (choose one):
+Some examples:

-### Easy way
+### Using pre-built releases

 Go to [Releases](https://github.com/cheeaun/phanpy/releases) and download the latest `phanpy-dist.zip` or `phanpy-dist.tar.gz`. It's pre-built so don't need to run any install/build commands. Extract it. Serve the folder of extracted files.

+### Using a Docker image
+
+In your terminal, run:
+
+```
+$ docker run -d -p 8080:80 cheeaun/phanpy
+```
+
+Go to http://localhost:8080 and 🎉
+
+Make sure to deploy the web app using a reverse proxy that make the connection secure (using HTTPS).
+
 ### Custom-build way

 Requires [Node.js](https://nodejs.org/).

-Download or `git clone` this repository. Use `production` branch for *stable* releases, `main` for *latest*. Build it by running `npm run build` (after `npm install`). Serve the `dist` folder.
+Download or `git clone` this repository. Use `production` branch for _stable_ releases, `main` for _latest_. Build it by running `npm run build` (after `npm install`). Serve the `dist` folder.

 Customization can be done by passing environment variables to the build command. Examples:

@ -222,7 +234,7 @@ Costs involved in running and developing this web app:

 ## Mascot

-[Phanpy](https://bulbapedia.bulbagarden.net/wiki/Phanpy_(Pok%C3%A9mon)) is a Ground-type Pokémon.
+[Phanpy](<https://bulbapedia.bulbagarden.net/wiki/Phanpy_(Pok%C3%A9mon)>) is a Ground-type Pokémon.

 ## Maintainers + contributors