refactor: unify bundled assets with subdirs and Hugo mounts

Move bundled outputs to dedicated css/js subdirs. Update Vite
config to output directly to bundled/ with simplified naming.
Add Hugo module mounts to expose as assets/bundled and
static/bundled. Adjust gitignore and partial accordingly.

Signed-off-by: Sped0n <hi@sped0n.com>

.github/workflows/build.yml

@@ -24,10 +24,13 @@ jobs:
 
       - name: Get changed files in scope
         id: changed-files-specific
-        uses: tj-actions/changed-files@v46
+        uses: tj-actions/changed-files@v47
         with:
           files: |
             package.json
+            pnpm-lock.yaml
+            tsconfig.json
+            vite.config.ts
             assets/**
 
   build:
@@ -36,7 +39,6 @@ jobs:
     name: Build (Hugo ${{ matrix.hugo-version }})
     needs: [filter]
     if: |
-      github.ref == 'refs/heads/main' &&
       github.event.repository.fork == false
     strategy:
       matrix:
@@ -58,13 +60,10 @@ jobs:
           hugo-version: ${{ matrix.hugo-version }}
           extended: true
 
-      - name: Setup Dart Sass
-        run: sudo snap install dart-sass
-
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 10
 
       - name: Get pnpm store directory
         id: pnpm-cache
@@ -91,8 +90,7 @@ jobs:
 
       - name: Build
         run: |
-          pnpm run vite:build
-          hugo --logLevel info --source=exampleSite --gc --minify
+          pnpm run build
 
       - name: Push artifacts
         if: >

.github/workflows/eslint.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 10
 
       - name: Get pnpm store directory
         id: pnpm-cache
@@ -34,7 +34,7 @@ jobs:
         uses: actions/cache@v4
         with:
           path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('./pnpm-lock.yaml') }}
           restore-keys: ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies

.gitignore

@@ -1,6 +1,6 @@
 # Hugo default output directory
 public/
-/exampleSite/resources/
+exampleSite/resources/
 
 node_modules/
 build/
@@ -25,3 +25,6 @@ jsconfig.json
 
 # css map
 *.css.map
+
+# dummmy file
+bundled/css/critical.js

.prettierignore

@@ -1,5 +1,6 @@
-node_modules
-static
-exmapleSite
+node_modules/
+static/
+exmapleSite/
 single.json
 pnpm-lock.yaml
+bundled/

README.md

@@ -2,7 +2,7 @@
 
 ![GitHub Workflow Status (with event)](https://img.shields.io/github/actions/workflow/status/Sped0n/bridget/build.yml?logo=github) ![GitHub deployments](https://img.shields.io/github/deployments/Sped0n/bridget/Production?logo=vercel&label=deploy)
 
-Bridget is a minimal [Hugo](https://gohugo.io) theme for photographers/visual artists, powered by [Solid.js](https://www.solidjs.com). Based on the https://github.com/tylermcrobert/bridget-pictures-www.
+Bridget is a minimal [Hugo](https://gohugo.io) theme for photographers/visual artists, based on https://github.com/tylermcrobert/bridget-pictures-www.
 
 Here is a [live demo](https://bridget-demo.sped0n.com).
 

assets/scss/_core/_font.scss

@@ -1,9 +1,10 @@
 @font-face {
   font-family: 'Geist';
   src:
-    url('{{- "lib/fonts/GeistVF.woff2" | absURL -}}')
+    url(/* @vite-ignore */'{{- "lib/fonts/GeistVF.woff2" | absURL -}}')
       format('woff2 supports variations'),
