ci: build with multiple Hugo versions and update caches

Add matrix strategy for 'latest' and '0.114.0' in build job. Update
pnpm and Hugo cache keys for better reliability. Push artifacts only
for 'latest' version. Add [skip ci] to format commit message.

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

.envrc

@@ -0,0 +1 @@
+use flake

.eslintignore

@@ -1,3 +0,0 @@
-node_modules
-static
-exampleSite

.eslintrc.json

@@ -1,56 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": [
-    "standard-with-typescript",
-    "prettier",
-    "eslint:recommended",
-    "plugin:prettier/recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
-  "overrides": [],
-  "plugins": ["prettier", "@typescript-eslint"],
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "project": "./tsconfig.json",
-    "sourceType": "module"
-  },
-  "rules": {
-    "prettier/prettier": "error",
-    "arrow-body-style": "off",
-    "prefer-arrow-callback": "off",
-    "import/no-cycle": "error",
-    "@typescript-eslint/non-nullable-type-assertion-style": "off",
-    "sort-imports": [
-      "error",
-      {
-        "ignoreCase": false,
-        "ignoreDeclarationSort": true,
-        "ignoreMemberSort": false,
-        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
-        "allowSeparatedGroups": true
-      }
-    ],
-    "import/no-unresolved": "error",
-    "import/order": [
-      "error",
-      {
-        "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
-        "newlines-between": "always",
-        "alphabetize": {
-          "order": "asc",
-          "caseInsensitive": true
-        }
-      }
-    ]
-  },
-  "settings": {
-    "import/resolver": {
-      "typescript": {
-        "project": "./tsconfig.json"
-      }
-    }
-  }
-}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,33 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Environment (please complete the following information):**
-
-- OS: [e.g. macOS]
-- Browser [e.g. chrome, safari]
-- Hugo Version [e.g. v0.114.0 extended]
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/bug_report.yaml

@@ -0,0 +1,115 @@
+name: Bug report
+description: Create a bug report
+labels:
+  - 'T: Bug'
+  - 'S: Untriaged'
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Please finish verify steps which list in the end first before create bug report
+
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: Step to reproduce
+      description: |
+        Please write down the reproduction steps here and include the error log. If necessary, please provide screenshots or recordings.
+      placeholder: |
+        1.
+        2.
+        3.
+        [Screen recording]
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected behaviour
+      description: |
+        Describe what should happened here
+      placeholder: |
+        It should be ...
+    validations:
+      required: true
+
+  - type: textarea
+    id: actual
+    attributes:
+      label: Actual Behaviour
+      description: |
+        Describe what actually happened here, screenshots is better
+      placeholder: |
+        Actually it ...
+        [Screenshots]
+    validations:
+      required: true
+
+  - type: textarea
+    id: env
+    attributes:
+      label: Logs
+      description: |
+        CLI output or browser log.
+      placeholder: |
+        ❯ pnpm run server
+
+        > bridget@v1.0.0 server /Users/spedon/eden/hugo/bridget
+        > run-p vite:server hugo:server
+    validations:
+      required: false
+
+  - type: textarea
+    id: more
+    attributes:
+      label: Addition details
+      description: |
+        Describe addition details here
+      placeholder: |
+        Additional details and attachments
+    validations:
+      required: false
+
+  - type: input
+    id: hugo-version
+    attributes:
+      label: Hugo version
+      description: You can get version output with hugo --version
+      placeholder: v0.114.0
+    validations:
+      required: true
+
+  - type: input
+    id: bridget-version
+    attributes:
+      label: Bridget version
+      description: Release version or commit SHA
+      placeholder: v1.0.1 or 633f6a40e202a023471c58c09f05a92ec2130c93
+    validations:
+      required: true
+
+  - type: input
+    id: system
+    attributes:
+      label: OS version
+      description: OS + version code
+      placeholder: Windows 11, macOS 14
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: check
+    attributes:
+      label: Verify steps
+      description: |
+        Please ensure you have obtained all needed options
+      options:
+        - label: Pull request is welcome. Check this if you want to start a pull request
+          required: false
+
+        - label: I have searched on [Issue Tracker](https://github.com/Sped0n/bridget/issues), No duplicate or related open issue has been found
+          required: true
+
+        - label: Ensure there is only one bug report in this issue. Please make mutiply issue for mutiply bugs
+          required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: All other questions
+    url: https://github.com/Sped0n/bridget/discussions
+    about: Turn to discussions

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,19 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/feature_request.yaml

@@ -0,0 +1,60 @@
+name: Feature request
+description: Suggest an idea
+labels:
+  - 'T: Feature'
+  - 'S: Untriaged'
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Please finish verify steps which list in the end first before suggest an idea
+
+  - type: textarea
+    id: request
+    attributes:
+      label: Requirement
+      description: |
+        Ddescribe what you need here.
+      placeholder: |
+        I want ABC feature ...
+    validations:
+      required: true
+
+  - type: textarea
+    id: impl
+    attributes:
+      label: Suggested implements
+      description: |
+        Describe your suggested implements here, It's recommend to add a photo if you are making a UI feature request.
+      placeholder: |
+        I recommend add ABC feature to DEF...
+        Photos (if exists)
+    validations:
+      required: true
+
+  - type: textarea
+    id: more
+    attributes:
+      label: Addition details
+      description: |
+        Describe addition details here
+      placeholder: |
+        Additional details and attachments
+    validations:
+      required: false
+
+  - type: checkboxes
+    id: check
+    attributes:
+      label: Verify steps
+      description: |
+        Please ensure you have obtained all needed options
+      options:
+        - label: Pull request is welcome. Check this if you want to start a pull request
+          required: false
+
+        - label: I have searched on [Issue Tracker](https://github.com/Sped0n/bridget/issues), No duplicate or related open issue has been found
+          required: true
+
+        - label: Ensure there is only one feature request in this issue. Please make mutiply issue for mutiply feature request
+          required: true

.github/dependabot.yml

@@ -8,5 +8,5 @@ updates:
   - package-ecosystem: 'npm' # See documentation for possible values
     directory: '/' # Location of package manifests
     schedule:
-      interval: 'daily'
+      interval: 'weekly'
     open-pull-requests-limit: 1000

.github/workflows/build.yml

@@ -18,13 +18,13 @@ jobs:
     outputs:
       any_changed: ${{ steps.changed-files-specific.outputs.any_changed }}
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Get changed files in scope
         id: changed-files-specific
-        uses: tj-actions/changed-files@v40
+        uses: tj-actions/changed-files@v46
         with:
           files: |
             package.json
@@ -33,11 +33,14 @@ jobs:
   build:
     timeout-minutes: 30
     runs-on: ubuntu-latest
-    name: Build
+    name: Build (Hugo ${{ matrix.hugo-version }})
     needs: [filter]
     if: |
       github.ref == 'refs/heads/main' &&
       github.event.repository.fork == false
+    strategy:
+      matrix:
+        hugo-version: ['latest', '0.114.0']
     steps:
       - name: Set current date as env variable
         run: |
@@ -45,16 +48,21 @@ jobs:
         id: version
 
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.PAT }}
 
       - name: Setup Hugo
-        uses: peaceiris/actions-hugo@v2
+        uses: peaceiris/actions-hugo@v2.6.0
         with:
-          hugo-version: '0.114.0'
+          hugo-version: ${{ matrix.hugo-version }}
           extended: true
 
+      - name: Setup Dart Sass
+        run: sudo snap install dart-sass
+
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 8
 
@@ -63,31 +71,34 @@ jobs:
         run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - name: Setup pnpm cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: ${{ runner.os }}-pnpm-store-
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('./pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Setup hugo cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ./exampleSite/resources
-          key: ${{ runner.os }}-hugo-${{ hashFiles('./exampleSite') }}
-          restore-keys: ${{ runner.os }}-hugo-
+          key: ${{ runner.os }}-hugo-${{ matrix.hugo-version }}-${{ hashFiles('./exampleSite') }}
+          restore-keys: |
+            ${{ runner.os }}-hugo-${{ matrix.hugo-version }}-
 
       - name: Install dependencies
         run: pnpm install
 
       - name: Build
-        run: pnpm run build
+        run: |
+          pnpm run vite:build
+          hugo --logLevel info --source=exampleSite --gc --minify
 
       - name: Push artifacts
-        if: ${{ (github.event_name == 'push' || github.event.pull_request.merged == true) && needs.filter.outputs.any_changed == 'true' }}
-        uses: peter-evans/create-pull-request@v5
+        if: >
+          matrix.hugo-version == 'latest' &&
+          (github.event_name == 'push' || github.event.pull_request.merged == true) &&
+          needs.filter.outputs.any_changed == 'true'
+        uses: stefanzweifel/git-auto-commit-action@v5
         with:
-          token: ${{ secrets.PAT }}
-          title: Update bundled artifacts
-          commit-message: Update bundled artifacts
-          branch: update-artifacts-${{ steps.version.outputs.builddate }}
-          base: main
+          commit_message: 'ci: update bundled artifacts [skip ci]'

.github/workflows/eslint.yml

@@ -17,10 +17,12 @@ jobs:
     name: Lint
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.PAT || github.token }}
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 8
 
@@ -29,7 +31,7 @@ jobs:
         run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - name: Setup pnpm cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
@@ -38,5 +40,18 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name: Lint
+      - name: Lint Check
+        continue-on-error: true
+        id: check
         run: pnpm run lint:check
+
+      - name: Format manually
+        id: format
+        if: ${{ steps.check.outcome == 'failure' }}
+        run: pnpm run lint
+
+      - name: Commit
+        if: ${{ steps.format.outcome == 'success' }}
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: 'ci: format code [skip ci]'

.gitignore

@@ -21,4 +21,7 @@ $RECYCLE.BIN/
 
 # Hugo
 .hugo_build.lock
-jsconfig.json
+jsconfig.json
+
+# css map
+*.css.map

.prettierignore

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

.prettierrc.json

@@ -1,18 +0,0 @@
-{
-  "useTabs": false,
-  "tabWidth": 2,
-  "printWidth": 88,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "bracketSpacing": true,
-  "semi": false,
-  "plugins": ["prettier-plugin-go-template", "prettier-plugin-organize-imports"],
-  "overrides": [
-    {
-      "files": ["*.html"],
-      "options": {
-        "parser": "go-template"
-      }
-    }
-  ]
-}

CODE_OF_CONDUCT.md

@@ -60,7 +60,7 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-hi@sped0nwen.com.
+hi@sped0n.com.
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

README.md

