Merge pull request 'Favicon, better screen responsive, starting experience layouts' (#6) from website-content-updates into main

Reviewed-on: #6

.gitea/workflows/build-production.yaml

@@ -1,4 +1,4 @@
-name: Build and Test
+name: Build and Test - Production
 on:
   push:
     branches: [main]
@@ -52,6 +52,10 @@ jobs:
             gitea.perren.cloud/caperren/${{ needs.determine_version.outputs.repo_name }}:${{ needs.determine_version.outputs.repo_version_hash }}
             gitea.perren.cloud/caperren/${{ needs.determine_version.outputs.repo_name }}:${{ needs.determine_version.outputs.project_version }}
             gitea.perren.cloud/caperren/caperren-com:latest
+          build-args: |
+            REPO_VERSION_HASH=${{ needs.determine_version.outputs.repo_version_hash }}
+            PROJECT_VERSION=${{ needs.determine_version.outputs.project_version }}
+            BUILD_ENVIRONMENT=production
 
   test:
     runs-on: ubuntu-latest
@@ -85,8 +89,8 @@ jobs:
       - name: Start App
         run: |
           curl -k -X 'POST' \
-            'https://caperren.com:444/api/v2.0/app/stop' \
+            'https://caperren.com:444/api/v2.0/app/start' \
             -H 'accept: */*' \
             -H 'Authorization: Bearer ${{ secrets.TRUENAS_CAPERRENCOM_API_KEY }}' \
             -H 'Content-Type: application/json' \
-            -d '"caperren-com"'
+            -d '"caperren-com"'

.gitea/workflows/build-staging.yaml

@@ -0,0 +1,95 @@
+name: Build and Test - Staging
+on:
+  pull_request:
+    types: [ opened, synchronize, reopened ]
+
+jobs:
+  determine_version:
+    runs-on: ubuntu-latest
+    outputs:
+      repo_name: ${{ steps.project_metadata.outputs.REPO_NAME }}
+      repo_version_hash: ${{ steps.project_metadata.outputs.REPO_VERSION_HASH }}
+      project_version: ${{ steps.project_metadata.outputs.PROJECT_VERSION }}
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node Environment
+        uses: actions/setup-node@v4
+
+      - name: Acquire Project Metadata
+        id: project_metadata
+        run: |
+          echo REPO_NAME=$(echo ${GITHUB_REPOSITORY} | awk -F"/" '{print $2}') >> $GITHUB_OUTPUT
+          echo REPO_VERSION_HASH=$(git describe --tags --always | sed 's/^v//') >> $GITHUB_OUTPUT
+          echo PROJECT_VERSION=$(npm pkg get version --workspaces=false | tr -d \") >> $GITHUB_OUTPUT
+
+  build_and_push:
+    runs-on: ubuntu-latest
+    needs: determine_version
+    steps:
+      - name: Checkout caperren-com Repository
+        uses: actions/checkout@v4
+        with:
+          path: caperren-com
+
+      - name: Login to Docker Registry
+        uses: docker/login-action@v3
+        with:
+          registry: gitea.perren.cloud
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.ACTIONS_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build and Push
+        uses: docker/build-push-action@v5
+        with:
+          context: caperren-com
+          push: true
+          tags: |
+            gitea.perren.cloud/caperren/caperren-com:latest-staging
+          build-args: |
+            REPO_VERSION_HASH=${{ needs.determine_version.outputs.repo_version_hash }}
+            PROJECT_VERSION=${{ needs.determine_version.outputs.project_version }}
+            BUILD_ENVIRONMENT=staging
+
+  test:
+    runs-on: ubuntu-latest
+    needs: build_and_push
+    steps:
+      - run: echo "Placeholder"
+
+  deploy_staging:
+    runs-on: ubuntu-latest
+    needs: test
+    steps:
+      - name: Pull New Image For App
+        run: |
+          curl -k -X 'POST' \
+            'https://caperren.com:444/api/v2.0/app/pull_images' \
+            -H 'accept: */*' \
+            -H 'Authorization: Bearer ${{ secrets.TRUENAS_CAPERRENCOM_API_KEY }}' \
+            -H 'Content-Type: application/json' \
+            -d '{
+            "name": "caperren-com-stg",
+            "options": {}
+          }'
+
+      - name: Stop App
+        run: |
+          curl -k -X 'POST' \
+            'https://caperren.com:444/api/v2.0/app/stop' \
+            -H 'accept: */*' \
+            -H 'Authorization: Bearer ${{ secrets.TRUENAS_CAPERRENCOM_API_KEY }}' \
+            -H 'Content-Type: application/json' \
+            -d '"caperren-com-stg"'
+      - name: Start App
+        run: |
+          curl -k -X 'POST' \
+            'https://caperren.com:444/api/v2.0/app/start' \
+            -H 'accept: */*' \
+            -H 'Authorization: Bearer ${{ secrets.TRUENAS_CAPERRENCOM_API_KEY }}' \
+            -H 'Content-Type: application/json' \
+            -d '"caperren-com-stg"'

Dockerfile

@@ -12,7 +12,16 @@ FROM base AS build-deps
 RUN npm install
 
 FROM build-deps AS build
+
 COPY . .
+
+ARG REPO_VERSION_HASH
+ARG BUILD_ENVIRONMENT
+ARG PROJECT_VERSION
+
+RUN echo "PUBLIC_REPO_VERSION_HASH=\"${REPO_VERSION_HASH}\" \n\
+    PUBLIC_BUILD_ENVIRONMENT=\"${BUILD_ENVIRONMENT}\" \n\
+    PUBLIC_PROJECT_VERSION=\"${PROJECT_VERSION}\"" >> .env
 RUN npm run build
 
 FROM httpd:latest AS runtime

public/favicon.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="40mm"
+   height="40mm"
+   viewBox="0 0 40 40"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <rect
+       style="fill:#000000;stroke-width:0.264583"
+       id="rect1"
+       width="58.244999"
+       height="53.954998"
+       x="-6.105"
+       y="-4.2899995" />
+  </g>
+  <g
+     id="layer2">
+    <g
+       id="g1"
+       transform="matrix(3.9840159,0,0,3.9840159,-182.95899,-268.96729)">
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:3.38667px;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#10ac25;fill-opacity:1;stroke:none;stroke-width:0.282222px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="46.9911"
+         y="76.640976"
+         id="text3344-4-5"><tspan
+           id="tspan3346-7-6"
+           x="46.9911"
+           y="76.640976"
+           style="font-size:11.2889px;line-height:1.25;stroke-width:0.282222px">C</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-weight:normal;font-size:3.38667px;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#10ac25;fill-opacity:1;stroke:none;stroke-width:0.282222px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="49.597134"
+         y="74.229248"
+         id="text3348-1-8"
+         transform="scale(1.0028223,0.99718564)"><tspan
+           id="tspan3350-3-1"
+           x="49.597134"
+           y="74.229248"
+           style="font-size:4.59543px;line-height:1.25;stroke-width:0.282222px">A</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.38667px;line-height:0%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#10ac25;fill-opacity:1;stroke:none;stroke-width:0.282222px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         x="24.869509"
+         y="83.989883"
+         id="text3344-5-7-6"
+         transform="matrix(0.89528488,-0.34221418,0.35348636,0.98184609,0,0)"><tspan
+           id="tspan3370-7-8"
+           x="24.869509"
+           y="83.989883"
+           style="font-size:4.18595px;line-height:1.25;stroke-width:0.282222px">P</tspan></text>
+    </g>
+  </g>
+</svg>

src/components/Footer.astro

@@ -0,0 +1,5 @@
+---
+---
+<footer class="flex justify-center items-center text-center">
+    {import.meta.env.PUBLIC_BUILD_ENVIRONMENT || "development"} | {import.meta.env.PUBLIC_REPO_VERSION_HASH || "invalid"}@{import.meta.env.PUBLIC_PROJECT_VERSION || "0.0.0"}
+</footer>

src/components/Navbar.astro

@@ -33,18 +33,18 @@ const navItems = [
 ];
 ---
 
-<header class="navbar lg:flex p-5 gap-5">
+<header class="navbar md:flex p-5 gap-5">
     <Astronav>
         <div class="flex w-full justify-between">
             <a href="/">
                 <Image src={logoTitle} alt="Logo Title" height="50" loading="eager"/>
             </a>
-            <div class="block lg:hidden">
+            <div class="block md:hidden">
                 <MenuIcon class="w-4 h-4 text-gray-800"/>
             </div>
         </div>
-        <MenuItems class="hidden lg:flex">
+        <MenuItems class="hidden md:flex">
-            <ul class="flex flex-col lg:flex-row lg:gap-5">
+            <ul class="flex flex-col md:flex-row md:gap-5">
                 <li>
                     <a href="/">Home</a>
                 </li>

src/env.d.ts

@@ -0,0 +1,9 @@
+interface ImportMetaEnv {
+    readonly PUBLIC_REPO_VERSION_HASH: string;
+    readonly PUBLIC_PROJECT_VERSION: string;
+    readonly PUBLIC_BUILD_ENVIRONMENT: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}

src/layouts/BaseLayout.astro

@@ -1,20 +1,23 @@
 ---
 import '../styles/global.css'
 import Navbar from '../components/Navbar.astro';
+import Footer from '../components/Footer.astro';
 
-const pageTitle = Astro.props.title ? `${Astro.props.title} - Corwin Perren`: "Corwin Perren";
+const pageTitle = Astro.props.title ? `${Astro.props.title} - Corwin Perren` : "Corwin Perren";
 ---
 <!doctype html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8" />
+    <meta charset="UTF-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>{pageTitle}</title>
 </head>
 <body>
-<Navbar />
+<Navbar/>
 <main style="padding: 2rem;">
-    <slot />
+    <slot/>
 </main>
+<Footer/>
 </body>
 </html>

src/layouts/ExperienceLayout.astro

@@ -0,0 +1,6 @@
+---
+import BaseLayout from './BaseLayout.astro';
+---
+<BaseLayout>
+    <slot/>
+</BaseLayout>

src/pages/experience/spacex/avionics-test-engineering-intern.astro

@@ -0,0 +1,9 @@
+---
+import ExperienceLayout from '../../../layouts/ExperienceLayout.astro';
+import {Image} from 'astro:assets';
+
+import spring_2019_interns from "../../../assets/experience/spacex/avionics-test-engineering-intern/spring-2019-interns.jpg";
+---
+<ExperienceLayout>
+    <Image class="mx-auto block" src={spring_2019_interns} alt="spring-2019-interns.jpg" loading="eager"/>
+</ExperienceLayout>

src/pages/experience/spacex/hardware-test-engineer-ii.astro

@@ -0,0 +1,9 @@
+---
+import ExperienceLayout from '../../../layouts/ExperienceLayout.astro';
+import {Image} from 'astro:assets';
+
+import starlink_headquarters_selfie from "../../../assets/experience/spacex/hardware-test-engineer-ii/starlink_headquarters_selfie.jpg";
+---
+<ExperienceLayout>
+    <Image class="mx-auto block" src={starlink_headquarters_selfie} alt="starlink_headquarters_selfie" loading="eager"/>
+</ExperienceLayout>

src/pages/hobby/motorcycling.astro

@@ -0,0 +1,2 @@
+---
+---

src/styles/global.css

@@ -24,6 +24,10 @@ a {
     white-space: nowrap;
 }
 
+
+footer {
+    border-top: 2px solid var(--color-caperren-green);
+}
 /*.astronav-dropdown .group {*/
 /*    background-color: black;*/
 /*}*/