-    url('{{- "lib/fonts/GeistVF.woff2" | absURL -}}') format('woff2-variations');
+    url(/* @vite-ignore */'{{- "lib/fonts/GeistVF.woff2" | absURL -}}')
+      format('woff2-variations');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
@@ -11,7 +12,7 @@
 
 @font-face {
   font-family: 'FW';
-  src: url('/lib/fonts/fw.woff2') format('woff2');
+  src: url(/* @vite-ignore */'{{- "lib/fonts/fw.woff2" | absURL -}}') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;

assets/ts/critical.ts

@@ -0,0 +1,2 @@
+// this is a dummy file to trick vite to generate a critical.css file
+import '../scss/critical.scss'

bundled/css/critical.css

@@ -0,0 +1 @@
+*:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,*:before,*:after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}a,button{cursor:revert}ol,ul,menu,summary{list-style:none}img{max-inline-size:100%;max-block-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert;box-sizing:border-box}::placeholder{color:unset}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable=false])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable=true]){-webkit-user-drag:element}:where(dialog:modal){all:revert;box-sizing:border-box}@font-face{font-family:Geist;src:url('{{- "lib/fonts/GeistVF.woff2" | absURL -}}') format("woff2 supports variations"),url('{{- "lib/fonts/GeistVF.woff2" | absURL -}}') format("woff2-variations");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:FW;src:url('{{- "lib/fonts/fw.woff2" | absURL -}}') format("woff2");font-weight:400;font-style:normal;font-display:swap}body{line-height:1.2;font-size:16px;font-family:Geist,sans-serif}body button{font-family:FW,sans-serif}@media(min-width:768px){body{font-size:18px}}@media(min-width:1024px){body{font-size:19px}}:root{--window-height: 100vh;--nav-height: 2rem;--space-standard: .625rem;--z-curtain: 200;--z-nav-gallery: 500;--z-cursor: 600;--z-nav: 800}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{-webkit-user-select:none;user-select:none;background:#fff}html,body{overscroll-behavior-y:none}a,button{cursor:pointer}nav{display:flex;justify-content:space-between;align-items:center;width:100%;height:var(--nav-height);padding:0 var(--space-standard);position:fixed;bottom:0;background:#fff;z-index:var(--z-nav);pointer-events:all}.num{width:.625em;display:inline-block;text-align:center}.current{font-style:italic;text-decoration:underline}@media(max-width:767px),(hover:none){nav{top:0}.index,.threshold{display:none}}article{padding:var(--space-standard);max-width:25em}article p{margin-bottom:1em}article u{text-decoration:underline}article>h1{font-size:1.6em}article>h2{font-size:1.5em}article>h3{font-size:1.375em}article>h4{font-size:1.25em}article>h5{font-size:1.125em}article h1,article h2,article h3,article h4,article h5,article h6{font-weight:700;margin:1.2rem 0}@media(max-width:767px),(hover:none){article{margin-top:var(--nav-height)}}@media(max-width:767px),(hover:none){.container{position:fixed;top:0;z-index:0;width:100vw;height:var(--window-height);overflow-y:scroll;overflow-x:hidden;background:#fff;overscroll-behavior:none;-webkit-overflow-scrolling:none}.disableScroll{pointer-events:none}}

docs.md

@@ -15,6 +15,7 @@
   - [`outputs.toml`](#outputstoml)
   - [`params.toml`](#paramstoml)
   - [`sitemap.toml`](#sitemaptoml)
+- [Usage](#usage)
 - [Customizations](#customizations)
   - [Change Font](#change-font)
   - [Add a Custom Analytic Script](#add-a-custom-analytic-script)
@@ -25,24 +26,19 @@
 
 _[Contents](#contents)_
 
-- Hugo (extended), minimum required version can be seen in the [`theme.toml`](https://github.com/Sped0n/bridget/blob/main/theme.toml#L19)
+- [Hugo (extended)](https://gohugo.io/installation/), minimum required version can be seen in the [`theme.toml`](https://github.com/Sped0n/bridget/blob/main/theme.toml#L19)
 
   ```bash
   ❯ hugo version
   hugo v0.152.2+extended+withdeploy darwin/arm64 BuildDate=unknown VendorInfo=nixpkgs
   ```
 
-- [Dart Sass](https://gohugo.io/functions/css/sass/#dart-sass) (**DO NOT INSTALL IT FROM NPM**, since it is doesn't support `--embedded`)
+- [pnpm](https://pnpm.io/installation) and [Node.js](https://nodejs.org/en/download), please note that these two are only needed for customizations or development.
 
   ```bash
-  ❯ sass --embedded --version
-  {
-    "protocolVersion": "2.4.0",
-    "compilerVersion": "1.70.0",
-    "implementationVersion": "1.70.0",
-    "implementationName": "dart-sass",
-    "id": 0
-  }
+  ❯ pnpm --version && node --version
+  10.20.0
+  v22.20.0
   ```
 
 ## Installation
@@ -260,6 +256,14 @@ _[Contents](#contents)_
 
 https://gohugo.io/templates/sitemap-template/#configuration
 
+## Usage
+
+_[Contents](#contents)_
+
+Bridget will work as a normal Hugo theme (if you don't have needs to customize), https://gohugo.io/getting-started/usage/ is a great start.
+
+For further reading, you can refer to the `scripts` field of `package.json`.
+
 ## Customizations
 
 _[Contents](#contents)_
@@ -267,9 +271,11 @@ _[Contents](#contents)_
 > [!IMPORTANT]
 > Please make sure you have [installation with Git](#git-repository-for-customizations).
 >
-> - Use `pnpm install` to install neceessary dependencies.
-> - Use `pnpm run dev` to start a dev server (`http://localhost:1313`).
-> - When you’re ready, run `pnpm run build` to update artifacts.
+> If you want to try some changes on the `exampleSite`, below are some commands you might need:
+>
+> - `pnpm install` to install dependencies.
+> - `pnpm run dev` to start a dev server (`http://localhost:1313`).
+> - `pnpm run build` to update artifacts.
 
 ### Change Font
 

eslint.config.mjs

@@ -1,4 +1,4 @@
-import { default as eslint, default as js } from '@eslint/js'
+import js from '@eslint/js'
 import tsParser from '@typescript-eslint/parser'
 import love from 'eslint-config-love'
 import importPlugin from 'eslint-plugin-import'
@@ -9,11 +9,10 @@ import tseslint from 'typescript-eslint'
 
 export default defineConfig([
   js.configs.recommended,
-  eslint.configs.recommended,
   tseslint.configs.recommended,
   importPlugin.flatConfigs.recommended,
   solid,
-  globalIgnores(['**/node_modules', '**/static', '**/exampleSite', '*.mjs']),
+  globalIgnores(['node_modules/', 'static/', 'exampleSite/', '*.mjs', 'bundled/']),
   {
     ...love,
     ...prettier,

exampleSite/config/_default/hugo.toml

@@ -13,4 +13,4 @@ enableRobotsTXT = true
 [module]
 replacements = "github.com/Sped0n/bridget/v2 -> ../.." # deploy with local dir (relative to hugo site theme dir)  WARN: delete this line if you want to deploy with git
 [[module.imports]]
-path = "github.com/Sped0n/bridget/v2" # deploy with git (recommended)  WARN: you should also set `bundled` to true in params.toml !!!
+path = "github.com/Sped0n/bridget/v2" # deploy with git (recommended)

exampleSite/content/Info/index.md

@@ -12,7 +12,7 @@ build:
   publishResources: false
 ---
 
-Bridget is a _minimal_ Hugo theme designed for photographers/visual artists, powered by <u>[Solid.js](https://www.solidjs.com)</u>.
+Bridget is a _minimal_ Hugo theme designed for photographers/visual artists, powered by <u>[SolidJS](https://www.solidjs.com)</u>.
 
 The inspiration for this theme came from a video by <u>[Hyperlexed](https://www.youtube.com/@Hyperplexed)</u>, which can be found <u>[here](https://www.youtube.com/watch?v=Jt3A2lNN2aE)</u>. Initially, it was developed using no third-party dependencies. However, after website designer <u>[Tyler McRobert](https://tylermcrobert.com)</u> made the source code publicly available, I realized that I have invented many unnecessary wheels, and this project was modified to porting the original design to Hugo while focusing on _performance_.
 

flake.nix

@@ -27,7 +27,6 @@
             packages = with pkgs; [
               nodejs
               nodePackages.pnpm
-              dart-sass
               hugo
               go
             ];

hugo.toml

@@ -0,0 +1,18 @@
+[[module.mounts]]
+source = 'archetypes'
+target = 'archetypes'
+[[module.mounts]]
+source = 'assets'
+target = 'assets'
+[[module.mounts]]
+source = 'layouts'
+target = 'layouts'
+[[module.mounts]]
+source = 'static'
+target = 'static'
+[[module.mounts]]
+source = "bundled"
+target = "assets/bundled"
+[[module.mounts]]
+source = "bundled"
+target = "static/bundled"

layouts/partials/head/link.html

@@ -2,8 +2,8 @@
 {{- $fingerprint := .Scratch.Get "fingerprint" | default "" -}}
 
 {{- /* critical style */ -}}
-{{- $style := dict "Source" "scss/critical.scss" "Fingerprint" $fingerprint -}}
-{{- $options := dict "enableSourceMap" true "includePaths" (slice "node_modules") "transpiler" "dartsass" -}}
+{{- $style := dict "Source" "bundled/css/critical.css" "Fingerprint" $fingerprint -}}
+{{- $options := dict "enableSourceMap" false -}}
 {{- $style = dict "Context" . "ToCSS" $options "Inline" true "Template" true | merge $style -}}
 {{- partial "plugin/style.html" $style -}}
 

package.json

@@ -3,7 +3,7 @@
   "version": "v1.0.0",
   "type": "module",
   "description": "bridget theme source file",
-  "packageManager": "pnpm@8.10.2",
+  "packageManager": "pnpm@10.20.0",
   "private": true,
   "sideEffects": false,
   "scripts": {
@@ -39,8 +39,8 @@
   },
   "homepage": "https://github.com/Sped0n/bridget#readme",
   "devDependencies": {
+    "@eslint/js": "^9.39.1",
     "@types/node": "^24.10.0",
-    "@typescript-eslint/eslint-plugin": "^8.46.4",
     "@typescript-eslint/parser": "^8.46.4",
     "eslint": "^9.39.1",
     "eslint-config-love": "^133.0.0",
@@ -53,8 +53,9 @@
     "prettier": "3.6.2",
     "prettier-plugin-go-template": "^0.0.15",
     "prettier-plugin-organize-imports": "^4.3.0",
-    "sass": "^1.94.0",
+    "sass-embedded": "^1.93.3",
     "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.4",
     "vite": "^7.2.2",
     "vite-plugin-solid": "^2.11.10"
   },

vercel.sh

@@ -3,20 +3,6 @@ set -euo pipefail
 
 node_modules_generated_dir="./node_modules/exampleSite/resources/_gen"
 project_generated_dir="./exampleSite/resources/_gen"
-dart_sass_version="1.93.3"
-dart_sass_install_dir="${HOME}/.local/dart-sass"
-dart_sass_tarball="dart-sass-${dart_sass_version}-linux-x64.tar.gz"
-dart_sass_download_url="https://github.com/sass/dart-sass/releases/download/${dart_sass_version}/${dart_sass_tarball}"
-
-install_dart_sass() {
-  echo "Installing Dart Sass ${dart_sass_version}..."
-  mkdir -p "${HOME}/.local"
-  curl -sSLO "${dart_sass_download_url}"
-  rm -rf "${dart_sass_install_dir}"
-  tar -C "${HOME}/.local" -xf "${dart_sass_tarball}"
-  rm -f "${dart_sass_tarball}"
-  export PATH="${dart_sass_install_dir}:${PATH}"
-}
 
 copy_generated_assets_to_project() {
   if [ -d "${node_modules_generated_dir}" ]; then
@@ -44,7 +30,6 @@ copy_generated_assets_to_node_modules() {
   fi
 }
 
-install_dart_sass
 copy_generated_assets_to_project
 run_site_build
 copy_generated_assets_to_node_modules

vite.config.ts

@@ -4,14 +4,17 @@ import solidPlugin from 'vite-plugin-solid'
 export default defineConfig({
   plugins: [solidPlugin()],
   build: {
-    outDir: './static/bundled',
+    outDir: './bundled',
     watch: process.env.DISABLE_WATCH
       ? null
       : {
           include: 'assets/**'
         },
     rollupOptions: {
-      input: './assets/ts/main.tsx',
+      input: {
+        main: './assets/ts/main.tsx',
+        critical: './assets/ts/critical.ts'
+      },
       output: {
         format: 'es',
         entryFileNames: 'js/[name].js',
@@ -20,5 +23,12 @@ export default defineConfig({
         compact: true
       }
     }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        loadPaths: ['./assets/scss']
+      }
+    }
   }
 })