画像と著者のアイコンに使用できる画像フォーマットを増やす

README_BLOG.md

@@ -2,7 +2,7 @@
 
 OUCC BLOG の仕様について記載しています。何もわからない場合はサーバー係に投稿したい Markdown ファイルを渡してください。
 
-ブログの投稿を行う際はブランチ名が `blog/` で始まるブランチを作成し作業してください。このブランチではブログの投稿に関する作業以外は禁止されていますが、後述するようにCIによる支援が得られます。
+ブログの投稿を行う際はブランチ名が `blog/` で始まるブランチを作成し作業してください。このブランチではブログの投稿に関する作業以外は禁止されていますが、後述するように投稿日時や更新日時が自動で生成されます。
 
 ブログに関して作業することを明示しつつこの制約を受けたくない場合は、ブランチ名が `blog/admin/` で始まるブランチで作業してください。
 
@@ -20,6 +20,8 @@ tags:
   - タグ2
   - タグ3
 ---
+
+これは記事本文です。Markdownで文章を書くことができます。
 ```
 
 画像ファイルは `src/content/blogs` に新しいディレクトリを作成してそこに配置するか、または外部においてURLで指定してください。
@@ -28,53 +30,53 @@ tags:
 
 ## 記事のメタ情報
 
-記事のメタ情報には投稿日時と更新日時が含まれています。これは `blog/` から始まるブランチで Pull Request を出すと自動的に更新されます。
+`src/content/blog-metas`にある記事のメタ情報には投稿日時と更新日時が含まれています。これは `blog/` から始まるブランチで Pull Request を出すと自動的に作成・更新されます。
 
 以下のようにコマンドを使うことで手動で更新することもできます。
 
 ```bash
 $ npm run update-blogmeta -- src/content/blogs/NEW-POST1.md src/content/blogs/NEW-POST2.md
 ```
 
-## 著者
+## 著者の追加
+
+`src/content/authors` に JSON ファイルを追加することで著者ページを作ることができます。ファイル名は記事の `author` で指定する際の値となるので自身のIDなどわかりやすい名前にしてください。
 
-`src/content/authors` に JSON ファイルを追加することで新しいタグを作ることができます。ファイル名は記事の `author` で指定する際の値となるのでわかりやすい名前にすることをおすすめします。
 著者のスキーマは以下のとおりです。`name` 以外のプロパティは省略可能です。
 
-- name : 著者の表示名
+- name : 著者の表示名（必須）
 - description : 著者の説明
-- github : GitHub アカウントの ID (image を指定しなかった場合、こちらで指定したアカウントのアイコンが使用されます。)
-- image : 著者のアイコン
-  - `svg` は `src/assets/icons/blog` に入っているsvgファイルを指定できます。`name` には拡張子を除いたファイル名を指定してください。
-  - `external-url` は外部の画像を指定できます。
-
-```ts
-interface Author {
-  name: string
-  description?: string
-  github?: string
-  image?:
-    | {
-        type: 'svg'
-        name: string
-      }
-    | {
-        type: 'external-url'
-        url: string
-      }
+- github : GitHub アカウントの ID
+- image : アイコンの画像ファイル（詳細は後述）
+
+Example: `src/content/authors/octocat.json`
+
+```json
+{
+  "name": "Octocat",
+  "description": "八本足の猫です。",
+  "github": "octocat",
+  "image": "./octocat.svg"
 }
 ```
 
-## タグ
+### 著者のアイコン（任意）
+
+`src/content/authors`に画像ファイルを置き、JSONでファイル名を指定することでアイコンを変更できます。ファイル名はJSONと同じものにしてください。画像フォーマットにはSVG, PNG, JPEG等が使用できます。
+
+例えばJSONが`octocat.json`の場合、アイコンのファイル名は`octocat.svg`とし、JSONでは`"image": "./octocat.svg"`と指定してください。
+
+なお、画像を指定しなかった場合はGitHubのアイコンが使用されます。
+
+## タグの追加
 
 `src/content/tags` に JSON ファイルを追加することで新しいタグを作ることができます。ファイル名は記事の `tags` で指定する際の値となるのでわかりやすい名前にすることをおすすめします。
+
 タグのスキーマは以下のとおりです。 `name` 以外のプロパティは省略可能です。
 
-- name : タグの表示名
+- name : タグの表示名（必須）
 - description : タグの説明
-- image : タグのアイコン
-  - `svg` は `src/assets/icons/blog` に入っているsvgファイルを指定できます。`name` には拡張子を除いたファイル名を指定してください。
-  - `external-url` は外部の画像を指定できます。
+- image : アイコンの画像ファイル（詳細は後述）
 - site : 公式サイト
   - url : 公式サイトのURL
   - text : リンクの表示名 (指定のない場合 `タグ名 - 公式サイト` となります)
@@ -85,30 +87,28 @@ interface Author {
   - url : GitHubのリポジトリのURL
   - text : リンクの表示名 (指定のない場合 `タグ名 - GitHub` となります)
 
-```ts
-interface Tag {
-  name: string
-  description?: string
-  image?:
-    | {
-        type: 'svg'
-        name: string
-      }
-    | {
-        type: 'external-url'
-        url: string
-      }
-  site?: {
-    url: string
-    text?: string
-  }
-  document?: {
-    url: string
-    text?: string
-  }
-  github?: {
-    url: string
-    text?: string
+Example: `src/content/tags/csharp.json`
+
+```json
+{
+  "name": "C#",
+  "description": "C#は、最新のタイプ セーフなオブジェクト指向のプログラミング言語です。 開発者は C# を使用することにより、.NET で稼働する、安全かつ堅牢な多くの種類のアプリケーションを構築できます。",
+  "image": "./csharp.svg",
+  "site": {
+    "url": "https://dotnet.microsoft.com/ja-jp/learn/dotnet/what-is-dotnet"
+  },
+  "document": {
+    "url": "https://learn.microsoft.com/ja-jp/dotnet/csharp/programming-guide/"
+  },
+  "github": {
+    "url": "https://github.com/dotnet/runtime",
+    "text": ".NET Runtime - GitHub"
   }
 }
 ```
+
+### タグのアイコン（任意）
+
+`src/content/tags`に画像ファイルを置き、JSONでファイル名を指定することでアイコンを変更できます。ファイル名はJSONと同じものにしてください。画像フォーマットにはSVG, PNG, JPEG等が使用できます。
+
+例えばJSONが`csharp.json`の場合、アイコンのファイル名は`csharp.png`とし、JSONでは`"image": "./csharp.png"`と指定してください。

src/components/blog/icon/AuthorIcon.astro

@@ -1,41 +1,21 @@
 ---
-import Icon from '@/components/common/Icon.astro'
-import { unreachable } from '@/utils/unreachable'
 import type { CollectionEntry } from 'astro:content'
+import defaultImage from '@/assets/avatar.svg'
+import Image from '@/components/common/Image.astro'
 type Props = CollectionEntry<'authors'>['data'] & { size: number }
 
 const { size, ...author } = Astro.props
 
-const image =
-  author.image.type === 'svg' &&
-  author.image.name === 'default_user' &&
-  author.github
-    ? ({
-        type: 'external-url',
-        url: `https://github.com/${author.github}.png`,
-      } as const)
-    : author.image
+const src =
+  author.image ?? author.github !== undefined
+    ? `https://github.com/${author.data.github}.png`
+    : defaultImage
 ---
 
