SvelteKit migration

.github/workflows/deploy.yml

@@ -0,0 +1,45 @@
+name: svelte deploy gh pages
+
+on:
+  push:
+    branches: ['svelte']
+  workflow_dispatch:
+
+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
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 24
+      - name: Install dependencies
+        run: npm ci
+      - name: Build the code
+        run: npm run build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: 'build'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -1,30 +1,24 @@
-# borrowed from
-# https://github.com/github/gitignore.git
+node_modules
 
-# Jekyll.gitignore
-_site/
-.sass-cache/
-.jekyll-cache/
-.jekyll-metadata
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+/reports
 
-# Ruby.gitignore
-*.gem
-*.rbc
-/.bundle/
-# for a library or gem, you might want to ignore these files since the code is
-# intended to run in multiple environments; otherwise, check them in:
-Gemfile.lock
-.ruby-version
-.ruby-gemset
+# OS
+.DS_Store
+Thumbs.db
 
-# unless supporting rvm < 1.11.0 or doing something fancy, ignore this:
-.rvmrc
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
 
-# Node.gitignore
-node_modules/
-npm-debug.log*
-package-lock.json
-
-# Editor generated files
-.vscode
-*.swp
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.nojekyll

@@ -0,0 +1 @@
+added at the advice of https://svelte.dev/docs/kit/adapter-static#GitHub-Pages

.npmrc

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

.prettierignore

@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/

.prettierrc

@@ -0,0 +1,16 @@
+{
+	"useTabs": true,
+	"singleQuote": false,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	],
+	"tailwindStylesheet": "./src/app.css"
+}

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+    "recommendations":[
+		"bradlc.vscode-tailwindcss",
+        "svelte.svelte-vscode",
+        "yzhang.markdown-all-in-one",
+
+	],
+}

.vscode/settings.json

@@ -0,0 +1,45 @@
+{	
+	// editor tweaks 
+	"editor.wordWrap": "wordWrapColumn",
+   "editor.wordWrapColumn": 120,
+   "editor.rulers": [120],
+    // show files before folders for consistency
+    "explorer.sortOrder": "filesFirst",
+	"explorer.fileNesting.enabled": true,
+	"explorer.fileNesting.expand": false,
+	"explorer.fileNesting.patterns": {
+		"+layout.svelte": "+layout.server.ts,+layout.server.js,+layout.ts,+layout.js,+layout.gql",
+		"+page.svelte": "+page.server.ts,+page.server.js,+page.ts,+page.js,+page.gql"
+	},
+    "files.associations": {
+		  "*.svx": "markdown",
+		  "*.css": "tailwindcss"
+	},
+    // custom tab colors 
+	"workbench.editor.customLabels.patterns": {
+		// Page
+		"**/routes/**/*/+page.svelte": "${dirname} ❱ page",
+		"**/routes/+page.svelte": "/ ❱ page",
+		// Layout
+		"**/routes/**/*/+layout.svelte": "${dirname} ❱ layout",
+		"**/routes/+layout.svelte": "/ ❱ layout",
+		// Page Data
+		"**/routes/**/*/+page.[tj]s": "${dirname} ❱ page",
+		"**/routes/+page.[tj]s": "/ ❱ page",
+		// Layout Data
+		"**/routes/**/*/+layout.[tj]s": "${dirname} ❱ layout",
+		"**/routes/+layout.[tj]s": "/ ❱ layout",
+		// Page Server Data
+		"**/routes/**/*/+page.server.[tj]s": "${dirname} ❱ page.server",
+		"**/routes/+page.server.[tj]s": "/ ❱ page.server",
+		// Page Layout Data
+		"**/routes/**/*/+layout.server.[tj]s": "${dirname} ❱ layout.server",
+		"**/routes/+layout.server.[tj]s": "/ ❱ layout.server",
+		// Error Page
+		"**/routes/**/*/+error.svelte": "${dirname} ❱ error",
+		"**/routes/+error.svelte": "/ ❱ error",
+		// Server Endpoint
+		"**/routes/**/*/+server.[tj]s": "${dirname} ❱ API",
+		"**/routes/+server.[tj]s": "/ ❱ API"
+	}
+}

CNAME

@@ -1 +1 @@
-brdsa.org
+brdsa.teauxfu.dev

HACKING.md

