From 9b08d255f1b0d5924e557e5cd47d4fa3d82ee726 Mon Sep 17 00:00:00 2001
From: Spedon <70063177+Sped0n@users.noreply.github.com>
Date: Mon, 13 Nov 2023 20:51:08 +0800
Subject: [PATCH] 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                               |  1 +
 assets/ts/main.ts                             |  2 +-
 assets/ts/resources.ts                        | 22 +++++++++++--------
 exampleSite/config/_default/outputs.toml      |  1 +
 layouts/404.html                              |  1 -
 layouts/_default/single.html                  |  1 -
 .../imageJSON.html => _default/single.json}   | 13 ++++++++---
 7 files changed, 26 insertions(+), 15 deletions(-)
 create mode 100644 exampleSite/config/_default/outputs.toml
 rename layouts/{partials/resources/imageJSON.html => _default/single.json} (79%)

diff --git a/.prettierignore b/.prettierignore
index f349520..136eb57 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,3 +3,4 @@ static
 exmapleSite
 *.yaml
 *.yml
+single.json
diff --git a/assets/ts/main.ts b/assets/ts/main.ts
index 1177033..455ae77 100644
--- a/assets/ts/main.ts
+++ b/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()
 
diff --git a/assets/ts/resources.ts b/assets/ts/resources.ts
index 1adbb21..2a2effa 100644
--- a/assets/ts/resources.ts
+++ b/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 []
+  }
 }
diff --git a/exampleSite/config/_default/outputs.toml b/exampleSite/config/_default/outputs.toml
new file mode 100644
index 0000000..71e14da
--- /dev/null
+++ b/exampleSite/config/_default/outputs.toml
@@ -0,0 +1 @@
+page = ["HTML", "JSON"]
diff --git a/layouts/404.html b/layouts/404.html
index e47c069..9ac594c 100644
--- a/layouts/404.html
+++ b/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">
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 704e561..214cfef 100644
--- a/layouts/_default/single.html
+++ b/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" -}}")
diff --git a/layouts/partials/resources/imageJSON.html b/layouts/_default/single.json
similarity index 79%
rename from layouts/partials/resources/imageJSON.html
rename to layouts/_default/single.json
index 725fb9d..111efd3 100644
--- a/layouts/partials/resources/imageJSON.html
+++ b/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 -}}