Browse Source

feat: allow writing pages in markdown

master
Garrit Franke 3 years ago
parent
commit
1448128bd3
Signed by: garrit
GPG Key ID: 65586C4DDA55EA2C
  1. 19
      components/BlogList.js
  2. 44
      components/Meta.js
  3. 149
      components/Page.js
  4. 15
      content/todo.md
  5. 14016
      package-lock.json
  6. 6
      package.json
  7. 51
      pages/[page].js
  8. 156
      pages/posts/[post].js

19
components/BlogList.js

@ -20,23 +20,30 @@ const BlogList = ({ posts }) => {
.filter((post) => !post.slug.startsWith("_"))
// Ternary operator is used to fix chromium sorting
// See: https://stackoverflow.com/a/36507611
.sort((a, b) => (a.frontmatter.date < b.frontmatter.date ? 1 : -1))
.sort((a, b) =>
a.frontmatter.date < b.frontmatter.date ? 1 : -1
)
.map((post) => (
<Link key={post.slug} href={{ pathname: `/posts/${post.slug}` }}>
<a>
<a href={`/posts/${post.slug}`}>
<li>
<div className="blog__info">
<h2>{post.frontmatter.title}</h2>
<h3> {reformatDate(post.frontmatter.date)}</h3>
<h3>
{" "}
{reformatDate(
post.frontmatter.date
)}
</h3>
<p>
<ReactMarkdown
source={truncateSummary(post.markdownBody)}
source={truncateSummary(
post.markdownBody
)}
/>
</p>
</div>
</li>
</a>
</Link>
))}
</ul>
<style jsx>

44
components/Meta.js

