BuboBubo/Cagire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: update website to prevent ugliness

Browse Source
This commit is contained in:
Raphaël Forment
2026-02-02 01:38:21 +01:00
parent ceee3228c3
commit 3e8076e416
3 changed files with 209 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
website/public/script.js Normal file
View File

@@ -0,0 +1,54 @@
const toggle = document.getElementById('theme-toggle');
const root = document.documentElement;
const stored = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isLight = stored ? stored === 'light' : !prefersDark;
if (isLight) {
root.classList.add('light');
}
toggle.textContent = isLight ? 'DARK' : 'LIGHT';
toggle.addEventListener('click', () => {
root.classList.toggle('light');
const light = root.classList.contains('light');
toggle.textContent = light ? 'DARK' : 'LIGHT';
localStorage.setItem('theme', light ? 'light' : 'dark');
highlightForth();
});
function highlightForth() {
const words = ['note', 'sound', 'lpf', 'hpf', 'chorus', 'verb', 'distort', 'speed'];
const notes = ['c4'];
const chords = ['min7'];
const samples = ['kkick', 'sine', 'saw'];
const isLight = document.documentElement.classList.contains('light');
const numColor = isLight ? '#a855f7' : '#e8a0e8';
const dotColor = isLight ? '#0284c7' : '#7dd3fc';
const wordColor = isLight ? '#65a30d' : '#a3e635';
const noteColor = isLight ? '#d97706' : '#fbbf24';
const chordColor = isLight ? '#15803d' : '#4ade80';
const sampleColor = isLight ? '#dc2626' : '#f87171';
document.querySelectorAll('pre').forEach(pre => {
const text = pre.dataset.source || pre.textContent;
pre.dataset.source = text;
pre.innerHTML = text
.split(/(\s+)/)
.map(t => {
if (t === '.') return `<span style="color:${dotColor}">.</span>`;
if (/^-?\d+\.?\d*$/.test(t)) return `<span style="color:${numColor}">${t}</span>`;
if (words.includes(t)) return `<span style="color:${wordColor}">${t}</span>`;
if (notes.includes(t)) return `<span style="color:${noteColor}">${t}</span>`;
if (chords.includes(t)) return `<span style="color:${chordColor}">${t}</span>`;
if (samples.includes(t)) return `<span style="color:${sampleColor}">${t}</span>`;
return t;
})
.join('');
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', highlightForth);
} else {
highlightForth();
}

127
website/public/style.css Normal file
View File

@@ -0,0 +1,127 @@
@font-face {
font-family: 'CozetteVector';
src: url('/CozetteVector.ttf') format('truetype');
}
:root {
--bg: #000;
--surface: #121212;
--text: #fff;
--text-dim: #b4b4b4;
--text-muted: #787878;
}
:root.light {
--bg: #fff;
--surface: #f0f0f0;
--text: #000;
--text-dim: #505050;
--text-muted: #8c8c8c;
}
body {
font-family: 'CozetteVector', monospace;
background: var(--bg);
color: var(--text);
max-width: 800px;
margin: 0 auto;
padding: 1rem;
line-height: 1.3;
font-size: 0.9rem;
}
h1 {
color: var(--text);
margin: 0;
}
h2 {
color: var(--text);
margin-top: 1rem;
margin-bottom: 0.25rem;
font-size: 1rem;
}
p { margin: 0.25rem 0; }
video {
max-width: 100%;
margin: 0.5rem 0;
display: block;
}
a { color: var(--text-dim); }
ul {
padding-left: 1.5rem;
margin: 0.25rem 0;
}
li { margin: 0.1rem 0; }
pre {
background: var(--surface);
padding: 0.5rem;
overflow-x: auto;
margin: 0.25rem 0;
}
.downloads-table {
border-collapse: collapse;
margin: 0.5rem 0;
width: 100%;
}
.downloads-table th,
.downloads-table td {
padding: 0.25rem 0.75rem;
text-align: left;
}
.downloads-table th {
color: var(--text);
}
.downloads-table td:first-child {
color: var(--text-muted);
}
.downloads-table tr:nth-child(even) {
background: var(--surface);
}
.note {
color: var(--text-muted);
font-size: 0.8rem;
font-style: italic;
}
.note a {
color: var(--text-muted);
}
.support {
background: var(--surface);
padding: 0.5rem;
margin: 0.5rem 0;
color: var(--text-dim);
}
.support a {
color: var(--text);
}
#theme-toggle {
font-family: 'CozetteVector', monospace;
background: none;
color: var(--text-muted);
border: none;
padding: 0;
cursor: pointer;
font-size: inherit;
text-decoration: underline;
}
#theme-toggle:hover {
color: var(--text);
}

