move integration guide

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 (
+    <>
+      <section className="px-3 [&_h3]:mb-3 [&_h3]:mt-8">
+        <h2 className="text-lg font-medium">Integration guide</h2>
+        <h3>First, install the zendo client</h3>
+        <CodeBlock language="bash">{`npm install zenblog`}</CodeBlock>
+
+        <h3>Next, store your blog id as an environment variable</h3>
+
+        <CodeBlock language="properties" title=".env">
+          {`BLOG_ID=${blogId}`}
+        </CodeBlock>
+
+        <p className="mt-2 flex items-center gap-2 rounded-md border border-yellow-300 bg-yellow-100 px-3 py-2 text-yellow-700">
+          <Info size={16} className="" />
+          Avoid making your blog id public. You should store it in a secure way.
+        </p>
+
+        <h3>Now, create a client with your blog id</h3>
+
+        <CodeBlock title="/lib/cms.ts">
+          {`import { createZenblogClient } from "zenblog";
+
+const cms = createZenblogClient({
+  blogId: process.env.BLOG_ID,
+});`}
+        </CodeBlock>
+
+        <h3>Use the client to fetch posts and render them on your website.</h3>
+        <CodeBlock title="/app/blog/page.tsx">
+          {`import { cms } from "../lib/cms";
+import Link from "next/link";
+
+const posts = await cms.posts.list();
+
+return <div>
+  {posts.map((post) => 
+    <Link 
+      href={"/blog/" + post.slug} 
+      key={post.slug}
+      >
+        {post.title}
+      </Link>
+    )}
+</div>`}
+        </CodeBlock>
+
+        <h3>That&apos;s it! 👏 Your blog page is ready.</h3>
+        <p>Next, you should learn how to render the posts content.</p>
+      </section>
+    </>
+  );
+}

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: {

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
                 </TabsTrigger>
               </TabsList>
-              <div className="flex items-center gap-2">
-                <Button asChild size="icon" variant={"ghost"}>
+              <div className="flex items-center">
+                <Dialog>
+                  <DialogTrigger>
+                    <Button variant="ghost">
+                      <CodeIcon />
+                      Integration
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent>
+                    <IntegrationGuide blogId={blogId} />
+                  </DialogContent>
+                </Dialog>
+                <Button asChild variant={"ghost"}>
                   <Link
                     href={`/blogs/${blog.id}/settings`}
-                    className="btn btn-icon"
                     title="Settings"
                     aria-label="Settings"
                   >
-                    <div className="sr-only">Settings</div>
                     <Settings size="24" />
+                    Settings
                   </Link>
                 </Button>
               </div>

apps/web/src/pages/blogs/[blogId]/settings.tsx

@@ -180,58 +180,6 @@ export default function BlogSettings() {
           </form>
         </section>
 
-        <section className="section p-3 [&_h3]:mb-3 [&_h3]:mt-8">
-          <h2 className="text-lg font-medium">Integration guide</h2>
-          <h3>First, install the zendo client</h3>
-          <CodeBlock language="bash">{`npm install zenblog`}</CodeBlock>
-
-          <h3>Next, store your blog id as an environment variable</h3>
-
-          <CodeBlock language="properties" title=".env">
-            {`BLOG_ID=${blog.id}`}
-          </CodeBlock>
-
-          <p className="mt-2 flex items-center gap-2 rounded-md border border-yellow-300 bg-yellow-100 px-3 py-2 text-yellow-700">
-            <Info size={16} className="" />
-            Avoid making your blog id public. You should store it in a secure
-            way.
-          </p>
-
-          <h3>Now, create a client with your blog id</h3>
-
-          <CodeBlock title="/lib/cms.ts">
-            {`import { createZenblogClient } from "zenblog";
-
-const cms = createZenblogClient({
-  blogId: process.env.BLOG_ID,
-});`}
-          </CodeBlock>
-
-          <h3>
-            Use the client to fetch posts and render them on your website.
-          </h3>
-          <CodeBlock title="/app/blog/page.tsx">
-            {`import { cms } from "../lib/cms";
-import Link from "next/link";
-
-const posts = await cms.posts.list();
-
-return <div>
-  {posts.map((post) => 
-    <Link 
-      href={"/blog/" + post.slug} 
-      key={post.slug}
-      >
-        {post.title}
-      </Link>
-    )}
-</div>`}
-          </CodeBlock>
-
-          <h3>That&apos;s it! 👏 Your blog page is ready.</h3>
-          <p>Next, you should learn how to render the posts content.</p>
-        </section>
-
         <section className="section mt-24 border border-red-500 !bg-red-50/30 p-3">
           <h2 className="mb-4 flex items-center gap-2 text-lg font-medium text-red-600">
             <AlertCircle size={24} className="text-red-600" />

todo/mvp.md

@@ -2,12 +2,15 @@
 
 ## Backlog
 
-- [] Removing tags doesnt work
-- [] Published_date
+- [x] Removing tags doesnt work
+- [x] Published_date
 - [] FAQ on homepage?
-- [] Update README
+- [x] Update README
 - [] Homepage use cases examples: personal blog, docs, careers page, product listing pages, help center, changelogs, directory websites, etc.
 - [] email provider
+- [] Integration guide tab
+- [] Slash commands in editor (like notion or craft)
+- [] Improve tag picker
 
 ## Pricing
 
@@ -29,12 +32,12 @@
 
 ## Tags
 
-- [] Delete tag
-- [] Update tag
+- [x] Delete tag
+- [x] Update tag
 
 ## Media
 
-- [] CRUD media from media tab in blog view
+- [x] CRUD media from media tab in blog view
 
 ## Docs
 
@@ -55,4 +58,5 @@
 
 - Prevent users from leaving the page when they have unsaved changes
 - Save posts/create in localstorage so its not lost when you reload the page goddammit
-- Apple pay
+- Apple pay?
+- Stripe link?