diff --git a/src/app.scss b/src/app.scss new file mode 100644 index 0000000..809e4f5 --- /dev/null +++ b/src/app.scss @@ -0,0 +1,19 @@ +@import 'variables.scss'; + +@font-face { + font-family: 'ZenKakuGothicNew-Regular'; + src: url(/fonts/ZenKakuGothicNew-Regular.ttf) format('truetype'); +} + +:root { + font-size: 16px; +} + +body { + margin: 0; + padding: 0; + color: #000; + font-family: 'ZenKakuGothicNew-Regular', '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', + 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif; + font-size: 16px; +} \ No newline at end of file diff --git a/src/lib/article.ts b/src/lib/article.ts new file mode 100644 index 0000000..e108d41 --- /dev/null +++ b/src/lib/article.ts @@ -0,0 +1,7 @@ +export type Content = { + title: string; + image: string; + date: string; + link: string; + tags: string[]; +}; \ No newline at end of file diff --git a/src/lib/blog.scss b/src/lib/blog.scss new file mode 100644 index 0000000..14b18eb --- /dev/null +++ b/src/lib/blog.scss @@ -0,0 +1,174 @@ +.document { + --color-text: #ffffff; + --color-concept: hsl(39, 100%, 25%, 0.5); + --color-concept-hsl: 39, 100%, 25%; + --color-outline: #ffffff40; + * { + color: var(--color-text); + } + h1 { + position: relative; + width: auto; + font-size: 2rem; + border-bottom: 1px solid var(--color-outline); + padding-bottom: 0.5rem; + } + > *:not(h1) { + margin-left: 2rem; + } + 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); + } + } + h3 { + font-size: 1.25rem; + } + h4 { + font-size: 1.05rem; + } + hr { + border: none; + border-top: 1px solid var(--color-outline); + } + img { + max-height: 300px; + } + a { + 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); + } + } + 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); + } + } + 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; + } + } + pre { + font-family: monospace; + margin-top: 0.75rem; + margin-bottom: 0.75rem; + } + code { + display: inline-block; + padding: 0.2rem; + background: rgba(255, 255, 255, 0.25); + border-radius: 0.2rem; + font-family: monospace; + } + 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; + &: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; + } + &[open] { + > summary { + list-style: '－ ' outside; + } + > p { + animation: detailsIn 0.5s ease; + display: block; + } + } + } + @keyframes detailsIn { + 0% { + opacity: 0; + transform: translateY(-10px); + } + 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); + thead { + background-color: rgba(0, 0, 0, 0.1); + color: #fff; + } + tr { + &:nth-child(2n) { + background-color: #ffffff0d; + } + } + td, + th { + padding: 0.5em; + border-left: 1px solid var(--color-outline); + &:first-child { + border-left: none; + } + } + } +} diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte new file mode 100644 index 0000000..b375a98 --- /dev/null +++ b/src/routes/+error.svelte @@ -0,0 +1,142 @@ + + + + {$page.status} | Blog | HareWorks + + + + +
+
+

{data.title}

+
+ {data.date} + +
+
+
+
+
+

{$page.status} {$page.error?.message}

+ Home +
+
+
+
+ + \ No newline at end of file diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts new file mode 100644 index 0000000..a8dae8b --- /dev/null +++ b/src/routes/+page.server.ts @@ -0,0 +1,89 @@ +import { error } from '@sveltejs/kit'; +import type { PageServerLoad } from './$types'; +// import index from '$lib/index'; +import type { Content } from '$lib/article'; +import pool from '$lib/database'; + +let data: { + recent: Content[], + tags: string[], + updated: string +} = { + recent: [ + { + title: "title", + image: "image", + date: "date", + link: "link", + tags: ["tag1", "tag2"], + }, + ], + tags: ["hoge", "fuga", "piyo"], + updated: "", +}; + +export const load: PageServerLoad = async ({ params }) => { + const connect = await pool.connect(); + const result = await connect.query('SELECT NOW()') + .then((res) => { + data.updated = res.rows[0].now.toISOString(); + }) + .catch((err) => { + error(err); + }); + connect.release(); + + return data; +} + +// export const load: PageServerLoad = async ({ params }) => { +// let data = { +// hero: [] as Content[], +// recent: [] as Content[], +// tags: Array.from(index.tags), +// updated: index.updated +// }; +// for (const dat of index.articles.filter((article) => article.publish == "public").list.slice(0, 4).reverse()) { +// if (!dat) continue; +// data.hero.push({ +// title: dat.title, +// image: dat.image, +// date: ((date) => { +// { +// // YYYY/MM/DD +// return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date +// .getDate() +// .toString() +// .padStart(2, '0')}`; +// } +// })(dat.released), +// link: dat.series +// ? `/post/${dat.category}/${dat.series}/${dat.id}` +// : `/post/${dat.category}/${dat.id}`, +// tags: dat.tags +// }); +// } +// //recent 10 articles +// for (const dat of index.articles.filter((article) => article.publish == "public").list.slice(0, 10)) { +// if (!dat) continue; +// data.recent.push({ +// title: dat.title, +// image: dat.image, +// date: ((date) => { +// { +// // YYYY/MM/DD +// return `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}/${date +// .getDate() +// .toString() +// .padStart(2, '0')}`; +// } +// })(dat.released), +// link: dat.series +// ? `/post/${dat.category}/${dat.series}/${dat.id}` +// : `/post/${dat.category}/${dat.id}`, +// tags: dat.tags +// }); +// } + +// return data; +// }; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5982b0a..1dd64e6 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,2 +1,307 @@ -

Welcome to SvelteKit

-

Visit kit.svelte.dev to read the documentation

+ + + + Home | Blog | HareWorks + + + + + + + +
+
+
+

blog.hareworks.net

+

+ このブログはHareの個人ブログです。プログラミング、情報技術全般、デザイン、その他興味のあることについて書いています。 +

+
+ +
+
+

( ᐢ˙꒳˙ᐢ ) ← cute

+
+
+
+ { + suggest.classList.remove('hidden'); + + }} + on:blur={() => { + suggest.classList.add('hidden'); + }} + on:input={searchChange} + on:keydown={searchKeydown} + bind:this={searchInput} + /> +
+ +
+
+

RECENTupdated: {data.updated}

+ +
+
+

TAGS

+
    + {#each data.tags as tag} +
  • + +
    • + {/each} +
+
+ +
+
+ + diff --git a/src/variables.scss b/src/variables.scss new file mode 100644 index 0000000..9f4688c --- /dev/null +++ b/src/variables.scss @@ -0,0 +1,5 @@ +:root { + --background-primary: #343434; + --line-primary: rgba(255, 255, 255, 0.1); + --highlight-primary: rgba(255, 115, 0, 0.2); +}