[docs][m]: refactor to have a common layout component for all pages and a common prose layout within that for "prose" docs (everything other than front page) - refs #559.

This commit is contained in:
Rufus Pollock 2021-06-15 19:24:12 +02:00
parent cd6c81e44b
commit 73bc3d1761
10 changed files with 127 additions and 169 deletions

View File

@ -1,15 +0,0 @@
export default function Footer() {
return (
<footer className="flex items-center justify-center w-full h-24 border-t">
<a
className="flex items-center justify-center"
href="https://datopian.com/"
target="_blank"
rel="noopener noreferrer"
>
Built by{' '}
<img src="/datopian-logo.png" alt="Datopian Logo" className="h-6 ml-2" />
</a>
</footer>
)
}

35
docs/components/layout.js Normal file
View File

@ -0,0 +1,35 @@
import Link from 'next/link'
import Head from 'next/head'
import Nav from '../components/Nav'
export default function Layout({
children,
title = 'Portal.JS',
}) {
return (
<div>
<Head>
<title>{title}</title>
<link rel="icon" href="/favicon.ico" />
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<Nav />
{children}
<footer className="flex items-center justify-center w-full h-24 border-t">
<a
className="flex items-center justify-center"
href="https://datopian.com/"
target="_blank"
rel="noopener noreferrer"
>
Built by{' '}
<img src="/datopian-logo.png" alt="Datopian Logo" className="h-6 ml-2" />
</a>
</footer>
</div>
)
}

13
docs/components/prose.js Normal file
View File

@ -0,0 +1,13 @@
export default function Prose({
children,
mdFile=null
}) {
return (
<main className="prose mx-auto my-24">
{mdFile &&
<div dangerouslySetInnerHTML={{ __html: mdFile }} />
}
{children}
</main>
)
}

View File

@ -1,33 +1,22 @@
import Head from 'next/head'
import Link from 'next/link'
import path from 'path'
import Nav from '../components/Nav'
import Footer from '../components/Footer'
import Layout from '../components/layout'
import Prose from '../components/prose'
import { formatMD } from '../lib/utils'
export default function Docs({ mdFile }) {
return (
<>
<Head>
<title>Portal.js Api Documentation</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Nav />
<div>
<div className="prose">
<div dangerouslySetInnerHTML={{ __html: mdFile }} />
</div>
<br />
<Link href="/components">
<button >Next Page</button>
</Link>
</div>
<Footer />
</>
)
return (
<Layout title="Portal.js API Documentation">
<Prose mdFile={mdFile}>
<p className="text-center">
<Link href="/components">
<button>Next Page</button>
</Link>
</p>
</Prose>
</Layout>
)
}
@ -39,4 +28,4 @@ export async function getStaticProps() {
mdFile
}
}
}
}

View File

