Merge pull request #2 from mist-go/improved-landing-page

Improved landing page

content/docs/get-started.mdx

@@ -1,7 +1,7 @@
 ---
 title: Get Started
 description: This guide will help you install the Mist CLI, understand its basic commands, and compile your first program.
-icon: Download
+icon: Rocket
 ---
 
 ## Installation

content/docs/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: Introduction
 description: What Mist is and the thinking behind it.
-icon: Rocket
+icon: Brain
 ---
 
 Mist is a systems programming language that compiles directly into Rust.

source.config.ts

@@ -1,10 +1,15 @@
-import { defineConfig, defineDocs } from 'fumadocs-mdx/config';
+import {
-import { metaSchema, pageSchema } from 'fumadocs-core/source/schema';
+  defineCollections,
+  defineConfig,
+  defineDocs,
+} from "fumadocs-mdx/config";
+import { metaSchema, pageSchema } from "fumadocs-core/source/schema";
+import { z } from "zod";
 
 // You can customize Zod schemas for frontmatter and `meta.json` here
 // see https://fumadocs.dev/docs/mdx/collections
 export const docs = defineDocs({
-  dir: 'content/docs',
+  dir: "content/docs",
   docs: {
     schema: pageSchema,
     postprocess: {
@@ -16,6 +21,16 @@ export const docs = defineDocs({
   },
 });
 
+export const blogPosts = defineCollections({
+  type: "doc",
+  dir: "content/blog",
+  // add required frontmatter properties
+  schema: pageSchema.extend({
+    author: z.string(),
+    date: z.string().date().or(z.date()),
+  }),
+});
+
 export default defineConfig({
   mdxOptions: {
     // MDX options

src/app/(home)/page.tsx

@@ -1,9 +1,12 @@
 "use client";
 
 import MorphCode from "@/components/Morph";
-import { NewspaperIcon, RocketIcon } from "lucide-react";
+import { ChevronsDownIcon, NewspaperIcon, RocketIcon } from "lucide-react";
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
+import { motion, Variants } from "framer-motion";
+
+const MotionLink = motion(Link);
 
 export const mistShowcase = [
   {
@@ -41,31 +44,87 @@ void process_data() {
     title: "Class and Type System",
     description:
       "Classes are syntactic sugar for Rust structs. Using 'extends' provides inheritance-style syntax over struct composition, compiling into the underlying Rust type system.",
-    code: `public class Entity {
+    code: `public struct PluginInfo {
-    u32 id;
+    public String name,
+    public String version,
 }
   
-// Compiles to struct composition in Rust
+public class PluginRegistry<T> {
-public struct Player extends Entity {
+    T plugins;
-    String username;
 
-    public constructor(u32 id, str* name) {
+    public constructor(T plugins) {
-        self.id = id;
+        self.plugins = plugins;
-        self.username = name.to_string();
+    }
+
+    public T plugins(self) {
+        return self.plugins;
     }
 }`,
   },
 
   {
-    title: "Explicit Mutability",
+    title: "Better Developer Experience",
     description:
-      "Mist maintains memory intent through explicit self pointers and mutability modifiers.",
+      "While Rust can already be a great DX, Mist implements concepts that are proven to improve structure.",
-    code: `public void update_id(self mut*, u32 new_id) {
+    code: `public class Logger {
-    self.id = new_id;
+    String prefix;
+
+    public constructor(str* prefix) {
+        self.prefix = prefix.to_string();
+    }
+
+    public void log(self*, LogLevel level, str* message) {
+        match(level) {
+            LogLevel::Info => {
+                println!("{level} {} {}", self.prefix, message);
+            }
+
+            LogLevel::Warning => {
+                println!("{level} {} {}", self.prefix, message);
+            }
+
+            LogLevel::Error => {
+                println!("{level} {} {}", self.prefix, message);
+            }
+        }
+    }
+
+    impl fmt::Display {
+        fmt::Result fmt(self*, std::fmt::Formatter<'_> mut* f) {
+            return write!(f, "logger ({})", self.prefix);
+        }
+    }
 }`,
   },
 ];
 
+const container: Variants = {
+  hidden: {},
+  show: {
+    transition: {
+      staggerChildren: 0.2,
+      delayChildren: 0.2,
+    },
+  },
+};
+
+const item: Variants = {
+  hidden: {
+    opacity: 0,
+    y: 12,
+    filter: "blur(10px)",
+  },
+  show: {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    transition: {
+      duration: 0.6,
+      ease: "easeOut" as const,
+    },
+  },
+};
+
 // Sub-component to handle individual section observation
 function ShowSection({
   show,
@@ -91,34 +150,49 @@ function ShowSection({
   }, [show.code, setActiveCode]);
 
   return (
-    <section
+    <motion.section
       ref={ref}
-      className="h-svh p-10 md:p-20 flex flex-col gap-2 items-center justify-center"
+      className="h-svh p-10 md:p-20 w-full flex flex-col items-center justify-center"
     >
-      <h1 className="text-5xl bg-linear-to-r from-fd-primary to-fd-muted-foreground bg-clip-text text-transparent h-13">
+      <motion.div
-        {show.title}
+        className="flex flex-col gap-2 items-center justify-center"
-      </h1>
+        variants={container}
-      <p className="text-xl text-zinc-400 text-center">{show.description}</p>
+        initial="hidden"
-      {show.cta && (
+        whileInView="show"
-        <div className="mt-3 lg:mt-1 flex gap-6">
+      >
-          <Link
+        <motion.h1
-            className="bg-fd-primary/15 text-fd-primary/90 p-3 px-4.5 rounded-xl cursor-pointer hover:bg-fd-primary/20 hover:text-fd-primary flex gap-2 items-center"
+          className="text-5xl bg-linear-to-r from-fd-primary to-fd-muted-foreground bg-clip-text text-transparent p-1"
-            href="/docs/get-started"
+          variants={item}
-          >
+        >
-            <RocketIcon className="w-5 h-5" />
+          {show.title}
-            Get Started
+        </motion.h1>
-          </Link>
 
-          <Link
+        <motion.p className="text-xl text-zinc-400 text-center" variants={item}>
-            className="bg-fd-card-foreground/13 text-fd-card-foreground/80 p-3 px-4.5 rounded-xl cursor-pointer hover:bg-fd-card-foreground/16 hover:text-fd-card-foreground/83 flex gap-2 items-center"
+          {show.description}
-            href="/blog"
+        </motion.p>
-          >
+        {show.cta && (
-            <NewspaperIcon className="w-5 h-5" />
+          <motion.div className="mt-3 lg:mt-1 flex gap-6">
-            View Blog
+            <MotionLink
-          </Link>
+              variants={item}
-        </div>
+              className="bg-fd-primary/15 text-fd-primary/90 p-3 px-4.5 rounded-xl cursor-pointer hover:bg-fd-primary/20 hover:text-fd-primary flex gap-2 items-center"
-      )}
+              href="/docs/get-started"
-    </section>
+            >
+              <RocketIcon className="w-5 h-5" />
+              Get Started
+            </MotionLink>
+
+            <MotionLink
+              variants={item}
+              className="bg-fd-card-foreground/13 text-fd-card-foreground/80 p-3 px-4.5 rounded-xl cursor-pointer hover:bg-fd-card-foreground/16 hover:text-fd-card-foreground/83 flex gap-2 items-center"
+              href="/blog"
+            >
+              <NewspaperIcon className="w-5 h-5" />
+              View Blog
+            </MotionLink>
+          </motion.div>
+        )}
+      </motion.div>
+    </motion.section>
   );
 }
 
@@ -126,17 +200,22 @@ export default function HomePage() {
   const [currentText, setCurrentText] = useState(mistShowcase[0]?.code || "");
 
   return (
-    <div className="flex w-full flex-col md:flex-row">
+    <div className="flex w-full flex-col xl:flex-row">
-      <div className="order-1 md:order-2 w-full md:w-[40vw] md:h-svh sticky top-20 md:top-0 flex items-center justify-center z-10 bg-background pb-4 md:pb-0">
+      <div className="flex fixed xl:top-0 xl:right-0 w-svw xl:w-[40vw] h-svh xl:items-center mt-10 justify-center z-50 pointer-events-none">
-        <div className="md:w-full md:pl-14 overflow-hidden">
+        <div className="xl:w-full overflow-hidden">
-          <div className="w-max h-auto border border-fd-border p-5 rounded-xl min-h-24 backdrop-blur bg-black/20">
+          <motion.div
+            className="w-max h-auto border border-fd-border p-5 rounded-xl min-h-24 backdrop-blur bg-black dark:bg-black/20"
+            variants={item}
+            initial="hidden"
+            animate="show"
+          >
             <MorphCode code={currentText} />
-          </div>
+          </motion.div>
         </div>
       </div>
 
-      <div className="flex-1 order-2 md:order-1">
+      <div className="flex-1">
-        <div className="-mt-30 md:mt-0">
+        <div className="mt-10 xl:mt-0">
           {mistShowcase.map((show) => (
             <ShowSection
               key={show.title}
@@ -146,6 +225,28 @@ export default function HomePage() {
           ))}
         </div>
       </div>
+      <div className="xl:w-[40vw]" />
+      {/* <div className="absolute left-1/2 bottom-1">
+        
+      </div> */}
+      <motion.div
+        initial={{ opacity: 0, y: -8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6 }}
+        className="absolute bottom-8 left-1/2 -translate-x-1/2"
+      >
+        <motion.div
+          animate={{ y: [0, 10, 0] }}
+          transition={{
+            duration: 1.5,
+            repeat: Infinity,
+            ease: "easeInOut",
+          }}
+          className="flex flex-col items-center gap-1 text-muted-foreground"
+        >
+          <ChevronsDownIcon className="h-6 w-6 text-fd-primary" strokeWidth={1.5} />
+        </motion.div>
+      </motion.div>
     </div>
   );
 }

src/app/blog/[slug]/page.tsx

@@ -0,0 +1,95 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+import { blog } from "@/lib/source";
+import { ChevronLeft, Calendar, User, Clock } from "lucide-react";
+import { calculateReadingTime } from "@/lib/utils/reading-time";
+
+export default async function Page(props: {
+  params: Promise<{ slug: string }>;
+}) {
+  const params = await props.params;
+  const page = blog.getPage([params.slug]);
+
+  if (!page) notFound();
+
+  const text = await page.data.getText("raw");
+
+  const Mdx = page.data.body;
+
+  const readingTime = calculateReadingTime(text);
+
+  return (
+    <main className="container max-w-4xl py-10 lg:py-16 mx-auto">
+      {/* Navigation & Breadcrumbs */}
+      <Link
+        href="/blog"
+        className="group mb-8 flex items-center text-sm font-medium text-fd-muted-foreground hover:text-fd-foreground transition-colors"
+      >
+        <ChevronLeft className="mr-1 h-4 w-4 transition-transform group-hover:-translate-x-1" />
+        Back to Blog
+      </Link>
+
+      {/* Header Section */}
+      <header className="mb-10 space-y-4">
+        <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl">
+          {page.data.title}
+        </h1>
+        <p className="text-xl text-fd-muted-foreground leading-relaxed">
+          {page.data.description}
+        </p>
+
+        <div className="flex flex-wrap items-center gap-6 pt-4 text-sm text-fd-muted-foreground border-b border-fd-border pb-8">
+          <div className="flex items-center gap-2">
+            <User className="h-4 w-4" />
+            <span className="font-medium text-fd-foreground">
+              {page.data.author}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Calendar className="h-4 w-4" />
+            <time dateTime={page.data.date.toString()}>
+              {new Date(page.data.date).toLocaleDateString("en-US", {
+                month: "long",
+                day: "numeric",
+                year: "numeric",
+              })}
+            </time>
+          </div>
+          <div className="flex items-center gap-2">
+            <Clock className="h-4 w-4" />
+            <span>{readingTime}</span>
+          </div>
+        </div>
+      </header>
+
+      {/* Content Layout */}
+      <div className="flex flex-col lg:flex-row gap-12">
+        <article className="prose prose-fd min-w-0 flex-1">
+          <Mdx components={{ ...defaultMdxComponents }} />
+        </article>
+
+        {/* Optional Sidebar (TOC or Newsletter) */}
+        {/* <aside className="hidden lg:block w-64 shrink-0">
+          <div className="sticky top-24 space-y-8">
+            <div className="rounded-lg border bg-fd-card p-6">
+              <h4 className="mb-2 font-semibold">Join the newsletter</h4>
+              <p className="text-xs text-fd-muted-foreground mb-4">
+                Get the latest updates directly in your inbox.
+              </p>
+              <button className="w-full bg-fd-primary text-fd-primary-foreground text-xs py-2 rounded-md font-medium">
+                Subscribe
+              </button>
+            </div>
+          </div>
+        </aside> */}
+      </div>
+    </main>
+  );
+}
+
+export function generateStaticParams(): { slug: string }[] {
+  return blog.getPages().map((page) => ({
+    slug: page.slugs[0],
+  }));
+}

src/app/blog/layout.tsx

@@ -0,0 +1,6 @@
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import { baseOptions } from "@/lib/layout.shared";
+
+export default function Layout({ children }: LayoutProps<"/">) {
+  return <HomeLayout {...baseOptions()}>{children}</HomeLayout>;
+}

src/app/blog/page.tsx

@@ -0,0 +1,59 @@
+import Link from "next/link";
+import { blog } from "@/lib/source";
+import { Calendar, ArrowRight } from "lucide-react";
+
+export default function Blog() {
+  // Sort posts by date (descending) so the newest is always first
+  const posts = [...blog.getPages()].sort(
+    (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime(),
+  );
+
+  return (
+    <main className="container max-w-5xl py-12 lg:py-20 mx-auto">
+      <div className="flex flex-col items-start gap-4 mb-12">
+        <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl">
+          Writing & Insights
+        </h1>
+        <p className="text-xl text-fd-muted-foreground">
+          Thoughts on software, design, and building for the web.
+        </p>
+      </div>
+
+      <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+        {posts.map((post) => (
+          <Link
+            key={post.url}
+            href={post.url}
+            className="group relative flex flex-col space-y-3 rounded-2xl border border-fd-border bg-fd-card p-5 transition-all hover:bg-fd-accent/50 hover:shadow-xl"
+          >
+            {/* Date Tag */}
+            <div className="flex items-center gap-2 text-xs font-medium text-fd-muted-foreground">
+              <Calendar className="h-3 w-3" />
+              {new Date(post.data.date).toLocaleDateString("en-US", {
+                month: "short",
+                day: "numeric",
+                year: "numeric",
+              })}
+            </div>
+
+            {/* Title & Description */}
+            <div className="flex-1">
+              <h2 className="text-xl font-bold leading-snug group-hover:text-fd-primary transition-colors">
+                {post.data.title}
+              </h2>
+              <p className="line-clamp-3 text-sm leading-relaxed text-fd-muted-foreground">
+                {post.data.description}
+              </p>
+            </div>
+
+            {/* "Read More" Footer */}
+            <div className="flex items-center text-sm font-semibold text-fd-primary">
+              Read Article
+              <ArrowRight className="ml-1 h-4 w-4 transition-transform group-hover:translate-x-1" />
+            </div>
+          </Link>
+        ))}
+      </div>
+    </main>
+  );
+}

src/lib/source.ts

@@ -1,7 +1,8 @@
-import { docs } from 'collections/server';
+import { blogPosts, docs } from "collections/server";
-import { loader } from 'fumadocs-core/source';
+import { loader } from "fumadocs-core/source";
-import { lucideIconsPlugin } from 'fumadocs-core/source/lucide-icons';
+import { lucideIconsPlugin } from "fumadocs-core/source/lucide-icons";
-import { docsContentRoute, docsImageRoute, docsRoute } from './shared';
+import { docsContentRoute, docsImageRoute, docsRoute } from "./shared";
+import { toFumadocsSource } from "fumadocs-mdx/runtime/server";
 
 // See https://fumadocs.dev/docs/headless/source-api for more info
 export const source = loader({
@@ -10,28 +11,33 @@ export const source = loader({
   plugins: [lucideIconsPlugin()],
 });
 
-export function getPageImage(page: (typeof source)['$inferPage']) {
+export function getPageImage(page: (typeof source)["$inferPage"]) {
-  const segments = [...page.slugs, 'image.png'];
+  const segments = [...page.slugs, "image.png"];
 
   return {
     segments,
-    url: `${docsImageRoute}/${segments.join('/')}`,
+    url: `${docsImageRoute}/${segments.join("/")}`,
   };
 }
 
-export function getPageMarkdownUrl(page: (typeof source)['$inferPage']) {
+export function getPageMarkdownUrl(page: (typeof source)["$inferPage"]) {
-  const segments = [...page.slugs, 'content.md'];
+  const segments = [...page.slugs, "content.md"];
 
   return {
     segments,
-    url: `${docsContentRoute}/${segments.join('/')}`,
+    url: `${docsContentRoute}/${segments.join("/")}`,
   };
 }
 
-export async function getLLMText(page: (typeof source)['$inferPage']) {
+export async function getLLMText(page: (typeof source)["$inferPage"]) {
-  const processed = await page.data.getText('processed');
+  const processed = await page.data.getText("processed");
 
   return `# ${page.data.title} (${page.url})
 
 ${processed}`;
 }
+
+export const blog = loader({
+  baseUrl: "/blog",
+  source: toFumadocsSource(blogPosts, []),
+});

src/lib/utils/reading-time.ts

@@ -0,0 +1,16 @@
+export function calculateReadingTime(content: string): string {
+  const WPM = 225; // Average adult reading speed
+
+  // 1. Strip HTML tags and Markdown syntax (simplified)
+  const plainText = content
+    .replace(/[#*`~_\[\]()]/g, "") // Remove common MD symbols
+    .replace(/<[^>]*>/g, ""); // Remove HTML tags
+
+  // 2. Count words
+  const words = plainText.trim().split(/\s+/).length;
+
+  // 3. Calculate minutes
+  const minutes = Math.ceil(words / WPM);
+
+  return `${minutes} min read`;
+}

src/lib/utils/variants.ts

@@ -0,0 +1,28 @@
+import { Variants } from "framer-motion";
+
+export const container: Variants = {
+  hidden: {},
+  show: {
+    transition: {
+      staggerChildren: 0.2,
+      delayChildren: 0.2,
+    },
+  },
+};
+
+export const item: Variants = {
+  hidden: {
+    opacity: 0,
+    y: 12,
+    filter: "blur(10px)",
+  },
+  show: {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    transition: {
+      duration: 0.6,
+      ease: "easeOut" as const,
+    },
+  },
+};