@umami/shiso 0.1.0

package/dist/index.mjs

@@ -0,0 +1,302 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// css-modules:E:\dev\umami-shiso\src\components\blog\Blog.module.css
+var Blog_default = {};
+
+// src/components/Markdown.tsx
+import { MDXRemote } from "next-mdx-remote/rsc";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+import Link from "next/link";
+
+// src/components/docs/CodeBlock.tsx
+import { useState, useRef } from "react";
+import { Icon, Icons } from "@umami/react-zen";
+
+// css-modules:E:\dev\umami-shiso\src\components\docs\CodeBlock.module.css
+var CodeBlock_default = { "container": "CodeBlock_container__ZWQ3M", "button": "CodeBlock_button__YzlkO", "copy": "CodeBlock_copy__MGRjZ", "check": "CodeBlock_check__YTZlN" };
+
+// src/components/docs/CodeBlock.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CodeBlock(props) {
+  const textInput = useRef(null);
+  const [copied, setCopied] = useState(false);
+  const handleCopy = () => {
+    setCopied(true);
+    navigator?.clipboard?.writeText(textInput?.current?.textContent);
+    setTimeout(() => {
+      setCopied(false);
+    }, 1e3);
+  };
+  return /* @__PURE__ */ jsxs("pre", { ref: textInput, className: CodeBlock_default.container, children: [
+    props.children,
+    /* @__PURE__ */ jsx("button", { "aria-label": "Copy code", className: CodeBlock_default.button, onClick: handleCopy, children: /* @__PURE__ */ jsx(Icon, { size: "sm", className: copied ? CodeBlock_default.check : CodeBlock_default.copy, children: copied ? /* @__PURE__ */ jsx(Icons.Check, {}) : /* @__PURE__ */ jsx(Icons.Copy, {}) }) })
+  ] });
+}
+
+// src/components/Markdown.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var options = {
+  mdxOptions: {
+    remarkPlugins: [remarkGfm],
+    rehypePlugins: [rehypeHighlight]
+  }
+};
+var components = {
+  a: (props) => /* @__PURE__ */ jsx2(Link, { ...props }),
+  pre: CodeBlock
+};
+function Markdown({ children }) {
+  return /* @__PURE__ */ jsx2(MDXRemote, { source: children, components, options });
+}
+
+// src/components/blog/Blog.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Blog({ content }) {
+  return /* @__PURE__ */ jsx3("div", { className: Blog_default.blog, children: /* @__PURE__ */ jsx3("div", { className: Blog_default.main, children: /* @__PURE__ */ jsxs2("div", { className: Blog_default.content, children: [
+    /* @__PURE__ */ jsx3("h1", { children: content?.meta?.title }),
+    /* @__PURE__ */ jsx3("p", { className: Blog_default.description, children: content?.meta?.description }),
+    /* @__PURE__ */ jsx3(Markdown, { children: content?.body })
+  ] }) }) });
+}
+
+// src/components/docs/Docs.tsx
+import { Grid, Box as Box3, Heading as Heading2 } from "@umami/react-zen";
+
+// src/components/docs/PageLinks.tsx
+import { useEffect, useState as useState2 } from "react";
+import { Column, Text } from "@umami/react-zen";
+import classNames from "classnames";
+
+// css-modules:E:\dev\umami-shiso\src\components\docs\PageLinks.module.css
+var PageLinks_default = { "title": "PageLinks_title__NDFiN", "links": "PageLinks_links__NDRmO", "indent-1": "PageLinks_indent-1__ODFiY", "indent-2": "PageLinks_indent-2__OTFkY", "indent-3": "PageLinks_indent-3__ZGM3O", "indent-4": "PageLinks_indent-4__Y2U0M", "indent-5": "PageLinks_indent-5__MzUwM", "indent-6": "PageLinks_indent-6__ZTQ4M", "selected": "PageLinks_selected__MDVlN" };
+
+// src/components/docs/PageLinks.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function PageLinks({ items, offset = 0 }) {
+  const [hash, setHash] = useState2(items?.[0]?.id);
+  useEffect(() => {
+    const callback = () => {
+      const x = [...items].reverse().find(({ id }) => {
+        const rect = document.getElementById(id)?.getBoundingClientRect();
+        return rect && rect.top <= offset;
+      });
+      if (x) setHash(x.id);
+    };
+    window.addEventListener("scroll", callback, false);
+    return () => {
+      window.removeEventListener("scroll", callback, false);
+    };
+  }, []);
+  if (!items?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs3(Column, { gap: "3", minWidth: "240px", className: PageLinks_default.links, children: [
+    /* @__PURE__ */ jsx4(Text, { size: "2", weight: "bold", children: "On this page" }),
+    items.map(({ name, id, size }) => {
+      return /* @__PURE__ */ jsx4(
+        "a",
+        {
+          href: `#${id}`,
+          className: classNames(PageLinks_default[`indent-${size}`], { [PageLinks_default.selected]: hash === id }),
+          children: name
+        },
+        id
+      );
+    })
+  ] });
+}
+
+// src/components/docs/SideNav.tsx
+import { Box, List, ListItem, ListSection } from "@umami/react-zen";
+import classNames2 from "classnames";
+import { usePathname } from "next/navigation";
+import Link2 from "next/link";
+
+// css-modules:E:\dev\umami-shiso\src\components\docs\SideNav.module.css
+var SideNav_default = { "nav": "SideNav_nav__NmRlZ", "item": "SideNav_item__ZmExN", "selected": "SideNav_selected__Y2U0Y", "items": "SideNav_items__MWIxZ" };
+
+// src/components/docs/SideNav.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function SideNav({ tabs, navigation }) {
+  const pathname = usePathname();
+  const tab = tabs.find(({ url, id }) => id !== "docs" ? pathname.startsWith(url) : false);
+  const menu = navigation[tab?.id || "docs"];
+  return /* @__PURE__ */ jsx5(Box, { className: SideNav_default.nav, children: /* @__PURE__ */ jsx5(List, { items: navigation, children: menu.map(({ group, pages }) => {
+    return /* @__PURE__ */ jsx5(ListSection, { title: group, className: SideNav_default.items, children: pages.map(({ label: text, url }, index) => {
+      return /* @__PURE__ */ jsx5(
+        ListItem,
+        {
+          className: classNames2(SideNav_default.item, {
+            [SideNav_default.selected]: url === pathname
+          }),
+          children: /* @__PURE__ */ jsx5(Link2, { href: url, prefetch: false, children: text })
+        },
+        index
+      );
+    }) }, group);
+  }) }) });
+}
+
+// src/components/docs/TopNav.tsx
+import Link3 from "next/link";
+import { usePathname as usePathname2 } from "next/navigation";
+import { Tabs, TabList, Tab } from "@umami/react-zen";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function TopNav({ tabs }) {
+  const pathname = usePathname2();
+  const tab = tabs.find(({ id, url }) => id !== "docs" ? pathname.startsWith(url) : false);
+  const selected = tab?.id || "docs";
+  return /* @__PURE__ */ jsx6(Tabs, { selectedKey: selected, children: /* @__PURE__ */ jsx6(TabList, { items: tabs, children: ({ id, label, url }) => {
+    return /* @__PURE__ */ jsx6(Tab, { id, children: /* @__PURE__ */ jsx6(Link3, { href: url, children: label }) });
+  } }) });
+}
+
+// src/components/docs/ContentArea.tsx
+import { Heading, Box as Box2, Text as Text2 } from "@umami/react-zen";
+
+// css-modules:E:\dev\umami-shiso\src\components\docs\ContentArea.module.css
+var ContentArea_default = { "content": "ContentArea_content__YzBjN" };
+
+// src/components/docs/ContentArea.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function ContentArea({ title, description, group, body }) {
+  return /* @__PURE__ */ jsxs4(Box2, { flexGrow: 1, children: [
+    /* @__PURE__ */ jsx7(Text2, { color: "primary", weight: "bold", children: group }),
+    /* @__PURE__ */ jsx7(Heading, { size: "8", as: "h1", children: title }),
+    /* @__PURE__ */ jsx7(Text2, { type: "muted", children: description }),
+    /* @__PURE__ */ jsx7(Box2, { className: ContentArea_default.content, children: /* @__PURE__ */ jsx7(Markdown, { children: body }) })
+  ] });
+}
+
+// src/components/docs/Docs.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function Docs({ content, config }) {
+  if (!content) {
+    return /* @__PURE__ */ jsx8(Heading2, { size: "6", children: "Page not found" });
+  }
+  const { tabs, navigation } = config?.docs || {};
+  content.group = Object.keys(navigation).reduce((name, key) => {
+    if (!name) {
+      return navigation[key]?.find((section) => {
+        return section.pages.find(
+          (page) => page.url === `/docs/${content.id}` || page.url === `/docs` && content.id === "index"
+        );
+      })?.group;
+    }
+    return name;
+  }, null);
+  console.log({ config, tabs, content });
+  return /* @__PURE__ */ jsxs5(Box3, { flexGrow: "1", children: [
+    tabs && /* @__PURE__ */ jsx8(TopNav, { tabs }),
+    /* @__PURE__ */ jsxs5(Grid, { gap: "6", columns: "240px 1fr 240px", children: [
+      /* @__PURE__ */ jsx8(SideNav, { tabs, navigation }),
+      /* @__PURE__ */ jsx8(
+        ContentArea,
+        {
+          title: content?.meta?.title,
+          body: content?.body,
+          group: content?.group,
+          description: content?.meta?.description
+        }
+      ),
+      /* @__PURE__ */ jsx8(PageLinks, { items: content?.anchors, offset: 150 })
+    ] })
+  ] });
+}
+
+// src/lib/next.tsx
+var next_exports = {};
+__export(next_exports, {
+  default: () => next_default
+});
+import path2 from "node:path";
+
+// src/lib/content.ts
+import { cache } from "react";
+import matter from "gray-matter";
+import recursive from "recursive-readdir";
+import { firstBy } from "thenby";
+import fs from "node:fs/promises";
+import path from "node:path";
+var getFiles = cache(async (folder) => {
+  const dir = path.resolve(folder);
+  const files = await recursive(dir);
+  return Promise.all(
+    files.filter((file) => path.extname(file) === ".mdx").map(async (file) => {
+      const postContent = await fs.readFile(file, "utf8");
+      const { data, content } = matter(postContent);
+      const id = file.replace(".mdx", "").replace(dir, "").replace(/\\/g, "/").replace(/^\//, "");
+      const anchors = [];
+      const body = content.split("\n").map((line) => {
+        const match = line.match(/(#+)\s+(.*)/);
+        if (match) {
+          const [, num, name] = match;
+          const id2 = name.toLowerCase().replace(/\s+/g, "-");
+          const size = num.length;
+          anchors.push({ name, id: id2, size });
+          return `<h${size} id="${id2}">${name.replace(/\{|\}/g, "")}</h${size}>`;
+        }
+        return line;
+      }).join("\n");
+      return {
+        meta: data,
+        id,
+        body,
+        anchors
+      };
+    })
+  ).then((posts) => posts.sort(firstBy("date", "desc")));
+});
+async function getFile(id, folder) {
+  const files = await getFiles(folder);
+  return files.find((file) => file?.id === id);
+}
+async function getContent(params, folder) {
+  const { id = [] } = params;
+  const name = id?.length ? id.join("/") : "index";
+  return getFile(name, folder);
+}
+
+// src/lib/next.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var DEFAULT_CONTENT_DIR = "./src/content";
+var components2 = {
+  docs: Docs,
+  blog: Blog
+};
+var next_default = (config) => {
+  const { contentDir = DEFAULT_CONTENT_DIR } = config || {};
+  const getMetadata = ({ title }) => {
+    return async ({ params }) => {
+      const content = await getContent(await params, contentDir);
+      return {
+        title: {
+          absolute: `${content?.meta?.title} \u2013 ${title}`,
+          default: title
+        }
+      };
+    };
+  };
+  const renderPage = ({ type }) => {
+    const folder = path2.resolve(process.cwd(), contentDir, type);
+    return async ({ params }) => {
+      const content = await getContent(await params, folder);
+      const Component = components2[type];
+      return Component && /* @__PURE__ */ jsx9(Component, { content, config });
+    };
+  };
+  return {
+    getMetadata,
+    renderPage
+  };
+};
+export {
+  Blog,
+  Docs,
+  next_exports as next
+};

package/dts.mjs

@@ -0,0 +1,8 @@
+import dts from 'dts-bundle';
+import path from 'node:path';
+
+dts.bundle({
+  name: '@umami/shiso',
+  main: path.resolve('./types/components/index.d.ts'),
+  out: path.resolve('./dist/index.d.ts'),
+});

package/esbuild.mjs

@@ -0,0 +1,36 @@
+import esbuild from 'esbuild';
+import cssModules from '@umami/esbuild-plugin-css-modules';
+import pkg from './package.json' with { type: 'json' };
+
+const { dependencies } = pkg;
+
+const config = {
+  entryPoints: ['src/index.ts'],
+  bundle: true,
+  external: Object.keys(dependencies),
+  jsx: 'automatic',
+  platform: 'node',
+  plugins: [cssModules()],
+};
+
+esbuild
+  .build({
+    ...config,
+    outfile: 'dist/index.js',
+    format: 'cjs',
+  })
+  .catch(e => {
+    console.error(e);
+    process.exit(1);
+  });
+
+esbuild
+  .build({
+    ...config,
+    outfile: 'dist/index.mjs',
+    format: 'esm',
+  })
+  .catch(e => {
+    console.error(e);
+    process.exit(1);
+  });

package/next.config.ts

@@ -0,0 +1,15 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
+  reactStrictMode: false,
+  output: 'standalone',
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+};
+
+export default nextConfig;

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@umami/shiso",
+  "version": "0.1.0",
+  "description": "A content layer for Next.js",
+  "homepage": "https://umami.is/shiso",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umami-software/shiso.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "next dev --port 3100",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "icons": "svgr ./src/assets --out-dir ./src/components/icons --typescript",
+    "types": "tsc -p tsconfig.build.json",
+    "esbuild": "node esbuild.mjs",
+    "dts": "node dts.mjs",
+    "bundle": "npm-run-all types dts esbuild"
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "prettier --write",
+      "eslint"
+    ],
+    "**/*.css": [
+      "stylelint --fix",
+      "prettier --write"
+    ],
+    "**/*.json": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@mdx-js/loader": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
+    "@umami/react-zen": "^0.27.0",
+    "classnames": "^2.5.1",
+    "glob": "^10.3.10",
+    "gray-matter": "^4.0.3",
+    "highlight.js": "^11.11.0",
+    "next": "15.1.0",
+    "next-mdx-remote": "^5.0.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "recursive-readdir": "^2.2.3",
+    "rehype-highlight": "^7.0.1",
+    "remark-gfm": "^4.0.0",
+    "thenby": "^1.3.4"
+  },
+  "devDependencies": {
+    "@svgr/cli": "^8.1.0",
+    "@types/css-modules": "^1.0.5",
+    "@types/mdx": "^2.0.11",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@umami/esbuild-plugin-css-modules": "^0.4.0",
+    "dts-bundle": "^0.7.3",
+    "esbuild": "^0.24.0",
+    "esbuild-plugin-css-modules": "^0.3.0",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.2",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "husky": "^9.1.1",
+    "lint-staged": "^15.2.7",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.2.5",
+    "stylelint": "^15.10.1",
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-config-recommended": "^14.0.1",
+    "typescript": "^5"
+  }
+}

