feat-git #10

Merged
Hare merged 5 commits from feat-git into master 2024-09-25 23:30:09 +09:00
11 changed files with 328 additions and 248 deletions
Showing only changes of commit 36237f0708 - Show all commits

@ -1 +1 @@
Subproject commit 3744bd78995594e5fdfcaeff32f426f1d41daffa
Subproject commit d1d724d1170e8cd2460cf1beb5098161ac33ef9a

View File

@ -6,7 +6,7 @@
}
:root {
font-size: 16px;
font-size: 18px;
}
body {
@ -15,5 +15,5 @@ body {
color: #ffffff;
font-family: 'ZenKakuGothicNew-Regular', '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro',
'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif;
font-size: 16px;
font-size: 1rem;
}

View File

@ -7,6 +7,8 @@ export type Article = {
category: string;
released_at: Date;
updated_at: Date;
author: string;
email: string;
tags: string[];
image: string;
publish: Publish;

View File

@ -1,231 +1,243 @@
.document {
--color-text: #ffffff;
--color-concept: hsla(40, 100%, 90%, 0.5);
--color-concept-hsl: 39, 100%, 25%;
--color-outline: #ffffff40;
width: 100%;
--color-text: #ffffff;
--color-concept: hsla(40, 100%, 90%, 0.5);
--color-concept-hsl: 39, 100%, 25%;
--color-outline: #ffffff40;
width: 100%;
color: var(--color-text);
color: var(--color-text);
h1 {
position: relative;
width: auto;
font-size: 2rem;
margin-bottom: 0.5rem;
}
padding-left: 2rem;
box-sizing: border-box;
hr {
padding: 0;
margin: 0;
border: none;
border-top: 1px solid var(--color-outline);
}
h1 {
position: relative;
width: auto;
font-size: 1.8rem;
margin-bottom: 0.5rem;
margin-left: -1rem;
}
>*:not(h1, hr) {
margin-left: 2rem;
}
hr {
padding: 0;
margin: 0;
border: none;
border-top: 1px solid var(--color-outline);
margin-left: -1rem;
}
h2 {
font-size: 1.5rem;
position: relative;
h2 {
font-size: 1.5rem;
position: relative;
&::before {
content: '#';
position: absolute;
top: 0;
left: -1.5rem;
font-size: 1.75rem;
color: rgb(131, 131, 131);
}
}
// &::before {
// content: '#';
// position: absolute;
// top: 0;
// left: -1.5rem;
// font-size: 1.75rem;
// color: rgb(131, 131, 131);
// }
}
h3 {
font-size: 1.25rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 1.05rem;
}
h4 {
font-size: 1.05rem;
}
hr {
border: none;
border-top: 1px solid var(--color-outline);
}
hr {
border: none;
border-top: 1px solid var(--color-outline);
}
img {
max-height: 300px;
}
img {
max-height: 300px;
}
a {
color: var(--color-text);
position: relative;
display: inline-block;
transform: translate(0, 0);
text-shadow: 0 0 1rem hsl(var(--color-concept-hsl));
transition: 0.2s ease-out;
font-weight: normal;
a {
color: var(--color-text);
position: relative;
display: inline-block;
transform: translate(0, 0);
text-shadow: 0 0 1rem hsl(var(--color-concept-hsl));
transition: 0.2s ease-out;
font-weight: normal;
&:hover {
transform: translate(0, -0.1rem);
}
}
&:hover {
transform: translate(0, -0.1rem);
}
}
blockquote {
position: relative;
font-size: 1.1rem;
font-weight: bold;
padding: 0;
padding-left: 1rem;
color: rgb(162, 162, 162);
blockquote {
position: relative;
font-size: 1.1rem;
font-weight: bold;
padding: 0;
padding-left: 1rem;
color: rgb(162, 162, 162);
&::before {
content: '';
position: absolute;
top: 0;
left: -0.5rem;
font-size: 2rem;
color: rgb(131, 131, 131);
}
}
&::before {
content: '';
position: absolute;
top: 0;
left: -0.5rem;
font-size: 2rem;
color: rgb(131, 131, 131);
}
}
warn {
position: relative;
display: block;
padding: 1rem 0.7rem 0.7rem;
background-image: linear-gradient(to right, var(--color-outline), transparent 75%);
background-origin: border-box;
box-shadow: inset 0 0 0 100vh var(--background-color);
text-shadow: 0 0 1rem hsl(var(--color-concept-hsl), 1);
border: 1px solid transparent;
warn {
position: relative;
display: block;
padding: 1rem 0.7rem 0.7rem;
background-image: linear-gradient(to right, var(--color-outline), transparent 75%);
background-origin: border-box;
box-shadow: inset 0 0 0 100vh var(--background-color);
text-shadow: 0 0 1rem hsl(var(--color-concept-hsl), 1);
border: 1px solid transparent;
border-radius: 0.5rem;
&::before {
content: 'note:warn';
position: relative;
display: block;
top: 0;
font-size: 0.8rem;
margin-bottom: -0.3rem;
transform: translate(0, -0.5rem);
text-shadow: 0 0 1rem red;
}
}
code:not(pre>code) {
display: inline-block;
font-family: monospace;
font-size: 0.9rem;
background: #66666666;
padding: 0 0.3rem;
border-radius: 0.5rem;
}
&::before {
content: 'note:warn';
position: relative;
display: block;
top: 0;
font-size: 0.8rem;
margin-bottom: -0.3rem;
transform: translate(0, -0.5rem);
text-shadow: 0 0 1rem red;
}
}
pre {
font-family: monospace;
position: relative;
display: block;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
// border: 2px solid #ffffff40;
border-radius: 0.5rem;
overflow-x: auto;
font-size: 0.9rem;
pre {
font-family: monospace;
position: relative;
display: block;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
border: 2px solid #ffffff40;
border-radius: 0.5rem;
overflow-x: scroll;
&::-webkit-scrollbar {
border-radius: 10px;
height: 10px;
width: 8px;
background: #3d3d3d;
}
&::-webkit-scrollbar {
border-radius: 10px;
height: 10px;
width: 8px;
}
&::-webkit-scrollbar-thumb {
background: #6f6f6f;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: #999;
border-radius: 10px;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
}
> code {
display: inline-block;
padding: 0.5rem;
border-radius: 0.6rem;
font-family: monospace;
box-sizing: border-box;
min-width: 100%;
}
}
>code {
display: inline-block;
padding: 0.5rem;
border-radius: 0.6rem;
font-family: monospace;
box-sizing: border-box;
min-width: 100%;
}
}
details {
position: relative;
display: block;
border-radius: 0.5rem;
transition: 0.2s ease-out;
transition-property: height;
padding-inline-start: 0.1rem;
details {
position: relative;
display: block;
border-radius: 0.5rem;
transition: 0.2s ease-out;
transition-property: height;
padding-inline-start: 0.1rem;
> summary {
position: relative;
border-radius: 0.5rem;
list-style: ' ' outside;
margin-left: 1rem;
padding: 0.2rem;
background: linear-gradient(to right, rgba(255, 255, 255, 0.25), transparent 200px);
cursor: pointer;
>summary {
position: relative;
border-radius: 0.5rem;
list-style: ' ' outside;
margin-left: 1rem;
padding: 0.2rem;
background: linear-gradient(to right, rgba(255, 255, 255, 0.25), transparent 200px);
cursor: pointer;
&:hover {
text-shadow: 0 0 0.25rem rgb(255, 255, 255);
}
}
&:hover {
text-shadow: 0 0 0.25rem rgb(255, 255, 255);
}
}
> p {
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
margin-left: 1rem;
display: none;
}
>p {
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
margin-left: 1rem;
display: none;
}
&[open] {
> summary {
list-style: ' ' outside;
}
&[open] {
>summary {
list-style: ' ' outside;
}
> p {
animation: detailsIn 0.5s ease;
display: block;
}
}
}
>p {
animation: detailsIn 0.5s ease;
display: block;
}
}
}
@keyframes detailsIn {
0% {
opacity: 0;
transform: translateY(-10px);
}
@keyframes detailsIn {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: none;
}
}
100% {
opacity: 1;
transform: none;
}
}
table {
border-spacing: 0;
border: none;
border: 1px solid var(--color-outline);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 0.5rem hsl(var(--color-concept-hsl), 0.5);
table {
border-spacing: 0;
border: none;
border: 1px solid var(--color-outline);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 0.5rem hsl(var(--color-concept-hsl), 0.5);
thead {
background-color: rgba(0, 0, 0, 0.1);
color: #fff;
}
thead {
background-color: rgba(0, 0, 0, 0.1);
color: #fff;
}
tr {
&:nth-child(2n) {
background-color: #ffffff0d;
}
}
tr {
&:nth-child(2n) {
background-color: #ffffff0d;
}
}
td,
th {
padding: 0.5em;
border-left: 1px solid var(--color-outline);
td,
th {
padding: 0.5em;
border-left: 1px solid var(--color-outline);
&:first-child {
border-left: none;
}
}
}
}
&:first-child {
border-left: none;
}
}
}
}

