@umami/shiso 0.1.0 → 0.3.0

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>
-  );
-}

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

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

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

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

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

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

package/src/components/index.ts

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

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

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

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

package/src/content/docs/components.mdx

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

package/src/content/docs/configuration.mdx

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

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

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

package/src/content/docs/writing-content.mdx

@@ -1,95 +0,0 @@
----
-title: Tracker functions
----
-
-The Umami tracker exposes a function that you can call on your website if you want
-more control over your tracking. By default everything is automatically collected, but you can
-disable this using `data-auto-track="false"` and sending the data yourself.
-See [Tracker configuration](/docs/tracker-configuration).
-
-## Functions
-
-```js
-umami.track(payload: object);
-
-umami.track(event_name: string, event_data: object);
-
-umami.identify(session_data: object);
-```
-
-## Pageviews
-
-Tracks a page view.
-
-```js
-umami.track();
-```
-
-By default the tracker automatically collects the following properties:
-
-- `hostname` - Hostname of server
-- `language` - Browser language
-- `referrer` - Page referrer
-- `screen` - Screen dimensions (eg. 1920x1080)
-- `title` - Page title
-- `url` - Page url
-- `website` - Website ID (required)
-
-If you wish to send your own custom payload, pass in an object to the function:
-
-```js
-umami.track({ website: 'e676c9b4-11e4-4ef1-a4d7-87001773e9f2', url: '/home', title: 'Home page' });
-```
-
-The above will only send the properties `website`, `url` and `title`. If you want to include existing properties, pass in a function:
-
-```js
-umami.track(props => ({ ...props, url: '/home', title: 'Home page' }));
-```
-
-## Events
-
-Tracks an event with a given name.
-
-```js
-umami.track('signup-button');
-```
-
-## Event Data
-
-Tracks an event with dynamic data.
-
-```js
-umami.track('signup-button', { name: 'newsletter', id: 123 });
-```
-
-When tracking events, the default properties are included in the payload.
-This is equivalent to running:
-
-```js
-umami.track(props => ({
-  ...props,
-  name: 'signup-button',
-  data: {
-    name: 'newsletter',
-    id: 123,
-  },
-}));
-```
-
-## Event Data Limits
-
-Event Data can work with any JSON data. There are a few rules in place to maintain performance.
-
-- Numbers have a max precision of 4.
-- Strings have a max length of 500.
-- Arrays are converted to a String, with the same max length of 500.
-- Objects have a max of 50 properties. Arrays are considered 1 property.
-
-## Session Data
-
-Tracks a session with dynamic data. You would call the identity function from the tracker script to save data about the current session.
-
-```js
-umami.identify({ email: 'bob@aol.com' });
-```

package/src/declarations.d.ts

@@ -1,3 +0,0 @@
-declare module 'recursive-readdir';
-declare module '*.json';
-declare module '*.module.css';

package/src/index.ts

@@ -1,5 +0,0 @@
-import { Blog } from '@/components/blog/Blog';
-import { Docs } from '@/components/docs/Docs';
-import * as next from '@/lib/next';
-
-export { Blog, Docs, next };

package/src/lib/content.ts

@@ -1,61 +0,0 @@
-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';
-
-export const getFiles = cache(async (folder: string) => {
-  const dir = path.resolve(folder);
-  const files = await recursive(dir);
-
-  return Promise.all(
-    files
-      .filter((file: string) => path.extname(file) === '.mdx')
-      .map(async (file: string) => {
-        const postContent = await fs.readFile(file, 'utf8');
-        const { data, content } = matter(postContent);
-
-        const id = file.replace('.mdx', '').replace(dir, '').replace(/\\/g, '/').replace(/^\//, '');
-        const anchors: { name: string; id: string; size: number }[] = [];
-        const body = content
-          .split('\n')
-          .map(line => {
-            const match = line.match(/(#+)\s+(.*)/);
-            if (match) {
-              const [, num, name] = match;
-              const id = name.toLowerCase().replace(/\s+/g, '-');
-              const size = num.length;
-
-              anchors.push({ name, id, size });
-
-              return `<h${size} id="${id}">${name.replace(/\{|\}/g, '')}</h${size}>`;
-            }
-            return line;
-          })
-          .join('\n');
-
-        return {
-          meta: data,
-          id,
-          body,
-          anchors,
-        } as any;
-      }),
-  ).then(posts => posts.sort(firstBy('date', 'desc')));
-});
-
-export async function getFile(id: string, folder: string) {
-  const files = await getFiles(folder);
-
-  return files.find(file => file?.id === id);
-}
-
-export async function getContent(params: { id: string[] }, folder: string) {
-  const { id = [] } = params;
-  const name = id?.length ? id.join('/') : 'index';
-
-  return getFile(name, folder);
-}
-
-export default getFile;

package/src/lib/next.tsx

@@ -1,46 +0,0 @@
-import { Metadata } from 'next';
-import path from 'node:path';
-import { Docs } from '@/components/docs/Docs';
-import { Blog } from '@/components/blog/Blog';
-import { getContent } from '@/lib/content';
-import { ShisoConfig } from '@/components/Shiso';
-
-const DEFAULT_CONTENT_DIR = './src/content';
-
-const components = {
-  docs: Docs,
-  blog: Blog,
-};
-
-export default (config: ShisoConfig) => {
-  const { contentDir = DEFAULT_CONTENT_DIR } = config || {};
-
-  const getMetadata = ({ title }: { title: string }) => {
-    return async ({ params }: { params: Promise<{ id: string[] }> }): Promise<Metadata> => {
-      const content = await getContent(await params, contentDir);
-
-      return {
-        title: {
-          absolute: `${content?.meta?.title} – ${title}`,
-          default: title,
-        },
-      };
-    };
-  };
-
-  const renderPage = ({ type }: { type: string }) => {
-    const folder = path.resolve(process.cwd(), contentDir, type);
-
-    return async ({ params }: { params: Promise<{ id: string[] }> }) => {
-      const content = await getContent(await params, folder);
-      const Component = components[type];
-
-      return Component && <Component content={content} config={config} />;
-    };
-  };
-
-  return {
-    getMetadata,
-    renderPage,
-  };
-};

package/src/lib/types.ts

@@ -1,10 +0,0 @@
-export interface ShisoDocsConfig {
-  tabs?: [];
-}
-
-export interface ShisoBlogConfig {}
-
-export interface ShisoConfig {
-  docs?: { [key: string]: any };
-  blog?: { [key: string]: any };
-}

package/src/shiso.config.json

@@ -1,59 +0,0 @@
-{
-  "contentDir": "./src/content",
-  "docs": {
-    "title": "Shiso",
-    "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"
-            },
-            {
-              "label": "Configuration",
-              "url": "/docs/configuration"
-            }
-          ]
-        },
-        {
-          "group": "Basics",
-          "pages": [
-            {
-              "label": "Writing content",
-              "url": "/docs/writing-content"
-            }
-          ]
-        }
-      ],
-      "components": [
-        {
-          "group": "Components",
-          "pages": [
-            {
-              "label": "Overview",
-              "url": "/docs/components"
-            }
-          ]
-        }
-      ]
-    }
-  }
-}

package/tsconfig.build.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "declaration": true,
-    "noImplicitAny": false,
-    "emitDeclarationOnly": true,
-    "esModuleInterop": true,
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "isolatedModules": true,
-    "rootDir": "./src",
-    "outDir": "./types",
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "jsx": "preserve",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src/components/**/*"],
-  "exclude": ["node_modules"]
-}
-

package/tsconfig.json

@@ -1,41 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "noImplicitAny": false,
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    },
-    "target": "ES2017"
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}