package/public/leaf.svg

@@ -0,0 +1 @@
+<svg id="Glyph_Icon" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Glyph Icon"><path d="m55.221 10.79c-.555-.242-1.182-.085-1.564.39-4.738 5.882-18.607 6.77-22.746 6.903-1.002.032-2.035.155-3.067.366-20.567 4.187-20.255 19.314-19.671 23.85.097.75.601 1.362 1.315 1.599.708.236 1.469.045 1.988-.492 2.403-2.49 7.671-6.969 15.952-8.985 3.422-.833 6.668-2.36 9.557-4.111-3.375 2.564-7.731 5.332-13.243 7.92-5.526 2.596-9.586 7.096-11.075 8.909-.339.413-.493.953-.423 1.483.072.536.368 1.023.812 1.338 1.414 1.004 3.099 1.813 5.006 2.408 2.053.638 4.168.954 6.286.954 4.28 0 8.564-1.287 12.329-3.782 14.464-9.588 18.439-31.031 19.312-37.373.082-.588-.227-1.141-.768-1.377z"/></svg>

package/src/app/Footer.tsx

@@ -0,0 +1,14 @@
+import { Box, Text } from '@umami/react-zen';
+
+export function Footer() {
+  return (
+    <Box as="footer" paddingY="8">
+      <Text align="center" as="div">
+        Built by{' '}
+        <a href="https://umami.is">
+          <strong>umami</strong>
+        </a>
+      </Text>
+    </Box>
+  );
+}

