diff --git a/content/docs/get-started.mdx b/content/docs/get-started.mdx new file mode 100644 index 0000000..44fd3f4 --- /dev/null +++ b/content/docs/get-started.mdx @@ -0,0 +1,66 @@ +--- +title: Get Started +description: This guide will help you install the Mist CLI, understand its basic commands, and compile your first program. +icon: Download +--- + +## 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!"); +} +``` diff --git a/content/docs/index.mdx b/content/docs/index.mdx index 1ede18e..9b871a8 100644 --- a/content/docs/index.mdx +++ b/content/docs/index.mdx @@ -1,13 +1,41 @@ --- -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`. +Mist is a systems programming language that compiles directly into Rust. -## What is Next? +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 - - - - - 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/app/(home)/page.tsx b/src/app/(home)/page.tsx index c936084..f091abb 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -1,16 +1,151 @@ -import Link from 'next/link'; +"use client"; + +import MorphCode from "@/components/Morph"; +import { NewspaperIcon, RocketIcon } from "lucide-react"; +import Link from "next/link"; +import { useEffect, useRef, useState } from "react"; + +export const mistShowcase = [ + { + title: "Rust.. With ergonomics?", + description: + "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, + }, + + { + title: "Fast and works with Rust", + description: + "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: "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 { + u32 id; +} + +// 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 Mutability", + description: + "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; +}`, + }, +]; + +// Sub-component to handle individual section observation +function ShowSection({ + show, + setActiveCode, +}: { + show: { title: string; description: string; code: string; cta?: boolean }; + 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}

+ {show.cta && ( +
+ + + Get Started + + + + + View Blog + +
+ )} +
+ ); +} export default function HomePage() { + const [currentText, setCurrentText] = useState(mistShowcase[0]?.code || ""); + return ( -
-

Hello World

-

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

+
+
+
+
+ +
+
+
+ +
+
+ {mistShowcase.map((show) => ( + + ))} +
+
); } 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; } diff --git a/src/components/Morph.tsx b/src/components/Morph.tsx new file mode 100644 index 0000000..788ba5d --- /dev/null +++ b/src/components/Morph.tsx @@ -0,0 +1,70 @@ +"use client"; + +import { BundledLanguage, codeToTokens } from "shiki"; +import { motion, AnimatePresence } from "framer-motion"; +import { useEffect, useState } from "react"; + +interface Props { + code: string; + lang?: BundledLanguage; +} + +export default function MorphCode({ code, lang = "rust" }: Props) { + const [lines, setLines] = useState([]); + + 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) => (
+            

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

+          ))}
+        
+      
+
+ ); +} 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}`, }; diff --git a/src/lib/shared.ts b/src/lib/shared.ts index 812926e..6a4b49f 100644 --- a/src/lib/shared.ts +++ b/src/lib/shared.ts @@ -1,11 +1,10 @@ -export const appName = 'My App'; +export const appName = 'Mist'; 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', };