Skip to content

Commit

Permalink
[gem-examples] Closed #163
Browse files Browse the repository at this point in the history
  • Loading branch information
mantou132 committed Jun 20, 2024
1 parent fa9f5a7 commit 0726cc1
Show file tree
Hide file tree
Showing 12 changed files with 67 additions and 32 deletions.
3 changes: 3 additions & 0 deletions packages/gem-examples/src/benchmark/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"group": "Performance"
}
3 changes: 3 additions & 0 deletions packages/gem-examples/src/cascader/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"group": "Duoyun UI"
}
3 changes: 3 additions & 0 deletions packages/gem-examples/src/console/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"group": "Duoyun UI"
}
4 changes: 2 additions & 2 deletions packages/gem-examples/src/elements/env.ts
Original file line number Diff line number Diff line change
@@ -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;
45 changes: 32 additions & 13 deletions packages/gem-examples/src/elements/nav.ts
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand All @@ -26,7 +24,7 @@ export class Nav extends GemElement {
margin-bottom: 1em;
padding: 0 2em;
}
.name {
.title {
font-size: 1.2em;
}
.version {
Expand All @@ -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;
Expand All @@ -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>
`,
)}
Expand Down
3 changes: 0 additions & 3 deletions packages/gem-examples/src/gesture/manifest.json

This file was deleted.

1 change: 1 addition & 0 deletions packages/gem-examples/src/hello-world/manifest.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"order": -1,
"name": "hello world",
"group": "",
"desc": ""
}
3 changes: 3 additions & 0 deletions packages/gem-examples/src/homepage/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"group": "Duoyun UI"
}
3 changes: 3 additions & 0 deletions packages/gem-examples/src/perf-demo/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"group": "Performance"
}
3 changes: 3 additions & 0 deletions packages/gem-examples/src/scope/index.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
3 changes: 3 additions & 0 deletions packages/gem-examples/src/tree/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"group": "Duoyun UI"
}
25 changes: 11 additions & 14 deletions packages/gem-examples/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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('.'),
);
Expand All @@ -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: {
Expand Down

0 comments on commit 0726cc1

Please sign in to comment.