Initial commit

2025-12-18 20:37:44 +00:00 · 2021-03-30 12:32:33 -07:00
commit 25f5486415
63 changed files with 4150 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# nextra...
+dist
+examples
+packages
+
+# jambonz...
+/.notes
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+.next
+node_modules
--- a/21
+++ b/21
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Shu Ding
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -0,0 +1,34 @@
+jambonz/next-static-site
+========================
+
+> The "bring your own everything" CPaaS
+
+# [Jambonz](https://jambonz.vercel.app)
+
+- `yarn install`
+- `yarn dev`
+
+![](/public/jambonz.png)
+
+# [Nextra](https://nextra.vercel.app)
+
+_Warning: this project is not production ready, API might change without notice._
+
+[![](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fshuding%2Fnextra&c=1)
+
+**Nextra** is a [Next.js](https://nextjs.org) and [MDX](https://mdxjs.com) powered, no-code site generator.
+
+![](/public/demo.png)
+
+## Development
+
+The code of Nextra is under the [`core`](https://github.com/shuding/nextra/tree/core) branch.
+
+## Themes
+
+- [nextra-theme-docs](https://github.com/vercel/swr-site) ([demo](https://swr.vercel.app))
+- [nextra-theme-blog](https://github.com/shuding/site) ([demo](https://shud.in))
+
+---
+
+Created by [@shuding](https://github.com/shuding) and [@pacocoursey](https://github.com/pacocoursey) at [Vercel](https://vercel.com). Released under the MIT license.
--- a/components/jambonz-ui.js
+++ b/components/jambonz-ui.js
@@ -0,0 +1,108 @@
+import Link from 'next/link';
+import Head from 'next/head';
+import classNames from 'classnames';
+import * as Icons from 'react-feather';
+
+export function H1({ children }) {
+  return <div className="h1">{children}</div>;
+}
+
+export function H2({ children }) {
+  return <div className="h2">{children}</div>;
+}
+
+export function H3({ children }) {
+  return <div className="h3">{children}</div>;
+}
+
+export function H4({ children }) {
+  return <div className="h4">{children}</div>;
+}
+
+export function H5({ children }) {
+  return <div className="h5">{children}</div>;
+}
+
+export function H6({ children }) {
+  return <div className="h6">{children}</div>;
+}
+
+export function P({children}) {
+  return <div className="p">{children}</div>;
+}
+
+export function M({ children }) {
+  return <div className="m">{children}</div>;
+}
+
+export function MS({ children }) {
+  return <div className="ms">{children}</div>;
+}
+
+export function MXS({ children }) {
+  return <div className="mxs">{children}</div>;
+}
+
+export function Button({children, href, style = 'jambonz', target = '_blank'}) {
+  const classes = {
+    'btn': true,
+    [`btn--${style}`]: true,
+  };
+
+  return (
+    <Link href={href}>
+      <a target={target} className={classNames(classes)}>{children}</a>
+    </Link>
+  );
+}
+
+export function Icon({name, size = 24, style = 'inline'}) {
+  const Component = Icons[name];
+  const classes = {
+    'icon': true,
+    [`icon--${style}`]: true,
+  };
+
+  // See react-feather for all 286 icons available
+  // https://github.com/feathericons/react-feather
+  if (!Component) {
+    return null;
+  }
+
+  // Circle icon with fill or pill style
+  if (style !== 'inline') {
+    return (
+      <div className={classNames(classes)}>
+        <Component size={size} />
+      </div>
+    );
+  }
+
+  // Inline SVG icon
+  return <Component size={size} />;
+}
+
+export function Layout({children, title = "jambonz"}) {
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <link rel="icon" href="/favicon.ico" />
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta
+          name="description"
+          content="The “bring your own everything” CPaaS"
+        />
+        <link rel="apple-touch-icon" href="/logo192.png" />
+        {/*
+          manifest.json provides metadata used when your web app is installed on a
+          user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+        */}
+        <link rel="manifest" href="/manifest.json" />
+      </Head>
+      {children}
+    </>
+  );
+}
--- a/components/kitofparts.js
+++ b/components/kitofparts.js
@@ -0,0 +1,117 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Button, Icon } from './jambonz-ui';
+
+export default function Kitofparts() {
+  const text = 'jambonz is a self-hosted, “bring your own everything” open source CPaaS platform, developed by the creator of the drachtio open source sip server.';
+
+  return (
+    <>
+      <div className="wrap padr">
+        <div className="pad">
+          <img src="/svg/jambonz.svg" width="128" />
+        </div>
+        <div className="pad">
+          <H5>
+            <div><strong>font</strong></div>
+            <div>Objectivity (free, large family—16 styles)</div>
+            <div>&nbsp;</div>
+            <div><strong>specimen</strong></div>
+            <div>
+              <Link href="https://www.fontsquirrel.com/fonts/objectivity">
+                <a target="_blank">www.fontsquirrel.com/fonts/objectivity</a>
+              </Link>
+            </div>
+            <div>
+              <Link href="https://www.behance.net/gallery/60530395/Objectivity-Free-Font-Family">
+                <a target="_blank">www.behance.net/gallery/60530395/Objectivity-Free-Font-Family</a>
+              </Link>
+            </div>
+            <div>&nbsp;</div>
+            <div><strong>icons</strong></div>
+            <div>Feather (free, large set—286 icons)</div>
+            <div>&nbsp;</div>
+            <div><strong>specimen</strong></div>
+            <div>
+              <Link href="https://feathericons.com">
+                <a target="_blank">feathericons.com</a>
+              </Link>
+            </div>
+            <div>
+              <Link href="https://github.com/feathericons/react-feather">
+                <a target="_blank">github.com/feathericons/react-feather</a>
+              </Link>
+            </div>
+          </H5>
+        </div>
+        <div className="wrap-text pad">
+          <H1>{text}</H1>
+        </div>
+        <div className="wrap-text pad">
+          <H2>{text}</H2>
+        </div>
+        <div className="wrap-text pad">
+          <H3>{text}</H3>
+        </div>
+        <div className="wrap-text pad">
+          <H4>{text}</H4>
+        </div>
+        <div className="wrap-text pad">
+          <H5>{text}</H5>
+        </div>
+        <div className="wrap-text pad">
+          <H6>{text}</H6>
+        </div>
+        <div className="wrap-text pad">
+          <P>{text}</P>
+        </div>
+        <div className="wrap-text pad">
+          <M>{text}</M>
+        </div>
+        <div className="wrap-text pad">
+          <MS>{text}</MS>
+        </div>
+        <div className="wrap-text pad">
+          <MXS>{text}</MXS>
+        </div>
+        <div className="pad">
+          <Image src="/images/Jambonz_app_screenshot.png" width={1280 / 2} height={842 / 2} />
+        </div>
+        <div className="icons pad">
+          <Icon style="fill" name="Server" />
+          <Icon style="fill" name="PhoneCall" />
+          <Icon style="fill" name="Folder" />
+          <Icon style="fill" name="Cloud" />
+          <Icon style="pill" name="Heart" />
+        </div>
+        <div className="pad">
+          <img src="/svg/drachtio.svg" width="128" />
+        </div>
+        <div className="pad">
+          <Button href="#" target="_blank" style="login">Log In</Button>
+        </div>
+        <div className="pad">
+          <Button href="#" target="_blank">Sign up for free</Button>
+        </div>
+        <div className="pad">
+          <Button href="#" target="_blank" style="dark">Sign up for free</Button>
+        </div>
+        <div className="btns pad">
+          <Button href="https://github.com/jambonz" target="_blank" style="pill">
+            <Icon size={18} name="GitHub" />
+            <span>github.com/jambonz</span>
+          </Button>
+          <Button href="https://github.com/drachtio" target="_blank" style="pill">
+            <Icon size={18} name="GitHub" />
+            <span>github.com/drachtio</span>
+          </Button>
+        </div>
+      </div>
+      <div className="pad bg-jambonz">
+        <div className="wrap padr">
+          <Button href="#" target="_blank" style="light">Sign up for free</Button>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/next.config.js
+++ b/next.config.js
@@ -0,0 +1,2 @@
+const withNextra = require('nextra')('nextra-theme-docs', './theme.config.js')
+module.exports = withNextra()
--- a/package.json
+++ b/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "nextra",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "next",
+    "start": "next start",
+    "build": "next build",
+    "export": "next export"
+  },
+  "author": "Shu Ding",
+  "license": "MIT",
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "env-cmd": "^10.1.0",
+    "gray-matter": "^4.0.2",
+    "next": "^10.0.8-canary.9",
+    "nextra": "^0.4.1",
+    "nextra-theme-docs": "^1.1.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-feather": "^2.0.9",
+    "sass": "^1.32.8"
+  },
+  "devDependencies": {
+    "prettier": "^2.0.5"
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true
+  }
+}
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -0,0 +1,6 @@
+import 'nextra-theme-docs/style.css';
+import '../styles/global.scss';
+
+export default function App({Component, pageProps}) {
+  return <Component {...pageProps} />;
+}
--- a/pages/docs/advanced/code-highlighting.mdx
+++ b/pages/docs/advanced/code-highlighting.mdx
@@ -0,0 +1,26 @@
+# Code Highlighting
+
+`nextra-theme-docs` uses [Prism](https://prismjs.com) and [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) 
+to highlight the code blocks. This section covers how you can customze it.
+
+## More Languages
+
+To keep the bundle small, only a [subset of languages](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js)
+are included in the syntax highlighter. If you want to add more languages, you can do the following:
+
+1. Run `yarn add prismjs prism-react-renderer` to add dependencies to your Nextra project.
+2. Add the following code to your `pages/_app.js`:
+
+```jsx
+import Prism from 'prism-react-renderer/prism'
+
+(typeof global !== "undefined" ? global : window).Prism = Prism
+
+require("prismjs/components/prism-kotlin")
+require("prismjs/components/prism-csharp")
+```
+
+Restart your app and you will have Kotlin and C# code highlighting supported. 
+You can find the full list of available languages [here](https://github.com/PrismJS/prism/tree/master/components).
+
+{/*## Custom Themes*/}
--- a/pages/docs/advanced/meta.json
+++ b/pages/docs/advanced/meta.json
@@ -0,0 +1,3 @@
+{
+  "code-highlighting": "Code Highlighting"
+}
--- a/pages/docs/anchors.md
+++ b/pages/docs/anchors.md
@@ -0,0 +1,57 @@
+# Anchor Links
+
+`h2` tags will become anchors in the sidebar automatically.
+
+## When You Are Old
+
+When you are old and grey and full of sleep,  
+And nodding by the fire, take down this book,  
+And slowly read, and dream of the soft look  
+Your eyes had once, and of their shadows deep;
+
+How many loved your moments of glad grace,  
+And loved your beauty with love false or true,  
+But one man loved the pilgrim soul in you,  
+And loved the sorrows of your changing face;
+
+And bending down beside the glowing bars,  
+Murmur, a little sadly, how Love fled  
+And paced upon the mountains overhead  
+And hid his face amid a crowd of stars.
+
+## The Young Man's Song
+
+I whispered, "I am too young,"  
+And then, "I am old enough";  
+Wherefore I threw a penny  
+To find out if I might love.  
+"Go and love, go and love, young man,  
+If the lady be young and fair,"  
+Ah, penny, brown penny, brown penny,  
+I am looped in the loops of her hair.  
+
+Oh, love is the crooked thing,  
+There is nobody wise enough  
+To find out all that is in it,  
+For he would be thinking of love  
+Till the stars had run away,  
+And the shadows eaten the moon.  
+Ah, penny, brown penny, brown penny,  
+One cannot begin it too soon.  
+
+## The Sorrow of Love
+
+The quarrel of the sparrows in the eaves,  
+The full round moon and the star-laden sky,  
+And the loud song of the ever-singing leaves,  
+Had hid away earth's old and weary cry.  
+  
+And then you came with those red mournful lips,  
+And with you came the whole of the world's tears,  
+And all the sorrows of her labouring ships,  
+And all the burden of her myriad years.  
+  
+And now the sparrows warring in the eaves,  
+The curd-pale moon, the white stars in the sky,  
+And the loud chaunting of the unquiet leaves  
+Are shaken with earth's old and weary cry.  
--- a/pages/docs/built-in-components.mdx
+++ b/pages/docs/built-in-components.mdx
@@ -0,0 +1,81 @@
+# Built-In Components
+
+Some helpful built-in components from `nextra-theme-docs`.
+
+## Callout
+
+import Callout from 'nextra-theme-docs/callout'
+
+#### Example
+
+<Callout>
+  A **callout** is a short piece of text intended to attract attention.
+</Callout>
+
+<Callout emoji="🦤">
+  The **dodo** is an extinct flightless bird that was endemic to the island of Mauritius, east of Madagascar in the Indian Ocean.
+</Callout>
+
+#### Usage
+
+```mdx
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout emoji="🦤">
+  The **dodo** is an extinct flightless bird.
+</Callout>
+```
+
+## Bleed
+
+import Bleed from 'nextra-theme-docs/bleed'
+
+#### Example
+
+When wrapping your content with `<Bleed>`, it will be slightly wider than the container
+and will overflow on both sides.
+
+<Bleed>
+  <div style={{ border: '1px solid #888', padding: '4rem 2.5rem', textAlign: 'center' }}>
+    _There is nothing to writing. All you do is sit down at a typewriter and **bleed**._
+
+    — Ernest Hemingway
+  </div>
+</Bleed>
+
+It providers a better reading experience when you want to present some graphical information, which normally
+looks nicer in a larger size.
+
+For example you can put text, image, video or any component inside:
+
+<Bleed>
+  <iframe width="100%" height="430" src="https://www.youtube.com/embed/3hccXiXI0u8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen/>
+</Bleed>
+
+You can even make it full-bleed using `<Bleed full>`:
+
+<Bleed full>
+  ![Landscape](https://source.unsplash.com/eaxwP9J_V6s/1600x398)
+</Bleed>
+
+#### Usage
+
+```mdx
+import Bleed from 'nextra-theme-docs/bleed'
+
+<Bleed>
+  Hey, I can use **Markdown** syntax here.
+</Bleed>
+
+<Bleed full>
+  ![Landscape](https://source.unsplash.com/eaxwP9J_V6s/1600x398)
+</Bleed>
+
+<Bleed full>
+  <iframe src="https://codesandbox.io/embed/swr-states-4une7"
+     width="100%"
+     height="500px"
+     title="SWR-States"
+   ></iframe>
+</Bleed>
+```
--- a/pages/docs/get-started.mdx
+++ b/pages/docs/get-started.mdx
@@ -0,0 +1,78 @@
+# Get Started
+
+Create your own Nextra site and deploy to Vercel:
+
+[![](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fshuding%2Fnextra&c=1)
+
+Vercel will create the Nextra repository and deploy the site for you with just a few clicks.  
+Once done, every change in the repository will be deployed automatically.
+
+---
+
+### Configurations
+
+1. Install Next.js and React: `yarn add next react react-dom`
+
+2. Install Nextra and the docs theme: `yarn add nextra nextra-theme-docs`
+
+3. Create the following Next.js config and theme config under the root directory:
+
+```jsx
+// next.config.js
+const withNextra = require('nextra')('nextra-theme-docs', './theme.config.js')
+module.exports = withNextra()
+```
+
+```jsx
+// theme.config.js
+export default {
+  repository: 'https://github.com/shuding/nextra', // project repo
+  docsRepository: 'https://github.com/shuding/nextra', // docs repo
+  branch: 'master', // branch of docs
+  path: '/', // path of docs
+  titleSuffix: ' – Nextra',
+  nextLinks: true,
+  prevLinks: true,
+  search: true,
+  customSearch: null, // customizable, you can use algolia for example
+  darkMode: true,
+  footer: true,
+  footerText: 'MIT 2020 © Shu Ding.',
+  footerEditOnGitHubLink: true, // will link to the docs repo
+  logo: <>
+    <svg>...</svg>
+    <span>Next.js Static Site Generator</span>
+  </>,
+  head: <>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Nextra: the next docs builder" />
+    <meta name="og:title" content="Nextra: the next docs builder" />
+  </>
+}
+```
+
+4. Create `pages/_app.js` and include the theme stylesheet:
+
+```jsx
+import 'nextra-theme-docs/style.css'
+
+export default function Nextra({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```
+
+5. You are good to go! 
+
+---
+
+import Callout from 'nextra-theme-docs/callout'
+
+<Callout>
+Any `.md` or `.mdx` file will turn into a doc page and be displayed in sidebar. You can also create a `meta.json` file to customize the page order and title.
+
+Check the source code: https://github.com/shuding/nextra for more information.
+</Callout>
+
+<Callout>
+You can also use [`<style jsx>`](https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js) to style elements inside `theme.config.js`.
+</Callout>
--- a/pages/docs/i18n.md
+++ b/pages/docs/i18n.md
@@ -0,0 +1,40 @@
+# I18n
+
+Nextra supports [Next.js i18n](https://nextjs.org/docs/advanced-features/i18n-routing) out of the box.
+
+To add multi-language pages to your Nextra application, just need to config `i18n` in `next.config.js`:
+
+```js
+// next.config.js
+const withNextra = require('nextra')('nextra-theme-docs', './theme.config.js')
+module.exports = withNextra({
+  i18n: {
+    locales: ['en', 'zh', 'de'],
+    defaultLocale: 'en',
+  },
+})
+```
+
+And then, add the locale to your files as the extension (same for the default locale):
+
+```
+/pages
+  index.en.md
+  index.zh.md
+  index.de.md
+  meta.en.json
+  meta.zh.json
+  meta.de.json
+  ...
+```
+
+Finally, add the `i18n` option to your `theme.config.js` so the theme will show the dropdown menu:
+
+```jsx
+i18n: [
+  { locale: 'en', text: 'English' },
+  { locale: 'zh', text: '中文' },
+  { locale: 'de', text: 'Deutsch' },
+  { locale: 'ar', text: 'العربية', direction: 'rtl' },
+]
+```
--- a/pages/docs/index.md
+++ b/pages/docs/index.md
@@ -0,0 +1,7 @@
+# Nextra
+
+**Nextra** is a [Next.js](https://nextjs.org) based static site generator. 0 lines of code needed.  
+
+It supports Markdown with React components ([MDX](/docs/mdx)), automatically generated [sidebar and anchor links](/docs/anchors), file-system based routing, built-in syntax highlighting, i18n and more.
+
+![](/demo.png)
--- a/pages/docs/mdx.mdx
+++ b/pages/docs/mdx.mdx
@@ -0,0 +1,119 @@
+# Markdown and React
+
+You can write normal `.md` files or the more powerful `.mdx` format.
+
+Use [MDX](https://mdxjs.com/about) to import and use React components inside your Markdown file:
+
+```markdown
+import Callout from 'nextra-theme-docs/callout'
+
+### Markdown With React Components
+
+<Callout emoji="✅">
+  **MDX** (the library), at its core, transforms MDX (the syntax) to JSX.
+  It receives an MDX string and outputs a _JSX string_. It does this by parsing
+  the MDX document to a syntax tree and then generates a JSX document from that tree. 
+</Callout>
+```
+
+Generates:
+
+import Callout from 'nextra-theme-docs/callout'
+
+### Markdown With React Components
+
+<Callout emoji="✅">
+  **MDX** (the library), at its core, transforms MDX (the syntax) to JSX.
+  It receives an MDX string and outputs a _JSX string_. It does this by parsing
+  the MDX document to a syntax tree and then generates a JSX document from that tree. 
+</Callout>
+
+## List
+
+1. one
+2. two
+3. three
+
+- one
+- two
+- three
+
+---
+
+# **Hello**, This Is a _Title_ Inside `h1`
+## **Hello**, This Is a _Title_ Inside `h2`
+### **Hello**, This Is a _Title_ Inside `h3`
+#### **Hello**, This Is a _Title_ Inside `h4`
+##### **Hello**, This Is a _Title_ Inside `h5`
+###### **Hello**, This Is a _Title_ Inside `h6`
+
+## Code Highlighting
+
+Code highlighting with focused lines using
+
+````markdown
+```jsx highlight=2,3
+function App() {
+  // these 2 lines will be highlighted
+  return <App>My JSX Code</App>
+}
+```
+````
+
+```jsx highlight=4,8
+import useSWR from 'swr'
+
+function Profile() {
+  const { data, error } = useSWR('/api/user', fetcher)
+
+  if (error) return <div>failed to load</div>
+  if (!data) return <div>loading...</div>
+  return <div>hello {data.name}!</div>
+}
+```
+
+Inline code: `let x = 1`.  
+Multiple lines: `x += 1`.
+
+## Blockquote
+
+> Where some people measure progress in answers-right per test or tests-passed per year, we are more interested in Sistine-Chapel-Ceilings per Lifetime.
+> 
+> — Alan Kay, A Personal Computer for Children of All Ages
+
+And nested quotes:
+
+> > Where some people measure progress in answers-right per test or tests-passed per year, we are more interested in Sistine-Chapel-Ceilings per Lifetime.
+> > 
+> > — Alan Kay, A Personal Computer for Children of All Ages
+> 
+> This is **great**.
+> 
+> — Shu Ding.
+
+## Table
+
+| Syntax        | Description | Test Text     |
+| :---          |    :----:   |          ---: |
+| Header        | Title       | Here's this   |
+| Paragraph     | Text        | And more      |
+| Strikethrough |             | ~~Text~~      |
+
+With `next/image`:
+
+import Image from 'next/image'
+
+| Image |
+| :--- |
+| <Image src="/og.png" alt="Nextra" width={1536/2} height={768/2} layout="intrinsic"/> |
+| `<Image src="/og.png" alt="Nextra" width={1536/2} height={768/2} layout="intrinsic"/>` |
+
+## Task List
+
+- [x] Write the press release
+- [ ] Update the website
+- [ ] Contact the media
+
+---
+
+Click the "Edit this page on GitHub" link below to see the code.
--- a/pages/docs/meta.json
+++ b/pages/docs/meta.json
@@ -0,0 +1,10 @@
+{
+  "get-started": "Get Started",
+  "structure": "Structure",
+  "mdx": "Markdown and React",
+  "built-in-components": "Built-In Components",
+  "ssg": "SSG Support",
+  "anchors": "Anchor Links",
+  "i18n": "I18n",
+  "advanced": "Advanced"
+}
--- a/pages/docs/ssg.mdx
+++ b/pages/docs/ssg.mdx
@@ -0,0 +1,32 @@
+# Next.js SSG in MDX
+
+import { useSSG } from 'nextra/ssg'
+
+export const getStaticProps = ({ params }) => {
+  return fetch('https://api.github.com/repos/shuding/nextra')
+    .then(res => res.json())
+    .then(repo => ({
+      props: {
+        // We return an `ssg` object in the props.
+        ssg: {
+          stars: repo.stargazers_count
+        }
+      },
+      revalidate: 5
+    }))
+}
+
+export const StarsRenderer = () => {
+  // And later we can get it inside MDX.
+  const { stars } = useSSG()
+  return <strong>{stars}</strong>
+}
+
+The [Nextra repository](https://github.com/shuding/nextra) has <StarsRenderer/> stars!
+
+---
+
+The page is prerendered at build time with [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation)
+and [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration).
+
+Check the source code for more information.
--- a/pages/docs/structure.md
+++ b/pages/docs/structure.md
@@ -0,0 +1,7 @@
+# Structure
+
+Just put all the Markdown files (`.md`, `.mdx`) under the `pages` directory. File system is the best way to organize your documentation:
+
+![](/demo.png)
+
+You can also use a `meta.json` file to config the order and displayed name of the page ([example](https://github.com/shuding/nextra/blob/master/pages/meta.json)).
--- a/pages/index.js
+++ b/pages/index.js
@@ -0,0 +1,10 @@
+import { Layout } from '../components/jambonz-ui';
+import Kitofparts from '../components/kitofparts';
+
+export default function Home() {
+  return (
+    <Layout>
+      <Kitofparts />
+    </Layout>
+  );
+}
--- a/pages/meta.json
+++ b/pages/meta.json
@@ -0,0 +1,3 @@
+{
+  "docs": "Jambonz Docs"
+}
--- a/public/android-icon-192x192.png
+++ b/public/android-icon-192x192.png
--- a/public/apple-icon-180x180.png
+++ b/public/apple-icon-180x180.png
--- a/public/apple-icon.png
+++ b/public/apple-icon.png
--- a/public/demo.png
+++ b/public/demo.png
--- a/public/favicon-16x16.png
+++ b/public/favicon-16x16.png
--- a/public/favicon-32x32.png
+++ b/public/favicon-32x32.png
--- a/public/favicon-96x96.png
+++ b/public/favicon-96x96.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/fonts/objectivity-black-webfont.woff
+++ b/public/fonts/objectivity-black-webfont.woff
--- a/public/fonts/objectivity-black-webfont.woff2
+++ b/public/fonts/objectivity-black-webfont.woff2
--- a/public/fonts/objectivity-blackslanted-webfont.woff
+++ b/public/fonts/objectivity-blackslanted-webfont.woff
--- a/public/fonts/objectivity-blackslanted-webfont.woff2
+++ b/public/fonts/objectivity-blackslanted-webfont.woff2
--- a/public/fonts/objectivity-bold-webfont.woff
+++ b/public/fonts/objectivity-bold-webfont.woff
--- a/public/fonts/objectivity-bold-webfont.woff2
+++ b/public/fonts/objectivity-bold-webfont.woff2
--- a/public/fonts/objectivity-boldslanted-webfont.woff
+++ b/public/fonts/objectivity-boldslanted-webfont.woff
--- a/public/fonts/objectivity-boldslanted-webfont.woff2
+++ b/public/fonts/objectivity-boldslanted-webfont.woff2
--- a/public/fonts/objectivity-medium-webfont.woff
+++ b/public/fonts/objectivity-medium-webfont.woff
--- a/public/fonts/objectivity-medium-webfont.woff2
+++ b/public/fonts/objectivity-medium-webfont.woff2
--- a/public/fonts/objectivity-mediumslanted-webfont.woff
+++ b/public/fonts/objectivity-mediumslanted-webfont.woff
--- a/public/fonts/objectivity-mediumslanted-webfont.woff2
+++ b/public/fonts/objectivity-mediumslanted-webfont.woff2
--- a/public/fonts/objectivity-regular-webfont.woff
+++ b/public/fonts/objectivity-regular-webfont.woff
--- a/public/fonts/objectivity-regular-webfont.woff2
+++ b/public/fonts/objectivity-regular-webfont.woff2
--- a/public/fonts/objectivity-regularslanted-webfont.woff
+++ b/public/fonts/objectivity-regularslanted-webfont.woff
--- a/public/fonts/objectivity-regularslanted-webfont.woff2
+++ b/public/fonts/objectivity-regularslanted-webfont.woff2
--- a/public/images/Jambonz_app_screenshot.png
+++ b/public/images/Jambonz_app_screenshot.png
--- a/public/jambonz.png
+++ b/public/jambonz.png
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/public/logo64.png
+++ b/public/logo64.png
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "jambonz",
+  "name": "The “bring your own everything” CPaaS",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/public/ms-icon-144x144.png
+++ b/public/ms-icon-144x144.png
--- a/public/og.png
+++ b/public/og.png
--- a/public/svg/drachtio.svg
+++ b/public/svg/drachtio.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="313px" height="71px" viewBox="0 0 313 71" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Drachtio-Logo" fill-rule="nonzero">
+            <g id="drachtio_logo" transform="translate(0.980000, 0.989325)">
+                <path d="M41.87,18.2606751 C41.8643651,18.224225 41.8643651,18.1871253 41.87,18.1506751 L41.87,17.8606751 C41.87,17.7406751 41.87,17.6306751 41.87,17.5206751 L38.17,16.7606751 C29.11,14.8906751 29.86,30.6506751 28.4,35.2006751 C28.3277159,35.422203 28.1526905,35.5950506 27.9302751,35.6645554 C27.7078596,35.7340602 27.465559,35.691627 27.28,35.5506751 C24.5878643,33.4290171 21.2472961,32.2990152 17.82,32.3506751 C7.82,32.3506751 0,40.6306751 0,51.0706751 C0,61.5106751 7.83,69.7906751 17.82,69.7906751 C21.096228,69.8422585 24.2981034,68.8124566 26.93,66.8606751 C27.1472964,66.6988546 27.4370379,66.6727164 27.6797867,66.7930353 C27.9225355,66.9133543 28.0771907,67.1597587 28.08,67.4306751 L28.08,68.4306751 C28.0799814,68.6233763 28.1572095,68.8080431 28.2944063,68.9433604 C28.4316031,69.0786778 28.6173174,69.1533515 28.81,69.1506751 L38.72,69.0806751 C38.9227239,69.0785848 39.1154481,68.9922843 39.2520109,68.8424446 C39.3885737,68.6926048 39.4566739,68.4927229 39.44,68.2906751 L36.44,38.3606751 C36.4300519,38.2843312 36.4300519,38.2070191 36.44,38.1306751 C36.84,36.6506751 35.28,20.5906751 41.87,18.2606751 Z M20.09,59.6206751 C15.6483071,59.6506848 11.9360802,56.2481737 11.58,51.8206751 C11.2180455,47.0644793 14.7745993,42.9129297 19.53,42.5406751 C22.6498882,42.3270844 25.6374871,43.8338147 27.3203665,46.4695765 C29.003246,49.1053383 29.1128933,52.4495812 27.6062793,55.1899165 C26.0996654,57.9302519 23.2171787,59.629444 20.09,59.6206751 L20.09,59.6206751 Z" id="Shape" fill="#DA1C5C"></path>
+                <path d="M77.87,32.4906751 L77.87,42.6606751 C76.7761238,42.4215927 75.6596988,42.3008981 74.54,42.3006751 C68.87,42.3006751 64.82,45.7206751 64.82,51.6606751 L64.82,68.8506751 L53.28,68.8506751 L53.28,32.8506751 L64.8,32.8506751 L64.8,37.8506751 C66.9580221,34.3495108 70.7672724,32.2068075 74.88,32.1806751 C75.8865932,32.1327621 76.8946465,32.237276 77.87,32.4906751 Z" id="Path" fill="#231F20"></path>
+                <path d="M124.76,59.4906751 L124.76,68.8506751 C123.800745,69.2996424 122.758807,69.5448041 121.7,69.5706751 C117.18482,69.6420597 112.970801,67.3123584 110.63,63.4506751 C107.739892,67.3614161 103.142288,69.6397431 98.28,69.5706751 C88.28,69.5706751 80.46,61.2906751 80.46,50.8506751 C80.46,40.4106751 88.28,32.1306751 98.28,32.1306751 C102.067426,32.0705592 105.735752,33.4542258 108.54,36.0006751 L108.54,32.8506751 L119.97,32.8506751 L119.97,55.9806751 C119.97,58.9806751 121.59,59.4906751 123.12,59.4906751 L124.76,59.4906751 Z M109.1,50.8506751 C109.085604,47.8475704 107.50927,45.0684228 104.939156,43.5149229 C102.369043,41.961423 99.1756592,41.8575243 96.51,43.2406751 C94.6125959,44.1591882 93.1691372,45.8083398 92.51,47.8106751 C91.312298,51.0229622 92.1442396,54.6399405 94.6250484,57.0061328 C97.1058571,59.3723251 100.758116,60.032372 103.910201,58.6841724 C107.062285,57.3359728 109.107595,54.2389797 109.11,50.8106751 L109.1,50.8506751 Z" id="Shape" fill="#231F20"></path>
+                <path d="M128.9,50.8506751 C128.9,40.0506751 136.9,32.1306751 148.97,32.1306751 C159.77,32.1306751 167.15,38.4306751 168.68,47.4306751 L156.8,47.4306751 C155.502064,44.2659453 152.389752,42.2268444 148.97,42.3006751 C144.247965,42.3006751 140.42,46.1286405 140.42,50.8506751 C140.42,55.5727097 144.247965,59.4006751 148.97,59.4006751 C152.389752,59.4745059 155.502064,57.4354049 156.8,54.2706751 L168.68,54.2706751 C167.15,63.2706751 159.77,69.5706751 148.97,69.5706751 C136.91,69.5706751 128.9,61.6506751 128.9,50.8506751 Z" id="Path" fill="#231F20"></path>
+                <path d="M210.71,46.0706751 L210.71,68.8406751 L199.19,68.8406751 L199.19,47.9706751 C199.253168,46.4797518 198.701105,45.0283401 197.663072,43.9562726 C196.625038,42.8842051 195.192185,42.2856219 193.7,42.3006751 C190.316836,42.3762545 187.606185,45.1267684 187.58,48.5106751 L187.58,68.8506751 L176.06,68.8506751 L176.06,7.20067514 L187.58,7.20067514 L187.58,36.9006751 C190.068699,33.897523 193.759726,32.1508765 197.66,32.1306751 C204.95,32.1306751 210.71,38.1606751 210.71,46.0706751 Z" id="Path" fill="#231F20"></path>
+                <path d="M233.66,41.7606751 L233.66,54.6306751 C233.66,57.6306751 235.37,59.4906751 237.8,59.4906751 L242.12,59.4906751 L242.12,68.4006751 C241.22,69.0306751 238.79,69.5706751 236.36,69.5706751 C228.71,69.5706751 222.23,63.6306751 222.23,55.9806751 L222.23,41.7606751 L216.23,41.7606751 L216.23,32.8506751 L222.23,32.8506751 L222.23,18.9906751 L233.66,18.9906751 L233.66,32.8506751 L242.21,32.8506751 L242.21,41.7606751 L233.66,41.7606751 Z" id="Path" fill="#231F20"></path>
+                <path d="M251.41,21.4206751 C251.008969,18.6088057 252.539085,15.8762978 255.146035,14.7488008 C257.752984,13.6213038 260.792026,14.3776662 262.566361,16.595586 C264.340697,18.8135057 264.411505,21.9444549 262.739251,24.2403209 C261.066997,26.536187 258.065256,27.4291648 255.41,26.4206751 C253.267258,25.60455 251.735862,23.6903043 251.41,21.4206751 L251.41,21.4206751 Z M251.89,32.8506751 L263.28,32.8506751 L263.28,68.8506751 L251.89,68.8506751 L251.89,32.8506751 Z" id="Shape" fill="#231F20"></path>
+                <path d="M271.69,50.8506751 C271.69,40.0506751 279.69,32.1306751 291.76,32.1306751 C303.83,32.1306751 311.76,40.0506751 311.76,50.8506751 C311.76,61.6506751 303.84,69.5706751 291.76,69.5706751 C279.68,69.5706751 271.69,61.6506751 271.69,50.8506751 Z M300.31,50.8506751 C300.31,46.1286405 296.482035,42.3006751 291.76,42.3006751 C287.037965,42.3006751 283.21,46.1286405 283.21,50.8506751 C283.21,55.5727097 287.037965,59.4006751 291.76,59.4006751 C294.032286,59.425168 296.218223,58.5312532 297.822238,56.9215897 C299.426254,55.3119261 300.31248,53.1228609 300.28,50.8506751 L300.31,50.8506751 Z" id="Shape" fill="#231F20"></path>
+                <path d="M41.85,18.1506751 L41.85,17.8606751 C41.8501565,17.5243315 41.8870418,17.1890106 41.96,16.8606751 C42.53,5.95067514 42.71,-4.44932486 40.79,1.97067514 C37.26,13.8606751 20.21,27.6406751 20.21,27.6406751 C20.21,27.6406751 31.73,24.1706751 34.59,20.2406751 C37.45,16.3106751 40.71,35.7906751 40.71,35.7906751 C40.71,35.7906751 41.39,27.1506751 41.88,18.3606751 C41.865533,18.2913863 41.8555125,18.2212432 41.85,18.1506751 L41.85,18.1506751 Z" id="Path" fill="#DA1C5C"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/public/svg/jambonz.svg
+++ b/public/svg/jambonz.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="649px" height="213px" viewBox="0 0 649 213" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Logo">
+            <path d="M16.7269,19.605 C15.4359,21.9104 14.9386,24.5764 15.3117,27.1923 C15.6177,29.3235 16.4884,31.3341 17.8334,33.0154 C19.1785,34.6967 20.9489,35.9875 22.961,36.7539 C25.4312,37.6921 28.1412,37.7922 30.6738,37.0387 C33.2065,36.2853 35.4212,34.7202 36.9769,32.5843 C38.5326,30.4485 39.3429,27.8605 39.2832,25.2189 C39.2234,22.5772 38.2969,20.0284 36.6462,17.9651 C34.9956,15.9018 32.7124,14.4384 30.1483,13.8002 C27.5842,13.1621 24.8814,13.3846 22.4562,14.4335 C20.031,15.4824 18.0179,17.2995 16.7269,19.605 Z" id="Path" fill="#231F20" fill-rule="nonzero"></path>
+            <path d="M16.1782,117.568 C16.1782,123.305 12.9082,126.862 8.26124,126.862 L0,126.862 L0,143.9 C1.72109,145.105 6.36805,146.138 11.015,146.138 C25.6442,146.138 38.036,134.779 38.036,120.149 L38.036,49.0583 L16.1782,49.0583 L16.1782,117.568 Z" id="Path" fill="#231F20" fill-rule="nonzero"></path>
+            <path d="M130.732,99.9951 L130.732,117.894 C128.897,118.753 126.905,119.222 124.88,119.271 C120.637,119.338 116.45,118.293 112.736,116.24 C109.022,114.187 105.91,111.197 103.711,107.568 C100.986,111.254 97.4234,114.238 93.3164,116.274 C89.2094,118.309 84.6767,119.336 80.0935,119.271 C60.9703,119.271 46.0159,103.437 46.0159,83.4727 C46.0159,63.508 60.9703,47.674 80.0935,47.674 C87.3363,47.559 94.3513,50.205 99.7139,55.0747 L99.7139,49.0509 L121.572,49.0509 L121.572,93.2829 C121.572,99.0198 124.67,99.9951 127.596,99.9951 L130.732,99.9951 Z M100.785,83.4727 C100.771,80.6486 100.032,77.8754 98.6391,75.4189 C97.2458,72.9625 95.2448,70.9052 92.8279,69.4443 C90.4111,67.9835 87.6594,67.168 84.8368,67.0762 C82.0143,66.9843 79.2154,67.6192 76.7087,68.9199 C74.9128,69.7893 73.3102,71.0109 71.9961,72.5123 C70.682,74.0137 69.6833,75.764 69.0594,77.6592 C68.2216,79.9061 67.8872,82.3096 68.0796,84.6999 C68.2721,87.0902 68.9867,89.4091 70.1732,91.4931 C71.3597,93.5771 72.989,95.3753 74.9462,96.7609 C76.9035,98.1464 79.141,99.0856 81.5008,99.512 C83.8606,99.9385 86.2852,99.8419 88.6036,99.2291 C90.9221,98.6162 93.0778,97.502 94.9186,95.9651 C96.7594,94.4283 98.2405,92.5062 99.2574,90.3344 C100.274,88.1627 100.802,85.7942 100.804,83.3961 L100.785,83.4727 Z" id="Shape" fill="#231F20" fill-rule="nonzero"></path>
+            <path d="M140.612,117.895 L140.612,49.0486 L162.641,49.0486 L162.641,56.7958 C164.992,53.9589 167.937,51.6718 171.267,50.0958 C174.598,48.5198 178.233,47.6932 181.918,47.6741 C191.344,47.6741 199.432,52.946 203.683,61.0366 C204.639,59.6404 205.802,58.0306 206.871,56.7958 C209.242,54.0553 212.166,51.6718 215.497,50.0958 C218.827,48.5198 222.462,47.6932 226.147,47.6741 C240.088,47.6741 251.103,59.2054 251.103,74.3318 L251.103,117.875 L229.073,117.875 L229.073,77.9652 C229.133,76.5544 228.904,75.1462 228.402,73.8264 C227.9,72.5066 227.135,71.3028 226.153,70.2884 C225.171,69.274 223.992,68.4701 222.689,67.9258 C221.386,67.3815 219.986,67.1082 218.574,67.1224 C215.462,67.1919 212.5,68.4707 210.315,70.6877 C208.172,72.862 206.943,75.7711 206.873,78.8186 L206.873,117.875 L184.844,117.875 L184.844,77.9652 C184.903,76.5544 184.675,75.1462 184.173,73.8264 C183.671,72.5066 182.906,71.3028 181.923,70.2884 C180.941,69.274 179.763,68.4701 178.46,67.9258 C177.157,67.3815 175.757,67.1082 174.345,67.1224 C171.233,67.1919 168.271,68.4707 166.086,70.6877 C163.901,72.9047 162.666,75.8854 162.641,78.9979 L162.641,117.895 L140.612,117.895 Z" id="Path" fill="#231F20" fill-rule="nonzero"></path>
+            <path d="M284.925,111.959 L284.925,117.895 L262.895,117.895 L262.895,0 L284.925,0 L284.925,55.0664 C290.286,50.2021 297.297,47.5592 304.536,47.6741 C323.659,47.6741 338.613,63.5081 338.613,83.4728 C338.613,103.437 323.659,119.271 304.536,119.271 C299.953,119.337 295.42,118.309 291.313,116.274 C288.992,115.124 286.845,113.671 284.925,111.959 Z M285.99,75.4191 C284.597,77.8755 283.858,80.6487 283.845,83.4728 L283.825,83.3963 C283.827,85.7943 284.355,88.1628 285.372,90.3346 C286.389,92.5063 287.87,94.4284 289.711,95.9652 C291.552,97.5021 293.707,98.6163 296.026,99.2292 C298.344,99.842 300.769,99.9387 303.129,99.5122 C305.488,99.0857 307.726,98.1465 309.683,96.761 C311.64,95.3754 313.27,93.5772 314.456,91.4932 C315.643,89.4093 316.357,87.0903 316.55,84.7 C316.742,82.3097 316.408,79.9063 315.57,77.6593 C314.946,75.7641 313.947,74.0138 312.633,72.5124 C311.319,71.0111 309.717,69.7894 307.921,68.92 C305.414,67.6194 302.615,66.9845 299.793,67.0763 C296.97,67.1681 294.218,67.9836 291.801,69.4445 C289.385,70.9053 287.384,72.9626 285.99,75.4191 Z" id="Shape" fill="#231F20"></path>
+            <path d="M346.581,83.4727 C346.581,62.8197 361.879,47.6741 384.961,47.6741 C408.043,47.6741 423.207,62.8197 423.207,83.4727 C423.207,104.126 408.062,119.271 384.961,119.271 C361.86,119.271 346.581,104.126 346.581,83.4727 Z M401.311,83.4727 C401.311,80.2389 400.352,77.0778 398.556,74.389 C396.759,71.7002 394.206,69.6045 391.218,68.367 C388.23,67.1295 384.943,66.8057 381.771,67.4366 C378.6,68.0674 375.686,69.6246 373.4,71.9113 C371.113,74.1979 369.556,77.1113 368.925,80.2829 C368.294,83.4546 368.618,86.7421 369.855,89.7297 C371.093,92.7174 373.188,95.271 375.877,97.0676 C378.566,98.8641 381.727,99.823 384.961,99.823 C387.112,99.8462 389.246,99.4388 391.237,98.6246 C393.228,97.8104 395.036,96.606 396.554,95.0823 C398.072,93.5586 399.27,91.7464 400.078,89.7526 C400.885,87.7588 401.285,85.6235 401.254,83.4727 L401.311,83.4727 Z" id="Shape" fill="#231F20" fill-rule="nonzero"></path>
+            <path d="M431.175,49.0431 L431.175,117.895 L453.205,117.895 L453.205,78.9979 C453.229,75.8854 454.464,72.9047 456.649,70.6877 C458.834,68.4707 461.796,67.1919 464.908,67.1224 C466.32,67.1082 467.72,67.3815 469.023,67.9258 C470.326,68.4701 471.505,69.274 472.487,70.2884 C473.469,71.3028 474.235,72.5066 474.737,73.8264 C475.239,75.1462 475.467,76.5544 475.407,77.9652 L475.407,117.875 L497.437,117.875 L497.437,74.3318 C497.437,59.2054 486.422,47.6741 472.481,47.6741 C468.797,47.6932 465.161,48.5198 461.831,50.0958 C458.5,51.6718 455.556,53.9589 453.205,56.7958 L453.205,49.0431 L431.175,49.0431 Z" id="Path" fill="#231F20" fill-rule="nonzero"></path>
+            <path d="M552.288,67.2054 C550.533,65.2934 547.308,63.3419 541.476,63.5469 C529.761,63.9587 523.766,75.0885 525.135,81.5759 C526.226,86.7428 522.921,91.8154 517.754,92.9059 C512.587,93.9964 507.515,90.6918 506.424,85.5249 C502.712,67.9368 516.694,45.283 540.804,44.4355 C551.73,44.0515 560.519,47.8936 566.376,54.2733 C572.026,60.4288 574.505,68.4947 573.837,75.8471 C572.514,90.4014 561.294,98.132 553.314,103.169 L552.947,103.401 C560.751,105.477 567.732,109.3 573.654,114.473 C581.83,121.615 587.724,131.083 591.132,141.515 C602.593,146.006 613.885,152.148 624.164,160.113 C625.588,154.886 629.044,147.961 632.213,145.361 C640.793,161.753 646.346,185.684 648.305,203.786 C636.364,198.042 613.993,190.787 598.981,188.666 C601.859,183.086 607.729,177.682 612.267,175.088 C606.644,170.752 600.635,167.037 594.441,163.914 C593.768,176.812 587.773,188.12 579.654,196.456 C570.419,205.94 557.705,212.351 545.014,212.939 C533.206,213.486 522.067,210.344 513.76,203.503 C505.292,196.53 500.444,186.23 500.745,174.206 C501.035,162.596 505.809,151.435 514.635,143.457 C523.54,135.409 535.977,131.123 550.61,132.187 C555.615,132.551 560.807,133.234 566.097,134.255 C564.577,132.272 562.896,130.467 561.073,128.875 C553.309,122.093 542.394,118.61 528.39,122.148 C528.065,122.23 527.739,122.295 527.412,122.342 C522.518,123.318 518.103,123.096 516.388,120.409 C514.27,117.092 514.163,112.712 519.024,106.168 C522.272,101.538 526.394,98.0112 530.331,95.1763 C533.391,92.973 536.851,90.8513 539.885,88.9914 C541.035,88.2863 542.124,87.6186 543.106,86.9986 C551.38,81.7756 554.396,78.4765 554.792,74.1157 C554.978,72.0653 554.249,69.3415 552.288,67.2054 Z M574.952,156.124 C566.16,153.452 557.408,151.855 549.223,151.26 C539.229,150.533 532.089,153.458 527.458,157.644 C522.749,161.9 520.029,167.996 519.862,174.684 C519.705,180.957 522.088,185.588 525.917,188.741 C529.907,192.027 536.131,194.207 544.128,193.836 C551.243,193.507 559.559,189.682 565.954,183.114 C572.254,176.645 575.96,168.286 575.305,159.444 C575.222,158.326 575.104,157.219 574.952,156.124 Z" id="Shape" fill="#DA1C5C"></path>
+        </g>
+    </g>
+</svg>
--- a/styles/_colors.scss
+++ b/styles/_colors.scss
@@ -0,0 +1,7 @@
+$black: #000;
+$white: #fff;
+$jambonz: #da1c5c;
+$charcoal: #231f20;
+$purple: #9662b2;
+$teal: #30beb0;
+$blue: #006dff;
--- a/styles/_fonts.scss
+++ b/styles/_fonts.scss
@@ -0,0 +1,63 @@
+@font-face {
+    font-family: 'objectivitybold_italic';
+    src: url('/fonts/objectivity-boldslanted-webfont.woff2') format('woff2'),
+         url('/fonts/objectivity-boldslanted-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'objectivityblack_slanted';
+    src: url('/fonts/objectivity-blackslanted-webfont.woff2') format('woff2'),
+         url('/fonts/objectivity-blackslanted-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'objectivityitalic';
+    src: url('/fonts/objectivity-regularslanted-webfont.woff2') format('woff2'),
+         url('/fonts/objectivity-regularslanted-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'objectivitymedium_slanted';
+    src: url('/fonts/objectivity-mediumslanted-webfont.woff2') format('woff2'),
+         url('/fonts/objectivity-mediumslanted-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'objectivitybold';
+    src: url('/fonts/objectivity-bold-webfont.woff2') format('woff2'),
+         url('/fonts/objectivity-bold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'objectivityblack';
+    src: url('/fonts/objectivity-black-webfont.woff2') format('woff2'),
+         url('/fonts/objectivity-black-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'objectivityregular';
+    src: url('/fonts/objectivity-regular-webfont.woff2') format('woff2'),
+         url('/fonts/objectivity-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'objectivitymedium';
+    src: url('/fonts/objectivity-medium-webfont.woff2') format('woff2'),
+         url('/fonts/objectivity-medium-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
--- a/styles/_jambonz-ui.scss
+++ b/styles/_jambonz-ui.scss
@@ -0,0 +1,198 @@
+/******************************************************************************
+ * Typography
+*******************************************************************************/
+html,
+body {
+  font-family: 'objectivityregular';
+  letter-spacing: -0.02px;
+  color: $charcoal;
+}
+
+a {
+  color: $jambonz;
+}
+
+strong {
+  font-family: 'objectivitybold';
+}
+
+em {
+  font-family: 'objectivityitalic';
+}
+
+.h1 {
+  font-size: 48px;
+  line-height: 1.33;
+  letter-spacing: -0.06px;
+  font-family: 'objectivitybold';
+
+  em {
+    font-family: 'objectivitybold_italic';
+  }
+}
+
+.h2 {
+  font-size: 40px;
+  line-height: 1.35;
+  letter-spacing: -0.05px;
+  font-family: 'objectivitybold';
+
+  em {
+    font-family: 'objectivitybold_italic';
+  }
+}
+
+.h3 {
+  font-size: 36px;
+  line-height: 1.33;
+  letter-spacing: -0.05px;
+  font-family: 'objectivitybold';
+
+  em {
+    font-family: 'objectivitybold_italic';
+  }
+}
+
+.h4 {
+  font-size: 32px;
+  line-height: 1.56;
+  letter-spacing: -0.04px;
+}
+
+.h5 {
+  font-size: 24px;
+  line-height: 1.67;
+  letter-spacing: -0.03px;
+}
+
+.h6 {
+  font-size: 20px;
+  line-height: 1.8;
+  letter-spacing: -0.03px;
+}
+
+.p {
+  font-size: 18px;
+  line-height: 1.9;
+}
+
+.m {
+  font-size: 16px;
+  line-height: 1.9;
+}
+
+.ms {
+  font-size: 14px;
+  line-height: 2;
+}
+
+.mxs {
+  font-size: 12px;
+  line-height: 2;
+}
+
+/******************************************************************************
+ * Buttons
+*******************************************************************************/
+.btn {
+  font-size: 16px;
+  line-height: 1;
+  padding: 23px 65px 21px;
+  background-color: $jambonz;
+  color: $white;
+  text-decoration: none;
+  font-family: 'objectivitybold';
+  border-radius: 30px;
+  display: inline-block;
+
+  &--dark {
+    background-color: $charcoal;
+  }
+
+  &--light {
+    background-color: $white;
+    color: $jambonz;
+  }
+
+  &--pill {
+    background-color: transparent;
+    border: 2px solid $charcoal;
+    color: $charcoal;
+    padding: 19px 32px 18px;
+    font-family: 'objectivityregular';
+    
+    svg, span {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    svg {
+      margin-right: 16px;
+    }
+  }
+
+  &--login {
+    background-color: transparent;
+    border: 2px solid $jambonz;
+    color: $jambonz;
+    padding: 10px 26px 8px;
+    font-family: 'objectivityregular';
+    font-size: 14px;
+  }
+}
+
+.btns {
+  margin: 0 -32px;
+
+  .btn {
+    margin: 0 32px;
+  }
+}
+
+/******************************************************************************
+ * Icons
+*******************************************************************************/
+.icon {
+  display: inline-block;
+  background-color: $jambonz;
+  width: 48px;
+  height: 48px;
+  border-radius: 24px;
+  position: relative;
+
+  svg {
+    stroke: $white;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &--pill {
+    background-color: transparent;
+    border: 2px solid $jambonz;
+
+    svg {
+      stroke: $jambonz;
+    }
+  }
+}
+
+.icons {
+  margin: 0 -16px;
+
+  .icon {
+    margin: 0 16px;
+  }
+}
+
+/******************************************************************************
+ * Layout
+*******************************************************************************/
+.bg-jambonz {
+  background-color: $jambonz;
+}
+
+.bg-charcoal {
+  background-color: $charcoal;
+}
--- a/styles/_kitofparts.scss
+++ b/styles/_kitofparts.scss
@@ -0,0 +1,52 @@
+.wrap {
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
+.wrap-text {
+  .h1 {
+    max-width: 1024px;
+  }
+
+  .h2 {
+    max-width: 950px;
+  }
+
+  .h3 {
+    max-width: 860px;
+  }
+
+  .h4 {
+    max-width: 875px;
+  }
+
+  .h5 {
+    max-width: 768px;
+  }
+
+  .h6 {
+    max-width: 640px;
+  }
+
+  .p {
+    max-width: 640px;
+  }
+
+  .m, .ms {
+    max-width: 500px;
+  }
+
+  .mxs {
+    max-width: 380px;
+  }
+}
+
+.pad {
+  padding-top: 64px;
+  padding-bottom: 64px;
+}
+
+.padr {
+  padding-left: 64px;
+  padding-right: 64px;
+}
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -0,0 +1,19 @@
+/******************************************************************************
+ * Colors
+*******************************************************************************/
+@import 'colors.scss';
+
+/******************************************************************************
+ * Fonts
+*******************************************************************************/
+@import 'fonts.scss';
+
+/******************************************************************************
+ * Jambonz UI
+*******************************************************************************/
+@import 'jambonz-ui.scss';
+
+/******************************************************************************
+ * Kit of Parts
+*******************************************************************************/
+@import 'kitofparts.scss';
--- a/theme.config.js
+++ b/theme.config.js
@@ -0,0 +1,41 @@
+export default {
+  repository: 'https://github.com/jambonz/next-static-site',
+  titleSuffix: ' – Jambonz',
+  logo: (
+    <>
+      <span className="mr-2 font-extrabold hidden md:inline">Jambonz</span>
+      <span className="text-gray-600 font-normal hidden md:inline">
+        Home
+      </span>
+    </>
+  ),
+  head: (
+    <>
+      <meta name="msapplication-TileColor" content="#ffffff" />
+      <meta name="theme-color" content="#ffffff" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta httpEquiv="Content-Language" content="en" />
+      <meta name="description" content="Nextra: the next site builder" />
+      <meta name="og:description" content="Nextra: the next site builder" />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:image" content="https://jambonz.vercel.app/og.png" />
+      <meta name="twitter:site:domain" content="jambonz.vercel.app" />
+      <meta name="twitter:url" content="https://jambonz.vercel.app" />
+      <meta name="og:title" content="Nextra: Next.js static site generator" />
+      <meta name="og:image" content="https://jambonz.vercel.app/og.png" />
+      <meta name="apple-mobile-web-app-title" content="Jambonz" />
+      <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png"/>
+      <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png"/>
+      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
+      <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png"/>
+      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
+      <meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/>
+    </>
+  ),
+  search: true,
+  prevLinks: true,
+  nextLinks: true,
+  footer: true,
+  footerEditOnGitHubLink: true,
+  footerText: <>MIT {new Date().getFullYear()} © Nextra.</>
+}
--- a/yarn.lock
+++ b/yarn.lock