Hare/blog.hareworks.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: make article pages a component

Browse Source
This commit is contained in:
Keisuke Hirata 2024-08-26 18:47:13 +09:00
parent 725c967b4f
commit 7795adde85
14 changed files with 283 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
articles

@ -1 +1 @@
Subproject commit b72a133cdd6acd08d3edf802af2ebfac0a630bf9 Subproject commit 172da3590a2e7cec7b41dcf9a60306db277b7159

15
src/lib/article.ts
View File

@ -1,7 +1,14 @@
export type Content = { import type { Publish } from "./publish";
export type Article = {
seq: number;
id: string;
title: string; title: string;
image: string; category: string;
date: string; released_at: Date;
link: string; updated_at: Date;
tags: string[]; tags: string[];
image: string;
publish: Publish;
content: string;
}; };

19
src/lib/components/head.svelte Normal file
View File

@ -0,0 +1,19 @@
<script lang="ts">
import type { Article } from '$lib/article';
import * as publish from '$lib/publish';
export let article: Article;
</script>
<title>{article.title} | Blog | HareWorks</title>
<meta property="og:title" content={article.title + '- HareWorks'} />
<!-- <meta property="og:description" content={article.description} /> -->
<meta property="og:image" content={article.image} />
<meta property="og:type" content="article" />
<meta property="article:published_time" content={article.released_at.toISOString()} />
{#if article.updated_at}
<meta property="article:modified_time" content={article.updated_at.toISOString()} />
{/if}
<meta property="article:author" content="HareWorks" />
<meta property="article:section" content="Blog" />
<meta property="article:tag" content={article.tags.join(',')} />
<meta name="robots" content={article.publish as publish.Publish} />

162
src/lib/page/article_page.svelte Normal file
View File

@ -0,0 +1,162 @@
<script lang="ts">
import '$lib/app.scss';
import '$lib/blog.scss';
import Footer from '$lib/components/footer.svelte';
import * as publish from '$lib/publish';
import FormattedDate from '$lib/components/formatted_date.svelte';
import Head from '$lib/components/head.svelte';
import type { Article } from '$lib/article';
export let data: Article;
</script>
<svelte:head>
<title>{data.title} | Blog | HareWorks</title>
<meta property="og:title" content={data.title + '- HareWorks'} />
<!-- <meta property="og:description" content={data.description} /> -->
<meta property="og:image" content={data.image} />
<meta property="og:type" content="article" />
<meta property="article:published_time" content={data.released_at.toISOString()} />
{#if data.updated_at}
<meta property="article:modified_time" content={data.updated_at.toISOString()} />
{/if}
<meta property="article:author" content="HareWorks" />
<meta property="article:section" content="Blog" />
<meta property="article:tag" content={data.tags.join(',')} />
<meta name="robots" content={data.publish as publish.Publish} />
</svelte:head>
<!-- <div class="back">
<img src={data.image} alt="" />
</div> -->
<div class="container">
<div class="title">
<h1>{data.title}</h1>
<div class="meta">
<span>
released <FormattedDate date={data.released_at} />
{#if data.updated_at}<br />
updated <FormattedDate date={data.updated_at} />
{/if}
</span>
<span>
<a href="/category/{data.category}"
>{data.category[0].toUpperCase() + data.category.slice(1)}</a
>
{#each data.tags as tag}
<a href={`/search?tag=${tag}`}>{tag}</a>
{/each}
</span>
</div>
</div>
<div class="panel">
<main>
<div class="document">
<slot />
</div>
</main>
<Footer />
</div>
</div>
<style lang="scss">
:global(body) {
background-color: var(--background-primary);
}
.back {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
color: white;
filter: brightness(0.8) grayscale(0.5);
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.container {
color: white;
min-height: 100%;
padding-top: 100px;
width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.title {
h1 {
font-size: 2rem;
text-align: center;
margin: 0;
padding: 12px 100px 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.meta {
display: flex;
justify-content: space-between;
padding: 0 20px;
font-size: 0.8rem;
span {
opacity: 0.6;
}
a {
margin-left: 5px;
padding: 0 5px;
color: inherit;
text-decoration: none;
&:hover {
text-decoration: underline;
}
&:first-child {
&::before {
content: '🗀 ';
}
&::after {
content: '|';
margin-left: 15px;
}
}
}
}
}
.panel {
flex: 1;
background-color: var(--background-primary);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
main {
padding: 20px;
box-sizing: border-box;
width: 1000px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
@media (max-width: 1000px) {
.container {
width: 100%;
}
.title {
h1 {
padding: 8px 20px;
}
}
main {
max-width: 100%;
}
}
</style>

12
src/lib/server/database/article.ts
View File

@ -1,12 +0,0 @@
export type Article = {
seq: number;
id: string;
title: string;
category: string;
released_at: Date;
updated_at: Date;
tags: string[];
image: string;
publish: string;
content: string;
};

20
src/lib/server/database/init_db.ts
View File

@ -105,22 +105,24 @@ export default async function init() {
} }
} }
} }
scanDir('./articles/dist'); scanDir('./articles/article');
await db.query('update tag set ref_count = 0'); await db.query('update tag set ref_count = 0');
db.commit(); db.commit();
for (const { path, id } of articleFiles) { for (const { path, id } of articleFiles) {
const res = await db.query('select * from article where id = $1', [id]); const res = await db.query('select * from article where id = $1', [id]);
const md = await compile(fs.readFileSync(path, 'utf-8')); const compiled = await compile(fs.readFileSync(path, 'utf-8'));
const title = md.data.fm.title; const title = compiled.data.fm.title;
const category = path.split('/')[3]; const category = path.split('/')[3];
const tags: string[] = md.data.fm.tags; const tags: string[] = compiled.data.fm.tags;
const released_at = new Date(md.data.fm.released_at); const released_at = new Date(compiled.data.fm.released_at);
const updated_at = new Date(md.data.fm.updated_at); const updated_at = new Date(compiled.data.fm.updated_at);
const image = md.data.fm.image; const image = compiled.data.fm.image;
const publish = md.data.fm.publish; const publish = compiled.data.fm.publish;
const content = md.code; const content = compiled.code
.replace(/>{@html `<code class="language-/g, '><code class="language-')
.replace(/<\/code>`}<\/pre>/g, '</code></pre>');
if (res.rowCount == 0) { if (res.rowCount == 0) {
console.log(`New article: ${id}`); console.log(`New article: ${id}`);
await db.query( await db.query(

20
src/routes/article/+layout.server.ts
View File

@ -1,20 +0,0 @@
import type { Article } from '$lib/server/database/article';
import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = async () => {
return {
props: {
article: {
seq: 0,
id: 'test',
title: 'test',
category: 'test',
released_at: new Date(),
updated_at: new Date(),
tags: ['test'],
image: 'test',
publish: 'test',
content: 'test',
} as Article,
},
};
};

157
src/routes/article/+layout.svelte
View File

@ -1,161 +1,6 @@
<script lang="ts"> <script lang="ts">
import '$lib/app.scss'; import '$lib/app.scss';
import '$lib/blog.scss'; import '$lib/blog.scss';
import Footer from '$lib/components/footer.svelte';
import * as publish from '$lib/publish';
import FormattedDate from '$lib/components/formatted_date.svelte';
import type { LayoutData } from './$types';
export let data: LayoutData;
</script> </script>
<svelte:head> <slot></slot>
<title>{data.props.article.title} | Blog | HareWorks</title>
<meta property="og:title" content={data.props.article.title + '- HareWorks'} />
<!-- <meta property="og:description" content={data.props.article.description} /> -->
<meta property="og:image" content={data.props.article.image} />
<meta property="og:type" content="article" />
<meta property="article:published_time" content={data.props.article.released_at.toISOString()} />
{#if data.props.article.updated_at}
<meta property="article:modified_time" content={data.props.article.updated_at.toISOString()} />
{/if}
<meta property="article:author" content="HareWorks" />
<meta property="article:section" content="Blog" />
<meta property="article:tag" content={data.props.article.tags.join(',')} />
<meta name="robots" content={data.props.article.publish as publish.Publish} />
</svelte:head>
<!-- <div class="back">
<img src={data.props.article.image} alt="" />
</div> -->
<div class="container">
<div class="title">
<h1>{data.props.article.title}</h1>
<div class="meta">
<span>
released <FormattedDate date={data.props.article.released_at} />
{#if data.props.article.updated_at}<br />
updated <FormattedDate date={data.props.article.updated_at} />
{/if}
</span>
<span>
<a href="/category/{data.props.article.category}"
>{data.props.article.category[0].toUpperCase() + data.props.article.category.slice(1)}</a
>
{#each data.props.article.tags as tag}
<a href={`/search?tag=${tag}`}>{tag}</a>
{/each}
</span>
</div>
</div>
<div class="panel">
<main>
<div class="document">
<slot />
</div>
</main>
<Footer />
</div>
</div>
<style lang="scss">
:global(body) {
background-color: var(--background-primary);
}
.back {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
color: white;
filter: brightness(0.8) grayscale(0.5);
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.container {
color: white;
min-height: 100%;
padding-top: 100px;
width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.title {
h1 {
font-size: 2rem;
text-align: center;
margin: 0;
padding: 12px 100px 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.meta {
display: flex;
justify-content: space-between;
padding: 0 20px;
font-size: 0.8rem;
span {
opacity: 0.6;
}
a {
&:first-child {
&::before {
content: '🗀 ';
}
&::after {
content: '|';
margin-left: 15px;
}
}
margin-left: 5px;
padding: 0 5px;
color: inherit;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
.panel {
flex: 1;
background-color: var(--background-primary);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
main {
padding: 20px;
box-sizing: border-box;
width: 1000px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
@media (max-width: 1000px) {
.container {
width: 100%;
}
.title {
h1 {
padding: 8px 20px;
}
}
main {
max-width: 100%;
}
}
</style>

29
src/routes/article/[category]/[id]/+page.server.ts
View File

@ -0,0 +1,29 @@
import type { Article } from '$lib/article';
import type { PageServerLoad } from './$types';
import PG from '$lib/server/database';
import { error } from '@sveltejs/kit';
export const load: PageServerLoad = async ({ params }) => {
const { category, id } = params;
console.log(id);
const db = await PG();
await db.begin();
try {
const article = await db.query(
"SELECT * FROM article WHERE id = $1 AND category = $2",
[id, category]
);
if (article.rowCount === 0) {
error(404, 'Not found');
}
const row = article.rows[0];
const data: Article = { ...row };
return data
} catch (e) {
await db.rollback();
error(500, (e as Error).message);
} finally {
await db.release();
}
};

10
src/routes/article/[category]/[id]/+page.svelte
View File

@ -0,0 +1,10 @@
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
import ArticlePage from '$lib/page/article_page.svelte';
</script>
<ArticlePage {data}>
{@html data.content}
</ArticlePage>

29
src/routes/article/[category]/[series]/[id]/+page.server.ts Normal file
View File

@ -0,0 +1,29 @@
import type { Article } from '$lib/article';
import type { PageServerLoad } from './$types';
import PG from '$lib/server/database';
import { error } from '@sveltejs/kit';
export const load: PageServerLoad = async ({ params }) => {
const { category, id, series } = params;
console.log(id);
const db = await PG();
await db.begin();
try {
const article = await db.query(
"SELECT * FROM article WHERE id = $1 AND category = $2 AND series = $3",
[id, category, series]
);
if (article.rowCount === 0) {
error(404, 'Not found');
}
const row = article.rows[0];
const data: Article = { ...row };
return data
} catch (e) {
await db.rollback();
error(500, (e as Error).message);
} finally {
await db.release();
}
};

10
src/routes/article/[category]/[series]/[id]/+page.svelte Normal file
View File

@ -0,0 +1,10 @@
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
import ArticlePage from '$lib/page/article_page.svelte';
</script>
<ArticlePage {data} >
{@html data.content}
</ArticlePage>

46
src/routes/article/[id]/+page.server.ts
View File

@ -1,46 +0,0 @@
import type { Article } from '$lib/server/database/article';
import type { PageServerLoad } from './$types';
import PG from '$lib/server/database';
export const load: PageServerLoad = async ({ params }) => {
const { id } = params;
const db = await PG();
await db.begin();
try {
const article = await db.query(
"SELECT * FROM article WHERE id = $1",
[id]
);
if (article.rowCount === 0) {
return {
status: 404,
error: new Error('Not found'),
};
}
const row = article.rows[0];
const data: Article = {
seq: row.seq,
id: row.id,
title: row.title,
category: row.category,
released_at: row.released_at,
updated_at: row.updated_at,
tags: row.tags,
image: row.image,
publish: row.publish,
content: row.content,
};
return {
props: { data },
};
} catch (e) {
await db.rollback();
return {
status: 500,
error: e as Error,
};
} finally {
await db.release();
}
};

3
src/routes/article/[id]/+page.svelte
View File

@ -1,3 +0,0 @@
<script lang="ts">
</script>