package/src/app/Header.tsx

@@ -0,0 +1,14 @@
+import { Row, Text } from '@umami/react-zen';
+import Link from 'next/link';
+
+export function Header() {
+  return (
+    <Row paddingY="5" gap="5" alignItems="center">
+      <Text size="5" weight="bold" spacing="1" asChild>
+        <Link href="/">shiso</Link>
+      </Text>
+      <Link href="/docs">docs</Link>
+      <Link href="/blog">blog</Link>
+    </Row>
+  );
+}

package/src/app/blog/[[...id]]/page.tsx

@@ -0,0 +1,8 @@
+import shiso from '@/lib/next';
+import config from '@/shiso.config.json';
+
+const { getMetadata, renderPage } = shiso(config);
+
+export const generateMetadata = getMetadata({ title: 'SHISO' });
+
+export default renderPage({ type: 'blog' });

package/src/app/docs/[[...id]]/page.tsx

@@ -0,0 +1,8 @@
+import shiso from '@/lib/next';
+import config from '@/shiso.config.json';
+
+const { getMetadata, renderPage } = shiso(config);
+
+export const generateMetadata = getMetadata({ title: 'SHISO' });
+
+export default renderPage({ type: 'docs' });

package/src/app/layout.tsx

@@ -0,0 +1,41 @@
+import { ReactNode, Suspense } from 'react';
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import { Container, Column } from '@umami/react-zen';
+import { Header } from './Header';
+import { Footer } from './Footer';
+import '@umami/react-zen/dist/styles.css';
+import 'highlight.js/styles/github-dark.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'Shiso',
+  description: 'MDX powered content',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <head>
+        <title>shiso</title>
+        <link rel="icon" type="image/png" href="/leaf.png" />
+      </head>
+      <body className={inter.className}>
+        <Suspense>
+          <Container>
+            <Column height="100vh" className="ohhyeaaaaa">
+              <Header />
+              {children}
+              <Footer />
+            </Column>
+          </Container>
+        </Suspense>
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,25 @@
+import { Heading, Text, Row, Column, Icon, Button } from '@umami/react-zen';
+import Link from 'next/link';
+import Leaf from '@/components/icons/Leaf';
+
+export default function Home() {
+  return (
+    <Column gap="3" style={{ margin: '0 auto' }} flexGrow={1}>
+      <Heading size="5">shiso</Heading>
+      <Icon size="lg">
+        <Leaf />
+      </Icon>
+      <Text as="p" type="muted">
+        Publish content using MDX.
+      </Text>
+      <Row gap="3">
+        <Button variant="primary" asChild>
+          <Link href="/docs">Get started</Link>
+        </Button>
+        <Button asChild>
+          <Link href="https://github.com/umami-software/shiso">View code</Link>
+        </Button>
+      </Row>
+    </Column>
+  );
+}

