From ffa1533a191bf09ea5934e8821de7d26275f8521 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Mon, 12 Apr 2021 11:50:37 +0200 Subject: added recent posts to home page --- components/card.tsx | 11 +++++++++++ pages/_app.tsx | 1 + pages/index.tsx | 35 ++++++++++++++++++++++++++++++++--- pages/post/[id].tsx | 2 ++ pages/search.tsx | 11 ++++++----- posts/index.md | 1 + scripts/postinfo | 6 ++++-- styles/card.css | 28 ++++++++++++++++++++++++++++ styles/layout.css | 6 ++++++ 9 files changed, 91 insertions(+), 10 deletions(-) create mode 100644 components/card.tsx create mode 100644 styles/card.css diff --git a/components/card.tsx b/components/card.tsx new file mode 100644 index 0000000..ba62d57 --- /dev/null +++ b/components/card.tsx @@ -0,0 +1,11 @@ +import { ArticleMeta } from '../pages/post/[id]'; + +export default function PostCard(props: { + post: ArticleMeta +}) { + return + { props.post.cover && } +

{props.post.title}

+ {props.post.subtitle} + +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 662f841..fa7219a 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -8,6 +8,7 @@ import '../styles/layout.css'; import '../styles/navbar.css'; import '../styles/search.css'; import '../styles/tags.css'; +import '../styles/card.css'; export default function Blog({ Component, pageProps }) { return
diff --git a/pages/index.tsx b/pages/index.tsx index 65b53cb..746405a 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,9 +1,13 @@ +import Button from '../components/button'; import Chapters, { chapter } from '../components/chapters'; import Navbar, { NavbarItem } from '../components/navbar'; import Seperator from '../components/seperator'; - +import PostCard from '../components/card'; +import { PostsInfo } from './search'; import { ArticleMeta, getStaticProps as getBlogPage, RenderedArticle } from './post/[id]'; +import { useEffect, useState } from 'react'; + var posts = ['index', 'index', 'index']; export default function Home(props: { @@ -14,6 +18,16 @@ export default function Home(props: { }; }>; }) { + var [posts, setPosts] = useState({ posts: [], valid_tags: [] }); + + useEffect(() => { + (async () => { + var posts = await fetch('/posts.json'); + var postsJson: PostsInfo = await posts.json(); + setPosts(postsJson); + })(); + }, []); + return
@@ -39,9 +53,24 @@ export default function Home(props: {
{props.posts.map((post, index) => { return <> - {index != 0 &&

{post.props.meta.title}

} + { index != 0 &&

{post.props.meta.title}

} - {index + 1 != props.posts.length && } + { index + 1 != props.posts.length && } + { + index == 0 && <> +

Recent posts

+
+ { + posts.posts.slice(0, 4).map(post => { + return ; + }) + } +
+ +
+ + + } ; })}
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx index c0d4e9d..eed1429 100644 --- a/pages/post/[id].tsx +++ b/pages/post/[id].tsx @@ -18,6 +18,7 @@ export interface ArticleMeta { tags?: Array; date?: string; chapters?: Array; + cover?: string; id?: string; } @@ -78,6 +79,7 @@ var parseTag = { 'title': (val: string) => val, 'subtitle': (val: string) => val, 'author': (val: string) => val, + 'cover': (val: string) => val, 'tags': (val: string) => val.split(',').map(i => i.trim()), 'date': (val: string) => new Date(val).toDateString(), }; diff --git a/pages/search.tsx b/pages/search.tsx index db5cc89..8daff50 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -22,22 +22,23 @@ function SearchBar(props: { searchFunction: () => void; }) {
; } -interface Post { +export interface Post { title: string; subtitle: string; author: string; date: string; - urlname: string; + id: string; + cover: string; tags: Array; } -interface PostsInfo { +export interface PostsInfo { valid_tags: Array; posts: Array; } function Post(props: { post: Post; }) { - return + return {props.post.title} {props.post.subtitle &&

{props.post.subtitle}

}

@@ -96,7 +97,7 @@ export default function SearchPage() { 'subtitle', 'author', 'date', - 'urlname', + 'id', 'tags', ], isCaseSensitive: false, diff --git a/posts/index.md b/posts/index.md index f61a35c..aeaf44b 100644 --- a/posts/index.md +++ b/posts/index.md @@ -3,6 +3,7 @@ [meta]: (Loek) [meta]: (March 27 2021) [meta]: (test, debug) +[meta]: (https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fbarkpost-assets.s3.amazonaws.com%2Fwp-content%2Fuploads%2F2013%2F11%2FplainDoge.jpg&f=1&nofb=1) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida dictum fusce ut placerat orci nulla pellentesque. Laoreet id donec ultrices tincidunt arcu. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat. A scelerisque purus semper eget duis at tellus. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Arcu bibendum at varius vel pharetra vel turpis nunc eget. Euismod in pellentesque massa placerat duis. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ultrices in iaculis nunc sed augue lacus. Vestibulum mattis ullamcorper velit sed. Adipiscing diam donec adipiscing diff --git a/scripts/postinfo b/scripts/postinfo index 72c6526..968eb13 100755 --- a/scripts/postinfo +++ b/scripts/postinfo @@ -8,13 +8,15 @@ jq -n \ --argjson author "$(./meta author $filename)" \ --argjson date "$(./meta date $filename)" \ --argjson tags "$(./meta tags $filename)" \ - --argjson urlname "$(basename $filename .md | jq --raw-input)" \ + --argjson cover "$(./meta cover $filename)" \ + --argjson id "$(basename $filename .md | jq --raw-input)" \ '{ "title": $title, "subtitle": $subtitle, "author": $author, "date": $date, "tags": $tags, - "urlname": $urlname + "cover": $cover, + "id": $id }' diff --git a/styles/card.css b/styles/card.css new file mode 100644 index 0000000..1510492 --- /dev/null +++ b/styles/card.css @@ -0,0 +1,28 @@ +.postCard { + background-color: var(--oxford-blue); + padding: 12px; + border-radius: 8px; + + overflow-x: hidden; + color: var(--fg) !important; +} + +.postCard::after { + display: none; +} + +.postCard .cover { + width: 100%; + border-radius: 6px; + max-height: 220px; + object-fit: cover; +} + +.postCard .title { + font-size: 24px; +} + +.postCard .subtitle { + font-weight: 500; +} + diff --git a/styles/layout.css b/styles/layout.css index 188f17a..6715681 100644 --- a/styles/layout.css +++ b/styles/layout.css @@ -58,3 +58,9 @@ overflow-x: scroll; } +.recentPosts { + display: grid; + grid-gap: 12px; + grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); +} + -- cgit v1.2.3