@@ -0,0 +1,138 @@
+# Dev notes
+
+prereqs:
+- node.js
+- an editor (preferably VSCode)
+  - open the workspace file to use its settings. it makes the file explorer easier to use
+  - installing some of the recommended plugins is optional, but get Svelte and TailWind at least
+  - the markdown all in one plugin is nice too
+- a github account
+
+## Cloning the repo 
+
+```
+git clone https://github.com/dsa-ntc/brdsa.github.io.git
+```
+
+or using the [GitHub CLI](https://cli.github.com/) (it's nice)
+
+```
+gh repo clone dsa-ntc/brdsa.github.io
+```
+
+Install the dependencies with 
+
+```
+npm install
+```
+
+Run the app 
+
+```
+npm run dev -- --open
+```
+
+Build and preview the app 
+
+```
+npm run build && npm run preview -- --open
+```
+
+Run the Lighthouse tests. Edit URLs to test in `lighthouse.js`.
+
+```
+npm run test:lighthouse
+```
+
+VSCode is not required, but highly recommended. The suggested settings in `.vscode/settings.json` and `.vscode/extensions.json` were tailored for this project, but are not required. For basic changes or working with Markdown, the online GitHub text editor is probably fine, too.
+
+There shouldn't be too much need for interacting with the TypeScript files, besides maybe `/src/lib/config.ts`.
+
+## Project structure
+
+Here's the docs for the [Svelte markup syntax](https://svelte.dev/docs/svelte/basic-markup).
+SvelteKit (the thing that builds our Svelte code into a website) has some strong opinions about the [project layout](https://svelte.dev/docs/kit/project-structure). 
+
+They may seem weird at first, but they're nice once they click.
+
+- `src` has the main code
+  - `app.html` is the root document, and our content gets injected in there
+  - `app.css` is the root stylesheet
+  - `lib` holds some TypeScript files that the site uses
+    - `config.ts` has some settings that affect the site, like it's title, a list of nav links to show in the header, etc.
+    - `types.ts` has a type definition in it called `PostMetadata` which is what the site expects to show up in the frontmatter of Markdown content
+  - `posts` holds all the copy in the form of markdown files
+    - we can freely reuse pieces of text from here around the site
+  - `routes` is where we define parts of the site by their URL. this is the most Svelte specific part of the project
+    - basically each folder you make under here is a route, and by convention the files always have the same names like `+page.svelte`
+    - so we have folders for some important pages that should have their own URL like `brdsa.org/about` or `brdsa.org/donate`
+    - `blog/[slug]` is a dynamic route that serves all the other content that we don't want to have to explicitly define
+      - `[slug]` is the next URL segment as defined in the Markdown file's frontmatter `slug` property
+      - the code in 
+- `static` is just static stuff that should be served at the site root. `robots.txt`, `favicon.ico` etc.
+
+
+### GitHub workflow
+
+Copied and modified this person's GH workflow, updated the Node version I think?
+https://github.com/khromov/derivault/blob/main/.github/workflows/build.yml
+
+see `.github/deploy.yml`.
+
+### Setting up the blog route
+
+I actually struggled with this a fair bit at first, but it's working now. I don't fully understand some of the more detailed points about JavaScript module loading. The list of posts is served from /api/posts. See postUtils.ts for module loading specifics. Much of the code there was adapted from articles linked below.
+
+### If there's a weird problem
+
+especially if you're getting a weird type error that seems wrong, give a shot just reloading vscode `ctrl shift p` then `developer: reload window`. occassionally the type cache is bad
+
+### Quirks with images
+
+for main content included in a page, we use `enhanced:img` wherever possible, including with a hero image optionall specified in the frontmatter of blog posts. however, it s
+
+### Useful links
+
+action network css examples
+https://help.actionnetwork.org/hc/en-us/articles/115005729066-CSS-snippets-for-embed-customization
+
+text contrast checker https://webaim.org/resources/contrastchecker/
+
+sveltekit project structure
+https://svelte.dev/docs/kit/project-structure
+
+tailwind container query size reference 
+note that the standard viewport breakpoints `sm`, `md`, `lg`, `xl`, and `2xl` are different lengths from the container query breakpoints `@sm`, `@md`, `@lg`, 
+https://tailwindcss.com/docs/responsive-design#working-mobile-first
+https://tailwindcss.com/docs/responsive-design#container-size-reference
+
+how to debug your code
+https://svelte.dev/docs/kit/debugging#Visual-Studio-Code
+
+general guidance for project layout (maybe outdated)
+https://joyofcode.xyz/sveltekit-markdown-blog#rendering-a-single-post
+
+some default settings to put in `.vscode` 
+https://www.sveltepatterns.dev/getting-started-with-vscode
+
+
+### credits
+
+excellent project setup guides, basic plumbing
+https://mli.puffinsystems.com/blog/sveltekit-blog-docs-with-mdsvex
+https://github.com/mvasigh/sveltekit-mdsvex-blog/tree/main
+https://github.com/josh-collinsworth/sveltekit-blog-starter
+
+phenomenal guide, can probably ditch the mdsvex if it's excessive or causing problems
+https://gebna.gg/blog/blog-from-scratch-using-sveltekit
+
+svg icons
+https://simpleicons.org/?q=github
+https://tabler.io/icons
+https://heroicons.com/
+
+underline animation 
+https://cssf1.com/how-to/create-hover-underline-animation-tailwind-css
+
+details/summary animation 
+https://www.youtube.com/watch?v=Vzj3jSUbMtI