@umami/shiso 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/shiso",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A content layer for Next.js",
   "homepage": "https://umami.is/shiso",
   "repository": {
@@ -13,6 +13,9 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "dev": "next dev --port 3100",
     "build": "next build",

package/.eslintrc.json

@@ -1,11 +0,0 @@
-{
-  "extends": "next/core-web-vitals",
-  "rules": {
-    "import/no-anonymous-default-export": "off",
-    "react/display-name": "off",
-    "import/order": [
-      1,
-      { "groups": ["external", "builtin", "internal", "sibling", "parent", "index"] }
-    ]
-  }
-}

package/.prettierrc.json

@@ -1,7 +0,0 @@
-{
-  "arrowParens": "avoid",
-  "endOfLine": "lf",
-  "printWidth": 100,
-  "singleQuote": true,
-  "trailingComma": "all"
-}

package/dts.mjs

@@ -1,8 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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/public/leaf.svg

@@ -1 +0,0 @@
-<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

@@ -1,14 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1 +0,0 @@
-<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

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

package/src/components/Markdown.tsx

@@ -1,21 +0,0 @@
-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

@@ -1,19 +0,0 @@
-'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

@@ -1,21 +0,0 @@
-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

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

package/src/components/docs/Callout.tsx

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-import classNames from 'classnames';
-import styles from './Callout.module.css';
-
-export interface CalloutProps {
-  variant: 'note' | 'warning' | 'info' | 'tip';
-  icon?: ReactNode;
-  children: ReactNode;
-}
-
-export default function Callout({ variant = 'note', icon, children }: CalloutProps) {
-  return (
-    <div className={classNames(styles[variant])}>
-      {icon}
-      {children}
-    </div>
-  );
-}

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

@@ -1,37 +0,0 @@
-.container {
-  position: relative;
-  background: var(--base-color-900);
-  padding: var(--spacing-5);
-  border-radius: 6px;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-pre.container code {
-  font-family: var(--font-family-code);
-  color: var(--base-color-300);
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.button {
-  border: 0;
-  position: absolute;
-  right: var(--spacing-5);
-  top: var(--spacing-5);
-  cursor: pointer;
-  background: transparent;
-}
-
-.copy {
-  color: var(--base-color-300);
-}
-
-.copy:hover {
-  color: var(--base-color-50);
-}
-
-.check {
-  color: var(--success-color);
-}

package/src/components/docs/CodeBlock.tsx

@@ -1,30 +0,0 @@
-'use client';
-import { useState, useRef } from 'react';
-import { Icon, Icons } from '@umami/react-zen';
-import styles from './CodeBlock.module.css';
-
-export function CodeBlock(props: any) {
-  const textInput = useRef<any>(null);
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = () => {
-    setCopied(true);
-
-    navigator?.clipboard?.writeText(textInput?.current?.textContent);
-
-    setTimeout(() => {
-      setCopied(false);
-    }, 1000);
-  };
-
-  return (
-    <pre ref={textInput} className={styles.container}>
-      {props.children}
-      <button aria-label="Copy code" className={styles.button} onClick={handleCopy}>
-        <Icon size="sm" className={copied ? styles.check : styles.copy}>
-          {copied ? <Icons.Check /> : <Icons.Copy />}
-        </Icon>
-      </button>
-    </pre>
-  );
-}

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

@@ -1,63 +0,0 @@
-.content {
-  font-size: 16px;
-  margin-bottom: 60px;
-}
-
-.content > p {
-  color: var(--font-muted-color);
-  line-height: 1.8;
-}
-
-.content a {
-  color: var(--font-color);
-  font-weight: 600;
-  text-decoration: underline var(--font-faded-color);
-  text-underline-offset: 4px;
-}
-
-.content a:hover {
-  text-decoration: underline var(--font-color);
-}
-
-.content h1 {
-  font-size: var(--font-size-8);
-  letter-spacing: var(--letter-spacing-1);
-  margin: 0 0 var(--spacing-4) 0;
-}
-
-.content h2 {
-  font-size: var(--font-size-6);
-  letter-spacing: var(--letter-spacing-1);
-  margin: var(--spacing-8) 0 var(--spacing-4) 0;
-}
-
-.content h3 {
-  font-size: var(--font-size-5);
-  letter-spacing: var(--letter-spacing-1);
-  margin: var(--spacing-7) 0 var(--spacing-4) 0;
-}
-
-.content ul {
-  list-style: disc;
-}
-
-.content ol {
-  list-style: decimal;
-}
-
-.content pre {
-  margin: var(--spacing-5) 0;
-}
-
-.content code {
-  font-size: 14px;
-}
-
-.content 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-50);
-  font-weight: var(--font-weight-bold);
-}

package/src/components/docs/ContentArea.tsx

@@ -1,27 +0,0 @@
-import { Heading, Box, Text } from '@umami/react-zen';
-import Markdown from '@/components/Markdown';
-import styles from './ContentArea.module.css';
-
-export interface ContentAreaProps {
-  title: string;
-  body: string;
-  description?: string;
-  group?: string;
-}
-
-export function ContentArea({ title, description, group, body }: ContentAreaProps) {
-  return (
-    <Box flexGrow={1}>
-      <Text color="primary" weight="bold">
-        {group}
-      </Text>
-      <Heading size="8" as="h1">
-        {title}
-      </Heading>
-      <Text type="muted">{description}</Text>
-      <Box className={styles.content}>
-        <Markdown>{body}</Markdown>
-      </Box>
-    </Box>
-  );
-}

package/src/components/docs/Docs.tsx

@@ -1,50 +0,0 @@
-import { Grid, Box, Heading } from '@umami/react-zen';
-import PageLinks from './PageLinks';
-import SideNav from './SideNav';
-import TopNav from './TopNav';
-import { ContentArea } from './ContentArea';
-import { ShisoConfig } from '../Shiso';
-
-export interface contentsProps {
-  config: ShisoConfig;
-  content: any;
-}
-
-export function Docs({ content, config }: contentsProps) {
-  if (!content) {
-    return <Heading size="6">Page not found</Heading>;
-  }
-
-  const { tabs, navigation } = config?.docs || {};
-
-  content.group = Object.keys(navigation).reduce((name, key) => {
-    if (!name) {
-      return navigation[key]?.find((section: { pages: any[] }) => {
-        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 (
-    <Box flexGrow="1">
-      {tabs && <TopNav tabs={tabs} />}
-      <Grid gap="6" columns="240px 1fr 240px">
-        <SideNav tabs={tabs} navigation={navigation} />
-        <ContentArea
-          title={content?.meta?.title}
-          body={content?.body}
-          group={content?.group}
-          description={content?.meta?.description}
-        />
-        <PageLinks items={content?.anchors} offset={150} />
-      </Grid>
-    </Box>
-  );
-}

package/src/components/docs/Note.tsx

@@ -1,5 +0,0 @@
-import Callout from './Callout';
-
-export function Note({ children }: { children: React.ReactNode }) {
-  return <Callout variant="note">{children}</Callout>;
-}

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

@@ -1,49 +0,0 @@
-.title {
-  position: sticky;
-  top: 0;
-}
-
-.links {
-  position: sticky;
-  top: 30px;
-  height: max-content;
-}
-
-.links a {
-  display: block;
-  color: var(--font-muted-color);
-  text-wrap: nowrap;
-  text-decoration: none;
-}
-
-.links a:hover {
-  color: var(--primary-color);
-}
-
-.indent-1 {
-  margin-left: 0;
-}
-
-.indent-2 {
-  margin-left: 0;
-}
-
-.indent-3 {
-  margin-left: 10px;
-}
-
-.indent-4 {
-  margin-left: 20px;
-}
-
-.indent-5 {
-  margin-left: 30px;
-}
-
-.indent-6 {
-  margin-left: 40px;
-}
-
-a.selected {
-  color: var(--primary-color);
-}

package/src/components/docs/PageLinks.tsx

@@ -1,49 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { Column, Text } from '@umami/react-zen';
-import classNames from 'classnames';
-import styles from './PageLinks.module.css';
-
-export default function PageLinks({ items, offset = 0 }) {
-  const [hash, setHash] = useState(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 (
-    <Column gap="3" minWidth="240px" className={styles.links}>
-      <Text size="2" weight="bold">
-        On this page
-      </Text>
-      {items.map(({ name, id, size }) => {
-        return (
-          <a
-            key={id}
-            href={`#${id}`}
-            className={classNames(styles[`indent-${size}`], { [styles.selected]: hash === id })}
-          >
-            {name}
-          </a>
-        );
-      })}
-    </Column>
-  );
-}