@ -1,38 +1,31 @@
import Head from 'next/head'
import Link from 'next/link'
import path from 'path'
import Nav from '../components/Nav'
import Footer from '../components/Footer'
import Layout from '../components/layout'
import Prose from '../components/prose'
import { formatMD } from '../lib/utils'
export default function Docs({ mdFile }) {
return (
<>
<Head>
<title>Portal.js API Documentation</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Nav />
<div className="prose mx-auto my-24">
<div dangerouslySetInnerHTML={{ __html: mdFile }} />
<Layout title="Portal.js API Documentation">
<Prose mdFile={mdFile}>
<p className="text-center">
<Link href="/installation">
<button>Next Page</button>
</Link>
</p>
</div>
<Footer />
</>
</Prose>
</Layout>
)
}
export async function getStaticProps() {
const mdFilePath = path.join(process.cwd(), "markdowns/api-doc/introduction.md")
const mdFile = await formatMD(mdFilePath)
return {
props: {
mdFile
}
const mdFilePath = path.join(process.cwd(), "markdowns/api-doc/introduction.md")
const mdFile = await formatMD(mdFilePath)
return {
props: {
mdFile
}
}
}

View File

@ -1,22 +1,13 @@
import Head from 'next/head'
import Nav from '../components/Nav'
import Footer from '../components/Footer'
import Layout from '../components/layout'
import Prose from '../components/prose'
export default function Gallery() {
return (
<>
<Head>
<title>Portal.js Gallery</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Nav />
<div >
<main >
</main>
<Footer />
</div>
</>
<Layout title="Portal.js Gallery">
<Prose>
<p className="text-center">Come back soon!</p>
</Prose>
</Layout>
)
}

View File

@ -1,17 +1,9 @@
import Head from 'next/head'
import Nav from '../components/Nav'
import Footer from '../components/Footer'
import Layout from '../components/layout'
export default function Home() {
return (
<>
<Head>
<title>Create Portal App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Nav />
<Layout>
<main className="flex flex-col items-center justify-center w-full flex-1 px-20 text-center py-10">
<h1 className="text-6xl font-bold">
<a href="https://portaljs.com/">
@ -65,8 +57,6 @@ export default function Home() {
</a>
</div>
</main>
<Footer />
</>
</Layout>
)
}

View File

@ -1,33 +1,22 @@
import Head from 'next/head'
import Link from 'next/link'
import path from 'path'
import Nav from '../components/Nav'
import Footer from '../components/Footer'
import Layout from '../components/layout'
import Prose from '../components/prose'
import { formatMD } from '../lib/utils'
export default function Docs({ mdFile }) {
return (
<>
<Head>
<title>Portal.js Api Documentation</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Nav />
<div>
<div className="prose">
<div dangerouslySetInnerHTML={{ __html: mdFile }} />
</div>
<br />
<Link href="/references">
<button >Next Page</button>
</Link>
</div>
<Footer />
</>
)
return (
<Layout title="Portal.js Installation">
<Prose mdFile={mdFile}>
<p className="text-center">
<Link href="/references">
<button>Next Page</button>
</Link>
</p>
</Prose>
</Layout>
)
}
@ -39,4 +28,4 @@ export async function getStaticProps() {
mdFile
}
}
}
}

View File

@ -1,36 +1,24 @@
import Head from 'next/head'
import Link from 'next/link'
import path from 'path'
import Nav from '../components/Nav'
import Footer from '../components/Footer'
import Layout from '../components/layout'
import Prose from '../components/prose'
import { formatMD } from '../lib/utils'
export default function Docs({ mdFile }) {
return (
<>
<Head>
<title>Portal.js Api Documentation</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Nav />
<div >
<div className="prose">
<div dangerouslySetInnerHTML={{ __html: mdFile }} />
</div>
<br />
<Link href="/references">
<button >Next Page</button>
</Link>
</div>
<Footer />
</>
)
return (
<Layout title="Portal.js - Learn">
<Prose mdFile={mdFile}>
<p className="text-center">
<Link href="/references">
<button>Next Page</button>
</Link>
</p>
</Prose>
</Layout>
)
}
export async function getStaticProps() {
const mdFilePath = path.join(process.cwd(), "markdowns/tutorial-doc/learn.md")
const mdFile = await formatMD(mdFilePath)
@ -39,4 +27,4 @@ export async function getStaticProps() {
mdFile
}
}
}
}

View File

@ -1,36 +1,21 @@
import Head from 'next/head'
import Link from 'next/link'
import path from 'path'
import Nav from '../components/Nav'
import Footer from '../components/Footer'
import Layout from '../components/layout'
import Prose from '../components/prose'
import { formatMD } from '../lib/utils'
export default function Docs({ mdFile }) {
return (
<>
<Head>
<title>Portal.js Api Documentation</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Nav />
<div >
<div className="prose">
<div dangerouslySetInnerHTML={{ __html: mdFile }} />
</div>
<br />
<Link href="/">
<button >Back Home</button>
</Link>
</div>
<Footer />
</>
)
return (
<Layout title="Portal.js Reference Documentation">
<Prose mdFile={mdFile}>
</Prose>
</Layout>
)
}
export async function getStaticProps() {
const mdFilePath = path.join(process.cwd(), "markdowns/api-doc/references.md")
const mdFile = await formatMD(mdFilePath)
@ -39,4 +24,4 @@ export async function getStaticProps() {
mdFile
}
}
}
}