ben.carrasco/next-static-site
1
0
Fork 0
mirror of https://github.com/jambonz/next-static-site.git synced 2025-12-19 04:47:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove Nextra -- Custom docs theme

Browse Source
This commit is contained in:
kitajchuk
2021-04-06 17:52:42 -07:00
parent 10960dd69f
commit 51b270cb80
45 changed files with 785 additions and 1520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
pages/_app.js
View File

@@ -1,4 +1,3 @@
import 'nextra-theme-docs/style.css';
import '../styles/global.scss';
export default function App({Component, pageProps}) {

112
pages/docs/[[...slug]].js Normal file
View File

@@ -0,0 +1,112 @@
import { useEffect, useState } from 'react';
import { nanoid } from 'nanoid';
import classNames from 'classnames';
import Prism from 'prismjs';
import Link from 'next/link';
import { useRouter } from 'next/router';
import Layout from '../../components/layout';
import { Icon } from '../../components/jambonz-ui';
import { getData, getDocs, getDocsPaths } from '../../lib/data';
function Sidebar({data}) {
const router = useRouter();
const [active, setActive] = useState({
[data.navi[0].path]: true,
});
const handleToggle = (slug) => {
setActive((oldActive) => {
const newActive = {};
for (let i in oldActive) {
newActive[i] = oldActive[i];
}
newActive[slug] = newActive[slug] ? false : true;
return newActive;
});
};
return (
<nav className="bg-pink docs__navi">
<ul className="docs__list">
{data.navi.map((item) => {
const isActiveToggle = (active[item.path] ? true : false);
const subClasses = {
'docs__sublist': true,
'active': isActiveToggle,
};
return (
<li key={nanoid()} className="docs__item">
<div className="m docs__label" onClick={() => handleToggle(item.path)}>
<strong>{item.title}</strong>
{isActiveToggle ? <Icon name="ChevronUp" /> : <Icon name="ChevronDown" />}
</div>
<ul className={classNames(subClasses)}>
{item.pages.map((page) => {
const isActiveItem = (router.asPath.split('/').pop() === page.path);
const itemClasses = {
'ms': true,
'active': isActiveItem,
};
return (
<li key={nanoid()} className="docs__subitem">
<Link href={`/docs/${item.path}/${page.path}`}>
<a className={classNames(itemClasses)}>{page.title}</a>
</Link>
</li>
);
})}
</ul>
</li>
);
})}
</ul>
</nav>
);
}
export default function Docs({ data, docs }) {
useEffect(() => {
setTimeout(() => Prism.highlightAll(), 0);
});
return (
<Layout siteData={data.site}>
<div className="docs">
<div className="wrap docs__wrap">
<Sidebar data={data.docs} />
<div className="docs__html">
<div dangerouslySetInnerHTML={{ __html: docs.contentHtml }} />
</div>
</div>
</div>
</Layout>
);
}
export async function getStaticPaths() {
const paths = getDocsPaths();
return {
paths,
fallback: false,
};
}
export async function getStaticProps({ params }) {
const data = getData('docs');
const docs = await getDocs(params.slug);
return {
props: {
data,
docs,
},
};
}

3
pages/docs/advanced/meta.json
View File

@@ -1,3 +0,0 @@
{
"code-highlighting": "Code Highlighting"
}

57
pages/docs/anchors.md
View File

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

0
pages/docs/advanced/code-highlighting.mdx → pages/docs/api/rest.md
View File

1
pages/docs/api/webhooks.md Normal file
View File

@@ -0,0 +1 @@
# Webhooks

81
pages/docs/built-in-components.mdx
View File

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

78
pages/docs/get-started.mdx
View File

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

3
pages/docs/getting-started/add-application.md Normal file
View File

@@ -0,0 +1,3 @@
# Add an Application
TODO

3
pages/docs/getting-started/add-carrier.md Normal file
View File

@@ -0,0 +1,3 @@
# Add a Carrier
TODO

3
pages/docs/getting-started/add-phone-numbers.md Normal file
View File

@@ -0,0 +1,3 @@
# Add Phone Numbers
TODO

3
pages/docs/getting-started/add-speech.md Normal file
View File

@@ -0,0 +1,3 @@
# Add Speech Credentials
TODO

3
pages/docs/getting-started/register-sip-client.md Normal file
View File

@@ -0,0 +1,3 @@
# Register sip clients
TODO

40
pages/docs/i18n.md
View File

@@ -1,40 +0,0 @@
# 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' },
]
```

14
pages/docs/index.md
View File

@@ -1,7 +1,13 @@
# Nextra
# jambonz
**Nextra** is a [Next.js](https://nextjs.org) based static site generator. 0 lines of code needed.
jambonz is a CPaaS that is designed for communications service providers. As an API-driven platform, you will primarily interface with it using [Webhooks]() and [REST APIs]().
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.
jambonz is available for use both as cloud APIs, or as an open source platform that you can run on your own infrastructure. Either way, your applications are written in the same fashion, so you can start off by using the cloud APIs and later migrate to running your own platform if you like.
![](/demo.png)
jambonz is also a "Bring Your Own Everything" (BYOE) CPaaS, meaning that you will [plug in your own SIP trunking providers](), and [use your own AWS or Google credentials]() for speech processing.
Follow the [Getting Started]() pages that follow to get yourself up and running on the cloud platform, or dive into the [API Reference]() or examine [client SDKs]() and [sample applications]() for inspiration.
```javascript
const foo = "bar";
```

119
pages/docs/mdx.mdx
View File

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

10
pages/docs/meta.json
View File

@@ -1,10 +0,0 @@
{
"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"
}

1
pages/docs/open-source/overview.md Normal file
View File

@@ -0,0 +1 @@
# Overview

32
pages/docs/ssg.mdx
View File

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

7
pages/docs/structure.md
View File

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

1
pages/docs/tutorials/overview.md Normal file
View File

@@ -0,0 +1 @@
# Overview

15
pages/index.js
View File

@@ -1,13 +1,14 @@
import { nanoid } from 'nanoid';
import classNames from 'classnames';
import { useState, useEffect, useRef } from 'react';
import Layout from '../components/layout';
import { Hero, Icon, Button, H6, H5, H2, P, MS, normalizeSubtext, normalizeSlug, useMobileMedia } from '../components/jambonz-ui';
import { getData } from '../lib/data';
import { useState, useEffect, useRef } from 'react';
function Tech({data}) {
return (
<div className="tech wrap">
<section className="tech wrap">
<div className="tech__image">
<img src={data.image} />
</div>
@@ -23,7 +24,7 @@ function Tech({data}) {
);
})}
</ul>
</div>
</section>
);
}
@@ -54,7 +55,7 @@ function Dilemma({data}) {
}, [mobile, active, setActive, initialRef]);
return (
<div className="bg-grey dilemma pad">
<section className="bg-grey dilemma pad">
<div className="wrap dilemma__wrap">
<div className="dilemma__headline">
<H2>{data.headline}</H2>
@@ -113,13 +114,13 @@ function Dilemma({data}) {
})}
</div>
</div>
</div>
</section>
);
}
function BYO({data}) {
return (
<div className="byo pad">
<section className="byo pad">
<div className="wrap byo__wrap">
<div className="byo__headline">
<H2>{data.headline}</H2>
@@ -142,7 +143,7 @@ function BYO({data}) {
<Button href={data.url} subStyle="dark" target="_blank">{data.cta}</Button>
</div>
</div>
</div>
</section>
);
}

6
pages/jambonz-ui.js
View File

@@ -1,6 +1,6 @@
import Layout from '../components/layout';
import Link from 'next/link';
import Image from 'next/image';
import Layout from '../components/layout';
import { P, M, MS, MXS, H1, H2, H3, H4, H5, H6, Button, Icon } from '../components/jambonz-ui';
import { getData } from '../lib/data';
@@ -109,7 +109,7 @@ export default function JambonzUI({ data }) {
<MXS>{pageData.text}</MXS>
</div>
<div className="pad">
<Image src="/images/Jambonz_app_screenshot.png" width={1280 / 2} height={842 / 2} />
<img src="/images/Jambonz_app_screenshot.png" />
</div>
<div className="pad">
<div className="icons">

3
pages/meta.json
View File

@@ -1,3 +0,0 @@
{
"docs": "Jambonz Docs"
}

16
pages/pricing.js
View File

@@ -1,12 +1,12 @@
import { nanoid } from 'nanoid';
import Layout from '../components/layout';
import Link from 'next/link';
import { Hero, Icon, Button, H2, H5, P, M, MS } from '../components/jambonz-ui';
import { getData } from '../lib/data';
import { nanoid } from 'nanoid';
function Touts({data}) {
return (
<div className="bg-pink touts">
<section className="bg-pink touts">
<div className="wrap touts__wrap">
{data.map((tout) => {
return (
@@ -17,13 +17,13 @@ function Touts({data}) {
);
})}
</div>
</div>
</section>
);
}
function Tiers({ data }) {
return (
<div className="tiers pad">
<section className="tiers pad">
<div className="wrap tiers__wrap">
{data.map((tier) => {
return (
@@ -52,13 +52,13 @@ function Tiers({ data }) {
);
})}
</div>
</div>
</section>
);
}
function Services({data}) {
return (
<div className="bg-grey services pad">
<section className="bg-grey services pad">
<div className="wrap services__wrap">
<div className="services__headline">
<H2>{data.headline}</H2>
@@ -85,7 +85,7 @@ function Services({data}) {
</Button>
</div>
</div>
</div>
</section>
);
}

11
pages/why.js
View File

@@ -1,11 +1,12 @@
import { nanoid } from 'nanoid';
import Layout from '../components/layout';
import { Hero, Icon, Button, H5, H2, P } from '../components/jambonz-ui';
import { getData } from '../lib/data';
import { nanoid } from 'nanoid';
function Facts({data}) {
return (
<div className="bg-pink facts">
<section className="bg-pink facts">
<div className="wrap facts__wrap">
<div className="facts__items">
{data.map((fact) => {
@@ -21,13 +22,13 @@ function Facts({data}) {
})}
</div>
</div>
</div>
</section>
);
}
function OS({data}) {
return (
<div className="os pad">
<section className="os pad">
<div className="wrap os__wrap">
<div className="os__headline">
<H2>
@@ -55,7 +56,7 @@ function OS({data}) {
<Button href={data.url} subStyle="dark" target="_blank">{data.cta}</Button>
</div>
</div>
</div>
</section>
);
}