diff --git a/apps/web/src/components/integration-guide.tsx b/apps/web/src/components/integration-guide.tsx
new file mode 100644
index 0000000..2b43f7d
--- /dev/null
+++ b/apps/web/src/components/integration-guide.tsx
@@ -0,0 +1,57 @@
+import { Info } from "lucide-react";
+import { CodeBlock } from "./CodeBlock";
+
+export function IntegrationGuide({ blogId }: { blogId: string }) {
+ return (
+ <>
+
+ Integration guide
+ First, install the zendo client
+ {`npm install zenblog`}
+
+ Next, store your blog id as an environment variable
+
+
+ {`BLOG_ID=${blogId}`}
+
+
+
+
+ Avoid making your blog id public. You should store it in a secure way.
+
+
+ Now, create a client with your blog id
+
+
+ {`import { createZenblogClient } from "zenblog";
+
+const cms = createZenblogClient({
+ blogId: process.env.BLOG_ID,
+});`}
+
+
+ Use the client to fetch posts and render them on your website.
+
+ {`import { cms } from "../lib/cms";
+import Link from "next/link";
+
+const posts = await cms.posts.list();
+
+return
+ {posts.map((post) =>
+
+ {post.title}
+
+ )}
+
`}
+
+
+ That's it! 👏 Your blog page is ready.
+ Next, you should learn how to render the posts content.
+
+
+ );
+}
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index ee71d9b..e4e2d7b 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -14,11 +14,11 @@ const buttonVariants = cva(
destructive:
"bg-red-500 text-zinc-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
outline:
- "border border-b-2 border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
+ "border border-b-2 border-zinc-200 bg-white hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 text-zinc-600 dark:hover:text-zinc-50",
secondary:
- "bg-zinc-100 text-zinc-700 hover:bg-orange-100/70 hover:text-orange-600 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80",
+ "bg-zinc-100 hover:bg-orange-100/70 hover:text-orange-600 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80 text-zinc-600",
ghost:
- "hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
+ "hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 text-zinc-600",
link: "text-zinc-800 underline-offset-4 hover:underline dark:text-zinc-50",
},
size: {
diff --git a/apps/web/src/pages/blogs/[blogId]/posts.tsx b/apps/web/src/pages/blogs/[blogId]/posts.tsx
index 609a1f2..07b1b30 100644
--- a/apps/web/src/pages/blogs/[blogId]/posts.tsx
+++ b/apps/web/src/pages/blogs/[blogId]/posts.tsx
@@ -5,6 +5,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
+ CodeIcon,
ImageOff,
MoreVertical,
Pen,
@@ -47,6 +48,7 @@ import { ImageUploader } from "@/components/Images/ImageUploader";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { usePostViewsQuery } from "@/queries/analytics";
import { on } from "events";
+import { IntegrationGuide } from "@/components/integration-guide";
export function StatePill({ published }: { published: boolean }) {
const text = published ? "Published" : "Draft";
@@ -150,16 +152,26 @@ export default function BlogPosts() {
Tags
-
-