@umami/shiso 0.1.0

package/src/components/docs/Callout.tsx

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,49 @@
+'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>
+  );
+}

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

@@ -0,0 +1,32 @@
+.nav {
+  position: sticky;
+  top: 30px;
+  height: max-content;
+}
+
+.item {
+  color: var(--font-muted-color);
+  padding: 0;
+  border-radius: 0;
+  border-left: var(--border-size-1) solid var(--border-color);
+}
+
+.item a {
+  color: currentColor;
+  width: 100%;
+  padding: var(--padding-y) var(--padding-x);
+  text-decoration: none;
+}
+
+.item a:hover {
+  color: var(--primary-color);
+}
+
+.item.selected {
+  color: var(--font-color);
+  border-color: var(--primary-color);
+}
+
+.items header {
+  padding: var(--padding-y) 0;
+}

package/src/components/docs/SideNav.tsx

@@ -0,0 +1,46 @@
+'use client';
+import React from 'react';
+import { Box, List, ListItem, ListSection } from '@umami/react-zen';
+import classNames from 'classnames';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import styles from './SideNav.module.css';
+
+export interface SideNavProps {
+  tabs: any;
+  navigation: any;
+}
+
+export default function SideNav({ tabs, navigation }: SideNavProps) {
+  const pathname = usePathname();
+
+  const tab = tabs.find(({ url, id }) => (id !== 'docs' ? pathname.startsWith(url) : false));
+  const menu = navigation[tab?.id || 'docs'];
+
+  return (
+    <Box className={styles.nav}>
+      <List items={navigation}>
+        {menu.map(({ group, pages }) => {
+          return (
+            <ListSection title={group} key={group} className={styles.items}>
+              {pages.map(({ label: text, url }, index: number) => {
+                return (
+                  <ListItem
+                    key={index}
+                    className={classNames(styles.item, {
+                      [styles.selected]: url === pathname,
+                    })}
+                  >
+                    <Link href={url} prefetch={false}>
+                      {text}
+                    </Link>
+                  </ListItem>
+                );
+              })}
+            </ListSection>
+          );
+        })}
+      </List>
+    </Box>
+  );
+}

package/src/components/docs/TopNav.tsx

@@ -0,0 +1,25 @@
+'use client';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Tabs, TabList, Tab } from '@umami/react-zen';
+
+export default function TopNav({ tabs }) {
+  const pathname = usePathname();
+
+  const tab = tabs.find(({ id, url }) => (id !== 'docs' ? pathname.startsWith(url) : false));
+  const selected = tab?.id || 'docs';
+
+  return (
+    <Tabs selectedKey={selected}>
+      <TabList items={tabs}>
+        {({ id, label, url }) => {
+          return (
+            <Tab id={id}>
+              <Link href={url}>{label}</Link>
+            </Tab>
+          );
+        }}
+      </TabList>
+    </Tabs>
+  );
+}

package/src/components/icons/Leaf.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgLeaf = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={512}
+    height={512}
+    data-name="Glyph Icon"
+    viewBox="0 0 64 64"
+    {...props}
+  >
+    <path d="M55.221 10.79a1.31 1.31 0 0 0-1.564.39c-4.738 5.882-18.607 6.77-22.746 6.903a18.3 18.3 0 0 0-3.067.366C7.277 22.636 7.589 37.763 8.173 42.299c.097.75.601 1.362 1.315 1.599a1.91 1.91 0 0 0 1.988-.492c2.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.909a1.94 1.94 0 0 0-.423 1.483c.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.373a1.29 1.29 0 0 0-.768-1.377" />
+  </svg>
+);
+export default SvgLeaf;

package/src/components/icons/index.ts

@@ -0,0 +1 @@
+export { default as Leaf } from './Leaf';

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export * from './blog/Blog';
+export * from './docs/Callout';
+export * from './docs/CodeBlock';
+export * from './docs/Docs';
+export * from './docs/SideNav';
+export * from './docs/Note';
+export * from './docs/PageLinks';
+export * from './docs/TopNav';

package/src/content/blog/index.mdx

@@ -0,0 +1,5 @@
+---
+title: Blog
+---
+
+## This is a blog post

package/src/content/docs/components/index.mdx

@@ -0,0 +1 @@
+# Components

package/src/content/docs/components.mdx

@@ -0,0 +1,5 @@
+---
+title: Components
+---
+
+All shiso components.

package/src/content/docs/configuration.mdx

@@ -0,0 +1,81 @@
+---
+title: Configuration
+---
+
+## Config file
+
+The `shiso.config.json` file contains the configuration options for your project.
+
+The file has the following schema:
+
+```json
+{
+  "docs": {},
+  "blog": {}
+}
+```
+
+At the root level, the properties represent the different content sections of your project.
+Shiso currently supports `docs` and `blog` content.
+
+## Docs options
+
+```json
+{
+  "docs": {
+    "tabs": [
+      {
+        "id": "docs",
+        "label": "Documentation",
+        "url": "/docs"
+      },
+      {
+        "id": "components",
+        "label": "Components",
+        "url": "/docs/components"
+      }
+    ],
+    "navigation": {
+      "docs": [
+        {
+          "group": "Getting started",
+          "pages": [
+            {
+              "label": "Overview",
+              "url": "/docs"
+            },
+            {
+              "label": "Installation",
+              "url": "/docs/installation"
+            }
+          ]
+        },
+        {
+          "group": "Basics",
+          "pages": [
+            {
+              "label": "Writing content",
+              "url": "/docs/writing-content"
+            }
+          ]
+        }
+      ],
+      "components": [
+        {
+          "group": "Components",
+          "pages": [
+            {
+              "label": "Overview",
+              "url": "/docs/components"
+            }
+          ]
+        }
+      ]
+    }
+  }
+}
+```
+
+## Blog options
+
+...

package/src/content/docs/index.mdx

@@ -0,0 +1,11 @@
+---
+title: Overview
+---
+
+## What is Shiso?
+
+Shiso lets you quickly build websites by focusing on writing content. Shiso takes care of the
+design, layout and functionality while you provide the content through Markdown files. You can also
+embed React components into your content with MDX.
+
+Out of the box, Shiso provides templates for docs and blogs and works with [Next.js](/docs/).

package/src/content/docs/installation.mdx

@@ -0,0 +1,38 @@
+---
+title: Installation
+---
+
+These instructions show how to set up Shiso in a Next.js project.
+
+## 1. Install the package
+
+```shell
+npm install @umami/shiso
+```
+
+## 2. Create page
+
+In your `app` folder, create a folder for the content section you wish to add.
+
+```text
+src
+├── app
+│   └── docs
+│       └── [[...id]]
+│           └── page.jsx
+```
+
+In this case we are creating a section for `docs`.
+
+In the `page.jsx` file, add the following code:
+
+```javascript
+import shiso from '@umami/shiso/next';
+import config from '@/shiso.config.json';
+
+const { getMetadata, renderPage } = shiso(config);
+
+export const generateMetadata = getMetadata('SHISO');
+
+export default renderPage('docs');
+```