@@ -2,47 +2,41 @@
 
 ![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 designed for photographers / visual artists.
+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.
 
-It’s based on the https://github.com/tylermcrobert/bridget-pictures-www.
+Here is a [live demo](https://bridget-demo.sped0n.com).
 
-![thumbnail](images/tn.jpg)
+![thumbnail](https://raw.githubusercontent.com/Sped0n/bridget/main/images/tn.jpg)
 
-## [Demo Site](https://bridget-demo.sped0nwen.com)
-
-To see this theme in action, here is a live [demo site](https://bridget-demo.sped0nwen.com) which is rendered with **Bridget** theme.
+> [!NOTE]
+> This repository is currently in **maintaince mode** for two reasons:
+>
+> 1. I want to keep this theme minimal.
+> 2. My bandwith after work is limited.
+>
+> BUT, bug fixes will be addressed (including related issues and PRs), and they are the **number one priority** for this project.
+>
+> Please understand that feature request might **NOT** be addressed or may take a long time to be implemented.
+>
+> Anyway, forks are welcomed, and I'm looking forward to seeing what you can do with the theme.
 
 ## Getting Started
 
-Head to this [documentation](https://github.com/Sped0n/bridget/blob/main/doc/getStarted.md) for a complete guidance to get started with the Bridget theme.
+Head to this [documentation](https://github.com/Sped0n/bridget/blob/main/docs.md) for a complete guidance to get started with the theme.
 
 ## Features
 
-- **Blazingly fast**: 99/100 on mobile and 100/100 on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
-
-- JS **dynamic loading** (powered by ES6 syntax)
-- JS **code splitting** by [rollup.js](https://rollupjs.org)
-- Image **Preloading**/**Lazy loading**
+- **Blazingly fast**: 100/100 on both desktop and mobile in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
+- Powered by **[SolidJS](https://www.solidjs.com)**, a declarative, efficient, and flexible JavaScript library for building user interfaces
+- JS **dynamic loading**
+- Image **preloading** + **lazy loading**
 - **Dynamic resolution** based on view mode
 - Multiple **analytics** services supported
 - Search engine **verification** supported (Google, Bind, Yandex and Baidu)
 
-## Multilingual and i18n
-
-Bridget supports the following languages:
-
-- English
-- Simplified Chinese
-- Traditional Chinese
-- Japanese
-- Korean
-- Deutsch
-- Spanish
-- Italian
-- [Contribute with a new language](https://github.com/Sped0n/bridget/pulls)
-
 ## Credits
 
 - https://github.com/tylermcrobert/bridget-pictures-www
 - https://www.youtube.com/watch?v=Jt3A2lNN2aE
 - https://github.com/d4cho/bridget-pictures-clone
+- https://www.solidjs.com/tutorial

assets/scss/_core/_font.scss

@@ -1,48 +1,9 @@
 @font-face {
   font-family: 'Geist';
   src:
-    url('/lib/fonts/GeistVF.woff2') format('woff2 supports variations'),
-    url('/lib/fonts/GeistVF.woff2') format('woff2-variations');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Noto Sans CJK SC';
-  src: url('/lib/fonts/NotoSansCJKsc-Regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Noto Sans CJK TC';
-  src: url('/lib/fonts/NotoSansCJKtc-Regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Noto Sans CJK JP';
-  src: url('/lib/fonts/NotoSansCJKjp-Regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Noto Sans CJK KR';
-  src: url('/lib/fonts/NotoSansCJKkr-Regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Noto Sans';
-  src: url('/lib/fonts/NotoSans-Regular.woff2') format('woff2');
+    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;

assets/scss/_core/_foundation.scss

@@ -0,0 +1,4 @@
+@forward 'reset';
+@forward 'font';
+@forward 'typography';
+@forward 'mixins';

assets/scss/_core/_mixins.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $breakpoints: (
   'mobile': 375px,
   'tablet': 768px,
@@ -8,8 +10,8 @@ $breakpoints: (
 // Breakpoints
 
 @mixin min-width($breakpoint) {
-  @if map-has-key($breakpoints, $breakpoint) {
-    @media (min-width: map-get($breakpoints, $breakpoint)) {
+  @if map.has-key($breakpoints, $breakpoint) {
+    @media (min-width: map.get($breakpoints, $breakpoint)) {
       @content;
     }
   } @else {
@@ -18,8 +20,8 @@ $breakpoints: (
 }
 
 @mixin max-width($breakpoint) {
-  @if map-has-key($breakpoints, $breakpoint) {
-    @media (max-width: (map-get($breakpoints, $breakpoint) - 1px)) {
+  @if map.has-key($breakpoints, $breakpoint) {
+    @media (max-width: (map.get($breakpoints, $breakpoint) - 1px)) {
       @content;
     }
   } @else {

assets/scss/_core/_typography.scss

@@ -1,12 +1,12 @@
-@import 'mixins';
+@use 'mixins' as *;
 
 body {
   line-height: 1.2;
   font-size: 16px;
-  font-family: sans-serif;
+  font-family: 'Geist', sans-serif;
 
   button {
-    font-family: 'FW';
+    font-family: 'FW', sans-serif;
   }
 
   @include min-width('tablet') {
@@ -16,51 +16,3 @@ body {
     font-size: 19px;
   }
 }
-
-body:lang(en) {
-  font-family: 'Geist', sans-serif;
-}
-
-body:lang(de) {
-  font-family: 'Geist', sans-serif;
-}
-
-body:lang(es) {
-  font-family: 'Geist', sans-serif;
-}
-
-body:lang(fr) {
-  font-family: 'Geist', sans-serif;
-}
-
-body:lang(it) {
-  font-family: 'Geist', sans-serif;
-}
-
-body:lang(zh-cn) {
-  font-family: 'Noto Sans', 'Noto Sans CJK SC', sans-serif;
-}
-
-body:lang(zh-sg) {
-  font-family: 'Noto Sans', 'Noto Sans CJK SC', sans-serif;
-}
-
-body:lang(zh-hk) {
-  font-family: 'Noto Sans', 'Noto Sans CJK TC', sans-serif;
-}
-
-body:lang(zh-mo) {
-  font-family: 'Noto Sans', 'Noto Sans CJK TC', sans-serif;
-}
-
-body:lang(zh-tw) {
-  font-family: 'Noto Sans', 'Noto Sans CJK TC', sans-serif;
-}
-
-body:lang(ja) {
-  font-family: 'Noto Sans', 'Noto Sans CJK JP', sans-serif;
-}
-
-body:lang(ko) {
-  font-family: 'Noto Sans', 'Noto Sans CJK KR', sans-serif;
-}

assets/scss/_partial/_article.scss

@@ -1,4 +1,10 @@
-.info {
+@use 'sass:map';
+
+@use '_core/mixins' as *;
+
+$tablet: map.get($breakpoints, 'tablet') - 1;
+
+article {
   padding: var(--space-standard);
   max-width: 25em;
 
@@ -42,7 +48,7 @@
 }
 
 @media (max-width: $tablet), (hover: none) {
-  .info {
+  article {
     margin-top: var(--nav-height);
   }
 }

assets/scss/_partial/_collection.scss

@@ -3,12 +3,12 @@
   flex-direction: column;
   gap: 20vh;
 
-  padding-top: 50vh;
+  padding-top: calc(var(--window-height) * 0.4);
   margin-top: calc(var(--nav-height) * -1);
 
   img {
     position: sticky;
-    top: 50vh;
+    top: calc(var(--window-height) * 0.4);
 
     width: 60vw;
     height: 20vh;
@@ -19,7 +19,7 @@
     align-self: center;
 
     &:last-child {
-      margin-bottom: 20vh;
+      margin-bottom: calc(var(--window-height) * 0.35);
     }
   }
 }

assets/scss/_partial/_container.scss

@@ -1,19 +1,27 @@
-.container {
-  position: fixed;
-  top: 0;
-  z-index: 0;
+@use 'sass:map';
 
-  width: 100vw;
-  height: var(--window-height);
+@use '_core/mixins' as *;
 
-  overflow-y: scroll;
-  overflow-x: hidden;
-  background: white;
+$tablet: map.get($breakpoints, 'tablet') - 1;
 
-  overscroll-behavior: none;
-  -webkit-overflow-scrolling: none;
-}
-
-.disableScroll {
-  pointer-events: none;
+@media (max-width: $tablet), (hover: none) {
+  .container {
+    position: fixed;
+    top: 0;
+    z-index: 0;
+
+    width: 100vw;
+    height: var(--window-height);
+
+    overflow-y: scroll;
+    overflow-x: hidden;
+    background: white;
+
+    overscroll-behavior: none;
+    -webkit-overflow-scrolling: none;
+  }
+
+  .disableScroll {
+    pointer-events: none;
+  }
 }

assets/scss/_partial/_gallery.scss

@@ -16,18 +16,30 @@
   .galleryInner {
     flex: 1;
     height: 0;
+  }
 
-    .swiper-slide {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+  .swiper-slide {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-    }
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .loadingText {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+  }
+
+  .slideContainer {
+    position: relative;
+    display: inline-block;
   }
 
   .nav {

assets/scss/_partial/_nav.scss

@@ -1,4 +1,8 @@
-$tablet: map-get($breakpoints, 'tablet') - 1;
+@use 'sass:map';
+
+@use '_core/mixins' as *;
+
+$tablet: map.get($breakpoints, 'tablet') - 1;
 
 nav {
   display: flex;

assets/scss/_variables.scss

@@ -1,5 +1,3 @@
-@import '_core/mixins';
-
 :root {
   --window-height: 100vh;
   --nav-height: 2rem;

assets/scss/critical.scss

@@ -1,11 +1,9 @@
 @charset "utf-8";
 
-@import '_core/reset';
-@import '_core/font';
-@import '_core/typography';
-@import '_core/mixins';
-@import '_variables';
-@import '_core/base';
+@use '_core/foundation';
+@use '_variables';
+@use '_core/base';
 
-@import '_partial/nav';
-@import '_partial/article';
+@use '_partial/nav';
+@use '_partial/article';
+@use '_partial/container';

assets/scss/style.scss

@@ -1,10 +1,9 @@
 @charset "utf-8";
 
-@import '_partial/customCursor';
-@import '_partial/stage';
-@import '_partial/stageNav';
+@use '_partial/customCursor';
+@use '_partial/stage';
+@use '_partial/stageNav';
+@use '_partial/collection';
+@use '_partial/gallery';
 
-@import '_partial/collection';
-@import '_partial/gallery';
-
-@import 'node_modules/swiper/swiper.scss';
+@use '../../node_modules/swiper/swiper.css';

assets/ts/container.ts

@@ -1,14 +0,0 @@
-import { scrollable } from './mobile/scroll'
-
-export let container: HTMLDivElement
-
-export function initContainer(): void {
-  container = document.getElementsByClassName('container').item(0) as HTMLDivElement
-  scrollable.addWatcher((o) => {
-    if (o) {
-      container.classList.remove('disableScroll')
-    } else {
-      container.classList.add('disableScroll')
-    }
-  })
-}

assets/ts/desktop/customCursor.ts

@@ -1,48 +0,0 @@
-import { container } from '../container'
-
-import { active } from './stage'
-
-/**
- * variables
- */
-
-const cursor = document.createElement('div')
-const cursorInner = document.createElement('div')
-
-/**
- * main functions
- */
-
-function onMouse(e: MouseEvent): void {
-  const x = e.clientX
-  const y = e.clientY
-  cursor.style.transform = `translate3d(${x}px, ${y}px, 0)`
-}
-
-export function setCustomCursor(text: string): void {
-  cursorInner.innerText = text
-}
-
-/**
- * init
- */
-export function initCustomCursor(): void {
-  // cursor class name
-  cursor.className = 'cursor'
-  // cursor inner class name
-  cursorInner.className = 'cursorInner'
-  // append cursor inner to cursor
-  cursor.append(cursorInner)
-  // append cursor to main
-  container.append(cursor)
-  // bind mousemove event to window
-  window.addEventListener('mousemove', onMouse, { passive: true })
-  // add active callback
-  active.addWatcher((o) => {
-    if (o) {
-      cursor.classList.add('active')
-    } else {
-      cursor.classList.remove('active')
-    }
-  })
-}

assets/ts/desktop/customCursor.tsx

@@ -0,0 +1,52 @@
+import { createSignal, onCleanup, onMount, type Accessor, type JSX } from 'solid-js'
+
+export default function CustomCursor(props: {
+  children?: JSX.Element
+  active: Accessor<boolean>
+  cursorText: Accessor<string>
+  isOpen: Accessor<boolean>
+}): JSX.Element {
+  // types
+  interface XY {
+    x: number
+    y: number
+  }
+
+  // variables
+  let controller: AbortController | undefined
+
+  // states
+  const [xy, setXy] = createSignal<XY>({ x: 0, y: 0 })
+
+  // helper functions
+  const onMouse: (e: MouseEvent) => void = (e) => {
+    const { clientX, clientY } = e
+    setXy({ x: clientX, y: clientY })
+  }
+
+  // effects
+  onMount(() => {
+    controller = new AbortController()
+    const abortSignal = controller.signal
+    window.addEventListener('mousemove', onMouse, {
+      passive: true,
+      signal: abortSignal
+    })
+  })
+
+  onCleanup(() => {
+    controller?.abort()
+  })
+
+  return (
+    <>
+      <div
+        class="cursor"
+        classList={{ active: props.active() }}
+        style={{ transform: `translate3d(${xy().x}px, ${xy().y}px, 0)` }}
+      >
+        <div class="cursorInner">{props.cursorText()}</div>
+      </div>
+    </>
+  )
+}

assets/ts/desktop/init.ts

@@ -1,11 +0,0 @@
-import { type ImageJSON } from '../resources'
-
-import { initCustomCursor } from './customCursor'
-import { initStage } from './stage'
-import { initStageNav } from './stageNav'
-
-export function initDesktop(ijs: ImageJSON[]): void {
-  initCustomCursor()
-  initStage(ijs)
-  initStageNav()
-}

assets/ts/desktop/layout.tsx

@@ -0,0 +1,90 @@
+import { Show, createMemo, createSignal, type JSX } from 'solid-js'
+
+import type { ImageJSON } from '../resources'
+import type { Vector } from '../utils'
+
+import CustomCursor from './customCursor'
+import Nav from './nav'
+import Stage from './stage'
+import StageNav from './stageNav'
+
+/**
+ * interfaces and types
+ */
+
+export interface DesktopImage extends HTMLImageElement {
+  dataset: {
+    hiUrl: string
+    hiImgH: string
+    hiImgW: string
+    loUrl: string
+    loImgH: string
+    loImgW: string
+  }
+}
+
+export interface HistoryItem {
+  i: number
+  x: number
+  y: number
+}
+
+/**
+ * components
+ */
+
+export default function Desktop(props: {
+  children?: JSX.Element
+  ijs: ImageJSON[]
+  prevText: string
+  closeText: string
+  nextText: string
+  loadingText: string
+}): JSX.Element {
+  const [cordHist, setCordHist] = createSignal<HistoryItem[]>([])
+  const [isLoading, setIsLoading] = createSignal(false)
+  const [isOpen, setIsOpen] = createSignal(false)
+  const [isAnimating, setIsAnimating] = createSignal(false)
+  const [hoverText, setHoverText] = createSignal('')
+  const [navVector, setNavVector] = createSignal<Vector>('none')
+
+  const active = createMemo(() => isOpen() && !isAnimating())
+  const cursorText = createMemo(() => (isLoading() ? props.loadingText : hoverText()))
+
+  return (
+    <>
+      <Nav />
+      <Show when={props.ijs.length > 0}>
+        <Stage
+          ijs={props.ijs}
+          setIsLoading={setIsLoading}
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          isAnimating={isAnimating}
+          setIsAnimating={setIsAnimating}
+          cordHist={cordHist}
+          setCordHist={setCordHist}
+          navVector={navVector}
+          setNavVector={setNavVector}
+        />
+        <Show when={isOpen()}>
+          <CustomCursor cursorText={cursorText} active={active} isOpen={isOpen} />
+          <StageNav
+            prevText={props.prevText}
+            closeText={props.closeText}
+            nextText={props.nextText}
+            loadingText={props.loadingText}
+            active={active}
+            isAnimating={isAnimating}
+            setCordHist={setCordHist}
+            isOpen={isOpen}
+            setIsOpen={setIsOpen}
+            setHoverText={setHoverText}
+            navVector={navVector}
+            setNavVector={setNavVector}
+          />
+        </Show>
+      </Show>
+    </>
+  )
+}

assets/ts/desktop/nav.tsx

@@ -0,0 +1,66 @@
+import { createEffect } from 'solid-js'
+
+import { useState } from '../state'
+import { expand } from '../utils'
+
+/**
+ * constants
+ */
+
+// threshold div
+const thresholdDiv = document.getElementsByClassName('threshold')[0] as HTMLDivElement
+// threshold nums span
+const thresholdDispNums = Array.from(
+  thresholdDiv.getElementsByClassName('num')
+) as HTMLSpanElement[]
+// threshold buttons
+const decButton = thresholdDiv
+  .getElementsByClassName('dec')
+  .item(0) as HTMLButtonElement
+const incButton = thresholdDiv
+  .getElementsByClassName('inc')
+  .item(0) as HTMLButtonElement
+// index div
+const indexDiv = document.getElementsByClassName('index').item(0) as HTMLDivElement
+// index nums span
+const indexDispNums = Array.from(
+  indexDiv.getElementsByClassName('num')
+) as HTMLSpanElement[]
+
+/**
+ * helper functions
+ */
+
+function updateThresholdText(thresholdValue: string): void {
+  thresholdDispNums.forEach((e: HTMLSpanElement, i: number) => {
+    e.innerText = thresholdValue[i]
+  })
+}
+
+function updateIndexText(indexValue: string, indexLength: string): void {
+  indexDispNums.forEach((e: HTMLSpanElement, i: number) => {
+    if (i < 4) {
+      e.innerText = indexValue[i]
+    } else {
+      e.innerText = indexLength[i - 4]
+    }
+  })
+}
+
+/**
+ * Nav component
+ */
+
+export default function Nav(): null {
+  const [state, { incThreshold, decThreshold }] = useState()
+
+  createEffect(() => {
+    updateIndexText(expand(state().index + 1), expand(state().length))
+    updateThresholdText(expand(state().threshold))
+  })
+
+  decButton.onclick = decThreshold
+  incButton.onclick = incThreshold
+
+  return null
+}

assets/ts/desktop/stage.ts

@@ -1,294 +0,0 @@
-import { type Power3, type gsap } from 'gsap'
-
-import { container } from '../container'
-import { type ImageJSON } from '../resources'
-import { incIndex, state } from '../state'
-import { Watchable, decrement, increment, loadGsap } from '../utils'
-
-/**
- * types
- */
-
-export interface HistoryItem {
-  i: number
-  x: number
-  y: number
-}
-
-/**
- * variables
- */
-
-let imgs: HTMLImageElement[] = []
-let last = { x: 0, y: 0 }
-export const cordHist = new Watchable<HistoryItem[]>([])
-export const isOpen = new Watchable<boolean>(false)
-export const isAnimating = new Watchable<boolean>(false)
-export const active = new Watchable<boolean>(false)
-
-let _gsap: typeof gsap
-let _Power3: typeof Power3
-
-let gsapLoaded = false
-
-/**
- * getter
- */
-
-function getElTrail(): HTMLImageElement[] {
-  return cordHist.get().map((item) => imgs[item.i])
-}
-
-function getElTrailCurrent(): HTMLImageElement[] {
-  return getElTrail().slice(-state.get().trailLength)
-}
-
-function getElTrailInactive(): HTMLImageElement[] {
-  const elTrailCurrent = getElTrailCurrent()
-  return elTrailCurrent.slice(0, elTrailCurrent.length - 1)
-}
-
-function getElCurrent(): HTMLImageElement {
-  const elTrail = getElTrail()
-  return elTrail[elTrail.length - 1]
-}
-
-function getElNextSeven(): HTMLImageElement[] {
-  const c = cordHist.get()
-  const s = state.get()
-  const c0 = c.length > 0 ? c[c.length - 1].i : s.index
-  const els = []
-  for (let i = 0; i < 7; i++) {
-    els.push(imgs[increment(c0 + i, s.length)])
-  }
-  return els
-}
-
-function getElPrev(): HTMLImageElement {
-  const c = cordHist.get()
-  const s = state.get()
-  return imgs[decrement(c[c.length - 1].i, s.length)]
-}
-
-function getElNext(): HTMLImageElement {
-  const c = cordHist.get()
-  const s = state.get()
-  return imgs[increment(c[c.length - 1].i, s.length)]
-}
-
-/**
- * main functions
- */
-
-// on mouse
-function onMouse(e: MouseEvent): void {
-  if (isOpen.get() || isAnimating.get() || !gsapLoaded) return
-  const cord = { x: e.clientX, y: e.clientY }
-  const travelDist = Math.hypot(cord.x - last.x, cord.y - last.y)
-
-  if (travelDist > state.get().threshold) {
-    last = cord
-    incIndex()
-
-    const newHist = { i: state.get().index, ...cord }
-    cordHist.set([...cordHist.get(), newHist].slice(-state.get().length))
-  }
-}
-
-// set image position with gsap
-function setPositions(): void {
-  const elTrail = getElTrail()
-  if (elTrail.length === 0 || !gsapLoaded) return
-
-  // preload
-  lores(getElNextSeven())
-
-  _gsap.set(elTrail, {
-    x: (i: number) => cordHist.get()[i].x - window.innerWidth / 2,
-    y: (i: number) => cordHist.get()[i].y - window.innerHeight / 2,
-    opacity: (i: number) =>
-      i + 1 + state.get().trailLength <= cordHist.get().length ? 0 : 1,
-    zIndex: (i: number) => i,
-    scale: 0.6
-  })
-
-  if (isOpen.get()) {
-    lores(getElTrail())
-    hires([getElCurrent(), getElPrev(), getElNext()])
-    _gsap.set(imgs, { opacity: 0 })
-    _gsap.set(getElCurrent(), { opacity: 1, x: 0, y: 0, scale: 1 })
-  }
-}
-
-// open image into navigation
-function expandImage(): void {
-  if (isAnimating.get() || !gsapLoaded) return
-
-  isOpen.set(true)
-  isAnimating.set(true)
-
-  hires([getElCurrent(), getElPrev(), getElNext()])
-
-  const tl = _gsap.timeline()
-  // move down and hide trail inactive
-  tl.to(getElTrailInactive(), {
-    y: '+=20',
-    ease: _Power3.easeIn,
-    stagger: 0.075,
-    duration: 0.3,
-    delay: 0.1,
-    opacity: 0
-  })
-  // current move to center
-  tl.to(getElCurrent(), {
-    x: 0,
-    y: 0,
-    ease: _Power3.easeInOut,
-    duration: 0.7,
-    delay: 0.3
-  })
-  // current expand
-  tl.to(getElCurrent(), {
-    delay: 0.1,
-    scale: 1,
-    ease: _Power3.easeInOut
-  })
-  // finished
-  tl.then(() => {
-    isAnimating.set(false)
-  }).catch((e) => {
-    console.log(e)
-  })
-}
-
-// close navigation and back to stage
-export function minimizeImage(): void {
-  if (isAnimating.get() || !gsapLoaded) return
-
-  isOpen.set(false)
-  isAnimating.set(true)
-
-  lores([getElCurrent()])
-  lores(getElTrailInactive())
-
-  const tl = _gsap.timeline()
-  // shrink current
-  tl.to(getElCurrent(), {
-    scale: 0.6,
-    duration: 0.6,
-    ease: _Power3.easeInOut
-  })
-  // move current to original position
-  tl.to(getElCurrent(), {
-    delay: 0.3,
-    duration: 0.7,
-    ease: _Power3.easeInOut,
-    x: cordHist.get()[cordHist.get().length - 1].x - window.innerWidth / 2,
-    y: cordHist.get()[cordHist.get().length - 1].y - window.innerHeight / 2
-  })
-  // show trail inactive
-  tl.to(getElTrailInactive(), {
-    y: '-=20',
-    ease: _Power3.easeOut,
-    stagger: -0.1,
-    duration: 0.3,
-    opacity: 1
-  })
-  // finished
-  tl.then(() => {
-    isAnimating.set(false)
-  }).catch((e) => {
-    console.log(e)
-  })
-}
-
-/**
- * init
- */
-
-export function initStage(ijs: ImageJSON[]): void {
-  // create stage element
-  createStage(ijs)
-  // get stage
-  const stage = document.getElementsByClassName('stage').item(0) as HTMLDivElement
-  // get image elements
-  imgs = Array.from(stage.getElementsByTagName('img'))
-  // event listeners
-  stage.addEventListener('click', () => {
-    expandImage()
-  })
-  stage.addEventListener('keydown', () => {
-    expandImage()
-  })
-  window.addEventListener('mousemove', onMouse, { passive: true })
-  // watchers
-  isOpen.addWatcher((o) => {
-    active.set(o && !isAnimating.get())
-  })
-  isAnimating.addWatcher((o) => {
-    active.set(isOpen.get() && !o)
-  })
-  cordHist.addWatcher((_) => {
-    setPositions()
-  })
-  // preload
-  lores(getElNextSeven())
-  // dynamic import
-  window.addEventListener(
-    'mousemove',
-    () => {
-      loadGsap()
-        .then((g) => {
-          _gsap = g[0]
-          _Power3 = g[1]
-          gsapLoaded = true
-        })
-        .catch((e) => {
-          console.log(e)
-        })
-    },
-    { once: true, passive: true }
-  )
-}
-
-/**
- * hepler
- */
-
-function createStage(ijs: ImageJSON[]): void {
-  // create container for images
-  const stage: HTMLDivElement = document.createElement('div')
-  stage.className = 'stage'
-  // append images to container
-  for (const ij of ijs) {
-    const e = document.createElement('img')
-    e.height = ij.loImgH
-    e.width = ij.loImgW
-    // set data attributes
-    e.dataset.hiUrl = ij.hiUrl
-    e.dataset.hiImgH = ij.hiImgH.toString()
-    e.dataset.hiImgW = ij.hiImgW.toString()
-    e.dataset.loUrl = ij.loUrl
-    e.dataset.loImgH = ij.loImgH.toString()
-    e.dataset.loImgW = ij.loImgW.toString()
-    e.alt = ij.alt
-    stage.append(e)
-  }
-  container.append(stage)
-}
-
-function hires(imgs: HTMLImageElement[]): void {
-  imgs.forEach((img) => {
-    img.src = img.dataset.hiUrl as string
-    img.height = parseInt(img.dataset.hiImgH as string)
-    img.width = parseInt(img.dataset.hiImgW as string)
-  })
-}
-
-function lores(imgs: HTMLImageElement[]): void {
-  imgs.forEach((img) => {
-    img.src = img.dataset.loUrl as string
-    img.height = parseInt(img.dataset.loImgH as string)
-    img.width = parseInt(img.dataset.loImgW as string)
-  })
-}

assets/ts/desktop/stage.tsx

@@ -0,0 +1,475 @@
+import { type gsap } from 'gsap'
+import {
+  For,
+  createEffect,
+  on,
+  onMount,
+  type Accessor,
+  type JSX,
+  type Setter
+} from 'solid-js'
+
+import type { ImageJSON } from '../resources'
+import { useState, type State } from '../state'
+import { decrement, increment, loadGsap, type Vector } from '../utils'
+
+import type { DesktopImage, HistoryItem } from './layout'
+
+/**
+ * helper functions
+ */
+
+function getTrailElsIndex(cordHistValue: HistoryItem[]): number[] {
+  return cordHistValue.map((el) => el.i)
+}
+
+function getTrailCurrentElsIndex(
+  cordHistValue: HistoryItem[],
+  stateValue: State
+): number[] {
+  return getTrailElsIndex(cordHistValue).slice(-stateValue.trailLength)
+}
+
+function getTrailInactiveElsIndex(
+  cordHistValue: HistoryItem[],
+  stateValue: State
+): number[] {
+  return getTrailCurrentElsIndex(cordHistValue, stateValue).slice(0, -1)
+}
+
+function getCurrentElIndex(cordHistValue: HistoryItem[]): number {
+  return getTrailElsIndex(cordHistValue).slice(-1)[0]
+}
+
+function getPrevElIndex(cordHistValue: HistoryItem[], stateValue: State): number {
+  return decrement(cordHistValue.slice(-1)[0].i, stateValue.length)
+}
+
+function getNextElIndex(cordHistValue: HistoryItem[], stateValue: State): number {
+  return increment(cordHistValue.slice(-1)[0].i, stateValue.length)
+}
+
+function getImagesFromIndexes(imgs: DesktopImage[], indexes: number[]): DesktopImage[] {
+  return indexes.map((i) => imgs[i])
+}
+
+function hires(imgs: DesktopImage[]): void {
+  imgs.forEach((img) => {
+    if (img.src === img.dataset.hiUrl) return
+    img.src = img.dataset.hiUrl
+    img.height = parseInt(img.dataset.hiImgH)
+    img.width = parseInt(img.dataset.hiImgW)
+  })
+}
+
+function lores(imgs: DesktopImage[]): void {
+  imgs.forEach((img) => {
+    if (img.src === img.dataset.loUrl) return
+    img.src = img.dataset.loUrl
+    img.height = parseInt(img.dataset.loImgH)
+    img.width = parseInt(img.dataset.loImgW)
+  })
+}
+
+function onMutation<T extends HTMLElement>(
+  element: T,
+  trigger: (arg0: MutationRecord) => boolean,
+  observeOptions: MutationObserverInit = { attributes: true }
+): void {
+  new MutationObserver((mutations, observer) => {
+    for (const mutation of mutations) {
+      if (trigger(mutation)) {
+        observer.disconnect()
+        break
+      }
+    }
+  }).observe(element, observeOptions)
+}
+
+/**
+ * Stage component
+ */
+
+export default function Stage(props: {
+  ijs: ImageJSON[]
+  setIsLoading: Setter<boolean>
+  isOpen: Accessor<boolean>
+  setIsOpen: Setter<boolean>
+  isAnimating: Accessor<boolean>
+  setIsAnimating: Setter<boolean>
+  cordHist: Accessor<HistoryItem[]>
+  setCordHist: Setter<HistoryItem[]>
+  navVector: Accessor<Vector>
+  setNavVector: Setter<Vector>
+}): JSX.Element {
+  // variables
+  let _gsap: typeof gsap
+
+  // eslint-disable-next-line solid/reactivity
+  const imgs: DesktopImage[] = Array<DesktopImage>(props.ijs.length)
+  let last = { x: 0, y: 0 }
+
+  let abortController: AbortController | undefined
+
+  // states
+  let gsapLoaded = false
+
+  const [state, { incIndex }] = useState()
+  const stateLength = state().length
+
+  let mounted = false
+
+  const onMouse: (e: MouseEvent) => void = (e) => {
+    if (props.isOpen() || props.isAnimating() || !gsapLoaded || !mounted) return
+    const cord = { x: e.clientX, y: e.clientY }
+    const travelDist = Math.hypot(cord.x - last.x, cord.y - last.y)
+
+    if (travelDist > state().threshold) {
+      last = cord
+      incIndex()
+
+      const _state = state()
+      const newHist = { i: _state.index, ...cord }
+      props.setCordHist((prev) => [...prev, newHist].slice(-stateLength))
+    }
+  }
+
+  const onClick: () => void = () => {
+    if (!props.isAnimating()) props.setIsOpen(true)
+  }
+
+  const setPosition: () => void = () => {
+    if (!mounted) return
+    if (imgs.length === 0) return
+    const _cordHist = props.cordHist()
+    const trailElsIndex = getTrailElsIndex(_cordHist)
+    if (trailElsIndex.length === 0) return
+
+    const elsTrail = getImagesFromIndexes(imgs, trailElsIndex)
+
+    const _isOpen = props.isOpen()
+    const _state = state()
+
+    _gsap.set(elsTrail, {
+      x: (i: number) => _cordHist[i].x - window.innerWidth / 2,
+      y: (i: number) => _cordHist[i].y - window.innerHeight / 2,
+      opacity: (i: number) =>
+        Math.max(
+          (i + 1 + _state.trailLength <= _cordHist.length ? 0 : 1) - (_isOpen ? 1 : 0),
+          0
+        ),
+      zIndex: (i: number) => i,
+      scale: 0.6
+    })
+
+    if (_isOpen) {
+      const elc = getImagesFromIndexes(imgs, [getCurrentElIndex(_cordHist)])[0]
+      const indexArrayToHires: number[] = []
+      const indexArrayToCleanup: number[] = []
+      switch (props.navVector()) {
+        case 'prev':
+          indexArrayToHires.push(getPrevElIndex(_cordHist, _state))
+          indexArrayToCleanup.push(getNextElIndex(_cordHist, _state))
+          break
+        case 'next':
+          indexArrayToHires.push(getNextElIndex(_cordHist, _state))
+          indexArrayToCleanup.push(getPrevElIndex(_cordHist, _state))
+          break
+        default:
+          break
+      }
+      hires(getImagesFromIndexes(imgs, indexArrayToHires)) // preload
+      _gsap.set(getImagesFromIndexes(imgs, indexArrayToCleanup), { opacity: 0 })
+      _gsap.set(elc, { x: 0, y: 0, scale: 1 }) // set current to center
+      setLoaderForHiresImage(elc) // set loader, if loaded set current opacity to 1
+    } else {
+      lores(elsTrail)
+    }
+  }
+
+  const expandImage: () => Promise<
+    gsap.core.Omit<gsap.core.Timeline, 'then'>
+  > = async () => {
+    // isAnimating is prechecked in isOpen effect
+    if (!mounted || !gsapLoaded) throw new Error('not mounted or gsap not loaded')
+
+    props.setIsAnimating(true)
+
+    const _cordHist = props.cordHist()
+    const _state = state()
+
+    const elcIndex = getCurrentElIndex(_cordHist)
+    const elc = imgs[elcIndex]
+
+    // don't hide here because we want a better transition
+    hires(
+      getImagesFromIndexes(imgs, [
+        elcIndex,
+        getPrevElIndex(_cordHist, _state),
+        getNextElIndex(_cordHist, _state)
+      ])
+    )
+    setLoaderForHiresImage(elc)
+
+    const tl = _gsap.timeline()
+    const trailInactiveEls = getImagesFromIndexes(
+      imgs,
+      getTrailInactiveElsIndex(_cordHist, _state)
+    )
+    // move down and hide trail inactive
+    tl.to(trailInactiveEls, {
+      y: '+=20',
+      ease: 'power3.in',
+      stagger: 0.075,
+      duration: 0.3,
+      delay: 0.1,
+      opacity: 0
+    })
+    // current move to center
+    tl.to(elc, {
+      x: 0,
+      y: 0,
+      ease: 'power3.inOut',
+      duration: 0.7,
+      delay: 0.3
+    })
+    // current expand
+    tl.to(elc, {
+      delay: 0.1,
+      scale: 1,
+      ease: 'power3.inOut'
+    })
+    // finished
+    // eslint-disable-next-line solid/reactivity
+    return await tl.then(() => {
+      props.setIsAnimating(false)
+    })
+  }
+
+  const minimizeImage: () => Promise<
+    gsap.core.Omit<gsap.core.Timeline, 'then'>
+  > = async () => {
+    if (!mounted || !gsapLoaded) throw new Error('not mounted or gsap not loaded')
+
+    props.setIsAnimating(true)
+    props.setNavVector('none') // cleanup
+
+    const _cordHist = props.cordHist()
+    const _state = state()
+
+    const elcIndex = getCurrentElIndex(_cordHist)
+    const elsTrailInactiveIndexes = getTrailInactiveElsIndex(_cordHist, _state)
+
+    lores(getImagesFromIndexes(imgs, [...elsTrailInactiveIndexes, elcIndex]))
+
+    const tl = _gsap.timeline()
+    const elc = getImagesFromIndexes(imgs, [elcIndex])[0]
+    const elsTrailInactive = getImagesFromIndexes(imgs, elsTrailInactiveIndexes)
+    // shrink current
+    tl.to(elc, {
+      scale: 0.6,
+      duration: 0.6,
+      ease: 'power3.inOut'
+    })
+    // move current to original position
+    tl.to(elc, {
+      delay: 0.3,
+      duration: 0.7,
+      ease: 'power3.inOut',
+      x: _cordHist.slice(-1)[0].x - window.innerWidth / 2,
+      y: _cordHist.slice(-1)[0].y - window.innerHeight / 2
+    })
+    // show trail inactive
+    tl.to(elsTrailInactive, {
+      y: '-=20',
+      ease: 'power3.out',
+      stagger: -0.1,
+      duration: 0.3,
+      opacity: 1
+    })
+    // eslint-disable-next-line solid/reactivity
+    return await tl.then(() => {
+      props.setIsAnimating(false)
+    })
+  }
+
+  function setLoaderForHiresImage(img: DesktopImage): void {
+    if (!mounted || !gsapLoaded) return
+    if (!img.complete) {
+      props.setIsLoading(true)
+      // abort controller for cleanup
+      const controller = new AbortController()
+      const abortSignal = controller.signal
+      // event listeners
+      img.addEventListener(
+        'load',
+        () => {
+          _gsap
+            .to(img, { opacity: 1, ease: 'power3.out', duration: 0.5 })
+            // eslint-disable-next-line solid/reactivity
+            .then(() => {
+              props.setIsLoading(false)
+            })
+            .catch((e) => {
+              console.log(e)
+            })
+            .finally(() => {
+              controller.abort()
+            })
+        },
+        { once: true, passive: true, signal: abortSignal }
+      )
+      img.addEventListener(
+        'error',
+        () => {
+          _gsap
+            .set(img, { opacity: 1 })
+            // eslint-disable-next-line solid/reactivity
+            .then(() => {
+              props.setIsLoading(false)
+            })
+            .catch((e) => {
+              console.log(e)
+            })
+            .finally(() => {
+              controller.abort()
+            })
+        },
+        { once: true, passive: true, signal: abortSignal }
+      )
+    } else {
+      _gsap
+        .set(img, { opacity: 1 })
+        // eslint-disable-next-line solid/reactivity
+        .then(() => {
+          props.setIsLoading(false)
+        })
+        .catch((e) => {
+          console.log(e)
+        })
+    }
+  }
+
+  onMount(() => {
+    // preload logic
+    imgs.forEach((img, i) => {
+      // preload first 5 images on page load
+      if (i < 5) {
+        img.src = img.dataset.loUrl
+      }
+      // lores preloader for rest of the images
+      // eslint-disable-next-line solid/reactivity
+      onMutation(img, (mutation) => {
+        // if open or animating, hold
+        if (props.isOpen() || props.isAnimating()) return false
+        // if mutation is not about style attribute, hold
+        if (mutation.attributeName !== 'style') return false
+        const opacity = parseFloat(img.style.opacity)
+        // if opacity is not 1, hold
+        if (opacity !== 1) return false
+        // preload the i + 5th image, if it exists
+        if (i + 5 < imgs.length) {
+          imgs[i + 5].src = imgs[i + 5].dataset.loUrl
+        }
+        // triggered
+        return true
+      })
+    })
+    // load gsap on mousemove
+    window.addEventListener(
+      'mousemove',
+      () => {
+        loadGsap()
+          .then((g) => {
+            _gsap = g
+            gsapLoaded = true
+          })
+          .catch((e) => {
+            console.log(e)
+          })
+      },
+      { passive: true, once: true }
+    )
+    // event listeners
+    abortController = new AbortController()
+    const abortSignal = abortController.signal
+    window.addEventListener('mousemove', onMouse, {
+      passive: true,
+      signal: abortSignal
+    })
+    // mounted
+    mounted = true
+  })
+
+  createEffect(
+    on(
+      () => props.cordHist(),
+      () => {
+        setPosition()
+      },
+      { defer: true }
+    )
+  )
+
+  createEffect(
+    on(
+      () => props.isOpen(),
+      async () => {
+        if (props.isAnimating()) return
+        if (props.isOpen()) {
+          // expand image
+          await expandImage()
+            .catch(() => {
+              void 0
+            })
+            .then(() => {
+              // abort controller for cleanup
+              abortController?.abort()
+            })
+        } else {
+          // minimize image
+          await minimizeImage()
+            .catch(() => {
+              void 0
+            })
+            // eslint-disable-next-line solid/reactivity
+            .then(() => {
+              // event listeners and its abort controller
+              abortController = new AbortController()
+              const abortSignal = abortController.signal
+              window.addEventListener('mousemove', onMouse, {
+                passive: true,
+                signal: abortSignal
+              })
+              // cleanup isLoading
+              props.setIsLoading(false)
+            })
+        }
+      },
+      { defer: true }
+    )
+  )
+
+  return (
+    <>
+      <div class="stage" onClick={onClick} onKeyDown={onClick}>
+        <For each={props.ijs}>
+          {(ij, i) => (
+            <img
+              ref={imgs[i()]}
+              height={ij.loImgH}
+              width={ij.loImgW}
+              data-hi-url={ij.hiUrl}
+              data-hi-img-h={ij.hiImgH}
+              data-hi-img-w={ij.hiImgW}
+              data-lo-url={ij.loUrl}
+              data-lo-img-h={ij.loImgH}
+              data-lo-img-w={ij.loImgW}
+              alt={ij.alt}
+            />
+          )}
+        </For>
+      </div>
+    </>
+  )
+}

assets/ts/desktop/stageNav.ts

@@ -1,129 +0,0 @@
-import { container } from '../container'
-import { decIndex, incIndex, state } from '../state'
-import { decrement, increment } from '../utils'
-
-import { setCustomCursor } from './customCursor'
-import { active, cordHist, isAnimating, isOpen, minimizeImage } from './stage'
-
-/**
- * types
- */
-
-type NavItem = (typeof navItems)[number]
-
-/**
- * variables
- */
-
-const mainDiv = document.getElementById('main') as HTMLDivElement
-const navItems = [
-  mainDiv.getAttribute('prevText') as string,
-  mainDiv.getAttribute('closeText') as string,
-  mainDiv.getAttribute('nextText') as string
-] as const
-
-/**
- * main functions
- */
-
-function handleClick(type: NavItem): void {
-  if (type === navItems[0]) {
-    prevImage()
-  } else if (type === navItems[1]) {
-    minimizeImage()
-  } else {
-    nextImage()
-  }
-}
-
-function handleKey(e: KeyboardEvent): void {
-  if (isOpen.get() || isAnimating.get()) return
-  switch (e.key) {
-    case 'ArrowLeft':
-      prevImage()
-      break
-    case 'Escape':
-      minimizeImage()
-      break
-    case 'ArrowRight':
-      nextImage()
-      break
-  }
-}
-
-/**
- * init
- */
-
-export function initStageNav(): void {
-  const navOverlay = document.createElement('div')
-  navOverlay.className = 'navOverlay'
-  for (const navItem of navItems) {
-    const overlay = document.createElement('div')
-    overlay.className = 'overlay'
-    overlay.addEventListener(
-      'click',
-      () => {
-        handleClick(navItem)
-      },
-      { passive: true }
-    )
-    overlay.addEventListener(
-      'keydown',
-      () => {
-        handleClick(navItem)
-      },
-      { passive: true }
-    )
-    overlay.addEventListener(
-      'mouseover',
-      () => {
-        setCustomCursor(navItem)
-      },
-      { passive: true }
-    )
-    overlay.addEventListener(
-      'focus',
-      () => {
-        setCustomCursor(navItem)
-      },
-      { passive: true }
-    )
-    navOverlay.append(overlay)
-  }
-  active.addWatcher(() => {
-    if (active.get()) {
-      navOverlay.classList.add('active')
-    } else {
-      navOverlay.classList.remove('active')
-    }
-  })
-  container.append(navOverlay)
-  window.addEventListener('keydown', handleKey, { passive: true })
-}
-
-/**
- * hepler
- */
-
-function nextImage(): void {
-  if (isAnimating.get()) return
-  cordHist.set(
-    cordHist.get().map((item) => {
-      return { ...item, i: increment(item.i, state.get().length) }
-    })
-  )
-
-  incIndex()
-}
-
-function prevImage(): void {
-  if (isAnimating.get()) return
-  cordHist.set(
-    cordHist.get().map((item) => {
-      return { ...item, i: decrement(item.i, state.get().length) }
-    })
-  )
-
-  decIndex()
-}

assets/ts/desktop/stageNav.tsx

@@ -0,0 +1,106 @@
+import { For, createEffect, type Accessor, type JSX, type Setter } from 'solid-js'
+
+import { useState } from '../state'
+import { decrement, increment, type Vector } from '../utils'
+
+import type { HistoryItem } from './layout'
+
+export default function StageNav(props: {
+  children?: JSX.Element
+  prevText: string
+  closeText: string
+  nextText: string
+  loadingText: string
+  active: Accessor<boolean>
+  isAnimating: Accessor<boolean>
+  setCordHist: Setter<HistoryItem[]>
+  isOpen: Accessor<boolean>
+  setIsOpen: Setter<boolean>
+  setHoverText: Setter<string>
+  navVector: Accessor<Vector>
+  setNavVector: Setter<Vector>
+}): JSX.Element {
+  // types
+  type NavItem = (typeof navItems)[number]
+
+  // variables
+  let controller: AbortController | undefined
+  // eslint-disable-next-line solid/reactivity
+  const navItems = [props.prevText, props.closeText, props.nextText] as const
+
+  // states
+  const [state, { incIndex, decIndex }] = useState()
+
+  const stateLength = state().length
+
+  const prevImage: () => void = () => {
+    props.setNavVector('prev')
+    props.setCordHist((c) =>
+      c.map((item) => {
+        return { ...item, i: decrement(item.i, stateLength) }
+      })
+    )
+    decIndex()
+  }
+
+  const closeImage: () => void = () => {
+    props.setIsOpen(false)
+  }
+
+  const nextImage: () => void = () => {
+    props.setNavVector('next')
+    props.setCordHist((c) =>
+      c.map((item) => {
+        return { ...item, i: increment(item.i, stateLength) }
+      })
+    )
+    incIndex()
+  }
+
+  const handleClick: (item: NavItem) => void = (item) => {
+    if (!props.isOpen() || props.isAnimating()) return
+    if (item === navItems[0]) prevImage()
+    else if (item === navItems[1]) closeImage()
+    else nextImage()
+  }
+
+  const handleKey: (e: KeyboardEvent) => void = (e) => {
+    if (!props.isOpen() || props.isAnimating()) return
+    if (e.key === 'ArrowLeft') prevImage()
+    else if (e.key === 'Escape') closeImage()
+    else if (e.key === 'ArrowRight') nextImage()
+  }
+
+  createEffect(() => {
+    if (props.isOpen()) {
+      controller = new AbortController()
+      const abortSignal = controller.signal
+      window.addEventListener('keydown', handleKey, {
+        passive: true,
+        signal: abortSignal
+      })
+    } else {
+      controller?.abort()
+    }
+  })
+
+  return (
+    <>
+      <div class="navOverlay" classList={{ active: props.active() }}>
+        <For each={navItems}>
+          {(item) => (
+            <div
+              class="overlay"
+              onClick={() => {
+                handleClick(item)
+              }}
+              onFocus={() => props.setHoverText(item)}
+              onMouseOver={() => props.setHoverText(item)}
+              tabIndex="-1"
+            />
+          )}
+        </For>
+      </div>
+    </>
+  )
+}

assets/ts/main.ts

@@ -1,32 +0,0 @@
-import { initContainer } from './container'
-import { initNav } from './nav'
-import { initResources } from './resources'
-import { initState } from './state'
-import { isMobile } from './utils'
-
-initContainer()
-const ijs = await initResources()
-initState(ijs.length)
-initNav()
-
-// NOTE: it seems firefox and chromnium don't like top layer await
-//       so we are using import then instead
-if (ijs.length > 0) {
-  if (!isMobile()) {
-    import('./desktop/init')
-      .then((d) => {
-        d.initDesktop(ijs)
-      })
-      .catch((e) => {
-        console.log(e)
-      })
-  } else {
-    import('./mobile/init')
-      .then((m) => {
-        m.initMobile(ijs)
-      })
-      .catch((e) => {
-        console.log(e)
-      })
-  }
-}

assets/ts/main.tsx

@@ -0,0 +1,85 @@
+import {
+  Match,
+  Show,
+  Switch,
+  createEffect,
+  createResource,
+  createSignal,
+  lazy,
+  type JSX
+} from 'solid-js'
+import { render } from 'solid-js/web'
+
+import { getImageJSON } from './resources'
+import { StateProvider } from './state'
+
+import '../scss/style.scss'
+
+/**
+ * interfaces
+ */
+
+export interface Container extends HTMLDivElement {
+  dataset: {
+    next: string
+    close: string
+    prev: string
+    loading: string
+  }
+}
+
+// container
+const container = document.getElementsByClassName('container')[0] as Container
+
+// lazy components
+const Desktop = lazy(async () => await import('./desktop/layout'))
+const Mobile = lazy(async () => await import('./mobile/layout'))
+
+function Main(): JSX.Element {
+  // variables
+  const [ijs] = createResource(getImageJSON)
+  const isMobile =
+    window.matchMedia('(hover: none)').matches &&
+    !window.navigator.userAgent.includes('Win')
+
+  // states
+  const [scrollable, setScollable] = createSignal(true)
+
+  createEffect(() => {
+    if (scrollable()) {
+      container.classList.remove('disableScroll')
+    } else {
+      container.classList.add('disableScroll')
+    }
+  })
+
+  return (
+    <>
+      <Show when={ijs.state === 'ready'}>
+        <StateProvider length={ijs()?.length ?? 0}>
+          <Switch fallback={<div>Error</div>}>
+            <Match when={isMobile}>
+              <Mobile
+                ijs={ijs() ?? []}
+                closeText={container.dataset.close}
+                loadingText={container.dataset.loading}
+                setScrollable={setScollable}
+              />
+            </Match>
+            <Match when={!isMobile}>
+              <Desktop
+                ijs={ijs() ?? []}
+                prevText={container.dataset.prev}
+                closeText={container.dataset.close}
+                nextText={container.dataset.next}
+                loadingText={container.dataset.loading}
+              />
+            </Match>
+          </Switch>
+        </StateProvider>
+      </Show>
+    </>
+  )
+}
+
+render(() => <Main />, container)

assets/ts/mobile/collection.ts

@@ -1,94 +0,0 @@
-import { container } from '../container'
-import { type ImageJSON } from '../resources'
-import { setIndex } from '../state'
-import { getRandom, onVisible } from '../utils'
-
-import { slideUp } from './gallery'
-import { mounted } from './mounted'
-
-/**
- * variables
- */
-
-export let imgs: HTMLImageElement[] = []
-
-/**
- * main functions
- */
-
-function handleClick(i: number): void {
-  setIndex(i)
-  slideUp()
-}
-
-/**
- * init
- */
-
-export function initCollection(ijs: ImageJSON[]): void {
-  createCollection(ijs)
-  // get container
-  const collection = document
-    .getElementsByClassName('collection')
-    .item(0) as HTMLDivElement
-  // add watcher
-  mounted.addWatcher((o) => {
-    if (o) {
-      collection.classList.remove('hidden')
-    } else {
-      collection.classList.add('hidden')
-    }
-  })
-  // get image elements
-  imgs = Array.from(collection.getElementsByTagName('img'))
-  // add event listeners
-  imgs.forEach((img, i) => {
-    img.addEventListener(
-      'click',
-      () => {
-        handleClick(i)
-      },
-      { passive: true }
-    )
-    img.addEventListener(
-      'keydown',
-      () => {
-        handleClick(i)
-      },
-      { passive: true }
-    )
-    // preload
-    onVisible(img, () => {
-      for (let _i = 0; _i < 5; _i++) {
-        const n = i + _i
-        if (n < 0 || n > imgs.length - 1) continue
-        imgs[n].src = imgs[n].dataset.src as string
-      }
-    })
-  })
-}
-
-/**
- * helper
- */
-
-function createCollection(ijs: ImageJSON[]): void {
-  // create container for images
-  const _collection: HTMLDivElement = document.createElement('div')
-  _collection.className = 'collection'
-  // append images to container
-  for (const [i, ij] of ijs.entries()) {
-    // random x and y
-    const x = i !== 0 ? getRandom(-25, 25) : 0
-    const y = i !== 0 ? getRandom(-30, 30) : 0
-    // element
-    const e = document.createElement('img')
-    e.dataset.src = ij.loUrl
-    e.height = ij.loImgH
-    e.width = ij.loImgW
-    e.alt = ij.alt
-    e.style.transform = `translate3d(${x}%, ${y - 50}%, 0)`
-    _collection.append(e)
-  }
-  container.append(_collection)
-}

assets/ts/mobile/collection.tsx

@@ -0,0 +1,133 @@
+import {
+  For,
+  createEffect,
+  on,
+  onMount,
+  type Accessor,
+  type JSX,
+  type Setter
+} from 'solid-js'
+
+import type { ImageJSON } from '../resources'
+import { useState } from '../state'
+
+import type { MobileImage } from './layout'
+
+function getRandom(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+function onIntersection<T extends HTMLElement>(
+  element: T,
+  trigger: (arg0: IntersectionObserverEntry) => boolean
+): void {
+  new IntersectionObserver((entries, observer) => {
+    for (const entry of entries) {
+      if (trigger(entry)) {
+        observer.disconnect()
+        break
+      }
+    }
+  }).observe(element)
+}
+
+export default function Collection(props: {
+  children?: JSX.Element
+  ijs: ImageJSON[]
+  isAnimating: Accessor<boolean>
+  isOpen: Accessor<boolean>
+  setIsOpen: Setter<boolean>
+}): JSX.Element {
+  // variables
+  // eslint-disable-next-line solid/reactivity
+  const imgs: MobileImage[] = Array<MobileImage>(props.ijs.length)
+
+  // states
+  const [state, { setIndex }] = useState()
+
+  // helper functions
+  const handleClick: (i: number) => void = (i) => {
+    if (props.isAnimating()) return
+    setIndex(i)
+    props.setIsOpen(true)
+  }
+
+  const scrollToActive: () => void = () => {
+    imgs[state().index].scrollIntoView({ behavior: 'auto', block: 'center' })
+  }
+
+  // effects
+  onMount(() => {
+    imgs.forEach((img, i) => {
+      // preload first 5 images on page load
+      if (i < 5) {
+        img.src = img.dataset.src
+      }
+      // event listeners
+      img.addEventListener(
+        'click',
+        () => {
+          handleClick(i)
+        },
+        { passive: true }
+      )
+      img.addEventListener(
+        'keydown',
+        () => {
+          handleClick(i)
+        },
+        { passive: true }
+      )
+      // preload
+      onIntersection(img, (entry) => {
+        // no intersection, hold
+        if (entry.intersectionRatio <= 0) return false
+        // preload the i + 5th image, if it exists
+        if (i + 5 < imgs.length) {
+          imgs[i + 5].src = imgs[i + 5].dataset.src
+        }
+        // triggered
+        return true
+      })
+    })
+  })
+
+  createEffect(
+    on(
+      () => {
+        props.isOpen()
+      },
+      () => {
+        if (!props.isOpen()) scrollToActive() // scroll to active when closed
+      },
+      { defer: true }
+    )
+  )
+
+  return (
+    <>
+      <div class="collection">
+        <For each={props.ijs}>
+          {(ij, i) => (
+            <img
+              ref={imgs[i()]}
+              height={ij.loImgH}
+              width={ij.loImgW}
+              data-src={ij.loUrl}
+              alt={ij.alt}
+              style={{
+                transform: `translate3d(${i() !== 0 ? getRandom(-25, 25) : 0}%, ${i() !== 0 ? getRandom(-35, 35) : 0}%, 0)`
+              }}
+              onClick={() => {
+                handleClick(i())
+              }}
+              onKeyDown={() => {
+                handleClick(i())
+              }}
+            />
+          )}
+        </For>
+      </div>
+    </>
+  )
+}

assets/ts/mobile/gallery.ts

@@ -1,276 +0,0 @@
-import { type Power3, type gsap } from 'gsap'
-import { type Swiper } from 'swiper'
-
-import { container } from '../container'
-import { type ImageJSON } from '../resources'
-import { setIndex, state } from '../state'
-import {
-  Watchable,
-  capitalizeFirstLetter,
-  expand,
-  loadGsap,
-  loadSwiper
-} from '../utils'
-
-import { mounted } from './mounted'
-import { scrollable } from './scroll'
-
-/**
- * variables
- */
-
-let swiperNode: HTMLDivElement
-let gallery: HTMLDivElement
-let curtain: HTMLDivElement
-let swiper: Swiper
-const isAnimating = new Watchable<boolean>(false)
-let lastIndex = -1
-let indexDispNums: HTMLSpanElement[] = []
-let galleryImages: HTMLImageElement[] = []
-let collectionImages: HTMLImageElement[] = []
-
-let _Swiper: typeof Swiper
-let _gsap: typeof gsap
-let _Power3: typeof Power3
-
-let libLoaded = false
-
-/**
- * main functions
- */
-
-export function slideUp(): void {
-  if (isAnimating.get() || !libLoaded) return
-  isAnimating.set(true)
-
-  // load active image
-  loadImages()
-
-  _gsap.to(curtain, {
-    opacity: 1,
-    duration: 1
-  })
-
-  _gsap.to(gallery, {
-    y: 0,
-    ease: _Power3.easeInOut,
-    duration: 1,
-    delay: 0.4
-  })
-
-  setTimeout(() => {
-    scrollable.set(false)
-    isAnimating.set(false)
-  }, 1200)
-}
-
-function slideDown(): void {
-  scrollable.set(true)
-  scrollToActive()
-
-  _gsap.to(gallery, {
-    y: '100%',
-    ease: _Power3.easeInOut,
-    duration: 1
-  })
-
-  _gsap.to(curtain, {
-    opacity: 0,
-    duration: 1.2,
-    delay: 0.4
-  })
-}
-
-/**
- * init
- */
-
-export function initGallery(ijs: ImageJSON[]): void {
-  // create gallery
-  createGallery(ijs)
-  // get elements
-  indexDispNums = Array.from(
-    document.getElementsByClassName('nav').item(0)?.getElementsByClassName('num') ?? []
-  ) as HTMLSpanElement[]
-  swiperNode = document.getElementsByClassName('galleryInner').item(0) as HTMLDivElement
-  gallery = document.getElementsByClassName('gallery').item(0) as HTMLDivElement
-  curtain = document.getElementsByClassName('curtain').item(0) as HTMLDivElement
-  galleryImages = Array.from(gallery.getElementsByTagName('img'))
-  collectionImages = Array.from(
-    document
-      .getElementsByClassName('collection')
-      .item(0)
-      ?.getElementsByTagName('img') ?? []
-  )
-  // state watcher
-  state.addWatcher(() => {
-    const s = state.get()
-    // change slide only when index is changed
-    if (s.index === lastIndex) return
-    changeSlide(s.index)
-    updateIndexText()
-    lastIndex = s.index
-  })
-  // mounted watcher
-  mounted.addWatcher((o) => {
-    if (!o) return
-    scrollable.set(true)
-  })
-  // dynamic import
-  window.addEventListener(
-    'touchstart',
-    () => {
-      loadGsap()
-        .then((g) => {
-          _gsap = g[0]
-          _Power3 = g[1]
-        })
-        .catch((e) => {
-          console.log(e)
-        })
-      loadSwiper()
-        .then((s) => {
-          _Swiper = s
-          swiper = new _Swiper(swiperNode, { spaceBetween: 20 })
-          swiper.on('slideChange', ({ realIndex }) => {
-            setIndex(realIndex)
-          })
-        })
-        .catch((e) => {
-          console.log(e)
-        })
-      libLoaded = true
-    },
-    { once: true, passive: true }
-  )
-  // mounted
-  mounted.set(true)
-}
-
-/**
- * helper
- */
-
-function changeSlide(slide: number): void {
-  loadImages()
-  swiper.slideTo(slide, 0)
-}
-
-function scrollToActive(): void {
-  collectionImages[state.get().index].scrollIntoView({
-    block: 'center',
-    behavior: 'auto'
-  })
-}
-
-function updateIndexText(): void {
-  const indexValue: string = expand(state.get().index + 1)
-  const indexLength: string = expand(state.get().length)
-  indexDispNums.forEach((e: HTMLSpanElement, i: number) => {
-    if (i < 4) {
-      e.innerText = indexValue[i]
-    } else {
-      e.innerText = indexLength[i - 4]
-    }
-  })
-}
-
-function createGallery(ijs: ImageJSON[]): void {
-  /**
-   * gallery
-   * |- galleryInner
-   *    |- swiper-wrapper
-   *       |- swiper-slide
-   *          |- img
-   *       |- swiper-slide
-   *          |- img
-   *       |- ...
-   * |- nav
-   *    |- index
-   *    |- close
-   */
-  // swiper wrapper
-  const _swiperWrapper = document.createElement('div')
-  _swiperWrapper.className = 'swiper-wrapper'
-  // swiper slide
-  for (const ij of ijs) {
-    const _swiperSlide = document.createElement('div')
-    _swiperSlide.className = 'swiper-slide'
-    // img
-    const e = document.createElement('img')
-    e.dataset.src = ij.hiUrl
-    e.height = ij.hiImgH
-    e.width = ij.hiImgW
-    e.alt = ij.alt
-    // append
-    _swiperSlide.append(e)
-    _swiperWrapper.append(_swiperSlide)
-  }
-  // swiper node
-  const _swiperNode = document.createElement('div')
-  _swiperNode.className = 'galleryInner'
-  _swiperNode.append(_swiperWrapper)
-  // index
-  const _index = document.createElement('div')
-  _index.insertAdjacentHTML(
-    'afterbegin',
-    `<span class="num"></span><span class="num"></span><span class="num"></span><span class="num"></span>
-    <span>/</span>
-    <span class="num"></span><span class="num"></span><span class="num"></span><span class="num"></span>`
-  )
-  // close
-  const _close = document.createElement('div')
-  const str: string = document
-    .getElementById('main')
-    ?.getAttribute('closeText') as string
-  _close.innerText = capitalizeFirstLetter(str)
-  _close.addEventListener(
-    'click',
-    () => {
-      slideDown()
-    },
-    { passive: true }
-  )
-  _close.addEventListener(
-    'keydown',
-    () => {
-      slideDown()
-    },
-    { passive: true }
-  )
-  // nav
-  const _navDiv = document.createElement('div')
-  _navDiv.className = 'nav'
-  _navDiv.append(_index, _close)
-  // gallery
-  const _gallery = document.createElement('div')
-  _gallery.className = 'gallery'
-  _gallery.append(_swiperNode)
-  _gallery.append(_navDiv)
-
-  /**
-   * curtain
-   */
-  const _curtain = document.createElement('div')
-  _curtain.className = 'curtain'
-
-  /**
-   * container
-   * |- gallery
-   * |- curtain
-   */
-  container.append(_gallery, _curtain)
-}
-
-function loadImages(): void {
-  const activeImages: HTMLImageElement[] = []
-  // load current, next, prev image
-  activeImages.push(galleryImages[swiper.activeIndex])
-  activeImages.push(
-    galleryImages[Math.min(swiper.activeIndex + 1, swiper.slides.length)]
-  )
-  activeImages.push(galleryImages[Math.max(swiper.activeIndex - 1, 0)])
-  for (const e of activeImages) {
-    e.src = e.dataset.src as string
-  }
-}

assets/ts/mobile/gallery.tsx

@@ -0,0 +1,242 @@
+import { type gsap } from 'gsap'
+import {
+  createEffect,
+  createSignal,
+  For,
+  on,
+  onMount,
+  Show,
+  type Accessor,
+  type JSX,
+  type Setter
+} from 'solid-js'
+import { createStore } from 'solid-js/store'
+import { type Swiper } from 'swiper'
+import invariant from 'tiny-invariant'
+
+import { type ImageJSON } from '../resources'
+import { useState } from '../state'
+import { loadGsap, type Vector } from '../utils'
+
+import GalleryImage from './galleryImage'
+import GalleryNav, { capitalizeFirstLetter } from './galleryNav'
+
+function removeDuplicates<T>(arr: T[]): T[] {
+  if (arr.length < 2) return arr // optimization
+  return [...new Set(arr)]
+}
+
+async function loadSwiper(): Promise<typeof Swiper> {
+  const s = await import('swiper')
+  return s.Swiper
+}
+
+export default function Gallery(props: {
+  children?: JSX.Element
+  ijs: ImageJSON[]
+  closeText: string
+  loadingText: string
+  isAnimating: Accessor<boolean>
+  setIsAnimating: Setter<boolean>
+  isOpen: Accessor<boolean>
+  setIsOpen: Setter<boolean>
+  setScrollable: Setter<boolean>
+}): JSX.Element {
+  // variables
+  let _gsap: typeof gsap
+  let _swiper: Swiper
+
+  let curtain: HTMLDivElement | undefined
+  let gallery: HTMLDivElement | undefined
+  let galleryInner: HTMLDivElement | undefined
+
+  // eslint-disable-next-line solid/reactivity
+  const _loadingText = capitalizeFirstLetter(props.loadingText)
+
+  // states
+  let lastIndex = -1
+  let mounted = false
+  let navigateVector: Vector = 'none'
+
+  const [state, { setIndex }] = useState()
+  const [libLoaded, setLibLoaded] = createSignal(false)
+  // eslint-disable-next-line solid/reactivity
+  const [loads, setLoads] = createStore(Array<boolean>(props.ijs.length).fill(false))
+
+  // helper functions
+  const slideUp: () => void = () => {
+    // isAnimating is prechecked in isOpen effect
+    if (!libLoaded() || !mounted) return
+    props.setIsAnimating(true)
+
+    invariant(curtain, 'curtain is not defined')
+    invariant(gallery, 'gallery is not defined')
+
+    _gsap.to(curtain, {
+      opacity: 1,
+      duration: 1
+    })
+
+    _gsap.to(gallery, {
+      y: 0,
+      ease: 'power3.inOut',
+      duration: 1,
+      delay: 0.4
+    })
+
+    setTimeout(() => {
+      props.setScrollable(false)
+      props.setIsAnimating(false)
+    }, 1200)
+  }
+
+  const slideDown: () => void = () => {
+    // isAnimating is prechecked in isOpen effect
+    props.setIsAnimating(true)
+
+    invariant(gallery, 'curtain is not defined')
+    invariant(curtain, 'gallery is not defined')
+
+    _gsap.to(gallery, {
+      y: '100%',
+      ease: 'power3.inOut',
+      duration: 1
+    })
+
+    _gsap.to(curtain, {
+      opacity: 0,
+      duration: 1.2,
+      delay: 0.4
+    })
+
+    setTimeout(() => {
+      // cleanup
+      props.setScrollable(true)
+      props.setIsAnimating(false)
+      lastIndex = -1
+    }, 1400)
+  }
+
+  const galleryLoadImages: () => void = () => {
+    let activeImagesIndex: number[] = []
+    const _state = state()
+    const currentIndex = _state.index
+    const nextIndex = Math.min(currentIndex + 1, _state.length - 1)
+    const prevIndex = Math.max(currentIndex - 1, 0)
+    switch (navigateVector) {
+      case 'next':
+        activeImagesIndex = [nextIndex]
+        break
+      case 'prev':
+        activeImagesIndex = [prevIndex]
+        break
+      case 'none':
+        activeImagesIndex = [currentIndex, nextIndex, prevIndex]
+        break
+    }
+    setLoads(removeDuplicates(activeImagesIndex), true)
+  }
+
+  const changeSlide: (slide: number) => void = (slide) => {
+    // we are already in the gallery, don't need to
+    // check mounted or libLoaded
+    galleryLoadImages()
+    _swiper.slideTo(slide, 0)
+  }
+
+  // effects
+  onMount(() => {
+    window.addEventListener(
+      'touchstart',
+      () => {
+        loadGsap()
+          .then((g) => {
+            _gsap = g
+          })
+          .catch((e) => {
+            console.log(e)
+          })
+        loadSwiper()
+          .then((S) => {
+            invariant(galleryInner, 'galleryInner is not defined')
+            _swiper = new S(galleryInner, { spaceBetween: 20 })
+            _swiper.on('slideChange', ({ realIndex }) => {
+              setIndex(realIndex)
+            })
+          })
+          .catch((e) => {
+            console.log(e)
+          })
+        setLibLoaded(true)
+      },
+      { once: true, passive: true }
+    )
+    mounted = true
+  })
+
+  createEffect(
+    on(
+      () => {
+        state()
+      },
+      () => {
+        const i = state().index
+        if (i === lastIndex)
+          return // change slide only when index is changed
+        else if (lastIndex === -1)
+          navigateVector = 'none' // lastIndex before set
+        else if (i < lastIndex)
+          navigateVector = 'prev' // set navigate vector for galleryLoadImages
+        else if (i > lastIndex)
+          navigateVector = 'next' // set navigate vector for galleryLoadImages
+        else navigateVector = 'none' // default
+        changeSlide(i) // change slide to new index
+        lastIndex = i // update last index
+      }
+    )
+  )
+
+  createEffect(
+    on(
+      () => {
+        props.isOpen()
+      },
+      () => {
+        if (props.isAnimating()) return
+        if (props.isOpen()) slideUp()
+        else slideDown()
+      },
+      { defer: true }
+    )
+  )
+
+  return (
+    <>
+      <div ref={gallery} class="gallery">
+        <div ref={galleryInner} class="galleryInner">
+          <div class="swiper-wrapper">
+            <Show when={libLoaded()}>
+              <For each={props.ijs}>
+                {(ij, i) => (
+                  <div class="swiper-slide">
+                    <GalleryImage
+                      load={loads[i()]}
+                      ij={ij}
+                      loadingText={_loadingText}
+                    />
+                  </div>
+                )}
+              </For>
+            </Show>
+          </div>
+        </div>
+        <GalleryNav
+          closeText={props.closeText}
+          isAnimating={props.isAnimating}
+          setIsOpen={props.setIsOpen}
+        />
+      </div>
+      <div ref={curtain} class="curtain" />
+    </>
+  )
+}

assets/ts/mobile/galleryImage.tsx

@@ -0,0 +1,69 @@
+import { onMount, type JSX } from 'solid-js'
+import invariant from 'tiny-invariant'
+
+import type { ImageJSON } from '../resources'
+import { useState } from '../state'
+import { loadGsap } from '../utils'
+
+export default function GalleryImage(props: {
+  children?: JSX.Element
+  load: boolean
+  ij: ImageJSON
+  loadingText: string
+}): JSX.Element {
+  let img: HTMLImageElement | undefined
+  let loadingDiv: HTMLDivElement | undefined
+
+  let _gsap: typeof gsap
+
+  const [state] = useState()
+
+  onMount(() => {
+    loadGsap()
+      .then((g) => {
+        _gsap = g
+      })
+      .catch((e) => {
+        console.log(e)
+      })
+    img?.addEventListener(
+      'load',
+      () => {
+        invariant(img, 'ref must be defined')
+        invariant(loadingDiv, 'loadingDiv must be defined')
+        if (state().index !== props.ij.index) {
+          _gsap.set(img, { opacity: 1 })
+          _gsap.set(loadingDiv, { opacity: 0 })
+        } else {
+          _gsap.to(img, {
+            opacity: 1,
+            delay: 0.5,
+            duration: 0.5,
+            ease: 'power3.out'
+          })
+          _gsap.to(loadingDiv, { opacity: 0, duration: 0.5, ease: 'power3.in' })
+        }
+      },
+      { once: true, passive: true }
+    )
+  })
+
+  return (
+    <>
+      <div class="slideContainer">
+        <img
+          ref={img}
+          {...(props.load && { src: props.ij.hiUrl })}
+          height={props.ij.hiImgH}
+          width={props.ij.hiImgW}
+          data-src={props.ij.hiUrl}
+          alt={props.ij.alt}
+          style={{ opacity: 0 }}
+        />
+        <div ref={loadingDiv} class="loadingText">
+          {props.loadingText}
+        </div>
+      </div>
+    </>
+  )
+}

assets/ts/mobile/galleryNav.tsx

@@ -0,0 +1,46 @@
+import { createMemo, type Accessor, type JSX, type Setter } from 'solid-js'
+
+import { useState } from '../state'
+import { expand } from '../utils'
+
+export function capitalizeFirstLetter(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+export default function GalleryNav(props: {
+  children?: JSX.Element
+  closeText: string
+  isAnimating: Accessor<boolean>
+  setIsOpen: Setter<boolean>
+}): JSX.Element {
+  // states
+  const [state] = useState()
+  const indexValue = createMemo(() => expand(state().index + 1))
+  const indexLength = createMemo(() => expand(state().length))
+
+  const onClick: () => void = () => {
+    if (props.isAnimating()) return
+    props.setIsOpen(false)
+  }
+
+  return (
+    <>
+      <div class="nav">
+        <div>
+          <span class="num">{indexValue()[0]}</span>
+          <span class="num">{indexValue()[1]}</span>
+          <span class="num">{indexValue()[2]}</span>
+          <span class="num">{indexValue()[3]}</span>
+          <span>/</span>
+          <span class="num">{indexLength()[0]}</span>
+          <span class="num">{indexLength()[1]}</span>
+          <span class="num">{indexLength()[2]}</span>
+          <span class="num">{indexLength()[3]}</span>
+        </div>
+        <div onClick={onClick} onKeyDown={onClick}>
+          {capitalizeFirstLetter(props.closeText)}
+        </div>
+      </div>
+    </>
+  )
+}

assets/ts/mobile/init.ts

@@ -1,9 +0,0 @@
-import { type ImageJSON } from '../resources'
-
-import { initCollection } from './collection'
-import { initGallery } from './gallery'
-
-export function initMobile(ijs: ImageJSON[]): void {
-  initCollection(ijs)
-  initGallery(ijs)
-}

assets/ts/mobile/layout.tsx

@@ -0,0 +1,52 @@
+import { Show, createSignal, type JSX, type Setter } from 'solid-js'
+
+import type { ImageJSON } from '../resources'
+
+import Collection from './collection'
+import Gallery from './gallery'
+
+/**
+ * interfaces
+ */
+
+export interface MobileImage extends HTMLImageElement {
+  dataset: {
+    src: string
+    index: string
+  }
+}
+
+export default function Mobile(props: {
+  children?: JSX.Element
+  ijs: ImageJSON[]
+  closeText: string
+  loadingText: string
+  setScrollable: Setter<boolean>
+}): JSX.Element {
+  // states
+  const [isOpen, setIsOpen] = createSignal(false)
+  const [isAnimating, setIsAnimating] = createSignal(false)
+
+  return (
+    <>
+      <Show when={props.ijs.length > 0}>
+        <Collection
+          ijs={props.ijs}
+          isAnimating={isAnimating}
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+        />
+        <Gallery
+          ijs={props.ijs}
+          closeText={props.closeText}
+          loadingText={props.loadingText}
+          isAnimating={isAnimating}
+          setIsAnimating={setIsAnimating}
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          setScrollable={props.setScrollable}
+        />
+      </Show>
+    </>
+  )
+}

assets/ts/mobile/mounted.ts

@@ -1,3 +0,0 @@
-import { Watchable } from '../utils'
-
-export const mounted = new Watchable<boolean>(false)

assets/ts/mobile/scroll.ts

@@ -1,3 +0,0 @@
-import { Watchable } from '../utils'
-
-export const scrollable = new Watchable<boolean>(true)

assets/ts/nav.ts

@@ -1,104 +0,0 @@
-import { decThreshold, incThreshold, state } from './state'
-import { expand } from './utils'
-
-/**
- * variables
- */
-
-// threshold div
-const thresholdDiv = document
-  .getElementsByClassName('threshold')
-  .item(0) as HTMLDivElement
-
-// threshold nums span
-const thresholdDispNums = Array.from(
-  thresholdDiv.getElementsByClassName('num')
-) as HTMLSpanElement[]
-
-// threshold buttons
-const decButton = thresholdDiv
-  .getElementsByClassName('dec')
-  .item(0) as HTMLButtonElement
-const incButton = thresholdDiv
-  .getElementsByClassName('inc')
-  .item(0) as HTMLButtonElement
-
-// index div
-const indexDiv = document.getElementsByClassName('index').item(0) as HTMLDivElement
-
-// index nums span
-const indexDispNums = Array.from(
-  indexDiv.getElementsByClassName('num')
-) as HTMLSpanElement[]
-
-// links div
-const linksDiv = document.getElementsByClassName('links').item(0) as HTMLDivElement
-
-// links
-const links = Array.from(linksDiv.getElementsByClassName('link')) as HTMLAnchorElement[]
-
-// current link index
-const currentLinkIndex = document
-  .getElementById('main')
-  ?.getAttribute('currentMenuItemIndex') as string
-
-// set current link
-for (const [index, link] of links.entries()) {
-  if (index === parseInt(currentLinkIndex)) {
-    // set current link style
-    link.classList.add('current')
-    // set current link title (only if not home)
-    if (index !== 0) document.title = link.innerText + ' | ' + document.title
-  }
-}
-
-/**
- * init
- */
-
-export function initNav(): void {
-  const s = state.get()
-  // init threshold text
-  updateThresholdText(expand(s.threshold))
-  // init index text
-  updateIndexText(expand(s.index + 1), expand(s.length))
-  // add watcher for updating nav text
-  state.addWatcher((o) => {
-    updateIndexText(expand(o.index + 1), expand(o.length))
-    updateThresholdText(expand(o.threshold))
-  })
-
-  // event listeners
-  decButton.addEventListener(
-    'click',
-    () => {
-      decThreshold()
-    },
-    { passive: true }
-  )
-  incButton.addEventListener(
-    'click',
-    () => {
-      incThreshold()
-    },
-    { passive: true }
-  )
-}
-
-// helper
-
-export function updateThresholdText(thresholdValue: string): void {
-  thresholdDispNums.forEach((e: HTMLSpanElement, i: number) => {
-    e.innerText = thresholdValue[i]
-  })
-}
-
-export function updateIndexText(indexValue: string, indexLength: string): void {
-  indexDispNums.forEach((e: HTMLSpanElement, i: number) => {
-    if (i < 4) {
-      e.innerText = indexValue[i]
-    } else {
-      e.innerText = indexLength[i - 4]
-    }
-  })
-}

assets/ts/resources.ts

@@ -10,9 +10,20 @@ export interface ImageJSON {
   hiImgW: number
 }
 
-export async function initResources(): Promise<ImageJSON[]> {
+export async function getImageJSON(): Promise<ImageJSON[]> {
+  if (document.title.split(' | ')[0] === '404') {
+    return [] // no images on 404 page
+  }
+
+  const ogUrlMetaTag = document.querySelector(
+    'meta[property="og:url"]'
+  ) as HTMLMetaElement | null
+  const indexJsonUrl = ogUrlMetaTag?.content
+    ? new URL('index.json', ogUrlMetaTag.content).href
+    : new URL('index.json', window.location.href).href
+
   try {
-    const response = await fetch(`${window.location.href}index.json`, {
+    const response = await fetch(indexJsonUrl, {
       headers: {
         Accept: 'application/json'
       }
@@ -24,7 +35,8 @@ export async function initResources(): Promise<ImageJSON[]> {
       }
       return 1
     })
-  } catch (_) {
+  } catch (e) {
+    console.error(e)
     return []
   }
 }

assets/ts/state.ts

@@ -1,89 +0,0 @@
-import { Watchable, decrement, increment } from './utils'
-
-/**
- * types
- */
-
-export type State = typeof defaultState
-
-/**
- * variables
- */
-
-const thresholds = [
-  { threshold: 20, trailLength: 20 },
-  { threshold: 40, trailLength: 10 },
-  { threshold: 80, trailLength: 5 },
-  { threshold: 140, trailLength: 5 },
-  { threshold: 200, trailLength: 5 }
-]
-
-const defaultState = {
-  index: -1,
-  length: 0,
-  threshold: thresholds[getThresholdSessionIndex()].threshold,
-  trailLength: thresholds[getThresholdSessionIndex()].trailLength
-}
-
-export const state = new Watchable<State>(defaultState)
-
-/**
- * main functions
- */
-
-export function initState(length: number): void {
-  const s = state.get()
-  s.length = length
-  updateThreshold(s, 0)
-  state.set(s)
-}
-
-export function setIndex(index: number): void {
-  const s = state.get()
-  s.index = index
-  state.set(s)
-}
-
-export function incIndex(): void {
-  const s = state.get()
-  s.index = increment(s.index, s.length)
-  state.set(s)
-}
-
-export function decIndex(): void {
-  const s = state.get()
-  s.index = decrement(s.index, s.length)
-  state.set(s)
-}
-
-export function incThreshold(): void {
-  let s = state.get()
-  s = updateThreshold(s, 1)
-  state.set(s)
-}
-
-export function decThreshold(): void {
-  let s = state.get()
-  s = updateThreshold(s, -1)
-  state.set(s)
-}
-
-/**
- * helper
- */
-
-function updateThreshold(state: State, inc: number): State {
-  const i = thresholds.findIndex((t) => state.threshold === t.threshold) + inc
-  // out of bounds
-  if (i < 0 || i >= thresholds.length) return state
-  // storage the index so we can restore it even if we go to another page
-  sessionStorage.setItem('thresholdsIndex', i.toString())
-  const newItems = thresholds[i]
-  return { ...state, ...newItems }
-}
-
-function getThresholdSessionIndex(): number {
-  const s = sessionStorage.getItem('thresholdsIndex')
-  if (s === null) return 2
-  return parseInt(s)
-}

assets/ts/state.tsx

@@ -0,0 +1,136 @@
+import {
+  createContext,
+  createSignal,
+  useContext,
+  type Accessor,
+  type JSX,
+  type Setter
+} from 'solid-js'
+import invariant from 'tiny-invariant'
+
+import { decrement, getThresholdSessionIndex, increment } from './utils'
+
+/**
+ * interfaces and types
+ */
+
+export interface ThresholdRelated {
+  threshold: number
+  trailLength: number
+}
+
+export interface State {
+  index: number
+  length: number
+  threshold: number
+  trailLength: number
+}
+
+export type StateContextType = readonly [
+  Accessor<State>,
+  {
+    readonly setIndex: (index: number) => void
+    readonly incIndex: () => void
+    readonly decIndex: () => void
+    readonly incThreshold: () => void
+    readonly decThreshold: () => void
+  }
+]
+
+/**
+ * constants
+ */
+
+const thresholds: ThresholdRelated[] = [
+  { threshold: 20, trailLength: 20 },
+  { threshold: 40, trailLength: 10 },
+  { threshold: 80, trailLength: 5 },
+  { threshold: 140, trailLength: 5 },
+  { threshold: 200, trailLength: 5 }
+]
+const makeStateContext: (
+  state: Accessor<State>,
+  setState: Setter<State>
+) => StateContextType = (state: Accessor<State>, setState: Setter<State>) => {
+  return [
+    state,
+    {
+      setIndex: (index: number) => {
+        setState((s) => {
+          return { ...s, index }
+        })
+      },
+      incIndex: () => {
+        setState((s) => {
+          return { ...s, index: increment(s.index, s.length) }
+        })
+      },
+      decIndex: () => {
+        setState((s) => {
+          return { ...s, index: decrement(s.index, s.length) }
+        })
+      },
+      incThreshold: () => {
+        setState((s) => {
+          return { ...s, ...updateThreshold(s.threshold, thresholds, 1) }
+        })
+      },
+      decThreshold: () => {
+        setState((s) => {
+          return { ...s, ...updateThreshold(s.threshold, thresholds, -1) }
+        })
+      }
+    }
+  ] as const
+}
+const StateContext = createContext<StateContextType>()
+
+/**
+ * helper functions
+ */
+
+function updateThreshold(
+  currentThreshold: number,
+  thresholds: ThresholdRelated[],
+  stride: number
+): ThresholdRelated {
+  const i = thresholds.findIndex((t) => t.threshold === currentThreshold) + stride
+  if (i < 0 || i >= thresholds.length) return thresholds[i - stride]
+  // storage the index so we can restore it even if we go to another page
+  sessionStorage.setItem('thresholdsIndex', i.toString())
+  return thresholds[i]
+}
+
+/**
+ * StateProvider
+ */
+
+export function StateProvider(props: {
+  children?: JSX.Element
+  length: number
+}): JSX.Element {
+  const defaultState: State = {
+    index: -1,
+    // eslint-disable-next-line solid/reactivity
+    length: props.length,
+    threshold: thresholds[getThresholdSessionIndex()].threshold,
+    trailLength: thresholds[getThresholdSessionIndex()].trailLength
+  }
+
+  const [state, setState] = createSignal(defaultState)
+  // eslint-disable-next-line solid/reactivity
+  const contextValue = makeStateContext(state, setState)
+  return (
+    <StateContext.Provider value={contextValue}>{props.children}</StateContext.Provider>
+  )
+}
+
+/**
+ * use context
+ */
+
+export function useState(): StateContextType {
+  const uc = useContext(StateContext)
+  invariant(uc, 'undefined context')
+  return uc
+}

assets/ts/utils.ts

@@ -1,8 +1,13 @@
-import { type Power3, type gsap } from 'gsap'
-import { type Swiper } from 'swiper'
+import { type gsap } from 'gsap'
 
 /**
- * custom helpers
+ * types
+ */
+
+export type Vector = 'prev' | 'next' | 'none'
+
+/**
+ * utils
  */
 
 export function increment(num: number, length: number): number {
@@ -17,62 +22,18 @@ export function expand(num: number): string {
   return ('0000' + num.toString()).slice(-4)
 }
 
-export function isMobile(): boolean {
-  return window.matchMedia('(hover: none)').matches
-}
-
-export function getRandom(min: number, max: number): number {
-  return Math.floor(Math.random() * (max - min + 1)) + min
-}
-
-export function onVisible<T extends Element>(
-  element: T,
-  callback: (arg0: T) => void
-): void {
-  new IntersectionObserver((entries, observer) => {
-    entries.forEach((entry) => {
-      if (entry.intersectionRatio > 0) {
-        callback(element)
-        observer.disconnect()
-      }
-    })
-  }).observe(element)
-}
-
-export function capitalizeFirstLetter(str: string): string {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
-export async function loadGsap(): Promise<[typeof gsap, typeof Power3]> {
+export async function loadGsap(): Promise<typeof gsap> {
   const g = await import('gsap')
-  return [g.gsap, g.Power3]
+  return g.gsap
 }
 
-export async function loadSwiper(): Promise<typeof Swiper> {
-  const s = await import('swiper')
-  return s.Swiper
+export function getThresholdSessionIndex(): number {
+  const s = sessionStorage.getItem('thresholdsIndex')
+  if (s === null) return 2
+  return parseInt(s)
 }
 
-/**
- * custom types
- */
-
-export class Watchable<T> {
-  constructor(private obj: T) {}
-  private readonly watchers: Array<(arg0: T) => void> = []
-
-  get(): T {
-    return this.obj
-  }
-
-  set(e: T): void {
-    this.obj = e
-    this.watchers.forEach((watcher) => {
-      watcher(this.obj)
-    })
-  }
-
-  addWatcher(watcher: (arg0: T) => void): void {
-    this.watchers.push(watcher)
-  }
+export function removeDuplicates<T>(arr: T[]): T[] {
+  if (arr.length < 2) return arr // optimization
+  return [...new Set(arr)]
 }

doc/getStarted.md

@@ -1,177 +0,0 @@
-# Getting Started
-
-The files in `exampleSite` is just a simple example. Now, we will introduce it based on the same structure.
-
-## Requirements
-
-Before you start, make sure you have installed Hugo **extended version**. For more information, see [Hugo's documentation](https://gohugo.io/getting-started/installing/).
-
-Once you have installed Hugo, you can check the version by running the following command:
-
-```shell
-hugo version
-```
-
-Which should output something like this (the version number may be different), notice the `extended` keyword:
-
-```shell
-hugo v0.120.3-a4892a07b41b7b3f1f143140ee4ec0a9a5cf3970+extended darwin/arm64 BuildDate=2023-11-01T17:57:00Z VendorInfo=brew
-```
-
-The minimum required Hugo version can be seen in the [`theme.toml`](https://github.com/Sped0n/bridget/blob/main/theme.toml#L19).
-
-## Installation
-
-### Git
-
-On the main branch, you can find the theme's latest source code. To use the latest version, you can clone the repository to `themes/bridget` by running the following command in the root directory of your Hugo site:
-
-```shell
-git clone https://github.com/Sped0n/bridget themes/bridget
-```
-
-If you are already using Git for your site, you can add the theme as a submodule by running the following command in the root directory of your Hugo site:
-
-```shell
-git submodule add https://github.com/Sped0n/bridget themes/bridget
-```
-
-After cloning/downloading theme files to the directory, if you want to customize the theme, please run `pnpm install` or `npm install` first.
-
-### Module (recommended)
-
-> If you want to modify the theme, use Git installation instead.
-
-This theme is also available as a [Hugo module](https://gohugo.io/hugo-modules/). Run the following command in the root directory of your Hugo site:
-
-First turn your site into a Hugo module (in case you haven't done it yet):
-
-```shell
-hugo mod init github.com/me/my-new-site
-# or whatever you like, it doesn’t necessarily have to be a GitHub link.
-hugo mod init blablabla
-```
-
-Then import the theme as a dependency adding the following line to the `module` section of your site's configuration file.
-
-```toml
-# config/_default/hugo.toml
-[module]
-[[module.imports]]
-path = "github.com/Sped0n/bridget"
-```
-
-If you want to upgrade the theme, just run:
-
-```shell
-hugo mod get -u
-```
-
-## Content Management
-
-The content is where the pictures/text is stored, while the static refers to the website icons.
-
-```
-.
-├── content
-│  ├── Erwitt
-│  │  ├── 1.jpg
-│  │  ├── ***
-│  │  └── index.md
-│  ├── Gruyaert
-│  │  ├── 1.jpg
-│  │  ├── ***
-│  │  └── index.md
-│  ├── Info
-│  │  └── index.md
-│  └── Webb
-│     ├── 1.jpg
-│     ├── ***
-│     └── index.md
-└── static
-   ├── dot.png
-   └── dot.svg
-```
-
-In each index.md file, there is a configuration file like this:
-
-```markdown
----
-type: _default
-layout: single
-url: /erwitt/
-menu:
-  main:
-    weight: 3
-    identifier: Erwitt
-    title: Erwitt
-unifiedAlt: '© Elliott Erwitt'
----
-```
-
-- keep the `type` and `layout` **untouched**;
-
-- `url` is the href link to this page, in this case, you can visit this page with `blabla.com/erwitt`;
-
-- `main` is the entry to `menu`;
-
-- `weight` determines the position of this link in the navigation bar, with the first one being 1, the second one being 2, and so on;
-
-- `identifier` should be the **same** as the name of the **upper-level directory**;
-
-- `title` refers to the text that appears on the navigation bar;
-
-- `unifiedAlt` is **optional**, If you left it empty, the alt attribute of the image will default to its file name; if it is set, the alt attributes of all images will be unified to the value you have set;
-
-- If this is a **showcase** page, simply place the images in the same directory as index.md.
-
-- If this is an **information** page, you can continue writing the information you want to display in index.md.
-
-  > However, please note that the CSS for the information page **only provides simple styling for text**. If you have any requirements beyond text and the browser rendering does not meet your expectations, please modify [`_article.scss`](https://github.com/Sped0n/bridget/blob/main/assets/scss/_partial/_article.scss).
-
-As for the **website icon**, place the files in static and then go to config part for further reading.
-
-## Config
-
-You can simply copy this to the root directory of your site with minor modifications, and you’ll be ready to proceed.
-
-```
-.
-└── config
-   └── _default
-      ├── hugo.toml
-      ├── markup.toml
-      ├── params.toml
-      └── sitemap.toml
-```
-
-### `hugo.toml`
-
-We will focus on introducing the part about `theme as module`, detailed comments are provided for other options, so we won’t repeat them here.
-
-```toml
-# theme as module
-[module]
-replacements = "github.com/Sped0n/bridget -> ../.."
-[[module.imports]]
-path = "github.com/Sped0n/bridget"
-```
-
-- If you want to <u>modify the theme</u> or you have <u>installation with Git</u>, please **keep the `replacements` configuration** and change the path after the arrow to the location of your local theme file (relative path only).
-- If you have <u>installation with Module</u>, **remove the `replacements` configuration**.
-
-### `markup.toml`
-
-**DO NOT TOUCH THIS**
-
-### `params.toml`
-
-Detailed description in the comments.
-
-> ⚠️⚠️⚠️
->
-> Only thing that you need to pay **extra attention** is the [`bundled`](https://github.com/Sped0n/bridget/blob/1e2f1fadde9c16989eef1ab771f2ac8463dec5a4/exampleSite/config/_default/params.toml#L6) option, please read the corresponding doc and set it as your need.
-
-### `sitemap.toml`
-
-https://gohugo.io/templates/sitemap-template/#configuration

docs.md

@@ -0,0 +1,301 @@
+### Contents
+
+- [Prequisites](#prequisites)
+- [Installation](#installation)
+  - [Hugo Modules (Recommended)](#hugo-modules-recommended)
+  - [Git Repository (For Customizations)](#git-repository-for-customizations)
+- [Content Management](#content-management)
+  - [`index.md`](#indexmd)
+    - [Front Matter](#front-matter)
+    - [Markdown Content](#markdown-content)
+  - [Favicon](#favicon)
+- [Configuration](#configuration)
+  - [`hugo.toml`](#hugotoml)
+  - [`markup.toml`](#markuptoml)
+  - [`outputs.toml`](#outputstoml)
+  - [`params.toml`](#paramstoml)
+  - [`sitemap.toml`](#sitemaptoml)
+- [Customizations](#customizations)
+  - [Change Font](#change-font)
+  - [Add a Custom Analytic Script](#add-a-custom-analytic-script)
+
+---
+
+## Prequisites
+
+_[Contents](#contents)_
+
+- Hugo (extended), 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`)
+
+  ```bash
+  ❯ sass --embedded --version
+  {
+    "protocolVersion": "2.4.0",
+    "compilerVersion": "1.70.0",
+    "implementationVersion": "1.70.0",
+    "implementationName": "dart-sass",
+    "id": 0
+  }
+  ```
+
+## Installation
+
+_[Contents](#contents)_
+
+### Hugo Modules (Recommended)
+
+_[Contents](#contents)_
+
+> [!IMPORTANT]
+> Checkout https://gohugo.io/hugo-modules/use-modules/#prerequisite before using Hugo Modules.
+
+First turn your site into a Hugo module (in case you haven't done it yet):
+
+```bash
+hugo mod init github.com/me/my-new-site
+# or whatever you like, it doesn’t need to be a valid GitHub repo link.
+hugo mod init blablabla
+```
+
+Then import the theme as a dependency adding the following line to the `module` section of your site's configuration file.
+
+```toml
+# config/_default/hugo.toml
+[module]
+[[module.imports]]
+path = "github.com/Sped0n/bridget/v2"
+```
+
+If you want to upgrade the theme, just run:
+
+```shell
+hugo mod get -u
+```
+
+### Git Repository (For Customizations)
+
+_[Contents](#contents)_
+
+First clone the repository into your `themes` directory:
+
+```bash
+# latest version (main branch, might be unstable)
+git clone https://github.com/Sped0n/bridget themes/bridget
+
+# and you can checkout to a specific stable version, see https://github.com/Sped0n/bridget/releases
+cd themes/bridget
+git checkout v1.0.0
+```
+
+If you are already using Git for your site, you can add the theme as a submodule by running the following command in the root directory of your Hugo site:
+
+```bash
+git submodule add https://github.com/Sped0n/bridget themes/bridget
+```
+
+## Content Management
+
+_[Contents](#contents)_
+
+The content is where the pictures/text is stored, while the static refers to the website icons.
+
+```
+.
+├── content
+│  ├── Erwitt
+│  │  ├── 1.jpg
+│  │  ├── ***
+│  │  └── index.md
+│  ├── Gruyaert
+│  │  ├── 1.jpg
+│  │  ├── ***
+│  │  └── index.md
+│  ├── Info
+│  │  └── index.md
+│  └── Webb
+│     ├── 1.jpg
+│     ├── ***
+│     └── index.md
+└── static
+   ├── dot.png
+   └── dot.svg
+```
+
+### `index.md`
+
+_[Contents](#contents)_
+
+#### Front Matter
+
+_[Contents](#contents)_
+
+Inside each index.md file, there is a front matter like this:
+
+```markdown
+---
+type: _default # just copy
+layout: single # just copy
+url: /erwitt/
+menu:
+  main:
+    weight: 3
+    identifier: Erwitt
+    title: Erwitt
+unifiedAlt: '© Elliott Erwitt'
+build:
+  publishResources: false # just copy
+---
+```
+
+- `url` is the href link to this page, in this case, you can visit this page with `blabla.com/erwitt`;
+- `main` is the entry to `menu`;
+  - `weight` determines the position of this link in the navigation bar, with the first one being 1, the second one being 2, and so on;
+  - `identifier` should be the **same** as the name of the **upper-level directory**;
+  - `title` refers to the text that appears on the navigation bar;
+- `unifiedAlt` is **optional**, If you left it empty, the alt attribute of the image will default to its file name; if it is set, the alt attributes of all images will be unified to the value you have set;
+
+#### Markdown Content
+
+_[Contents](#contents)_
+
+- If this is a **showcase** page:
+  - No need to write anything in index.md.
+  - Place the images in the same directory as `index.md`.
+- If this is an **information** page:
+  - You can write anything in index.md, and it will be rendered as HTML.
+  - However, please note that the CSS for the information page **only provides simple styling for text**. If you have any requirements beyond text and the browser rendering does not meet your expectations, please modify [`_article.scss`](https://github.com/Sped0n/bridget/blob/main/assets/scss/_partial/_article.scss).
+
+### Favicon
+
+_[Contents](#contents)_
+
+As for the **website icon**, place the files under `static` directory and then go to [config](#configuration) part for further reading.
+
+## Configuration
+
+_[Contents](#contents)_
+
+You can simply copy `exampleSite/config` to the root directory, with some minor modifications and you should be good to go.
+
+```
+.
+└── config
+   └── _default
+      ├── hugo.toml
+      ├── markup.toml
+      ├── outputs.toml
+      ├── params.toml
+      └── sitemap.toml
+```
+
+### `hugo.toml`
+
+_[Contents](#contents)_
+
+First, what you need to modify is the `baseURL` and `title`:
+
+```toml
+# timeout
+timeout = "1200s"
+# your website url
+baseURL = 'https://bridget-demo.sped0n.com' # <-- MODIFY ME
+# website title
+title = 'Bridget' # <-- MODIFY ME
+# don't touch this
+disableKinds = ["section", "taxonomy", "term", "home"]
+# robots.txt
+enableRobotsTXT = true
+```
+
+Depend on which [installation](#installation) method you choose, you need to modify the `module` section:
+
+- If you use [Hugo Modules](#hugo-modules-recommended):
+
+  ```toml
+  [module]
+  [[module.imports]]
+  path = "github.com/Sped0n/bridget/v2"
+  ```
+
+- If you use [Git Repository](#git-repository-for-customizations):
+
+  ```toml
+  [module]
+  # This is the relative path to hugo theme directory([official doc](https://gohugo.io/hugo-modules/configuration/#module-configuration-top-level))**.
+  replacements = "github.com/Sped0n/bridget/v2 -> ../.."
+  [[module.imports]]
+  path = "github.com/Sped0n/bridget/v2"
+  ```
+
+### `markup.toml`
+
+_[Contents](#contents)_
+
+**Just copy it.**
+
+### `outputs.toml`
+
+_[Contents](#contents)_
+
+**Just copy it.**
+
+_[Contents](#contents)_
+
+### `params.toml`
+
+_[Contents](#contents)_
+
+Detailed description in the comments.
+
+### `sitemap.toml`
+
+_[Contents](#contents)_
+
+https://gohugo.io/templates/sitemap-template/#configuration
+
+## Customizations
+
+_[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.
+
+### Change Font
+
+_[Contents](#contents)_
+
+These are the places you need to focus on:
+
+- `assets/scss/_core/_font.scss` (`@font-face`)
+- `assets/scss/_core/_typography.scss` (`body.font-family`)
+- `layouts/partials/head/link.html` (`preload`)
+- `static/lib/fonts/GeistVF.woff2` (font file itself)
+
+### Add a Custom Analytic Script
+
+_[Contents](#contents)_
+
+Go to `layouts/_default/baseof.html`:
+
+```html
+<!doctype html>
+<html lang="{{- site.LanguageCode -}}">
+  <head>
+    /* ---------- INSERT HERE ---------- */
+  </head>
+  <body lang="{{- site.LanguageCode -}}">
+    <div class="analytics">/* ---------- OR HERE ---------- */</div>
+  </body>
+</html>
+```

eslint.config.mjs

@@ -0,0 +1,80 @@
+import { default as eslint, default as js } from '@eslint/js'
+import tsParser from '@typescript-eslint/parser'
+import love from 'eslint-config-love'
+import importPlugin from 'eslint-plugin-import'
+import prettier from 'eslint-plugin-prettier/recommended'
+import solid from 'eslint-plugin-solid/configs/recommended'
+import { defineConfig, globalIgnores } from 'eslint/config'
+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']),
+  {
+    ...love,
+    ...prettier,
+
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+
+      parserOptions: {
+        project: './tsconfig.json'
+      }
+    },
+
+    settings: {
+      'import/resolver': {
+        typescript: {
+          project: './tsconfig.json'
+        }
+      }
+    },
+
+    rules: {
+      'prettier/prettier': 'error',
+      'arrow-body-style': 'off',
+      'prefer-arrow-callback': 'off',
+      'import/no-cycle': 'error',
+
+      'sort-imports': [
+        'error',
+        {
+          ignoreCase: false,
+          ignoreDeclarationSort: true,
+          ignoreMemberSort: true,
+          memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
+          allowSeparatedGroups: true
+        }
+      ],
+
+      'import/no-unresolved': 'error',
+
+      'import/order': [
+        'error',
+        {
+          groups: [
+            'builtin',
+            'external',
+            'internal',
+            'parent',
+            'sibling',
+            'index',
+            'unknown'
+          ],
+          'newlines-between': 'always',
+
+          alphabetize: {
+            order: 'asc',
+            caseInsensitive: true
+          }
+        }
+      ]
+    }
+  }
+])

exampleSite/config/_default/hugo.toml

@@ -1,27 +1,16 @@
 # timeout
 timeout = "1200s"
 # your website url
-baseURL = 'https://www.example.com/'
+baseURL = 'https://bridget-demo.sped0n.com'
 # website title
 title = 'Bridget'
 # don't touch this
 disableKinds = ["section", "taxonomy", "term", "home"]
 # robots.txt
 enableRobotsTXT = true
-# available options
-# * en (powered by Geist)
-# * de (powered by Geist)
-# * es (powered by Geist)
-# * fr (powered by Geist)
-# * it (powered by Geist)
-# * zh-sg zh-cn (powered by Noto Sans SC)
-# * zh-hk zh-tw zh-mo (powered by Noto Sans TC)
-# * ja (powered by Noto Sans JP)
-# * ko (powered by Noto Sans KR)
-defaultContentLanguage = 'en'
 
 # theme as module
 [module]
-replacements = "github.com/Sped0n/bridget -> ../.." # deploy with local dir  WARN: delete this line if you want to deploy with git
+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" # 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)  WARN: you should also set `bundled` to true in params.toml !!!

exampleSite/config/_default/params.toml

@@ -1,9 +1,22 @@
+# --- REQUIRED -----------------------------------------------------------------
+
 # description of the site (will be placed in meta)
-description = "Bridget is a minimal Hugo theme designed for photographers / visual artists."
-# use bundled js and css
-# * if you want to build the js and css from scratch, set this to false and run `npm install` and `npm run build`
-# * tldr: set this to false if you want to develop and edit the js and css
-bundled = false
+description = "Bridget is a minimal Hugo theme designed for photographers/visual artists."
+
+# resize options for dynamic resolution, please refer to https://gohugo.io/content-management/image-processing/#image-processing-options
+loResOpt = "800x webp Lanczos q60"
+hiResOpt = "2500x webp Lanczos q75"
+
+# labels (text shown on the UI)
+[labels]
+next = "next"
+prev = "prev"
+close = "close"
+threshold = "Threshold"
+error = "page not found"
+loading = "loading..."
+
+# --- OPTIONAL -----------------------------------------------------------------
 
 # whether to use favicon resource links
 # generate these with https://realfavicongenerator.net
@@ -13,16 +26,7 @@ svgFavicon = "/dot.svg"
 # fallback png favicon for unsupported browsers
 svgFaviconFallback = "/dot.png"
 
-# resize options for dynamic resolution, please refer to https://gohugo.io/content-management/image-processing/#image-processing-options
-loResOpt = "800x webp Lanczos q60"
-hiResOpt = "2500x webp Lanczos q75"
-
-# page config
-[page]
-# unified alt text for all images in the page
-unifiedAlt = ''
-
-# Site verification code for Google/Bing/Yandex/Pinterest/Baidu
+# site verification code for Google/Bing/Yandex/Pinterest/Baidu
 [verification]
 google = ""
 bing = ""
@@ -32,7 +36,7 @@ baidu = ""
 so = ""
 sogou = ""
 
-# Analytics config
+# analytics config
 [analytics]
 enable = true
 # Google Analytics
@@ -50,10 +54,10 @@ server = ""
 id = ""
 # Umami Analytics
 [analytics.umami]
-data_website_id = "44a4a42d-ec8e-44c9-a38c-7533929e9845"
-src = "https://umami.sped0nwen.com/script.js"
+data_website_id = "942d4c0d-ebd0-4da7-936a-bd278af32e5e"
+src = "https://umami.sped0n.com/script.js"
 data_host_url = ""
-data_domains = "bridget-demo.sped0nwen.com"
+data_domains = "bridget-demo.sped0n.com"
 # Plausible Analytics
 [analytics.plausible]
 data_domain = ""
@@ -65,8 +69,8 @@ token = ""
 [analytics.splitbee]
 enable = false
 # no cookie mode
-No_cookie = true
+no_cookie = true
 # respect the do not track setting of the browser
-Do_not_track = true
+do_not_track = true
 # token(optional), more info on https://splitbee.io/docs/embed-the-script
 data_token = ""

exampleSite/content/Erwitt/index.md

@@ -8,4 +8,6 @@ menu:
     identifier: Erwitt
     title: Erwitt
 unifiedAlt: '© Elliott Erwitt'
+build:
+  publishResources: false
 ---

exampleSite/content/Gruyaert/index.md

@@ -8,4 +8,6 @@ menu:
     identifier: Gruyaert
     title: Gruyaert
 unifiedAlt: '© Harry Gruyaert'
+build:
+  publishResources: false
 ---

exampleSite/content/Info/index.md

@@ -8,16 +8,18 @@ menu:
     identifier: Info
     title: Info
 unifiedAlt: ''
+build:
+  publishResources: false
 ---
 
-Bridget is a _minimal_ Hugo theme designed for photographers / visual artists.
+Bridget is a _minimal_ Hugo theme designed for photographers/visual artists, powered by <u>[Solid.js](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 designed using pure TypeScript and CSS. However, after website designer <u>[Tyler McRobert](https://tylermcrobert.com)</u> made the source code publicly available, the whole project was modified to mimic the original design. The animations in Bridget are achieved using gsap and swiper. In essence, it is more like a porting of the original design into Hugo.
+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_.
 
 Once again, great shout out to <u>[Tyler McRobert](https://tylermcrobert.com)</u> for his inspiration to this project.
 
-[Repo ↗](https://github.com/Sped0n/bridget)
+[GitHub Repo ↗](https://github.com/Sped0n/bridget)
 
 Original site design by <u>[Tyler McRobert](https://tylermcrobert.com)</u>.
 
-&copy; {{< year >}} <u>[Spedon](https://github.com/Sped0n)</u> | Powered by [Hugo](https://gohugo.io)
+&copy; {{< year >}} <u>[Spedon](https://github.com/Sped0n)</u> | Built with Hugo

exampleSite/content/Webb/index.md

@@ -8,4 +8,6 @@ menu:
     identifier: Webb
     title: Webb
 unifiedAlt: '© Alex Webb'
+build:
+  publishResources: false
 ---

flake.lock

@@ -0,0 +1,25 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1762596750,
+        "narHash": "sha256-rXXuz51Bq7DHBlfIjN7jO8Bu3du5TV+3DSADBX7/9YQ=",
+        "rev": "b6a8526db03f735b89dd5ff348f53f752e7ddc8e",
+        "revCount": 891611,
+        "type": "tarball",
+        "url": "https://api.flakehub.com/f/pinned/NixOS/nixpkgs/0.1.891611%2Brev-b6a8526db03f735b89dd5ff348f53f752e7ddc8e/019a684c-ea63-75fd-99cc-3b869954e5f9/source.tar.gz"
+      },
+      "original": {
+        "type": "tarball",
+        "url": "https://flakehub.com/f/NixOS/nixpkgs/0.1"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,38 @@
+{
+  description = "bridget";
+  inputs.nixpkgs.url = "https://flakehub.com/f/NixOS/nixpkgs/0.1";
+  outputs =
+    { self, ... }@inputs:
+    let
+      supportedSystems = [
+        "x86_64-linux"
+        "aarch64-linux"
+        "x86_64-darwin"
+        "aarch64-darwin"
+      ];
+      forEachSupportedSystem =
+        f:
+        inputs.nixpkgs.lib.genAttrs supportedSystems (
+          system:
+          f {
+            pkgs = import inputs.nixpkgs { inherit system; };
+          }
+        );
+    in
+    {
+      devShells = forEachSupportedSystem (
+        { pkgs }:
+        {
+          default = pkgs.mkShellNoCC {
+            packages = with pkgs; [
+              nodejs
+              nodePackages.pnpm
+              dart-sass
+              hugo
+              go
+            ];
+          };
+        }
+      );
+    };
+}

go.mod

@@ -1,3 +1,3 @@
-module github.com/Sped0n/bridget
+module github.com/Sped0n/bridget/v2
 
 go 1.21.3

i18n/de.toml

@@ -1,10 +0,0 @@
-[next]
-other = "nächste"
-[prev]
-other = "vorher"
-[close]
-other = "schließen"
-[threshold]
-other = "schwelle"
-[404]
-other = "seite nicht gefunden"

i18n/en.toml

@@ -1,10 +0,0 @@
-[next]
-other = "next"
-[prev]
-other = "prev"
-[close]
-other = "close"
-[threshold]
-other = "threshold"
-[404]
-other = "page not found"

i18n/es.toml

@@ -1,10 +0,0 @@
-[next]
-other = "siguiente"
-[prev]
-other = "previo"
-[close]
-other = "cerrar"
-[threshold]
-other = "umbral"
-[404]
-other = "página no encontrada"

i18n/fr.toml

@@ -1,10 +0,0 @@
-[next]
-other = "suivant"
-[prev]
-other = "précédent"
-[close]
-other = "fermer"
-[threshold]
-other = "seuil"
-[404]
-other = "page non trouvée"

i18n/it.toml

@@ -1,10 +0,0 @@
-[next]
-other = "prossimo"
-[prev]
-other = "precedente"
-[close]
-other = "chiudi"
-[threshold]
-other = "soglia"
-[404]
-other = "pagina non trovata"

i18n/ja.toml

@@ -1,10 +0,0 @@
-[next]
-other = "進む"
-[prev]
-other = "後退"
-[close]
-other = "閉じる"
-[threshold]
-other = "しきい値"
-[404]
-other = "ページが見つかりません"

i18n/ko.toml

@@ -1,10 +0,0 @@
-[next]
-other = "전진"
-[prev]
-other = "물러나세요"
-[close]
-other = "닫기"
-[threshold]
-other = "임계값"
-[404]
-other = "페이지를 찾을 수 없습니다"

i18n/zh-cn.toml

@@ -1,10 +0,0 @@
-[next]
-other = "前进"
-[prev]
-other = "后退"
-[close]
-other = "关闭"
-[threshold]
-other = "阈值"
-[404]
-other = "页面不存在"

i18n/zh-hk.toml

@@ -1,10 +0,0 @@
-[next]
-other = "前進"
-[prev]
-other = "後退"
-[close]
-other = "關閉"
-[threshold]
-other = "閾值"
-[404]
-other = "找不到頁面"

i18n/zh-mo.toml

@@ -1,10 +0,0 @@
-[next]
-other = "前進"
-[prev]
-other = "後退"
-[close]
-other = "關閉"
-[threshold]
-other = "閾值"
-[404]
-other = "找不到頁面"

i18n/zh-sg.toml

@@ -1,10 +0,0 @@
-[next]
-other = "前进"
-[prev]
-other = "后退"
-[close]
-other = "关闭"
-[threshold]
-other = "阈值"
-[404]
-other = "页面不存在"

i18n/zh-tw.toml

@@ -1,10 +0,0 @@
-[next]
-other = "前進"
-[prev]
-other = "後退"
-[close]
-other = "關閉"
-[threshold]
-other = "閾值"
-[404]
-other = "找不到頁面"

layouts/404.html

@@ -1,15 +1,16 @@
 {{- define "main" -}}
-  {{- $params := .Scratch.Get "params" -}}
-  {{- $currentPage := . -}}
-  {{- with partial "function/currentMenuItem.html" . -}}
-    <script>document.getElementById("main").setAttribute("currentMenuItemIndex", "{{- (sub .ID 1) -}}")</script>
-  {{- end -}}
   <div class="container">
     {{- partial "nav.html" . -}}
+    <article>
+      <p class="error">
+        &#9949; <u>404</u>&nbsp;{{- site.Params.labels.error -}}&nbsp;&#9949;
+      </p>
+      <p class="error">
+        &#9949; <u>404</u>&nbsp;{{- site.Params.labels.error -}}&nbsp;&#9949;
+      </p>
+      <p class="error">
+        &#9949; <u>404</u>&nbsp;{{- site.Params.labels.error -}}&nbsp;&#9949;
+      </p>
+    </article>
   </div>
-  <article class="info">
-    <p class="error">&#9949; <u>404</u>&nbsp;{{- i18n 404 -}}&nbsp;&#9949;</p>
-    <p class="error">&#9949; <u>404</u>&nbsp;{{- i18n 404 -}}&nbsp;&#9949;</p>
-    <p class="error">&#9949; <u>404</u>&nbsp;{{- i18n 404 -}}&nbsp;&#9949;</p>
-  </article>
 {{- end -}}

layouts/_default/baseof.html

@@ -3,11 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{{ site.Title }}</title>
-    {{- partial "head/link.html" -}}
-    {{- partial "head/meta.html" -}}
-    {{- partial "head/seo.html" -}}
-    {{- partial "head/favicon.html" -}}
+    {{- partial "head/link.html" . -}}
+    {{- partial "head/meta.html" . -}}
+    {{- partial "head/seo.html" . -}}
+    {{- partial "head/favicon.html" . -}}
   </head>
   <body lang="{{- site.LanguageCode -}}">
     <div id="main">

layouts/_default/single.html

@@ -1,18 +1,17 @@
 {{- define "main" -}}
-  {{- $params := .Scratch.Get "params" -}}
-  {{- $currentPage := . -}}
-  {{- with partial "function/currentMenuItem.html" . -}}
-    <script>
-      document.getElementById("main").setAttribute("currentMenuItemIndex", "{{- (sub .ID 1) -}}")
-      document.getElementById("main").setAttribute("nextText", "{{- i18n "next" -}}")
-      document.getElementById("main").setAttribute("prevText", "{{- i18n "prev" -}}")
-      document.getElementById("main").setAttribute("closeText", "{{- i18n "close" -}}")
-   </script>
-  {{- end -}}
-  <div class="container">
+  <div
+    class="container"
+    data-next="{{- site.Params.labels.next -}}"
+    data-prev="{{- site.Params.labels.prev -}}"
+    data-close="{{- site.Params.labels.close -}}"
+    data-loading="{{- site.Params.labels.loading -}}"
+  >
+    {{- with .Content -}}
+      <article>
+        {{- . -}}
+      </article>
+    {{- end -}}
+
     {{- partial "nav.html" . -}}
   </div>
-  <article class="info">
-    {{ .Content }}
-  </article>
 {{- end -}}

layouts/_default/single.json

@@ -1,15 +1,9 @@
-{{- $Page := . -}}
-{{- $Path := "" -}}
+{{- $context := . -}}
 {{- $params := .Page.Params | merge .Site.Params.Page -}}
 
-{{- with partial "function/currentMenuItem.html" . -}}
-  {{- $Path = .DirName -}}
-{{- end -}}
-
-{{- $gallery := site.GetPage $Path -}}
-{{- with $gallery.Resources.ByType "image" -}}
+{{- with partial "function/getImageSlice.html" .  -}}
   {{- $index := len . -}}
-  {{- $Page.Scratch.Add "img" slice -}}
+  {{- $context.Scratch.Add "img" slice -}}
   {{- range sort . "Name" "desc" -}}
     {{- $image := . -}}
     {{- $index = sub $index 1 -}}
@@ -19,7 +13,7 @@
     {{- end -}}
     {{- $lores := .Resize (site.Params.loResOpt | default "700x webp Lanczos q60") -}}
     {{- $hires := .Resize (site.Params.hiResOpt | default "2000x webp Lanczos q75") -}}
-    {{- $Page.Scratch.Add "img" (dict
+    {{- $context.Scratch.Add "img" (dict
       "index" (int $index)
       "alt" (string $alt)
       "loUrl" (string $lores.RelPermalink)
@@ -31,7 +25,7 @@
       )
     -}}
   {{- end -}}
-    {{ $Page.Scratch.Get "img" | jsonify }}
+    {{ $context.Scratch.Get "img" | jsonify }}
 {{- else -}}
 []
 {{- end -}}

layouts/partials/function/currentMenuItem.html

@@ -1,15 +1,17 @@
 {{- $currentPage := . -}}
 
-{{- $dirName := "" -}}
-{{- $id := -1 -}}
+{{- $identifier := "" -}}
+{{- $title := "404" -}}
+{{- $weight := -1 -}}
 
 {{- range site.Menus.main -}}
-  {{ $menu_item_url := .URL | relLangURL }}
-  {{ $page_url:= $currentPage.RelPermalink | relLangURL }}
-  {{ if eq $menu_item_url $page_url }}
-    {{- $dirName = .Identifier -}}
-    {{- $id = .Weight -}}
+  {{- $menu_item_url := .URL | relLangURL -}}
+  {{- $page_url:= $currentPage.RelPermalink | relLangURL -}}
+  {{- if eq $menu_item_url $page_url -}}
+    {{- $identifier = .Identifier -}}
+    {{- $title = .Title -}}
+    {{- $weight = .Weight -}}
   {{- end -}}
 {{- end -}}
 
-{{- return (dict "DirName" $dirName "ID" $id) -}}
+{{- return (dict "Identifier" $identifier "Title" $title "Weight" $weight) -}}

layouts/partials/function/getImageSlice.html

@@ -0,0 +1,10 @@
+{{- $context := . -}}
+{{- $Path := "" -}}
+{{- $params := .Page.Params | merge .Site.Params.Page -}}
+
+{{- with partial "function/currentMenuItem.html" . -}}
+  {{- $Path = .Identifier -}}
+{{- end -}}
+
+{{- $gallery := site.GetPage $Path -}}
+{{- return $gallery.Resources.ByType "image" -}}

layouts/partials/function/langCode.html

@@ -1,9 +0,0 @@
-{{- $res := false -}}
-
-{{- range . -}}
-  {{- if eq site.LanguageCode . -}}
-    {{- $res = true -}}
-  {{- end -}}
-{{- end -}}
-
-{{- return $res -}}

layouts/partials/head/favicon.html

@@ -1,8 +1,8 @@
 {{- if site.Params.favicon -}}
   {{- with site.Params.svgFavicon -}}
-    <link rel="icon" type="image/svg+xml" href="{{ . }}" />
+    <link rel="icon" type="image/svg+xml" href="{{- . -}}" />
     {{- with site.Params.svgFaviconFallback -}}
-      <link rel="icon" type="image/png" href="{{ . }}" />
+      <link rel="icon" type="image/png" href="{{- . -}}" />
     {{- end -}}
   {{- else -}}
     <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

layouts/partials/head/link.html

@@ -1,61 +1,39 @@
-{{/* fingerprint */}}
+{{- /* fingerprint */ -}}
 {{- $fingerprint := .Scratch.Get "fingerprint" | default "" -}}
 
-{{/* critical style */}}
+{{- /* critical style */ -}}
 {{- $style := dict "Source" "scss/critical.scss" "Fingerprint" $fingerprint -}}
-{{- $options := dict "enableSourceMap" true "includePaths" (slice "node_modules") -}}
-{{- $style = dict "Context" . "ToCSS" $options "Inline" true | merge $style -}}
+{{- $options := dict "enableSourceMap" true "includePaths" (slice "node_modules") "transpiler" "dartsass" -}}
+{{- $style = dict "Context" . "ToCSS" $options "Inline" true "Template" true | merge $style -}}
 {{- partial "plugin/style.html" $style -}}
 
-{{/* main style */}}
-{{- if site.Params.bundled -}}
-  {{- $style := dict "Link" "/bundled/css/style.min.css" "Defer" true -}}
-  {{- partial "plugin/style.html" $style -}}
-{{- else -}}
-  {{- $style := dict "Source" "scss/style.scss" "Fingerprint" $fingerprint -}}
-  {{- $options := dict "targetPath" "css/style.css" "enableSourceMap" true "includePaths" (slice "node_modules") -}}
-  {{- $style = dict "Context" . "ToCSS" $options "Minify" hugo.IsProduction "Defer" true | merge $style -}}
-  {{- partial "plugin/style.html" $style -}}
-{{- end -}}
+{{- $style := dict "Link" ("bundled/css/main.css" | absURL) "Defer" true -}}
+{{- partial "plugin/style.html" $style -}}
 
-{{/* main js */}}
-{{- $script := dict "Link" "/bundled/js/main.js" "Defer" true "Esm" true -}}
+{{- /* fuck safari */ -}}
+<script>
+  function z() {
+    const r = document.querySelector(':root')
+    r.style.setProperty('--window-height', `${window.innerHeight}px`)
+  }
+  z()
+  window.addEventListener('resize', z, { passive: true })
+</script>
+
+{{- /* main js */ -}}
+{{- $script := dict "Link" ("bundled/js/main.js" | absURL) "Defer" true "Esm" true -}}
 {{- partial "plugin/script.html" $script -}}
 
-{{/* fonts */}}
-<link rel="preload" href="/lib/fonts/fw.woff2" as="font" crossorigin />
-{{- if (partial "function/langCode.html" (slice "en" "de" "fr" "es" "it")) -}}
-  <link rel="preload" href="/lib/fonts/GeistVF.woff2" as="font" crossorigin />
-{{- else if (partial "function/langCode.html" (slice "zh-cn" "zh-sg")) -}}
-  <link rel="preload" href="/lib/fonts/NotoSans-Regular.woff2" as="font" crossorigin />
-  <link
-    rel="preload"
-    href="/lib/fonts/NotoSansCJKsc-Regular.woff2"
-    as="font"
-    crossorigin
-  />
-{{- else if (partial "function/langCode.html" (slice "zh-tw" "zh-hk" "zh-mo")) -}}
-  <link rel="preload" href="/lib/fonts/NotoSans-Regular.woff2" as="font" crossorigin />
-  <link
-    rel="preload"
-    href="/lib/fonts/NotoSansCJKtc-Regular.woff2"
-    as="font"
-    crossorigin
-  />
-{{- else if (partial "function/langCode.html" (slice "ja")) -}}
-  <link rel="preload" href="/lib/fonts/NotoSans-Regular.woff2" as="font" crossorigin />
-  <link
-    rel="preload"
-    href="/lib/fonts/NotoSansCJKjp-Regular.woff2"
-    as="font"
-    crossorigin
-  />
-{{- else if (partial "function/langCode.html" (slice "ko")) -}}
-  <link rel="preload" href="/lib/fonts/NotoSans-Regular.woff2" as="font" crossorigin />
-  <link
-    rel="preload"
-    href="/lib/fonts/NotoSansCJKkr-Regular.woff2"
-    as="font"
-    crossorigin
-  />
-{{- end -}}
+{{- /* fonts */ -}}
+<link
+  rel="preload"
+  href="{{- "lib/fonts/fw.woff2" | absURL -}}"
+  as="font"
+  crossorigin
+/>
+<link
+  rel="preload"
+  href="{{- "lib/fonts/GeistVF.woff2" | absURL -}}"
+  as="font"
+  crossorigin
+/>

layouts/partials/head/meta.html

@@ -1,9 +1,22 @@
+{{- /* Title */ -}}
+{{- $page_title := "" -}}
+{{- with partial "function/currentMenuItem.html" . -}}
+  {{- $page_title = printf "%s" site.Title | printf "%s%s" " | " | printf "%s%s" .Title | printf "%s" -}}
+{{- end -}}
+<title>{{- $page_title -}}</title>
+
+{{- /* Basic */ -}}
 <meta name="Description" content="{{- site.Params.description -}}" />
-<meta
-  name="application-name"
-  content="{{- .Site.Params.app.title | default site.Title -}}"
-/>
-<meta
-  name="apple-mobile-web-app-title"
-  content="{{- .Site.Params.app.title | default site.Title -}}"
-/>
+<meta name="application-name" content="{{- $page_title -}}" />
+<meta name="apple-mobile-web-app-title" content="{{- $page_title -}}" />
+
+{{- /* Opengraph */ -}}
+<meta property="og:title" content="{{- $page_title -}}" />
+<meta name="twitter:title" content="{{- $page_title -}}" />
+<meta property="og:type" content="website" />
+<meta property="og:url" content="{{- .Permalink -}}" />
+<meta property="og:description" content="{{- site.Params.description -}}" />
+<meta name="twitter:description" content="{{- site.Params.description -}}" />
+
+{{- /* Generator */ -}}
+{{- hugo.Generator -}}

layouts/partials/head/seo.html

@@ -1,21 +1,21 @@
 {{- with site.Params.verification.google -}}
-  <meta name="google-site-verification" content="{{ . }}" />
+  <meta name="google-site-verification" content="{{- . -}}" />
 {{- end -}}
 {{- with site.Params.verification.bing -}}
-  <meta name="msvalidate.01" content="{{ . }}" />
+  <meta name="msvalidate.01" content="{{- . -}}" />
 {{- end -}}
 {{- with site.Params.verification.yandex -}}
-  <meta name="yandex-verification" content="{{ . }}" />
+  <meta name="yandex-verification" content="{{- . -}}" />
 {{- end -}}
 {{- with site.Params.verification.pinterest -}}
-  <meta name="p:domain_verify" content="{{ . }}" />
+  <meta name="p:domain_verify" content="{{- . -}}" />
 {{- end -}}
 {{- with site.Params.verification.baidu -}}
-  <meta name="baidu-site-verification" content="{{ . }}" />
+  <meta name="baidu-site-verification" content="{{- . -}}" />
 {{- end -}}
 {{- with site.Params.verification.sogou -}}
-  <meta name="sogou_site_verification" content="{{ . }}" />
+  <meta name="sogou_site_verification" content="{{- . -}}" />
 {{- end -}}
 {{- with site.Params.verification.so -}}
-  <meta name="360-site-verification" content="{{ . }}" />
+  <meta name="360-site-verification" content="{{- . -}}" />
 {{- end -}}

layouts/partials/nav.html

@@ -1,23 +1,43 @@
 <nav>
   <div class="navArtist">
-    <a href="/">{{ site.Title }}</a>
+    <a href="/">{{- site.Title -}}</a>
   </div>
   <div class="links">
     {{- $index := 0 -}}
+    {{- $currentIndex := -1 -}}
+    {{- with partial "function/currentMenuItem.html" . -}}
+      {{- $currentIndex = sub .Weight 1 -}}
+    {{- end -}}
     {{- $menus := .Site.Menus.main -}}
-    {{- $len := len $menus }}
+    {{- $len := len $menus -}}
     {{- range $menus -}}
       {{- $url := .URL | relURL -}}
       {{- if eq (add $index 1) $len -}}
-        <a href="{{- .URL | relURL -}}" class="link">{{- .Title -}}</a>
+        <a
+          href="{{- .URL | relURL -}}"
+          class="link{{- if eq $index $currentIndex -}}
+            {{- printf " current" -}}
+          {{- end -}}"
+          >{{- .Title -}}</a
+        >
       {{- else -}}
-        <a href="{{- .URL | relURL -}}" class="link">{{- .Title -}}</a>,&nbsp
+        <a
+          href="{{- .URL | relURL -}}"
+          class="link{{- if eq $index $currentIndex -}}
+            {{- printf " current" -}}
+          {{- end -}}"
+          >{{- .Title -}}</a
+        >,&nbsp
       {{- end -}}
       {{- $index = add $index 1 -}}
     {{- end -}}
   </div>
   <div class="threshold">
-    <span>{{- i18n "threshold" | strings.FirstUpper -}}:</span>
+    {{- $length := 0 -}}
+    {{- with partial "function/getImageSlice.html" . -}}
+      {{- $length = len . -}}
+    {{- end -}}
+    <span>{{- site.Params.labels.threshold -}}:</span>
     <span>
       <button class="dec">&#xFF0D;</button>
       <span class="num"></span><span class="num"></span><span class="num"></span
@@ -26,10 +46,43 @@
     </span>
   </div>
   <div class="index">
-    <span class="num"></span><span class="num"></span><span class="num"></span
-    ><span class="num"></span>
+    <span class="num">0</span><span class="num">0</span><span class="num">0</span
+    ><span class="num">0</span>
     <span>/</span>
-    <span class="num"></span><span class="num"></span><span class="num"></span
-    ><span class="num"></span>
+    <span class="num">{{- math.Floor (div $length 1000) -}}</span
+    ><span class="num">{{- mod (math.Floor (div $length 100)) 10 -}}</span
+    ><span class="num">{{- mod (math.Floor (div $length 10)) 10 -}}</span
+    ><span class="num">{{- mod $length 10 -}}</span>
   </div>
 </nav>
+{{- /* for threshold */ -}}
+<script>
+  i = 2
+  const s = sessionStorage.getItem('thresholdsIndex')
+  if (s !== null) {
+    i = parseInt(s)
+  }
+  var t = ''
+  switch (i) {
+    case 0:
+      t = '0020'
+      break
+    case 1:
+      t = '0040'
+      break
+    case 2:
+      t = '0080'
+      break
+    case 3:
+      t = '0140'
+      break
+    case 4:
+      t = '0200'
+      break
+  }
+  Array.from(
+    document.getElementsByClassName('threshold').item(0).getElementsByClassName('num')
+  ).forEach((e, i) => {
+    e.innerText = t[i]
+  })
+</script>

layouts/partials/plugin/analytics.html

@@ -5,7 +5,7 @@
   {{- with $analytics.google.id -}}
         <script type="text/javascript">
             window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());
-            gtag('config', '{{ . }}'{{ if $analytics.google.anonymizeIP }}, { 'anonymize_ip': true }{{ end }});
+            gtag('config', '{{- . -}}'{{- if $analytics.google.anonymizeIP -}}, { 'anonymize_ip': true }{{- end -}});
         </script> {{- printf "https://www.googletagmanager.com/gtag/js?id=%v" . | dict "Async" true "Source" | partial "plugin/script.html" -}}
   {{- end -}}
 
@@ -13,7 +13,7 @@
   {{- with $analytics.fathom.id -}}
         <script type="text/javascript">
             window.fathom=window.fathom||function(){(fathom.q=fathom.q||[]).push(arguments);};
-            fathom('set', 'siteId', '{{ . }}');
+            fathom('set', 'siteId', '{{- . -}}');
             fathom('trackPageview');
         </script> {{- dict "Source" ($analytics.fathom.server | default "cdn.usefathom.com" | printf "https://%v/tracker.js") "Async" true "Attr" "id=fathom-script" | partial "plugin/script.html" -}}
   {{- end -}}
@@ -24,7 +24,7 @@
 			var _hmt = _hmt || [];
 			(function() {
 			  var hm = document.createElement("script");
-			  hm.src = "https://hm.baidu.com/hm.js?{{ . }}";
+			  hm.src = "https://hm.baidu.com/hm.js?{{- . -}}";
 			  var s = document.getElementsByTagName("script")[0];
 			  s.parentNode.insertBefore(hm, s);
 			})();
@@ -36,10 +36,10 @@
     <script
       async
       defer
-      data-website-id="{{ . }}"
-      src="{{ $analytics.umami.src }}"
-      {{ with $analytics.umami.data_host_url }}data-host-url="{{ . }}"{{ end }}
-      {{ with $analytics.umami.data_domains }}data-domains="{{ . }}"{{ end }}
+      data-website-id="{{- . -}}"
+      src="{{- $analytics.umami.src -}}"
+      {{- with $analytics.umami.data_host_url -}}data-host-url="{{- . -}}"{{- end -}}
+      {{- with $analytics.umami.data_domains -}}data-domains="{{- . -}}"{{- end -}}
     ></script>
   {{- end -}}
 
@@ -48,8 +48,8 @@
     <script
       async
       defer
-      data-domain="{{ . }}"
-      src="{{ $analytics.plausible.src }}"
+      data-domain="{{- . -}}"
+      src="{{- $analytics.plausible.src -}}"
     ></script>
   {{- end -}}
 
@@ -58,17 +58,17 @@
     <script
       defer
       src="https://static.cloudflareinsights.com/beacon.min.js"
-      data-cf-beacon='{"token": "{{ $analytics.cloudflare.token }}"}'
+      data-cf-beacon='{"token": "{{- $analytics.cloudflare.token -}}"}'
     ></script>
   {{- end -}}
 
   {{- /* Splitbee Analytics */ -}}
   {{- if $analytics.splitbee.enable -}}
     {{- $attr := "" -}}
-    {{- if $analytics.splitbee.Do_not_track -}}
+    {{- if $analytics.splitbee.do_not_track -}}
       {{- $attr = printf `%v data-respect-dnt` $attr -}}
     {{- end -}}
-    {{- if $analytics.splitbee.No_cookie -}}
+    {{- if $analytics.splitbee.no_cookie -}}
       {{- $attr = printf `%v data-no-cookie` $attr -}}
     {{- end -}}
     {{- with $analytics.splitbee.data_token -}}
@@ -76,7 +76,7 @@
     {{- end -}}
     <script
       defer
-      {{ with $attr }}{{ . | safeHTMLAttr }}{{ end }}
+      {{- with $attr -}}{{- . | safeHTMLAttr -}}{{- end -}}
       src="https://cdn.splitbee.io/sb.js"
     ></script>
   {{- end -}}

layouts/partials/plugin/style.html

@@ -11,13 +11,13 @@
     {{- $resource = resources.FromString $.Path . -}}
   {{- end -}}
   {{- if $resource -}}
-    {{- with .Template -}}
-      {{- $resource = $resource | resources.ExecuteAsTemplate . $.Context -}}
-    {{- end -}}
     {{- with .ToCSS -}}
       {{- $options := . | merge (dict "outputStyle" "compressed") -}}
       {{- $resource = $resource | toCSS $options -}}
     {{- end -}}
+    {{- with .Template -}}
+      {{- $resource = $resource | resources.ExecuteAsTemplate . $.Context -}}
+    {{- end -}}
     {{- if or .Minify .Inline -}}
       {{- $resource = $resource | minify -}}
     {{- end -}}
@@ -37,26 +37,26 @@
       rel="preload"
       as="style"
       onload="this.onload=null;this.rel='stylesheet'"
-      href="{{ $href }}"
-      {{ if .Crossorigin }}crossorigin="anonymous"{{ end }}{{ with $integrity }}
-        integrity="{{ . }}"
-      {{ end }}{{ with .Attr }}{{ . | safeHTMLAttr }}{{ end }}
+      href="{{- $href -}}"
+      {{- if .Crossorigin -}}crossorigin="anonymous"{{- end -}}{{- with $integrity -}}
+        integrity="{{- . -}}"
+      {{- end -}}{{- with .Attr -}}{{- . | safeHTMLAttr -}}{{- end -}}
     />
     <noscript
       ><link
         rel="stylesheet"
-        href="{{ $href }}"
-        {{ if .Crossorigin }}crossorigin="anonymous"{{ end }}{{ with $integrity }}
-          integrity="{{ . }}"
-        {{ end }}{{ with .Attr }}{{ . | safeHTMLAttr }}{{ end }}
+        href="{{- $href -}}"
+        {{- if .Crossorigin -}}crossorigin="anonymous"{{- end -}}{{- with $integrity -}}
+          integrity="{{- . -}}"
+        {{- end -}}{{- with .Attr -}}{{- . | safeHTMLAttr -}}{{- end -}}
     /></noscript>
   {{- else -}}
     <link
       rel="stylesheet"
-      href="{{ $href }}"
-      {{ if .Crossorigin }}crossorigin="anonymous"{{ end }}{{ with $integrity }}
-        integrity="{{ . }}"
-      {{ end }}{{ with .Attr }}{{ . | safeHTMLAttr }}{{ end }}
+      href="{{- $href -}}"
+      {{- if .Crossorigin -}}crossorigin="anonymous"{{- end -}}{{- with $integrity -}}
+        integrity="{{- . -}}"
+      {{- end -}}{{- with .Attr -}}{{- . | safeHTMLAttr -}}{{- end -}}
     />
   {{- end -}}
 {{- end -}}

layouts/robots.txt

@@ -58,4 +58,4 @@ Disallow: /
 User-agent: *
 Allow: /
 
-Sitemap: {{ "/sitemap.xml" | absURL }}
+Sitemap: {{- "/sitemap.xml" | absURL -}}

layouts/shortcodes/year.html

@@ -1 +1 @@
-{{ now.Year }}
+{{- now.Year -}}

layouts/sitemap.xml

@@ -22,9 +22,9 @@
                 {{- $weeks := div (sub now.Unix .Lastmod.Unix) 604800 -}}
                 {{- $priority := sub 1 (div $weeks 10.0 ) -}}
                 {{- if ge .Sitemap.Priority $priority -}}
-                    <priority>{{ .Sitemap.Priority }}</priority>
+                    <priority>{{- .Sitemap.Priority -}}</priority>
                 {{- else -}}
-                    <priority>{{ $priority }}</priority>
+                    <priority>{{- $priority -}}</priority>
                 {{- end -}}
             {{- end -}}
 
@@ -32,14 +32,14 @@
                 {{- range .Translations -}}
                     <xhtml:link
                         rel="alternate"
-                        hreflang="{{ .Lang }}"
-                        href="{{ .Permalink }}"
+                        hreflang="{{- .Lang -}}"
+                        href="{{- .Permalink -}}"
                         />
                 {{- end -}}
                 <xhtml:link
                     rel="alternate"
-                    hreflang="{{ .Lang }}"
-                    href="{{ .Permalink }}"
+                    hreflang="{{- .Lang -}}"
+                    href="{{- .Permalink -}}"
                     />
             {{- end -}}
         </url>

package.json

@@ -1,23 +1,25 @@
 {
   "name": "bridget",
-  "version": "v0.0.4",
+  "version": "v1.0.0",
+  "type": "module",
   "description": "bridget theme source file",
   "packageManager": "pnpm@8.10.2",
   "private": true,
   "sideEffects": false,
   "scripts": {
+    "vite": "DISABLE_WATCH=1 vite build",
     "lint": "eslint . --fix && prettier --write .",
     "lint:check": "eslint . && prettier . --check",
-    "dev": "run-p rollup:dev hugo:dev",
-    "build": "rm -f ./static/bundled/js/* && run-s rollup:build hugo:build && yes | cp -rf ./exampleSite/public/css/* ./static/bundled/css",
-    "server": "run-p rollup:server hugo:server",
-    "rollup:build": "rollup -c --environment BUILD:production",
-    "rollup:server": "rollup -c --watch --environment BUILD:production",
-    "rollup:dev": "rollup -c --watch --environment BUILD:development",
-    "hugo:build": "hugo --logLevel info --source=exampleSite --gc",
-    "hugo:preview": "hugo --logLevel info --source=exampleSite -D --gc",
-    "hugo:dev": "hugo server --source=exampleSite --gc -D --disableFastRender --watch --logLevel info",
-    "hugo:server": "hugo server --source=exampleSite --gc --disableFastRender -e production --watch --logLevel info"
+    "dev": "run-p vite:dev hugo:dev",
+    "build": "run-s vite:build hugo:build",
+    "server": "run-p vite:server hugo:server",
+    "vite:build": "DISABLE_WATCH=1 vite build",
+    "vite:server": "vite build",
+    "vite:dev": "vite build --mode development --minify false",
+    "hugo:build": "hugo --logLevel info --source=exampleSite --minify",
+    "hugo:preview": "hugo --logLevel info --source=exampleSite -D",
+    "hugo:dev": "hugo server --source=exampleSite -D --disableFastRender --watch --logLevel info",
+    "hugo:server": "hugo server --source=exampleSite --disableFastRender -e production --watch --logLevel info"
   },
   "repository": {
     "type": "git",
@@ -37,29 +39,29 @@
   },
   "homepage": "https://github.com/Sped0n/bridget#readme",
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "eslint": "^8.55.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-config-standard-with-typescript": "^42.0.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-n": "^16.4.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-promise": "^6.1.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",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-solid": "^0.14.5",
     "npm-run-all": "^4.1.5",
-    "prettier": "3.1.1",
+    "prettier": "3.6.2",
     "prettier-plugin-go-template": "^0.0.15",
-    "prettier-plugin-organize-imports": "^3.2.4",
-    "typescript": "^5.3.3"
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "sass": "^1.94.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.2",
+    "vite-plugin-solid": "^2.11.10"
   },
   "dependencies": {
-    "gsap": "^3.12.3",
-    "swiper": "^11.0.5",
-    "rollup": "^4.9.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.5"
+    "gsap": "^3.13.0",
+    "solid-js": "^1.9.10",
+    "swiper": "^12.0.3",
+    "tiny-invariant": "^1.3.3"
   }
 }

prettier.config.mjs

@@ -0,0 +1,23 @@
+/**
+ * @see https://prettier.io/docs/configuration
+ * @type {import("prettier").Config}
+ */
+const config = {
+  useTabs: false,
+  tabWidth: 2,
+  printWidth: 88,
+  singleQuote: true,
+  trailingComma: 'none',
+  bracketSpacing: true,
+  semi: false,
+  plugins: ['prettier-plugin-go-template', 'prettier-plugin-organize-imports'],
+  overrides: [
+    {
+      files: ['*.html'],
+      options: {
+        parser: 'go-template'
+      }
+    }
+  ]
+}
+export default config

rollup.config.mjs

@@ -1,28 +0,0 @@
-import resolve from '@rollup/plugin-node-resolve'
-import terser from '@rollup/plugin-terser'
-import typescript from '@rollup/plugin-typescript'
-
-export default {
-  input: './assets/ts/main.ts',
-  output: {
-    dir: './static/bundled/js',
-    format: 'es',
-    chunkFileNames: '[hash:6].js',
-    compact: true
-  },
-  plugins: [
-    resolve({
-      moduleDirectories: ['node_modules']
-    }),
-    typescript({ tsconfig: './tsconfig.json' }),
-    process.env.BUILD === 'production' &&
-      terser({
-        compress: {
-          passes: 3
-        },
-        output: {
-          comments: false
-        }
-      })
-  ]
-}