app/write/[id]/page.tsx

@@ -0,0 +1,3 @@
+export default function ViewBlogPage() {
+  // This will take a blog id as a parameter and fetch the blog from the database using the get_blog_by_id command.
+}

app/write/page.tsx

@@ -1,7 +1,31 @@
+"use client";
+
+import { invoke } from "@tauri-apps/api/core";
+import { Blog } from "@/types";
+import { useEffect, useState } from "react";
+import BlogCard from "@/components/blog-card";
+
 export default function ViewBlogPage() {
+  const [blogs, setBlogs] = useState<Blog[]>([]);
+
+  useEffect(() => {
+    const fetchBlogs = async () => {
+      return await invoke("get_blogs");
+    };
+
+    fetchBlogs().then((blogs) => {
+      console.log("Blogs:", blogs);
+      setBlogs(blogs as Blog[]);
+    });
+  }, []);
+
   return (
     <div className="flex flex-col p-2">
-      <h1>You can view blogs here...</h1>
+      <div className="grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 m-4">
+        {blogs.map((blog) => (
+          <BlogCard key={blog.id} blog={blog} />
+        ))}
+      </div>
     </div>
   );
 }

components/blog-card.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { Blog, HomelabApp } from "@/types";
+import { useEffect, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { useRouter } from "next/navigation";
+
+interface BlogCardProps {
+  blog: Blog & { linked_app_ids?: string[] };
+}
+
+export default function BlogCard({ blog }: BlogCardProps) {
+  const [referencedApps, setReferencedApps] = useState<HomelabApp[]>([]);
+  const appIds = blog.linked_app_ids;
+
+  const router = useRouter();
+
+  useEffect(() => {
+    if (appIds && appIds.length > 0) {
+      const fetchReferences = async () => {
+        try {
+          const apps = await invoke<HomelabApp[]>("get_apps_by_id", {
+            ids: appIds,
+          });
+          setReferencedApps(apps);
+        } catch (err) {
+          console.error("Failed to fetch referenced apps:", err);
+        }
+      };
+      fetchReferences();
+    }
+  }, [appIds]);
+
+  return (
+    <div
+      className="group flex flex-col justify-between p-6 border border-slate-200/80 rounded-2xl bg-gradient-to-b from-white to-slate-50/50 dark:from-slate-900 dark:to-slate-950 text-card-foreground shadow-sm hover:shadow-xl hover:-translate-y-1 hover:border-emerald-600/40 transition-all duration-300 h-64 relative overflow-hidden"
+      onClick={() => router.push(`/write/${blog.id}`)}
+    >
+      {/* Decorative background glow that triggers on hover */}
+      <div className="absolute -right-10 -top-10 w-24 h-24 bg-emerald-500/10 rounded-full blur-2xl group-hover:bg-emerald-500/20 transition-all duration-500" />
+
+      <div>
+        {/* Category / Meta indicator */}
+        <span className="text-[10px] font-bold tracking-wider uppercase text-emerald-700/80 dark:text-emerald-400 mb-1 block">
+          Homelab Log
+        </span>
+
+        {/* Title */}
+        <h3 className="text-xl font-bold tracking-tight line-clamp-1 mb-2 text-slate-800 dark:text-slate-100 group-hover:text-emerald-700 dark:group-hover:text-emerald-400 transition-colors duration-200">
+          {blog.title}
+        </h3>
+
+        {/* Truncated Tiptap HTML Content */}
+        <div
+          className="prose prose-sm dark:prose-invert line-clamp-3 text-slate-500 dark:text-slate-400 overflow-hidden max-w-none leading-relaxed"
+          dangerouslySetInnerHTML={{ __html: blog.content }}
+        />
+      </div>
+
+      {/* Footer / References */}
+      <div className="mt-4 pt-4 border-t border-slate-100 dark:border-slate-800/80 flex flex-wrap gap-2 items-center overflow-hidden max-h-12">
+        {!appIds || appIds.length === 0 ? (
+          <span className="text-xs text-slate-400 italic">
+            No linked applications
+          </span>
+        ) : (
+          referencedApps.map((app) => (
+            <span
+              key={app.id}
+              title={app.address}
+              className="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-semibold bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border border-emerald-500/20 hover:bg-emerald-500/20 transition-colors"
+            >
+              {/* App Avatar Placeholder (Uses first letter of app name) */}
+              <span className="w-4 h-4 rounded bg-emerald-700 text-white dark:bg-emerald-500 dark:text-slate-950 font-bold text-[9px] flex items-center justify-center mr-1.5 shadow-sm uppercase shrink-0">
+                {app.name.charAt(0)}
+              </span>
+              {app.name}
+            </span>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

src-tauri/src/db/mod.rs

@@ -137,3 +137,20 @@ pub fn save_blog(
         create_blog_db(conn, title, content, linked_app_ids)
     }
 }
+
+pub fn get_all_blogs(conn: &mut SqliteConnection) -> Vec<models::Blog> {
+    use crate::db::schema::blog;
+
+    blog::table
+        .load::<models::Blog>(conn)
+        .expect("Error loading apps")
+}
+
+pub fn get_apps_by_ids(conn: &mut SqliteConnection, ids: &[String]) -> Vec<models::App> {
+    use crate::db::schema::app;
+
+    app::table
+        .filter(app::id.eq_any(ids))
+        .load::<models::App>(conn)
+        .expect("Error loading apps by ids")
+}

src-tauri/src/lib.rs

@@ -74,6 +74,36 @@ async fn ping(address: &str) -> Result<bool, String> {
     }
 }
 
+#[derive(Debug, serde::Serialize, serde::Deserialize)]
+struct TempBlog {
+    id: String,
+    title: String,
+    content: String,
+    linked_app_ids: Option<Vec<String>>,
+}
+
+#[tauri::command]
+fn get_blogs() -> Vec<TempBlog> {
+    // I'll need to decode the linked_app_ids from a json encoded string to a Vec<String>.
+    let mut conn = establish_connection();
+    let encoded_blogs = db::get_all_blogs(&mut conn);
+    let mut decoded_blogs: Vec<TempBlog> = Vec::new();
+    encoded_blogs.iter().for_each(|blog| {
+        let linked_app_ids: Option<Vec<String>> = match &blog.reference {
+            Some(ids) => serde_json::from_str(ids).ok(),
+            None => None,
+        };
+        decoded_blogs.push(TempBlog {
+            id: blog.id.clone(),
+            title: blog.title.clone(),
+            content: blog.content.clone(),
+            linked_app_ids,
+        });
+    });
+
+    decoded_blogs
+}
+
 #[tauri::command]
 fn save_blog(
     id: Option<&str>,
@@ -85,6 +115,12 @@ fn save_blog(
     db::save_blog(&mut conn, id, title, content, linked_app_ids.as_deref())
 }
 
+#[tauri::command]
+fn get_apps_by_id(ids: Vec<String>) -> Vec<App> {
+    let mut conn = establish_connection();
+    db::get_apps_by_ids(&mut conn, &ids)
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
@@ -94,7 +130,9 @@ pub fn run() {
             get_app,
             delete_apps,
             ping,
-            save_blog
+            get_blogs,
+            save_blog,
+            get_apps_by_id
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

types.d.ts

@@ -6,6 +6,13 @@ export interface HomelabApp {
   ssh_address: string | null;
 }
 
+export interface Blog {
+  id: string;
+  title: string;
+  content: string;
+  reference: String[]; // list of app ids
+}
+
 // Defines the custom attributes Tiptap will store in the DOM/JSON schema
 export interface AppMentionAttributes {
   id: string;