knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[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.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/components/Footer/index.jsx
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>
)
}

31
docs/pages/components.js
View File

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

21
docs/pages/docs.js
View File

@@ -1,28 +1,21 @@
import Head from 'next/head'
import Link from 'next/link' import Link from 'next/link'
import path from 'path' 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' import { formatMD } from '../lib/utils'
export default function Docs({ mdFile }) { export default function Docs({ mdFile }) {
return ( return (
<> <Layout title="Portal.js API Documentation">
<Head> <Prose mdFile={mdFile}>
<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 }} />
<p className="text-center"> <p className="text-center">
<Link href="/installation"> <Link href="/installation">
<button>Next Page</button> <button>Next Page</button>
</Link> </Link>
</p> </p>
</div> </Prose>
<Footer /> </Layout>
</>
) )
} }

23
docs/pages/gallery.js
View File

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

16
docs/pages/index.js
View File

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

31
docs/pages/installation.js
View File

@@ -1,32 +1,21 @@
import Head from 'next/head'
import Link from 'next/link' import Link from 'next/link'
import path from 'path' 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' import { formatMD } from '../lib/utils'
export default function Docs({ mdFile }) { export default function Docs({ mdFile }) {
return ( return (
<> <Layout title="Portal.js Installation">
<Head> <Prose mdFile={mdFile}>
<title>Portal.js Api Documentation</title> <p className="text-center">
<link rel="icon" href="/favicon.ico" />
</Head>
<Nav />
<div>
<div className="prose">
<div dangerouslySetInnerHTML={{ __html: mdFile }} />
</div>
<br />
<Link href="/references"> <Link href="/references">
<button >Next Page</button> <button>Next Page</button>
</Link> </Link>
</div> </p>
</Prose>
<Footer /> </Layout>
</>
) )
} }

32
docs/pages/learn.js
View File

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

31
docs/pages/references.js
View File

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