feat: added cover image for article

astro.config.mjs

@@ -1,11 +1,12 @@
 import { defineConfig } from "astro/config";
-import solid from "@astrojs/solid-js";
-import compress from "astro-compress";
 import { h } from "hastscript";
 import { toString } from "hast-util-to-string";
 import { escape } from "html-escaper";
+import solid from "@astrojs/solid-js";
+import image from "@astrojs/image";
+import compress from "astro-compress";
 
-const createAnchorLabel = (heading: string) => {
+const createAnchorLabel = (heading) => {
 	const node = h("span.anchor-label", escape(heading));
 	node.properties["is:raw"] = true;
 	return node;
@@ -14,7 +15,14 @@ const createAnchorLabel = (heading: string) => {
 // https://astro.build/config
 export default defineConfig({
 	site: "https://yarkov.tech",
-	integrations: [solid(), compress({ img: false, html: false })],
+	integrations: [
+		solid(),
+		compress({
+			img: false,
+			html: false,
+		}),
+		image(),
+	],
 	markdown: {
 		syntaxHighlight: "prism",
 		remarkPlugins: ["remark-gfm", "remark-smartypants"],

package.json

@@ -18,24 +18,25 @@
 		"lint": "eslint '**/*.{js,mjs,ts,tsx}'"
 	},
 	"devDependencies": {
+		"@astrojs/image": "^0.3.2",
 		"@astrojs/solid-js": "^0.4.1",
-		"@typescript-eslint/eslint-plugin": "^5.31.0",
-		"@typescript-eslint/parser": "^5.31.0",
-		"astro": "^1.0.0-beta.73",
+		"@typescript-eslint/eslint-plugin": "^5.32.0",
+		"@typescript-eslint/parser": "^5.32.0",
+		"astro": "^1.0.0-rc.7",
 		"astro-compress": "^0.0.15",
 		"astro-icon": "^0.7.3",
-		"eslint": "^8.20.0",
+		"eslint": "^8.21.0",
 		"eslint-plugin-solid": "^0.7.1",
 		"hast-util-to-string": "^2.0.0",
 		"hastscript": "^7.0.2",
 		"html-escaper": "^3.0.3",
 		"prettier": "^2.7.1",
-		"prettier-plugin-astro": "^0.2.0",
+		"prettier-plugin-astro": "^0.3.0",
 		"rehype-autolink-headings": "^6.1.1",
 		"rehype-slug": "^5.0.1",
 		"remark-gfm": "^3.0.1",
 		"remark-smartypants": "^2.0.0",
-		"sass": "^1.54.0",
+		"sass": "^1.54.3",
 		"solid-js": "^1.4.8"
 	}
 }

src/components/ArticleItem/ArticleItem.tsx

@@ -1,6 +1,6 @@
-import { Component } from 'solid-js';
-import { DateFormatter } from '@utils/date';
-import './ArticleItem.scss';
+import type { Component } from "solid-js";
+import { DateFormatter } from "@utils/date";
+import "./ArticleItem.scss";
 
 export type ArticleItemProps = {
 	data: ArticleType;
@@ -9,7 +9,7 @@ export type ArticleItemProps = {
 export const ArticleItem: Component<ArticleItemProps> = (props) => {
 	return (
 		<article class="article-item">
-			<a href={`/blog/${new Date(props.data.published_at).toLocaleDateString('en-CA')}/${props.data.slug}`}>
+			<a href={`/blog/${new Date(props.data.published_at).toLocaleDateString("en-CA")}/${props.data.slug}`}>
 				<h3>{props.data.title}</h3>
 				<p>
 					<time datetime={props.data.published_at.toString()}>{DateFormatter.format(new Date(props.data.published_at))}</time>

src/components/ArticlePost/ArticlePost.astro

@@ -1,8 +1,9 @@
 ---
 import { DateFormatter } from "@root/utils";
+import { Image, Picture } from '@astrojs/image/components'
 import "./ArticlePost.scss";
 
-export interface Props {
+export type Props = {
 	data: ArticleType;
 }
 
@@ -28,11 +29,11 @@ const { title, tags, author, published_at } = data;
 			<time datetime={published_at}>{DateFormatter.format(new Date(published_at))}</time>
 			<span>{author}</span>
 		</div>
-		<div>
+		{data.coverImage && <div>
 			<figure>
-				<img src="https://picsum.photos/1920/1080" alt="Article Image" />
+				<Image src={data.coverImage} width={700} height={400} aspectRatio={'16:9'} format={'webp'} alt={data.title} />
 			</figure>
-		</div>
+		</div>}
 	</header>
 	<slot />
 	<footer>

src/components/ArticlePost/ArticlePost.scss

@@ -20,7 +20,7 @@
 			& ul {
 				display: flex;
 				flex-wrap: wrap;
-				column-gap: 5px;
+				column-gap: 7px;
 				row-gap: 7px;
 			}
 		}
@@ -38,6 +38,7 @@
 				display: block;
 				margin: 0 auto;
 				max-width: 100%;
+				height: auto;
 			}
 		}
 	}

src/types/main.d.ts

@@ -37,6 +37,7 @@ declare global {
 	type ArticleType = {
 		slug: string;
 		title: string;
+		coverImage?: string | undefined;
 		description: string;
 		author: string;
 		tags: Array<string>;

tsconfig.json

@@ -5,7 +5,7 @@
 		"moduleResolution": "node",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
-		"types": ["vite/client"],
+		"types": ["vite/client", "@astrojs/image/client"],
 		"sourceMap": true,
 		"baseUrl": ".",
 		"jsx": "preserve",