@umami/shiso 0.55.0 → 0.61.0

package/vite.config.ts

@@ -0,0 +1,342 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import { defineConfig, type Plugin } from 'vite';
+import { shisoMdx } from './mdx.config.ts';
+import { generateIconRegistry } from './scripts/generate-icon-registry.mjs';
+import { shisoLastModified } from './scripts/generate-last-modified.mjs';
+import { generateSearchIndex } from './scripts/generate-search-index.mjs';
+import { createDocsConfigModule } from './scripts/vite-docs-config.mjs';
+import type { DocsConfig } from './src/lib/types.ts';
+
+/**
+ * Keeps src/lib/icon-registry.generated.ts in sync with the `icon="name"` values
+ * used in content, so string icon names resolve without bundling all of lucide.
+ */
+function shisoIconRegistry(getDocsConfig: () => DocsConfig, root: string, output: string): Plugin {
+  return {
+    name: 'shiso-icon-registry',
+    async buildStart() {
+      const { unknown } = await generateIconRegistry({ config: getDocsConfig(), root, output });
+
+      if (unknown.length) {
+        this.warn(`Unknown icon names (not in lucide): ${unknown.join(', ')}`);
+      }
+    },
+    async handleHotUpdate({ file }) {
+      if (/\.(md|mdx|tsx)$/.test(file) || file.endsWith('docs.json')) {
+        await generateIconRegistry({ config: getDocsConfig(), root, output });
+      }
+    },
+  };
+}
+
+/**
+ * Keeps src/lib/search-index.generated.ts in sync with content, so the search
+ * dialog can query page text without a server.
+ */
+function shisoSearchIndex(getDocsConfig: () => DocsConfig, root: string, output: string): Plugin {
+  return {
+    name: 'shiso-search-index',
+    async buildStart() {
+      await generateSearchIndex({ config: getDocsConfig(), root, output });
+    },
+    async handleHotUpdate({ file }) {
+      if (/\.(md|mdx)$/.test(file) || file.endsWith('docs.json')) {
+        await generateSearchIndex({ config: getDocsConfig(), root, output });
+      }
+    },
+  };
+}
+
+/**
+ * Injects site-level metadata from docs.json into index.html: the fallback
+ * title, favicon, and theme color CSS variables.
+ *
+ * The title/description defaults are wrapped in marker comments because
+ * prerendered pages supply their own (src/lib/head.ts) and the duplicates have
+ * to be removed. Deleting a delimited block is deterministic; the regex over
+ * `<title>` this replaced was not.
+ */
+const DEFAULT_HEAD_OPEN = '<!--shiso-default-head-->';
+const DEFAULT_HEAD_CLOSE = '<!--/shiso-default-head-->';
+
+interface FontSpec {
+  family?: string;
+  weight?: number;
+  source?: string;
+  format?: string;
+}
+
+interface FontsOption extends FontSpec {
+  heading?: FontSpec;
+  body?: FontSpec;
+}
+
+/** Stylesheet URL for every configured Google Font (any spec without a `source`). */
+function googleFontsUrl(specs: FontSpec[]): string | null {
+  const families = new Map<string, Set<number>>();
+
+  for (const spec of specs) {
+    if (!spec.family || spec.source) {
+      continue;
+    }
+
+    const weights = families.get(spec.family) || new Set([400, 700]);
+
+    if (spec.weight) {
+      weights.add(spec.weight);
+    }
+
+    families.set(spec.family, weights);
+  }
+
+  if (!families.size) {
+    return null;
+  }
+
+  const query = [...families]
+    .map(([family, weights]) => {
+      const sorted = [...weights].sort((a, b) => a - b);
+      return `family=${family.trim().replace(/ +/g, '+')}:wght@${sorted.join(';')}`;
+    })
+    .join('&');
+
+  return `https://fonts.googleapis.com/css2?${query}&display=swap`;
+}
+
+/** @font-face rule for a self-hosted font spec. */
+function fontFaceRule(spec: FontSpec): string {
+  const format = spec.format || (spec.source?.endsWith('.woff') ? 'woff' : 'woff2');
+
+  return (
+    `@font-face{font-family:'${spec.family}';src:url(${spec.source}) format('${format}');` +
+    `font-weight:${spec.weight || 400};font-display:swap;}`
+  );
+}
+
+/** CSS custom-property overrides from `colors`, `fonts`, and `background`. */
+function buildThemeCss(config: DocsConfig): string {
+  const { colors, background } = config as {
+    colors?: { primary?: string; light?: string; dark?: string };
+    background?: {
+      image?: string | { light?: string; dark?: string };
+      color?: { light?: string; dark?: string };
+    };
+  };
+  const fonts = (config as { fonts?: FontsOption }).fonts;
+
+  const root: string[] = [];
+  const dark: string[] = [];
+  const extra: string[] = [];
+
+  const lightModePrimary = colors?.primary || colors?.dark;
+
+  if (lightModePrimary) {
+    root.push(`--primary:${lightModePrimary};`);
+    root.push(`--ring:${lightModePrimary};`);
+    root.push(`--sidebar-primary:${lightModePrimary};`);
+    root.push(`--sidebar-ring:${lightModePrimary};`);
+  }
+
+  // Shadcn uses one semantic primary token for high-emphasis actions and
+  // active accents. `dark` supplies the accent when `primary` is omitted.
+  const darkModeAccent = colors?.light || colors?.primary || colors?.dark;
+
+  if (darkModeAccent) {
+    dark.push(`--primary:${darkModeAccent};`);
+    dark.push(`--ring:${darkModeAccent};`);
+    dark.push(`--sidebar-primary:${darkModeAccent};`);
+    dark.push(`--sidebar-ring:${darkModeAccent};`);
+  }
+
+  if (fonts) {
+    const body = fonts.body?.family ? fonts.body : fonts;
+    const heading = fonts.heading?.family ? fonts.heading : fonts;
+
+    for (const spec of [fonts, fonts.heading, fonts.body]) {
+      if (spec?.family && spec.source) {
+        extra.push(fontFaceRule(spec));
+      }
+    }
+
+    if (body.family) {
+      root.push(`--font-sans:'${body.family}',system-ui,-apple-system,'Segoe UI',sans-serif;`);
+    }
+
+    if (body.weight) {
+      root.push(`--font-body-weight:${body.weight};`);
+    }
+
+    if (heading.family) {
+      root.push(
+        `--font-heading:'${heading.family}',system-ui,-apple-system,'Segoe UI',sans-serif;`,
+      );
+    }
+
+    if (heading.weight) {
+      root.push(`--font-heading-weight:${heading.weight};`);
+    }
+  }
+
+  if (background?.color?.light) {
+    root.push(`--background:${background.color.light};`);
+  }
+
+  if (background?.color?.dark) {
+    dark.push(`--background:${background.color.dark};`);
+  }
+
+  if (background?.image) {
+    const image = background.image;
+    const base = 'background-size:cover;background-attachment:fixed;background-position:center;';
+
+    if (typeof image === 'string') {
+      extra.push(`body{background-image:url(${image});${base}}`);
+    } else {
+      if (image.light) {
+        extra.push(`body{background-image:url(${image.light});${base}}`);
+      }
+
+      if (image.dark) {
+        extra.push(`[data-theme="dark"] body{background-image:url(${image.dark});${base}}`);
+      }
+    }
+  }
+
+  return [
+    root.length ? `:root{${root.join('')}}` : '',
+    dark.length ? `[data-theme="dark"]{${dark.join('')}}` : '',
+    ...extra,
+  ]
+    .filter(Boolean)
+    .join('');
+}
+
+function shisoHtml(getDocsConfig: () => DocsConfig): Plugin {
+  return {
+    name: 'shiso-html',
+    transformIndexHtml(html) {
+      const docsConfig = getDocsConfig();
+      const name = docsConfig.name?.trim();
+      const description = docsConfig.description;
+      const favicon = docsConfig.favicon;
+      const appearance = docsConfig.appearance;
+      const fonts = docsConfig.fonts;
+
+      const defaults = [
+        DEFAULT_HEAD_OPEN,
+        name ? `<title>${name}</title>` : '',
+        description ? `<meta name="description" content="${description}" />` : '',
+        DEFAULT_HEAD_CLOSE,
+      ]
+        .filter(Boolean)
+        .join('');
+
+      const tags: unknown[] = [];
+
+      if (favicon) {
+        tags.push({ tag: 'link', attrs: { rel: 'icon', href: favicon }, injectTo: 'head' });
+      }
+
+      const fontsUrl = googleFontsUrl(
+        [fonts, fonts?.heading, fonts?.body].filter(Boolean) as FontSpec[],
+      );
+
+      if (fontsUrl) {
+        tags.push(
+          {
+            tag: 'link',
+            attrs: { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+            injectTo: 'head',
+          },
+          {
+            tag: 'link',
+            attrs: { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
+            injectTo: 'head',
+          },
+          { tag: 'link', attrs: { rel: 'stylesheet', href: fontsUrl }, injectTo: 'head' },
+        );
+      }
+
+      const themeCss = buildThemeCss(docsConfig);
+
+      if (themeCss) {
+        tags.push({ tag: 'style', children: themeCss, injectTo: 'head' });
+      }
+
+      // Fill the appearance placeholders in the theme init script.
+      const withAppearance = html
+        .replace('__SHISO_APPEARANCE_DEFAULT__', appearance?.default || 'system')
+        .replace('__SHISO_APPEARANCE_STRICT__', appearance?.strict === true ? 'true' : 'false');
+
+      // The marker block goes in as raw HTML rather than as a `tags` entry so
+      // the comments survive: Vite's tag descriptors cannot express them.
+      return {
+        html: withAppearance.replace('</head>', `${defaults}\n</head>`),
+        tags: tags as never,
+      };
+    },
+  };
+}
+
+const PACKAGE_ROOT = fileURLToPath(new URL('.', import.meta.url));
+const MDX_REACT_ENTRY = fileURLToPath(import.meta.resolve('@mdx-js/react'));
+const LUCIDE_REACT_ENTRY = path.join(
+  path.dirname(fileURLToPath(import.meta.resolve('lucide-react/package.json'))),
+  'dist/esm/lucide-react.mjs',
+);
+
+export default defineConfig(async () => {
+  const projectRoot = process.cwd();
+  const generatedRoot = path.join(projectRoot, '.shiso');
+  const configModule = await createDocsConfigModule({
+    root: projectRoot,
+  });
+  const getDocsConfig = configModule.getConfig as () => DocsConfig;
+
+  return {
+    plugins: [
+      configModule.plugin,
+      tailwindcss(),
+      shisoIconRegistry(
+        getDocsConfig,
+        projectRoot,
+        path.join(generatedRoot, 'icon-registry.generated.ts'),
+      ),
+      shisoLastModified({
+        root: projectRoot,
+        output: path.join(generatedRoot, 'last-modified.ts'),
+      }),
+      shisoSearchIndex(
+        getDocsConfig,
+        projectRoot,
+        path.join(generatedRoot, 'search-index.generated.ts'),
+      ),
+      shisoHtml(getDocsConfig),
+      shisoMdx(),
+      react({ include: /\.(mdx|md|tsx|ts|jsx|js)$/ }),
+    ],
+    resolve: {
+      alias: [
+        { find: '@mdx-js/react', replacement: MDX_REACT_ENTRY },
+        { find: 'lucide-react', replacement: LUCIDE_REACT_ENTRY },
+        {
+          find: '@/lib/icon-registry.generated',
+          replacement: path.join(generatedRoot, 'icon-registry.generated.ts'),
+        },
+        {
+          find: '@/lib/search-index.generated',
+          replacement: path.join(generatedRoot, 'search-index.generated.ts'),
+        },
+        {
+          find: '@/generated/last-modified',
+          replacement: path.join(generatedRoot, 'last-modified.ts'),
+        },
+        { find: '@', replacement: path.join(PACKAGE_ROOT, 'src') },
+      ],
+      dedupe: ['react', 'react-dom'],
+    },
+  };
+});

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 Umami Software, Inc. <hello@umami.is>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

package/dist/index.css

@@ -1,189 +0,0 @@
-/* virtual-css:css:e01d9571088b882a03b91eb2755da783 */
-.PageLinks_links__NmJhO {
-  position: sticky;
-  top: var(--spacing-8);
-  height: max-content;
-  min-width: 240px;
-}
-.PageLinks_links__NmJhO a.PageLinks_link__OGI3M {
-  display: block;
-  color: var(--font-color-muted);
-  font-size: var(--font-size);
-  text-decoration: none;
-}
-.PageLinks_links__NmJhO a.PageLinks_link__OGI3M:hover {
-  color: var(--primary-color);
-  text-decoration: none;
-}
-.PageLinks_indent-1__M2IxZ {
-  margin-left: 0;
-}
-.PageLinks_indent-2__YTBlM {
-  margin-left: 0;
-}
-.PageLinks_indent-3__YzJlZ {
-  margin-left: 10px;
-}
-.PageLinks_indent-4__NDg3Z {
-  margin-left: 20px;
-}
-.PageLinks_indent-5__ZTE4M {
-  margin-left: 30px;
-}
-.PageLinks_indent-6__NTRjM {
-  margin-left: 40px;
-}
-.PageLinks_links__NmJhO a.PageLinks_selected__ZjhkN {
-  color: var(--primary-color);
-}
-
-/* virtual-css:css:2dd9c1a25bf05a14c9a7ab7ce1da6aef */
-.CodeBlock_container__OGZlM {
-  position: relative;
-  background: var(--background-color);
-  border: 1px solid var(--base-color-1);
-  padding: var(--spacing-5);
-  border-radius: 6px;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-pre.CodeBlock_container__OGZlM code {
-  font-family: var(--font-family-code);
-  color: var(--font-color);
-  font-size: var(--font-size);
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-.CodeBlock_button__Y2Y2Z {
-  border: 0;
-  position: absolute;
-  right: var(--spacing-5);
-  top: var(--spacing-5);
-  cursor: pointer;
-  background: transparent;
-}
-.CodeBlock_copy__NWI2Y {
-  color: var(--base-color-4);
-}
-.CodeBlock_copy__NWI2Y:hover {
-  color: var(--base-color-1);
-}
-.CodeBlock_check__YzQzO {
-  color: var(--success-color);
-}
-
-/* virtual-css:css:62c31e195181c97259fa56b13d20ea6d */
-.SideNav_nav__YjQxN {
-  overflow-y: auto;
-  min-width: 240px;
-}
-.SideNav_nav__YjQxN::-webkit-scrollbar {
-  width: 15px;
-  background: transparent;
-  display: none;
-}
-.SideNav_nav__YjQxN:hover::-webkit-scrollbar {
-  display: block;
-}
-.SideNav_nav__YjQxN::-webkit-scrollbar-track {
-  border: 7px solid rgba(0, 0, 0, 0);
-  background-color: var(--border-color);
-  background-clip: padding-box;
-}
-.SideNav_nav__YjQxN::-webkit-scrollbar-thumb {
-  border: 7px solid rgba(0, 0, 0, 0);
-  background-color: var(--font-color);
-  background-clip: padding-box;
-}
-.SideNav_nav__YjQxN::-webkit-scrollbar-thumb:hover {
-  border: 5px solid rgba(0, 0, 0, 0);
-  background-color: var(--font-color);
-  background-clip: padding-box;
-}
-.SideNav_nav__YjQxN.SideNav_sticky__ZTI5N {
-  position: sticky;
-  top: var(--spacing-8);
-}
-.SideNav_nav__YjQxN .SideNav_item__NWU0N {
-  color: var(--font-color-muted);
-  border-left: 1px solid var(--border-color);
-  padding: var(--padding);
-  text-decoration: none;
-}
-.SideNav_nav__YjQxN .SideNav_item__NWU0N:hover {
-  color: var(--font-color);
-}
-.SideNav_nav__YjQxN .SideNav_item__NWU0N.SideNav_selected__OTY3O {
-  color: var(--font-color);
-  font-weight: 500;
-  border-color: var(--primary-color);
-  background-color: var(--highlight-color);
-}
-.SideNav_header__NDZjN {
-  padding: var(--padding-y) 0;
-}
-
-/* virtual-css:css:4d0931c84adfae5533b067ea199724f8 */
-.Markdown_content__YzRmN {
-  font-size: 16px;
-  margin-bottom: 60px;
-}
-.Markdown_content__YzRmN > p {
-  color: var(--font-color);
-  line-height: 1.8;
-}
-.Markdown_content__YzRmN a {
-  color: var(--font-color);
-  font-weight: 600;
-  text-decoration: underline var(--border-color);
-  text-underline-offset: 4px;
-}
-.Markdown_content__YzRmN a:hover {
-  color: var(--font-color);
-  text-decoration: underline var(--primary-color);
-}
-.Markdown_content__YzRmN img {
-  display: block;
-  max-width: 100%;
-  margin: 4rem auto;
-  box-shadow: 2px 2px 16px rgba(0, 0, 0, .1);
-}
-.Markdown_content__YzRmN h1 {
-  font-size: var(--font-size-8);
-  letter-spacing: var(--letter-spacing-1);
-  margin: 0 0 var(--spacing-4) 0;
-}
-.Markdown_content__YzRmN h2 {
-  font-size: var(--font-size-6);
-  letter-spacing: var(--letter-spacing-1);
-  margin: var(--spacing-8) 0 var(--spacing-4) 0;
-}
-.Markdown_content__YzRmN h3 {
-  font-size: var(--font-size-5);
-  letter-spacing: var(--letter-spacing-1);
-  margin: var(--spacing-7) 0 var(--spacing-4) 0;
-}
-.Markdown_content__YzRmN *[id] {
-  scroll-margin-top: var(--spacing-4);
-}
-.Markdown_content__YzRmN ul {
-  list-style: disc;
-}
-.Markdown_content__YzRmN ol {
-  list-style: decimal;
-}
-.Markdown_content__YzRmN pre {
-  margin: var(--spacing-5) 0;
-}
-.Markdown_content__YzRmN code {
-  font-size: 14px;
-}
-.Markdown_content__YzRmN code:not([class]) {
-  font-family: var(--font-family-code);
-  color: var(--font-color);
-  padding: var(--spacing-1);
-  border-radius: var(--border-radius);
-  background: var(--base-color-1);
-  font-weight: var(--font-weight-bold);
-}

package/dist/index.d.ts

@@ -1,57 +0,0 @@
-// Generated by dts-bundle v0.7.3
-// Dependencies for this module:
-//   ../../react
-//   ../../@/lib/types
-
-declare module '@umami/shiso' {
-    import '@umami/react-zen/styles.css';
-    import 'highlight.js/styles/github-dark.css';
-    import { Blog } from '@umami/shiso/Blog';
-    import { Docs } from '@umami/shiso/Docs';
-    import { Shiso } from '@umami/shiso/Shiso';
-    export { Blog, Docs, Shiso };
-}
-
-declare module '@umami/shiso/Blog' {
-    export interface BlogProps {
-        title: string;
-        description?: string;
-        code: string;
-        author?: string;
-        date?: string;
-        image?: string;
-        anchors?: any[];
-        backUrl?: string;
-    }
-    export function Blog({ title, code, author, date, image, anchors, backUrl }: BlogProps): import("react").JSX.Element;
-}
-
-declare module '@umami/shiso/Docs' {
-    export function Docs({ content, config }: {
-        content: any;
-        config: any;
-    }): import("react").JSX.Element;
-}
-
-declare module '@umami/shiso/Shiso' {
-    import { JSX } from 'react';
-    import type { ShisoConfig, ShisoContent } from '@/lib/types';
-    export interface ShisoProps {
-        type: string;
-        config: ShisoConfig;
-        content: ShisoContent;
-        components?: {
-            [key: string]: any;
-        };
-        templates?: {
-            [key: string]: any;
-        };
-    }
-    export type ShisoTemplateComponent = ({ content, config, }: {
-        content: any;
-        config: ShisoConfig;
-    }) => JSX.Element;
-    export const ShisoContext: import("react").Context<any>;
-    export function Shiso({ type, config, content, components, templates }: ShisoProps): JSX.Element;
-}
-