🐛 fix build issue

.nvmrc

@@ -1 +1 @@
-v18
+v20

package.json

@@ -22,5 +22,8 @@
   "license": "MIT",
   "workspaces": [
     "workspaces/*"
-  ]
+  ],
+  "devDependencies": {
+    "astro": "^4.0.3"
+  }
 }

workspaces/components/package.json

@@ -14,7 +14,7 @@
   "author": "scottnath",
   "license": "MIT",
   "devDependencies": {
-    "storydocker-storybook": "^0.0.17",
-    "storydocker-utilities": "^0.0.12"
+    "storydocker-storybook": "^0.0.18",
+    "storydocker-utilities": "^0.0.13"
   }
 }

workspaces/website/src/components/DopeStripes.astro

@@ -0,0 +1,25 @@
+---
+import DopeStripesHTML from 'scottnath-components/src/dope-stripes/html.js';
+import DopeStripesStyles from 'scottnath-components/src/dope-stripes/style.css?inline';
+let stripesHTML = '<style>' + DopeStripesStyles + '</style>';
+stripesHTML += DopeStripesHTML(['#ffd273', '#ffbf57', '#ffa43b', '#ff8920', '#ff6e05']);
+---
+
+<dope-stripes>
+  <template shadowrootmode="open" set:html={stripesHTML}>
+  </template>
+</dope-stripes>
+
+<style>
+  dope-stripes {
+    position: absolute;
+    width: 100%;
+  }
+  dope-stripes::part(stripes) {
+    --left-width: 7em;
+    --angle-width: 73px;
+    --stripe-height: 16px;
+    --stripe-angle: 20deg;
+  }
+</style>
+

workspaces/website/src/components/Header.astro

@@ -1,6 +1,5 @@
 ---
-import DopeStripesHTML from 'scottnath-components/src/dope-stripes/html.js';
-import DopeStripesStyles from 'scottnath-components/src/dope-stripes/style.css?inline';
+import DopeStripes from './DopeStripes.astro';
 import HeaderLink from './HeaderLink.astro';
 import { SITE_TITLE, SITE_SUBTITLE } from '../consts';
 import profilePic from '~/assets/scott-nath-profile-photo.jpeg';
@@ -9,15 +8,10 @@ import githubLogo from '~/assets/logos/github-inverse.svg';
 import linkedinLogo from '~/assets/logos/linkedin.svg';
 import mastodonLogo from '~/assets/logos/Mastodon.svg';
 
-let stripesHTML = '<style>' + DopeStripesStyles + '</style>';
-stripesHTML += DopeStripesHTML(['#ffd273', '#ffbf57', '#ffa43b', '#ff8920', '#ff6e05']);
 ---
 
 <header>
-  <dope-stripes>
-    <template shadowrootmode="open" set:html={stripesHTML}>
-    </template>
-  </dope-stripes>
+  <DopeStripes id="dope"></DopeStripes>
   <div class="content">
     <h2>
       {SITE_TITLE}
@@ -50,17 +44,6 @@ stripesHTML += DopeStripesHTML(['#ffd273', '#ffbf57', '#ffa43b', '#ff8920', '#ff
       height: 100%;
     }
 	}
-
-  dope-stripes {
-    position: absolute;
-    width: 100%;
-  }
-  dope-stripes::part(stripes) {
-    --left-width: 7em;
-    --angle-width: 73px;
-    --stripe-height: 16px;
-    --stripe-angle: 20deg;
-  }
 	h2 {
 		margin: 0;
     padding-top: 3.3em;