Issue / Nuxt as SPA

.theme/components/Prose/ProseBlockquote.vue

@@ -15,13 +15,13 @@ const slot = computed(() => {
 
 const firstLine = computed(() => {
   // avoids multiple rendering of default slot in children
-  return slot.value[0].children.default()[0].children;
+  return slot.value[0].children.default()[0].children[0].children;
 });
 
 const types = {
-  ":information_source:": "info",
-  ":warning:": "warning",
-  ":bulb:": "success"
+  "!NOTE": "info",
+  "!WARNING": "warning",
+  "!TIP": "success"
 };
 
 const type = computed(() => {
@@ -46,13 +46,13 @@ blockquote {
   margin-left: 1em;
 }
 .info {
-  border-color: var(--color-blue);
+  border-color: var(--color-blue-n1);
 }
 .warning {
-  border-color: var(--color-orange);
+  border-color: var(--color-orange-0);
 }
 .success {
-  border-color: var(--color-green);
+  border-color: var(--color-green-n1);
 }
 .default {
   border-color: var(--color-fg);

.theme/nuxt.config.ts

@@ -49,20 +49,28 @@ export default defineNuxtConfig({
       remarkPlugins: {
         "remark-emoji": false
       }
+    },
+    highlight: {
+      theme: "slack-dark",
+      preload: [
+        "diff",
+        "ts",
+        "js",
+        "css",
+        "java",
+        "markdown",
+        "sql",
+        "xml",
+        "json",
+        "csharp",
+        "md",
+        "bash",
+        "dockerfile"
+      ]
     }
   },
   css: ["~/assets/styles.scss"],
   devtools: { enabled: true },
-  vite: {
-    css: {
-      preprocessorOptions: {
-        scss: {
-          additionalData: "@import \"@/assets/variables.scss\";"
-        }
-      }
-    }
-  },
-  modules: ["@nuxt/content", "@pinia/nuxt"],
   dir: {
     public: ".public"
   },
@@ -75,6 +83,7 @@ export default defineNuxtConfig({
   generate: {
     routes: ["/not-found"]
   },
+  modules: ["@nuxt/content", "@pinia/nuxt"],
   nitro: {
     prerender: {
       ignore: [
@@ -101,5 +110,14 @@ export default defineNuxtConfig({
       },
       baseUrl: ""
     }
+  },
+  vite: {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: "@import \"@/assets/variables.scss\";"
+        }
+      }
+    }
   }
 });

.theme/package.json

@@ -2,14 +2,14 @@
   "type": "module",
   "scripts": {
     "lint": "eslint .",
-    "setup": "npm run lint && npx cross-var node -r dotenv/config prebuild dotenv_config_path=.env.$npm_config_env",
+    "setup": "npm run lint && cross-env-shell node -r dotenv/config prebuild dotenv_config_path=.env.$npm_config_env",
     "predev": "npm run setup --env=local",
-    "dev": "npx nuxi dev --dotenv .env.local",
-    "pregenerate": "npx cross-var npm run setup --env=$npm_config_env",
-    "generate": "npx cross-var npx nuxi generate --dotenv .env.$npm_config_env",
+    "dev": "nuxi dev --dotenv .env.local",
+    "pregenerate": "cross-env-shell npm run setup --env=$npm_config_env",
+    "generate": "cross-env-shell nuxi generate --dotenv .env.$npm_config_env",
     "generate:local": "npm run generate --env=local",
     "generate:production": "npm run generate --env=production",
-    "postinstall": "npx nuxi prepare",
+    "postinstall": "nuxi prepare",
     "prelocal": "npm run generate:local",
     "local": "npx http-server .output/public -p 3000"
   },
@@ -20,6 +20,7 @@
     "@nuxt/devtools": "latest",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@pinia/nuxt": "^0.5.3",
+    "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "log-symbols": "^6.0.0",
     "nuxt": "3.12.4",

Makefile

@@ -4,8 +4,6 @@ run:
 	@ \
 	echo "(1) Dev" ; \
 	echo "(2) Local" ; \
-	echo "(3) Eslint" ; \
-	echo "(4) Eslint Fix" ; \
 	echo "" ; \
 	echo "Please select 1-4: " ; \
 	read srv ; \
@@ -14,12 +12,6 @@ run:
 	fi ; \
 	if test $$srv -eq "2" ; then \
 		cd .theme ; npm run local ; cd .. ; \
-	fi ; \
-	if test $$srv -eq "3" ; then \
-		cd .theme ; npm run lint ; cd .. ; \
-	fi ; \
-	if test $$srv -eq "4" ; then \
-		cd .theme ; npx eslint . --fix ; cd .. ; \
 	fi
 build:
 	@ \

README.md

@@ -15,6 +15,7 @@ Read below guides to find out how we use nuxt;
 - [Routing](routing.md)
 - [Components](components.md)
 - [Network](network.md)
+- [Single-Page Application (SPA)](spa.md)
 - [Configuration](configuration.md)
 
 Enjoy your web site project 🤗

change-history/package-upgrades.md

@@ -107,7 +107,7 @@ Added it because it is needed for the `log` task in `.prebuild`.
 
 When upgrading to this version, version 3.4.1 of nuxt gives run time errors.
 
-```log
+```text
 WARN  Current version of Node.js (20.8.0) is unsupported and might cause
 issues.
 Please upgrade to a compatible version (^14.18.0 || ^16.10.0 || ^17.0.0 ||
@@ -172,7 +172,7 @@ Clean upgrade. No issues.
 When we upgraded the Typescript version to 5.2.2 there was a conflict with
 eslint. You can see the problem below.
 
-```log
+```text
 =============
 
 WARNING: You are currently running a version of TypeScript which is not

components.md

@@ -26,7 +26,7 @@ properties can be added later on. Values of these properties can be assigned
 when using the component with properties as shown in
 `.theme/demo/defining-props.vue`
 
-> :information_source:
+> [!NOTE]
 >
 > When we use `defineProps`, we prefer the language to be `typescript` to keep
 > the props type-safe.
@@ -41,7 +41,7 @@ Complex types can be used with `defineProps` as seen in
 Demo is at
 [/demo/components/complex-type-props](/demo/components/complex-type-props)
 
-> :information_source:
+> [!NOTE]
 >
 > For type instances in your scripts to work, script language should be set
 > to TypeScript. [TypeCheck][] should be enabled. If you have enabled type
@@ -95,7 +95,7 @@ Below is a demonstration of overriding `ProseTable.vue`;
 | Using    | Prose | Components |
 | To       | Add   | Border     |
 
-> :information_source:
+> [!NOTE]
 >
 > You need to configure `~/components/Prose` as a global directory to enable
 > this. See `.theme/nuxt.config.ts`.
@@ -105,7 +105,7 @@ Below is a demonstration of overriding `ProseTable.vue`;
 We need this one to create an alarm component out of a blockquote with an icon
 in its first line like below;
 
-> :warning:
+> [!WARNING]
 >
 > Demo warning message
 
@@ -119,7 +119,7 @@ changed or created.
 
 Other types demonstrated below;
 
-> :information_source:
+> [!NOTE]
 >
 > Demo info message
 
@@ -161,7 +161,7 @@ See [/demo/transformer](/demo/transformer/) to see what can be done.
 
 See `/transformers/optimus-prime.ts` to see how it is done.
 
-> :information_source:
+> [!NOTE]
 >
 > For Content Transformers to work, we need to add them as modules to Nuxt.
 > Nuxt does this automatically if the nuxt modules are under `/modules`. You

configuration.md

@@ -1,5 +1,5 @@
 ---
-position: 7
+position: 8
 ---
 
 # Configuration

content.md

@@ -31,7 +31,7 @@ Code references are given in code block such as `const x = ref(5);`. To use
 code block wrap the code with "\`" character. This usage works for a single
 line, in order to have multiple lines of code block use "\`\`\`" instead of "\`".
 
-> :information_source:
+> [!NOTE]
 >
 > Code related terms and terms in general are not given in code block,
 > use "\_\_Term\_\_" for code related terms, and italic for terms in general.