chore(www): make feature theme easier to configure [ci skip]

Author: metonym

www/components/LineNumbers/Basic.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { THEME_NAME, THEME_MODULE_NAME } from "@www/constants";
+
   // @ts-check
 
   export let snippet = "<LineNumbers {highlighted} />";
@@ -8,13 +10,13 @@
   const code = `<script>
   import Highlight, { LineNumbers } from "svelte-highlight";
   import typescript from "svelte-highlight/languages/typescript";
-  import ashes from "svelte-highlight/styles/ashes";
+  import ${THEME_MODULE_NAME} from "svelte-highlight/styles/${THEME_NAME}";
 
   const code = "const add = (a: number, b: number) => a + b";
 <\/script>
   
 <svelte:head>
-  {@html ashes}
+  {@html ${THEME_MODULE_NAME}}
 </svelte:head>
 
 <Highlight language={typescript} {code} let:highlighted>
@@ -23,5 +25,5 @@
 </script>
 
 <HighlightSvelte {code} let:highlighted>
-  <LineNumbers class="ashes" {highlighted} {...$$restProps} />
+  <LineNumbers class={THEME_MODULE_NAME} {highlighted} {...$$restProps} />
 </HighlightSvelte>

www/components/ScopedLanguage.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { THEME_MODULE_NAME } from "@www/constants";
+
   // @ts-check
 
   /** @type {string} */
@@ -22,4 +24,4 @@
 <Highlight language={${moduleName}} code="code" />`;
 </script>
 
-<HighlightSvelte class="ashes" {code} />
+<HighlightSvelte class={THEME_MODULE_NAME} {code} />

www/components/globals/Index.svelte

@@ -1,7 +1,7 @@
 <script>
   // @ts-check
 
-  import { PKG_NAME } from "@www/constants";
+  import { THEME_NAME, PKG_NAME, THEME_MODULE_NAME } from "@www/constants";
   import {
     Row,
     Column,
@@ -82,7 +82,7 @@
     </p>
   </Column>
   <Column xlg={10}>
-    <ScopedStyle name="ashes" moduleName="ashes" />
+    <ScopedStyle name={THEME_NAME} moduleName={THEME_MODULE_NAME} />
   </Column>
   <Column xlg={6} lg={12}>
     <p class="mb-5">
@@ -111,7 +111,7 @@
     </p>
   </Column>
   <Column xlg={10}>
-    <HighlightSvelte code={svelteHeadCdn} class="ashes" />
+    <HighlightSvelte code={svelteHeadCdn} class={THEME_MODULE_NAME} />
     <InlineNotification
       lowContrast
       hideCloseButton
@@ -133,7 +133,7 @@
     </p>
   </Column>
   <Column xlg={10}>
-    <ScopedStyleSvelte name="ashes" moduleName="ashes" />
+    <ScopedStyleSvelte name={THEME_NAME} moduleName={THEME_MODULE_NAME} />
   </Column>
 </Row>
 
@@ -149,7 +149,7 @@
     </p>
   </Column>
   <Column xlg={10}>
-    <ScopedStyleAuto name="ashes" moduleName="ashes" />
+    <ScopedStyleAuto name={THEME_NAME} moduleName={THEME_MODULE_NAME} />
     <InlineNotification
       lowContrast
       hideCloseButton
@@ -253,7 +253,7 @@
     <Highlight
       code={'[data-language="css"] {\n  /* custom style rules */\n}'}
       language={css}
-      class="ashes"
+      class={THEME_MODULE_NAME}
     />
   </Column>
 </Row>
@@ -293,7 +293,7 @@
 <\/script>
 
 <HighlightAuto {code} langtag \/>`}
-      class="ashes"
+      class={THEME_MODULE_NAME}
       langtag
     />
     <br />
@@ -308,7 +308,7 @@
   --langtag-border-radius="6px"
   --langtag-padding="0.5rem"
 />`}
-      class="ashes"
+      class={THEME_MODULE_NAME}
       langtag
       --langtag-top="0.5rem"
       --langtag-right="0.5rem"

www/constants.ts

@@ -3,3 +3,7 @@ export const PKG_VERSION = __PKG_VERSION;
 export const PKG_HOMEPAGE = __PKG_HOMEPAGE;
 export const PKG_HLJS_VERSION = __PKG_HLJS_VERSION;
 export const TS = __TS;
+
+// Change the featured theme used in the home page and languages pages.
+export const THEME_NAME = "ashes";
+export const THEME_MODULE_NAME = "ashes";