Feat: update website to prevent ugliness
Some checks failed
Deploy Website / deploy (push) Failing after 4m48s
Some checks failed
Deploy Website / deploy (push) Failing after 4m48s
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:card" content="summary">
|
||||||
<meta name="twitter:title" content="Cagire - Forth-based live coding sequencer">
|
<meta name="twitter:title" content="Cagire - Forth-based live coding sequencer">
|
||||||
<meta name="twitter:description" content="Forth-based live coding music sequencer">
|
<meta name="twitter:description" content="Forth-based live coding music sequencer">
|
||||||
<style>
|
<link rel="stylesheet" href="/style.css">
|
||||||
@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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<h1>CAGIRE: LIVE CODING IN FORTH</h1>
|
||||||
<h1>CAGIRE: LIVE CODING IN FORTH</h1>
|
|
||||||
<button id="theme-toggle" aria-label="Toggle theme">LIGHT</button>
|
<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>
|
||||||
</div>
|
|
||||||
|
|
||||||
<table class="downloads-table">
|
<table class="downloads-table">
|
||||||
<tr>
|
<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>
|
<td><a href="https://github.com/Bubobubobubobubo/cagire/releases/latest/download/cagire-linux-x86_64.tar.gz">.tar.gz</a></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</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>
|
<video src="/mono_cagire.mp4" autoplay muted loop playsinline></video>
|
||||||
|
|
||||||
<h2>About</h2>
|
<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>
|
<h2>Code Examples</h2>
|
||||||
|
<br>
|
||||||
<p>A minimal script that plays a middle C note using a sine wave:</p>
|
<p>A minimal script that plays a middle C note using a sine wave:</p>
|
||||||
<pre>c4 note sine sound .</pre>
|
<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>
|
<p>Sawtooth wave with lowpass filter, chorus and reverb:</p>
|
||||||
<pre>saw sound 1200 lpf 0.2 chorus 0.8 verb .</pre>
|
<pre>saw sound 1200 lpf 0.2 chorus 0.8 verb .</pre>
|
||||||
|
<br>
|
||||||
|
|
||||||
<p>Pitched-down kick drum sample with distortion:</p>
|
<p>Pitched-down kick drum sample with distortion:</p>
|
||||||
<pre>kkick sound 1.5 distort 0.8 speed .</pre>
|
<pre>kkick sound 1.5 distort 0.8 speed .</pre>
|
||||||
|
<br>
|
||||||
|
|
||||||
<h2>Features</h2>
|
<h2>Features</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>32 banks × 32 patterns × 128 steps per project</li>
|
<li>Robust synthesis engine: synthesizers, sampling, effects, live input, and more to discover.</li>
|
||||||
<li>Ableton Link synchronization</li>
|
<li>Ableton Link: jam with your friends or include other software / hardware to your setup.</li>
|
||||||
<li>Built-in synthesis engine (oscillators, samples, wavetables)</li>
|
<li>32 banks × 32 patterns × 128 steps per project: (~131.000 scripts per project).</li>
|
||||||
<li>Effects: filters, reverb, delay, distortion, chorus</li>
|
<li>Forth: objectively the coolest / minimal / hackable language to make music with!</li>
|
||||||
<li>User-defined words and shared variables</li>
|
<li>Embedded dictionary and documentation!</li>
|
||||||
<li>Embedded dictionary and documentation</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h2>Live Coding</h2>
|
<h2>Live Coding</h2>
|
||||||
@@ -209,10 +96,8 @@
|
|||||||
|
|
||||||
<h2>Credits</h2>
|
<h2>Credits</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="https://raphaelforment.fr">BuboBubo</a> (Raphaël Forment)</li>
|
<li><a href="https://raphaelforment.fr">BuboBubo</a> (Raphaël Maurice 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>See <a href="https://doux.livecoding.fr">Doux</a> for engine credits.</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>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h2>Links</h2>
|
<h2>Links</h2>
|
||||||
@@ -221,23 +106,8 @@
|
|||||||
<li><a href="https://ko-fi.com/raphaelbubo">Ko-fi</a></li>
|
<li><a href="https://ko-fi.com/raphaelbubo">Ko-fi</a></li>
|
||||||
</ul>
|
</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>
|
<script is:inline src="/script.js"></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>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user