[gem-examples] Closed #163

mantou132 · Jun 19, 2024 · 174ebd0 · 174ebd0
1 parent 5dd40c1
commit 174ebd0
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 32 deletions.
diff --git a/packages/gem-examples/src/benchmark/manifest.json b/packages/gem-examples/src/benchmark/manifest.json
@@ -0,0 +1,3 @@
+{
+  "group": "Performance"
+}
diff --git a/packages/gem-examples/src/cascader/manifest.json b/packages/gem-examples/src/cascader/manifest.json
@@ -0,0 +1,3 @@
+{
+  "group": "Duoyun UI"
+}
diff --git a/packages/gem-examples/src/console/manifest.json b/packages/gem-examples/src/console/manifest.json
@@ -0,0 +1,3 @@
+{
+  "group": "Duoyun UI"
+}
diff --git a/packages/gem-examples/src/elements/env.ts b/packages/gem-examples/src/elements/env.ts
@@ -1,4 +1,4 @@
 type Manifest = typeof import('../hello-world/manifest.json');
 
-export const METADATA = process.env.METADATA as unknown as Record<string, Partial<Manifest>>;
-export const EXAMPLES = process.env.EXAMPLES as unknown as string[];
+export const EXAMPLES = process.env.EXAMPLES as unknown as Partial<Manifest>[];
+export const VERSION = process.env.VERSION as unknown as string;
diff --git a/packages/gem-examples/src/elements/nav.ts b/packages/gem-examples/src/elements/nav.ts
@@ -1,11 +1,9 @@
-import { GemElement, html, customElement, version } from '@mantou/gem';
+import { GemElement, html, customElement } from '@mantou/gem';
 
-import { METADATA, EXAMPLES } from './env';
+import { EXAMPLES, VERSION } from './env';
 
 const getGitPageUrl = (name: string) => `../${name}/`;
 
-const getName = (name: string) => (METADATA[name].name || name).replace('-', ' ');
-
 @customElement('gem-examples-nav')
 export class Nav extends GemElement {
   mounted = () => {
@@ -26,7 +24,7 @@ export class Nav extends GemElement {
           margin-bottom: 1em;
           padding: 0 2em;
         }
-        .name {
+        .title {
           font-size: 1.2em;
         }
         .version {
@@ -39,6 +37,14 @@ export class Nav extends GemElement {
         li {
           display: contents;
         }
+        .group-title {
+          margin-block-start: 1.5em;
+          padding: 0.5em 2em;
+          opacity: 0.3;
+          span {
+            font-size: 0.875em;
+          }
+        }
         a {
           padding: 0.5em 2em;
           display: block;
@@ -57,17 +63,30 @@ export class Nav extends GemElement {
         }
       </style>
       <a class="header" href="https://github.com/mantou132/gem" target="_blank">
-        <div class="name">Gem Examples</div>
-        <div class="version">version: ${version}</div>
+        <div class="title">Gem Examples</div>
+        <div class="version">version: ${VERSION}</div>
       </a>
       <ol>
-        ${EXAMPLES.sort((a, b) => (METADATA[a].order || 0) - (METADATA[b].order || 0)).map(
-          (name) => html`
+        ${Object.entries(
+          (Object as any).groupBy(
+            EXAMPLES.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
+            (e: any) => e.group || '',
+          ),
+        ).map(
+          ([group, examples]) => html`
             <li>
-              <a class=${location.pathname.includes(name) ? 'active' : ''} href=${getGitPageUrl(name)}>
-                <div>${getName(name)}</div>
-                <div>${METADATA[name].desc}</div>
-              </a>
+              <div class="group-title"><span>${group}</span></div>
+              <ol>
+                ${(examples as typeof EXAMPLES).map(
+                  ({ name = '' }) => html`
+                    <li>
+                      <a class=${location.pathname.includes(name) ? 'active' : ''} href=${getGitPageUrl(name)}>
+                        <div>${name.replace('-', ' ')}</div>
+                      </a>
+                    </li>
+                  `,
+                )}
+              </ol>
             </li>
           `,
         )}

diff --git a/packages/gem-examples/src/gesture/manifest.json b/packages/gem-examples/src/gesture/manifest.json
diff --git a/packages/gem-examples/src/hello-world/manifest.json b/packages/gem-examples/src/hello-world/manifest.json
@@ -1,5 +1,6 @@
 {
   "order": -1,
   "name": "hello world",
+  "group": "",
   "desc": ""
 }
diff --git a/packages/gem-examples/src/homepage/manifest.json b/packages/gem-examples/src/homepage/manifest.json
@@ -0,0 +1,3 @@
+{
+  "group": "Duoyun UI"
+}
diff --git a/packages/gem-examples/src/perf-demo/manifest.json b/packages/gem-examples/src/perf-demo/manifest.json
@@ -0,0 +1,3 @@
+{
+  "group": "Performance"
+}
diff --git a/packages/gem-examples/src/scope/index.ts b/packages/gem-examples/src/scope/index.ts
@@ -1,3 +1,6 @@
+/**
+ * TODO: auto add `@scope` to light dom custom element
+ */
 import { GemElement, adoptedStyle, createCSSSheet, css, customElement, html, render } from '@mantou/gem';
 
 import '../elements/layout';

diff --git a/packages/gem-examples/src/tree/manifest.json b/packages/gem-examples/src/tree/manifest.json
@@ -0,0 +1,3 @@
+{
+  "group": "Duoyun UI"
+}
diff --git a/packages/gem-examples/vite.config.ts b/packages/gem-examples/vite.config.ts
@@ -3,6 +3,8 @@ import fs from 'fs';
 import { defineConfig } from 'vite';
 import { createMpaPlugin, createPages } from 'vite-plugin-virtual-mpa';
 
+import { version } from '../gem/package.json';
+
 const examples = (fs.readdirSync('src') as string[]).filter(
   (example) => example !== 'elements' && !example.endsWith('.html') && !example.startsWith('.'),
 );
@@ -28,21 +30,16 @@ export default defineConfig({
     }),
   ],
   define: {
-    'process.env.METADATA': JSON.stringify(
-      Object.fromEntries(
-        examples.map((example) => {
-          try {
-            return [example, require(`./src/${example}/manifest.json`)];
-          } catch {
-            return [example, {}];
-          }
-        }),
-      ),
+    'process.env.VERSION': JSON.stringify(version),
+    'process.env.EXAMPLES': JSON.stringify(
+      examples.map((example) => {
+        try {
+          return { name: example, ...require(`./src/${example}/manifest.json`) };
+        } catch {
+          return { name: example };
+        }
+      }),
     ),
-    'process.env.EXAMPLES': JSON.stringify(examples),
-    'process.env.EXAMPLE': JSON.stringify('index'),
-    'process.env.FILES': JSON.stringify([]),
-    'process.env.TARGET': JSON.stringify('pages'),
   },
   resolve: {
     alias: {