[site,#53][l]: skeleton website based off nextjs template https://github.com/datopian/nextjs-tailwind-mdx.
No real content yet. Just a skeleton.
This commit is contained in:
Rufus Pollock
parent
fdac6f2a45
commit
cfd151fe5c
|
|
@ -0,0 +1,34 @@
|
||||||
|
# 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
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
Life Itself Web3 Website.
|
||||||
|
|
||||||
|
Templated off: https://github.com/datopian/nextjs-tailwind-mdx
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
Then run the app:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd myapp
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
See `config` directory:
|
||||||
|
|
||||||
|
* `config/siteConfig.js` for site wide configuration especially for general theme (e.g. title) and SEO
|
||||||
|
* `config/navLinks.js` for configuration of navigation links
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
import Link from 'next/link'
|
||||||
|
import Head from 'next/head'
|
||||||
|
import { NextSeo } from 'next-seo'
|
||||||
|
|
||||||
|
import Nav from './Nav'
|
||||||
|
import siteConfig from '../config/siteConfig'
|
||||||
|
|
||||||
|
export default function Layout({ children, title='' }) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<NextSeo
|
||||||
|
title={title}
|
||||||
|
/>
|
||||||
|
<Head>
|
||||||
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>" />
|
||||||
|
<meta charSet="utf-8" />
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
||||||
|
</Head>
|
||||||
|
<Nav />
|
||||||
|
<main>
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
<footer className="flex items-center justify-center w-full h-24 border-t mt-16">
|
||||||
|
<p className="flex items-center justify-center">
|
||||||
|
Created by
|
||||||
|
<a
|
||||||
|
href={siteConfig.authorUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<img src={siteConfig.authorLogo} alt={siteConfig.author} className="ml-2 h-6 block" />
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
import Head from 'next/head'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { MDXProvider } from '@mdx-js/react'
|
||||||
|
|
||||||
|
|
||||||
|
const components = {
|
||||||
|
Head,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MdxPage({ children }) {
|
||||||
|
const { Component, pageProps } = children
|
||||||
|
|
||||||
|
return (
|
||||||
|
<article className="prose mx-auto p-6">
|
||||||
|
<header>
|
||||||
|
<div className="mb-6">
|
||||||
|
<h1>{pageProps.title}</h1>
|
||||||
|
{pageProps.author && (
|
||||||
|
<div className="-mt-6"><p className="opacity-60 pl-1">{pageProps.author}</p></div>
|
||||||
|
)}
|
||||||
|
{pageProps.description && (
|
||||||
|
<p className="description">{pageProps.description}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<MDXProvider components={components}>
|
||||||
|
<Component {...pageProps} />
|
||||||
|
</MDXProvider>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
import { Fragment } from 'react'
|
||||||
|
import { Disclosure, Menu, Transition } from '@headlessui/react'
|
||||||
|
import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
|
import siteConfig from '../config/siteConfig.js'
|
||||||
|
import navLinks from '../config/navLinks.js'
|
||||||
|
|
||||||
|
function classNames(...classes) {
|
||||||
|
return classes.filter(Boolean).join(' ')
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Nav() {
|
||||||
|
return (
|
||||||
|
<Disclosure as="nav" className="bg-white shadow">
|
||||||
|
{({ open }) => (
|
||||||
|
<>
|
||||||
|
<div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
|
||||||
|
<div className="relative flex justify-between h-16">
|
||||||
|
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
|
||||||
|
{/* Mobile menu button */}
|
||||||
|
<Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
|
||||||
|
<span className="sr-only">Open main menu</span>
|
||||||
|
{open ? (
|
||||||
|
<XIcon className="block h-6 w-6" aria-hidden="true" />
|
||||||
|
) : (
|
||||||
|
<MenuIcon className="block h-6 w-6" aria-hidden="true" />
|
||||||
|
)}
|
||||||
|
</Disclosure.Button>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
|
||||||
|
<div className="flex-shrink-0 flex items-center">
|
||||||
|
<Link href="/">
|
||||||
|
<a>{siteConfig.title}</a>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="hidden sm:ml-6 sm:flex sm:space-x-8">
|
||||||
|
{/* Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
|
||||||
|
{navLinks.map((item) => (
|
||||||
|
<Link href={item.href}>
|
||||||
|
<a
|
||||||
|
key={item.name}
|
||||||
|
href={item.href}
|
||||||
|
className={item.current ?
|
||||||
|
'border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium' :
|
||||||
|
'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium'
|
||||||
|
}
|
||||||
|
aria-current={item.current ? 'page' : undefined}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Disclosure.Panel className="sm:hidden">
|
||||||
|
<div className="pt-2 pb-4 space-y-1">
|
||||||
|
{/* Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" */}
|
||||||
|
{navLinks.map((item) => (
|
||||||
|
<Link href={item.href}>
|
||||||
|
<a
|
||||||
|
key={item.name}
|
||||||
|
href={item.href}
|
||||||
|
className={item.current ?
|
||||||
|
'bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium' :
|
||||||
|
'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium'
|
||||||
|
}
|
||||||
|
aria-current={item.current ? 'page' : undefined}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Disclosure.Panel>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Disclosure>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const navLinks = [
|
||||||
|
{ href: '/about', name: 'About' },
|
||||||
|
]
|
||||||
|
|
||||||
|
export default navLinks
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
const siteConfig = {
|
||||||
|
title: 'Making Sense of Web3 & Crypto',
|
||||||
|
tagline: '',
|
||||||
|
description: 'Making sense of web3 & crypto. Introduction to key concepts and ideas. Rigorous, constructive analysis of key claims pro and con. A look at the deeper hopes and aspirations.',
|
||||||
|
author: 'Life Itself and friends',
|
||||||
|
// logo image
|
||||||
|
authorLogo: 'https://playbook.datopian.com/img/datopian-dark-logotype.svg',
|
||||||
|
// url to author
|
||||||
|
authorUrl: 'https://datopian.com/',
|
||||||
|
// Google analytics key e.g. G-XXXX
|
||||||
|
analytics: '',
|
||||||
|
// optional additional nextSeo content set on each page
|
||||||
|
// see https://github.com/garmeeh/next-seo
|
||||||
|
// nextSeo: {
|
||||||
|
// openGraph: {
|
||||||
|
// images: [
|
||||||
|
// {
|
||||||
|
// url: 'https://image.url/...',
|
||||||
|
// alt: '',
|
||||||
|
// width: 1200,
|
||||||
|
// height: 627,
|
||||||
|
// type: 'image/png',
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = siteConfig
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import siteConfig from '../config/siteConfig.js'
|
||||||
|
|
||||||
|
// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
|
||||||
|
export const pageview = (url) => {
|
||||||
|
window.gtag('config', siteConfig.analytics, {
|
||||||
|
page_path: url,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// https://developers.google.com/analytics/devguides/collection/gtagjs/events
|
||||||
|
export const event = ({ action, category, label, value }) => {
|
||||||
|
window.gtag('event', action, {
|
||||||
|
event_category: category,
|
||||||
|
event_label: label,
|
||||||
|
value: value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import gfm from 'remark-gfm'
|
||||||
|
import toc from 'remark-toc'
|
||||||
|
import slug from 'remark-slug'
|
||||||
|
import smartypants from '@silvenon/remark-smartypants'
|
||||||
|
|
||||||
|
import withMDXImp from '@next/mdx'
|
||||||
|
|
||||||
|
const withMDX = withMDXImp({
|
||||||
|
extension: /\.mdx?$/,
|
||||||
|
options: {
|
||||||
|
remarkPlugins: [gfm, toc, slug, smartypants],
|
||||||
|
rehypePlugins: [],
|
||||||
|
// If you use `MDXProvider`, uncomment the following line.
|
||||||
|
providerImportSource: "@mdx-js/react",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
export default withMDX({
|
||||||
|
// Append the default value with md extensions
|
||||||
|
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
|
||||||
|
})
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,29 @@
|
||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build",
|
||||||
|
"start": "next start"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@headlessui/react": "^1.4.1",
|
||||||
|
"@heroicons/react": "^1.0.4",
|
||||||
|
"@mdx-js/loader": "^2.0.0",
|
||||||
|
"@next/mdx": "^12.1.0",
|
||||||
|
"@silvenon/remark-smartypants": "^1.0.0",
|
||||||
|
"@tailwindcss/typography": "^0.4.1",
|
||||||
|
"gray-matter": "^4.0.3",
|
||||||
|
"next": "^12.1.0",
|
||||||
|
"next-seo": "^4.28.1",
|
||||||
|
"react": "^17.0.2",
|
||||||
|
"react-dom": "^17.0.2",
|
||||||
|
"remark-gfm": "^3.0.0",
|
||||||
|
"remark-slug": "^7.0.0",
|
||||||
|
"remark-toc": "^8.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"autoprefixer": "^10.2.6",
|
||||||
|
"postcss": "^8.3.5",
|
||||||
|
"tailwindcss": "^2.2.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
import { useEffect } from 'react'
|
||||||
|
import Script from 'next/script'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
|
import { DefaultSeo } from 'next-seo'
|
||||||
|
import 'tailwindcss/tailwind.css'
|
||||||
|
|
||||||
|
import siteConfig from '../config/siteConfig.js'
|
||||||
|
import Layout from '../components/Layout'
|
||||||
|
import MdxPage from '../components/MDX'
|
||||||
|
import * as gtag from '../lib/gtag'
|
||||||
|
|
||||||
|
function MyApp({ Component, pageProps }) {
|
||||||
|
// Google Analytics
|
||||||
|
if (siteConfig.analytics) {
|
||||||
|
const router = useRouter()
|
||||||
|
useEffect(() => {
|
||||||
|
const handleRouteChange = (url) => {
|
||||||
|
gtag.pageview(url)
|
||||||
|
}
|
||||||
|
router.events.on('routeChangeComplete', handleRouteChange)
|
||||||
|
return () => {
|
||||||
|
router.events.off('routeChangeComplete', handleRouteChange)
|
||||||
|
}
|
||||||
|
}, [router.events])
|
||||||
|
}
|
||||||
|
// end Google Analytics
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<DefaultSeo
|
||||||
|
titleTemplate={'%s | ' + siteConfig.title}
|
||||||
|
defaultTitle={siteConfig.title}
|
||||||
|
description={siteConfig.description}
|
||||||
|
{...siteConfig.nextSeo}
|
||||||
|
/>
|
||||||
|
{/* Global Site Tag (gtag.js) - Google Analytics */}
|
||||||
|
{siteConfig.analytics &&
|
||||||
|
<Script
|
||||||
|
strategy="afterInteractive"
|
||||||
|
src={`https://www.googletagmanager.com/gtag/js?id=${siteConfig.analytics}`}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
{siteConfig.analytics &&
|
||||||
|
<Script
|
||||||
|
id="gtag-init"
|
||||||
|
strategy="afterInteractive"
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: `
|
||||||
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
function gtag(){dataLayer.push(arguments);}
|
||||||
|
gtag('js', new Date());
|
||||||
|
gtag('config', '${siteConfig.analytics}', {
|
||||||
|
page_path: window.location.pathname,
|
||||||
|
});
|
||||||
|
`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
<Layout title={pageProps.title}>
|
||||||
|
{ Component.layout == 'js' &&
|
||||||
|
<Component {...pageProps} />
|
||||||
|
}
|
||||||
|
{ Component.layout != 'js' &&
|
||||||
|
<MdxPage children={{ Component, pageProps }} />
|
||||||
|
}
|
||||||
|
</Layout>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// if this is a markdown page use this layout by default ...
|
||||||
|
// const MyLayout = pageProps.
|
||||||
|
|
||||||
|
|
||||||
|
export default MyApp
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
# About
|
||||||
|
|
||||||
|
This is an about page.
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
# Making Sense of Web3
|
||||||
|
|
||||||
|
The politics and economics of DAOs, crypto and blockchain
|
||||||
|
|
||||||
|
A project of Life Itself Labs & friends
|
||||||
|
|
||||||
|
## Latest Releases
|
||||||
|
|
||||||
|
## About the Project
|
||||||
|
|
||||||
|
SCQH
|
||||||
|
|
||||||
|
## Our Approach
|
||||||
|
|
||||||
|
## Get Involved
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
// If you want to use other PostCSS plugins, see the following:
|
||||||
|
// https://tailwindcss.com/docs/using-with-preprocessors
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
module.exports = {
|
||||||
|
mode: 'jit',
|
||||||
|
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
|
||||||
|
darkMode: false, // or 'media' or 'class'
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
require('@tailwindcss/typography')
|
||||||
|
],
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue