Prettier format pending files

2025-09-30 00:04:20 +00:00 · 2025-09-30 00:04:20 +00:00 · 3d3b12aa7f
commit 3d3b12aa7f
parent c911ddb284
5 changed files with 218 additions and 43 deletions
--- a/client/pages/Admin.tsx
+++ b/client/pages/Admin.tsx
@ -133,13 +133,24 @@ export default function Admin() {

  const savePost = async (idx: number) => {
    const p = blogPosts[idx];
-    const payload = { ...p, slug: (p.slug || p.title || "").toLowerCase().trim().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-") };
+    const payload = {
+      ...p,
+      slug: (p.slug || p.title || "")
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9\s-]/g, "")
+        .replace(/\s+/g, "-"),
+    };
    const res = await fetch("/api/blog", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
-    if (!res.ok) return aethexToast.error({ title: "Save failed", description: await res.text().catch(() => "") });
+    if (!res.ok)
+      return aethexToast.error({
+        title: "Save failed",
+        description: await res.text().catch(() => ""),
+      });
    const saved = await res.json();
    const next = blogPosts.slice();
    next[idx] = saved;
@ -149,8 +160,14 @@ export default function Admin() {

  const deletePost = async (idx: number) => {
    const p = blogPosts[idx];
-    const res = await fetch(`/api/blog/${encodeURIComponent(p.slug)}`, { method: "DELETE" });
-    if (!res.ok) return aethexToast.error({ title: "Delete failed", description: await res.text().catch(() => "") });
+    const res = await fetch(`/api/blog/${encodeURIComponent(p.slug)}`, {
+      method: "DELETE",
+    });
+    if (!res.ok)
+      return aethexToast.error({
+        title: "Delete failed",
+        description: await res.text().catch(() => ""),
+      });
    setBlogPosts(blogPosts.filter((_, i) => i !== idx));
    aethexToast.info({ title: "Deleted", description: p.title });
  };
@ -240,7 +257,9 @@ export default function Admin() {
                  <PenTool className="h-5 w-5 text-aethex-400" />
                  <CardTitle className="text-lg">Blog Posts</CardTitle>
                </div>
-                <CardDescription>Manage blog content stored in Supabase</CardDescription>
+                <CardDescription>
+                  Manage blog content stored in Supabase
+                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex justify-between">
@ -263,36 +282,135 @@ export default function Admin() {
                  </Button>
                  <Button
                    size="sm"
-                    onClick={() => setBlogPosts([{ title: "New Post", slug: "new-post", category: "General" }, ...blogPosts])}
+                    onClick={() =>
+                      setBlogPosts([
+                        {
+                          title: "New Post",
+                          slug: "new-post",
+                          category: "General",
+                        },
+                        ...blogPosts,
+                      ])
+                    }
                  >
                    Add Post
                  </Button>
                </div>

                {blogPosts.map((p, i) => (
-                  <div key={p.id || p.slug || i} className="p-3 rounded border border-border/40 space-y-2">
+                  <div
+                    key={p.id || p.slug || i}
+                    className="p-3 rounded border border-border/40 space-y-2"
+                  >
                    <div className="grid md:grid-cols-2 gap-2">
-                      <input className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm" placeholder="Title" value={p.title || ""} onChange={(e) => {
-                        const next = blogPosts.slice(); next[i] = { ...next[i], title: e.target.value }; setBlogPosts(next);
-                      }} />
-                      <input className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm" placeholder="Slug" value={p.slug || ""} onChange={(e) => {
-                        const next = blogPosts.slice(); next[i] = { ...next[i], slug: e.target.value }; setBlogPosts(next);
-                      }} />
+                      <input
+                        className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                        placeholder="Title"
+                        value={p.title || ""}
+                        onChange={(e) => {
+                          const next = blogPosts.slice();
+                          next[i] = { ...next[i], title: e.target.value };
+                          setBlogPosts(next);
+                        }}
+                      />
+                      <input
+                        className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                        placeholder="Slug"
+                        value={p.slug || ""}
+                        onChange={(e) => {
+                          const next = blogPosts.slice();
+                          next[i] = { ...next[i], slug: e.target.value };
+                          setBlogPosts(next);
+                        }}
+                      />
                    </div>
                    <div className="grid md:grid-cols-2 gap-2">
-                      <input className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm" placeholder="Author" value={p.author || ""} onChange={(e) => { const n = blogPosts.slice(); n[i] = { ...n[i], author: e.target.value }; setBlogPosts(n); }} />
-                      <input className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm" placeholder="Date" value={p.date || ""} onChange={(e) => { const n = blogPosts.slice(); n[i] = { ...n[i], date: e.target.value }; setBlogPosts(n); }} />
+                      <input
+                        className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                        placeholder="Author"
+                        value={p.author || ""}
+                        onChange={(e) => {
+                          const n = blogPosts.slice();
+                          n[i] = { ...n[i], author: e.target.value };
+                          setBlogPosts(n);
+                        }}
+                      />
+                      <input
+                        className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                        placeholder="Date"
+                        value={p.date || ""}
+                        onChange={(e) => {
+                          const n = blogPosts.slice();
+                          n[i] = { ...n[i], date: e.target.value };
+                          setBlogPosts(n);
+                        }}
+                      />
                    </div>
                    <div className="grid md:grid-cols-3 gap-2">
-                      <input className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm" placeholder="Read time (e.g., 8 min read)" value={p.read_time || ""} onChange={(e) => { const n = blogPosts.slice(); n[i] = { ...n[i], read_time: e.target.value }; setBlogPosts(n); }} />
-                      <input className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm" placeholder="Category" value={p.category || ""} onChange={(e) => { const n = blogPosts.slice(); n[i] = { ...n[i], category: e.target.value }; setBlogPosts(n); }} />
-                      <input className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm" placeholder="Image URL" value={p.image || ""} onChange={(e) => { const n = blogPosts.slice(); n[i] = { ...n[i], image: e.target.value }; setBlogPosts(n); }} />
+                      <input
+                        className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                        placeholder="Read time (e.g., 8 min read)"
+                        value={p.read_time || ""}
+                        onChange={(e) => {
+                          const n = blogPosts.slice();
+                          n[i] = { ...n[i], read_time: e.target.value };
+                          setBlogPosts(n);
+                        }}
+                      />
+                      <input
+                        className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                        placeholder="Category"
+                        value={p.category || ""}
+                        onChange={(e) => {
+                          const n = blogPosts.slice();
+                          n[i] = { ...n[i], category: e.target.value };
+                          setBlogPosts(n);
+                        }}
+                      />
+                      <input
+                        className="bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                        placeholder="Image URL"
+                        value={p.image || ""}
+                        onChange={(e) => {
+                          const n = blogPosts.slice();
+                          n[i] = { ...n[i], image: e.target.value };
+                          setBlogPosts(n);
+                        }}
+                      />
                    </div>
-                    <textarea className="w-full bg-background/50 border border-border/40 rounded px-2 py-1 text-sm" rows={2} placeholder="Excerpt" value={p.excerpt || ""} onChange={(e) => { const n = blogPosts.slice(); n[i] = { ...n[i], excerpt: e.target.value }; setBlogPosts(n); }} />
-                    <textarea className="w-full bg-background/50 border border-border/40 rounded px-2 py-1 text-sm" rows={6} placeholder="Body HTML" value={p.body_html || ""} onChange={(e) => { const n = blogPosts.slice(); n[i] = { ...n[i], body_html: e.target.value }; setBlogPosts(n); }} />
+                    <textarea
+                      className="w-full bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                      rows={2}
+                      placeholder="Excerpt"
+                      value={p.excerpt || ""}
+                      onChange={(e) => {
+                        const n = blogPosts.slice();
+                        n[i] = { ...n[i], excerpt: e.target.value };
+                        setBlogPosts(n);
+                      }}
+                    />
+                    <textarea
+                      className="w-full bg-background/50 border border-border/40 rounded px-2 py-1 text-sm"
+                      rows={6}
+                      placeholder="Body HTML"
+                      value={p.body_html || ""}
+                      onChange={(e) => {
+                        const n = blogPosts.slice();
+                        n[i] = { ...n[i], body_html: e.target.value };
+                        setBlogPosts(n);
+                      }}
+                    />
                    <div className="flex justify-end gap-2">
-                      <Button size="sm" variant="outline" onClick={() => deletePost(i)}>Delete</Button>
-                      <Button size="sm" onClick={() => savePost(i)}>Save</Button>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => deletePost(i)}
+                      >
+                        Delete
+                      </Button>
+                      <Button size="sm" onClick={() => savePost(i)}>
+                        Save
+                      </Button>
                    </div>
                  </div>
                ))}
