refactor: prefine for version v1.0.2 (#269)

* refactor: refactor navigateVector logic and remove unused functions

* refactor: refactor HTML structure and styling in single.html

- Modify the `.info` class to `article` in `_article.scss`
- Remove the `nav.html` partial in `single.html`
- Change the class name from `info` to `article` in `single.html`
- Add the `nav.html` partial in `single.html`

* refactor: update handling of 404 page
- Now hugo will set unknown page title as "404"
- Add condition to return an empty image array if the document title starts with "404"

* docs: update documentation

assets/scss/_partial/_article.scss

@@ -1,4 +1,4 @@
-.info {
+article {
   padding: var(--space-standard);
   max-width: 25em;
 
@@ -42,7 +42,7 @@
 }
 
 @media (max-width: $tablet), (hover: none) {
-  .info {
+  article {
     margin-top: var(--nav-height);
   }
 }

assets/ts/mobile/gallery.ts

@@ -50,6 +50,7 @@ export function slideUp(): void {
   })
 
   setTimeout(() => {
+    // cleanup
     scrollable.set(false)
     isAnimating.set(false)
   }, 1400)
@@ -58,7 +59,6 @@ export function slideUp(): void {
 function slideDown(): void {
   if (isAnimating.get()) return
   isAnimating.set(true)
-  lastIndex = -1 // cleanup
   scrollToActive()
 
   _gsap.to(gallery, {
@@ -74,8 +74,10 @@ function slideDown(): void {
   })
 
   setTimeout(() => {
+    // cleanup
     scrollable.set(true)
     isAnimating.set(false)
+    lastIndex = -1
   }, 1600)
 }
 
@@ -106,12 +108,14 @@ export function initGallery(ijs: ImageJSON[]): void {
       return // change slide only when index is changed
     else if (lastIndex === -1)
       navigateVector.set('none') // lastIndex before set
-    else if (o.index < lastIndex) navigateVector.set('prev')
-    else if (o.index > lastIndex) navigateVector.set('next')
-    else navigateVector.set('none')
-    changeSlide(o.index)
-    updateIndexText()
-    lastIndex = o.index
+    else if (o.index < lastIndex)
+      navigateVector.set('prev') // set navigate vector for galleryLoadImages
+    else if (o.index > lastIndex)
+      navigateVector.set('next') // set navigate vector for galleryLoadImages
+    else navigateVector.set('none') // default
+    changeSlide(o.index) // change slide to new index
+    updateIndexText() // update index text
+    lastIndex = o.index // update last index
   })
   // mounted watcher
   mounted.addWatcher((o) => {

assets/ts/resources.ts

@@ -11,6 +11,9 @@ export interface ImageJSON {
 }
 
 export async function initResources(): Promise<ImageJSON[]> {
+  if (document.title.split(' | ')[0] === '404') {
+    return [] // no images on 404 page
+  }
   try {
     const response = await fetch(`${window.location.href}index.json`, {
       headers: {

doc/getStarted.md

@@ -163,12 +163,12 @@ replacements = "github.com/Sped0n/bridget -> ../.."
 path = "github.com/Sped0n/bridget"
 ```
 
-- If you have <u>installation with Git</u>
+- If you have _installation with Git_
 
-  - `replacement`: replace the <u>path after the arrow</u>(`../..`) 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 only**, example: `themes/bridget`)
   - `path`: no change
 
-- If you have <u>installation with Module</u>, **remove the `replacements` configuration**.
+- If you have _installation with Module_, **remove the `replacements` configuration**.
 
 ### `markup.toml`
 
@@ -199,17 +199,17 @@ https://gohugo.io/templates/sitemap-template/#configuration
 > If you want to modify js/ts file, please use option 2.
 
 1.  Use hugo create a site and move the bridget theme into the theme directory.
-2.  Run `npm install` in the <u>bridget theme root dir</u>, not <u>your hugo site root dir</u>.
-3.  After the command is done, copy the `node_modules` dir from <u>bridget theme root dir</u> to <u>your hugo site root dir</u>.
-4.  In <u>your hugo site root dir</u>, write/modify configuration files according to your needs, remember to set `bundled` option to `false`, so hugo will not use prebuilt css file.
-5.  Run `hugo server` in <u>your hugo site root dir</u>, and you are good to go.
+2.  Run `npm install` in the _bridget theme root dir_, not _your hugo site root dir_.
+3.  After the command is done, copy the `node_modules` dir from _bridget theme root dir_ to _your hugo site root dir_.
+4.  In _your hugo site root dir_, write/modify configuration files according to your needs, remember to set `bundled` option to `false`, so hugo will not use prebuilt css file.
+5.  Run `hugo server` in _your hugo site root dir_, and you are good to go.
 
 ### Option 2: recommended way
 
 1.  Use hugo create a site and move the bridget theme into the theme directory.
-2.  Run `npm install` in the <u>bridget theme root dir</u>, not <u>your hugo site root dir</u>.
-3.  Run `npm run dev` in the <u>bridget theme root dir</u>, we will use content in exampleSite to debug.
+2.  Run `npm install` in the _bridget theme root dir_, not _your hugo site root dir_.
+3.  Run `npm run dev` in the _bridget theme root dir_, we will use content in exampleSite to debug.
 4.  Make your customization.
-5.  After modification, run `npm run build` in the <u>bridget theme root dir</u> to build artifacts.
-6.  In <u>your hugo site root dir</u>, write/modify configuration files according to your needs, remember to set `bundled` option to `true`, so hugo will use the artifacts you built in step 5.
-7.  Run `hugo server` in <u>your hugo site root dir</u>, and you are good to go.
+5.  After modification, run `npm run build` in the _bridget theme root dir_ to build artifacts.
+6.  In _your hugo site root dir_, write/modify configuration files according to your needs, remember to set `bundled` option to `true`, so hugo will use the artifacts you built in step 5.
+7.  Run `hugo server` in _your hugo site root dir_, and you are good to go.

exampleSite/content/Info/index.md

@@ -12,11 +12,11 @@ unifiedAlt: ''
 
 Bridget is a _minimal_ Hugo theme designed for photographers/visual artists.
 
-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 raw TypeScript and CSS. 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 components, 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.
 
-[Repo ↗](https://github.com/Sped0n/bridget)
+[GitHub Repo ↗](https://github.com/Sped0n/bridget)
 
 Original site design by <u>[Tyler McRobert](https://tylermcrobert.com)</u>.
 

layouts/404.html

@@ -1,10 +1,10 @@
 {{- define "main" -}}
   <div class="container">
     {{- partial "nav.html" . -}}
+    <article>
+      <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>
   </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/single.html

@@ -6,11 +6,12 @@
     data-close="{{- i18n "close" -}}"
     data-loading="{{- i18n "loading" -}}"
   >
-    {{- partial "nav.html" . -}}
     {{- with .Content -}}
-      <article class="info">
+      <article>
         {{- . -}}
       </article>
     {{- end -}}
+
+    {{- partial "nav.html" . -}}
   </div>
 {{- end -}}

layouts/partials/function/currentMenuItem.html

@@ -1,7 +1,7 @@
 {{- $currentPage := . -}}
 
 {{- $identifier := "" -}}
-{{- $title := "" -}}
+{{- $title := "404" -}}
 {{- $weight := -1 -}}
 
 {{- range site.Menus.main -}}