Skip to content
This repository was archived by the owner on Feb 14, 2022. It is now read-only.

Commit c97c578

Browse files
adamwathanadamwathan
committed
New layout for private posts
1 parent 5aef3d0 commit c97c578

File tree

4 files changed

+286
-182
lines changed

4 files changed

+286
-182
lines changed

‎src/components/Header.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Link from 'next/link'
22

3-
function TailwindMark({ className }) {
3+
export function TailwindMark({ className }) {
44
return (
55
<svg className={className} fill="none" viewBox="0 0 55 33">
66
<path fill="#fff" d="M0 0h55v33H0z" />
@@ -14,7 +14,7 @@ function TailwindMark({ className }) {
1414
)
1515
}
1616

17-
function TailwindLogo({ className }) {
17+
export function TailwindLogo({ className }) {
1818
return (
1919
<svg className={className} fill="none" viewBox="0 0 285 33">
2020
<path
@@ -47,7 +47,10 @@ export default function Header() {
4747
</Link>
4848
</div>
4949
<div className="text-base leading-5">
50-
<a href="https://tailwindcss.com/docs" className="font-medium text-gray-500 hover:text-gray-700">
50+
<a
51+
href="https://tailwindcss.com/docs"
52+
className="font-medium text-gray-500 hover:text-gray-700"
53+
>
5154
Documentation &rarr;
5255
</a>
5356
</div>

‎src/components/Post.js

Lines changed: 203 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import tinytime from 'tinytime'
44
import Link from 'next/link'
55
import { useRouter } from 'next/router'
66
import { MDXProvider } from '@mdx-js/react'
7+
import Header, { TailwindMark } from '@/components/Header'
8+
import SectionContainer from '@/components/SectionContainer'
79

810
export const mdxComponents = {
911
pre: ({ className, ...props }) => (
@@ -18,123 +20,218 @@ const postDateTemplate = tinytime('{dddd}, {MMMM} {DD}, {YYYY}')
1820

1921
export default function Post({ meta, children, posts }) {
2022
const router = useRouter()
23+
24+
if (meta.private) {
25+
return (
26+
<>
27+
<SectionContainer>
28+
<main>
29+
<article className="py-16">
30+
<Head>
31+
<title>{meta.title} – Tailwind CSS</title>
32+
<meta name="twitter:card" content="summary_large_image" />
33+
<meta name="twitter:site" content="@tailwindcss" />
34+
<meta name="twitter:creator" content="@tailwindcss" />
35+
<meta name="twitter:title" content={`${meta.title} – Tailwind CSS`} />
36+
<meta name="twitter:description" content={meta.description} />
37+
<meta name="twitter:image" content={`https://blog.tailwindcss.com${meta.image}`} />
38+
<meta
39+
property="og:url"
40+
content={`https://blog.tailwindcss.com${router.pathname}`}
41+
/>
42+
<meta property="og:type" content="article" />
43+
<meta property="og:title" content={`${meta.title} – Tailwind CSS`} />
44+
<meta property="og:description" content={meta.description} />
45+
<meta property="og:image" content={`https://blog.tailwindcss.com${meta.image}`} />
46+
<meta name="description" content={meta.description}></meta>
47+
</Head>
48+
<header className="">
49+
<div className="text-center">
50+
<div className="flex justify-center">
51+
<Link href="/">
52+
<a className="inline-flex">
53+
<TailwindMark className="h-12 w-12" />
54+
</a>
55+
</Link>
56+
</div>
57+
<dl className="mt-4 space-y-10">
58+
<div>
59+
<dt className="sr-only">Published on</dt>
60+
<dd className="text-base leading-6 font-medium text-gray-500">
61+
<time dateTime={meta.date}>
62+
{postDateTemplate.render(new Date(meta.date))}
63+
</time>
64+
</dd>
65+
</div>
66+
</dl>
67+
<div className="mt-1">
68+
<h1 className="text-2xl leading-8 font-extrabold text-gray-900 tracking-tight sm:text-3xl sm:leading-9">
69+
{meta.title.replace(/ ([^ ]+)$/, '\u00A0$1')}
70+
</h1>
71+
</div>
72+
<dl className="mt-4">
73+
<dt className="sr-only">Authors</dt>
74+
<dd>
75+
<ul className="flex items-center justify-center">
76+
{meta.authors.map((author) => (
77+
<li key={author.twitter} className="flex items-center space-x-2">
78+
<img src={author.avatar} alt="" className="w-8 h-8 rounded-full" />
79+
<dl className="text-sm font-medium leading-5 whitespace-no-wrap">
80+
<dt className="sr-only">Name</dt>
81+
<dd className="text-gray-900">{author.name}</dd>
82+
</dl>
83+
</li>
84+
))}
85+
</ul>
86+
</dd>
87+
</dl>
88+
</div>
89+
</header>
90+
<div className="mt-12">
91+
<div className="prose mx-auto">
92+
<MDXProvider components={mdxComponents}>{children}</MDXProvider>
93+
</div>
94+
</div>
95+
</article>
96+
</main>
97+
</SectionContainer>
98+
</>
99+
)
100+
}
101+
21102
const postIndex = posts.findIndex((post) => post.link === router.pathname)
22103
const previous = posts[postIndex + 1]
23104
const next = posts[postIndex - 1]
24105

25106
return (
26-
<article className="xl:divide-y xl:divide-gray-200">
27-
<Head>
28-
<title>{meta.title} – Tailwind CSS</title>
29-
<meta name="twitter:card" content="summary_large_image" />
30-
<meta name="twitter:site" content="@tailwindcss" />
31-
<meta name="twitter:creator" content="@tailwindcss" />
32-
<meta name="twitter:title" content={`${meta.title} – Tailwind CSS`} />
33-
<meta name="twitter:description" content={meta.description} />
34-
<meta name="twitter:image" content={`https://blog.tailwindcss.com${meta.image}`} />
35-
<meta property="og:url" content={`https://blog.tailwindcss.com${router.pathname}`} />
36-
<meta property="og:type" content="article" />
37-
<meta property="og:title" content={`${meta.title} – Tailwind CSS`} />
38-
<meta property="og:description" content={meta.description} />
39-
<meta property="og:image" content={`https://blog.tailwindcss.com${meta.image}`} />
40-
<meta name="description" content={meta.description}></meta>
41-
</Head>
42-
<header className="pt-6 xl:pb-10">
43-
<div className="space-y-1 text-center">
44-
<dl className="space-y-10">
45-
<div>
46-
<dt className="sr-only">Published on</dt>
47-
<dd className="text-base leading-6 font-medium text-gray-500">
48-
<time dateTime={meta.date}>{postDateTemplate.render(new Date(meta.date))}</time>
49-
</dd>
50-
</div>
51-
</dl>
52-
<div>
53-
<PageTitle>{meta.title}</PageTitle>
54-
</div>
55-
</div>
56-
</header>
57-
<div
58-
className="divide-y xl:divide-y-0 divide-gray-200 xl:grid xl:grid-cols-4 xl:col-gap-6 pb-16 xl:pb-20"
59-
style={{ gridTemplateRows: 'auto 1fr' }}
60-
>
61-
<dl className="pt-6 pb-10 xl:pt-11 xl:border-b xl:border-gray-200">
62-
<dt className="sr-only">Authors</dt>
63-
<dd>
64-
<ul className="flex justify-center xl:block space-x-8 sm:space-x-12 xl:space-x-0 xl:space-y-8">
65-
{meta.authors.map((author) => (
66-
<li key={author.twitter} className="flex items-center space-x-2">
67-
<img src={author.avatar} alt="" className="w-10 h-10 rounded-full" />
68-
<dl className="text-sm font-medium leading-5 whitespace-no-wrap">
69-
<dt className="sr-only">Name</dt>
70-
<dd className="text-gray-900">{author.name}</dd>
71-
<dt className="sr-only">Twitter</dt>
72-
<dd>
107+
<>
108+
<SectionContainer>
109+
<Header />
110+
</SectionContainer>
111+
<SectionContainer>
112+
<main>
113+
<article className="xl:divide-y xl:divide-gray-200">
114+
<Head>
115+
<title>{meta.title} – Tailwind CSS</title>
116+
<meta name="twitter:card" content="summary_large_image" />
117+
<meta name="twitter:site" content="@tailwindcss" />
118+
<meta name="twitter:creator" content="@tailwindcss" />
119+
<meta name="twitter:title" content={`${meta.title} – Tailwind CSS`} />
120+
<meta name="twitter:description" content={meta.description} />
121+
<meta name="twitter:image" content={`https://blog.tailwindcss.com${meta.image}`} />
122+
<meta property="og:url" content={`https://blog.tailwindcss.com${router.pathname}`} />
123+
<meta property="og:type" content="article" />
124+
<meta property="og:title" content={`${meta.title} – Tailwind CSS`} />
125+
<meta property="og:description" content={meta.description} />
126+
<meta property="og:image" content={`https://blog.tailwindcss.com${meta.image}`} />
127+
<meta name="description" content={meta.description}></meta>
128+
</Head>
129+
<header className="pt-6 xl:pb-10">
130+
<div className="space-y-1 text-center">
131+
<dl className="space-y-10">
132+
<div>
133+
<dt className="sr-only">Published on</dt>
134+
<dd className="text-base leading-6 font-medium text-gray-500">
135+
<time dateTime={meta.date}>
136+
{postDateTemplate.render(new Date(meta.date))}
137+
</time>
138+
</dd>
139+
</div>
140+
</dl>
141+
<div>
142+
<PageTitle>{meta.title}</PageTitle>
143+
</div>
144+
</div>
145+
</header>
146+
<div
147+
className="divide-y xl:divide-y-0 divide-gray-200 xl:grid xl:grid-cols-4 xl:col-gap-6 pb-16 xl:pb-20"
148+
style={{ gridTemplateRows: 'auto 1fr' }}
149+
>
150+
<dl className="pt-6 pb-10 xl:pt-11 xl:border-b xl:border-gray-200">
151+
<dt className="sr-only">Authors</dt>
152+
<dd>
153+
<ul className="flex justify-center xl:block space-x-8 sm:space-x-12 xl:space-x-0 xl:space-y-8">
154+
{meta.authors.map((author) => (
155+
<li key={author.twitter} className="flex items-center space-x-2">
156+
<img src={author.avatar} alt="" className="w-10 h-10 rounded-full" />
157+
<dl className="text-sm font-medium leading-5 whitespace-no-wrap">
158+
<dt className="sr-only">Name</dt>
159+
<dd className="text-gray-900">{author.name}</dd>
160+
<dt className="sr-only">Twitter</dt>
161+
<dd>
162+
<a
163+
href={`https://twitter.com/${author.twitter}`}
164+
className="text-teal-500 hover:text-teal-600"
165+
>
166+
@{author.twitter}
167+
</a>
168+
</dd>
169+
</dl>
170+
</li>
171+
))}
172+
</ul>
173+
</dd>
174+
</dl>
175+
<div className="divide-y divide-gray-200 xl:pb-0 xl:col-span-3 xl:row-span-2">
176+
<div className="prose max-w-none pt-10 pb-8">
177+
<MDXProvider components={mdxComponents}>{children}</MDXProvider>
178+
</div>
179+
{meta.footer && (
180+
<div className="pt-6 pb-16" dangerouslySetInnerHTML={{ __html: meta.footer }} />
181+
)}
182+
{!meta.footer && meta.discussion && (
183+
<div className="pt-6 pb-16">
184+
<p>
185+
Want to talk about this post?{' '}
73186
<a
74-
href={`https://twitter.com/${author.twitter}`}
75-
className="text-teal-500 hover:text-teal-600"
187+
href={meta.discussion}
188+
className="font-medium text-teal-500 hover:text-teal-600"
76189
>
77-
@{author.twitter}
190+
Discuss this on GitHub &rarr;
78191
</a>
79-
</dd>
80-
</dl>
81-
</li>
82-
))}
83-
</ul>
84-
</dd>
85-
</dl>
86-
<div className="divide-y divide-gray-200 xl:pb-0 xl:col-span-3 xl:row-span-2">
87-
<div className="prose max-w-none pt-10 pb-8">
88-
<MDXProvider components={mdxComponents}>{children}</MDXProvider>
89-
</div>
90-
{meta.footer && (
91-
<div className="pt-6 pb-16" dangerouslySetInnerHTML={{ __html: meta.footer }} />
92-
)}
93-
{!meta.footer && meta.discussion && (
94-
<div className="pt-6 pb-16">
95-
<p>
96-
Want to talk about this post?{' '}
97-
<a href={meta.discussion} className="font-medium text-teal-500 hover:text-teal-600">
98-
Discuss this on GitHub &rarr;
99-
</a>
100-
</p>
101-
</div>
102-
)}
103-
</div>
104-
<footer className="text-sm font-medium leading-5 divide-y divide-gray-200 xl:col-start-1 xl:row-start-2">
105-
{(next || previous) && (
106-
<div className="space-y-8 py-8">
107-
{next && (
108-
<div>
109-
<h2 className="text-xs tracking-wide uppercase text-gray-500">Next Article</h2>
110-
<div className="text-teal-500 hover:text-teal-600">
111-
<Link href={next.link}>
112-
<a>{next.title}</a>
113-
</Link>
192+
</p>
114193
</div>
115-
</div>
116-
)}
117-
{previous && (
118-
<div>
119-
<h2 className="text-xs tracking-wide uppercase text-gray-500">
120-
Previous Article
121-
</h2>
122-
<div className="text-teal-500 hover:text-teal-600">
123-
<Link href={previous.link}>
124-
<a>{previous.title}</a>
125-
</Link>
194+
)}
195+
</div>
196+
<footer className="text-sm font-medium leading-5 divide-y divide-gray-200 xl:col-start-1 xl:row-start-2">
197+
{(next || previous) && (
198+
<div className="space-y-8 py-8">
199+
{next && (
200+
<div>
201+
<h2 className="text-xs tracking-wide uppercase text-gray-500">
202+
Next Article
203+
</h2>
204+
<div className="text-teal-500 hover:text-teal-600">
205+
<Link href={next.link}>
206+
<a>{next.title}</a>
207+
</Link>
208+
</div>
209+
</div>
210+
)}
211+
{previous && (
212+
<div>
213+
<h2 className="text-xs tracking-wide uppercase text-gray-500">
214+
Previous Article
215+
</h2>
216+
<div className="text-teal-500 hover:text-teal-600">
217+
<Link href={previous.link}>
218+
<a>{previous.title}</a>
219+
</Link>
220+
</div>
221+
</div>
222+
)}
126223
</div>
224+
)}
225+
<div className="pt-8">
226+
<Link href="/">
227+
<a className="text-teal-500 hover:text-teal-600">&larr; Back to the blog</a>
228+
</Link>
127229
</div>
128-
)}
230+
</footer>
129231
</div>
130-
)}
131-
<div className="pt-8">
132-
<Link href="/">
133-
<a className="text-teal-500 hover:text-teal-600">&larr; Back to the blog</a>
134-
</Link>
135-
</div>
136-
</footer>
137-
</div>
138-
</article>
232+
</article>
233+
</main>
234+
</SectionContainer>
235+
</>
139236
)
140237
}

‎src/pages/_app.js

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import '@/css/tailwind.css'
22
import Head from 'next/head'
3-
import Header from '@/components/Header'
4-
import SectionContainer from '@/components/SectionContainer'
53

64
export default function App({ Component, pageProps }) {
75
return (
@@ -18,14 +16,7 @@ export default function App({ Component, pageProps }) {
1816
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="/atom.xml" />
1917
<link rel="alternate" type="application/json" title="JSON Feed" href="/feed.json" />
2018
</Head>
21-
<SectionContainer>
22-
<Header />
23-
</SectionContainer>
24-
<SectionContainer>
25-
<main>
26-
<Component {...pageProps} />
27-
</main>
28-
</SectionContainer>
19+
<Component {...pageProps} />
2920
</div>
3021
)
3122
}

0 commit comments

Comments
 (0)