-{
-  image.type === 'svg' ? (
-    <Icon
-      name={image.name}
-      alt={`${author.name} のアイコン`}
-      class="aspect-square rounded-full"
-      height={size}
-      width={size}
-      isBlog
-    />
-  ) : image.type === 'external-url' ? (
-    <img
-      src={image.url}
-      alt={`${author.name} のアイコン`}
-      height={size}
-      width={size}
-      class="aspect-square rounded-full"
-    />
-  ) : (
-    unreachable(image)
-  )
-}
+<Image
+  src={src}
+  alt={`${author.name} のアイコン`}
+  class="aspect-square rounded-full"
+  width={size}
+  height={size}
+/>

src/components/blog/icon/TagIcon.astro

@@ -1,7 +1,7 @@
 ---
-import Icon from '@/components/common/Icon.astro'
-import { unreachable } from '@/utils/unreachable'
 import type { CollectionEntry } from 'astro:content'
+import defaultImage from '@/assets/hashtag.svg'
+import Image from '@/components/common/Image.astro'
 
 interface Props {
   tag: CollectionEntry<'tags'>['data']
@@ -11,25 +11,10 @@ interface Props {
 const { tag, size } = Astro.props
 ---
 
-{
-  tag.image.type === 'svg' ? (
-    <Icon
-      name={tag.image.name}
-      alt={`${tag.name} のアイコン`}
-      class="aspect-square"
-      width={size}
-      height={size}
-      isBlog
-    />
-  ) : tag.image.type === 'external-url' ? (
-    <img
-      src={tag.image.url}
-      alt={`${tag.name} のアイコン`}
-      height={size}
-      width={size}
-      class="aspect-square"
-    />
-  ) : (
-    unreachable(tag.image)
-  )
-}
+<Image
+  src={tag.image ?? defaultImage}
+  alt={`${tag.name} のアイコン`}
+  class="aspect-square"
+  width={size}
+  height={size}
+/>

src/content/config.ts

@@ -32,23 +32,13 @@ const blogsMetaCollection = defineCollection({
 
 const authorsCollection = defineCollection({
   type: 'data',
-  schema: z.object({
-    name: z.string().min(1),
-    description: z.string().optional(),
-    github: z.string().min(1).optional(),
-    image: z
-      .discriminatedUnion('type', [
-        z.object({
-          type: z.literal('svg'),
-          name: z.string().min(1),
-        }),
-        z.object({
-          type: z.literal('external-url'),
-          url: z.string().url(),
-        }),
-      ])
-      .default({ type: 'svg', name: 'default_user' }),
-  }),
+  schema: ({ image }) =>
+    z.object({
+      name: z.string().min(1),
+      description: z.string().optional(),
+      github: z.string().min(1).optional(),
+      image: image().optional(),
+    }),
 })
 
 const tagsAboutSchema = z.object({
@@ -58,25 +48,15 @@ const tagsAboutSchema = z.object({
 
 const tagsCollection = defineCollection({
   type: 'data',
-  schema: z.object({
-    name: z.string().min(1),
-    image: z
-      .discriminatedUnion('type', [
-        z.object({
-          type: z.literal('svg'),
-          name: z.string().min(1),
-        }),
-        z.object({
-          type: z.literal('external-url'),
-          url: z.string().url(),
-        }),
-      ])
-      .default({ type: 'svg', name: 'hashtag' }),
-    description: z.string().optional(),
-    site: tagsAboutSchema.optional(),
-    document: tagsAboutSchema.optional(),
-    github: tagsAboutSchema.optional(),
-  }),
+  schema: ({ image }) =>
+    z.object({
+      name: z.string().min(1),
+      description: z.string().optional(),
+      site: tagsAboutSchema.optional(),
+      document: tagsAboutSchema.optional(),
+      github: tagsAboutSchema.optional(),
+      image: image().optional(),
+    }),
 })
 
 export const collections = {

src/content/tags/arduino.json

@@ -1,7 +1,4 @@
 {
   "name": "Arduino",
-  "image": {
-    "type": "svg",
-    "name": "arduino"
-  }
+  "image": "./arduino.svg"
 }

src/content/tags/astro.json

@@ -1,7 +1,4 @@
 {
   "name": "Astro",
-  "image": {
-    "type": "svg",
-    "name": "astro-icon-dark"
-  }
+  "image": "./astro.svg"
 }

src/content/tags/csharp.json

@@ -1,10 +1,7 @@
 {
   "name": "C#",
-  "image": {
-    "type": "svg",
-    "name": "csharp"
-  },
   "description": "C#は、最新のタイプ セーフなオブジェクト指向のプログラミング言語です。 開発者は C# を使用することにより、.NET で稼働する、安全かつ堅牢な多くの種類のアプリケーションを構築できます。",
+  "image": "./csharp.svg",
   "site": {
     "url": "https://dotnet.microsoft.com/ja-jp/learn/dotnet/what-is-dotnet"
   },

src/content/tags/discord-bot.json

@@ -1,7 +1,4 @@
 {
   "name": "Discord Bot",
-  "image": {
-    "type": "svg",
-    "name": "discord-mark-black"
-  }
+  "image": "./discord-bot.svg"
 }

src/content/tags/docker.json

@@ -1,7 +1,4 @@
 {
   "name": "Docker",
-  "image": {
-    "type": "svg",
-    "name": "docker"
-  }
+  "image": "./docker.svg"
 }

src/content/tags/dotnet.json

@@ -1,7 +1,4 @@
 {
   "name": ".NET",
-  "image": {
-    "type": "svg",
-    "name": "dotnet-logo"
-  }
+  "image": "./dotnet.svg"
 }

src/content/tags/electronic-dictionary.json

@@ -1,7 +1,4 @@
 {
   "name": "電子辞書",
-  "image": {
-    "type": "svg",
-    "name": "laptop"
-  }
+  "image": "./electronic-dictionary.svg"
 }