From 34e3edf74d5e80c852d82017cc287832715c34a4 Mon Sep 17 00:00:00 2001 From: Yuhei Yasuda Date: Sat, 6 Jan 2024 01:47:19 +0900 Subject: [PATCH] drop dayjs --- package-lock.json | 6 -- package.json | 1 - src/components/DetailsList.astro | 14 +++-- src/content/blog/2020-08-17-zatsu.mdx | 2 +- .../2020-09-18-flatten-assets-directories.mdx | 2 +- ...-sprinkles-in-basecamp-turned-stimulus.mdx | 2 +- src/content/blog/2020-12-26-walking-etc.mdx | 2 +- src/content/blog/2021-01-01-rewrite-all.mdx | 2 +- .../blog/2021-01-27-prefer-margin-top.mdx | 2 +- .../blog/2021-09-29-rehabilitation.mdx | 2 +- .../2021-10-11-publication-of-everylayout.mdx | 2 +- src/content/blog/2021-11-19-like-3-tweets.mdx | 2 +- src/content/blog/2021-11-21-mono.mdx | 2 +- src/content/blog/2021-11-22-to-inaka.mdx | 2 +- .../blog/2021-11-23-explain-too-much.mdx | 2 +- src/content/blog/2021-11-26-nothing.mdx | 2 +- src/content/blog/2021-12-04-sentence.mdx | 2 +- src/content/blog/2021-12-06-ume.mdx | 2 +- .../2022-01-24-retrospective-on-utopia.mdx | 2 +- .../2022-03-13-from-tweets-to-evernote.mdx | 2 +- ...ns-that-take-arguments-in-tailwind-css.mdx | 2 +- src/content/blog/2022-05-03-yuheiy.com-v6.mdx | 2 +- .../blog/2022-06-11-css-components.mdx | 2 +- src/content/blog/2022-06-15-re-deisui52.mdx | 2 +- .../2022-07-31-container-with-no-padding.mdx | 2 +- .../2022-08-01-declarative-design-system.mdx | 2 +- .../blog/2022-08-01-declarative-design.mdx | 2 +- ...2022-08-11-text-with-accompanying-icon.mdx | 2 +- .../blog/2022-08-12-shrinkable-min-width.mdx | 2 +- .../blog/2022-08-13-change-the-icon.mdx | 2 +- .../blog/2022-08-14-same-width-buttons.mdx | 2 +- ...based-on-multiple-overlapping-elements.mdx | 2 +- ...022-11-03-how-to-understand-the-markup.mdx | 2 +- .../blog/2022-11-27-better-container.mdx | 2 +- src/content/blog/2022-12-03-ultraboost.mdx | 2 +- .../2023-02-06-tailwind-css-in-wdpress.mdx | 2 +- src/content/blog/2023-02-11-loose.mdx | 2 +- ...react-changeable-element-type-patterns.mdx | 3 +- ...abstract-react-usestate-as-render-prop.mdx | 2 +- ...s-files-with-tailwind-css-intellisense.mdx | 2 +- ...-12-31-apply-default-focus-ring-styles.mdx | 2 +- src/content/config.ts | 2 +- src/lib/date-time-formatter.ts | 31 ++++++++++ src/lib/dayjs.ts | 18 ------ src/pages/[...slug].astro | 8 +-- src/pages/blog.astro | 8 +-- src/pages/index.astro | 59 ++++++------------- src/pages/posts-feed.xml.ts | 6 +- 48 files changed, 105 insertions(+), 125 deletions(-) create mode 100644 src/lib/date-time-formatter.ts delete mode 100644 src/lib/dayjs.ts diff --git a/package-lock.json b/package-lock.json index 4f07dbc..e639008 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,6 @@ "astro-embed": "0.6.1", "chokidar-cli": "3.0.0", "concurrently": "8.2.2", - "dayjs": "1.11.10", "eslint": "8.56.0", "eslint-config-prettier": "9.1.0", "eslint-import-resolver-typescript": "3.6.1", @@ -3874,11 +3873,6 @@ "url": "https://opencollective.com/date-fns" } }, - "node_modules/dayjs": { - "version": "1.11.10", - "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz", - "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==" - }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/package.json b/package.json index 5b07d63..b58744c 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "astro-embed": "0.6.1", "chokidar-cli": "3.0.0", "concurrently": "8.2.2", - "dayjs": "1.11.10", "eslint": "8.56.0", "eslint-config-prettier": "9.1.0", "eslint-import-resolver-typescript": "3.6.1", diff --git a/src/components/DetailsList.astro b/src/components/DetailsList.astro index a944e9d..f727e3c 100644 --- a/src/components/DetailsList.astro +++ b/src/components/DetailsList.astro @@ -1,11 +1,13 @@ --- +export interface DetailsListItem { + title: string; + link: string; + meta?: string | undefined; + description?: string | undefined; +} + interface Props { - items: { - title: string; - link: string; - meta?: string | undefined; - description?: string | undefined; - }[]; + items: DetailsListItem[]; ordered?: boolean | undefined; } diff --git a/src/content/blog/2020-08-17-zatsu.mdx b/src/content/blog/2020-08-17-zatsu.mdx index 0d79e48..bf2e7f6 100644 --- a/src/content/blog/2020-08-17-zatsu.mdx +++ b/src/content/blog/2020-08-17-zatsu.mdx @@ -1,7 +1,7 @@ --- slug: 20200817-zatsu title: ブログ投稿のハードルと雑さについて -publishDate: '2020-08-16T18:33:36.000+09:00' +pubDate: 2020-08-16T18:33:36.000+09:00 --- 個人的な話、Twitterにいろいろと長文も書いたりするようになってからブログをあまり書かなくなった。タイムラインのツイートはすぐに流れていく分、今パッと思いついた話とか、まだ十分整理されてないようなテキストを出しやすい。 diff --git a/src/content/blog/2020-09-18-flatten-assets-directories.mdx b/src/content/blog/2020-09-18-flatten-assets-directories.mdx index 59be5e7..b72f914 100644 --- a/src/content/blog/2020-09-18-flatten-assets-directories.mdx +++ b/src/content/blog/2020-09-18-flatten-assets-directories.mdx @@ -1,7 +1,7 @@ --- slug: 20200918-flatten-assets-directories title: 画像ファイルもCSSやJSファイルと一元化したディレクトリで管理する -publishDate: '2020-09-18T18:16:35.149+09:00' +pubDate: 2020-09-18T18:16:35.149+09:00 --- ウェブサイトのソースファイルはファイル形式にもとづいてディレクトリ分けされている場合が多いと思う。たとえば次のように。 diff --git a/src/content/blog/2020-11-03-javascript-sprinkles-in-basecamp-turned-stimulus.mdx b/src/content/blog/2020-11-03-javascript-sprinkles-in-basecamp-turned-stimulus.mdx index 784c542..308edd1 100644 --- a/src/content/blog/2020-11-03-javascript-sprinkles-in-basecamp-turned-stimulus.mdx +++ b/src/content/blog/2020-11-03-javascript-sprinkles-in-basecamp-turned-stimulus.mdx @@ -1,7 +1,7 @@ --- slug: 20201103-javascript-sprinkles-in-basecamp-turned-stimulus title: 「JavaScript sprinkles in Basecamp turned Stimulus」の雑要約 -publishDate: '2020-11-03T17:59:05.339+09:00' +pubDate: 2020-11-03T17:59:05.339+09:00 --- 「[JavaScript sprinkles in Basecamp turned Stimulus](https://changelog.com/podcast/286)」より。[Stimulus](https://stimulusjs.org/)の設計意図を理解できる貴重な資料なのでまとめた。 diff --git a/src/content/blog/2020-12-26-walking-etc.mdx b/src/content/blog/2020-12-26-walking-etc.mdx index 0789948..c3f5475 100644 --- a/src/content/blog/2020-12-26-walking-etc.mdx +++ b/src/content/blog/2020-12-26-walking-etc.mdx @@ -1,7 +1,7 @@ --- slug: 20201226-walking-etc title: 歩行とか -publishDate: '2020-12-26T03:25:04.464+09:00' +pubDate: 2020-12-26T03:25:04.464+09:00 --- import { Tweet } from 'astro-embed'; diff --git a/src/content/blog/2021-01-01-rewrite-all.mdx b/src/content/blog/2021-01-01-rewrite-all.mdx index fbb59ba..da7e8f1 100644 --- a/src/content/blog/2021-01-01-rewrite-all.mdx +++ b/src/content/blog/2021-01-01-rewrite-all.mdx @@ -1,7 +1,7 @@ --- slug: 20210101-rewrite-all title: ぜんぶかきなおす -publishDate: '2021-01-01T02:56:21.828Z' +pubDate: 2021-01-01T02:56:21.828Z --- 丸2日くらいかけて、このサイトのHTML/CSSやサイト生成の仕組みを[全部書き直した](https://github.com/yuheiy/yuheiy.com-v5/commit/99b31c35ba936257fa5b14b61bb4a6356b427e6a)。わかりやすい変化としては、以前のバージョンではフォントサイズとか余白とかがビューポートのサイズに関わらずつねに一定だったところが、今のバージョンではビューポート幅にもとづいたファクターに応じてすべてのフォントサイズが変化するようになっている。 diff --git a/src/content/blog/2021-01-27-prefer-margin-top.mdx b/src/content/blog/2021-01-27-prefer-margin-top.mdx index 48baac8..2de215a 100644 --- a/src/content/blog/2021-01-27-prefer-margin-top.mdx +++ b/src/content/blog/2021-01-27-prefer-margin-top.mdx @@ -1,7 +1,7 @@ --- slug: 20210127-prefer-margin-top title: 垂直方向のマージンにはmargin-topを優先的に使う理由 -publishDate: '2021-01-26T17:13:39.216Z' +pubDate: 2021-01-26T17:13:39.216Z --- import { Tweet } from 'astro-embed'; diff --git a/src/content/blog/2021-09-29-rehabilitation.mdx b/src/content/blog/2021-09-29-rehabilitation.mdx index 7dc7e6d..5652ff1 100644 --- a/src/content/blog/2021-09-29-rehabilitation.mdx +++ b/src/content/blog/2021-09-29-rehabilitation.mdx @@ -1,7 +1,7 @@ --- slug: 20210929-rehabilitation title: リハビリ -publishDate: '2021-09-29T02:59:00.000+09:00' +pubDate: 2021-09-29T02:59:00.000+09:00 --- ブログを書くのはおよそ8ヶ月ぶりになる。僕にとっては、それなりに長らく書かなかったことになる。 diff --git a/src/content/blog/2021-10-11-publication-of-everylayout.mdx b/src/content/blog/2021-10-11-publication-of-everylayout.mdx index b50fc01..03e20ae 100644 --- a/src/content/blog/2021-10-11-publication-of-everylayout.mdx +++ b/src/content/blog/2021-10-11-publication-of-everylayout.mdx @@ -1,7 +1,7 @@ --- slug: 20211011-publication-of-everylayout title: 『Every Layout——モジュラーなレスポンシブデザインを実現するCSS設計論』、素直さという選択 #everylayout_ja -publishDate: '2021-10-11T09:20:00.000+09:00' +pubDate: 2021-10-11T09:20:00.000+09:00 ogImage: ./assets/2021-10-11-publication-of-everylayout/ogp.png twitterCard: summary_large_image --- diff --git a/src/content/blog/2021-11-19-like-3-tweets.mdx b/src/content/blog/2021-11-19-like-3-tweets.mdx index 02af1f8..609c231 100644 --- a/src/content/blog/2021-11-19-like-3-tweets.mdx +++ b/src/content/blog/2021-11-19-like-3-tweets.mdx @@ -1,7 +1,7 @@ --- slug: 20211119-like-3-tweets title: 3ツイするくらいの軽さでブログ書くタイプの人類になりたい -publishDate: '2021-11-19T21:30:00.000+09:00' +pubDate: 2021-11-19T21:30:00.000+09:00 --- import { Tweet } from 'astro-embed'; diff --git a/src/content/blog/2021-11-21-mono.mdx b/src/content/blog/2021-11-21-mono.mdx index 2ef7ea9..3068366 100644 --- a/src/content/blog/2021-11-21-mono.mdx +++ b/src/content/blog/2021-11-21-mono.mdx @@ -1,7 +1,7 @@ --- slug: 20211121-mono title: かわいいぬいぐるみとか見つけるとうわほしいぃって思うけどたぶん2ヶ月後くらいにはいらねえって思っちゃう -publishDate: '2021-11-20T14:50:00.000+09:00' +pubDate: 2021-11-20T14:50:00.000+09:00 --- とんかつ屋。隣には、神経質そうな思春期の息子と、大雑把そうな年配の父親。 diff --git a/src/content/blog/2021-11-22-to-inaka.mdx b/src/content/blog/2021-11-22-to-inaka.mdx index 13d6ed6..da23007 100644 --- a/src/content/blog/2021-11-22-to-inaka.mdx +++ b/src/content/blog/2021-11-22-to-inaka.mdx @@ -1,7 +1,7 @@ --- slug: 20211122-to-inaka title: 田舎に回帰したい -publishDate: '2021-11-22T04:00:00.000+09:00' +pubDate: 2021-11-22T04:00:00.000+09:00 --- いま住んでる部屋が結構ボロいので、いろいろ不満があって、引っ越したいなあと思いつつも、めんどくさくてずっとほったらかしていたけど、そろそろ本当にどうにかしたいと思って引っ越し先を考え始めた。 diff --git a/src/content/blog/2021-11-23-explain-too-much.mdx b/src/content/blog/2021-11-23-explain-too-much.mdx index e360aea..f220642 100644 --- a/src/content/blog/2021-11-23-explain-too-much.mdx +++ b/src/content/blog/2021-11-23-explain-too-much.mdx @@ -1,7 +1,7 @@ --- slug: 20211123-explain-too-much title: こと非同期コミュニケーションにおいては少しくどいと思うくらいに説明するのでちょうどいい -publishDate: '2021-11-23T23:00:00.000+09:00' +pubDate: 2021-11-23T23:00:00.000+09:00 --- Slackのようなインターフェースを見ると、さも人と人が対面してしゃべるような言葉のやり取りがそのままできて、コミュニケーションとして成り立つと思ってしまうことがある。非常に限定的な状況においては可能かもしれないが、たいていはそうならない。 diff --git a/src/content/blog/2021-11-26-nothing.mdx b/src/content/blog/2021-11-26-nothing.mdx index 0bc7cb8..5432dfb 100644 --- a/src/content/blog/2021-11-26-nothing.mdx +++ b/src/content/blog/2021-11-26-nothing.mdx @@ -1,7 +1,7 @@ --- slug: 20211126-nothing title: これはこれで逆に広げられない話は書けないみたいな縛りになっている -publishDate: '2021-11-26T22:45:00.000+09:00' +pubDate: 2021-11-26T22:45:00.000+09:00 --- import { Tweet } from 'astro-embed'; diff --git a/src/content/blog/2021-12-04-sentence.mdx b/src/content/blog/2021-12-04-sentence.mdx index 472116e..6e312ac 100644 --- a/src/content/blog/2021-12-04-sentence.mdx +++ b/src/content/blog/2021-12-04-sentence.mdx @@ -1,7 +1,7 @@ --- slug: 20211204-sentence title: 文の途中でも流れを読み誤られないように作文することを心がけている -publishDate: '2021-12-05T00:05:00.000+09:00' +pubDate: 2021-12-05T00:05:00.000+09:00 --- 日本語の文では、文末に到達するまで話の方向性が読み切れないことがある。文を読むときに、途中まで読んだところで「あー、はいはい」となっていても、最後まで読み進めると「あれ、そういう話？」という感じになり、流れを読み誤っていたことに後で気づく。人がしゃべるのを聞いているときにはより顕著になる。しゃべる速度は読む速度よりも遅いので、どうしても焦ったくなってしまうものだ。 diff --git a/src/content/blog/2021-12-06-ume.mdx b/src/content/blog/2021-12-06-ume.mdx index c904778..9fc372f 100644 --- a/src/content/blog/2021-12-06-ume.mdx +++ b/src/content/blog/2021-12-06-ume.mdx @@ -1,7 +1,7 @@ --- slug: 20211206-ume title: 僕と梅、男梅シート -publishDate: '2021-12-06T04:55:00.000+09:00' +pubDate: 2021-12-06T04:55:00.000+09:00 --- 昔から梅が好きでよく食べる。実家にいたころは、口寂しくなるたびに冷蔵庫を開け、おやつ感覚で梅干しを食べては、塩分の摂りすぎだからやめろと母親に言われていた。ご飯を食べるときにもよく梅干しをおかずにしていた。 diff --git a/src/content/blog/2022-01-24-retrospective-on-utopia.mdx b/src/content/blog/2022-01-24-retrospective-on-utopia.mdx index 4dedad6..7ccae83 100644 --- a/src/content/blog/2022-01-24-retrospective-on-utopia.mdx +++ b/src/content/blog/2022-01-24-retrospective-on-utopia.mdx @@ -1,6 +1,6 @@ --- title: Utopiaを実際の案件で使ってみて、うまくいったことといかなかったこと -publishDate: '2022-01-24T01:35:00.000+09:00' +pubDate: 2022-01-24T01:35:00.000+09:00 --- 少し前に担当したウェブサイト制作の案件で、[Utopia](https://utopia.fyi/)というツールを使ってみた。Utopiaを使うと、ビューポートの幅に応じて流動的に変化するフォントサイズとスペーシングの値のセットを生成できる。 diff --git a/src/content/blog/2022-03-13-from-tweets-to-evernote.mdx b/src/content/blog/2022-03-13-from-tweets-to-evernote.mdx index 5b72ac3..56826c6 100644 --- a/src/content/blog/2022-03-13-from-tweets-to-evernote.mdx +++ b/src/content/blog/2022-03-13-from-tweets-to-evernote.mdx @@ -1,6 +1,6 @@ --- title: ブックマーク代わりにツイートしていた7000件のURLを精査してEvernoteに移行した -publishDate: '2022-03-13T01:30:00.000+09:00' +pubDate: 2022-03-13T01:30:00.000+09:00 --- なにか気になったウェブページを保存したいというとき、以前ははてなブックマークを使っていた。たぶん2017年くらいまで。 diff --git a/src/content/blog/2022-03-21-mixins-that-take-arguments-in-tailwind-css.mdx b/src/content/blog/2022-03-21-mixins-that-take-arguments-in-tailwind-css.mdx index 18fc45e..ff77fef 100644 --- a/src/content/blog/2022-03-21-mixins-that-take-arguments-in-tailwind-css.mdx +++ b/src/content/blog/2022-03-21-mixins-that-take-arguments-in-tailwind-css.mdx @@ -1,6 +1,6 @@ --- title: Tailwind CSSで引数のあるMixinのような仕組みを作る方法 -publishDate: '2022-03-21T17:35:00.000+09:00' +pubDate: 2022-03-21T17:35:00.000+09:00 --- Sassでは、引数の値に応じて宣言をクラスに注入できるMixinの機能がある。たとえば次のようにすれば、フォントサイズがビューポートの幅に応じて流動的に変化するように実装できる。 diff --git a/src/content/blog/2022-05-03-yuheiy.com-v6.mdx b/src/content/blog/2022-05-03-yuheiy.com-v6.mdx index 13ddc63..b940e1a 100644 --- a/src/content/blog/2022-05-03-yuheiy.com-v6.mdx +++ b/src/content/blog/2022-05-03-yuheiy.com-v6.mdx @@ -1,6 +1,6 @@ --- title: yuheiy.com-v6 -publishDate: '2022-05-03T22:50:00.000+09:00' +pubDate: 2022-05-03T22:50:00.000+09:00 slug: 2022-05-03-yuheiy.com-v6 --- diff --git a/src/content/blog/2022-06-11-css-components.mdx b/src/content/blog/2022-06-11-css-components.mdx index 020d5f0..10685e2 100644 --- a/src/content/blog/2022-06-11-css-components.mdx +++ b/src/content/blog/2022-06-11-css-components.mdx @@ -1,6 +1,6 @@ --- title: CSS設計における、すべてがコンポーネントであるという誤謬 -publishDate: '2022-06-11T19:55:00.000+09:00' +pubDate: 2022-06-11T19:55:00.000+09:00 --- **後日追記:** [WEB+DB PRESS Vol.133でさらに詳しく書いた](/2023-02-06-tailwind-css-in-wdpress)。 diff --git a/src/content/blog/2022-06-15-re-deisui52.mdx b/src/content/blog/2022-06-15-re-deisui52.mdx index 8dd9ab5..1d1a095 100644 --- a/src/content/blog/2022-06-15-re-deisui52.mdx +++ b/src/content/blog/2022-06-15-re-deisui52.mdx @@ -1,6 +1,6 @@ --- title: Re: #deisui_html_radio #52 -publishDate: '2022-06-15T13:24:00.000+09:00' +pubDate: 2022-06-15T13:24:00.000+09:00 --- import { YouTube } from 'astro-embed'; diff --git a/src/content/blog/2022-07-31-container-with-no-padding.mdx b/src/content/blog/2022-07-31-container-with-no-padding.mdx index f9107ae..140b67a 100644 --- a/src/content/blog/2022-07-31-container-with-no-padding.mdx +++ b/src/content/blog/2022-07-31-container-with-no-padding.mdx @@ -1,6 +1,6 @@ --- title: 本文エリア内の要素をpaddingのないコンテナとして実装する -publishDate: '2022-07-31T01:30:00.000+09:00' +pubDate: 2022-07-31T01:30:00.000+09:00 --- **後日追記**: このやり方の改良版をブログ「[ブロックエディタ用のCSSを参考にした、よりよいコンテナの実装](/2022-11-27-better-container)」として書いた。 diff --git a/src/content/blog/2022-08-01-declarative-design-system.mdx b/src/content/blog/2022-08-01-declarative-design-system.mdx index 0e20152..06d1ffd 100644 --- a/src/content/blog/2022-08-01-declarative-design-system.mdx +++ b/src/content/blog/2022-08-01-declarative-design-system.mdx @@ -1,6 +1,6 @@ --- title: 宣言的デザインシステム（翻訳） -publishDate: '2022-08-01T09:00:00.001+09:00' +pubDate: 2022-08-01T09:00:00.001+09:00 --- この記事は、[Jeremy Keith](https://adactio.com/)氏による「[Declarative design systems](https://adactio.com/journal/19131)」の日本語訳です。掲載に当たって著者の許諾を得ています。 diff --git a/src/content/blog/2022-08-01-declarative-design.mdx b/src/content/blog/2022-08-01-declarative-design.mdx index 4201e77..01eaf9f 100644 --- a/src/content/blog/2022-08-01-declarative-design.mdx +++ b/src/content/blog/2022-08-01-declarative-design.mdx @@ -1,6 +1,6 @@ --- title: 宣言的デザイン（翻訳） -publishDate: '2022-08-01T09:00:00.000+09:00' +pubDate: 2022-08-01T09:00:00.000+09:00 --- この記事は、[Jeremy Keith](https://adactio.com/)氏による「[Declarative design](https://adactio.com/journal/18982)」の日本語訳です。掲載に当たって著者の許諾を得ています。 diff --git a/src/content/blog/2022-08-11-text-with-accompanying-icon.mdx b/src/content/blog/2022-08-11-text-with-accompanying-icon.mdx index a619ba4..90adb98 100644 --- a/src/content/blog/2022-08-11-text-with-accompanying-icon.mdx +++ b/src/content/blog/2022-08-11-text-with-accompanying-icon.mdx @@ -1,6 +1,6 @@ --- title: テキストの行の末尾に付随するアイコンをアイコンだけで改行させないようにするCSS -publishDate: '2022-08-11T20:25:00.000+09:00' +pubDate: 2022-08-11T20:25:00.000+09:00 --- import { Tweet } from 'astro-embed'; diff --git a/src/content/blog/2022-08-12-shrinkable-min-width.mdx b/src/content/blog/2022-08-12-shrinkable-min-width.mdx index cefb130..490a927 100644 --- a/src/content/blog/2022-08-12-shrinkable-min-width.mdx +++ b/src/content/blog/2022-08-12-shrinkable-min-width.mdx @@ -1,6 +1,6 @@ --- title: ボタンの最低幅を設定しつつ、かつコンテナが縮小してもはみ出さないようにするCSS -publishDate: '2022-08-12T15:40:00.000+09:00' +pubDate: 2022-08-12T15:40:00.000+09:00 --- import { Image } from 'astro:assets'; diff --git a/src/content/blog/2022-08-13-change-the-icon.mdx b/src/content/blog/2022-08-13-change-the-icon.mdx index 2a08fa3..3654dd6 100644 --- a/src/content/blog/2022-08-13-change-the-icon.mdx +++ b/src/content/blog/2022-08-13-change-the-icon.mdx @@ -1,6 +1,6 @@ --- title: プロフィール画像を作り直した -publishDate: '2022-08-13T22:40:00.000+09:00' +pubDate: 2022-08-13T22:40:00.000+09:00 ogImage: ./assets/2022-08-13-change-the-icon/after.png --- diff --git a/src/content/blog/2022-08-14-same-width-buttons.mdx b/src/content/blog/2022-08-14-same-width-buttons.mdx index 8714643..8feb52f 100644 --- a/src/content/blog/2022-08-14-same-width-buttons.mdx +++ b/src/content/blog/2022-08-14-same-width-buttons.mdx @@ -1,6 +1,6 @@ --- title: 横並びになったボタンを同じ幅で配置するCSS -publishDate: '2022-08-14T08:20:00.000+09:00' +pubDate: 2022-08-14T08:20:00.000+09:00 --- 複数のボタンを横並びにしつつ、それぞれのボタンが同じ幅になるように合わせたいということがある。ボタンに同じ`width`を指定すれば合わせられるが、するとラベルの長さに応じた幅にできなくなる。 diff --git a/src/content/blog/2022-08-25-sizing-based-on-multiple-overlapping-elements.mdx b/src/content/blog/2022-08-25-sizing-based-on-multiple-overlapping-elements.mdx index 22e14ff..f22987c 100644 --- a/src/content/blog/2022-08-25-sizing-based-on-multiple-overlapping-elements.mdx +++ b/src/content/blog/2022-08-25-sizing-based-on-multiple-overlapping-elements.mdx @@ -1,6 +1,6 @@ --- title: 複数の要素を重ね合わせつつ、その中で最も大きい要素に合わせて親要素のサイズを設定するCSS -publishDate: '2022-08-25T23:00:00.000+09:00' +pubDate: 2022-08-25T23:00:00.000+09:00 --- 複数の要素を重ね合わせるためには、従来、`position: absolute`を使うことが多かった。親要素に`position: relative`を、その子要素に`position: absolute`を設定するというもの。 diff --git a/src/content/blog/2022-11-03-how-to-understand-the-markup.mdx b/src/content/blog/2022-11-03-how-to-understand-the-markup.mdx index 0630ece..0c972f0 100644 --- a/src/content/blog/2022-11-03-how-to-understand-the-markup.mdx +++ b/src/content/blog/2022-11-03-how-to-understand-the-markup.mdx @@ -1,6 +1,6 @@ --- title: マークアップのわかり方 -publishDate: '2022-11-03T13:50:00.000+09:00' +pubDate: 2022-11-03T13:50:00.000+09:00 ogImage: ./assets/2022-11-03-how-to-understand-the-markup/ogp.png twitterCard: summary_large_image --- diff --git a/src/content/blog/2022-11-27-better-container.mdx b/src/content/blog/2022-11-27-better-container.mdx index 17fa141..731088a 100644 --- a/src/content/blog/2022-11-27-better-container.mdx +++ b/src/content/blog/2022-11-27-better-container.mdx @@ -1,6 +1,6 @@ --- title: ブロックエディタ用のCSSを参考にした、よりよいコンテナの実装 -publishDate: '2022-11-27T16:05:00.000+09:00' +pubDate: 2022-11-27T16:05:00.000+09:00 --- 以前、「[本文エリア内の要素をpaddingのないコンテナとして実装する](/2022-07-31-container-with-no-padding)」という記事を書いた。本文エリア内の要素をすべて同じ幅でレイアウトするのではなく、ものによっては少し広めにしたりページの最大幅まで広げたりしたいという場合に、どのように実装すべきかという話。 diff --git a/src/content/blog/2022-12-03-ultraboost.mdx b/src/content/blog/2022-12-03-ultraboost.mdx index 1b44702..f7613aa 100644 --- a/src/content/blog/2022-12-03-ultraboost.mdx +++ b/src/content/blog/2022-12-03-ultraboost.mdx @@ -1,6 +1,6 @@ --- title: ウルトラブースト日記 -publishDate: '2022-12-03T00:30:00.000+09:00' +pubDate: 2022-12-03T00:30:00.000+09:00 --- 僕は右利きだが、スマホはいつも左手で使う。だから、スマホに入ったPASMOを改札機にタッチするときは毎回フラストレーションを覚える。 diff --git a/src/content/blog/2023-02-06-tailwind-css-in-wdpress.mdx b/src/content/blog/2023-02-06-tailwind-css-in-wdpress.mdx index bf8808d..4571aa7 100644 --- a/src/content/blog/2023-02-06-tailwind-css-in-wdpress.mdx +++ b/src/content/blog/2023-02-06-tailwind-css-in-wdpress.mdx @@ -1,6 +1,6 @@ --- title: WEB+DB PRESS Vol.133に特集「Tailwind CSS実践入門——まず作ってから、あとで共通化する」を寄稿しました #wdpress -publishDate: '2023-02-06T13:30:00.000+09:00' +pubDate: 2023-02-06T13:30:00.000+09:00 ogImage: ./assets/2023-02-06-tailwind-css-in-wdpress/ogp.png twitterCard: summary_large_image --- diff --git a/src/content/blog/2023-02-11-loose.mdx b/src/content/blog/2023-02-11-loose.mdx index 40d26b1..f05f2ba 100644 --- a/src/content/blog/2023-02-11-loose.mdx +++ b/src/content/blog/2023-02-11-loose.mdx @@ -1,6 +1,6 @@ --- title: 肩の力を抜いてラフに書く、思いつくままに書く -publishDate: '2023-02-11T17:20:00.000+09:00' +pubDate: 2023-02-11T17:20:00.000+09:00 --- [根を詰めて取り組んでいた原稿](/2023-02-06-tailwind-css-in-wdpress)がやっと手離れして、肩の荷が下りた。僕がこれまで経験して来た中で、最も重い執筆だった。 diff --git a/src/content/blog/2023-06-03-react-changeable-element-type-patterns.mdx b/src/content/blog/2023-06-03-react-changeable-element-type-patterns.mdx index c3f73a0..8b25da9 100644 --- a/src/content/blog/2023-06-03-react-changeable-element-type-patterns.mdx +++ b/src/content/blog/2023-06-03-react-changeable-element-type-patterns.mdx @@ -1,6 +1,6 @@ --- title: ReactコンポーネントでレンダリングされるHTML要素の種類を変更可能にするためのパターン -publishDate: '2023-06-04T12:35:00.000+09:00' +pubDate: 2023-06-04T12:35:00.000+09:00 --- import { Tweet } from 'astro-embed'; @@ -45,7 +45,6 @@ render( 一つは、TypeScriptのエラーメッセージが複雑になってしまうこと。たとえば、Reactの要素に間違ったpropが渡されたとき、通常の`a`要素と、`as` propとしてa要素が指定されたコンポーネントを比較すると、明らかに後者の方がユーザーにとって理解しづらい。 -{/* prettier-ignore */}
![](./assets/2023-06-03-react-changeable-element-type-patterns/as-prop-error.png)
次に、TypeScriptのパフォーマンスを悪化させること。`as` propの型定義においては、高度な型推論や条件型、ジェネリクスを多用することになり、コンパイルするための負荷が高まってしまう。 diff --git a/src/content/blog/2023-08-12-abstract-react-usestate-as-render-prop.mdx b/src/content/blog/2023-08-12-abstract-react-usestate-as-render-prop.mdx index 93aabbf..e3e0daf 100644 --- a/src/content/blog/2023-08-12-abstract-react-usestate-as-render-prop.mdx +++ b/src/content/blog/2023-08-12-abstract-react-usestate-as-render-prop.mdx @@ -1,6 +1,6 @@ --- title: ReactのuseStateをrender propとして抽象化して、コンポーネントを分割せずにコードのまとまりをよくする -publishDate: '2023-08-12T01:30:00.000+09:00' +pubDate: 2023-08-12T01:30:00.000+09:00 --- Reactの`useState`を使用する際、stateのスコープが必要以上に大きくなってしまうことがある。たとえば次の例のように、コンポーネントの中のごく限られた部分でしか使わないstateが、コンポーネントのどこからでも参照できてしまう。 diff --git a/src/content/blog/2023-08-12-enabling-detection-of-classes-defined-in-css-files-with-tailwind-css-intellisense.mdx b/src/content/blog/2023-08-12-enabling-detection-of-classes-defined-in-css-files-with-tailwind-css-intellisense.mdx index b005f54..62d8136 100644 --- a/src/content/blog/2023-08-12-enabling-detection-of-classes-defined-in-css-files-with-tailwind-css-intellisense.mdx +++ b/src/content/blog/2023-08-12-enabling-detection-of-classes-defined-in-css-files-with-tailwind-css-intellisense.mdx @@ -1,6 +1,6 @@ --- title: CSSファイルに記述されたクラスをTailwind CSS IntelliSenseで検出できるようにする -publishDate: '2023-08-12T19:55:00.000+09:00' +pubDate: 2023-08-12T19:55:00.000+09:00 --- VS Codeの拡張機能である[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)を使用する際には、通常、CSSファイルに記述されたクラスは補完されない。というのも、Tailwind CSS IntelliSenseでは、Tailwind CSSの設定ファイル（`tailwind.config.js`）を基にしてCSSを算出しており、設定ファイルを介さずに実装されたCSSは無視されるからだ。 diff --git a/src/content/blog/2023-12-31-apply-default-focus-ring-styles.mdx b/src/content/blog/2023-12-31-apply-default-focus-ring-styles.mdx index d19c836..8522220 100644 --- a/src/content/blog/2023-12-31-apply-default-focus-ring-styles.mdx +++ b/src/content/blog/2023-12-31-apply-default-focus-ring-styles.mdx @@ -1,6 +1,6 @@ --- title: 任意の要素に対してブラウザデフォルトのフォーカスリングを適用する方法 -publishDate: '2023-12-31T11:00:00.000+09:00' +pubDate: 2023-12-31T11:00:00.000+09:00 --- 任意の要素に対して、ブラウザデフォルトのフォーカスリングが描画されるように明示的に設定したいことがある。たとえばスタイリングの都合により、一度取り除いたフォーカスリングをふたたび適用したいとき。 diff --git a/src/content/config.ts b/src/content/config.ts index ac24264..ba35d2a 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -5,7 +5,7 @@ const blog = defineCollection({ schema: ({ image }) => z.object({ title: z.string(), - publishDate: z.string(), + pubDate: z.date(), ogImage: image().optional(), twitterCard: z.union([z.literal('summary'), z.literal('summary_large_image')]).optional(), }), diff --git a/src/lib/date-time-formatter.ts b/src/lib/date-time-formatter.ts new file mode 100644 index 0000000..24f4b51 --- /dev/null +++ b/src/lib/date-time-formatter.ts @@ -0,0 +1,31 @@ +import { SITE_LANG, SITE_REGION } from '../consts'; + +const locales = `${SITE_LANG}-${SITE_REGION}`; + +const defaultDateTimeFormatter = new Intl.DateTimeFormat(locales, { + dateStyle: 'long', +}); + +export function renderDateHtml(date: Date) { + return ``; +} + +// YYYY-MM +type ProjectDate = `${number}${number}${number}${number}-${number}${number}`; + +const projectDateTimeFormatter = new Intl.DateTimeFormat(locales, { + year: 'numeric', + month: 'long', +}); + +function renderProjectDate(date: ProjectDate) { + return ``; +} + +export function renderProjectWorkPeriodHtml(start: ProjectDate, end?: ProjectDate) { + const parts = [renderProjectDate(start), '—']; + if (end) { + parts.push(renderProjectDate(end)); + } + return parts.join(' '); +} diff --git a/src/lib/dayjs.ts b/src/lib/dayjs.ts deleted file mode 100644 index d8519c9..0000000 --- a/src/lib/dayjs.ts +++ /dev/null @@ -1,18 +0,0 @@ -import dayjs from 'dayjs'; -import 'dayjs/locale/ja'; -import localizedFormat from 'dayjs/plugin/localizedFormat'; -import timezone from 'dayjs/plugin/timezone'; -import utc from 'dayjs/plugin/utc'; - -// eslint-disable-next-line import/no-named-as-default-member -dayjs.extend(localizedFormat); -// eslint-disable-next-line import/no-named-as-default-member -dayjs.extend(utc); -// eslint-disable-next-line import/no-named-as-default-member -dayjs.extend(timezone); - -// eslint-disable-next-line import/no-named-as-default-member -dayjs.locale('ja'); -dayjs.tz.setDefault('Asia/Tokyo'); - -export { default } from 'dayjs'; diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro index cb63dcc..9b8b7c4 100644 --- a/src/pages/[...slug].astro +++ b/src/pages/[...slug].astro @@ -2,7 +2,7 @@ import { getCollection } from 'astro:content'; import PageHeader from '../components/PageHeader.astro'; import Layout from '../layouts/Layout.astro'; -import dayjs from '../lib/dayjs'; +import { renderDateHtml } from '../lib/date-time-formatter'; export async function getStaticPaths() { return (await getCollection('blog')).map((entry) => ({ @@ -23,11 +23,7 @@ const { Content, remarkPluginFrontmatter } = await entry.render(); twitterCard={entry.data.twitterCard} > -

- -

+

diff --git a/src/pages/blog.astro b/src/pages/blog.astro index d1d71f1..f9be483 100644 --- a/src/pages/blog.astro +++ b/src/pages/blog.astro @@ -3,12 +3,12 @@ import { getCollection } from 'astro:content'; import DetailsList from '../components/DetailsList.astro'; import PageHeader from '../components/PageHeader.astro'; import Layout from '../layouts/Layout.astro'; -import dayjs from '../lib/dayjs'; +import { renderDateHtml } from '../lib/date-time-formatter'; const title = 'ブログ'; const blogEntries = (await getCollection('blog')).toSorted( - (a, b) => dayjs(b.data.publishDate).tz().valueOf() - dayjs(a.data.publishDate).tz().valueOf(), + (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(), ); --- @@ -20,9 +20,7 @@ const blogEntries = (await getCollection('blog')).toSorted( items={blogEntries.map((entry) => ({ title: entry.data.title, link: `/${entry.slug}`, - meta: ``, + meta: renderDateHtml(entry.data.pubDate), }))} ordered={true} /> diff --git a/src/pages/index.astro b/src/pages/index.astro index 4abdab3..de6ecea 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,12 +1,12 @@ --- import type { CollectionEntry } from 'astro:content'; import { getCollection, getEntry } from 'astro:content'; -import type { Dayjs } from 'dayjs'; import DetailsList from '../components/DetailsList.astro'; +import type { DetailsListItem } from '../components/DetailsList.astro'; import PageHeader from '../components/PageHeader.astro'; import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; import Layout from '../layouts/Layout.astro'; -import dayjs from '../lib/dayjs'; +import { renderDateHtml, renderProjectWorkPeriodHtml } from '../lib/date-time-formatter'; const everylayoutEntry = await getEntry('blog', '20211011-publication-of-everylayout'); @@ -16,10 +16,10 @@ const primaryEntries = [ link: 'https://gihyo.jp/list/group/Tailwind-CSS%E5%AE%9F%E8%B7%B5%E5%85%A5%E9%96%80-%EF%BD%9E%E3%81%BE%E3%81%9A%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%8B%E3%82%89-%E3%81%82%E3%81%A8%E3%81%A7%E5%85%B1%E9%80%9A%E5%8C%96%E3%81%99%E3%82%8B', meta: 'gihyo.jp', }, - toDetailsListItem(await getEntry('blog', '2023-02-06-tailwind-css-in-wdpress')), - toDetailsListItem(await getEntry('blog', '2022-11-03-how-to-understand-the-markup')), - toDetailsListItem(await getEntry('blog', '2022-08-01-declarative-design')), - toDetailsListItem(await getEntry('blog', '2022-06-11-css-components')), + toPrimaryItem(await getEntry('blog', '2023-02-06-tailwind-css-in-wdpress')), + toPrimaryItem(await getEntry('blog', '2022-11-03-how-to-understand-the-markup')), + toPrimaryItem(await getEntry('blog', '2022-08-01-declarative-design')), + toPrimaryItem(await getEntry('blog', '2022-06-11-css-components')), { title: '本文のタイポグラフィとCSS', link: 'https://paper.dropbox.com/doc/CSS--BiYi3PrpPiQ_4sOfqgvEMeAEAg-wPD007Sd9dSeEDLP78jri', @@ -35,8 +35,8 @@ const primaryEntries = [ link: 'https://www.codegrid.net/series/2021-talk-about-every-layout', meta: 'CodeGrid', }, - toDetailsListItem(await getEntry('blog', '20211011-publication-of-everylayout')), - toDetailsListItem(await getEntry('blog', '20210127-prefer-margin-top')), + toPrimaryItem(everylayoutEntry), + toPrimaryItem(await getEntry('blog', '20210127-prefer-margin-top')), { title: 'Tailwind CSSの設計思想を業務に活かす', link: 'https://www.codegrid.net/series/2020-tailwind-talk', @@ -58,9 +58,9 @@ const primaryEntries = [ link: 'https://standard.shiftbrain.com/blog/default-action-for-click-event-of-a-element', meta: 'シフトブレイン／スタンダードデザインユニット', }, -]; +] satisfies DetailsListItem[]; -function toDetailsListItem(entry: CollectionEntry<'blog'>) { +function toPrimaryItem(entry: CollectionEntry<'blog'>): DetailsListItem { return { title: entry.data.title, link: `/${entry.slug}`, @@ -72,64 +72,45 @@ const projects = [ { title: 'sdenv', link: 'https://github.com/yuheiy/sdenv', - startDate: '2023-07', + meta: renderProjectWorkPeriodHtml('2023-07'), description: 'ウェブサイト構築のためのベストプラクティスに基づいて構成された、Astro、Tailwind CSS、Alpine.jsを中心とした開発環境。', }, { title: 'wordpress-starter', link: 'https://github.com/yuheiy/wordpress-starter', - startDate: '2020-08', - endDate: '2022-10', + meta: renderProjectWorkPeriodHtml('2020-08', '2022-10'), description: 'WordPressテーマ構築のための開発環境。', }, { title: 'accrefs', link: 'https://accrefs.jp/', - startDate: '2019-09', + meta: renderProjectWorkPeriodHtml('2019-09'), description: 'ウェブアクセシビリティの参考資料をまとめたサイト。日本語の資料を中心にリンク数は200を超える。サイトのデザインおよび実装に携わる。有志のメンバーにより制作・運営されている。', }, { title: 'shifted', link: 'https://github.com/yuheiy/shifted', - startDate: '2019-05', - endDate: '2023-07', + meta: renderProjectWorkPeriodHtml('2019-05', '2023-07'), description: '静的サイト構築のための開発環境。', }, { title: 'シフトブレイン／スタンダードデザインユニット', link: 'https://standard.shiftbrain.com/', - startDate: '2018-10', - endDate: '2020-06', + meta: renderProjectWorkPeriodHtml('2018-10', '2020-06'), description: '自社で所属していたチームのウェブサイト。', }, { title: 'yuhei blog', link: 'https://yuheiy.hatenablog.com/', - startDate: '2015-10', - endDate: '2020-11', + meta: renderProjectWorkPeriodHtml('2015-10', '2020-11'), description: '過去に更新していた個人ブログ。', }, -].map(({ title, link, startDate, endDate, description }) => ({ - title, - link, - meta: [ - getProjectDateHtml(dayjs(startDate)), - '—', - endDate && getProjectDateHtml(dayjs(endDate)), - ] - .filter(Boolean) - .join(' '), - description, -})); - -function getProjectDateHtml(date: Dayjs) { - return ``; -} +] satisfies DetailsListItem[]; const blogEntries = (await getCollection('blog')).toSorted( - (a, b) => dayjs(b.data.publishDate).tz().valueOf() - dayjs(a.data.publishDate).tz().valueOf(), + (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(), ); --- @@ -170,9 +151,7 @@ const blogEntries = (await getCollection('blog')).toSorted( items={blogEntries.slice(0, 3).map((entry) => ({ title: entry.data.title, link: `/${entry.slug}`, - meta: ``, + meta: renderDateHtml(entry.data.pubDate), }))} ordered={true} /> diff --git a/src/pages/posts-feed.xml.ts b/src/pages/posts-feed.xml.ts index 2105a7f..14c5413 100644 --- a/src/pages/posts-feed.xml.ts +++ b/src/pages/posts-feed.xml.ts @@ -2,12 +2,12 @@ import rss from '@astrojs/rss'; import type { APIContext } from 'astro'; import { getCollection } from 'astro:content'; import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; -import dayjs from '../lib/dayjs'; export async function GET(context: APIContext) { const blogEntries = (await getCollection('blog')).toSorted( - (a, b) => dayjs(b.data.publishDate).tz().valueOf() - dayjs(a.data.publishDate).tz().valueOf(), + (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(), ); + return rss({ title: SITE_TITLE, description: SITE_DESCRIPTION, @@ -18,7 +18,7 @@ export async function GET(context: APIContext) { return { link: `/${entry.slug}`, title: entry.data.title, - pubDate: dayjs(entry.data.publishDate).tz().toDate(), + pubDate: entry.data.pubDate, description: remarkPluginFrontmatter.description, }; }),