186
website/src/pages/index.astro
View File

@@ -18,137 +18,12 @@
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Cagire - Forth-based live coding sequencer">
<meta name="twitter:description" content="Forth-based live coding music sequencer">
<style>
@font-face {
font-family: 'CozetteVector';
src: url('/CozetteVector.ttf') format('truetype');
}
:root {
--bg: #000;
--surface: #121212;
--text: #fff;
--text-dim: #b4b4b4;
--text-muted: #787878;
}
:root.light {
--bg: #fff;
--surface: #f0f0f0;
--text: #000;
--text-dim: #505050;
--text-muted: #8c8c8c;
}
body {
font-family: 'CozetteVector', monospace;
background: var(--bg);
color: var(--text);
max-width: 800px;
margin: 0 auto;
padding: 1rem;
line-height: 1.3;
font-size: 0.9rem;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.25rem;
}
h1 {
color: var(--text);
margin: 0;
}
h2 {
color: var(--text);
margin-top: 1rem;
margin-bottom: 0.25rem;
font-size: 1rem;
}
p { margin: 0.25rem 0; }
video {
max-width: 100%;
margin: 0.5rem 0;
display: block;
}
a { color: var(--text-dim); }
ul {
padding-left: 1.5rem;
margin: 0.25rem 0;
}
li { margin: 0.1rem 0; }
pre {
background: var(--surface);
padding: 0.5rem;
overflow-x: auto;
margin: 0.25rem 0;
}
.downloads-table {
border-collapse: collapse;
margin: 0.5rem 0;
width: 100%;
}
.downloads-table th,
.downloads-table td {
padding: 0.25rem 0.75rem;
text-align: left;
}
.downloads-table th {
color: var(--text);
}
.downloads-table td:first-child {
color: var(--text-muted);
}
.downloads-table tr:nth-child(even) {
background: var(--surface);
}
.note {
color: var(--text-muted);
font-size: 0.8rem;
font-style: italic;
}
.note a {
color: var(--text-muted);
}
#theme-toggle {
font-family: 'CozetteVector', monospace;
background: var(--surface);
color: var(--text);
border: 1px solid var(--text-muted);
padding: 0.25rem 0.5rem;
cursor: pointer;
font-size: 0.8rem;
}
#theme-toggle:hover {
background: var(--text-muted);
color: var(--bg);
}
</style>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="header">
<h1>CAGIRE: LIVE CODING IN FORTH</h1>
<button id="theme-toggle" aria-label="Toggle theme">LIGHT</button>
</div>
<h1>CAGIRE: LIVE CODING IN FORTH</h1>
<p class="support">Cagire is free and open source. If you find it useful, consider <a href="https://ko-fi.com/raphaelbubo">supporting the project on Ko-fi</a>.</p>
<table class="downloads-table">
<tr>
@@ -177,31 +52,43 @@
<td><a href="https://github.com/Bubobubobubobubo/cagire/releases/latest/download/cagire-linux-x86_64.tar.gz">.tar.gz</a></td>
</tr>
</table>
<p class="note">All releases on <a href="https://github.com/Bubobubobubobubo/cagire/releases/latest">GitHub</a>. You can also compile the software yourself or get it from Cargo!</p>
<p class="note">All releases are available on <a href="https://github.com/Bubobubobubobubo/cagire/releases/latest">GitHub</a>. You can also compile the software yourself by getting it from Cargo!</p>
<video src="/mono_cagire.mp4" autoplay muted loop playsinline></video>
<h2>About</h2>
<p>Cagire is a step sequencer where each step contains a Forth script instead of typical note data. When the sequencer reaches a step, it runs the script. Scripts can produce sound, trigger samples, apply effects, or do nothing at all. You are free to define what your scripts will do. Cagire includes a built-in audio engine called <a href="https://doux.livecoding.fr">Doux</a>. No external software is needed to make sound. It comes with oscillators, sample players, filters, reverb, delay, distortion, and more.</p>
<p>Cagire is a step sequencer where each step contains a Forth script instead of typical note data. When the sequencer reaches a step, it runs the associated script. Scripts can produce sound, trigger samples, apply effects, or do nothing at all. You are free to define what your scripts will do. Cagire includes a built-in audio engine called <a href="https://doux.livecoding.fr">Doux</a>. No external software is needed to make sound. It comes with oscillators, sample players, filters, reverb, delay, distortion, and more.</p>
<h2>Code Examples</h2>
<br>
<p>A minimal script that plays a middle C note using a sine wave:</p>
<pre>c4 note sine sound .</pre>
<br>
<p>And now let's make it polyphonic and add different parameters per voice:</p>
<pre>c4 min7 note
sine sound
0.1 chorus
500 1000 1500 lpf
.</pre>
<br>
<p>Sawtooth wave with lowpass filter, chorus and reverb:</p>
<pre>saw sound 1200 lpf 0.2 chorus 0.8 verb .</pre>
<br>
<p>Pitched-down kick drum sample with distortion:</p>
<pre>kkick sound 1.5 distort 0.8 speed .</pre>
<br>
<h2>Features</h2>
<ul>
<li>32 banks × 32 patterns × 128 steps per project</li>
<li>Ableton Link synchronization</li>
<li>Built-in synthesis engine (oscillators, samples, wavetables)</li>
<li>Effects: filters, reverb, delay, distortion, chorus</li>
<li>User-defined words and shared variables</li>
<li>Embedded dictionary and documentation</li>
<li>Robust synthesis engine: synthesizers, sampling, effects, live input, and more to discover.</li>
<li>Ableton Link: jam with your friends or include other software / hardware to your setup.</li>
<li>32 banks × 32 patterns × 128 steps per project: (~131.000 scripts per project).</li>
<li>Forth: objectively the coolest / minimal / hackable language to make music with!</li>
<li>Embedded dictionary and documentation!</li>
</ul>
<h2>Live Coding</h2>
@@ -209,10 +96,8 @@
<h2>Credits</h2>
<ul>
<li><a href="https://raphaelforment.fr">BuboBubo</a> (Raphaël Forment)</li>
<li><a href="https://doux.livecoding.fr">Doux</a> audio engine, Rust port of Dough by <a href="https://eddyflux.cc/">Felix Roos</a></li>
<li><a href="https://github.com/sourcebox/mi-plaits-dsp-rs">mi-plaits-dsp-rs</a> by Oliver Rockstedt, based on <a href="https://mutable-instruments.net/">Mutable Instruments</a> Plaits by Emilie Gillet</li>
<li>Related: <a href="https://strudel.cc">Strudel</a>, <a href="https://tidalcycles.org">TidalCycles</a>, <a href="https://sova.livecoding.fr">Sova</a></li>
<li><a href="https://raphaelforment.fr">BuboBubo</a> (Raphaël Maurice Forment).</li>
<li>See <a href="https://doux.livecoding.fr">Doux</a> for engine credits.</li>
</ul>
<h2>Links</h2>
@@ -221,23 +106,8 @@
<li><a href="https://ko-fi.com/raphaelbubo">Ko-fi</a></li>
</ul>
<p style="margin-top: 2rem; color: var(--text-muted);">AGPL-3.0 License</p>
<p style="margin-top: 2rem; color: var(--text-muted);">AGPL-3.0 License · <button id="theme-toggle" aria-label="Toggle theme">LIGHT</button></p>
<script>
const toggle = document.getElementById('theme-toggle');
const root = document.documentElement;
if (localStorage.getItem('theme') === 'light') {
root.classList.add('light');
toggle.textContent = 'DARK';
}
toggle.addEventListener('click', () => {
root.classList.toggle('light');
const isLight = root.classList.contains('light');
toggle.textContent = isLight ? 'DARK' : 'LIGHT';
localStorage.setItem('theme', isLight ? 'light' : 'dark');
});
</script>
<script is:inline src="/script.js"></script>
</body>
</html>