@urbit/foundation-design-system

A system of design variables, Markdoc and React components intended for Urbit Foundation projects.

Usage

We build all our sites with Next.js and Tailwind and this package is designed for those scenarios. Please be advised you will need a Next.js installation to make use of these components.

``bash
npm i @urbit/foundation-design-system
`

Ensure all peer dependencies are present as well:

`bash
npm i @tailwindcss/aspect-ratio tailwindcss-theme-swapper autoprefixer postcss prismjs tailwindcss next
`

$3

Our design variables are available by using the Tailwind config in your own installation as a preset, ensuring you style our components as well in the content section:

`js
presets: [require("@urbit/foundation-design-system/tailwind")],
content: [
"./node_modules/@urbit/foundation-design-system/*/.js",
"./pages/*/.{js,ts,jsx,tsx}",
"./components/*/.{js,ts,jsx,tsx}",
],
`

Likewise you can find our CSS styles by importing them at the top of your site build (i.e. _app.js):

`js
import "@urbit/foundation-design-system/styles/globals.css";
import "@urbit/foundation-design-system/styles/markdown.css";
import "@urbit/foundation-design-system/styles/prism.css";
`

$3

We use Markdoc to allow for embedding dynamic React components inside Markdown files. For a sample of our components and how to use them in your own Markdown, see here.

Our Markdown parser is a custom patched installation of Markdoc for additional features (basic footnote support, superscript, next/link injection, inline HTML injection).

Import the component:

`js
import Markdown from '@urbit/foundation-design-system';
`

Then, on the server-side parse your content by passing it an object in the following shape:

`js
{ post: { content: "## A markdown document"}}
`

If you've extracted the content directly with gray-matter reconstruct the object:

`js
const markdown = JSON.stringify(Markdown.parse({ post: { content } }));
`

Otherwise this works fine if you're just using getPostBySlug a la urbit.org:

`js
const markdown = JSON.stringify(Markdown.parse(post));
`

And on front-end pass it to the renderer:

`jsx



``

Why are we doing JSON stringification and parsing? you ask. The wind answers, and you feel the breeze on the back of your neck.