package/src/assets/leaf.svg

@@ -0,0 +1 @@
+<svg id="Glyph_Icon" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Glyph Icon"><path d="m55.221 10.79c-.555-.242-1.182-.085-1.564.39-4.738 5.882-18.607 6.77-22.746 6.903-1.002.032-2.035.155-3.067.366-20.567 4.187-20.255 19.314-19.671 23.85.097.75.601 1.362 1.315 1.599.708.236 1.469.045 1.988-.492 2.403-2.49 7.671-6.969 15.952-8.985 3.422-.833 6.668-2.36 9.557-4.111-3.375 2.564-7.731 5.332-13.243 7.92-5.526 2.596-9.586 7.096-11.075 8.909-.339.413-.493.953-.423 1.483.072.536.368 1.023.812 1.338 1.414 1.004 3.099 1.813 5.006 2.408 2.053.638 4.168.954 6.286.954 4.28 0 8.564-1.287 12.329-3.782 14.464-9.588 18.439-31.031 19.312-37.373.082-.588-.227-1.141-.768-1.377z"/></svg>

package/src/components/Footer.tsx

@@ -0,0 +1 @@
+export default function Footer() {}

package/src/components/Markdown.tsx

@@ -0,0 +1,21 @@
+import { MDXRemote } from 'next-mdx-remote/rsc';
+import remarkGfm from 'remark-gfm';
+import rehypeHighlight from 'rehype-highlight';
+import Link, { LinkProps } from 'next/link';
+import { CodeBlock } from '@/components/docs/CodeBlock';
+
+const options = {
+  mdxOptions: {
+    remarkPlugins: [remarkGfm],
+    rehypePlugins: [rehypeHighlight],
+  },
+};
+
+const components = {
+  a: (props: any) => <Link {...(props as LinkProps)} />,
+  pre: CodeBlock,
+};
+
+export default function Markdown({ children }) {
+  return <MDXRemote source={children as any} components={components} options={options} />;
+}

