mirror of
https://github.com/JonasunderscoreJones/blog.jonasjones.dev.git
synced 2025-10-22 18:49:19 +02:00
added post backend
This commit is contained in:
parent
85b846f6be
commit
9b28792c91
5 changed files with 96 additions and 16 deletions
13
package-lock.json
generated
13
package-lock.json
generated
|
@ -8,6 +8,7 @@
|
|||
"name": "blog.jonasjones.dev",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"marked": "^12.0.2",
|
||||
"svelte-kit": "^1.2.0",
|
||||
"svelte-spa-router": "^4.0.0"
|
||||
},
|
||||
|
@ -1775,6 +1776,18 @@
|
|||
"@jridgewell/sourcemap-codec": "^1.4.15"
|
||||
}
|
||||
},
|
||||
"node_modules/marked": {
|
||||
"version": "12.0.2",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-12.0.2.tgz",
|
||||
"integrity": "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"marked": "bin/marked.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 18"
|
||||
}
|
||||
},
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.0.30",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
|
||||
|
|
|
@ -21,6 +21,7 @@
|
|||
"vite": "^5.2.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"marked": "^12.0.2",
|
||||
"svelte-kit": "^1.2.0",
|
||||
"svelte-spa-router": "^4.0.0"
|
||||
}
|
||||
|
|
|
@ -1,9 +1,19 @@
|
|||
import Home from './routes/Home.svelte';
|
||||
import Post from './routes/Post.svelte';
|
||||
import Loading from './routes/Loading.svelte';
|
||||
import NotFound from './routes/NotFound.svelte';
|
||||
import wrap from 'svelte-spa-router/wrap'
|
||||
|
||||
export default {
|
||||
'/': Home,
|
||||
'/post/:year/:month/:day/:title': Post,
|
||||
'/post/:year/:month/:day/:title': wrap({
|
||||
// Note that this is a function that returns the import
|
||||
asyncComponent: () => import('./routes/Post.svelte'),
|
||||
// Show the loading component while the component is being downloaded
|
||||
loadingComponent: Loading,
|
||||
// Pass values for the `params` prop of the loading component
|
||||
loadingParams: {
|
||||
message: 'Loading the Name route…'
|
||||
}
|
||||
}),
|
||||
'*': NotFound
|
||||
};
|
||||
|
|
9
src/routes/Loading.svelte
Normal file
9
src/routes/Loading.svelte
Normal file
|
@ -0,0 +1,9 @@
|
|||
<h2>Loading…</h2>
|
||||
|
||||
<p>We're loading the route!</p>
|
||||
<p>Here's your message: {params && params.message}</p>
|
||||
|
||||
<script>
|
||||
// Prop exported that will be filled by the router
|
||||
export let params
|
||||
</script>
|
|
@ -1,28 +1,75 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { marked } from 'marked';
|
||||
|
||||
export let params: {year?: string, month?: string, day?: string, title?: string} = {};
|
||||
|
||||
let posts: { id: any; }[] = [];
|
||||
let post: {id: String, date: String, title: String, author: String, description: String} = {};
|
||||
|
||||
if (params.year && params.month && params.day && params.title) {
|
||||
const date = new Date(`${params.year}-${params.month}-${params.day}`);
|
||||
if (isNaN(date.getTime())) {
|
||||
// the date is invalid
|
||||
// navigate to the 404 page
|
||||
// this is the same as returning { status: 404 } from load()
|
||||
location.href = '/404';
|
||||
}
|
||||
const searchdate = new Date(`${params.year}-${params.month}-${params.day}`);
|
||||
} else {
|
||||
// the URL is missing some parameters
|
||||
// navigate to the 404 page
|
||||
location.href = '/#/404';
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const response = await fetch('https://cdn.jonasjones.dev/blog/index.json');
|
||||
|
||||
posts = await response.json();
|
||||
|
||||
post = await findPostByDate(posts, params);
|
||||
|
||||
if (await post === undefined) {
|
||||
location.href = '/#/404'
|
||||
}
|
||||
|
||||
const content = await fetch(`https://cdn.jonasjones.dev/blog/posts/${params.year}/${params.month}/${params.day}/${params.title}.md`)
|
||||
|
||||
if (await content.ok) {
|
||||
let markdowncontent = await content.text();
|
||||
markdowncontent = await marked.parse(markdowncontent);
|
||||
document.getElementById('markdowncontent').innerHTML = await markdowncontent;
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching posts:', error);
|
||||
}
|
||||
});
|
||||
|
||||
function findPostByDate(posts: any[], params: { year: any; month: any; day: any; title: any; }) {
|
||||
return posts.find(post => {
|
||||
// Create a Date object from the post's date string
|
||||
const postDate = new Date(post.date);
|
||||
|
||||
// Extract the year, month, and day from the Date object
|
||||
const postYear = postDate.getFullYear();
|
||||
const postMonth = postDate.getMonth() + 1; // Months are zero-based
|
||||
const postDay = postDate.getDate();
|
||||
|
||||
// Compare the extracted year, month, and day with params, and the title
|
||||
return (
|
||||
postYear === parseInt(params.year) &&
|
||||
postMonth === parseInt(params.month) &&
|
||||
postDay === parseInt(params.day) &&
|
||||
post.id === params.title
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<h1>Lorem ipsum</h1>
|
||||
<p>Tip: try changing the number in the URL's fragment, e.g. <code>#/lorem/4</code></p>
|
||||
{#each Array(repeat) as _}
|
||||
<p>
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed consequatur dicta, explicabo delectus, cupiditate, rem illo repellat aperiam saepe id minus ipsa. Illum libero consectetur fuga neque officia, adipisci commodi.Porro eius harum sed architecto maxime, molestiae cum ad dignissimos eum, nihil eligendi? Non quo, modi officia doloribus distinctio pariatur sed? Veniam facere beatae ipsam reprehenderit suscipit! Sequi, distinctio debitis.
|
||||
</p>
|
||||
{/each}
|
||||
<p>{params.year}, {params.month}, {params.day}, {params.title}</p>
|
||||
|
||||
<div class="post">
|
||||
<h1>{post.title}</h1>
|
||||
<h3>{post.description}</h3>
|
||||
<div id="markdowncontent"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue