From 98698a126c85f25efe71ed70ceff93294187ab34 Mon Sep 17 00:00:00 2001
From: Jordi Enric <jordi.err@gmail.com>
Date: Sat, 18 May 2024 20:21:17 +0200
Subject: [PATCH] ui

---
 .../src/components/Images/ImageUploader.tsx   | 11 ++++++
 apps/web/src/pages/index.tsx                  | 36 +++++++------------
 todo/mvp.md                                   |  5 ++-
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/components/Images/ImageUploader.tsx b/apps/web/src/components/Images/ImageUploader.tsx
index 6610245..1b228a0 100644
--- a/apps/web/src/components/Images/ImageUploader.tsx
+++ b/apps/web/src/components/Images/ImageUploader.tsx
@@ -174,6 +174,17 @@ export const ImageUploader = ({
             {imageInfo && (
               <div className="flex w-full justify-between">
                 <div className="flex items-center gap-2 text-xs">
+                  <input
+                    type="text"
+                    name="filename"
+                    id="filename"
+                    value={
+                      image.name.length > 20
+                        ? `${image.name.slice(0, 20)}...`
+                        : image.name
+                    }
+                    className="bg-transparent text-slate-500"
+                  />
                   <span className=" text-slate-500">{`${imageInfo.height}x${imageInfo.width}px`}</span>
                   <span className=" text-slate-500">{imageInfo.size}</span>
                 </div>
diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx
index 0327631..22cccac 100644
--- a/apps/web/src/pages/index.tsx
+++ b/apps/web/src/pages/index.tsx
@@ -20,12 +20,8 @@ import {
 } from "@/components/ui/carousel";
 import Image from "next/image";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { Instrument_Serif } from "next/font/google";
-
-const serif = Instrument_Serif({
-  weight: ["400"],
-  subsets: ["latin"],
-});
+import { ZendoEditor } from "@/components/Editor/ZendoEditor";
+import { toast } from "sonner";
 
 const Home = () => {
   const user = useUser();
@@ -60,9 +56,9 @@ const Home = () => {
         <meta name="description" content="Open source blogging cms" />
         <link rel="icon" href="/static/favicon.ico" />
       </Head>
-      <div className="bg-zinc-50">
-        <div className="mx-auto flex max-w-3xl flex-col">
-          <nav className="flex items-center justify-between p-5">
+      <div className="bg-white">
+        <div className="flex flex-col">
+          <nav className="mx-auto flex w-full max-w-3xl items-center justify-between p-5">
             <div className="flex-grow cursor-default">
               <ZendoLogo />
             </div>
@@ -116,30 +112,24 @@ const Home = () => {
           </nav>
 
           <main className="px-4 pb-24 font-sans">
-            <div className="mx-auto mt-12">
+            <div className="mx-auto  mt-12 max-w-3xl text-center">
               <div className="">
                 <Link
-                  className="group inline-flex items-center gap-1 rounded-lg   bg-zinc-200/70 px-3 py-1 font-mono text-xs font-medium text-zinc-700 transition-all "
+                  className="group inline-flex items-center gap-1 rounded-lg bg-zinc-200/70 px-3 py-1 font-mono text-xs font-medium text-zinc-700 transition-all "
                   target="_blank"
                   href="https://git.new/zenblog"
                 >
                   Star us on GitHub
                 </Link>
               </div>
-              <h1
-                className={
-                  "mt-4 text-3xl font-medium tracking-tight md:text-4xl " +
-                  serif.className
-                }
-              >
-                think, write & publish.
+              <h1 className={"mt-4 text-3xl font-semibold md:text-4xl "}>
+                A tiny blogging CMS
               </h1>
               <div className="text-lg font-light leading-8 text-zinc-600">
-                <p className="mt-8 max-w-sm">
-                  Zenblog is a headless CMS for blogging. It was built with
-                  developers and writers in mind. It allows you to fetch your
-                  content easily and is fully typesafe. The UI is minimal and
-                  clean. It&apos;s open source. Hosts images for you.
+                <p className="mx-auto mt-3 max-w-sm">
+                  Simple, fast, and open-source blogging.
+                  <br />
+                  Built for devs and writers.
                 </p>
                 <Dialog>
                   <DialogTrigger className="mt-4 h-9 rounded-xl bg-black px-5 text-sm font-medium text-white shadow-lg ring-black transition-all hover:-translate-y-[2px] hover:shadow-xl ">
diff --git a/todo/mvp.md b/todo/mvp.md
index b486663..9406031 100644
--- a/todo/mvp.md
+++ b/todo/mvp.md
@@ -21,17 +21,16 @@
 
 - Integration guide
   - [x] instruct users to keep the id private.
-  - [] create a different column for the connection string (so it can be rotated without breaking the blog)
+  - [] create a different column for the connection string (so it can be rotated without breaking the blog) (or use slug?)
   - [] allow users to rotate the connection string
   - [] Recommend users to cache content
 
 ## Analytics
 
-- [] create tinybird endpoint to get all views for a blog
+- [x] create tinybird endpoint to get all views for a blog
 
 ## Posts
 
-- [] When uploading an image, it would be nice if you could rename it before uploading.
 - [x] See "published at" and "updated at" dates in post list
 - [x] change published date in post settings
 - [] pagination