package/src/components/Shiso.tsx

@@ -0,0 +1,19 @@
+'use client';
+import { ReactNode, createContext } from 'react';
+
+export interface ShisoConfig {
+  contentDir: string;
+  docs?: { [key: string]: any };
+  blog?: { [key: string]: any };
+}
+
+export interface ShisoProps {
+  config: ShisoConfig;
+  children: ReactNode;
+}
+
+export const ShisoContext = createContext({ config: {} as ShisoConfig });
+
+export function Shiso({ config, children }: ShisoProps) {
+  return <ShisoContext.Provider value={{ config }}>{children}</ShisoContext.Provider>;
+}

package/src/components/blog/Blog.tsx

@@ -0,0 +1,21 @@
+import styles from './Blog.module.css';
+import Markdown from '../Markdown';
+
+export interface BlogProps {
+  content: any;
+  config: any;
+}
+
+export function Blog({ content }: BlogProps) {
+  return (
+    <div className={styles.blog}>
+      <div className={styles.main}>
+        <div className={styles.content}>
+          <h1>{content?.meta?.title}</h1>
+          <p className={styles.description}>{content?.meta?.description}</p>
+          <Markdown>{content?.body}</Markdown>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/docs/Callout.module.css

@@ -0,0 +1,6 @@
+.callout {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+}