--- a/client/pages/Blog.tsx
+++ b/client/pages/Blog.tsx
@ -69,7 +69,9 @@ export default function Blog() {
        }
      }
    })();
-    return () => { cancelled = true; };
+    return () => {
+      cancelled = true;
+    };
  }, []);

  const categories = [
@ -80,7 +82,6 @@ export default function Blog() {
    { id: "company", name: "Company News", count: 7 },
  ];

-
  const postsStatic = [
    {
      title: "Building Scalable Game Architecture with Microservices",
@ -158,10 +159,12 @@ export default function Blog() {

  const filteredPosts =
    selectedCategory === "all"
-      ? (posts.length ? posts : postsStatic)
+      ? posts.length
+        ? posts
+        : postsStatic
      : (posts.length ? posts : postsStatic).filter(
-        (post) => (post.category || "").toLowerCase() === selectedCategory,
-      );
+          (post) => (post.category || "").toLowerCase() === selectedCategory,
+        );

  if (isLoading) {
    return (
@ -288,7 +291,9 @@ export default function Blog() {

                  <div className="flex items-center justify-between">
                    <Button asChild>
-                      <Link to={`/blog/${(featuredPost?.slug || "").toString()}`}>
+                      <Link
+                        to={`/blog/${(featuredPost?.slug || "").toString()}`}
+                      >
                        Read Article
                        <ArrowRight className="h-4 w-4 ml-2" />
                      </Link>
--- a/client/pages/BlogPost.tsx
+++ b/client/pages/BlogPost.tsx
@ -1,7 +1,13 @@
 import { useEffect, useState } from "react";
 import { useParams, Link } from "react-router-dom";
 import Layout from "@/components/Layout";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { User, Calendar } from "lucide-react";
 import NotFound from "./NotFound";
@ -25,7 +31,9 @@ export default function BlogPost() {
        if (!cancelled) setLoading(false);
      }
    })();
-    return () => { cancelled = true; };
+    return () => {
+      cancelled = true;
+    };
  }, [slug]);

  if (loading) return null;
@ -37,15 +45,23 @@ export default function BlogPost() {
        <div className="container mx-auto px-4 max-w-3xl">
          <Card className="overflow-hidden border-border/50 animate-scale-in">
            {post.image && (
-              <img src={post.image} alt={post.title} className="w-full h-64 object-cover" />
+              <img
+                src={post.image}
+                alt={post.title}
+                className="w-full h-64 object-cover"
+              />
            )}
            <CardHeader>
              {post.category && (
-                <Badge className="mb-4 bg-gradient-to-r from-aethex-500 to-neon-blue">{post.category}</Badge>
+                <Badge className="mb-4 bg-gradient-to-r from-aethex-500 to-neon-blue">
+                  {post.category}
+                </Badge>
              )}
              <CardTitle className="text-3xl mt-2">{post.title}</CardTitle>
              {post.excerpt && (
-                <CardDescription className="text-muted-foreground mt-2">{post.excerpt}</CardDescription>
+                <CardDescription className="text-muted-foreground mt-2">
+                  {post.excerpt}
+                </CardDescription>
              )}
              <div className="flex items-center gap-4 mt-4 text-sm text-muted-foreground">
                {post.author && (
@ -67,7 +83,9 @@ export default function BlogPost() {
                <p>{post.excerpt}</p>
              )}
              <div className="pt-6">
-                <Link to="/blog" className="text-aethex-400 underline">Back to Blog</Link>
+                <Link to="/blog" className="text-aethex-400 underline">
+                  Back to Blog
+                </Link>
              </div>
            </CardContent>
          </Card>
--- a/public/404.html
+++ b/public/404.html
@ -6,24 +6,54 @@
    <title>Page Not Found</title>
    <meta http-equiv="refresh" content="0; url=/404" />
    <style>
-      body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: #0b0b10; color: #e5e7eb; display:flex; align-items:center; justify-content:center; min-height:100vh; margin:0; }
-      a { color: #7c3aed; }
-      .wrap { text-align:center; padding: 2rem; }
+      body {
+        font-family:
+          system-ui,
+          -apple-system,
+          Segoe UI,
+          Roboto,
+          Ubuntu,
+          Cantarell,
+          Noto Sans,
+          Helvetica,
+          Arial,
+          "Apple Color Emoji",
+          "Segoe UI Emoji";
+        background: #0b0b10;
+        color: #e5e7eb;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        margin: 0;
+      }
+      a {
+        color: #7c3aed;
+      }
+      .wrap {
+        text-align: center;
+        padding: 2rem;
+      }
    </style>
    <script>
-      (function(){
+      (function () {
        try {
          if (window && window.location) {
-            window.location.replace('/404');
+            window.location.replace("/404");
          }
-        } catch(e) { /* noop */ }
+        } catch (e) {
+          /* noop */
+        }
      })();
    </script>
  </head>
  <body>
    <div class="wrap">
      <h1>Page not found</h1>
-      <p>Redirecting to the site 404 page… If you are not redirected, <a href="/404">click here</a>.</p>
+      <p>
+        Redirecting to the site 404 page… If you are not redirected,
+        <a href="/404">click here</a>.
+      </p>
    </div>
  </body>
 </html>
--- a/server/index.ts
+++ b/server/index.ts
@ -268,7 +268,9 @@ export function createServer() {
      try {
        let query = adminSupabase
          .from("blog_posts")
-          .select("id, slug, title, excerpt, author, date, read_time, category, image, likes, comments, published_at")
+          .select(
+            "id, slug, title, excerpt, author, date, read_time, category, image, likes, comments, published_at",
+          )
          .order("published_at", { ascending: false, nullsLast: true } as any)
          .limit(limit);
        if (category) query = query.eq("category", category);
@ -286,7 +288,9 @@ export function createServer() {
      try {
        const { data, error } = await adminSupabase
          .from("blog_posts")
-          .select("id, slug, title, excerpt, author, date, read_time, category, image, body_html, published_at")
+          .select(
+            "id, slug, title, excerpt, author, date, read_time, category, image, body_html, published_at",
+          )
          .eq("slug", slug)
          .single();
        if (error) return res.status(404).json({ error: error.message });