[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