From ba07636f8f09ae6eb055e319642bc5914a616390 Mon Sep 17 00:00:00 2001 From: Spedon <70063177+Sped0n@users.noreply.github.com> Date: Mon, 5 Feb 2024 16:02:10 +0800 Subject: [PATCH] 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 | 4 ++-- assets/ts/mobile/gallery.ts | 18 ++++++++------ assets/ts/resources.ts | 3 +++ doc/getStarted.md | 24 +++++++++---------- exampleSite/content/Info/index.md | 4 ++-- layouts/404.html | 10 ++++---- layouts/_default/single.html | 5 ++-- .../partials/function/currentMenuItem.html | 2 +- 8 files changed, 39 insertions(+), 31 deletions(-) diff --git a/assets/scss/_partial/_article.scss b/assets/scss/_partial/_article.scss index fd8b706..59986d0 100644 --- a/assets/scss/_partial/_article.scss +++ b/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); } } diff --git a/assets/ts/mobile/gallery.ts b/assets/ts/mobile/gallery.ts index f66488a..290da84 100644 --- a/assets/ts/mobile/gallery.ts +++ b/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) => { diff --git a/assets/ts/resources.ts b/assets/ts/resources.ts index 2a2effa..5b3b2ca 100644 --- a/assets/ts/resources.ts +++ b/assets/ts/resources.ts @@ -11,6 +11,9 @@ export interface ImageJSON { } export async function initResources(): Promise { + if (document.title.split(' | ')[0] === '404') { + return [] // no images on 404 page + } try { const response = await fetch(`${window.location.href}index.json`, { headers: { diff --git a/doc/getStarted.md b/doc/getStarted.md index 2fbe7cc..de014ea 100644 --- a/doc/getStarted.md +++ b/doc/getStarted.md @@ -163,12 +163,12 @@ replacements = "github.com/Sped0n/bridget -> ../.." path = "github.com/Sped0n/bridget" ``` -- If you have installation with Git +- 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 only**, example: `themes/bridget`) - `path`: no change -- If you have installation with Module, **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 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. +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 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. +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 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. +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. diff --git a/exampleSite/content/Info/index.md b/exampleSite/content/Info/index.md index 54890c7..c368e25 100644 --- a/exampleSite/content/Info/index.md +++ b/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 [Hyperlexed](https://www.youtube.com/@Hyperplexed), which can be found [here](https://www.youtube.com/watch?v=Jt3A2lNN2aE). Initially, it was developed using raw TypeScript and CSS. However, after website designer [Tyler McRobert](https://tylermcrobert.com) 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 [Hyperlexed](https://www.youtube.com/@Hyperplexed), which can be found [here](https://www.youtube.com/watch?v=Jt3A2lNN2aE). Initially, it was developed using no third-party dependencies. However, after website designer [Tyler McRobert](https://tylermcrobert.com) 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 [Tyler McRobert](https://tylermcrobert.com) for his inspiration to this project. -[Repo ↗](https://github.com/Sped0n/bridget) +[GitHub Repo ↗](https://github.com/Sped0n/bridget) Original site design by [Tyler McRobert](https://tylermcrobert.com). diff --git a/layouts/404.html b/layouts/404.html index 50aff5a..2c7ac83 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,10 +1,10 @@ {{- define "main" -}}
{{- partial "nav.html" . -}} +
+

⛝ 404 {{- i18n 404 -}} ⛝

+

⛝ 404 {{- i18n 404 -}} ⛝

+

⛝ 404 {{- i18n 404 -}} ⛝

+
-
-

⛝ 404 {{- i18n 404 -}} ⛝

-

⛝ 404 {{- i18n 404 -}} ⛝

-

⛝ 404 {{- i18n 404 -}} ⛝

-
{{- end -}} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 97e85a2..4b8b251 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -6,11 +6,12 @@ data-close="{{- i18n "close" -}}" data-loading="{{- i18n "loading" -}}" > - {{- partial "nav.html" . -}} {{- with .Content -}} -
+
{{- . -}}
{{- end -}} + + {{- partial "nav.html" . -}} {{- end -}} diff --git a/layouts/partials/function/currentMenuItem.html b/layouts/partials/function/currentMenuItem.html index 1502602..8b49a03 100644 --- a/layouts/partials/function/currentMenuItem.html +++ b/layouts/partials/function/currentMenuItem.html @@ -1,7 +1,7 @@ {{- $currentPage := . -}} {{- $identifier := "" -}} -{{- $title := "" -}} +{{- $title := "404" -}} {{- $weight := -1 -}} {{- range site.Menus.main -}}