🔥 reuse description from constants, rename plural Favicons

README.md

@@ -334,5 +334,6 @@ Additionally, we must clear all events on the transport and re-register them if
 - Create an effect bus and display it on one of these pages
 - Create event bus, where events are automatically re-scheduled after transport time has changed
 - Add UI to clear metronome events
+- explain framwork-meta-header -> `HeadDefault.tsx`
 
 

components/TonePortalContent.tsx

@@ -1,15 +1,13 @@
 import Button from '#components/common/Button'
 import H2Headline from '#components/common/H2Headline'
+import { APP_CONFIG } from '#lib/constants'
 
 const TonePortalContent = ({ handleClick }: { handleClick: () => void }) => (
   <div className="flex justify-center">
     <div className="mt-16 p-3">
       <div className="text-5xl text-center mb-6">🚂🚃</div>
       <H2Headline className="text-4xl text-center font-black mb-6">STATETRAIN</H2Headline>
-      <p className="text-xl md:w-3/4 mx-auto mb-5 text-center">
-        Gain control of the tone.js transport with a modern routable typescript-react environment.
-        🚂🚃
-      </p>
+      <p className="text-xl md:w-3/4 mx-auto mb-5 text-center">{APP_CONFIG.description}</p>
       <Button className="bg-successDark text-white w-full justify-center" onClick={handleClick}>
         Initialize Tone.js *
       </Button>

lib/constants.ts

@@ -5,6 +5,8 @@ export const APP_CONFIG = {
   viteUrl: `${
     import.meta.env.PROD ? 'https://richard-unterberg.github.io' : 'http://localhost:5247'
   }${import.meta.env.BASE_URL.slice(0, -1)}`,
+  description:
+    'Gain control of the tone.js transport in a modern routable typescript-react environment. 🚂🚃',
 }
 
 export const TRANSPORT_CONFIG: TransportConfigType = {

pages/Favicon.tsx → pages/Favicons.tsx

@@ -1,6 +1,6 @@
 import { APP_CONFIG } from '#lib/constants'
 
-const Favicon = () => (
+const Favicons = () => (
   <>
     <meta
       name="msapplication-TileImage"
@@ -79,4 +79,4 @@ const Favicon = () => (
   </>
 )
 
-export default Favicon
+export default Favicons

pages/HeadDefault.tsx

@@ -1,18 +1,15 @@
 import { APP_CONFIG } from '#lib/constants'
-import Favicon from '#pages/Favicon'
+import Favicons from '#pages/Favicons'
 
 const Head = () => (
   <>
-    <Favicon />
+    <Favicons />
     <meta name="msapplication-TileColor" content="#020617" />
     <meta name="theme-color" content="#020617" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="robots" content="index, follow" />
     <link rel="manifest" href={`${APP_CONFIG.viteUrl}/site.webmanifest`} />
-    <meta
-      name="description"
-      content="Gain control of the tone.js transport with a modern routable typescript-react environment. 🚂🚃"
-    />
+    <meta name="description" content={APP_CONFIG.description} />
   </>
 )