Skip to content

Commit

Permalink
refactor: prefine for version v1.0.2 (#269)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
Sped0n authored Feb 5, 2024
1 parent a98c6a4 commit ba07636
Show file tree
Hide file tree
Showing 8 changed files with 39 additions and 31 deletions.
4 changes: 2 additions & 2 deletions assets/scss/_partial/_article.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.info {
article {
padding: var(--space-standard);
max-width: 25em;

Expand Down Expand Up @@ -42,7 +42,7 @@
}

@media (max-width: $tablet), (hover: none) {
.info {
article {
margin-top: var(--nav-height);
}
}
18 changes: 11 additions & 7 deletions assets/ts/mobile/gallery.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export function slideUp(): void {
})

setTimeout(() => {
// cleanup
scrollable.set(false)
isAnimating.set(false)
}, 1400)
Expand All @@ -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, {
Expand All @@ -74,8 +74,10 @@ function slideDown(): void {
})

setTimeout(() => {
// cleanup
scrollable.set(true)
isAnimating.set(false)
lastIndex = -1
}, 1600)
}

Expand Down Expand Up @@ -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) => {
Expand Down
3 changes: 3 additions & 0 deletions assets/ts/resources.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
24 changes: 12 additions & 12 deletions doc/getStarted.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down Expand Up @@ -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.
4 changes: 2 additions & 2 deletions exampleSite/content/Info/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>.

Expand Down
10 changes: 5 additions & 5 deletions layouts/404.html
Original file line number Diff line number Diff line change
@@ -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 -}}
5 changes: 3 additions & 2 deletions layouts/_default/single.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 -}}
2 changes: 1 addition & 1 deletion layouts/partials/function/currentMenuItem.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{{- $currentPage := . -}}

{{- $identifier := "" -}}
{{- $title := "" -}}
{{- $title := "404" -}}
{{- $weight := -1 -}}

{{- range site.Menus.main -}}
Expand Down

0 comments on commit ba07636

Please sign in to comment.