Use JSON file to replace raw string in DOM (#147)

* chore(Geist): bump geist font to v1.0.1

* refactor(_typography.scss): split the CSS lang tag to ensure compatibility with Chromium-based browsers

* refactor(stage.ts): bump up preload count on desktop

* feat(params.toml): add support for user defined resize option

* feat(_fonts.scss): add a new font file to better support fullwidth plus and minus

* refactor(info): update info

* chore(build.yml): update branch name for updating bundled artifacts to include the current date

* chore(package.json): update version from 0.0.1 to v0.0.2 to reflect changes made in the codebase

* feat: refactor initialization process for retrieving and sorting image data

- Modify `main.ts` to use async initialization of resources
- Change the return type of `initResources` function to `Promise<ImageJSON[]>`
- Add try-catch block to handle errors in `initResources` function
- Use fetch API to retrieve image data from `index.json`
- Sort the image data based on the index field

* refactor: update file naming and variable assignments in layouts

- Add new file `exampleSite/config/_default/outputs.toml` with the contents `page = ["HTML", "JSON"]`
- Rename file `layouts/partials/resources/imageJSON.html` to `layouts/_default/single.json`
- Modify variable assignments and references in the `single.json` layou

* chore: remove code that includes imageJSON.html partials in layouts

- Remove the code that includes the "resources/imageJSON.html" partial in the 404.html layout
- Remove the code that includes the "resources/imageJSON.html" partial in the single.html layout

.prettierignore

@@ -3,3 +3,4 @@ static
 exmapleSite
 *.yaml
 *.yml
+single.json

assets/ts/main.ts

@@ -5,7 +5,7 @@ import { initState } from './state'
 import { isMobile } from './utils'
 
 initContainer()
-const ijs = initResources()
+const ijs = await initResources()
 initState(ijs.length)
 initNav()
 

assets/ts/resources.ts

@@ -10,17 +10,21 @@ export interface ImageJSON {
   hiImgW: number
 }
 
-export function initResources(): ImageJSON[] {
-  const imagesJson = document.getElementById('imagesSource')
-  if (imagesJson === null) {
-    return []
-  }
-  return JSON.parse(imagesJson.textContent as string).sort(
-    (a: ImageJSON, b: ImageJSON) => {
+export async function initResources(): Promise<ImageJSON[]> {
+  try {
+    const response = await fetch(`${window.location.href}index.json`, {
+      headers: {
+        Accept: 'application/json'
+      }
+    })
+    const data: ImageJSON[] = await response.json()
+    return data.sort((a: ImageJSON, b: ImageJSON) => {
       if (a.index < b.index) {
         return -1
       }
       return 1
-    }
-  )
+    })
+  } catch (_) {
+    return []
+  }
 }

exampleSite/config/_default/outputs.toml

@@ -0,0 +1 @@
+page = ["HTML", "JSON"]

layouts/404.html

@@ -2,7 +2,6 @@
   {{- $params := .Scratch.Get "params" -}}
   {{- $currentPage := . -}}
   {{- with partial "function/currentMenuItem.html" . -}}
-    {{- partial "resources/imageJSON.html" (dict "Path" .DirName "Page" $currentPage) -}}
     <script>document.getElementById("main").setAttribute("currentMenuItemIndex", "{{- (sub .ID 1) -}}")</script>
   {{- end -}}
   <div class="container">

layouts/_default/single.html

@@ -2,7 +2,6 @@
   {{- $params := .Scratch.Get "params" -}}
   {{- $currentPage := . -}}
   {{- with partial "function/currentMenuItem.html" . -}}
-    {{- partial "resources/imageJSON.html" (dict "Path" .DirName "Page" $currentPage) -}}
     <script>
       document.getElementById("main").setAttribute("currentMenuItemIndex", "{{- (sub .ID 1) -}}")
       document.getElementById("main").setAttribute("nextText", "{{- i18n "next" -}}")

layouts/_default/single.json

@@ -1,7 +1,12 @@
-{{- $Page := .Page -}}
+{{- $Page := . -}}
+{{- $Path := "" -}}
 {{- $params := .Page.Params | merge .Site.Params.Page -}}
 
-{{- $gallery := site.GetPage .Path -}}
+{{- with partial "function/currentMenuItem.html" . -}}
+  {{- $Path = .DirName -}}
+{{- end -}}
+
+{{- $gallery := site.GetPage $Path -}}
 {{- with $gallery.Resources.ByType "image" -}}
   {{- $index := len . -}}
   {{- $Page.Scratch.Add "img" slice -}}
@@ -26,5 +31,7 @@
       )
     -}}
   {{- end -}}
-    <script id="imagesSource" type="application/json">{{ $Page.Scratch.Get "img" | jsonify | safeJS }}</script>
+    {{ $Page.Scratch.Get "img" | jsonify }}
+{{- else -}}
+[]
 {{- end -}}