build(deps-dev): bump sass from 1.77.6 to 1.77.8 (#359)

Bumps [sass](https://github.com/sass/dart-sass) from 1.77.6 to 1.77.8.
- [Release notes](https://github.com/sass/dart-sass/releases)
- [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md)
- [Commits](https://github.com/sass/dart-sass/compare/1.77.6...1.77.8)

---
updated-dependencies:
- dependency-name: sass
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

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,15 +2,15 @@
 
 ![GitHub Workflow Status (with event)](https://img.shields.io/github/actions/workflow/status/Sped0n/bridget/build.yml?logo=github) ![GitHub deployments](https://img.shields.io/github/deployments/Sped0n/bridget/Production?logo=vercel&label=deploy)
 
-Bridget is a minimal [Hugo](https://gohugo.io) theme for photographers/visual artists, powered by Solid.js.
+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.
 
 ![thumbnail](images/tn.jpg)
 
-## [Demo Site](https://bridget-demo.sped0nwen.com)
+## [Demo Site](https://bridget-demo.sped0n.com)
 
-To see this theme in action, here is a live [demo site](https://bridget-demo.sped0nwen.com) which is rendered with **Bridget** theme.
+To see this theme in action, here is a live [demo site](https://bridget-demo.sped0n.com) which is rendered with **Bridget** theme.
 
 ## Getting Started
 

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/ts/desktop/stageNav.tsx

@@ -1,4 +1,4 @@
-import { For, type Accessor, type JSX, type Setter } from 'solid-js'
+import { For, createEffect, type Accessor, type JSX, type Setter } from 'solid-js'
 
 import { useState } from '../state'
 import { decrement, increment, type Vector } from '../utils'
@@ -24,6 +24,7 @@ export default function StageNav(props: {
   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
 
@@ -70,6 +71,19 @@ export default function StageNav(props: {
     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() }}>
@@ -80,9 +94,9 @@ export default function StageNav(props: {
               onClick={() => {
                 handleClick(item)
               }}
-              onKeyDown={handleKey}
               onFocus={() => props.setHoverText(item)}
               onMouseOver={() => props.setHoverText(item)}
+              tabIndex="-1"
             />
           )}
         </For>

assets/ts/main.tsx

@@ -38,7 +38,9 @@ const Mobile = lazy(async () => await import('./mobile/layout'))
 function Main(): JSX.Element {
   // variables
   const [ijs] = createResource(getImageJSON)
-  const isMobile = window.matchMedia('(hover: none)').matches
+  const isMobile =
+    window.matchMedia('(hover: none)').matches &&
+    !window.navigator.userAgent.includes('Win')
 
   // states
   const [scrollable, setScollable] = createSignal(true)

assets/ts/mobile/collection.tsx

@@ -116,7 +116,7 @@ export default function Collection(props: {
               data-src={ij.loUrl}
               alt={ij.alt}
               style={{
-                transform: `translate3d(${i() !== 0 ? getRandom(-25, 25) : 0}%, ${i() !== 0 ? getRandom(-30, 30) : 0}%, 0)`
+                transform: `translate3d(${i() !== 0 ? getRandom(-25, 25) : 0}%, ${i() !== 0 ? getRandom(-35, 35) : 0}%, 0)`
               }}
               onClick={() => {
                 handleClick(i())

doc/getStarted.md

@@ -60,7 +60,7 @@ Then import the theme as a dependency adding the following line to the `module`
 # config/_default/hugo.toml
 [module]
 [[module.imports]]
-path = "github.com/Sped0n/bridget"
+path = "github.com/Sped0n/bridget/v2"
 ```
 
 If you want to upgrade the theme, just run:
@@ -162,14 +162,14 @@ We will focus on introducing the part about `theme as module`, detailed comments
 ```toml
 # theme as module
 [module]
-replacements = "github.com/Sped0n/bridget -> ../.."
+replacements = "github.com/Sped0n/bridget/v2 -> ../.."
 [[module.imports]]
-path = "github.com/Sped0n/bridget"
+path = "github.com/Sped0n/bridget/v2"
 ```
 
 - If you have _installation with Git_
 
-  - `replacement`: replace the _path after the arrow_(`../..`) with the location of your local theme file (⚠️⚠️⚠️**relative path only**, example: `themes/bridget`)
+  - `replacement`: replace the _path after the arrow_(`../..`) with the location of your local theme file (⚠️⚠️⚠️**relative path to hugo site theme directory only([official doc](https://gohugo.io/hugo-modules/configuration/#module-configuration-top-level))**, example: `bridget`)
   - `path`: no change
 
 - If you have _installation with Module_, **remove the `replacements` configuration**.

exampleSite/config/_default/hugo.toml

@@ -1,7 +1,7 @@
 # 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
@@ -22,6 +22,6 @@ 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

@@ -47,9 +47,9 @@ id = ""
 # Umami Analytics
 [analytics.umami]
 data_website_id = "44a4a42d-ec8e-44c9-a38c-7533929e9845"
-src = "https://umami.sped0nwen.com/script.js"
+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 = ""

exampleSite/content/Info/index.md

@@ -12,9 +12,9 @@ _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 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_.
+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.
 
@@ -22,4 +22,4 @@ Once again, great shout out to <u>[Tyler McRobert](https://tylermcrobert.com)</u
 
 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

go.mod

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

package.json

@@ -41,30 +41,30 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-config-standard-with-typescript": "^43.0.1",
-    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-solid": "^0.13.1",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-promise": "^6.6.0",
+    "eslint-plugin-solid": "^0.14.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "3.2.5",
+    "prettier": "3.3.3",
     "prettier-plugin-go-template": "^0.0.15",
-    "prettier-plugin-organize-imports": "^3.2.4",
-    "sass": "^1.71.1",
-    "terser": "^5.27.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.2",
-    "vite-plugin-solid": "^2.10.0"
+    "prettier-plugin-organize-imports": "^4.0.0",
+    "sass": "^1.77.8",
+    "terser": "^5.31.6",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.2",
+    "vite-plugin-solid": "^2.10.2"
   },
   "dependencies": {
     "gsap": "^3.12.5",
-    "solid-js": "^1.8.14",
-    "swiper": "^11.0.6",
-    "tiny-invariant": "^1.3.1"
+    "solid-js": "^1.8.22",
+    "swiper": "^11.1.11",
+    "tiny-invariant": "^1.3.3"
   }
 }