jeffemmett
/
web3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[site/theme][m]: implement dark mode and default to it (purple background). 

* upgraded tailwind to >= 3.0.0 and typography to >= 0.5.
* (accidental): move web3.html to public so it works
This commit is contained in:
Rufus Pollock 2022-03-04 16:00:56 +01:00
parent 54d863ce50
commit 7538c4f26b
7 changed files with 483 additions and 1108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
site/components/Layout.js
View File

@ -22,22 +22,24 @@ export default function Layout({ children, title='' }) {
<link rel="preload" href="/fonts/Restora/RestoraBold.ttf" as="font" crossOrigin="" /> <link rel="preload" href="/fonts/Restora/RestoraBold.ttf" as="font" crossOrigin="" />
<link rel="preload" href="/fonts/Restora/RestoraExtraLight.otf" as="font" crossOrigin="" /> <link rel="preload" href="/fonts/Restora/RestoraExtraLight.otf" as="font" crossOrigin="" />
</Head> </Head>
<Nav /> <body className="dark:bg-[#4a4e7d]">
<main> <Nav />
{children} <main>
</main> {children}
<footer className="flex items-center justify-center w-full h-24 border-t mt-16"> </main>
<p className="flex items-center justify-center"> <footer className="flex items-center justify-center w-full h-24 border-t mt-16">
Created by <p className="flex items-center justify-center">
<a Created by
href={siteConfig.authorUrl} <a
target="_blank" href={siteConfig.authorUrl}
rel="noopener noreferrer" target="_blank"
> rel="noopener noreferrer"
<img src={siteConfig.authorLogo} alt={siteConfig.author} className="ml-2 h-6 block" /> >
</a> <img src={siteConfig.authorLogo} alt={siteConfig.author} className="ml-2 h-6 block" />
</p> </a>
</footer> </p>
</footer>
</body>
</> </>
) )
} }

2
site/components/MDX.js
View File

@ -11,7 +11,7 @@ export default function MdxPage({ children }) {
const { Component, pageProps } = children const { Component, pageProps } = children
return ( return (
<article className="prose mx-auto p-6"> <article className="prose dark:prose-invert mx-auto p-6">
<header> <header>
<div className="mb-6"> <div className="mb-6">
<h1>{pageProps.title}</h1> <h1>{pageProps.title}</h1>

1543
site/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
site/package.json
View File

@ -12,10 +12,11 @@
"@mdx-js/loader": "^2.0.0", "@mdx-js/loader": "^2.0.0",
"@next/mdx": "^12.1.0", "@next/mdx": "^12.1.0",
"@silvenon/remark-smartypants": "^1.0.0", "@silvenon/remark-smartypants": "^1.0.0",
"@tailwindcss/typography": "^0.4.1", "@tailwindcss/typography": "^0.5.2",
"gray-matter": "^4.0.3", "gray-matter": "^4.0.3",
"next": "^12.1.0", "next": "^12.1.0",
"next-seo": "^4.28.1", "next-seo": "^4.28.1",
"next-themes": "^0.1.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"remark-gfm": "^3.0.0", "remark-gfm": "^3.0.0",
@ -25,6 +26,6 @@
"devDependencies": { "devDependencies": {
"autoprefixer": "^10.2.6", "autoprefixer": "^10.2.6",
"postcss": "^8.3.5", "postcss": "^8.3.5",
"tailwindcss": "^2.2.4" "tailwindcss": "^3.0.0"
} }
} }

5
site/pages/_app.js
View File

@ -3,6 +3,7 @@ import Script from 'next/script'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { DefaultSeo } from 'next-seo' import { DefaultSeo } from 'next-seo'
import 'tailwindcss/tailwind.css' import 'tailwindcss/tailwind.css'
import { ThemeProvider } from 'next-themes'
import siteConfig from '../config/siteConfig.js' import siteConfig from '../config/siteConfig.js'
import Layout from '../components/Layout' import Layout from '../components/Layout'
@ -26,7 +27,7 @@ function MyApp({ Component, pageProps }) {
// end Google Analytics // end Google Analytics
return ( return (
<> <ThemeProvider attribute="class" defaultTheme="dark">
<DefaultSeo <DefaultSeo
titleTemplate={'%s | ' + siteConfig.title} titleTemplate={'%s | ' + siteConfig.title}
defaultTitle={siteConfig.title} defaultTitle={siteConfig.title}
@ -64,7 +65,7 @@ function MyApp({ Component, pageProps }) {
<MdxPage children={{ Component, pageProps }} /> <MdxPage children={{ Component, pageProps }} />
} }
</Layout> </Layout>
</> </ThemeProvider>
) )
} }

0
site/pages/web3.html → site/public/web3.html
View File

2
site/tailwind.config.js
View File

@ -6,7 +6,7 @@ module.exports = {
"./pages/**/*.{js,ts,jsx,tsx,md,mdx}", "./pages/**/*.{js,ts,jsx,tsx,md,mdx}",
"./components/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}",
], ],
darkMode: false, // or 'media' or 'class' darkMode: 'class', // or 'media' or 'class'
theme: { theme: {
extend: { extend: {
fontFamily: { fontFamily: {