From efbbdfece5f2a8d6d03fc36c09dd86d8f91fca80 Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 00:35:05 +0200 Subject: [PATCH 01/18] updated github repo --- src/lib/shared.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/lib/shared.ts b/src/lib/shared.ts index 812926e..5b1fca5 100644 --- a/src/lib/shared.ts +++ b/src/lib/shared.ts @@ -3,9 +3,8 @@ export const docsRoute = '/docs'; export const docsImageRoute = '/og/docs'; export const docsContentRoute = '/llms.mdx/docs'; -// fill this with your actual GitHub info, for example: export const gitConfig = { - user: 'fuma-nama', - repo: 'fumadocs', - branch: 'main', + user: 'mist-go', + repo: 'mist', + branch: 'master', }; From f89c8adf0b7e4cefc196550f58efa90a7eb0c9ff Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 00:54:43 +0200 Subject: [PATCH 02/18] Improved theme --- src/app/global.css | 41 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/src/app/global.css b/src/app/global.css index 280be4e..45a7e58 100644 --- a/src/app/global.css +++ b/src/app/global.css @@ -1,7 +1,46 @@ @import 'tailwindcss'; -@import 'fumadocs-ui/css/ruby.css'; +@import 'fumadocs-ui/css/lib/default-colors.css'; @import 'fumadocs-ui/css/preset.css'; +@theme { + --color-fd-background: hsl(75, 45%, 96%); + --color-fd-foreground: hsl(75, 35%, 18%); + --color-fd-primary: hsl(80, 60%, 40%); + --color-fd-primary-foreground: hsl(80, 100%, 16%); + --color-fd-border: hsla(80, 35%, 70%, 0.5); + --color-fd-ring: hsl(80, 60%, 40%); + --color-fd-accent: hsl(75, 50%, 90%); + --color-fd-accent-foreground: hsl(80, 60%, 22%); + --color-fd-muted: hsl(75, 40%, 92%); + --color-fd-muted-foreground: hsl(75, 25%, 45%); + --color-fd-secondary: hsl(80, 45%, 88%); + --color-fd-secondary-foreground: hsl(80, 50%, 18%); + --color-fd-card: hsl(75, 45%, 94%); + --color-fd-card-foreground: hsl(75, 35%, 18%); + --color-fd-popover: hsl(75, 45%, 97%); + --color-fd-popover-foreground: hsl(75, 35%, 18%); +} + +.dark { + --color-fd-background: hsl(0, 0%, 2%); + --color-fd-foreground: hsl(75, 35%, 88%); + --color-fd-primary: hsl(80, 60%, 55%); + --color-fd-primary-foreground: hsl(0, 0%, 9%); + --color-fd-border: hsl(0, 0%, 50%, 0.2); + --color-fd-ring: hsl(80, 60%, 55%); + --color-fd-accent: hsl(0, 0%, 15%); + --color-fd-accent-foreground: hsl(80, 60%, 75%); + --color-fd-muted: hsl(0, 0%, 8%); + --color-fd-muted-foreground: hsl(0, 0%, 60%); + --color-fd-secondary: hsl(0, 0%, 12.9%); + --color-fd-secondary-foreground: hsl(0, 0%, 98%); + --color-fd-card: hsl(0, 0%, 4%); + --color-fd-card-foreground: hsl(0, 0%, 98%); + --color-fd-popover: hsl(0, 0%, 4%); + --color-fd-popover-foreground: hsl(0, 0%, 98%); +} + + html { scrollbar-gutter: stable; } From 98a9d72c45a4cef9aaefa2944817178692b333cc Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 02:17:23 +0200 Subject: [PATCH 03/18] Intro --- content/docs/index.mdx | 48 ++++++++++++++++++++++++++++++++++++------ content/docs/test.mdx | 17 --------------- 2 files changed, 42 insertions(+), 23 deletions(-) delete mode 100644 content/docs/test.mdx diff --git a/content/docs/index.mdx b/content/docs/index.mdx index 1ede18e..79bb2f1 100644 --- a/content/docs/index.mdx +++ b/content/docs/index.mdx @@ -1,13 +1,49 @@ --- -title: Hello World -description: Your first document +title: Introduction +description: What Mist is and the thinking behind it. +icon: Rocket --- -Welcome to the docs! You can start writing documents in `/content/docs`. +# Introduction -## What is Next? +Mist is a systems programming language that compiles directly into Rust. + +It exists to make Rust-based development feel more direct and less mentally heavy, while preserving Rust’s performance model and ecosystem. + +Mist does not replace Rust. It is another way of writing Rust-compatible systems code with a more ergonomic surface layer. + +--- + +## Philosophy + +Mist is built around making systems programming feel calm, predictable, and easy to reason about. + +When working close to the system, developers constantly manage performance, correctness, and structure at the same time. As projects grow, this can create mental friction — not because the system is unclear, but because expressing it can feel heavy. + +Mist focuses on reducing that friction in how code is written and read, so attention stays on the problem being solved rather than the mechanics of expression. + +The language is shaped around clarity and flow: code should feel direct to write, and easy to understand when revisited. + +--- + +## What Mist Is + +Mist is a Rust-compatible systems language with a compiled-to-Rust design. + +This means: + +- It integrates directly with the Rust ecosystem +- It compiles into idiomatic Rust code +- It preserves Rust’s performance characteristics +- It has no runtime or garbage collector +- It is designed to stay predictable and close to the metal + +Mist provides a more ergonomic way of authoring systems code while remaining fully grounded in Rust’s type system and execution model. + +It is especially designed for readability and structure in larger codebases, where Rust’s guarantees remain important but expression overhead becomes noticeable. + +--- - - + diff --git a/content/docs/test.mdx b/content/docs/test.mdx deleted file mode 100644 index f475f4a..0000000 --- a/content/docs/test.mdx +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Components -description: Components ---- - -## Code Block - -```js -console.log('Hello World'); -``` - -## Cards - - - - - From ad209b8d0abfcb569f8f4d7422d0c9e5c8d73447 Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 02:40:48 +0200 Subject: [PATCH 04/18] Get started --- content/docs/get-started.mdx | 66 ++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 content/docs/get-started.mdx diff --git a/content/docs/get-started.mdx b/content/docs/get-started.mdx new file mode 100644 index 0000000..d244c1d --- /dev/null +++ b/content/docs/get-started.mdx @@ -0,0 +1,66 @@ +--- +title: Get Started +description: Install Mist and run your first program. +icon: Download +--- + +# Get Started + +This guide will help you install the Mist CLI, understand its basic commands, and compile your first program. + +## Installation + +Mist is distributed through Cargo. + +Install the Mist compiler using: + +```bash title="Terminal" +cargo install mist-lang@0.0.1-alpha2 +``` + +Verify using + +```bash title="Terminal" +mist version +``` + +## Usage + +```bash title="Compiles the project in the current directory" +mist build +``` + +```bash title="Prints the compiler version" +mist version +``` + +```bash title="Shows the help message and available commands" +mist help +``` + +## Hello World + +On your existing cargo project project (`cargo init` or `cargo new `). + +```json title="mist.json" +{ + "src": "src", + "output": "build" +} +``` + +```toml title="Cargo.toml" +[[bin]] +name = "main" +path = "build/main.rs" +``` + +```bash title=".gitignore" +/build +``` + +```cpp title="src/main.mist" +void main() { + println!("Hello World!"); +} +``` From d80bfae2dfd7c8332053ae97e36da849c0f775ff Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 02:42:09 +0200 Subject: [PATCH 05/18] Clean up --- content/docs/get-started.mdx | 10 +++++----- content/docs/index.mdx | 8 -------- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/content/docs/get-started.mdx b/content/docs/get-started.mdx index d244c1d..44fd3f4 100644 --- a/content/docs/get-started.mdx +++ b/content/docs/get-started.mdx @@ -1,13 +1,9 @@ --- title: Get Started -description: Install Mist and run your first program. +description: This guide will help you install the Mist CLI, understand its basic commands, and compile your first program. icon: Download --- -# Get Started - -This guide will help you install the Mist CLI, understand its basic commands, and compile your first program. - ## Installation Mist is distributed through Cargo. @@ -24,6 +20,8 @@ Verify using mist version ``` +--- + ## Usage ```bash title="Compiles the project in the current directory" @@ -38,6 +36,8 @@ mist version mist help ``` +--- + ## Hello World On your existing cargo project project (`cargo init` or `cargo new `). diff --git a/content/docs/index.mdx b/content/docs/index.mdx index 79bb2f1..9b871a8 100644 --- a/content/docs/index.mdx +++ b/content/docs/index.mdx @@ -4,8 +4,6 @@ description: What Mist is and the thinking behind it. icon: Rocket --- -# Introduction - Mist is a systems programming language that compiles directly into Rust. It exists to make Rust-based development feel more direct and less mentally heavy, while preserving Rust’s performance model and ecosystem. @@ -41,9 +39,3 @@ This means: Mist provides a more ergonomic way of authoring systems code while remaining fully grounded in Rust’s type system and execution model. It is especially designed for readability and structure in larger codebases, where Rust’s guarantees remain important but expression overhead becomes noticeable. - ---- - - - - From 66f3251482741a5b98e6a215be2ae13b2fd5fdbd Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 02:44:26 +0200 Subject: [PATCH 06/18] name change --- src/lib/shared.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/shared.ts b/src/lib/shared.ts index 5b1fca5..6a4b49f 100644 --- a/src/lib/shared.ts +++ b/src/lib/shared.ts @@ -1,4 +1,4 @@ -export const appName = 'My App'; +export const appName = 'Mist'; export const docsRoute = '/docs'; export const docsImageRoute = '/og/docs'; export const docsContentRoute = '/llms.mdx/docs'; From 2b3da35889d6dda894620d226de22f7166908af6 Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 03:31:31 +0200 Subject: [PATCH 07/18] Logo --- public/logo.svg | 13 +++++++++++++ src/lib/layout.shared.tsx | 11 ++++++++--- 2 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 public/logo.svg diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..79d3d46 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/lib/layout.shared.tsx b/src/lib/layout.shared.tsx index 88b9ca8..8f3d9a8 100644 --- a/src/lib/layout.shared.tsx +++ b/src/lib/layout.shared.tsx @@ -1,11 +1,16 @@ -import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared'; -import { appName, gitConfig } from './shared'; +import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared"; +import { appName, gitConfig } from "./shared"; export function baseOptions(): BaseLayoutProps { return { nav: { // JSX supported - title: appName, + title: ( +
+ Logo + {appName} +
+ ), }, githubUrl: `https://github.com/${gitConfig.user}/${gitConfig.repo}`, }; From 79f1049cf252ccf1d32c4d603a668095a8578a1b Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 04:35:33 +0200 Subject: [PATCH 08/18] Text morph --- src/app/(home)/page.tsx | 26 ++++++++++++++++-------- src/components/Morph.tsx | 44 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+), 9 deletions(-) create mode 100644 src/components/Morph.tsx diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index c936084..58fe4f5 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -1,16 +1,24 @@ -import Link from 'next/link'; +"use client"; + +import MorphText from "@/components/Morph"; +import { useEffect, useState } from "react"; export default function HomePage() { + const [showNext, setShowNext] = useState(false); + + useEffect(() => { + const timer = setTimeout(() => { + setShowNext(true); + }, 1000); + + return () => clearTimeout(timer); + }, []); + + const text = showNext ? "world hello i32(" : "(hello i32 world"; + return (
-

Hello World

-

- You can open{' '} - - /docs - {' '} - and see the documentation. -

+
); } diff --git a/src/components/Morph.tsx b/src/components/Morph.tsx new file mode 100644 index 0000000..ef1d83a --- /dev/null +++ b/src/components/Morph.tsx @@ -0,0 +1,44 @@ +import { motion, AnimatePresence } from "framer-motion"; + +interface MorphTextProps { + text: string; +} + +const tokenize = (str: string) => { + const counts: Record = {}; + return str.split("").map((char) => { + const displayChar = char === " " ? "\u00A0" : char; + counts[char] = (counts[char] || 0) + 1; + return { char: displayChar, id: `${char}-${counts[char]}` }; + }); +}; + +export default function MorphText({ text }: MorphTextProps) { + const activeTokens = tokenize(text); + + return ( +
+ + {activeTokens.map(({ char, id }) => ( + + {char} + + ))} + +
+ ); +} From 7715cdf7aaa941e350e6d9f5808fde9f42ad6ba1 Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 05:55:01 +0200 Subject: [PATCH 09/18] Scrolling --- src/app/(home)/page.tsx | 113 ++++++++++++++++++++++++++++++++++----- src/components/Morph.tsx | 58 ++++++++++++-------- 2 files changed, 136 insertions(+), 35 deletions(-) diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 58fe4f5..2941589 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -1,24 +1,109 @@ "use client"; import MorphText from "@/components/Morph"; +import { Card } from "fumadocs-ui/components/card"; import { useEffect, useState } from "react"; +export const mistShowcase = [ + { + title: "Hello World", + description: + "Mist starts with familiar syntax, designed to feel immediately readable while compiling into efficient Rust code.", + code: `fn main() { + println("Hello, world!"); +}`, + }, + + { + title: "Rust Compatibility", + description: + "Mist compiles directly into Rust, meaning you can use existing Rust libraries without breaking your workflow.", + code: `use std::fs; + +fn main() { + let data = fs::read_to_string("file.txt"); + println(data); +}`, + }, + + { + title: "Structs", + description: + "Mist keeps Rust’s struct model intact while making declaration more ergonomic.", + code: `struct User { + name: String, + age: int +}`, + }, + + { + title: "Classes (Syntax Sugar)", + description: + "Classes provide a familiar authoring style over Rust structs without introducing a runtime object model.", + code: `class Logger { + String prefix; + + fn info(self, msg: String) { + println(self.prefix + msg); + } +}`, + }, + + { + title: "Inheritance-style Composition", + description: + "Extends provides inheritance-like syntax while compiling down to Rust-style composition.", + code: `struct B extends A { + extra: String +}`, + }, + + { + title: "Zero-cost Abstractions", + description: + "Mist preserves Rust’s performance model — abstractions compile away entirely at runtime.", + code: `fn map(arr: Vec, f: fn(T) -> U) -> Vec { + let mut out = Vec::new(); + for x in arr { + out.push(f(x)); + } + out +}`, + }, + + { + title: "Ecosystem Integration", + description: + "All Rust crates work directly in Mist, keeping the ecosystem fully intact.", + code: `use serde_json::json; + +fn main() { + let data = json!({ "hello": "mist" }); + println(data); +}`, + }, +]; + export default function HomePage() { - const [showNext, setShowNext] = useState(false); - - useEffect(() => { - const timer = setTimeout(() => { - setShowNext(true); - }, 1000); - - return () => clearTimeout(timer); - }, []); - - const text = showNext ? "world hello i32(" : "(hello i32 world"; - return ( -
- +
+
+ {mistShowcase.map((show) => ( +
+

+ {show.title} +

+

{show.description}

+
+ ))} +
+ +
+ +
); } diff --git a/src/components/Morph.tsx b/src/components/Morph.tsx index ef1d83a..c4914bc 100644 --- a/src/components/Morph.tsx +++ b/src/components/Morph.tsx @@ -14,30 +14,46 @@ const tokenize = (str: string) => { }; export default function MorphText({ text }: MorphTextProps) { - const activeTokens = tokenize(text); + const lines = text.split("\n"); // 👈 split by newline return ( -
+
- {activeTokens.map(({ char, id }) => ( - - {char} - - ))} + {lines.map((line, lineIndex) => { + const tokens = tokenize(line); + + // 👇 empty line = real vertical space + if (line === "") { + return ( +
+ ); + } + + return ( +
+ {tokens.map(({ char, id }) => ( + + {char} + + ))} +
+ ); + })}
); From d384f243a128c704f303ecb7bf6dfa0ff6b48ec3 Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 06:03:22 +0200 Subject: [PATCH 10/18] Working scroll morph --- src/app/(home)/page.tsx | 59 ++++++++++++++++++++++++++++++++++------- 1 file changed, 49 insertions(+), 10 deletions(-) diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 2941589..338c39f 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -2,7 +2,7 @@ import MorphText from "@/components/Morph"; import { Card } from "fumadocs-ui/components/card"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; export const mistShowcase = [ { @@ -84,25 +84,64 @@ fn main() { }, ]; +// Sub-component to handle individual section observation +function ShowSection({ + show, + setActiveCode, +}: { + show: { title: string; description: string; code: string }; + setActiveCode: (v: string) => void; +}) { + const ref = useRef(null); + + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => { + if (entry.isIntersecting) { + setActiveCode(show.code); + } + }, + { threshold: 0.5 }, + ); + + if (ref.current) observer.observe(ref.current); + return () => observer.disconnect(); + }, [show.code, setActiveCode]); + + return ( +
+

+ {show.title} +

+

{show.description}

+
+ ); +} + export default function HomePage() { + const [currentText, setCurrentText] = useState(mistShowcase[0]?.code || ""); + return (
{mistShowcase.map((show) => ( -
-

- {show.title} -

-

{show.description}

-
+ show={show} + setActiveCode={setCurrentText} + /> ))}
- + + + + +
); From d7ffa31602861456a69550c4fbb80230e74845fa Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 06:08:05 +0200 Subject: [PATCH 11/18] Better size --- src/app/(home)/page.tsx | 89 +++++++++++++++++++++-------------------- 1 file changed, 46 insertions(+), 43 deletions(-) diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 338c39f..186349f 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -9,77 +9,80 @@ export const mistShowcase = [ title: "Hello World", description: "Mist starts with familiar syntax, designed to feel immediately readable while compiling into efficient Rust code.", - code: `fn main() { - println("Hello, world!"); + code: `void main() { + println!("Hello, world!"); }`, }, { - title: "Rust Compatibility", + title: "C-Style Pointers & Strings", description: - "Mist compiles directly into Rust, meaning you can use existing Rust libraries without breaking your workflow.", - code: `use std::fs; - -fn main() { - let data = fs::read_to_string("file.txt"); - println(data); + "Mist introduces ergonomics for string handling and pointers while maintaining Rust's underlying safety.", + code: `public void greet(str* name) { + String greeting = name.to_string(); + println!("Hello, {}!", greeting); }`, }, { - title: "Structs", + title: "Modern Classes", description: - "Mist keeps Rust’s struct model intact while making declaration more ergonomic.", - code: `struct User { - name: String, - age: int -}`, - }, + "Classes provide a familiar authoring style with explicit visibility modifiers and constructor logic.", + code: `public class User { + String name; + i32 age; - { - title: "Classes (Syntax Sugar)", - description: - "Classes provide a familiar authoring style over Rust structs without introducing a runtime object model.", - code: `class Logger { - String prefix; - - fn info(self, msg: String) { - println(self.prefix + msg); + public constructor(str* name, i32 age) { + self.name = name.to_string(); + self.age = age; } }`, }, { - title: "Inheritance-style Composition", + title: "Explicit Self & Mutability", description: - "Extends provides inheritance-like syntax while compiling down to Rust-style composition.", - code: `struct B extends A { - extra: String + "Method signatures clearly define access patterns using self pointers, making memory intent obvious.", + code: `public void update_age(self mut*, i32 new_age) { + self.age = new_age; + self.logger.info("Age updated"); }`, }, { - title: "Zero-cost Abstractions", + title: "Pattern Matching", description: - "Mist preserves Rust’s performance model — abstractions compile away entirely at runtime.", - code: `fn map(arr: Vec, f: fn(T) -> U) -> Vec { - let mut out = Vec::new(); - for x in arr { - out.push(f(x)); + "Full support for Rust-style enums and pattern matching for robust control flow.", + code: `void handle_event(self*, event::Event e) { + match(e) { + event::Event::Startup => self.boot(), + event::Event::Error(msg) => println!("Error: {}", msg), + _ => {} } - out }`, }, { - title: "Ecosystem Integration", + title: "Type Inference & Vectors", description: - "All Rust crates work directly in Mist, keeping the ecosystem fully intact.", - code: `use serde_json::json; + "Mist combines strong typing with keyword-based inference for a streamlined developer experience.", + code: `public void init_system(self mut*) { + var task = task::create_task("init"); + self.tasks = new Vec(); + self.tasks.push(task); +}`, + }, -fn main() { - let data = json!({ "hello": "mist" }); - println(data); + { + title: "Module Interop", + description: + "Use super-relative imports to easily navigate project hierarchies and external crates.", + code: `use ; +use ; + +public void log_to_file(logger::Logger log) { + let data = fs::read_to_string("log.txt"); + log.info(data); }`, }, ]; @@ -137,7 +140,7 @@ export default function HomePage() {
- + From 7e29141953d640d92b5eaf126464390c19aef4c6 Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 06:10:18 +0200 Subject: [PATCH 12/18] Better animation duration --- src/components/Morph.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Morph.tsx b/src/components/Morph.tsx index c4914bc..95e7f1f 100644 --- a/src/components/Morph.tsx +++ b/src/components/Morph.tsx @@ -43,8 +43,8 @@ export default function MorphText({ text }: MorphTextProps) { animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ - type: "tween", - duration: 1, + type: "keyframes", + duration: 0.6, }} className="inline-block" > From d7f5b4185321c7cd41d1bee7b7150486ce904688 Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 06:34:44 +0200 Subject: [PATCH 13/18] Cta --- src/app/(home)/page.tsx | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 186349f..b2185a3 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -2,6 +2,8 @@ import MorphText from "@/components/Morph"; import { Card } from "fumadocs-ui/components/card"; +import { BookOpenIcon, NewspaperIcon, RocketIcon } from "lucide-react"; +import Link from "next/link"; import { useEffect, useRef, useState } from "react"; export const mistShowcase = [ @@ -12,6 +14,7 @@ export const mistShowcase = [ code: `void main() { println!("Hello, world!"); }`, + cta: true, }, { @@ -92,7 +95,7 @@ function ShowSection({ show, setActiveCode, }: { - show: { title: string; description: string; code: string }; + show: { title: string; description: string; code: string; cta?: boolean }; setActiveCode: (v: string) => void; }) { const ref = useRef(null); @@ -120,6 +123,25 @@ function ShowSection({ {show.title}

{show.description}

+ {show.cta && ( +
+ + + Get Started + + + + + View Blog + +
+ )} ); } From ee0b8100ad4934a8dbe685cdc882bd6f021d720a Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 06:48:17 +0200 Subject: [PATCH 14/18] Improved mobile hero --- src/app/(home)/page.tsx | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index b2185a3..65bb548 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -117,14 +117,14 @@ function ShowSection({ return (

{show.title}

{show.description}

{show.cta && ( -
+
-
- {mistShowcase.map((show) => ( - - ))} -
- -
- +
+
+
+ +
+
+ {mistShowcase.map((show) => ( + + ))} +
+
); } From b8c7b6e3ea8a6733a03e0d3906e2d31bf232d038 Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 07:32:16 +0200 Subject: [PATCH 15/18] Improved code block --- src/app/(home)/page.tsx | 13 ++---- src/components/Morph.tsx | 98 ++++++++++++++++++++++------------------ 2 files changed, 59 insertions(+), 52 deletions(-) diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 65bb548..6e01b76 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -1,8 +1,7 @@ "use client"; -import MorphText from "@/components/Morph"; -import { Card } from "fumadocs-ui/components/card"; -import { BookOpenIcon, NewspaperIcon, RocketIcon } from "lucide-react"; +import MorphCode from "@/components/Morph"; +import { NewspaperIcon, RocketIcon } from "lucide-react"; import Link from "next/link"; import { useEffect, useRef, useState } from "react"; @@ -152,11 +151,9 @@ export default function HomePage() { return (
- - - - - +
+ +
diff --git a/src/components/Morph.tsx b/src/components/Morph.tsx index 95e7f1f..788ba5d 100644 --- a/src/components/Morph.tsx +++ b/src/components/Morph.tsx @@ -1,60 +1,70 @@ -import { motion, AnimatePresence } from "framer-motion"; +"use client"; -interface MorphTextProps { - text: string; +import { BundledLanguage, codeToTokens } from "shiki"; +import { motion, AnimatePresence } from "framer-motion"; +import { useEffect, useState } from "react"; + +interface Props { + code: string; + lang?: BundledLanguage; } -const tokenize = (str: string) => { - const counts: Record = {}; - return str.split("").map((char) => { - const displayChar = char === " " ? "\u00A0" : char; - counts[char] = (counts[char] || 0) + 1; - return { char: displayChar, id: `${char}-${counts[char]}` }; - }); -}; +export default function MorphCode({ code, lang = "rust" }: Props) { + const [lines, setLines] = useState([]); -export default function MorphText({ text }: MorphTextProps) { - const lines = text.split("\n"); // 👈 split by newline + useEffect(() => { + async function run() { + const result = await codeToTokens(code, { + lang, + theme: "github-dark", + }); + + const rawLines = code.split("\n"); + + const fixed = rawLines.map((_, i) => { + return ( + result.tokens[i] ?? [ + { + content: "\n", + color: undefined, + }, + ] + ); + }); + + setLines(fixed); + } + + run(); + }, [code, lang]); return ( -
- - {lines.map((line, lineIndex) => { - const tokens = tokenize(line); - - // 👇 empty line = real vertical space - if (line === "") { - return ( -
- ); - } - - return ( -
- {tokens.map(({ char, id }) => ( + 
+      
+        
+          {lines.map((line, lineIndex) => (
+            

+              {line.map((token, tokenIndex) => (
                 
-                  {char}
+                  {token.content}
                 
               ))}
             

-          );
-        })}
-      
-
+ ))} + + + ); } From 78ef529be09dcb2d3c4c8e8950c01898970cc3f4 Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 07:46:44 +0200 Subject: [PATCH 16/18] Improved code block --- src/app/(home)/page.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 6e01b76..3743462 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -151,8 +151,10 @@ export default function HomePage() { return (
-
- +
+
+ +
From 86f0975c050be2ebbfdbf203cf39a6f2245451ce Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Mon, 11 May 2026 08:07:42 +0200 Subject: [PATCH 17/18] Improved features --- src/app/(home)/page.tsx | 94 ++++++++++++++++------------------------- 1 file changed, 37 insertions(+), 57 deletions(-) diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 3743462..e5f4038 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -7,84 +7,64 @@ import { useEffect, useRef, useState } from "react"; export const mistShowcase = [ { - title: "Hello World", + title: "Rust.. With ergonomics?", description: - "Mist starts with familiar syntax, designed to feel immediately readable while compiling into efficient Rust code.", + "Mist is a systems language that compiles to Rust, built on the idea that writing low-level code shouldn't feel mentally heavy.", code: `void main() { - println!("Hello, world!"); + println!("Hello, World!"); }`, cta: true, }, { - title: "C-Style Pointers & Strings", + title: "Fast and works with Rust", description: - "Mist introduces ergonomics for string handling and pointers while maintaining Rust's underlying safety.", + "All of your favorite Rust libraries work with Mist. It compiles directly into efficient Rust code with zero-cost abstractions and no runtime overhead.", + code: `use ; +use ; + +void process_data() { + var list = new Vec(); // Zero-cost abstraction + external_lib::perform_task(list); +}`, + }, + + { + title: "Ergonomic Development", + description: + "C/C++ style syntax for quick onboarding. Mist is designed for fast, readable systems code with minimal friction compared to raw Rust.", code: `public void greet(str* name) { + // Familiar pointer ergonomics with Rust safety String greeting = name.to_string(); println!("Hello, {}!", greeting); }`, }, { - title: "Modern Classes", + title: "Class and Type System", description: - "Classes provide a familiar authoring style with explicit visibility modifiers and constructor logic.", - code: `public class User { - String name; - i32 age; + "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 { + u32 id; +} - public constructor(str* name, i32 age) { - self.name = name.to_string(); - self.age = age; +// Compiles to struct composition in Rust +public struct Player extends Entity { + String username; + + public constructor(u32 id, str* name) { + self.id = id; + self.username = name.to_string(); } }`, }, { - title: "Explicit Self & Mutability", + title: "Explicit Mutability", description: - "Method signatures clearly define access patterns using self pointers, making memory intent obvious.", - code: `public void update_age(self mut*, i32 new_age) { - self.age = new_age; - self.logger.info("Age updated"); -}`, - }, - - { - title: "Pattern Matching", - description: - "Full support for Rust-style enums and pattern matching for robust control flow.", - code: `void handle_event(self*, event::Event e) { - match(e) { - event::Event::Startup => self.boot(), - event::Event::Error(msg) => println!("Error: {}", msg), - _ => {} - } -}`, - }, - - { - title: "Type Inference & Vectors", - description: - "Mist combines strong typing with keyword-based inference for a streamlined developer experience.", - code: `public void init_system(self mut*) { - var task = task::create_task("init"); - self.tasks = new Vec(); - self.tasks.push(task); -}`, - }, - - { - title: "Module Interop", - description: - "Use super-relative imports to easily navigate project hierarchies and external crates.", - code: `use ; -use ; - -public void log_to_file(logger::Logger log) { - let data = fs::read_to_string("log.txt"); - log.info(data); + "Mist maintains memory intent through explicit self pointers and mutability modifiers.", + code: `public void update_id(self mut*, u32 new_id) { + self.id = new_id; }`, }, ]; @@ -118,12 +98,12 @@ function ShowSection({ ref={ref} className="h-svh p-10 md:p-20 flex flex-col gap-2 items-center justify-center" > -

+

{show.title}

{show.description}

{show.cta && ( -
+
Date: Mon, 11 May 2026 08:13:32 +0200 Subject: [PATCH 18/18] Improved descriptions --- src/app/(home)/page.tsx | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index e5f4038..f091abb 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -9,9 +9,17 @@ export const mistShowcase = [ { title: "Rust.. With ergonomics?", description: - "Mist is a systems language that compiles to Rust, built on the idea that writing low-level code shouldn't feel mentally heavy.", + "C/C++ style syntax for comfort. Mist is designed for fast, readable systems code with minimal friction compared to raw Rust.", code: `void main() { println!("Hello, World!"); + + greet("Developer"); +} + +public void greet(str* name) { + // Familiar pointer ergonomics with Rust safety + String greeting = name.to_string(); + println!("Hello, {}!", greeting); }`, cta: true, }, @@ -29,17 +37,6 @@ void process_data() { }`, }, - { - title: "Ergonomic Development", - description: - "C/C++ style syntax for quick onboarding. Mist is designed for fast, readable systems code with minimal friction compared to raw Rust.", - code: `public void greet(str* name) { - // Familiar pointer ergonomics with Rust safety - String greeting = name.to_string(); - println!("Hello, {}!", greeting); -}`, - }, - { title: "Class and Type System", description: @@ -101,7 +98,7 @@ function ShowSection({

{show.title}

-

{show.description}

+

{show.description}

{show.cta && (