@ -4,7 +4,10 @@ export default function Meta(props) {
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<meta charSet="utf-8" />
<title>{props.siteTitle}</title>
<meta
@ -13,8 +16,12 @@ export default function Meta(props) {
></meta>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<script async defer data-domain="blog.garrit.xyz" src="https://analytics.slashdev.space/js/plausible.js"></script>
<script
async
defer
data-domain="blog.garrit.xyz"
src="https://analytics.slashdev.space/js/plausible.js"
></script>
</Head>
<style jsx global>
{`
@ -28,7 +35,8 @@ export default function Meta(props) {
}
body {
margin: 0;
font-family: "Work Sans", "Helvetica Neue", Helvetica, sans-serif;
font-family: "Work Sans", "Helvetica Neue", Helvetica,
sans-serif;
overflow-x: hidden;
color: #000;
font-size: 16px;
@ -46,7 +54,6 @@ export default function Meta(props) {
text-decoration-color: inherit;
}
ul {
list-style: none;
margin: 0;
padding-bottom: 0;
padding-left: 0;
@ -171,7 +178,8 @@ export default function Meta(props) {
h5,
h6,
p {
font-family: "Work Sans", "Helvetica Neue", Helvetica, sans-serif;
font-family: "Work Sans", "Helvetica Neue", Helvetica,
sans-serif;
margin-left: 0;
margin-right: 0;
margin-top: 0;
@ -235,8 +243,8 @@ export default function Meta(props) {
// FIXME: I could not get this to work inside the post component,
// but here it apparently works. Maybe an overriding selector?
.blog__body a,
.blog__footer a {
.page__body a,
.page__footer a {
text-decoration: underline;
}
@ -270,6 +278,26 @@ export default function Meta(props) {
a {
color: #dbd7db;
}
article a[href^="http"]::after,
article a[href^="https://"]::after {
filter: invert(100%);
}
}
article a[href^="http"]::after,
article a[href^="https://"]::after
{
content: "";
width: 11px;
height: 11px;
margin-left: 4px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
`}
</style>

149
components/Page.js

@ -0,0 +1,149 @@
import Layout from "./Layout";
export default function Page(props) {
const { title, date } = props;
return (
<Layout siteTitle={title}>
<article className="blog">
<div className="page__info">
<h1>{title}</h1>
{ date && <h3>{ date }</h3> }
</div>
<div className="page__body">
{ props.children }
</div>
<div className="page__footer">
</div>
</article>
<style jsx>
{`
.page h1 {
margin-bottom: 0.7rem;
}
.page__hero {
min-height: 300px;
height: 60vh;
width: 100%;
margin: 0;
overflow: hidden;
}
.page__hero img {
margin-bottom: 0;
object-fit: cover;
min-height: 100%;
min-width: 100%;
object-position: center;
}
.page__info {
padding: 1.5rem 1.25rem;
width: 100%;
max-width: 768px;
margin: 0 auto;
}
.page__info h1 {
margin-bottom: 0.66rem;
}
.page__info h3 {
margin-bottom: 0;
}
.page__body {
width: 100%;
padding: 0 1.25rem;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.page__body a {
text-decoration: underline;
padding-bottom: 1.5rem;
}
.page__body:last-child {
margin-bottom: 0;
}
.page__body h1 h2 h3 h4 h5 h6 p {
font-weight: normal;
}
.page__body ul {
list-style-type: circle;
}
.page__body ul ol {
margin-left: 1.25rem;
margin-bottom: 1.25rem;
padding-left: 1.45rem;
}
.page__footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 1.25rem;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.page__footer h2 {
margin-bottom: 0;
}
.page__footer a {
display: flex;
justify-content: space-between;
align-items: center;
}
.page__footer a svg {
width: 20px;
}
@media (max-width: 768px) {
.page__footer {
display: none;
}
}
@media (min-width: 768px) {
.page {
display: flex;
flex-direction: column;
}
.page__body {
max-width: 800px;
padding: 0 2rem;
}
.page__body span {
width: 100%;
margin: 1.5rem auto;
}
.page__body ul ol {
margin-left: 1.5rem;
margin-bottom: 1.5rem;
}
.page__hero {
min-height: 600px;
height: 75vh;
}
.page__info {
text-align: center;
padding: 2rem 0;
}
.page__info h1 {
max-width: 500px;
margin: 0 auto 0.66rem auto;
}
.page__footer {
padding: 2.25rem;
}
}
@media (min-width: 1440px) {
.page__hero {
height: 70vh;
}
.page__info {
padding: 3rem 0;
}
.page__footer {
padding: 2rem 2rem 3rem 2rem;
}
}
`}
</style>
</Layout>
);
}

15
content/todo.md

@ -0,0 +1,15 @@
---
title: "A comprehensive list of projects that I want to build but probably never will"
---
- A fork of [birdsite.live](https://github.com/NicolasConstant/BirdsiteLive)
for instagram
- Battle Royale App for habit tracking
- Federated sports tracker ([somewhat in the making already](https://github.com/SamR1/FitTrackee/issues/16))
- C compiler for [uxn](https://wiki.xxiivv.com/site/uxn.html) (or
[antimony](https://github.com/antimony-lang/antimony) backend?)
- Turn this blog into my main website
- Mirror this blog to [Gemini](https://gemini.circumlunar.space/)
- [~~"todo" Page on website (this list)~~](/todo)

14016
package-lock.json generated

File diff suppressed because it is too large Load Diff

6
package.json

@ -11,10 +11,10 @@
"glob": "^7.1.6",
"gray-matter": "^4.0.2",
"markdown": "^0.5.0",
"next": "9.5.3",
"next": "11.1.0",
"raw-loader": "^4.0.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-markdown": "^4.3.1",
"rfc822-date": "0.0.3"
}

51
pages/[page].js

@ -0,0 +1,51 @@
import matter from "gray-matter";
import ReactMarkdown from "react-markdown";
import glob from "glob";
import Page from "../components/Page";
export default function PageTemplate(props) {
/*
** Odd fix to get build to run
** It seems like on first go the props
** are undefined could be a Next bug?
*/
if (!props.frontmatter) return <></>;
return (
<Page title={props.frontmatter.title}>
<ReactMarkdown source={props.markdownBody} />
</Page>
);
}
export async function getStaticProps({ ...ctx }) {
const { page } = ctx.params;
const content = await import(`../content/${page}.md`);
const data = matter(content.default);
return {
props: {
siteTitle: "~/garrit",
frontmatter: data.data,
markdownBody: data.content,
},
};
}
export async function getStaticPaths() {
//get all .md files in the posts dir
const pages = glob.sync("content/*.md");
//remove path and extension to leave filename only
const pageSlugs = pages.map((file) =>
file.split("/")[1].replace(/ /g, "-").slice(0, -3).trim()
);
// create paths with `slug` param
const paths = pageSlugs.map((slug) => `/${slug}`);
return {
paths,
fallback: false,
};
}

156
pages/posts/[post].js

@ -1,6 +1,6 @@
import matter from "gray-matter";
import ReactMarkdown from "react-markdown";
import Layout from "../../components/Layout";
import Page from "../../components/Page";
import glob from "glob";
export default function BlogTemplate(props) {
@ -18,160 +18,26 @@ export default function BlogTemplate(props) {
if (!props.frontmatter) return <></>;
return (
<Layout siteTitle={props.frontmatter.title}>
<article className="blog">
<div className="blog__info">
<h1>{props.frontmatter.title}</h1>
<h3>{reformatDate(props.frontmatter.date)}</h3>
</div>
<div className="blog__body">
<ReactMarkdown source={props.markdownBody} />
<Page title={props.frontmatter.title}>
<ReactMarkdown
source={props.markdownBody}
date={props.frontmatter.date}
/>
<p>
If you enjoyed this post, consider{" "}
<a href="https://donate.slashdev.space">buying me a coffee</a>! Got
comments? Send me a{" "}
<a href="mailto:garrit@slashdev.space">
Mail
</a>
, or shoot me a message on{" "}
<a href="https://donate.slashdev.space">buying me a coffee</a>!
Got comments? Send me a{" "}
<a href="mailto:garrit@slashdev.space">Mail</a>, or shoot me a
message on{" "}
<a href="https://matrix.to/#/@garrit:matrix.slashdev.space">
Matrix
</a>
.
</p>
</div>
<div className="blog__footer">
<h2>Written By: Garrit Franke</h2>
</div>
</article>
<style jsx>
{`
.blog h1 {
margin-bottom: 0.7rem;
}
.blog__hero {
min-height: 300px;
height: 60vh;
width: 100%;
margin: 0;
overflow: hidden;
}
.blog__hero img {
margin-bottom: 0;
object-fit: cover;
min-height: 100%;
min-width: 100%;
object-position: center;
}
.blog__info {
padding: 1.5rem 1.25rem;
width: 100%;
max-width: 768px;
margin: 0 auto;
}
.blog__info h1 {
margin-bottom: 0.66rem;
}
.blog__info h3 {
margin-bottom: 0;
}
.blog__body {
width: 100%;
padding: 0 1.25rem;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.blog__body a {
padding-bottom: 1.5rem;
}
.blog__body:last-child {
margin-bottom: 0;
}
.blog__body h1 h2 h3 h4 h5 h6 p {
font-weight: normal;
}
.blog__body ul {
list-style: initial;
}
.blog__body ul ol {
margin-left: 1.25rem;
margin-bottom: 1.25rem;
padding-left: 1.45rem;
}
.blog__footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 1.25rem;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.blog__footer h2 {
margin-bottom: 0;
}
.blog__footer a {
display: flex;
justify-content: space-between;
align-items: center;
}
.blog__footer a svg {
width: 20px;
}
@media (max-width: 768px) {
.blog__footer {
display: none;
}
}
@media (min-width: 768px) {
.blog {
display: flex;
flex-direction: column;
}
.blog__body {
max-width: 800px;
padding: 0 2rem;
}
.blog__body span {
width: 100%;
margin: 1.5rem auto;
}
.blog__body ul ol {
margin-left: 1.5rem;
margin-bottom: 1.5rem;
}
.blog__hero {
min-height: 600px;
height: 75vh;
}
.blog__info {
text-align: center;
padding: 2rem 0;
}
.blog__info h1 {
max-width: 500px;
margin: 0 auto 0.66rem auto;
}
.blog__footer {
padding: 2.25rem;
}
}
@media (min-width: 1440px) {
.blog__hero {
height: 70vh;
}
.blog__info {
padding: 3rem 0;
}
.blog__footer {
padding: 2rem 2rem 3rem 2rem;
}
}
`}
</style>
</Layout>
</Page>
);
}

Loading…
Cancel
Save