diff options
| -rw-r--r-- | components/card.tsx | 14 | ||||
| -rw-r--r-- | pages/_app.tsx | 5 | ||||
| -rw-r--r-- | pages/index.tsx | 36 | ||||
| -rw-r--r-- | posts/index.md | 1 | ||||
| -rw-r--r-- | posts/software.md | 13 | ||||
| -rw-r--r-- | public/img/helloworld.png | bin | 0 -> 16179 bytes | |||
| -rw-r--r-- | public/img/software.png | bin | 0 -> 23521 bytes | |||
| -rw-r--r-- | styles/card.css | 1 | ||||
| -rw-r--r-- | styles/tags.css | 4 |
9 files changed, 44 insertions, 30 deletions
diff --git a/components/card.tsx b/components/card.tsx index 620ada7..7a6a472 100644 --- a/components/card.tsx +++ b/components/card.tsx @@ -3,12 +3,12 @@ import Tags from './tag'; import { ArticleMeta } from '../pages/post/[id]'; export default function PostCard(props: { - post: ArticleMeta + post: ArticleMeta; }) { - return <a className="postCard" href={"/post/" + props.post.id}> - { props.post.cover && <img src={props.post.cover} className="cover"/> } - <h2 className="title">{props.post.title}</h2> - <strong className="subtitle">{props.post.subtitle}</strong> - { props.post.tags?.length != 0 && <Tags tags={props.post.tags} /> } - </a> + return <a className='postCard' href={'/post/' + props.post.id}> + {props.post.cover && <img src={props.post.cover} className='cover' />} + <h2 className='title'>{props.post.title}</h2> + <strong className='subtitle'>{props.post.subtitle}</strong> + {props.post.tags?.length != 0 && <Tags tags={props.post.tags} />} + </a>; } diff --git a/pages/_app.tsx b/pages/_app.tsx index bbaf025..c85b6ea 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,7 @@ import Head from 'next/head'; import '../styles/button.css'; +import '../styles/card.css'; import '../styles/colors.css'; import '../styles/globals.css'; import '../styles/image.css'; @@ -8,7 +9,6 @@ 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 <> @@ -20,10 +20,9 @@ export default function Blog({ Component, pageProps }) { <meta property='og:site_name' content="Loek's blog" /> <meta property='og:url' content='https://blog.pipeframe.xyz' /> <meta property='og:title' content="Loek's excruciatingly interesting blog" /> - <meta property='og:description' content="This is my personal blog website" /> + <meta property='og:description' content='This is my personal blog website' /> <meta property='og:type' content='website' /> <meta name='theme-color' content='#e16d82' /> - </Head> <Component {...pageProps} /> </>; diff --git a/pages/index.tsx b/pages/index.tsx index be1f9f4..f030f2c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,15 +1,15 @@ import Button from '../components/button'; +import PostCard from '../components/card'; 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 { PostsInfo } from './search'; import { useEffect, useState } from 'react'; // edit this to change the post displayed on the home page and the pinned posts -var posts = ['index']; +var posts = ['index', 'software']; export default function Home(props: { posts: Array<{ @@ -54,24 +54,22 @@ export default function Home(props: { <div className='contentWrapper'> {props.posts.map((post, index) => { return <> - { index != 0 && <h1>{post.props.meta.title}</h1> } + {index != 0 && <h1>{post.props.meta.title}</h1>} <RenderedArticle content={post.props.content} /> - { index + 1 != props.posts.length && <Seperator /> } - { - index == 0 && <> - <h2>Recent posts</h2> - <div className="recentPosts"> - { - posts.posts.slice(0, 4).map(post => { - return <PostCard post={post}/>; - }) - } - </div> + {index + 1 != props.posts.length && <Seperator />} + {index == 0 && <> + <h2>Recent posts</h2> + <div className='recentPosts'> + {posts.posts.slice(0, 4).map(post => { + return <PostCard post={post} />; + })} + </div> - <div><Button text="Go to all posts" href="/search"/></div> - <Seperator /> - </> - } + <div> + <Button text='Go to all posts' href='/search' /> + </div> + <Seperator /> + </>} </>; })} </div> diff --git a/posts/index.md b/posts/index.md index 2b20062..06ef12d 100644 --- a/posts/index.md +++ b/posts/index.md @@ -3,6 +3,7 @@ [meta]: <author> (Loek) [meta]: <date> (April 12 2021) [meta]: <tags> (home) +[meta]: <cover> (/img/helloworld.png) Welcome to my blog page! This is where I post updates on things that I do such as: diff --git a/posts/software.md b/posts/software.md new file mode 100644 index 0000000..50d05e1 --- /dev/null +++ b/posts/software.md @@ -0,0 +1,13 @@ +[meta]: <title> (Software that I use) +[meta]: <subtitle> (Desktop software, server software, phone apps, everything) +[meta]: <author> (Loek) +[meta]: <date> (April 13 2021) +[meta]: <tags> (software, open source, server, phone) +[meta]: <cover> (/img/software.png) + +## PC software + +## Server software + +## Phone apps + diff --git a/public/img/helloworld.png b/public/img/helloworld.png Binary files differnew file mode 100644 index 0000000..dd067bf --- /dev/null +++ b/public/img/helloworld.png diff --git a/public/img/software.png b/public/img/software.png Binary files differnew file mode 100644 index 0000000..c4cf93b --- /dev/null +++ b/public/img/software.png diff --git a/styles/card.css b/styles/card.css index 8a589e2..0b3a20c 100644 --- a/styles/card.css +++ b/styles/card.css @@ -16,6 +16,7 @@ border-radius: 6px; max-height: 220px; object-fit: cover; + margin-bottom: 6px; } .postCard .title { diff --git a/styles/tags.css b/styles/tags.css index 5e6af11..bf1197b 100644 --- a/styles/tags.css +++ b/styles/tags.css @@ -1,5 +1,5 @@ .tags { - margin-top: 12px; + margin-top: 6px; } .tags .tag { @@ -15,6 +15,8 @@ position: relative; z-index: 1; + + margin-top: 6px; } @media (prefers-color-scheme: light) { |
