-
,
HTMLHeadingElement
->;
+>
function LinkIcon() {
return (
- );
+ )
}
export function H1({ children, ...props }: HeadingProps) {
- const router = useRouter();
- const id = slugify(children?.toString() || "", { lower: true, strict: true });
+ const router = useRouter()
+ const id = slugify(children?.toString() || '', {
+ lower: true,
+ strict: true,
+ })
const handleClick = () => {
- router.push(`#${id}`);
- };
+ router.push(`#${id}`)
+ }
return (
{children}
- );
+ )
}
export function H2({ children, ...props }: HeadingProps) {
- const router = useRouter();
- const id = slugify(children?.toString() || "", { lower: true, strict: true });
+ const router = useRouter()
+ const id = slugify(children?.toString() || '', {
+ lower: true,
+ strict: true,
+ })
const handleClick = () => {
- router.push(`#${id}`);
- };
+ router.push(`#${id}`)
+ }
return (
{children}
- );
+ )
}
export function H3({ children, ...props }: HeadingProps) {
- const router = useRouter();
- const id = slugify(children?.toString() || "", { lower: true, strict: true });
+ const router = useRouter()
+ const id = slugify(children?.toString() || '', {
+ lower: true,
+ strict: true,
+ })
const handleClick = () => {
- router.push(`#${id}`);
- };
+ router.push(`#${id}`)
+ }
return (
{children}
- );
+ )
}
diff --git a/apps/website/app/blog/[slug]/components/TableOfContents.tsx b/apps/website/app/blog/[slug]/components/TableOfContents.tsx
index 3bbaac3..099d3db 100644
--- a/apps/website/app/blog/[slug]/components/TableOfContents.tsx
+++ b/apps/website/app/blog/[slug]/components/TableOfContents.tsx
@@ -1,65 +1,67 @@
-"use client";
+'use client'
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'
interface Heading {
- id: string;
- text: string;
- level: number;
+ id: string
+ text: string
+ level: number
}
export function TableOfContents() {
- const [headings, setHeadings] = useState([]);
- const [activeId, setActiveId] = useState();
+ const [headings, setHeadings] = useState([])
+ const [activeId, setActiveId] = useState()
useEffect(() => {
- const elements = Array.from(document.querySelectorAll("h1, h2, h3"))
+ const elements = Array.from(document.querySelectorAll('h1, h2, h3'))
.filter((element) => element.id)
.map((element) => ({
id: element.id,
- text: element.textContent || "",
+ text: element.textContent || '',
level: Number(element.tagName.charAt(1)),
- }));
- setHeadings(elements);
+ }))
+ setHeadings(elements)
const observer = new IntersectionObserver(
(entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
- setActiveId(entry.target.id);
+ setActiveId(entry.target.id)
}
}
},
- { rootMargin: "-100px 0px -66%" },
- );
+ { rootMargin: '-100px 0px -66%' },
+ )
for (const { id } of elements) {
- const element = document.getElementById(id);
- if (element) observer.observe(element);
+ const element = document.getElementById(id)
+ if (element) observer.observe(element)
}
- return () => observer.disconnect();
- }, []);
+ return () => observer.disconnect()
+ }, [])
return (
- );
+ )
}
diff --git a/apps/website/app/blog/[slug]/components/ZoomableImage.tsx b/apps/website/app/blog/[slug]/components/ZoomableImage.tsx
index 7b97960..cbcc66e 100644
--- a/apps/website/app/blog/[slug]/components/ZoomableImage.tsx
+++ b/apps/website/app/blog/[slug]/components/ZoomableImage.tsx
@@ -1,21 +1,25 @@
-"use client";
+'use client'
-import { cn } from "@/lib/utils";
-import { PhotoProvider, PhotoView } from "react-photo-view";
-import "react-photo-view/dist/react-photo-view.css";
+import { cn } from '@/lib/utils'
+import { PhotoProvider, PhotoView } from 'react-photo-view'
+import 'react-photo-view/dist/react-photo-view.css'
interface ZoomableImageProps {
- src: string;
- alt: string;
- className?: string;
+ src: string
+ alt: string
+ className?: string
}
export function ZoomableImage({ src, alt, className }: ZoomableImageProps) {
return (
- 
+
- );
+ )
}
diff --git a/apps/website/app/blog/[slug]/components/shared.ts b/apps/website/app/blog/[slug]/components/shared.ts
index 4e6096b..a2daa08 100644
--- a/apps/website/app/blog/[slug]/components/shared.ts
+++ b/apps/website/app/blog/[slug]/components/shared.ts
@@ -1,14 +1,14 @@
-import { toJsxRuntime } from "hast-util-to-jsx-runtime";
-import type { JSX } from "react";
-import { Fragment } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import type { BundledLanguage } from "shiki/bundle/web";
-import { codeToHast } from "shiki/bundle/web";
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
+import type { JSX } from 'react'
+import { Fragment } from 'react'
+import { jsx, jsxs } from 'react/jsx-runtime'
+import type { BundledLanguage } from 'shiki/bundle/web'
+import { codeToHast } from 'shiki/bundle/web'
export async function highlight(code: string, lang: BundledLanguage) {
const out = await codeToHast(code, {
lang,
- theme: "houston",
- });
- return toJsxRuntime(out, { Fragment, jsx, jsxs }) as JSX.Element;
+ theme: 'houston',
+ })
+ return toJsxRuntime(out, { Fragment, jsx, jsxs }) as JSX.Element
}
diff --git a/apps/website/app/blog/[slug]/page.tsx b/apps/website/app/blog/[slug]/page.tsx
index 03e63cf..4bad59b 100644
--- a/apps/website/app/blog/[slug]/page.tsx
+++ b/apps/website/app/blog/[slug]/page.tsx
@@ -1,47 +1,47 @@
-import { getPost, getPosts } from "@/lib/ghost";
-import type { Metadata, ResolvingMetadata } from "next";
-import Image from "next/image";
-import Link from "next/link";
-import { notFound } from "next/navigation";
-import type React from "react";
-import ReactMarkdown from "react-markdown";
-import type { Components } from "react-markdown";
-import rehypeRaw from "rehype-raw";
-import remarkGfm from "remark-gfm";
-import remarkToc from "remark-toc";
-import type { BundledLanguage } from "shiki/bundle/web";
-import TurndownService from "turndown";
+import { getPost, getPosts } from '@/lib/ghost'
+import type { Metadata, ResolvingMetadata } from 'next'
+import Image from 'next/image'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+import type React from 'react'
+import ReactMarkdown from 'react-markdown'
+import type { Components } from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import remarkGfm from 'remark-gfm'
+import remarkToc from 'remark-toc'
+import type { BundledLanguage } from 'shiki/bundle/web'
+import TurndownService from 'turndown'
// @ts-ignore
-import * as turndownPluginGfm from "turndown-plugin-gfm";
-import { CodeBlock } from "./components/CodeBlock";
-import { H1, H2, H3 } from "./components/Headings";
-import { TableOfContents } from "./components/TableOfContents";
-import { ZoomableImage } from "./components/ZoomableImage";
+import * as turndownPluginGfm from 'turndown-plugin-gfm'
+import { CodeBlock } from './components/CodeBlock'
+import { H1, H2, H3 } from './components/Headings'
+import { TableOfContents } from './components/TableOfContents'
+import { ZoomableImage } from './components/ZoomableImage'
type Props = {
- params: { slug: string };
-};
+ params: { slug: string }
+}
export async function generateMetadata(
{ params }: Props,
parent: ResolvingMetadata,
): Promise {
- const { slug } = await params;
- const post = await getPost(slug);
+ const { slug } = await params
+ const post = await getPost(slug)
if (!post) {
return {
- title: "Post Not Found",
- };
+ title: 'Post Not Found',
+ }
}
const ogUrl = new URL(
`/api/og`,
- process.env.NODE_ENV === "production"
- ? "https://dokploy.com"
- : "http://localhost:3000",
- );
- ogUrl.searchParams.set("slug", slug);
+ process.env.NODE_ENV === 'production'
+ ? 'https://dokploy.com'
+ : 'http://localhost:3000',
+ )
+ ogUrl.searchParams.set('slug', slug)
return {
title: post.title,
@@ -49,7 +49,7 @@ export async function generateMetadata(
openGraph: {
title: post.title,
description: post.custom_excerpt || post.excerpt,
- type: "article",
+ type: 'article',
url: `${process.env.NEXT_PUBLIC_APP_URL}/blog/${post.slug}`,
images: [
{
@@ -61,66 +61,66 @@ export async function generateMetadata(
],
},
twitter: {
- card: "summary_large_image",
+ card: 'summary_large_image',
title: post.title,
description: post.custom_excerpt || post.excerpt,
images: [ogUrl.toString()],
},
- };
+ }
}
export default async function BlogPostPage({ params }: Props) {
- const { slug } = await params;
- const post = await getPost(slug);
- const allPosts = await getPosts();
+ const { slug } = await params
+ const post = await getPost(slug)
+ const allPosts = await getPosts()
- const relatedPosts = allPosts.filter((p) => p.id !== post?.id).slice(0, 3);
+ const relatedPosts = allPosts.filter((p) => p.id !== post?.id).slice(0, 3)
if (!post) {
- notFound();
+ notFound()
}
const cleanHtml = (html: string) => {
- if (typeof window !== "undefined") {
- const parser = new DOMParser();
- const doc = parser.parseFromString(html, "text/html");
+ if (typeof window !== 'undefined') {
+ const parser = new DOMParser()
+ const doc = parser.parseFromString(html, 'text/html')
const scripts = doc.querySelectorAll(
'script[type="application/ld+json"], script',
- );
- scripts.forEach((script) => script.remove());
- const unwantedElements = doc.querySelectorAll("style, meta, link");
- unwantedElements.forEach((el) => el.remove());
- return doc.body.innerHTML;
+ )
+ scripts.forEach((script) => script.remove())
+ const unwantedElements = doc.querySelectorAll('style, meta, link')
+ unwantedElements.forEach((el) => el.remove())
+ return doc.body.innerHTML
} else {
return html
.replace(
/]*type="application\/ld\+json"[^>]*>[\s\S]*?<\/script>/gi,
- "",
+ '',
)
- .replace(/]*>[\s\S]*?<\/script>/gi, "")
- .replace(/]*>[\s\S]*?<\/style>/gi, "")
- .replace(/]*>/gi, "")
- .replace(/]*>/gi, "");
+ .replace(/]*>[\s\S]*?<\/script>/gi, '')
+ .replace(/]*>[\s\S]*?<\/style>/gi, '')
+ .replace(/]*>/gi, '')
+ .replace(/]*>/gi, '')
}
- };
+ }
const turndownService = new TurndownService({
- headingStyle: "atx",
- codeBlockStyle: "fenced",
- });
- const gfm = turndownPluginGfm.gfm;
- const tables = turndownPluginGfm.tables;
- const strikethrough = turndownPluginGfm.strikethrough;
- turndownService.use([tables, strikethrough, gfm, remarkToc]);
+ headingStyle: 'atx',
+ codeBlockStyle: 'fenced',
+ })
+ const gfm = turndownPluginGfm.gfm
+ const tables = turndownPluginGfm.tables
+ const strikethrough = turndownPluginGfm.strikethrough
+ turndownService.use([tables, strikethrough, gfm, remarkToc])
- const cleanedHtml = cleanHtml(post.html);
- const markdown = turndownService.turndown(cleanedHtml);
+ const cleanedHtml = cleanHtml(post.html)
+ const markdown = turndownService.turndown(cleanedHtml)
- const formattedDate = new Date(post.published_at).toLocaleDateString("en", {
- year: "numeric",
- month: "long",
- day: "numeric",
- });
+ const formattedDate = new Date(post.published_at).toLocaleDateString('en', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ })
const components: Partial = {
h1: H1,
@@ -128,7 +128,7 @@ export default async function BlogPostPage({ params }: Props) {
h3: H3,
p: ({ node, children, ...props }) => (
-
-
+
- );
+ )
}
return (
+
+
+
- );
+ )
}
diff --git a/apps/website/app/blog/[slug]/components/Headings.tsx b/apps/website/app/blog/[slug]/components/Headings.tsx
index cc6ac6d..7385214 100644
--- a/apps/website/app/blog/[slug]/components/Headings.tsx
+++ b/apps/website/app/blog/[slug]/components/Headings.tsx
@@ -1,18 +1,18 @@
-"use client";
+'use client'
-import { useRouter } from "next/navigation";
-import type { DetailedHTMLProps, HTMLAttributes } from "react";
-import slugify from "slugify";
+import { useRouter } from 'next/navigation'
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import slugify from 'slugify'
type HeadingProps = DetailedHTMLProps<
HTMLAttributes
{nodes}
{children}
- );
+ )
}
export function H2({ children, ...props }: HeadingProps) {
- const router = useRouter();
- const id = slugify(children?.toString() || "", { lower: true, strict: true });
+ const router = useRouter()
+ const id = slugify(children?.toString() || '', {
+ lower: true,
+ strict: true,
+ })
const handleClick = () => {
- router.push(`#${id}`);
- };
+ router.push(`#${id}`)
+ }
return (
{children}
- );
+ )
}
export function H3({ children, ...props }: HeadingProps) {
- const router = useRouter();
- const id = slugify(children?.toString() || "", { lower: true, strict: true });
+ const router = useRouter()
+ const id = slugify(children?.toString() || '', {
+ lower: true,
+ strict: true,
+ })
const handleClick = () => {
- router.push(`#${id}`);
- };
+ router.push(`#${id}`)
+ }
return (
{children}
- );
+ )
}
diff --git a/apps/website/app/blog/[slug]/components/TableOfContents.tsx b/apps/website/app/blog/[slug]/components/TableOfContents.tsx
index 3bbaac3..099d3db 100644
--- a/apps/website/app/blog/[slug]/components/TableOfContents.tsx
+++ b/apps/website/app/blog/[slug]/components/TableOfContents.tsx
@@ -1,65 +1,67 @@
-"use client";
+'use client'
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'
interface Heading {
- id: string;
- text: string;
- level: number;
+ id: string
+ text: string
+ level: number
}
export function TableOfContents() {
- const [headings, setHeadings] = useState
{children}
@@ -137,7 +137,7 @@ export default async function BlogPostPage({ params }: Props) {
a: ({ node, href, ...props }) => (
(
),
ol: ({ node, ...props }) => (
),
li: ({ node, ...props }) => (
-
+
),
blockquote: ({ node, ...props }) => (
),
table: ({ node, ...props }) => (
-
+
),
thead: ({ node, ...props }) => (
-
+
),
tbody: ({ node, ...props }) => (
@@ -186,42 +186,46 @@ export default async function BlogPostPage({ params }: Props) {
),
img: ({ node, src, alt }) => (
+
{children}
- );
+ )
}
- const match = /language-(\w+)/.exec(className);
+ const match = /language-(\w+)/.exec(className)
return (