feat(meta): let articles meta override default

src/app.tsx

@@ -3,18 +3,11 @@ import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
 import "./app.css";
 import { Layout } from "./components/Layout";
-import { MetaProvider, Title, Meta } from "@solidjs/meta";
+import { MetaProvider } from "@solidjs/meta";
 
 export default function App() {
 	return (
 		<MetaProvider>
-			<Title>minhtran_dev</Title>
-			<Meta property="og:title" content="minhtran_dev" />
-			<Meta property="og:description" content="just trying my best :)" />
-			<Meta property="og:image" content="/og.png" />
-			<Meta property="og:image:alt" content="minhtran_dev site" />
-			<Meta property="og:image:width" content="1200" />
-			<Meta property="og:image:height" content="630" />
 			<Router
 				root={(props) => {
 					return (

src/routes/(home).tsx

@@ -1,14 +1,25 @@
 import { For } from "solid-js";
 import Experience from "../components/Experience";
+import { Title, Meta } from "@solidjs/meta";
 
 const links = [
 	"https://github.com/minhtrannhat",
 	"https://linkedin.com/in/minh-tran-nhat",
 	"https://git.minhtrannhat.com/explore/repos",
 ];
+
 const Homepage = () => {
 	return (
 		<div>
+			<Title>minhtran_dev</Title>
+
+			<Meta property="og:title" content="minhtran_dev" />
+			<Meta property="og:description" content="just trying my best :)" />
+			<Meta property="og:image" content="/og.png" />
+			<Meta property="og:image:alt" content="minhtran_dev site" />
+			<Meta property="og:image:width" content="1200" />
+			<Meta property="og:image:height" content="630" />
+
 			<section class="mx-4 flex flex-col sm:flex-row gap-2v sm:gap-3h">
 				<div class="font-medium">
 					<div class="text-nord-1 flex items-end mb-1v gap-1h">

src/routes/articles/index.tsx

@@ -1,11 +1,20 @@
 import { posts } from "~/data/posts";
 import dayjs from "dayjs";
-
+import { Title, Meta } from "@solidjs/meta";
 import { For } from "solid-js";
 
 const Articles = () => {
 	return (
 		<div>
+			<Title>minhtran_dev - Articles</Title>
+
+			<Meta property="og:title" content="minhtran_dev Articles" />
+			<Meta property="og:description" content="My articles" />
+			<Meta property="og:image" content="/og.png" />
+			<Meta property="og:image:alt" content="minhtran_dev site" />
+			<Meta property="og:image:width" content="1200" />
+			<Meta property="og:image:height" content="630" />
+
 			<ol class="flex flex-col gap-1v list-square ml-2h">
 				<For each={Object.values(posts)}>
 					{(post) => (

src/routes/blog.tsx

@@ -27,6 +27,17 @@ const Blog = (props: RouteSectionProps<unknown>) => {
 			<Meta name="og:title" content={meta().title} />
 			<Meta name="description" content={meta().description} />
 			<Meta name="og:description" content={meta().description} />
+			<Meta property="og:type" content="article" />
+
+			<Meta
+				property="og:url"
+				content={`https://minhtranhat.com/blog/${meta()?.slug}`}
+			/>
+
+			<Meta property="og:image" content="/og.png" />
+			<Meta property="og:image:alt" content="minhtran_dev site" />
+			<Meta property="og:image:width" content="1200" />
+			<Meta property="og:image:height" content="630" />
 
 			<Show when={meta().featuredImage}>
 				<PostImage
@@ -35,6 +46,7 @@ const Blog = (props: RouteSectionProps<unknown>) => {
 					alt={meta().featuredImageDesc || ""}
 				/>
 			</Show>
+
 			<h1 class="text-2v leading-2 font-bold mb-1v">{meta().title}</h1>
 
 			<div class="flex items-center gap-4h mb-2v text-sm leading-1">

src/routes/tags/(tags).tsx

@@ -1,5 +1,6 @@
 import { For } from "solid-js";
 import { tags } from "~/data/tags";
+import { Title, Meta } from "@solidjs/meta";
 
 /*
  * Code from andii.dev
@@ -7,6 +8,15 @@ import { tags } from "~/data/tags";
 const Tags = () => {
 	return (
 		<div>
+			<Title>minhtran_dev - Article Tags</Title>
+
+			<Meta property="og:title" content="minhtran_dev Article Tags" />
+			<Meta property="og:description" content="Tags for my articles" />
+			<Meta property="og:image" content="/og.png" />
+			<Meta property="og:image:alt" content="minhtran_dev site" />
+			<Meta property="og:image:width" content="1200" />
+			<Meta property="og:image:height" content="630" />
+
 			<h1 class="text-xl text-nord-1 font-bold mt-1v mb-1v">All tags:</h1>
 			<ol class="flex flex-col gap-1v list-square ml-2h">
 				<For each={Object.values(tags)}>