Merge pull request #1 from mist-go/landing-page-and-intro-docs
Landing page and intro docs
This commit is contained in:
@@ -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 [email protected]
|
||||
```
|
||||
|
||||
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 <name>`).
|
||||
|
||||
```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!");
|
||||
}
|
||||
```
|
||||
+36
-8
@@ -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.
|
||||
|
||||
<Cards>
|
||||
<Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
|
||||
<Card title="Learn more about Fumadocs" href="https://fumadocs.dev" />
|
||||
</Cards>
|
||||
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.
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
---
|
||||
title: Components
|
||||
description: Components
|
||||
---
|
||||
|
||||
## Code Block
|
||||
|
||||
```js
|
||||
console.log('Hello World');
|
||||
```
|
||||
|
||||
## Cards
|
||||
|
||||
<Cards>
|
||||
<Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
|
||||
<Card title="Learn more about Fumadocs" href="https://fumadocs.dev" />
|
||||
</Cards>
|
||||
@@ -0,0 +1,13 @@
|
||||
<svg width="344" height="344" viewBox="0 0 344 344" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3_2)">
|
||||
<path d="M321.107 258.262C323.508 254.103 325 249.417 325 245.209V99.14C325 94.932 323.51 90.247 321.108 86.088L172 172.175L321.107 258.262Z" fill="#C44116"/>
|
||||
<path d="M185.25 341.193L311.75 268.159C315.394 266.055 318.706 262.422 321.107 258.262L172 172.175L22.8931 258.263C25.2941 262.422 28.6071 266.056 32.2501 268.159L158.75 341.193C166.037 345.401 177.963 345.401 185.25 341.193Z" fill="#8C2F0D"/>
|
||||
<path d="M321.108 86.087C318.706 81.927 315.393 78.294 311.75 76.19L185.25 3.156C177.963 -1.052 166.037 -1.052 158.75 3.156L32.25 76.19C24.962 80.397 19 90.725 19 99.14V245.209C19 249.417 20.491 254.103 22.893 258.262L172 172.175L321.108 86.087Z" fill="#D25228"/>
|
||||
<path d="M100 238V106H107.5L175 186.5L237 106H244.5V238" stroke="white" stroke-width="43"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3_2">
|
||||
<rect width="344" height="344" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1003 B |
+145
-10
@@ -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 <std::vec::Vec>;
|
||||
use <external_lib>;
|
||||
|
||||
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 (
|
||||
<section
|
||||
ref={ref}
|
||||
className="h-svh p-10 md:p-20 flex flex-col gap-2 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">
|
||||
{show.title}
|
||||
</h1>
|
||||
<p className="text-xl text-zinc-400 text-center">{show.description}</p>
|
||||
{show.cta && (
|
||||
<div className="mt-3 lg:mt-1 flex gap-6">
|
||||
<Link
|
||||
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"
|
||||
>
|
||||
<RocketIcon className="w-5 h-5" />
|
||||
Get Started
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
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
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomePage() {
|
||||
const [currentText, setCurrentText] = useState(mistShowcase[0]?.code || "");
|
||||
|
||||
return (
|
||||
<div className="flex flex-col justify-center text-center flex-1">
|
||||
<h1 className="text-2xl font-bold mb-4">Hello World</h1>
|
||||
<p>
|
||||
You can open{' '}
|
||||
<Link href="/docs" className="font-medium underline">
|
||||
/docs
|
||||
</Link>{' '}
|
||||
and see the documentation.
|
||||
</p>
|
||||
<div className="flex w-full flex-col md: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="md:w-full md:pl-14 overflow-hidden">
|
||||
<div className="w-max h-auto border border-fd-border p-5 rounded-xl min-h-24 backdrop-blur bg-black/20">
|
||||
<MorphCode code={currentText} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 order-2 md:order-1">
|
||||
<div className="-mt-30 md:mt-0">
|
||||
{mistShowcase.map((show) => (
|
||||
<ShowSection
|
||||
key={show.title}
|
||||
show={show}
|
||||
setActiveCode={setCurrentText}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+40
-1
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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<any[][]>([]);
|
||||
|
||||
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 (
|
||||
<pre className="text-sm">
|
||||
<code>
|
||||
<AnimatePresence mode="popLayout">
|
||||
{lines.map((line, lineIndex) => (
|
||||
<div key={lineIndex} className="flex min-h-[1em]">
|
||||
{line.map((token, tokenIndex) => (
|
||||
<motion.span
|
||||
key={`${lineIndex}-${tokenIndex}`}
|
||||
layoutId={`${lineIndex}-${tokenIndex}`}
|
||||
layout
|
||||
initial={{ opacity: 0, y: 6 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -6 }}
|
||||
transition={{ duration: 0.35 }}
|
||||
style={{
|
||||
color: token.color,
|
||||
whiteSpace: "pre",
|
||||
}}
|
||||
>
|
||||
{token.content}
|
||||
</motion.span>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</code>
|
||||
</pre>
|
||||
);
|
||||
}
|
||||
@@ -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: (
|
||||
<div className="flex gap-2 items-center">
|
||||
<img src="/logo.svg" alt="Logo" className="w-7 h-7" />
|
||||
{appName}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
githubUrl: `https://github.com/${gitConfig.user}/${gitConfig.repo}`,
|
||||
};
|
||||
|
||||
+4
-5
@@ -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',
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user