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: {