Static site generator rewrite

.github/workflows/static.yml

@@ -1,43 +1,49 @@
-# Simple workflow for deploying static content to GitHub Pages
-name: Deploy static content to Pages
+name: Deploy SvelteKit to GitHub Pages
 
 on:
-  # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches: [main]
 
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
   contents: read
   pages: write
   id-token: write
 
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
-
+# 2 jobs: build the SvelteKit static site, and deploy the built site to GitHub Pages
 jobs:
-  # Single deploy job since we're just deploying
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Check out the repo code
+      - uses: actions/checkout@v4
+
+      # Use the Node version defined in .nvmrc
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: npm # cache node_modules for faster builds
+
+      - name: Install dependencies
+        run: npm ci # ci (not install) to install exact versions from package-lock.json
+
+      # Build the SvelteKit project
+      - name: Build project
+        run: npm run build
+
+      # Upload build output as artifact
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./build # SvelteKit static output folder
+
   deploy:
+    needs: build # make the build artifact available here in deploy job
+    runs-on: ubuntu-latest
+
     environment:
       name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
+      url: ${{ steps.deploy.outputs.page_url }} # just a convenience, adds page url to action summary page
+
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup Pages
-        uses: actions/configure-pages@v3
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
-        with:
-          # Upload entire repository
-          path: '.'
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v2
+      - id: deploy
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,30 @@
+test-results
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+# Paraglide
+src/lib/paraglide
+
+
+/assets

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.nvmrc

@@ -0,0 +1 @@
+v22.17.0

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+    "cSpell.customDictionaries": {
+        "custom-dictionary-workspace": {
+            "name": "custom-dictionary-workspace",
+            "path": "${workspaceFolder:Local-Connectivity-Lab.github.io}/.cspell/custom-dictionary-workspace.txt",
+            "addWords": true,
+            "scope": "workspace"
+        }
+    }
+}

README.md

@@ -1 +1,78 @@
-#SCN website (operated by LCL)
+# SCN website (operated by LCL)
+
+Code repo for the seattlecommunitynetwork.org website.
+
+This site is built using [SvelteKit](https://svelte.dev/docs/kit/introduction). SvelteKit supports building fully static sites - which is how this site is built. SvelteKit uses NodeJS to run the static site build.
+
+The website is hosted on GitHub pages. See `./.github/workflows/static.yml` for deployment info.
+
+
+## How to update this website
+
+You'll want to run the site locally so you can preview your changes. It's fairly simple to setup if you have any programming experience.
+
+Make your changes and confirm them in your locally running site. Commit change to a feature Branch, and create a pull request in GitHub.
+
+The changes will then need to be reviewed and merged. After merging, a GitHub Action will kick off to build and deploy the site. This should only take 5 mins, after which your changes will be live!
+
+
+### Local setup
+
+**Install NodeJS** - two options:
+
+1. Download and install NodeJS https://nodejs.org/en/download  
+See `./.nvmrc` for the version of NodeJS to install
+1. Use NVM https://github.com/nvm-sh/nvm
+
+**Setup**
+
+1. Clone the repo
+1. Using NVM?
+    1. `nvm install` to install the correct NodeJS version
+    1. `nvm use` to use the installed NodeJS version
+1. Install dependencies with `npm install`
+1. Start a development server `npm run dev`
+
+Open your browser to http://localhost:5173
+
+
+### Update text
+
+All website text is in `./messages/en.json`.
+
+Adding or removing text sections will most certainly require updating a template
+
+
+### Update templates
+
+The website is built with a bunch of `*.svelte` files. Each file has a section for JS, HTML, and CSS.
+
+Each page of the website starts with a `+page.svelte` template, eg: `./src/routes/+page.svelte` for the homepage, and `./src/routes/about-us/+page.svelte` for the About Us.
+
+There's 1 layout template used for all pages - `./src/routes/+layout.ts`.
+
+There is a variety of reusable components in `./src/lib/components/*.svelte`
+
+
+## Tests
+
+There are automated tests using Playwright.
+
+- run this the first time, to install Playwright dependencies: `npx playwright install`
+- `npm run test` to run tests
+
+
+## Production build
+
+To create a *local* production version of your app:
+
+1. `npm run build`
+1. `npm run preview`
+1. open http://localhost:4137
+
+
+## Redirects
+
+No good way to do this with GitHub pages, so we need to create stub sveltekit pages that do a client side redirect.
+
+See `./create-redirect.js`.