-
Notifications
You must be signed in to change notification settings - Fork 26.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
88b1fe5
commit b3d7c8f
Showing
10 changed files
with
286 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import Link from 'next/link' | ||
|
||
export default function Nav() { | ||
return ( | ||
<nav className="container mx-auto"> | ||
<ul className="flex justify-between items-center py-8"> | ||
<li> | ||
<Link href="/"> | ||
<a className="no-underline">Home</a> | ||
</Link> | ||
</li> | ||
<ul className="flex justify-between items-center"> | ||
<Link href="/blog"> | ||
<a>Blog</a> | ||
</Link> | ||
</ul> | ||
</ul> | ||
</nav> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import 'isomorphic-unfetch' | ||
|
||
const API_URL = 'https://graphql.datocms.com' | ||
const API_TOKEN = '' | ||
|
||
export default async function fetchAPI(query, { variables, preview } = {}) { | ||
const res = await fetch(API_URL + (preview ? '/preview' : ''), { | ||
method: 'POST', | ||
headers: { | ||
'Content-Type': 'application/json', | ||
Authorization: `Bearer ${API_TOKEN}`, | ||
}, | ||
body: JSON.stringify({ | ||
query, | ||
variables, | ||
}), | ||
}) | ||
|
||
const json = await res.json() | ||
if (json.errors) { | ||
console.error(json.errors) | ||
throw new Error('Failed to fetch API') | ||
} | ||
return json.data | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
{ | ||
"name": "with-tailwindcss", | ||
"version": "1.0.0", | ||
"scripts": { | ||
"dev": "next", | ||
"build": "next build", | ||
"start": "next start" | ||
}, | ||
"dependencies": { | ||
"isomorphic-unfetch": "3.0.0", | ||
"next": "9.2.2-canary.21", | ||
"react": "^16.12.0", | ||
"react-dom": "^16.12.0" | ||
}, | ||
"devDependencies": { | ||
"@fullhuman/postcss-purgecss": "^1.3.0", | ||
"postcss-preset-env": "^6.7.0", | ||
"tailwindcss": "^1.1.4" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import '../styles/index.css' | ||
|
||
function MyApp({ Component, pageProps }) { | ||
return <Component {...pageProps} /> | ||
} | ||
|
||
export default MyApp |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
export default (req, res) => { | ||
res.setPreviewData({}) | ||
res.json({ | ||
message: 'Preview Session Started', | ||
}) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
import { useRouter } from 'next/router' | ||
import ErrorPage from 'next/error' | ||
import Nav from '../../components/nav' | ||
import fetchAPI from '../../lib/api' | ||
|
||
export async function unstable_getStaticProps({ params, preview }) { | ||
const data = await fetchAPI( | ||
` | ||
query BlogBySlug($slug: String) { | ||
blog(filter: {slug: {eq: $slug}}) { | ||
title | ||
content | ||
authors { | ||
name | ||
picture { | ||
url(imgixParams: {w: 100, h: 100}) | ||
} | ||
} | ||
} | ||
} | ||
`, | ||
{ | ||
preview, | ||
variables: { | ||
slug: params.slug.join('/'), | ||
}, | ||
} | ||
) | ||
return { | ||
props: data, | ||
} | ||
} | ||
|
||
export async function unstable_getStaticPaths() { | ||
const data = await fetchAPI(` | ||
{ | ||
allBlogs { | ||
slug | ||
} | ||
} | ||
`) | ||
return { | ||
paths: data.allBlogs.map(blog => `/blog/${blog.slug}`), | ||
} | ||
} | ||
|
||
function AuthorCard({ name, twitter, picture }) { | ||
return ( | ||
<div className="flex mx-2"> | ||
<img className="block h-8 mx-2 rounded-full" src={picture} /> | ||
<div className="leading-none"> | ||
{name} | ||
<br /> | ||
<a | ||
href={`https://twitter.com/${twitter}`} | ||
className="text-xs text-blue-600" | ||
> | ||
@{twitter} | ||
</a> | ||
</div> | ||
</div> | ||
) | ||
} | ||
|
||
export default ({ blog }) => { | ||
const router = useRouter() | ||
|
||
if (!router.isFallback && !blog) { | ||
return <ErrorPage statusCode={404} /> | ||
} | ||
|
||
return ( | ||
<> | ||
<Nav /> | ||
<article> | ||
<div className="my-10"> | ||
<div className="text-center my-10"> | ||
<h1 className="text-2xl text-4xl"> | ||
{router.isFallback ? 'Loading...' : blog.title} | ||
</h1> | ||
<time className="text-sm text-gray-600"> | ||
Thursday, February 6th 2020 | ||
</time> | ||
</div> | ||
<div className="container mx-auto flex justify-center my-4"> | ||
{blog?.authors.map(author => { | ||
return ( | ||
<AuthorCard | ||
name={author.name} | ||
twitter={author.twitter} | ||
picture={author.picture.url} | ||
/> | ||
) | ||
})} | ||
</div> | ||
</div> | ||
<hr /> | ||
<div className="container mx-auto my-10"> | ||
<div | ||
className="mx-64" | ||
dangerouslySetInnerHTML={{ | ||
__html: router.isFallback ? 'Loading...' : blog.content, | ||
}} | ||
/> | ||
</div> | ||
</article> | ||
</> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import Link from 'next/link' | ||
import Nav from '../../components/nav' | ||
import fetchAPI from '../../lib/api' | ||
|
||
export async function unstable_getStaticProps({ preview }) { | ||
const data = await fetchAPI( | ||
` | ||
{ | ||
allBlogs { | ||
title | ||
slug | ||
excerpt | ||
authors { | ||
picture { | ||
url(imgixParams: {w: 100, h: 100}) | ||
} | ||
} | ||
} | ||
} | ||
`, | ||
{ preview } | ||
) | ||
return { | ||
props: data, | ||
} | ||
} | ||
|
||
function BlogCard({ title, slug, excerpt, authors }) { | ||
return ( | ||
<article className="my-10"> | ||
<time className="text-sm text-gray-600">Thursday, February 6th 2020</time> | ||
<h2 className="text-2xl my-4">{title}</h2> | ||
<div className="flex my-4"> | ||
{authors.map((author, index) => { | ||
return ( | ||
<img | ||
className={`block h-8 rounded-full ${index !== 0 ? '-ml-4' : ''}`} | ||
src={author.picture.url} | ||
/> | ||
) | ||
})} | ||
</div> | ||
<div dangerouslySetInnerHTML={{ __html: excerpt }} /> | ||
|
||
<Link href="/blog/[...slug]" as={`/blog/${slug}`}> | ||
<a className="text-blue-600 hover:text-blue-400">Read more →</a> | ||
</Link> | ||
</article> | ||
) | ||
} | ||
|
||
export default ({ allBlogs }) => ( | ||
<> | ||
<Nav /> | ||
<h1 className="text-4xl my-10 container mx-auto">Blog</h1> | ||
<hr /> | ||
<section className="container mx-auto"> | ||
{allBlogs.map(blog => { | ||
return <BlogCard {...blog} /> | ||
})} | ||
</section> | ||
</> | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import Nav from '../components/nav' | ||
export default () => { | ||
return ( | ||
<> | ||
<Nav /> | ||
</> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
module.exports = { | ||
plugins: [ | ||
'tailwindcss', | ||
process.env.NODE_ENV === 'production' | ||
? [ | ||
'@fullhuman/postcss-purgecss', | ||
{ | ||
content: [ | ||
'./pages/**/*.{js,jsx,ts,tsx}', | ||
'./components/**/*.{js,jsx,ts,tsx}', | ||
], | ||
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [], | ||
}, | ||
] | ||
: undefined, | ||
'postcss-preset-env', | ||
], | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
/* purgecss start ignore */ | ||
@tailwind base; | ||
@tailwind components; | ||
/* purgecss end ignore */ | ||
@tailwind utilities; | ||
|
||
p { | ||
@apply my-6; | ||
} |