fixed source maps and ssr usage

but waiting for next astro release to contain a fix for latest lit withastro/astro#6670 withastro/astro#6681
kulturverein-lochmuehle · Mar 30, 2023 · ed83f27 · ed83f27
1 parent 26c9e2d
commit ed83f27
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 192 deletions.
diff --git a/packages/ui/esbuild.config.ts b/packages/ui/esbuild.config.ts
@@ -2,8 +2,6 @@ import { createServer, request as httpRequest } from 'node:http';
 import { resolve } from 'node:path';
 import { parseArgs } from 'node:util';
 
-import glob from 'fast-glob';
-
 import { type BuildOptions, build, context } from 'esbuild';
 import { sassPlugin } from 'esbuild-sass-plugin';
 
@@ -39,28 +37,22 @@ const {
   }
 });
 
-// we bundle each individual element as well
-const singleElements = await glob('src/*/**/!(*.spec).ts', { onlyFiles: true, unique: true });
-
 // prepare common build options
 const options: BuildOptions = {
   sourceRoot: 'src',
   entryPoints: [
-    ...singleElements,
     'src/index.ts',
     'src/index.html',
     'src/index.scss',
     'src/config.json'
   ],
   outdir: 'dist',
-  external: ['lit*'],
-  platform: 'browser',
   format: 'esm',
   bundle: true,
   metafile: true,
   minify: true,
   treeShaking: true,
-  sourcemap: true,
+  sourcemap: 'both',
   loader: {
     '.html': 'copy',
     '.json': 'copy',

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -65,7 +65,6 @@
     "eslint": "8.37.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-tsdoc": "0.2.17",
-    "fast-glob": "3.2.12",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.21",
     "postcss-preset-env": "8.2.0",

diff --git a/packages/ui/src/index.html b/packages/ui/src/index.html
@@ -10,6 +10,38 @@
     <link rel="stylesheet" href="/index.css" />
   </head>
   <body>
+    <header>
+      <kvlm-navigation slot="header" scroll-fade-distance="100">
+        <kvlm-navigation-item inline href="/verein/willkommen" label="Willkommen">
+        </kvlm-navigation-item>
+        <kvlm-navigation-item inline href="/verein/neues" label="Neues"></kvlm-navigation-item>
+      </kvlm-navigation>
+    </header>
+    <main>
+      <kvlm-main scroll-observe-selector="kvlm-section">
+        <kvlm-section
+          id="/verein/willkommen"
+          style="
+            --kvlm-section-background-from: #75f0de;
+            --kvlm-section-background-to: #6fbad9;
+            --kvlm-section-color: var(--kvlm-color-grey-dark);
+          "
+        >
+          <h1 class="title">Willkommen</h1>
+        </kvlm-section>
+        <kvlm-section
+          id="/verein/neues"
+          style="
+            --kvlm-section-background-from: #525252;
+            --kvlm-section-background-to: #101010;
+            --kvlm-section-color: var(--kvlm-color-grey-light);
+          "
+        >
+          <h1 class="title">Neues</h1>
+        </kvlm-section>
+      </kvlm-main>
+    </main>
+
     <script defer type="module" src="/index.js"></script>
   </body>
 </html>
diff --git a/packages/ui/tsconfig.types.json b/packages/ui/tsconfig.types.json
@@ -4,7 +4,8 @@
     "declaration": true,
     "emitDeclarationOnly": true,
     "emitDecoratorMetadata": true,
-    "outDir": "dist"
+    "outDir": "dist",
+    "sourceMap": false
   },
   "include": ["globals.d.ts", "src"]
 }
diff --git a/packages/website/esbuild.config.ts b/packages/website/esbuild.config.ts
diff --git a/packages/website/globals.d.ts → packages/website/modules.d.ts b/packages/website/globals.d.ts → packages/website/modules.d.ts
diff --git a/packages/website/src/components/nav-item.component.astro b/packages/website/src/components/nav-item.component.astro
diff --git a/packages/website/src/components/section.component.astro b/packages/website/src/components/section.component.astro
diff --git a/packages/website/src/layouts/default.layout.astro b/packages/website/src/layouts/default.layout.astro
@@ -1,6 +1,6 @@
 ---
-import '@kvlm/ui';
 import '@kvlm/ui/dist/index.css';
+import { Main } from '@kvlm/ui';
 
 const { lang = 'en', title } = Astro.props;
 ---
@@ -20,9 +20,9 @@ const { lang = 'en', title } = Astro.props;
       <slot name="header" />
     </header>
     <main>
-      <kvlm-main scroll-observe-selector="kvlm-section">
+      <Main client:load scroll-observe-selector="kvlm-section">
         <slot />
-      </kvlm-main>
+      </Main>
     </main>
   </body>
 </html>
diff --git a/packages/website/src/pages/verein/index.astro b/packages/website/src/pages/verein/index.astro
@@ -1,26 +1,34 @@
 ---
+import { Navigation, NavigationItem, Section } from '@kvlm/ui';
+
 import DefaultLayout from '../../layouts/default.layout.astro';
-import Section from '../../components/section.component.astro';
-import NavItem from '../../components/nav-item.component.astro';
 import Title from '../../components/title.component.astro';
 import Info from '../../components/info.component.astro';
 
 const sections = await Astro.glob('/src/content/verein/sections/*.section.mdx');
 ---
 
 <DefaultLayout lang="de" title="Kulturverein Lochmühle">
-  <kvlm-navigation slot="header">
+  <Navigation client:load slot="header">
     {
       sections.map(({ frontmatter: { slug, title } }) => (
-        <NavItem href={`${Astro.url.pathname}/${slug}`} label={title} />
+        <NavigationItem client:load href={`${Astro.url.pathname}/${slug}`} label={title} />
       ))
     }
-    <NavItem href={`${Astro.url.pathname}/impressum`} label="Impressum" />
-  </kvlm-navigation>
+    <NavigationItem client:load href={`${Astro.url.pathname}/impressum`} label="Impressum" />
+  </Navigation>
   {
     sections.map(({ Content, frontmatter }) => {
       return (
-        <Section {...frontmatter} slug={`${Astro.url.pathname}/${frontmatter.slug}`}>
+        <Section
+          client:visible
+          id={`${Astro.url.pathname}/${frontmatter.slug}`}
+          style={`
+            --kvlm-section-background-from: ${frontmatter.backgroundFrom};
+            --kvlm-section-background-to: ${frontmatter.backgroundTo};
+            --kvlm-section-color: ${frontmatter.color};
+          `}
+        >
           <Content components={{ h1: Title, p: Info }} />
         </Section>
       );

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml