Feat: update website to prevent ugliness
This commit is contained in:
54
website/public/script.js
Normal file
54
website/public/script.js
Normal 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
127
website/public/style.css
Normal 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);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user