MPR Allow scripts files to not be in /public

Allow scripts files to not be in `/public`
oursky · Aug 27, 2024 · a47ff50 · a47ff50
2 parents 7292e5c + b49a412
commit a47ff50
Show file tree

Hide file tree

Showing 26 changed files with 286 additions and 55 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,5 +1,10 @@
 module.exports = {
   // ...
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+  },
   overrides: [
     {
       // Define the configuration for `.astro` file.

diff --git a/README.md b/README.md
@@ -135,3 +135,12 @@ Now, in your terminal:
      - Press Esc to close image window
 5. In `src/scripts/device_info.json`, add the `device_id` to the `device_cat` it belongs to
 6. Run `npx prettier src/scripts/device_info.json --write` to format `src/scripts/device_info.json`
+
+### About `src/pages/**/_*.ts`
+
+You might observe some `js`/`ts` files with underscroe `_` prefix.
+This's because files in `src/pages/` without this prefix `_` are processed and transformed into routes or endpoints during the build. However, some files that contain client-side code (e.g., files that use `document.xxx` or `window.xxx`) are not suitable for server-side rendering and should not be included in the final output.
+
+Refs:
+https://docs.astro.build/en/guides/endpoints/
+https://docs.astro.build/en/guides/routing/#excluding-pages
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,8 @@
     "check": "astro check -- && tsc --noEmit"
   },
   "dependencies": {
+    "@algolia/autocomplete-js": "^1.17.4",
+    "@algolia/autocomplete-plugin-recent-searches": "^1.17.4",
     "@astrojs/image": "^0.17.2",
     "@astrojs/ts-plugin": "^1.1.1",
     "astro": "^2.8.3",

diff --git a/public/scripts/autoDownload.js b/public/scripts/autoDownload.js
diff --git a/src/layouts/BaseLayout.astro → src/layouts/BaseLayout/BaseLayout.astro b/src/layouts/BaseLayout.astro → src/layouts/BaseLayout/BaseLayout.astro
@@ -75,13 +75,7 @@ const {
     <script type="text/javascript" src="https://unpkg.com/@popperjs/core@2"
     ></script>
     <script type="text/javascript" src="https://unpkg.com/tippy.js@6"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js"
-    ></script>
-    <script
-      src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-plugin-recent-searches"
-    ></script>
-    <script type="text/javascript" src="/scripts/main.js"></script>
-    <script type="text/javascript" src="/scripts/developerTools.js"></script>
+    <script src="./_main.js"></script>
     <!-- ${ self.javascript() } -->
 
     <!-- freight sans pro font -->
@@ -290,7 +284,7 @@ const {
       </footer>
 
       <div id="fb-root"></div>
-      <script is:inline src="/scripts/baseLayout.js"></script>
+      <script src="./_baseLayout.js"></script>
     </div>
   </body>
 </html>
diff --git a/public/scripts/baseLayout.js → src/layouts/BaseLayout/_baseLayout.js b/public/scripts/baseLayout.js → src/layouts/BaseLayout/_baseLayout.js
diff --git a/public/scripts/main.js → src/layouts/BaseLayout/_main.js b/public/scripts/main.js → src/layouts/BaseLayout/_main.js
diff --git a/src/pages/404.astro → src/pages/404/index.astro b/src/pages/404.astro → src/pages/404/index.astro
@@ -1,5 +1,5 @@
 ---
-import ErrorPage from "../components/ErrorPage.astro";
+import ErrorPage from "../../components/ErrorPage.astro";
 ---
 
 <!DOCTYPE html>

diff --git a/public/scripts/home.js → src/pages/_home.js b/public/scripts/home.js → src/pages/_home.js
@@ -1,18 +1,15 @@
+import * as autocompletePluginRecentSearchesPkg from "@algolia/autocomplete-plugin-recent-searches";
+const { createLocalStorageRecentSearchesPlugin } =
+  autocompletePluginRecentSearchesPkg;
+import * as autocompleteJsPkg from "@algolia/autocomplete-js";
+const { autocomplete } = autocompleteJsPkg;
+
 const NUM_DEFAULT_MODEL_ITEMS_TO_DISPLAY = 0;
 const NUM_DEFAULT_BRAND_ITEMS_TO_DISPLAY = 0;
 const MAX_SEARCH_HISTORY_ITEM = 5;
 const ALGOLIA_SEARCH_HISTORY_KEY = "brandModelSearch";
 const LOCAL_STORAGE_KEY = `AUTOCOMPLETE_RECENT_SEARCHES:${ALGOLIA_SEARCH_HISTORY_KEY}`;
 
-function ready(fn) {
-  if (document.readyState != "loading") {
-    fn();
-  } else {
-    document.addEventListener("DOMContentLoaded", fn);
-  }
-}
-ready(main);
-
 class RootViewModel {
   searchText = "";
   _modelItems;
@@ -77,10 +74,6 @@ function moveOldHistoryToTop(oldHistoryItem) {
 }
 
 function initializeAutocomplete(viewModel) {
-  const { autocomplete } = window["@algolia/autocomplete-js"];
-  const { createLocalStorageRecentSearchesPlugin } =
-    window["@algolia/autocomplete-plugin-recent-searches"];
-
   const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
     key: ALGOLIA_SEARCH_HISTORY_KEY,
     MAX_SEARCH_HISTORY_ITEM,
@@ -205,7 +198,18 @@ function initializeAutocomplete(viewModel) {
     });
   });
 }
+
+function ready(fn) {
+  if (document.readyState != "loading") {
+    fn();
+  } else {
+    document.addEventListener("DOMContentLoaded", fn);
+  }
+}
+
 function main() {
   const viewModel = new RootViewModel(window.modelItems, window.brandItems);
   initializeAutocomplete(viewModel);
 }
+
+ready(main);
diff --git a/src/pages/about.astro → src/pages/about/index.astro b/src/pages/about.astro → src/pages/about/index.astro
@@ -1,6 +1,6 @@
 ---
 import "/src/styles/home.css";
-import BaseLayout from "../layouts/BaseLayout.astro";
+import BaseLayout from "../../layouts/BaseLayout/BaseLayout.astro";
 ---
 
 <BaseLayout>