git.iko.soy/urbit.org
on master help sign in
make blog list and blog posts work properly
commit44b4acbb2eb7bdf5103f1bdad30d1272dbb5335a authorGavin Atkinson <gvnatknsn@protonmail.com> dateMon 14 Jun 2021, 11:00 (5 years ago) parent4b3db31
5 files changed+85−25
compare with master
unifiedsplit
components/Header.js+12 lib/lib.js+1−1 pages/blog.js+48 pages/blog/[slug].js+19−11 pages/index.js+5−13
components/Header.jsnew file+12
@@ -0,0 +1,12 @@
1+export default function Header() {
2+ return (
3+ <header className="layout-wide flex justify-between items-center pt-8">
4+ <a href="/" className="type-ui">Urbit</a>
5+ <nav className="flex items-center">
6+ <a href="/docs" className="type-ui text-gray mr-6">Docs</a>
7+ <a href="/blog" className="type-ui text-gray mr-6">Blog</a>
8+ <button className="button-sm">Download Port</button>
9+ </nav>
10+ </header>
11+ )
12+}
lib/lib.js+1−1
@@ -53,7 +53,7 @@ export function getPostBySlug(slug, fields = [], key) {
5353
5454 })
5555
56− // NB Gavin: This could be removed if the TOML engine returned a JSON date (string) instead of a JS Date object. The YAML engine did this by default.
56+ // NB Gavin: This could be removed if the TOML engine returned a JSON date (string) instead of a JS Date object. The YAML engine did this parsing by default.
5757 items.date = JSON.stringify(items.date).replace(/\"/g, '');
5858
5959
pages/blog.jsnew file+48
@@ -0,0 +1,48 @@
1+import Head from 'next/head'
2+import Link from 'next/link'
3+import { useState } from 'react';
4+import Container from '../components/Container'
5+import { getAllPosts } from '../lib/lib'
6+
7+function BackgroundImage(props) {
8+ return (
9+ <div className={`bg-img`} style={{backgroundImage: `url(${props.src})`}}/>
10+ )
11+}
12+
13+export default function Home({ posts }) {
14+
15+ return (
16+ <Container>
17+ <header className="layout-wide flex justify-between items-center pt-8">
18+ <a href="/" className="type-ui">Urbit</a>
19+ <nav className="flex items-center">
20+ <a href="/docs" className="type-ui text-gray mr-6">Docs</a>
21+ <a href="/blog" className="type-ui text-gray mr-6">Blog</a>
22+ <button className="button-sm">Download Port</button>
23+ </nav>
24+ </header>
25+ <section className="layout-narrow pt-48">
26+ {
27+ posts.map((post) => <div key={post.slug}>{post.title}</div>)
28+ }
29+ </section>
30+
31+
32+ </Container>
33+ )
34+}
35+
36+export async function getStaticProps() {
37+ const posts = getAllPosts([
38+ 'title',
39+ 'slug',
40+ 'date',
41+ 'description',
42+ 'extra',
43+ ], 'blog')
44+
45+ return {
46+ props: { posts },
47+ }
48+}
pages/blog/[slug].js+19−11
@@ -4,41 +4,49 @@ import Head from 'next/head'
44import ErrorPage from '../404'
55import Container from '../../components/Container'
66import Markdown from '../../components/Markdown'
7+import Header from '../../components/Header'
78import {
89 name,
910} from '../../lib/constants'
1011
11−export default function Post({ project }) {
12+export default function Post({ post }) {
1213 const router = useRouter()
13− if (!router.isFallback && !project?.slug) {
14+ if (!router.isFallback && !post?.slug) {
1415 return <ErrorPage />
1516 }
17+
1618 return (
1719 <Container>
18− <Markdown post={project} />
20+ <Header />
21+ <section className="layout-narrow pt-48">
22+ <article>
23+ <Markdown post={post} />
24+ </article>
25+ </section>
1926 </Container>
2027 )
2128}
22−
29+//
2330export async function getStaticProps({ params }) {
24− const project = getPostBySlug(params.slug, [
31+ const post = getPostBySlug(params.slug, [
2532 'title',
33+ 'slug',
2634 'date',
27− 'subtitle',
35+ 'description',
2836 'content',
29− 'slug',
30− ])
37+ 'extra',
38+ ], 'blog')
3139
3240 return {
33− props: { project },
41+ props: { post },
3442 }
3543}
3644
3745export async function getStaticPaths() {
38− const projects = getAllPosts(['slug'])
46+ const posts = getAllPosts(['slug', 'date'], 'blog')
3947
4048 return {
41− paths: projects.map((post) => {
49+ paths: posts.map((post) => {
4250 return {
4351 params: {
4452 slug: post.slug,
pages/index.js+5−13
@@ -2,6 +2,7 @@ import Head from 'next/head'
22import Link from 'next/link'
33import { useState } from 'react';
44import Container from '../components/Container'
5+import Header from '../components/Header'
56import { getAllPosts } from '../lib/lib'
67
78function TabCarousel(props) {
@@ -25,14 +26,7 @@ export default function Home({ posts, events }) {
2526
2627 return (
2728 <Container>
28− <header className="layout-wide flex justify-between items-center pt-8">
29− <a href="/docs" className="type-ui">Urbit</a>
30− <nav className="flex items-center">
31− <a href="/docs" className="type-ui text-gray mr-6">Docs</a>
32− <a href="/blog" className="type-ui text-gray mr-6">Blog</a>
33− <button className="button-sm">Download Port</button>
34− </nav>
35− </header>
29+ <Header />
3630
3731 <section className="layout-narrow pt-48">
3832 <h1>A general-purpose, peer-to-peer, personal computing system.</h1>
@@ -128,6 +122,9 @@ export default function Home({ posts, events }) {
128122 )
129123 })
130124 }
125+ <div>
126+ <Link href="/blog"><button className="button-lg type-ui">Read More</button></Link>
127+ </div>
131128 </div>
132129 <div className="blog-grid">
133130 {
@@ -173,9 +170,6 @@ export async function getStaticProps() {
173170 'date',
174171 'description',
175172 'extra',
176− // 'author',
177− // 'ship',
178− // 'image'
179173 ], 'blog')
180174
181175 const events = getAllPosts([
@@ -184,8 +178,6 @@ export async function getStaticProps() {
184178 'date',
185179 'extra',
186180 ], 'events')
187−
188− console.log(posts)
189181
190182 return {
191183 props: { posts, events },