feat: make article pages a component
This commit is contained in:
parent
725c967b4f
commit
7795adde85
2
articles
2
articles
|
|
@ -1 +1 @@
|
|||
Subproject commit b72a133cdd6acd08d3edf802af2ebfac0a630bf9
|
||||
Subproject commit 172da3590a2e7cec7b41dcf9a60306db277b7159
|
||||
|
|
@ -1,7 +1,14 @@
|
|||
export type Content = {
|
||||
import type { Publish } from "./publish";
|
||||
|
||||
export type Article = {
|
||||
seq: number;
|
||||
id: string;
|
||||
title: string;
|
||||
image: string;
|
||||
date: string;
|
||||
link: string;
|
||||
category: string;
|
||||
released_at: Date;
|
||||
updated_at: Date;
|
||||
tags: string[];
|
||||
image: string;
|
||||
publish: Publish;
|
||||
content: string;
|
||||
};
|
||||
19
src/lib/components/head.svelte
Normal file
19
src/lib/components/head.svelte
Normal 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
162
src/lib/page/article_page.svelte
Normal 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>
|
||||
|
|
@ -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;
|
||||
};
|
||||
|
|
@ -105,22 +105,24 @@ export default async function init() {
|
|||
}
|
||||
}
|
||||
}
|
||||
scanDir('./articles/dist');
|
||||
scanDir('./articles/article');
|
||||
|
||||
await db.query('update tag set ref_count = 0');
|
||||
db.commit();
|
||||
|
||||
for (const { path, id } of articleFiles) {
|
||||
const res = await db.query('select * from article where id = $1', [id]);
|
||||
const md = await compile(fs.readFileSync(path, 'utf-8'));
|
||||
const title = md.data.fm.title;
|
||||
const compiled = await compile(fs.readFileSync(path, 'utf-8'));
|
||||
const title = compiled.data.fm.title;
|
||||
const category = path.split('/')[3];
|
||||
const tags: string[] = md.data.fm.tags;
|
||||
const released_at = new Date(md.data.fm.released_at);
|
||||
const updated_at = new Date(md.data.fm.updated_at);
|
||||
const image = md.data.fm.image;
|
||||
const publish = md.data.fm.publish;
|
||||
const content = md.code;
|
||||
const tags: string[] = compiled.data.fm.tags;
|
||||
const released_at = new Date(compiled.data.fm.released_at);
|
||||
const updated_at = new Date(compiled.data.fm.updated_at);
|
||||
const image = compiled.data.fm.image;
|
||||
const publish = compiled.data.fm.publish;
|
||||
const content = compiled.code
|
||||
.replace(/>{@html `<code class="language-/g, '><code class="language-')
|
||||
.replace(/<\/code>`}<\/pre>/g, '</code></pre>');
|
||||
if (res.rowCount == 0) {
|
||||
console.log(`New article: ${id}`);
|
||||
await db.query(
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
@ -1,161 +1,6 @@
|
|||
<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 type { LayoutData } from './$types';
|
||||
export let data: LayoutData;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<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>
|
||||
<slot></slot>
|
||||
|
|
@ -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();
|
||||
}
|
||||
};
|
||||
|
|
@ -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
29
src/routes/article/[category]/[series]/[id]/+page.server.ts
Normal 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
10
src/routes/article/[category]/[series]/[id]/+page.svelte
Normal 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>
|
||||
|
|
@ -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();
|
||||
}
|
||||
};
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<script lang="ts">
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user