Merge pull request #18 from khaykingleb/improve-links

Improve links

Author: khaykingleb

Makefile

@@ -77,6 +77,16 @@ format: ## Format project
 	pnpm run format
 .PHONY: format
 
+ngrok-dev: ## Run ngrok for development server
+	@echo "Running ngrok."
+	ngrok http 5173
+.PHONY: ngrok-dev
+
+ngrok-prod: ## Run ngrok for production server
+	@echo "Running ngrok."
+	ngrok http 3000
+.PHONY: ngrok-prod
+
 ##@ Miscullaneous
 
 create-secrets-baseline:  ## Create secrets baseline file

app/data/posts.tsx

@@ -0,0 +1,17 @@
+export interface Post {
+  id: number;
+  title: string;
+  content: string;
+  notionPageId: string;
+  tags: string[];
+}
+
+export const posts: Post[] = [
+  {
+    id: 1,
+    title: "Introduction to Digital Signal Processing",
+    content: "Created: 2024/09/22",
+    notionPageId: "5987cc697c874323920215fbaad8cbbd", // pragma: allowlist secret
+    tags: ["notes", "speech", "dsp"],
+  },
+];

app/routes/_index.tsx

@@ -9,6 +9,10 @@ export const meta: MetaFunction = () => {
     { title: "About | Gleb Khaykin" },
     { property: "og:title", content: "About | Gleb Khaykin" },
     { property: "og:description", content: "Gleb Khaykin's personal website" },
+    {
+      property: "og:image",
+      content: "/img/van_gogh_wheatfield_with_crows.jpg",
+    },
   ];
 };
 

app/routes/blog.$pageid.tsx

@@ -1,5 +1,5 @@
 import { defer, LoaderFunction, LoaderFunctionArgs } from "@remix-run/node";
-import { Await, useLoaderData } from "@remix-run/react";
+import { Await, MetaFunction, useLoaderData } from "@remix-run/react";
 import { NotionAPI } from "notion-client";
 import React, { lazy, Suspense } from "react";
 import { ClientOnly } from "remix-utils/client-only";
@@ -14,6 +14,7 @@ import { NotionRenderer } from "vendor/react-notion-x/packages/react-notion-x";
 
 import { Footer } from "~/components/organisms/Footer";
 import { Header } from "~/components/organisms/Header";
+import { Post, posts } from "~/data/posts";
 
 const Equation = lazy(() =>
   import("react-notion-x/build/third-party/equation").then((module) => ({
@@ -91,7 +92,27 @@ export const loader: LoaderFunction = async ({
     throw new Error("Page ID is required");
   }
   const recordMapPromise = notion.getPage(pageId);
-  return defer({ recordMap: recordMapPromise });
+  const post = posts.find((p) => p.notionPageId === pageId);
+  return defer({ recordMap: recordMapPromise, post });
+};
+
+export const meta: MetaFunction<typeof loader> = ({
+  data,
+}: {
+  data: { post: Post };
+}) => {
+  const { title, content, tags } = data.post;
+  const description = `${content}; Tags: ${tags.join(", ")}`;
+  return [
+    { title: `${title} | Gleb Khaykin` },
+    { property: "og:title", content: `${title} | Gleb Khaykin` },
+    { property: "og:description", content: description },
+    { property: "og:type", content: "article" },
+    {
+      property: "og:image",
+      content: "/img/van_gogh_wheatfield_with_cypresses.jpg",
+    },
+  ];
 };
 
 export default function NotionRoute() {

app/routes/blog._index.tsx

@@ -1,28 +1,22 @@
 import { MetaFunction } from "@remix-run/node";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { TagSearchBar } from "~/components/molecules/TagSearchBar";
-import type { CarouselItem } from "~/components/organisms/Carousel";
 import { Carousel } from "~/components/organisms/Carousel";
 import { Footer } from "~/components/organisms/Footer";
 import { Header } from "~/components/organisms/Header";
 import { Pagination } from "~/components/organisms/Pagination";
-
-const posts: CarouselItem[] = [
-  {
-    id: 1,
-    title: "Introduction to Digital Signal Processing",
-    content: "Created: 2024/09/22",
-    notionPageId: "5987cc697c874323920215fbaad8cbbd", // pragma: allowlist secret
-    tags: ["notes", "speech", "dsp"],
-  },
-];
+import { posts } from "~/data/posts";
 
 export const meta: MetaFunction = () => {
   return [
     { title: "Posts | Gleb Khaykin" },
     { property: "og:title", content: "Posts | Gleb Khaykin" },
     { property: "og:description", content: "Gleb Khaykin's personal website" },
+    {
+      property: "og:image",
+      content: "/img/van_gogh_wheatfield_under_thunderclouds.jpg",
+    },
   ];
 };