Skip to content

feat: show build and package management on the home page #215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
magnus-madsen merged 1 commit into from
Aug 9, 2026
Merged

feat: show build and package management on the home page #215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/components/PlainSnippet.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
interface Props {
code: string;
}

const { code } = Astro.props;
---

{/* For blocks that are not Flix - terminal output, TOML - which CodeSnippet
would colour through the Flix grammar. Reuses that component's frame, so a
plain block and a highlighted one stack in a column without a seam.
overflow-x is set here because Astro's <Code> ships it inline on the <pre>
it renders, and a bare <pre> has nothing. */}
<div class="code-snippet-frame">
<div class="code-snippet-code">
<pre style="overflow-x: auto">{code}</pre>
</div>
</div>
26 changes: 23 additions & 3 deletions src/lib/indexExamples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,16 +327,36 @@ def testDivide01(): Unit \\ Assert =
def testDivide02(): Unit \\ Assert =
assertErr(divide(10, 0))`;

// Terminal output rather than Flix, so the home page renders this one through a
// plain <pre>: the CodeSnippet component only knows the Flix grammar and would
// colour the PASS lines as if they were code.
// Neither this nor the two that follow are Flix, so the home page renders them
// with PlainSnippet: CodeSnippet only knows the Flix grammar and would colour
// terminal output and TOML as if they were code.
export const testOutput = `Running 2 tests...

PASS testDivide01 1.4ms
PASS testDivide02 0.3ms

Passed: 2, Failed: 0. Skipped: 0. Elapsed: 2.1ms.`;

export const manifestExample = `[package]
name = "hello-world"
description = "A simple Flix package"
version = "0.1.0"
license = "Apache-2.0"

[dependencies]
"github:flix/museum" = "1.4.0"

[mvn-dependencies]
"org.apache.commons:commons-lang3" = "3.12.0"`;

export const manifestOutput = `Found \`flix.toml'. Checking dependencies...
Resolving Flix dependencies...
Downloading \`flix/museum.toml\` (v1.4.0)... OK.
Downloading \`flix/museum.fpkg\` (v1.4.0)... OK.
Resolving Maven dependencies...
Adding \`org.apache.commons:commons-lang3' (3.12.0).
Dependency resolution completed.`;

export const datalogExample = `def reachable(g: List[(String, Int32, String)], minSpeed: Int32): List[(String, String)] =
let facts = inject g into Road/3;
let rules = #{
Expand Down
52 changes: 41 additions & 11 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
import Layout from "../layouts/Layout.astro";
import CodeSnippet from "../components/CodeSnippet.astro";
import PlainSnippet from "../components/PlainSnippet.astro";
import Carousel from "../components/Carousel.astro";
import {
httpExample,
Expand All @@ -25,6 +26,8 @@ import {
terminationExample,
testExample,
testOutput,
manifestExample,
manifestOutput,
datalogExample,
} from "../lib/indexExamples.js";

Expand Down Expand Up @@ -551,6 +554,44 @@ const vscodeSlides = [
</div>

<div class="row mb-4">
<div class="col-md-6">
<div class="card border-0">
<div class="card-body">
<div class="card-title"><h4>Build and Package Management</h4></div>
<p class="card-text">
Flix has its own build tool and package manager. A project is
described by a single <code>flix.toml</code> manifest, shown on
the right, and <code>flix init</code> writes the first one for
you.
</p>
<p class="card-text">
Dependencies are Flix packages published on GitHub, or JARs
published on Maven &mdash; so pulling in the Java ecosystem is one
line in the manifest. Flix resolves both, transitively, and
downloads them on the next build.
</p>
<p class="card-text">
The commands <code>check</code>, <code>build</code>, <code
>run</code
>, <code>test</code>, <code>build-fatjar</code>, and <code
>release</code
> are built into the compiler itself, and each one works from the command
line, from the REPL, and from Visual Studio Code.
</p>
</div>
</div>
</div>
<div class="col-md-6">
<PlainSnippet code={manifestExample} />
<PlainSnippet code={manifestOutput} />
</div>
</div>

<div class="row mb-4">
<div class="col-md-6">
<CodeSnippet code={testExample} />
<PlainSnippet code={testOutput} />
</div>
<div class="col-md-6">
<div class="card border-0">
<div class="card-body">
Expand All @@ -574,17 +615,6 @@ const vscodeSlides = [
</div>
</div>
</div>
<div class="col-md-6">
<CodeSnippet code={testExample} />
{/* Terminal output, not Flix, so it bypasses CodeSnippet and reuses
only its frame. overflow-x is set here because Astro's <Code> ships
that inline on the <pre> it renders and a bare one has nothing. */}
<div class="code-snippet-frame">
<div class="code-snippet-code">
<pre style="overflow-x: auto">{testOutput}</pre>
</div>
</div>
</div>
</div>

<div class="row mb-4">
Expand Down