feat: add top image

.github/workflows/ci.yml

@@ -5,13 +5,12 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
   pull_request:
-    branches: [ "main" ]
+    branches: ['main']
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
@@ -20,14 +19,14 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v4
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm ci
-    - run: npm run format
-    - run: npm run lint
-    - run: npm run build
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run format
+      - run: npm run lint
+      - run: npm run build
     # - run: npm run ci:test

README.md

@@ -37,7 +37,7 @@ You can preview the production build with `npm run preview`.
 
 ## Future work(TODO)
 
-- Preview for Nostr Events in article 
+- Preview for Nostr Events in article
 - Config
 - Black list
 - Thumbnail image

src/lib/server/blog-store.service.ts

@@ -12,14 +12,16 @@ export class BlogStoreService {
 		const blogs: Blog[] = events
 			.map((e) => {
 				const identifierTag = e.tags.find((t) => t[0] === 'd') ?? [];
-				const title = e.tags.find((t) => t[0] === 'title') ?? [];
-				const summary = e.tags.find((t) => t[0] === 'summary') ?? [];
+				const titleTag = e.tags.find((t) => t[0] === 'title') ?? [];
+				const summaryTag = e.tags.find((t) => t[0] === 'summary') ?? [];
+				const imageTag = e.tags.find((t) => t[0] === 'image') ?? [];
 				const hashTags = e.tags.filter((t) => t[0] === 't').map((t) => t[1]);
 				return {
 					...e,
 					identifier: identifierTag[1],
-					title: title[1],
-					summary: summary[1],
+					title: titleTag[1],
+					summary: summaryTag[1],
+					image: imageTag[1],
 					hashTags
 				};
 			})

src/lib/types.ts

@@ -3,6 +3,7 @@ import type { NostrEventExt } from 'nostr-fetch';
 export interface Blog extends NostrEventExt {
 	title: string;
 	summary: string;
+	image: string;
 	hashTags: string[];
 	identifier: string;
 	naddress: string;

src/routes/blog/[slug]/+page.svelte

@@ -5,6 +5,9 @@
 </script>
 
 <hgroup>
+	{#if !!data.blog.image}
+		<img class="image" src={data.blog.image} alt="thumbnail" />
+	{/if}
 	<h1>{data.blog.title}</h1>
 	<p class="naddress">
 		naddress: <a
@@ -45,6 +48,12 @@
 		max-width: 800px;
 	}
 
+	hgroup img {
+		min-width: 100%;
+		max-height: 320px;
+		object-fit: cover;
+	}
+
 	hgroup .naddress {
 		font-size: 0.8rem;
 	}