View File

@ -8,7 +8,7 @@
import type { Article } from '$lib/article';
export let data: Article;
const isUpdated = data.updated_at.getTime() != data.released_at.getTime();
const isUpdated = data.updated_at.getTime() != data.released_at.getTime();
</script>
<svelte:head>
@ -21,7 +21,7 @@
{#if isUpdated}
<meta property="article:modified_time" content={data.updated_at.toISOString()} />
{/if}
<meta property="article:author" content="HareWorks" />
<meta property="article:author" content={data.author} />
<meta property="article:section" content="Blog" />
<meta property="article:tag" content={data.tags.join(',')} />
<meta name="robots" content={data.publish as publish.Publish} />
@ -35,20 +35,29 @@
<div class="title">
<h1>{data.title}</h1>
<div class="meta">
<span>
released <FormattedDate date={data.released_at} />
{#if isUpdated}<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 class="left">
<span>
released <FormattedDate date={data.released_at} />
{#if isUpdated}<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 class="right">
<img
src="https://gitea.hareworks.net/avatars/e595ec10f8052671deab92caca78220fc838f63259bcd542a0d93f53e2371d52?size=512"
alt="Author"
/>
<div>@{data.author}</div>
</div>
</div>
</div>
<div class="panel">
@ -91,6 +100,11 @@
height: 100%;
object-fit: cover;
}
.card {
position: fixed;
top: 0;
right: 0;
}
main {
border: 1px solid var(--line-primary);
border-top: none;
@ -100,7 +114,7 @@
min-height: 100%;
padding: 20px;
padding-top: 100px;
max-width: 1000px;
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
@ -110,7 +124,7 @@
font-size: 2rem;
text-align: center;
margin: 0;
padding: 12px 100px 12px 0;
padding: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
box-sizing: border-box;
display: flex;
@ -120,29 +134,56 @@
.meta {
display: flex;
justify-content: space-between;
flex-direction: row;
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;
font-size: 1rem;
> .left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: left;
span {
opacity: 0.6;
}
&:first-child {
&::before {
content: '🗀 ';
a {
margin-left: 5px;
padding: 0 5px;
color: inherit;
text-decoration: none;
&:hover {
text-decoration: underline;
}
&::after {
content: '|';
margin-left: 15px;
&:first-child {
margin-left: 0;
padding-left: 0;
&::before {
content: '🗀 ';
}
&::after {
content: '|';
margin-left: 15px;
}
}
}
}
> .right {
display: flex;
flex-direction: row;
justify-content: right;
align-items: center;
gap: 10px;
height: 50px;
margin: 10px;
img {
width: 50px;
height: 50px;
border-radius: 15%;
}
div {
font-size: 1rem;
}
}
}
}
.panel {

View File

@ -0,0 +1,15 @@
import { simpleGit, } from 'simple-git';
import type { SimpleGit, SimpleGitOptions } from 'simple-git';
console.log(process.cwd()+'/articles');
export const gitOptions: Partial<SimpleGitOptions> = {
baseDir: process.cwd()+'/articles',
binary: 'git',
maxConcurrentProcesses: 6,
config: [
'core.sshCommand=ssh -i ../key -F /dev/null'
],
};
const git: SimpleGit = simpleGit(gitOptions);
export default git;

View File

@ -1,3 +1,4 @@
//@ts-ignore
import { compile, escapeSvelte } from "mdsvex";
import { createHighlighter } from "shiki";
import { kanagawa_dark as theme } from "$lib/kanagawa"

View File

@ -10,10 +10,14 @@ import {
} from '$env/static/private'
const connectionString = `postgres://${PG_USER}:${PG_PASS}@${PG_HOST}:${PG_PORT}/${PG_DB}`;
const pool = new Pool({ connectionString });
let pool = new Pool({ connectionString });
export const getConnection = () => pool;
export const reConnect = async () => {
pool = new Pool({ connectionString });
}
import init_db from '$lib/server/database/init';
import PG from '$lib/server/database';
await init_db(await PG(pool));

View File

@ -90,10 +90,14 @@ export default async function init(db: Postgres) {
});
const res = await db.query('select * from article where id = $1', [id]);
const author = gitlog.all[0].author_name;
const email = gitlog.all[0].author_email;
const released_at = new Date(gitlog.all[0].date);
const updated_at = (gitlog.latest === null) ? released_at : new Date(gitlog.latest.date);
// console.log(gitlog);
const latest = gitlog.latest!;
const oldest = gitlog.all[gitlog.all.length - 1];
const author = oldest.author_name;
const email = oldest.author_email;
const released_at = new Date(oldest.date);
const updated_at = new Date(latest.date);
console.log(`Author: ${author} <${email}>\nReleased at: ${format(released_at)}\nUpdated at: ${format(updated_at)}`);
const category = path.split('/')[3];
@ -112,8 +116,8 @@ export default async function init(db: Postgres) {
'insert into article (id, released_at, updated_at, author, email, title, category, tags, image, publish, content) values ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11)',
[id, released_at, updated_at, author, email, title, category, tags, image, publish, content]
);
} else if (res.rows[0].updated_at < updated_at) {
// } else if (true) {
// } else if (res.rows[0].updated_at < updated_at) {
} else if (true) {
console.log(`Update article: ${id}`);
await db.query(
'update article set released_at = $2, updated_at = $3, author = $4, email = $5, title = $6, category = $7, tags = $8, image = $9, publish = $10, content = $11 where id = $1',

View File

@ -1,6 +1,7 @@
import { error } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
import PG from '$lib/server/database';
import { format } from '$lib/scripts/formatted_date';
let data: {
recent: {
@ -28,7 +29,7 @@ export const load: PageServerLoad = async ({ params, locals }) => {
data.recent = recent_articles.rows.map((row) => ({
title: row.title,
image: row.image,
date: row.updated_at.toISOString().slice(0, 10),
date: format(row.updated_at),
link: `/article/${row.category}/${row.id}`,
tags: row.tags,
}));

View File

@ -130,7 +130,7 @@
height: 100dvh;
backdrop-filter: blur(2px);
overflow-y: auto;
overflow-x: hidden;
overflow-x: hidden;
}
.controls {
position: fixed;
@ -305,15 +305,15 @@
.tags {
ul {
display: flex;
flex-wrap: wrap;
justify-content: left;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
flex-direction: row;
gap: 3px;
li {
font-size: 1rem;
padding: 3px 5px;
border: 1px solid var(--line-primary);
border-radius: 5px;
border: 1px solid var(--line-primary);
border-radius: 5px;
}
}
}