Add "Other posts" section to blog post, and get metadata as json from top of each markdown file
This commit is contained in:
Lewin Kelly
parent
48bcb10a0a
commit
5feaecdeb2
11
README.md
11
README.md
|
|
@ -1,3 +1,14 @@
|
|||
# revival-archive
|
||||
|
||||
Revival archive website
|
||||
|
||||
# Pages/posts
|
||||
|
||||
To make a post, place it into the /pages directory. The filename will be used as the URL slug. The file must be in Markdown and contain a json header, like the following:
|
||||
|
||||
```json
|
||||
{
|
||||
"title": "First blog post",
|
||||
"date": "2023-07-06 7:29 PM"
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
First blog post
|
||||
2023-06-07
|
||||
```json
|
||||
{
|
||||
"title": "First blog post",
|
||||
"date": "2023-07-06 7:29 PM"
|
||||
}
|
||||
```
|
||||
|
||||
I'm baby portland cred tote bag ethical glossier etsy fixie edison bulb retro irony. Helvetica beard humblebrag before they sold out photo booth yr cloud bread iceland ennui yes plz cold-pressed solarpunk tacos marxism. Yr occupy squid pug helvetica crucifix enamel pin subway tile bruh jean shorts fanny pack. Meditation gluten-free butcher PBR&B twee. Hammock selfies asymmetrical fixie before they sold out.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,18 @@
|
|||
Second blog post
|
||||
2023-06-07
|
||||
```json
|
||||
{
|
||||
"title": "Second blog post",
|
||||
"date": "2023-07-09 11:40 AM"
|
||||
}
|
||||
```
|
||||
|
||||
I'm baby portland cred tote bag ethical glossier etsy fixie edison bulb retro irony. Helvetica beard humblebrag before they sold out photo booth yr cloud bread iceland ennui yes plz cold-pressed solarpunk tacos marxism. Yr occupy squid pug helvetica crucifix enamel pin subway tile bruh jean shorts fanny pack. Meditation gluten-free butcher PBR&B twee. Hammock selfies asymmetrical fixie before they sold out.
|
||||
Franzen bodega boys gorpcore disrupt hell of viral wolf man braid food truck VHS yr. Gentrify tumblr meditation, art party try-hard vaporware direct trade echo park helvetica you probably haven't heard of them disrupt fam. Poutine portland gatekeep bespoke. Organic neutra jianbing, occupy distillery 3 wolf moon big mood bitters tumblr actually forage tattooed. DIY messenger bag listicle, sustainable bitters sus portland. Gentrify VHS freegan artisan solarpunk seitan bruh hoodie live-edge drinking vinegar vape iceland palo santo +1.
|
||||
|
||||
Grailed iceland austin chicharrones sriracha 8-bit praxis kinfolk blog everyday carry trust fund DIY pour-over. Sriracha disrupt PBR&B fam gorpcore bodega boys adaptogen butcher. Master cleanse tumeric slow-carb activated charcoal jean shorts freegan artisan poke trust fund poutine paleo marxism viral sartorial. Wayfarers neutral milk hotel unicorn art party skateboard. Actually williamsburg chicharrones palo santo direct trade seitan kickstarter humblebrag church-key air plant tacos sriracha. Vape blackbird spyplane kickstarter +1 hexagon PBR&B. Organic copper mug aesthetic, XOXO marxism quinoa subway tile irony lumbersexual authentic disrupt kitsch solarpunk.
|
||||
Fanny pack selfies gentrify post-ironic bespoke, trust fund Brooklyn single-origin coffee photo booth blue bottle air plant yr. Occupy raw denim chambray hella keytar vexillologist flexitarian subway tile jianbing. Fanny pack selfies pour-over irony quinoa echo park JOMO jawn tumeric. Cardigan tumeric squid thundercats microdosing. Pitchfork pork belly irony aesthetic offal shoreditch. Fit narwhal everyday carry shabby chic. Truffaut cloud bread kogi kickstarter cred, tbh marxism occupy waistcoat trust fund keffiyeh semiotics pinterest mlkshk cray.
|
||||
|
||||
Whatever JOMO organic artisan photo booth marfa, wayfarers yes plz cray. Keffiyeh gentrify thundercats affogato small batch retro you probably haven't heard of them drinking vinegar try-hard vibecession enamel pin. Tbh crucifix seitan, ennui jawn vice lo-fi DSA franzen fingerstache chillwave vape. Sartorial subway tile forage vaporware organic, XOXO letterpress.
|
||||
Mixtape big mood franzen 90's. Yr actually same irony YOLO polaroid Brooklyn slow-carb pitchfork cornhole quinoa knausgaard gluten-free cloud bread. Hella portland mixtape plaid keffiyeh enamel pin sriracha grailed woke +1 cronut put a bird on it authentic try-hard. Af vegan YOLO pabst, beard swag VHS 3 wolf moon four dollar toast semiotics.
|
||||
|
||||
Mustache bicycle rights copper mug pitchfork af typewriter. Vinyl copper mug bitters sus brunch. Biodiesel copper mug vexillologist, butcher asymmetrical seitan man bun everyday carry. Cray humblebrag lumbersexual Brooklyn chambray vice. Taxidermy viral keytar XOXO hell of intelligentsia next level.
|
||||
Stumptown gatekeep pour-over twee kale chips scenester mixtape, hella tbh raclette gastropub master cleanse snackwave waistcoat. Lyft aesthetic hella neutra cronut, green juice cliche banh mi mukbang. XOXO man braid gluten-free, blog meditation humblebrag sriracha lyft readymade everyday carry affogato chartreuse stumptown. Thundercats air plant messenger bag skateboard cold-pressed organic. Hoodie letterpress 8-bit vegan.
|
||||
|
||||
Squid polaroid cold-pressed bitters, tousled enamel pin succulents. Seitan semiotics tumblr shabby chic heirloom salvia, beard gorpcore narwhal williamsburg forage. Austin synth locavore XOXO succulents artisan. Bodega boys bespoke bicycle rights shaman, mukbang leggings selvage irony yuccie polaroid kale chips activated charcoal chambray. Deep v migas pour-over edison bulb tilde chia vinyl, letterpress umami wolf hot chicken franzen taxidermy health goth tonx. Post-ironic gastropub heirloom, plaid literally dreamcatcher pop-up YOLO migas shoreditch brunch. Lo-fi glossier single-origin coffee, tattooed vegan hexagon kinfolk actually YOLO prism.
|
||||
Pitchfork cloud bread umami fam. Everyday carry subway tile cronut celiac air plant hoodie. Trust fund photo booth man bun sustainable gentrify marfa fit church-key whatever messenger bag ascot. Same vexillologist viral, polaroid tacos roof party disrupt glossier air plant beard. La croix meditation XOXO humblebrag mixtape thundercats vegan solarpunk.
|
||||
|
||||
Dummy text? More like dummy thicc text, amirite?
|
||||
|
|
|
|||
|
|
@ -23,26 +23,23 @@ function walk(dir) {
|
|||
|
||||
const allMdFiles = walk("./pages")
|
||||
|
||||
fs.rmSync("./pagesjson", { recursive: true })
|
||||
if (fs.existsSync("./pagesjson")) fs.rmSync("./pagesjson", { recursive: true })
|
||||
|
||||
allMdFiles.forEach(file => {
|
||||
let md = fs.readFileSync(file.name, "utf8")
|
||||
|
||||
const lines = md.split("\n")
|
||||
// Get json data from the top of the file
|
||||
const [json, content] = md
|
||||
.match(/^```json[\s\S]*({[\s\S]+})[\s\S]*```\n*([\s\S]+)$/)
|
||||
.slice(1, 3)
|
||||
|
||||
// Remove the first line of the file
|
||||
const title = lines.shift()
|
||||
const date = new Date(lines.shift())
|
||||
lines.shift() // Remove the empty line
|
||||
|
||||
md = lines.join("\n")
|
||||
|
||||
const html = marked.parse(md, {
|
||||
mangle: false,
|
||||
headerIds: false,
|
||||
})
|
||||
|
||||
const obj = { title, date, html }
|
||||
const obj = {
|
||||
...JSON.parse(json),
|
||||
html: marked.parse(content, {
|
||||
mangle: false,
|
||||
headerIds: false,
|
||||
}),
|
||||
}
|
||||
|
||||
fs.mkdirSync(
|
||||
file.name
|
||||
|
|
|
|||
|
|
@ -1,16 +1,27 @@
|
|||
import { error } from "@sveltejs/kit"
|
||||
import { load as loadParent } from "../+page"
|
||||
|
||||
export async function load({ params }) {
|
||||
let title: string, date: Date, html: string
|
||||
|
||||
try {
|
||||
const { title, date, html } = await import(
|
||||
;({ title, date, html } = await import(
|
||||
`../../../../pagesjson/blog/${params.page}.json`
|
||||
)
|
||||
return {
|
||||
html,
|
||||
title,
|
||||
date,
|
||||
}
|
||||
))
|
||||
} catch (e) {
|
||||
throw error(404, "Post not found")
|
||||
}
|
||||
|
||||
const posts = await (await loadParent()).posts
|
||||
|
||||
// remove the current post from the list
|
||||
const index = posts.findIndex(post => post.title == title)
|
||||
posts.splice(index, 1)
|
||||
|
||||
return {
|
||||
title,
|
||||
date,
|
||||
html,
|
||||
posts,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,63 @@
|
|||
<script lang="ts">
|
||||
export let data
|
||||
|
||||
const when = (date: Date) =>
|
||||
new Date(date).toLocaleDateString("en-GB", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
})
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta name="description" content="{data.title}: {when}" />
|
||||
<title>{data.title} • Revival Archive</title>
|
||||
</svelte:head>
|
||||
|
||||
<article class="max-w-150 mx-a">
|
||||
<span class="flex mt-10">
|
||||
<h1 class="m-0 text-2rem">{data.title}</h1>
|
||||
<span class="mt-a ms-a mb-0.5">
|
||||
Published {new Date(data.date).toLocaleDateString("en-GB", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
})}
|
||||
</span>
|
||||
</span>
|
||||
<div class="xl:max-w-300 flex flex-col xl:flex-row">
|
||||
<article class="max-w-150 pt-8">
|
||||
<div class="-ms-4">
|
||||
<a href="/blog" class="hover:text-#888">← Back to blog</a>
|
||||
<div class="ms-4">
|
||||
<span class="mt-2 flex">
|
||||
<h1 class="text-2rem m-0">{data.title}</h1>
|
||||
<span class="mt-a ms-a mb-0.5">
|
||||
Published {when(data.date)}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<hr class="mt-3 mb-8" />
|
||||
<hr class="mb-8 mt-3" />
|
||||
|
||||
<div class="text-justify">
|
||||
{@html data.html}
|
||||
</div>
|
||||
</article>
|
||||
<div class="text-justify">
|
||||
{@html data.html}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{#if data.posts.length > 0}
|
||||
<section class="max-w-150 xl:max-w-100 xl:ms-12 xl:mt-14">
|
||||
<h2>Other posts</h2>
|
||||
{#each data.posts as post}
|
||||
<a
|
||||
href="/blog/{post.path}"
|
||||
class="txt bg-a @light:text-dark hover:text-#ccc
|
||||
@light:hover:text-#555 rounded-3 durition-500 box-border
|
||||
block text-white transition hover:shadow-xl">
|
||||
<article class="mb-4 px-6 py-3">
|
||||
<h3 class="my-2">{post.title}</h3>
|
||||
<small class="pb-5">
|
||||
Published {when(post.date)}
|
||||
</small>
|
||||
</article>
|
||||
</a>
|
||||
{/each}
|
||||
</section>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="sass">
|
||||
section a:hover
|
||||
transform: translateY(-0.15rem)
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue