Raphaël Forment
391
index.html
391
index.html
@ -1,4 +1,4 @@
|
||||
<!doctype html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
@ -11,15 +11,13 @@
|
||||
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#da532c">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<link rel="stylesheet" href="/src/output.css" />
|
||||
<link rel="stylesheet" href='/fonts/index.css' >
|
||||
<link rel="stylesheet" href="/src/output.css" />
|
||||
<script src="https://unpkg.com/hydra-synth"></script>
|
||||
</head>
|
||||
<style>
|
||||
|
||||
body {
|
||||
font-family: "Arial";
|
||||
background-color: #111827;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
@ -28,11 +26,10 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fluid-bg-transition {
|
||||
.fluid-transition {
|
||||
transition: background-color 0.05s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.fullscreencanvas {
|
||||
position: fixed; /* ignore margins */
|
||||
top: 0px;
|
||||
@ -66,60 +63,88 @@
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.bar_button {
|
||||
@apply mx-2 px-2 py-2 flex inline rounded-lg bg-background text-foreground hover:bg-foreground hover:text-background
|
||||
}
|
||||
|
||||
.side_button {
|
||||
@apply px-2 py-2 bg-background text-foreground rounded-lg hover:bg-foreground hover:text-background
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
@apply bg-selection_foreground text-sm lg:text-xl border-b py-4 text-foreground
|
||||
}
|
||||
|
||||
.tab_panel {
|
||||
@apply inline-block lg:px-4 px-8 py-1 text-selection_foreground
|
||||
}
|
||||
|
||||
.doc_header {
|
||||
@apply pl-2 pr-2 lg:text-xl text-sm py-1 my-1 rounded-lg text-white hover:text-brightwhite hover:bg-brightblack
|
||||
}
|
||||
|
||||
.doc_subheader {
|
||||
@apply pl-2 pr-2 lg:text-xl text-sm ml-6 py-1 my-1 rounded-lg text-white hover:text-brightwhite hover:bg-brightblack
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<body id="all" class="z-0 bg-neutral-800 overflow-y-hidden">
|
||||
|
||||
<body id="all" class="z-0 overflow-y-hidden bg-black">
|
||||
<!-- The header is hidden on smaller devices -->
|
||||
<header class="py-0 block text-white bg-neutral-900">
|
||||
<div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center">
|
||||
<a class="flex title-font font-medium items-center text-black mb-0">
|
||||
<img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-black p-2 bg-white rounded-full" alt="Topos Frog Logo" />
|
||||
<input id="universe-viewer" class="hidden bg-transparent xl:block ml-4 text-2xl text-white placeholder-white" id="renamer" type="text" placeholder="Topos">
|
||||
|
||||
<header class="py-0 block">
|
||||
<div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center bg-background">
|
||||
<a class="flex title-font font-medium items-center mb-0">
|
||||
<img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-selection_foreground p-2 rounded-full bg-foreground" alt="Topos Frog Logo"/>
|
||||
<input id="universe-viewer" class="hidden transparent xl:block ml-4 text-2xl bg-background text-brightwhite placeholder-brightwhite" id="renamer" type="text" placeholder="Topos">
|
||||
</a>
|
||||
<nav class="py-2 flex flex-wrap items-center text-base absolute right-0">
|
||||
<a title="Play button (Ctrl+P)" id="play-button-1" class="flex flex-row mr-2 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<!-- Play Button -->
|
||||
<a title="Play button (Ctrl+P)" id="play-button-1" class="bar_button">
|
||||
<svg id="play-icon" class="w-7 h-7" fill="currentColor" viewBox="0 0 14 16">
|
||||
<path d="M0 .984v14.032a1 1 0 0 0 1.506.845l12.006-7.016a.974.974 0 0 0 0-1.69L1.506.139A1 1 0 0 0 0 .984Z"/>
|
||||
</svg>
|
||||
<svg id="pause-icon" class="hidden w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg id="pause-icon" class="hidden w-7 h-7" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9 13a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Zm4 0a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Z"/>
|
||||
</svg>
|
||||
<p id="play-label" class="hidden lg:block text-xl pl-2 text-white inline-block">Play</p>
|
||||
<p id="play-label" class="hidden lg:block text-xl pl-2 inline-block">Play</p>
|
||||
</a>
|
||||
<a title="Stop button (Ctrl+R)" id="stop-button-1" class="flex flex-row mr-2 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
|
||||
<!-- Stop button -->
|
||||
<a title="Stop button (Ctrl+R)" id="stop-button-1" class="bar_button">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Z"/>
|
||||
<rect x="6.5" y="6.5" width="7" height="7" fill="black" rx="1" ry="1"/>
|
||||
<rect x="6.5" y="6.5" width="7" height="7" fill="selection_background" rx="1" ry="1"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Stop</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Stop</p>
|
||||
</a>
|
||||
<a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
|
||||
|
||||
<!-- Eval button -->
|
||||
<a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="bar_button">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Eval</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Eval</p>
|
||||
</a>
|
||||
|
||||
<a title="Clear button" id="clear-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
|
||||
<a title="Clear button" id="clear-button-1" class="bar_button">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
|
||||
<path d="M17 4h-4V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H1a1 1 0 0 0 0 2h1v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1a1 1 0 1 0 0-2ZM7 2h4v2H7V2Zm1 14a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v8Zm4 0a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v8Z"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Clear</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Clear</p>
|
||||
</a>
|
||||
|
||||
<a title="Share button" id="share-button" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19">
|
||||
<a title="Share button" id="share-button" class="bar_button">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Share</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Share</p>
|
||||
</a>
|
||||
|
||||
<a title="Open Documentation (Ctrl+D)" id="doc-button-1" class="flex flex-row hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<a title="Open Documentation (Ctrl+D)" id="doc-button-1" class="bar_button">
|
||||
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Docs</p>
|
||||
<p class="hidden lg:block text-xl pl-2 inline-block">Docs</p>
|
||||
</a>
|
||||
|
||||
</nav>
|
||||
@ -128,138 +153,133 @@
|
||||
</header>
|
||||
|
||||
<div id="documentation" class="hidden">
|
||||
<div id="documentation-page" class="flex flex-row bg-transparent">
|
||||
<aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-neutral-900 text-white">
|
||||
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24">
|
||||
<div id="documentation-page" class="flex flex-row transparent">
|
||||
<aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-background">
|
||||
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24 bg-background">
|
||||
<details class="" open>
|
||||
<summary class="font-semibold lg:text-xl text-orange-300">Basics</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_introduction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Welcome </p>
|
||||
<p rel="noopener noreferrer" id="docs_interface" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Interface</p>
|
||||
<p rel="noopener noreferrer" id="docs_interaction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Interaction</p>
|
||||
<p rel="noopener noreferrer" id="docs_shortcuts" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Keyboard</p>
|
||||
<p rel="noopener noreferrer" id="docs_mouse" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Mouse</p>
|
||||
<p rel="noopener noreferrer" id="docs_code" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Coding</p>
|
||||
<p rel="noopener noreferrer" id="docs_introduction" class="doc_header">Welcome </p>
|
||||
<p rel="noopener noreferrer" id="docs_interface" class="doc_header">Interface</p>
|
||||
<p rel="noopener noreferrer" id="docs_interaction" class="doc_header">Interaction</p>
|
||||
<p rel="noopener noreferrer" id="docs_shortcuts" class="doc_header">Keyboard</p>
|
||||
<p rel="noopener noreferrer" id="docs_mouse" class="doc_header">Mouse</p>
|
||||
<p rel="noopener noreferrer" id="docs_code" class="doc_header">Coding</p>
|
||||
</div>
|
||||
</details>
|
||||
<details class="space-y-2" open>
|
||||
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Learning</summary>
|
||||
<div class="flex flex-col">
|
||||
|
||||
<!-- Time -->
|
||||
<details class="space-y-2">
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Time</summary>
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header">Time</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_time" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Dealing with time</p>
|
||||
<p rel="noopener noreferrer" id="docs_linear" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time & Transport</p>
|
||||
<p rel="noopener noreferrer" id="docs_cyclic" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time & Cycles</p>
|
||||
<p rel="noopener noreferrer" id="docs_longform" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time & Structure</p>
|
||||
<p rel="noopener noreferrer" id="docs_time" class="doc_subheader">Dealing with time</p>
|
||||
<p rel="noopener noreferrer" id="docs_linear" class="doc_subheader">Time & Transport</p>
|
||||
<p rel="noopener noreferrer" id="docs_cyclic" class="doc_subheader">Time & Cycles</p>
|
||||
<p rel="noopener noreferrer" id="docs_longform" class="doc_subheader">Time & Structure</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Audio Engine -->
|
||||
<details class="space-y-2">
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Audio Engine</summary>
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header">Audio Engine</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_audio_basics" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Playing a sound</p>
|
||||
<p rel="noopener noreferrer" id="docs_amplitude" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Amplitude</p>
|
||||
<p rel="noopener noreferrer" id="docs_sampler" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Sampler</p>
|
||||
<p rel="noopener noreferrer" id="docs_synths" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Synths</p>
|
||||
<p rel="noopener noreferrer" id="docs_filters" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Filters</p>
|
||||
<p rel="noopener noreferrer" id="docs_effects" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Effects</p>
|
||||
<p rel="noopener noreferrer" id="docs_audio_basics" class="doc_subheader">Playing a sound</p>
|
||||
<p rel="noopener noreferrer" id="docs_amplitude" class="doc_subheader">Amplitude</p>
|
||||
<p rel="noopener noreferrer" id="docs_sampler" class="doc_subheader">Sampler</p>
|
||||
<p rel="noopener noreferrer" id="docs_synths" class="doc_subheader">Synths</p>
|
||||
<p rel="noopener noreferrer" id="docs_filters" class="doc_subheader">Filters</p>
|
||||
<p rel="noopener noreferrer" id="docs_effects" class="doc_subheader">Effects</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<!-- Samples -->
|
||||
<details class="space-y-2">
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Samples</summary>
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header ">Samples</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_sample_list" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">List of samples</p>
|
||||
<p rel="noopener noreferrer" id="docs_loading_samples" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">External samples</p>
|
||||
<p rel="noopener noreferrer" id="docs_sample_list" class="doc_subheader">List of samples</p>
|
||||
<p rel="noopener noreferrer" id="docs_loading_samples" class="doc_subheader">External samples</p>
|
||||
</div>
|
||||
</details>
|
||||
<p rel="noopener noreferrer" id="docs_midi" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">MIDI</p>
|
||||
<p rel="noopener noreferrer" id="docs_osc" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">OSC</p>
|
||||
<p rel="noopener noreferrer" id="docs_midi" class="doc_header">MIDI</p>
|
||||
<p rel="noopener noreferrer" id="docs_osc" class="doc_header">OSC</p>
|
||||
</div>
|
||||
</details>
|
||||
<details class="space-y-2" open>
|
||||
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Patterns</summary>
|
||||
<div class="flex flex-col">
|
||||
|
||||
<p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Array patterns</p>
|
||||
<p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg doc_header">Array patterns</p>
|
||||
<!-- Ziffers -->
|
||||
<details class="space-y-2">
|
||||
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Ziffers</summary>
|
||||
<summary class="doc_header">Ziffers</summary>
|
||||
<div class="flex flex-col">
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_basics" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Basics</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_scales" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Scales</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_rhythm" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Rhythm</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_algorithmic" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Algorithmic</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_tonnetz" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Tonnetz</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_syncing" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Syncing</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_basics" class="doc_subheader">Basics</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_scales" class="doc_subheader">Scales</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_rhythm" class="doc_subheader">Rhythm</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_algorithmic" class="doc_subheader">Algorithmic</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_tonnetz" class="doc_subheader">Tonnetz</p>
|
||||
<p rel="noopener noreferrer" id="docs_ziffers_syncing" class="doc_subheader">Syncing</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<p rel="noopener noreferrer" id="docs_variables" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Global Variables</p>
|
||||
<p rel="noopener noreferrer" id="docs_lfos" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Low Freq Oscs.</p>
|
||||
<p rel="noopener noreferrer" id="docs_probabilities" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Probabilities</p>
|
||||
<p rel="noopener noreferrer" id="docs_chaining" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Chaining</p>
|
||||
<p rel="noopener noreferrer" id="docs_functions" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Functions</p>
|
||||
<p rel="noopener noreferrer" id="docs_generators" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Generators</p>
|
||||
<!--
|
||||
<p rel="noopener noreferrer" id="docs_reference" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Reference</p>
|
||||
-->
|
||||
<p rel="noopener noreferrer" id="docs_variables" class="doc_header">Global Variables</p>
|
||||
<p rel="noopener noreferrer" id="docs_lfos" class="doc_header">Low Freq Oscs.</p>
|
||||
<p rel="noopener noreferrer" id="docs_probabilities" class="doc_header">Probabilities</p>
|
||||
<p rel="noopener noreferrer" id="docs_chaining" class="doc_header">Chaining</p>
|
||||
<p rel="noopener noreferrer" id="docs_functions" class="doc_header">Functions</p>
|
||||
<p rel="noopener noreferrer" id="docs_generators" class="doc_header">Generators</p>
|
||||
</div>
|
||||
</details>
|
||||
<details class="space-y-2" open>
|
||||
<summary class="font-semibold lg:text-xl text-orange-300">More</summary>
|
||||
<summary class="font-semibold lg:text-xl doc_header">More</summary>
|
||||
<div class="flex flex-col">
|
||||
<a rel="noopener noreferrer" id="docs_synchronisation" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Synchronisation</a>
|
||||
<a rel="noopener noreferrer" id="docs_oscilloscope" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Oscilloscope</a>
|
||||
<a rel="noopener noreferrer" id="docs_bonus" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Bonus/Trivia</a>
|
||||
<a rel="noopener noreferrer" id="docs_about" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">About Topos</a>
|
||||
<a rel="noopener noreferrer" id="docs_synchronisation" class="doc_subheader">Synchronisation</a>
|
||||
<a rel="noopener noreferrer" id="docs_oscilloscope" class="doc_subheader">Oscilloscope</a>
|
||||
<a rel="noopener noreferrer" id="docs_bonus" class="doc_header">Bonus/Trivia</a>
|
||||
<a rel="noopener noreferrer" id="docs_about" class="doc_header">About Topos</a>
|
||||
</div>
|
||||
</details>
|
||||
<details class="" open>
|
||||
<summary class="font-semibold lg:text-xl text-orange-300">Community</summary>
|
||||
<form action="https://github.com/Bubobubobubobubo/topos">
|
||||
<input rel="noopener noreferrer" id="github_link" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg" type="submit" value="GitHub" />
|
||||
<input rel="noopener noreferrer" id="github_link" class="doc_header" type="submit" value="GitHub" />
|
||||
</form>
|
||||
<form action="https://discord.gg/6T67DqBNNT">
|
||||
<input rel="noopener noreferrer" id="discord_link" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg" type="submit" value="Discord" />
|
||||
<input rel="noopener noreferrer" id="discord_link" class="doc_header" type="submit" value="Discord" />
|
||||
</form>
|
||||
<form action="https://ko-fi.com/raphaelbubo">
|
||||
<input rel="noopener noreferrer" id="support_link" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg" type="submit" value="Support" />
|
||||
<input rel="noopener noreferrer" id="support_link" class="doc_header" type="submit" value="Support" />
|
||||
</form>
|
||||
</details>
|
||||
</nav>
|
||||
</aside>
|
||||
<div id="documentation-content" class="w-full flex-grow-1 h-screen overflow-y-scroll lg:px-12 mx-2 my-2 break-words pb-32 bg-transparent"></div>
|
||||
<div id="documentation-content" class="w-full flex-grow-1 h-screen overflow-y-scroll lg:px-12 mx-2 my-2 break-words pb-32 transparent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="app">
|
||||
<!-- This modal is used for switching between buffers -->
|
||||
<div id="modal-buffers" class="invisible bg-gray-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
|
||||
<div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center bg-white">
|
||||
<p class="text-semibold lg:text-2xl text-sm pb-4">Known universes</p>
|
||||
<div id="modal-buffers" class="invisible flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
|
||||
<div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center bg-foreground">
|
||||
<p class="text-semibold lg:text-2xl text-sm pb-4 text-selection_foreground">Known universes</p>
|
||||
<p id="existing-universes" class="text-normal lg:h-auto h-48 overflow-y-auto mb-2"></p>
|
||||
<div id="disclaimer" class="pb-4">
|
||||
<form id="universe-creator">
|
||||
<label for="search" class="mb-2 text-sm font-medium text-gray-900 sr-only text-white">Search</label>
|
||||
<label for="search" class="mb-2 text-sm font-medium sr-only ">Search</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-500 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
||||
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<input name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm border border-neutral-800 outline-0 rounded-lg bg-neutral-800 text-white" placeholder="Buffer..." required>
|
||||
<button id="load-universe-button" class="text-black absolute right-2.5 bottom-2.5 bg-white hover:bg-white focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button>
|
||||
<input name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm border border-neutral-800 outline-0 rounded-lg neutral-800 " placeholder="Buffer..." required>
|
||||
<button id="load-universe-button" class="bg-background text-selection_background absolute right-2.5 bottom-2.5 focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mt-2 flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 border-spacing-y-4">
|
||||
<button id="close-universes-button" data-modal-hide="defaultModal" type="button" class="mt-2 hover:bg-neutral-700 bg-neutral-800 text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Close</button>
|
||||
<div class="mt-2 flex space-x-6 border-t rounded-b border-spacing-y-4">
|
||||
<button id="close-universes-button" data-modal-hide="defaultModal" type="button" class="mt-2 focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-background text-selection_background">Close</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -268,29 +288,26 @@
|
||||
|
||||
<!-- This modal is used for settings -->
|
||||
<div id="modal-settings" class="invisible flex
|
||||
absolute lg:justify-center lg:items-center
|
||||
absolute lg:justify-center lg:items-center
|
||||
lg:overflow-y-auto lg:overflow-x-auto
|
||||
overflow-y-scroll owerflow-x-scroll
|
||||
md:top-0 md:bottom-0 h-screen w-full"
|
||||
>
|
||||
<div class="grid w-full grid-col-3">
|
||||
<div class="bg-white rounded-lg lg:mx-48 mx-0 lg:space-y-8 space-y-4 lg:px-8">
|
||||
<h1 class="lg:mt-12 mt-6 font-semibold rounded-lg
|
||||
bg-gray-800 justify-center lg:text-center lg:pl-0 pl-8 text-white mx-4
|
||||
text-sm lg:text-xl border-b border-gray-300 py-4">Topos Application Settings</h1>
|
||||
<div class="white rounded-lg lg:mx-48 mx-0 lg:space-y-8 space-y-4 lg:px-8 bg-foreground">
|
||||
<h1 class="lg:mt-12 mt-6 font-semibold rounded-lg justify-center lg:text-center lg:pl-0 pl-8 mx-4 subtitle">Topos Application Settings</h1>
|
||||
<div class="flex lg:flex-row flex-col mr-4 ml-4">
|
||||
<!-- Font Size Selection -->
|
||||
<div class="bg-gray-200 rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 underline underline-offset-4">Font Settings</p>
|
||||
<div class="rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 underline underline-offset-4 text-selection_background">Theme Settings</p>
|
||||
<div class="mb-6 mx-4 font-semibold">
|
||||
<label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm">Size:</label>
|
||||
<input type="text" id="font-size-input" type="number" class="bg-gray-50 border border-gray-300 text-gray-900
|
||||
text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700
|
||||
dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
|
||||
<label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm text-foreground">Size:</label>
|
||||
<input type="text" id="font-size-input" type="number" class="border
|
||||
text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 focus:border-blue-500">
|
||||
</div>
|
||||
<label for="font" class="block ml-5 mb-2 font-medium sd:text-sm">Font:</label>
|
||||
<select id="font-family" class="bg-gray-50 ml-4 border border-gray-300 mb-2
|
||||
text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
|
||||
<label for="font" class="block ml-5 mb-2 font-medium sd:text-sm text-foreground">Font:</label>
|
||||
<select id="font-family" class=" ml-4 border mb-2
|
||||
text-sm rounded-lg focus:border-blue-500 block p-2.5">
|
||||
<option value="IBM Plex Mono">IBM Plex Mono</option>
|
||||
<option value="Jet Brains">Jet Brains</option>
|
||||
<option value="Courier">Courier</option>
|
||||
@ -302,186 +319,191 @@
|
||||
<option value="Steps Mono">Steps Mono</option>
|
||||
<option value="Steps Mono Thin">Steps Mono Thin</option>
|
||||
</select>
|
||||
<div class="rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||
<label for="theme" class="block ml-5 mb-2 font-medium sd:text-sm text-foreground">Theme:</label>
|
||||
<select id="theme-selector" class="ml-4 border mb-2
|
||||
text-sm rounded-lg block p-2.5">
|
||||
</select>
|
||||
<div id="theme-previewer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Editor mode selection -->
|
||||
<div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Editor options</p>
|
||||
<div class="rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">Editor options</p>
|
||||
<!-- Checkboxes -->
|
||||
<div class="pr-4">
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="vim-mode" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Vim Mode</label>
|
||||
<input id="vim-mode" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-selection_background">Vim Mode</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Line Numbers</label>
|
||||
<input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Line Numbers</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-time-position" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Time Position</label>
|
||||
<input id="show-time-position" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Time Position</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Hovering Tips</label>
|
||||
<input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Hovering Tips</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="show-completions" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Completions</label>
|
||||
<input id="show-completions" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Completions</label>
|
||||
</div>
|
||||
<div class="flex items-center mb-4 ml-5">
|
||||
<input id="load-demo-songs" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Load Demo Song</label>
|
||||
<input id="load-demo-songs" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Load Demo Song</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">File Management</p>
|
||||
<div class="rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">File Management</p>
|
||||
<div class="flex flex-col space-y-2 pb-2">
|
||||
<button id="download-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<button id="download-universes" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
||||
<svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||
<span>Download universes</span>
|
||||
<span class="text-selection_foreground">Download universes</span>
|
||||
</button>
|
||||
<button id="upload-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<button id="upload-universes" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
|
||||
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
|
||||
<span>Upload universes</span>
|
||||
<span class="text-selection_foreground">Upload universes</span>
|
||||
</button>
|
||||
<button id="destroy-universes" class="bg-red-800 hover:bg-red-900 text-white font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<button id="destroy-universes" class="bg-brightwhite font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||
</svg>
|
||||
<span>Destroy universes</span>
|
||||
<span class="text-selection_foreground">Destroy universes</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Midi settings -->
|
||||
<div id="midi-settings-container" class="bg-gray-200 rounded-lg flex lg:flex-row flex-col mx-4 my-4 pt-4">
|
||||
<div id="midi-settings-container" class="rounded-lg flex lg:flex-row flex-col mx-4 my-4 pt-4 bg-color bg-selection_foreground">
|
||||
<div class="lg:flex lg:flex-row w-fit">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">MIDI I/O Settings</p>
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">MIDI I/O Settings</p>
|
||||
<div class="flex items-center mb-4 ml-6">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">MIDI Clock: </label>
|
||||
<select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">MIDI Clock: </label>
|
||||
<select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600">
|
||||
<option value="-1">Internal</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lg:flex block items-center mb-4 ml-6">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Clock PPQN: </label>
|
||||
<select id="midi-clock-ppqn-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 mr-2 text-sm font-medium text-foreground">Clock PPQN: </label>
|
||||
<select id="midi-clock-ppqn-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600">
|
||||
<option value="24">24</option>
|
||||
<option value="48">48</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lg:flex block items-center mb-4 ml-6">
|
||||
<input id="send-midi-clock" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Send MIDI Clock</label>
|
||||
<input id="send-midi-clock" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Send MIDI Clock</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:flex block flex-row">
|
||||
<div class="flex items-center mb-4 ml-6">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">MIDI input: </label>
|
||||
<select id="default-midi-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
|
||||
<label for="default-checkbox" class="ml-2 mr-2 text-sm font-medium text-foreground">MIDI input: </label>
|
||||
<select id="default-midi-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600 focus:ring-2">
|
||||
<option value="-1">None</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lg:flex block items-center mb-4 ml-6">
|
||||
<input id="midi-channels-scripts" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Route channels to scripts</label>
|
||||
<input id="midi-channels-scripts" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 rounded focus:ring-blue-600">
|
||||
<label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Route channels to scripts</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audio nudge slider -->
|
||||
<div id="midi-settings-container" class="bg-gray-200 rounded-lg flex flex-col mx-4 my-4 pt-4 pb-2">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Audio/Event Nudging</p>
|
||||
<div class="flex flex-column pb-2">
|
||||
<p class="pt-0.5 ml-4">Clock:</p>
|
||||
<div id="midi-settings-container" class="rounded-lg flex flex-col mx-4 my-4 pt-4 pb-2 bg-selection_foreground">
|
||||
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">Audio/Event Nudging</p> <div class="flex flex-column pb-2">
|
||||
<p class="pt-0.5 ml-4 text-foreground">Clock:</p>
|
||||
<input
|
||||
type="range" id="audio_nudge"
|
||||
name="audiorangeInput"
|
||||
min="-200" max="200"
|
||||
value="0"
|
||||
class="w-full ml-4"
|
||||
class="w-full ml-4 text-red"
|
||||
oninput="nudgenumber.value=audio_nudge.value"
|
||||
>
|
||||
<output
|
||||
name="nudgenumber"
|
||||
id="nudgenumber"
|
||||
for="audiorangeInput"
|
||||
class="bg-gray-500 rounded-lg ml-2 mr-4 px-4 py-1 text-white"
|
||||
class="rounded-lg ml-2 mr-4 px-4 py-1 text-foreground"
|
||||
>0</output>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-column">
|
||||
|
||||
<p class="pt-0.5 ml-4">Audio:</p>
|
||||
<p class="pt-0.5 ml-4 text-foreground">Audio:</p>
|
||||
<input
|
||||
type="range" id="dough_nudge"
|
||||
name="doughrangeInput"
|
||||
min="0" max="100"
|
||||
value="0"
|
||||
class="w-full ml-4"
|
||||
class="w-full ml-4 text-foreground"
|
||||
oninput="doughnumber.value=dough_nudge.value"
|
||||
>
|
||||
<output
|
||||
name="doughnumber"
|
||||
id="doughnumber"
|
||||
for="doughrangeInput"
|
||||
class="bg-gray-500 rounded-lg ml-2 mr-4 px-4 py-1 text-white"
|
||||
class="rounded-lg ml-2 mr-4 px-4 py-1 text-foreground"
|
||||
>0</output>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4 pb-36 lg:pb-0">
|
||||
<div class="flex space-x-6 border-t rounded-b mx-4 border-spacing-y-4 pb-36 lg:pb-0">
|
||||
<button id="close-settings-button" data-modal-hide="defaultModal" type="button" class="
|
||||
hover:bg-gray-700 bg-gray-800 mt-4 mb-4 text-white focus:ring-4
|
||||
font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button>
|
||||
hover:bg-background bg-background mt-4 mb-4 focus:ring-4
|
||||
font-medium rounded-lg text-sm px-5 py-2.5 text-center text-selection_background">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row max-h-fit">
|
||||
|
||||
<!-- This is a lateral bar that will inherit the header buttons if the window is too small. -->
|
||||
<aside id="sidebar" class="
|
||||
flex flex-col items-center w-14
|
||||
h-screen py-2 border-r
|
||||
rtl:border-l max-h-fit
|
||||
rtl:border-r-0 bg-neutral-900
|
||||
dark:border-neutral-700 border-none"
|
||||
rtl:border-r-0 bg-background
|
||||
border-neutral-700 border-none"
|
||||
>
|
||||
<nav class="flex flex-col space-y-6">
|
||||
<a title="Local Scripts (Ctrl + L)" id="local-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
|
||||
<a title="Local Scripts (Ctrl + L)" id="local-button" class="side_button">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
|
||||
<path d="M18 5H0v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5Zm-7.258-2L9.092.8a2.009 2.009 0 0 0-1.6-.8H2.049a2 2 0 0 0-2 2v1h10.693Z"/>
|
||||
</svg>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Global Script (Ctrl + G)" id="global-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg hover:bg-gray-800">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 16">
|
||||
<a title="Global Script (Ctrl + G)" id="global-button" class="side_button">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 16">
|
||||
<path d="M14.316.051A1 1 0 0 0 13 1v8.473A4.49 4.49 0 0 0 11 9c-2.206 0-4 1.525-4 3.4s1.794 3.4 4 3.4 4-1.526 4-3.4a2.945 2.945 0 0 0-.067-.566c.041-.107.064-.22.067-.334V2.763A2.974 2.974 0 0 1 16 5a1 1 0 0 0 2 0C18 1.322 14.467.1 14.316.051ZM10 3H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Z"/>
|
||||
<path d="M10 7H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Zm-5 4H1a1 1 0 0 1 0-2h4a1 1 0 1 1 0 2Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Initialisation Script (Ctrl + I)" id="init-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
|
||||
<a title="Initialisation Script (Ctrl + I)" id="init-button" class="side_button">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1v12m0 0 4-4m-4 4L1 9"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Project notes (Ctrl + N)" id="note-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<a title="Project notes (Ctrl + N)" id="note-button" class="side_button">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="m13.835 7.578-.005.007-7.137 7.137 2.139 2.138 7.143-7.142-2.14-2.14Zm-10.696 3.59 2.139 2.14 7.138-7.137.007-.005-2.141-2.141-7.143 7.143Zm1.433 4.261L2 12.852.051 18.684a1 1 0 0 0 1.265 1.264L7.147 18l-2.575-2.571Zm14.249-14.25a4.03 4.03 0 0 0-5.693 0L11.7 2.611 17.389 8.3l1.432-1.432a4.029 4.029 0 0 0 0-5.689Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a title="Application Settings" id="settings-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<a title="Application Settings" id="settings-button" class="side_button">
|
||||
<svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
@ -495,55 +517,54 @@
|
||||
|
||||
<!-- Tabs for local files -->
|
||||
<div class="min-w-screen flex grow flex-col">
|
||||
<ul id="local-script-tabs" class=" flex text-xl font-medium text-center text-white bg-neutral-900 space-x-1 lg:space-x-8">
|
||||
<ul id="local-script-tabs" class=" flex text-xl font-medium text-center neutral-900 space-x-1 lg:space-x-8">
|
||||
<li class="pl-5">
|
||||
<a title="Local Script 1 (F1)" id="tab-1" class="bg-orange-300 inline-block lg:px-4 px-2 py-1 text-white hover:bg-gray-800">1</a>
|
||||
<a title="Local Script 1 (F1)" id="tab-1" class="tab_panel">1</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 2 (F2)" id="tab-2" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">2</a>
|
||||
<a title="Local Script 2 (F2)" id="tab-2" class="tab_panel">2</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 3 (F3)" id="tab-3" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">3</a>
|
||||
<a title="Local Script 3 (F3)" id="tab-3" class="tab_panel">3</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 4 (F4)" id="tab-4" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">4</a>
|
||||
<a title="Local Script 4 (F4)" id="tab-4" class="tab_panel">4</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 5 (F5)" id="tab-5" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">5</a>
|
||||
<a title="Local Script 5 (F5)" id="tab-5" class="tab_panel">5</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 6 (F6)" id="tab-6" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">6</a>
|
||||
<a title="Local Script 6 (F6)" id="tab-6" class="tab_panel">6</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 7 (F7)" id="tab-7" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">7</a>
|
||||
<a title="Local Script 7 (F7)" id="tab-7" class="tab_panel">7</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 8 (F8)" id="tab-8" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">8</a>
|
||||
<a title="Local Script 8 (F8)" id="tab-8" class="tab_panel">8</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a title="Local Script 9 (F9)" id="tab-9" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">9</a>
|
||||
<a title="Local Script 9 (F9)" id="tab-9" class="tab_panel">9</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!-- Here comes the editor itself -->
|
||||
<div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
|
||||
<canvas id="hydra-bg" class="fullscreencanvas"></canvas>
|
||||
<canvas id="hydra-" class="fullscreencanvas"></canvas>
|
||||
<canvas id="scope" class="fullscreencanvas"></canvas>
|
||||
<canvas id="feedback" class="fullscreencanvas"></canvas>
|
||||
</div>
|
||||
<p id="error_line" class="hidden text-red-400 w-screen bg-neutral-900 font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
|
||||
<p id="error_line" class="hidden w-screen bg-background font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
|
||||
<template id="ui-known-universe-item-template">
|
||||
<!-- A known universe button in "opening" interface -->
|
||||
<li class="hover:fill-black hover:bg-white py-2 hover:text-black flex justify-between px-4">
|
||||
<li class="py-2 px-4 flex justify-between text-brightwhite hover:bg-selection_background hover:text-selection_foreground">
|
||||
<button class="universe-name load-universe" title="Load this universe">Universe Name</button>
|
||||
<button class="delete-universe" title="Delete this universe">🗑</button>
|
||||
</li>
|
||||
</template>
|
||||
</body>
|
||||
<p id="timeviewer" class="rounded-lg px-2 py-2 font-bold bg-white cursor-textpointer-events-none select-none text-black text-sm absolute bottom-2 right-2"></p>
|
||||
<p id="fillviewer" class="invisible rounded-lg px-2 py-2 font-bold bg-white cursor-textpointer-events-none select-none text-black text-sm absolute right-2 bottom-12">/////// Fill ///////</p>
|
||||
<p id="timeviewer" class="rounded-lg px-2 py-2 font-bold white cursor-textpointer-events-none select-none text-black text-sm absolute bottom-2 right-2"></p>
|
||||
<p id="fillviewer" class="invisible rounded-lg px-2 py-2 font-bold white cursor-textpointer-events-none select-none text-black text-sm absolute right-2 bottom-12">/////// Fill ///////</p>
|
||||
</html>
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
"autoprefixer": "^10.4.14",
|
||||
"codemirror": "^6.0.1",
|
||||
"fflate": "^0.8.0",
|
||||
"highlight.js": "^11.9.0",
|
||||
"jisg": "^0.9.7",
|
||||
"lru-cache": "^10.0.1",
|
||||
"marked": "^7.0.3",
|
||||
|
||||
18
src/API.ts
18
src/API.ts
@ -1,6 +1,7 @@
|
||||
import { EditorView } from "@codemirror/view";
|
||||
import { sendToServer, type OSCMessage, oscMessages } from "./IO/OSC";
|
||||
import { getAllScaleNotes, nearScales, seededRandom } from "zifferjs";
|
||||
import colorschemes from "./colors.json";
|
||||
import {
|
||||
MidiCCEvent,
|
||||
MidiConnection,
|
||||
@ -220,7 +221,7 @@ export class UserAPI {
|
||||
clearTimeout(this.printTimeoutID);
|
||||
clearTimeout(this.errorTimeoutID);
|
||||
this.app.interface.error_line.innerHTML = message as string;
|
||||
this.app.interface.error_line.style.color = "white";
|
||||
this.app.interface.error_line.style.color = "red";
|
||||
this.app.interface.error_line.classList.remove("hidden");
|
||||
// @ts-ignore
|
||||
this.printTimeoutID = setTimeout(
|
||||
@ -2272,4 +2273,19 @@ export class UserAPI {
|
||||
this.cueTimes[functionName] = this.app.clock.pulses_since_origin;
|
||||
};
|
||||
|
||||
public theme = (color_scheme: string): void => {
|
||||
this.app.readTheme(color_scheme);
|
||||
console.log("Changing color scheme for: ", color_scheme)
|
||||
}
|
||||
|
||||
public randomTheme = (): void => {
|
||||
let theme_names = this.getThemes();
|
||||
let selected_theme = theme_names[Math.floor(Math.random() * theme_names.length)];
|
||||
this.app.readTheme(selected_theme);
|
||||
}
|
||||
|
||||
public getThemes = (): string[] => {
|
||||
return Object.keys(colorschemes);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -37,18 +37,17 @@ import { ziffers_rhythm } from "./documentation/patterns/ziffers/ziffers_rhythm"
|
||||
import { ziffers_algorithmic } from "./documentation/patterns/ziffers/ziffers_algorithmic";
|
||||
import { ziffers_tonnetz } from "./documentation/patterns/ziffers/ziffers_tonnetz";
|
||||
import { ziffers_syncing } from "./documentation/patterns/ziffers/ziffers_syncing";
|
||||
|
||||
import { synths } from "./documentation/learning/audio_engine/synths";
|
||||
|
||||
// Setting up the Markdown converter with syntax highlighting
|
||||
import showdown from "showdown";
|
||||
import showdownHighlight from "showdown-highlight";
|
||||
import "highlight.js/styles/atom-one-dark-reasonable.min.css";
|
||||
import { createDocumentationStyle } from "./DomElements";
|
||||
import { filters } from "./documentation/learning/audio_engine/filters";
|
||||
showdown.setFlavor("github");
|
||||
|
||||
export const key_shortcut = (shortcut: string): string => {
|
||||
return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">${shortcut}</kbd>`;
|
||||
return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-brightwhite bg-brightblack border border-black rounded-lg">${shortcut}</kbd>`;
|
||||
};
|
||||
|
||||
export const makeExampleFactory = (application: Editor): Function => {
|
||||
@ -64,13 +63,11 @@ export const makeExampleFactory = (application: Editor): Function => {
|
||||
return `
|
||||
<details ${open ? "open" : ""}>
|
||||
<summary >${description}
|
||||
<button class="ml-4 py-1 align-top text-base px-4 hover:bg-green-700 bg-emerald-600 inline-block" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶️ Play</button>
|
||||
<button class="py-1 text-base px-4 hover:bg-neutral-600 bg-neutral-500 inline-block " onclick="app.api._stopDocExample()">⏸️ Pause</button>
|
||||
<button class="py-1 text-base px-4 hover:bg-neutral-900 bg-neutral-800 inline-block " onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
|
||||
<button class="ml-4 py-1 align-top text-base px-4 hover:bg-brightgreen bg-green inline-block text-selection_foreground" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶️ Play</button>
|
||||
<button class="py-1 text-base px-4 hover:brightyellow bg-yellow text-selection_foreground inline-block" onclick="app.api._stopDocExample()">⏸️ Pause</button>
|
||||
<button class="py-1 text-base px-4 hover:bg-brightmagenta bg-magenta text-selection_foreground inline-block" onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
|
||||
</summary>
|
||||
\`\`\`javascript
|
||||
${code}
|
||||
\`\`\`
|
||||
<pre><code class="hljs language-javascript">${code.trim()}</code></pre>
|
||||
</details>
|
||||
`;
|
||||
};
|
||||
@ -172,12 +169,15 @@ export const updateDocumentationContent = (app: Editor, bindings: any) => {
|
||||
* @param app - The editor application.
|
||||
* @param bindings - Additional bindings for the showdown converter.
|
||||
*/
|
||||
let loading_message: string = "<h1 class='border-4 py-2 px-2 mx-48 mt-48 text-center text-2xl text-white'>Loading! <b class='text-red'>Clic to refresh!</b></h1>";
|
||||
let loading_message: string = "<h1 class='border-4 py-2 px-2 mx-48 mt-48 text-center text-2xl text-brightwhite'>Loading! <b class='text-red'>Clic to refresh!</b></h1>";
|
||||
const converter = new showdown.Converter({
|
||||
emoji: true,
|
||||
moreStyling: true,
|
||||
backslashEscapesHTMLTags: true,
|
||||
extensions: [showdownHighlight({ auto_detection: true }), ...bindings],
|
||||
extensions: [showdownHighlight({
|
||||
pre: true,
|
||||
auto_detection: false
|
||||
}), ...bindings],
|
||||
});
|
||||
console.log(app.currentDocumentationPane);
|
||||
|
||||
|
||||
@ -43,6 +43,8 @@ export const singleElements = {
|
||||
midi_clock_checkbox: "send-midi-clock",
|
||||
midi_channels_scripts: "midi-channels-scripts",
|
||||
midi_clock_ppqn: "midi-clock-ppqn-input",
|
||||
theme_selector: "theme-selector",
|
||||
theme_previewer: "theme-previewer",
|
||||
load_demo_songs: "load-demo-songs",
|
||||
normal_mode_button: "normal-mode",
|
||||
vim_mode_button: "vim-mode",
|
||||
@ -70,30 +72,30 @@ export const createDocumentationStyle = (app: Editor) => {
|
||||
*/
|
||||
|
||||
return {
|
||||
h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-4 pt-4 pb-3 px-2",
|
||||
h2: "text-white lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-2 pt-12 pb-3 px-2",
|
||||
h3: "text-white lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 border-l-2 border-b-2 lg:mb-4 mb-4 pb-2 px-2 lg:mt-16",
|
||||
h1: "text-brightwhite lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-4 pt-4 pb-3 px-2",
|
||||
h2: "text-brightwhite lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-2 pt-12 pb-3 px-2",
|
||||
h3: "text-brightwhite lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 border-l-2 border-b-2 lg:mb-4 mb-4 pb-2 px-2 lg:mt-16",
|
||||
ul: "text-underline ml-12",
|
||||
li: "list-disc lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 my-2 leading-normal",
|
||||
p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal",
|
||||
warning:
|
||||
"animate-pulse lg:text-2xl font-bold text-rose-600 lg:mx-6 mx-2 my-4 leading-normal",
|
||||
a: "lg:text-2xl text-base text-orange-300",
|
||||
"animate-pulse lg:text-2xl font-bold text-brightred lg:mx-6 mx-2 my-4 leading-normal",
|
||||
a: "lg:text-2xl text-base text-white",
|
||||
code: `lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden`,
|
||||
icode:
|
||||
"lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
|
||||
ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
|
||||
blockquote: "text-neutral-200 border-l-4 border-neutral-500 pl-4 my-4 mx-4",
|
||||
"lg:my-1 my-1 lg:text-xl sm:text-xs text-brightwhite font-mono bg-brightblack",
|
||||
ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-brightwhite font-mono bg-brightblack",
|
||||
blockquote: "text-brightwhite border-l-4 border-white pl-4 my-4 mx-4",
|
||||
details:
|
||||
"lg:mx-20 py-2 px-6 lg:text-2xl text-white border-l-8 box-border bg-neutral-900",
|
||||
"lg:mx-20 py-2 px-6 lg:text-2xl text-white border-l-8 box-border bg-selection_foreground",
|
||||
summary: "font-semibold text-xl",
|
||||
table:
|
||||
"justify-center lg:my-12 my-2 lg:mx-12 mx-2 lg:text-2xl text-base w-full text-left text-white border-collapse",
|
||||
thead:
|
||||
"text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400",
|
||||
"text-xs text-gray-700 uppercase",
|
||||
th: "",
|
||||
td: "",
|
||||
tr: "",
|
||||
box: "border bg-red-500",
|
||||
box: "border bg-red",
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { Prec } from "@codemirror/state";
|
||||
import { indentWithTab } from "@codemirror/commands";
|
||||
import { tags as t } from "@lezer/highlight";
|
||||
import {
|
||||
keymap,
|
||||
lineNumbers,
|
||||
@ -7,8 +8,6 @@ import {
|
||||
drawSelection,
|
||||
highlightActiveLine,
|
||||
dropCursor,
|
||||
// rectangularSelection,
|
||||
// crosshairCursor,
|
||||
highlightActiveLineGutter,
|
||||
} from "@codemirror/view";
|
||||
import { Extension, EditorState } from "@codemirror/state";
|
||||
@ -18,6 +17,7 @@ import {
|
||||
syntaxHighlighting,
|
||||
indentOnInput,
|
||||
bracketMatching,
|
||||
HighlightStyle,
|
||||
} from "@codemirror/language";
|
||||
import { defaultKeymap, historyKeymap, history } from "@codemirror/commands";
|
||||
import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
|
||||
@ -30,12 +30,215 @@ import { lintKeymap } from "@codemirror/lint";
|
||||
import { Compartment } from "@codemirror/state";
|
||||
import { Editor } from "./main";
|
||||
import { EditorView } from "codemirror";
|
||||
import { toposTheme } from "./themes/toposTheme";
|
||||
import { javascript } from "@codemirror/lang-javascript";
|
||||
import { inlineHoveringTips } from "./documentation/inlineHelp";
|
||||
import { toposCompletions, soundCompletions } from "./documentation/inlineHelp";
|
||||
import { javascriptLanguage } from "@codemirror/lang-javascript";
|
||||
|
||||
export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension => {
|
||||
// @ts-ignore
|
||||
const black = theme["black"],
|
||||
red = theme["red"],
|
||||
green = theme["green"],
|
||||
yellow = theme["yellow"],
|
||||
blue = theme["blue"],
|
||||
magenta = theme["magenta"],
|
||||
cyan = theme["cyan"],
|
||||
white = theme["white"],
|
||||
// @ts-ignore
|
||||
brightblack = theme["brightblack"],
|
||||
// @ts-ignore
|
||||
brightred = theme["brightred"],
|
||||
brightgreen = theme["brightgreen"],
|
||||
// @ts-ignore
|
||||
brightyellow = theme["brightyellow"],
|
||||
// @ts-ignore
|
||||
brightblue = theme["brightblue"],
|
||||
// @ts-ignore
|
||||
brightmagenta = theme["brightmagenta"],
|
||||
// @ts-ignore
|
||||
brightcyan = theme["brightcyan"],
|
||||
brightwhite = theme["brightwhite"],
|
||||
background = theme["background"],
|
||||
selection_foreground = theme["selection_foreground"],
|
||||
cursor = theme["cursor"],
|
||||
foreground = theme["foreground"],
|
||||
selection_background = theme["selection_background"];
|
||||
const toposTheme = EditorView.theme( {
|
||||
"&": {
|
||||
color: background,
|
||||
// backgroundColor: background,
|
||||
backgroundColor: "transparent",
|
||||
fontSize: "24px",
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-content": {
|
||||
caretColor: cursor,
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-cursor, .cm-dropCursor": {
|
||||
borderLeftColor: cursor,
|
||||
},
|
||||
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
|
||||
{
|
||||
backgroundColor: selection_foreground,
|
||||
border: `0.5px solid ${selection_background}`,
|
||||
},
|
||||
".cm-panels": {
|
||||
backgroundColor: selection_background,
|
||||
color: red,
|
||||
},
|
||||
".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
|
||||
".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
|
||||
".cm-search.cm-panel": { backgroundColor: "transparent" },
|
||||
".cm-searchMatch": {
|
||||
outline: `1px solid ${magenta}`,
|
||||
},
|
||||
".cm-searchMatch.cm-searchMatch-selected": {
|
||||
backgroundColor: red,
|
||||
},
|
||||
".cm-activeLine": {
|
||||
// backgroundColor: highlightBackground
|
||||
backgroundColor: `${selection_foreground}`,
|
||||
},
|
||||
".cm-selectionMatch": {
|
||||
backgroundColor: yellow,
|
||||
outline: `1px solid ${red}`,
|
||||
},
|
||||
"&.cm-focused .cm-matchingBracket": {
|
||||
color: yellow,
|
||||
// outline: `1px solid ${base02}`,
|
||||
},
|
||||
|
||||
"&.cm-focused .cm-nonmatchingBracket": {
|
||||
color: yellow,
|
||||
},
|
||||
|
||||
".cm-gutters": {
|
||||
//backgroundColor: base00,
|
||||
backgroundColor: "transparent",
|
||||
color: foreground,
|
||||
},
|
||||
".cm-activeLineGutter": {
|
||||
backgroundColor: selection_background,
|
||||
color: selection_foreground,
|
||||
},
|
||||
|
||||
".cm-foldPlaceholder": {
|
||||
border: "none",
|
||||
color: `${blue}`,
|
||||
},
|
||||
".cm-tooltip": {
|
||||
border: "none",
|
||||
backgroundColor: background,
|
||||
},
|
||||
".cm-tooltip .cm-tooltip-arrow:before": {},
|
||||
".cm-tooltip .cm-tooltip-arrow:after": {
|
||||
borderTopColor: background,
|
||||
borderBottomColor: background,
|
||||
},
|
||||
".cm-tooltip-autocomplete": {
|
||||
"& > ul > li[aria-selected]": {
|
||||
backgroundColor: background,
|
||||
color: background,
|
||||
},
|
||||
},
|
||||
},
|
||||
{ dark: true },
|
||||
);
|
||||
|
||||
let toposHighlightStyle = HighlightStyle.define([
|
||||
{ tag: t.paren, color: brightwhite },
|
||||
{ tag: [t.propertyName, t.punctuation, t.variableName], color: brightwhite },
|
||||
{ tag: t.keyword, color: yellow },
|
||||
{ tag: [t.name, t.deleted, t.character, t.macroName], color: red, },
|
||||
{ tag: [t.function(t.variableName)], color: blue },
|
||||
{ tag: [t.labelName], color: red },
|
||||
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: cyan, },
|
||||
{ tag: [t.definition(t.name), t.separator], color: magenta },
|
||||
{ tag: [t.brace], color: white },
|
||||
{ tag: [t.annotation], color: blue, },
|
||||
{ tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: yellow, },
|
||||
{ tag: [t.typeName, t.className], color: magenta, },
|
||||
{ tag: [t.operator, t.operatorKeyword], color: blue, },
|
||||
{ tag: [t.tagName], color: blue, },
|
||||
{ tag: [t.squareBracket], color: blue, },
|
||||
{ tag: [t.angleBracket], color: blue, },
|
||||
{ tag: [t.attributeName], color: red, },
|
||||
{ tag: [t.regexp], color: brightgreen, },
|
||||
{ tag: [t.quote], color: green, },
|
||||
{ tag: [t.string], color: green },
|
||||
{
|
||||
tag: t.link,
|
||||
color: green,
|
||||
textDecoration: "underline",
|
||||
textUnderlinePosition: "under",
|
||||
},
|
||||
{
|
||||
tag: [t.url, t.escape, t.special(t.string)],
|
||||
color: green,
|
||||
},
|
||||
{ tag: [t.meta], color: brightwhite },
|
||||
{ tag: [t.comment], color: brightwhite, fontStyle: "italic" },
|
||||
{ tag: t.monospace, color: brightwhite },
|
||||
{ tag: t.strong, fontWeight: "bold", color: white },
|
||||
{ tag: t.emphasis, fontStyle: "italic", color: white },
|
||||
{ tag: t.strikethrough, textDecoration: "line-through" },
|
||||
{ tag: t.heading, fontWeight: "bold", color: white },
|
||||
{ tag: t.heading1, fontWeight: "bold", color: white },
|
||||
{
|
||||
tag: [t.heading2, t.heading3, t.heading4],
|
||||
fontWeight: "bold",
|
||||
color: yellow,
|
||||
},
|
||||
{
|
||||
tag: [t.heading5, t.heading6],
|
||||
color: red,
|
||||
},
|
||||
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: green},
|
||||
{
|
||||
tag: [t.processingInstruction, t.inserted],
|
||||
color: green,
|
||||
},
|
||||
{
|
||||
tag: [t.contentSeparator],
|
||||
color: green,
|
||||
},
|
||||
{ tag: t.invalid, color: red, borderBottom: `1px dotted ${red}` },
|
||||
]);
|
||||
return [ toposTheme, syntaxHighlighting(toposHighlightStyle),
|
||||
]
|
||||
}
|
||||
|
||||
// const debugTheme = EditorView.theme({
|
||||
// ".cm-line span": {
|
||||
// position: "relative",
|
||||
// },
|
||||
// ".cm-line span:hover::after": {
|
||||
// position: "absolute",
|
||||
// bottom: "100%",
|
||||
// left: 0,
|
||||
// background: "black",
|
||||
// color: "white",
|
||||
// border: "solid 2px",
|
||||
// borderRadius: "5px",
|
||||
// content: "var(--tags)",
|
||||
// width: `max-content`,
|
||||
// padding: "1px 4px",
|
||||
// zIndex: 10,
|
||||
// pointerEvents: "none",
|
||||
// },
|
||||
// });
|
||||
|
||||
// const debugHighlightStyle = HighlightStyle.define(
|
||||
// // @ts-ignore
|
||||
// Object.entries(t).map(([key, value]) => {
|
||||
// return { tag: value, "--tags": `"tag.${key}"` };
|
||||
// })
|
||||
// );
|
||||
// const debug = [debugTheme, syntaxHighlighting(debugHighlightStyle)];
|
||||
|
||||
|
||||
export const jsCompletions = javascriptLanguage.data.of({
|
||||
autocomplete: toposCompletions,
|
||||
});
|
||||
@ -70,6 +273,7 @@ export const editorSetup: Extension = (() => [
|
||||
export const installEditor = (app: Editor) => {
|
||||
app.vimModeCompartment = new Compartment();
|
||||
app.hoveringCompartment = new Compartment();
|
||||
app.themeCompartment = new Compartment();
|
||||
app.completionsCompartment = new Compartment();
|
||||
app.withLineNumbers = new Compartment();
|
||||
app.chosenLanguage = new Compartment();
|
||||
@ -99,7 +303,10 @@ export const installEditor = (app: Editor) => {
|
||||
app.settings.completions ? [jsCompletions, toposSoundCompletions] : [],
|
||||
),
|
||||
editorSetup,
|
||||
toposTheme,
|
||||
app.themeCompartment.of(
|
||||
getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")),
|
||||
// debug
|
||||
),
|
||||
app.chosenLanguage.of(javascript()),
|
||||
];
|
||||
app.dynamicPlugins = new Compartment();
|
||||
|
||||
@ -136,7 +136,7 @@ export class AppSettings {
|
||||
*/
|
||||
|
||||
public vimMode: boolean = false;
|
||||
public theme: string = "toposTheme";
|
||||
public theme: string = "Everblush";
|
||||
public font: string = "IBM Plex Mono";
|
||||
public font_size: number = 24;
|
||||
public universes: Universes;
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { EditorView } from "codemirror";
|
||||
import { vim } from "@replit/codemirror-vim";
|
||||
import { type Editor } from "./main";
|
||||
import colors from "./colors.json";
|
||||
import {
|
||||
documentation_factory,
|
||||
hideDocumentation,
|
||||
@ -57,9 +58,9 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
for (let i = 0; i < tabs.length; i++) {
|
||||
tabs[i].addEventListener("click", (event) => {
|
||||
// Updating the CSS accordingly
|
||||
tabs[i].classList.add("bg-orange-300");
|
||||
tabs[i].classList.add("bg-foreground");
|
||||
for (let j = 0; j < tabs.length; j++) {
|
||||
if (j != i) tabs[j].classList.remove("bg-orange-300");
|
||||
if (j != i) tabs[j].classList.remove("bg-foreground");
|
||||
}
|
||||
app.currentFile().candidate = app.view.state.doc.toString();
|
||||
|
||||
@ -289,6 +290,18 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
});
|
||||
});
|
||||
|
||||
app.interface.theme_selector.addEventListener("change", () => {
|
||||
app.settings.theme = (app.interface.theme_selector as HTMLSelectElement).value;
|
||||
app.readTheme(app.settings.theme);
|
||||
// @ts-ignore
|
||||
let selected_theme = colors[app.settings.theme as string];
|
||||
let theme_preview = "";
|
||||
for (const [key, _] of Object.entries(selected_theme)) {
|
||||
theme_preview += `<p class="inline text-${key} bg-${key}">█</div>`;
|
||||
}
|
||||
app.interface.theme_previewer.innerHTML = theme_preview;
|
||||
});
|
||||
|
||||
app.interface.settings_button.addEventListener("click", () => {
|
||||
// Populate the font selector
|
||||
const fontFamilySelect = document.getElementById(
|
||||
@ -298,6 +311,26 @@ export const installInterfaceLogic = (app: Editor) => {
|
||||
fontFamilySelect.value = app.settings.font;
|
||||
}
|
||||
|
||||
app.interface.theme_selector.innerHTML = "";
|
||||
let all_themes = Object.keys(colors);
|
||||
all_themes.sort((a, b) => {
|
||||
return a.toLowerCase().localeCompare(b.toLowerCase());
|
||||
});
|
||||
app.interface.theme_selector.innerHTML = all_themes.map((color) => {
|
||||
return `<option value="${color}">${color}</option>`
|
||||
}).join("");
|
||||
// Set the selected theme in the selector to app.settings.theme
|
||||
// @ts-ignore
|
||||
app.interface.theme_selector.value = app.settings.theme;
|
||||
|
||||
// @ts-ignore
|
||||
let selected_theme = colors[app.settings.theme as string];
|
||||
let theme_preview = "<div class='ml-6'>";
|
||||
for (const [key, _] of Object.entries(selected_theme)) {
|
||||
theme_preview += `<p class="inline text-${key} bg-${key}">█</p>`;
|
||||
}
|
||||
theme_preview += "</div>";
|
||||
app.interface.theme_previewer.innerHTML = theme_preview;
|
||||
// Populate the font family selector
|
||||
const doughNudgeRange = app.interface.dough_nudge_range as HTMLInputElement;
|
||||
doughNudgeRange.value = app.dough_nudge.toString();
|
||||
|
||||
7181
src/colors.json
Normal file
7181
src/colors.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -32,7 +32,7 @@ export const samples_to_markdown = (
|
||||
|
||||
markdownList += `
|
||||
<button
|
||||
class="hover:bg-neutral-500 inline px-4 py-2 bg-neutral-700 text-orange-300 text-xl"
|
||||
class="hover:bg-foreground inline px-4 py-2 bg-black text-brightwhite hover:text-background text-xl"
|
||||
onclick="app.api._playDocExampleOnce(app.api.codeExamples['${codeId}'])"
|
||||
>
|
||||
${keys[i]}
|
||||
@ -75,7 +75,7 @@ beat(0.5)::sound('wt_stereo').n([0, 1].pick()).ad(0, .25).out()
|
||||
|
||||
Pick one folder and spend some time exploring it. There is a lot of different waveforms.
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Waveforms")}
|
||||
</div>
|
||||
|
||||
@ -94,7 +94,7 @@ beat(0.5)::sound(['bd', 'cp'].pick()).bank("AkaiLinn").out()
|
||||
Here is the complete list of available machines:
|
||||
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Machines")}
|
||||
</div>
|
||||
|
||||
@ -102,7 +102,7 @@ ${samples_to_markdown(application, "Machines")}
|
||||
|
||||
The default sample pack used by Ryan Kirkbride's [FoxDot](https://github.com/Qirky/FoxDot). It is a nice curated sample pack that covers all the basic sounds you could want.
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "FoxDot")}
|
||||
</div>
|
||||
|
||||
@ -110,7 +110,7 @@ ${samples_to_markdown(application, "FoxDot")}
|
||||
|
||||
This set of audio samples is taken from [this wonderful collection](https://archive.org/details/AmigaSoundtrackerSamplePacksst-xx) of **Ultimate Tracker Amiga samples**. They were initially made by Karsten Obarski. These files were processed: pitched down one octave, gain down 6db. The audio has been processed with [SoX](https://github.com/chirlu/sox). The script used to do so is also included in this repository.
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Amiga")}
|
||||
</div>
|
||||
|
||||
@ -128,7 +128,7 @@ beat(4)::sound('amen1').stretch(4).out()
|
||||
|
||||
The stretch should be adapted based on the length of each amen break.
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Amen")}
|
||||
</div>
|
||||
|
||||
@ -137,7 +137,7 @@ ${samples_to_markdown(application, "Amen")}
|
||||
Many live coders are expecting to find the Tidal sample library wherever they go, so here it is :)
|
||||
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Tidal")}
|
||||
</div>
|
||||
|
||||
@ -145,7 +145,7 @@ ${samples_to_markdown(application, "Tidal")}
|
||||
|
||||
This sample pack is only one folder full of french phonems! It sounds super nice.
|
||||
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-neutral-600 mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
<div class="lg:pl-6 lg:pr-6 w-fit rounded-lg bg-background mx-6 mt-2 my-6 px-2 py-2 max-h-96 flex flex-row flex-wrap gap-x-2 gap-y-2 overflow-y-scroll">
|
||||
${samples_to_markdown(application, "Juliette")}
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -9,6 +9,24 @@ export const bonus = (application: Editor): string => {
|
||||
|
||||
Some features have been included as a bonus. These features are often about patterning over things that are not directly related to sound: pictures, video, etc.
|
||||
|
||||
## Editor theme configuration
|
||||
|
||||
The editor theme can be changed using the <ic>theme</ic> and <ic>randomTheme</ic> functions. The following example will use a random color scheme for every beat:
|
||||
|
||||
${makeExample(
|
||||
"Random theme on each beat",
|
||||
`
|
||||
beat(1)::randomTheme()
|
||||
`, true)}
|
||||
|
||||
You can also pick a theme using the <ic>theme</ic> function with a string as only argument:
|
||||
|
||||
${makeExample(
|
||||
"Picking a theme",
|
||||
`
|
||||
beat(1)::theme("Batman")
|
||||
`, true)}
|
||||
|
||||
## Hydra Visual Live Coding
|
||||
|
||||
<div class="mx-12 bg-neutral-600 rounded-lg flex flex-col items-center justify-center">
|
||||
|
||||
@ -12,14 +12,14 @@ Ziffers patterns can be synced to any event by using **cue**, **sync**, **wait**
|
||||
|
||||
The <ic>cue(name: string)</ic> methods can be used to send cue messages for ziffers patterns. The <ic>wait(name: string)</ic> method is used to wait for the cue message to be received before starting the next cycle.
|
||||
|
||||
${makeExample(
|
||||
"Sending cue from event and wait",
|
||||
`
|
||||
beat(4.0) :: sound("bd").cue("foo").out();
|
||||
z1("e 0 3 2 1 2 1").wait("foo").sound("sine").out();
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
${makeExample(
|
||||
"Sending cue from event and wait",
|
||||
`
|
||||
beat(4.0) :: sound("bd").cue("foo").out()
|
||||
z1("e 0 3 2 1 2 1").wait("foo").sound("sine").out()
|
||||
`,
|
||||
true,
|
||||
)}
|
||||
|
||||
The <ic>sync(name: string)</ic> method is used to sync the ziffers pattern to the cue message.
|
||||
|
||||
|
||||
70
src/main.ts
70
src/main.ts
@ -5,6 +5,7 @@ import { javascript } from "@codemirror/lang-javascript";
|
||||
import { markdown } from "@codemirror/lang-markdown";
|
||||
import { Extension } from "@codemirror/state";
|
||||
import { outputSocket } from "./IO/OSC";
|
||||
import { getCodeMirrorTheme } from "./EditorSetup";
|
||||
import {
|
||||
initializeSelectedUniverse,
|
||||
AppSettings,
|
||||
@ -32,6 +33,7 @@ import { installWindowBehaviors } from "./WindowBehavior";
|
||||
import { makeNumberExtensions } from "./extensions/NumberExtensions";
|
||||
// @ts-ignore
|
||||
import { registerSW } from "virtual:pwa-register";
|
||||
import colors from "./colors.json";
|
||||
|
||||
if ("serviceWorker" in navigator) {
|
||||
registerSW();
|
||||
@ -51,6 +53,7 @@ export class Editor {
|
||||
hidden_interface: boolean = false;
|
||||
fontSize!: Compartment;
|
||||
withLineNumbers!: Compartment;
|
||||
themeCompartment!: Compartment;
|
||||
vimModeCompartment!: Compartment;
|
||||
hoveringCompartment!: Compartment;
|
||||
completionsCompartment!: Compartment;
|
||||
@ -205,6 +208,15 @@ export class Editor {
|
||||
|
||||
// Loading universe from URL (if needed)
|
||||
loadUniverserFromUrl(this);
|
||||
|
||||
// Set the color scheme for the application
|
||||
let available_themes = Object.keys(colors);
|
||||
if (this.settings.theme in available_themes) {
|
||||
this.readTheme(this.settings.theme);
|
||||
} else {
|
||||
this.settings.theme = "Everblush";
|
||||
this.readTheme(this.settings.theme);
|
||||
}
|
||||
}
|
||||
|
||||
private getBuffer(type: string): any {
|
||||
@ -260,7 +272,7 @@ export class Editor {
|
||||
|
||||
let list = document.createElement("ul");
|
||||
list.className =
|
||||
"lg:h-80 lg:text-normal text-sm h-auto lg:w-80 w-auto lg:pb-2 lg:pt-2 overflow-y-scroll text-white lg:mb-4 border rounded-lg bg-neutral-800";
|
||||
"lg:h-80 lg:text-normal text-normal h-auto lg:w-80 w-auto lg:pb-2 lg:pt-2 overflow-y-scroll text-brightwhite bg-background lg:mb-4 border rounded-lg";
|
||||
list.append(
|
||||
...Object.keys(this.universes).map((it) => {
|
||||
let item = itemTemplate.content.cloneNode(true) as DocumentFragment;
|
||||
@ -292,9 +304,9 @@ export class Editor {
|
||||
*/
|
||||
const tabs = document.querySelectorAll('[id^="tab-"]');
|
||||
const tab = tabs[i] as HTMLElement;
|
||||
tab.classList.add("bg-orange-300");
|
||||
tab.classList.add("bg-foreground");
|
||||
for (let j = 0; j < tabs.length; j++) {
|
||||
if (j != i) tabs[j].classList.remove("bg-orange-300");
|
||||
if (j != i) tabs[j].classList.remove("bg-foreground_selection");
|
||||
}
|
||||
let tab_id = tab.id.split("-")[1];
|
||||
this.local_index = parseInt(tab_id);
|
||||
@ -317,15 +329,15 @@ export class Editor {
|
||||
let changeColor = (button: HTMLElement) => {
|
||||
interface_buttons.forEach((button) => {
|
||||
let svg = button.children[0] as HTMLElement;
|
||||
if (svg.classList.contains("text-orange-300")) {
|
||||
svg.classList.remove("text-orange-300");
|
||||
button.classList.remove("text-orange-300");
|
||||
if (svg.classList.contains("text-foreground_selection")) {
|
||||
svg.classList.remove("text-foreground_selection");
|
||||
button.classList.remove("text-foreground_selection");
|
||||
}
|
||||
});
|
||||
button.children[0].classList.remove("text-white");
|
||||
button.children[0].classList.add("text-orange-300");
|
||||
button.classList.add("text-orange-300");
|
||||
button.classList.add("fill-orange-300");
|
||||
button.children[0].classList.add("text-foreground_selection");
|
||||
button.classList.add("text-foreground_selection");
|
||||
button.classList.add("fill-foreground_selection");
|
||||
};
|
||||
|
||||
switch (mode) {
|
||||
@ -440,7 +452,7 @@ export class Editor {
|
||||
|
||||
unfocusPlayButtons() {
|
||||
document.querySelectorAll('[id^="play-button-"]').forEach((button) => {
|
||||
button.children[0].classList.remove("fill-orange-300");
|
||||
button.children[0].classList.remove("fill-foreground_selection");
|
||||
button.children[0].classList.remove("animate-pulse");
|
||||
});
|
||||
}
|
||||
@ -569,6 +581,44 @@ export class Editor {
|
||||
ctx.scale(dpr, dpr);
|
||||
}
|
||||
}
|
||||
|
||||
private updateInterfaceTheme(selected_theme: {[key: string]: string}): void {
|
||||
function hexToRgb(hex: string): {r: number, g: number, b: number} | null {
|
||||
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
};
|
||||
for (const [key, value] of Object.entries(selected_theme)) {
|
||||
let color = hexToRgb(value);
|
||||
if (color) {
|
||||
let colorString = `${color.r} ${color.g} ${color.b}`
|
||||
document.documentElement.style.setProperty("--" + key, colorString);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getColorScheme(theme_name: string): {[key: string]: string} {
|
||||
// Check if the theme exists in colors.json
|
||||
let themes: Record<string, { [key: string]: any }> = colors;
|
||||
return themes[theme_name];
|
||||
}
|
||||
|
||||
readTheme(theme_name: string): void {
|
||||
// Check if the theme exists in colors.json
|
||||
let themes: Record<string, { [key: string]: any }> = colors;
|
||||
let selected_theme = themes[theme_name];
|
||||
if (selected_theme) {
|
||||
this.updateInterfaceTheme(selected_theme);
|
||||
let codeMirrorTheme = getCodeMirrorTheme(selected_theme);
|
||||
// Reconfigure the view with the new theme
|
||||
this.view.dispatch({
|
||||
effects: this.themeCompartment.reconfigure(codeMirrorTheme),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let app = new Editor();
|
||||
|
||||
2649
src/style.css
2649
src/style.css
File diff suppressed because it is too large
Load Diff
29
src/tailwind.css
Normal file
29
src/tailwind.css
Normal file
@ -0,0 +1,29 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--black: 40 42 54;
|
||||
--red: 68 71 90;
|
||||
--green: 248 248 242;
|
||||
--yellow: 98 114 164;
|
||||
--blue: 139 233 253;
|
||||
--magenta: 80 250 123;
|
||||
--cyan: 255 184 108;
|
||||
--white: 255 121 198;
|
||||
--brightblack: 189 147 249;
|
||||
--brightred: 255 85 85;
|
||||
--brightgreen: 241 250 140;
|
||||
--brightyellow: 139 233 253;
|
||||
--brightblue: 80 250 123;
|
||||
--brightmagenta: 255 184 108;
|
||||
--brightcyan: 255 121 198;
|
||||
--brightwhite: 189 147 249;
|
||||
--background: 40 42 54;
|
||||
--selection_foreground: 68 71 90;
|
||||
--cursor: 139 233 253;
|
||||
--foreground: 248 248 242;
|
||||
--selection_background: 189 147 249;
|
||||
}
|
||||
}
|
||||
@ -1,221 +0,0 @@
|
||||
import { EditorView } from "@codemirror/view";
|
||||
import { Extension } from "@codemirror/state";
|
||||
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
|
||||
import { tags as t } from "@lezer/highlight";
|
||||
|
||||
const base00 = "#262626",
|
||||
base01 = "#3B4252",
|
||||
base02 = "#BBBBBB",
|
||||
base03 = "#4C566A",
|
||||
base04 = "#D8DEE9",
|
||||
base05 = "#E5E9F0",
|
||||
base07 = "#8FBCBB",
|
||||
base_red = "#BF616A",
|
||||
base_deeporange = "#D08770",
|
||||
base_pink = "#B48EAD",
|
||||
base_cyan = "#FBCF8B",
|
||||
base_yellow = "#88C0D0",
|
||||
base_orange = "#D08770",
|
||||
base_indigo = "#5E81AC",
|
||||
base_purple = "#B48EAD",
|
||||
base_green = "#A3BE8C",
|
||||
base_lightgreen = "#A3BE8C";
|
||||
|
||||
const invalid = base_red,
|
||||
darkBackground = "#262626",
|
||||
highlightBackground = "#252525",
|
||||
// background = base00,
|
||||
tooltipBackground = base01,
|
||||
cursor = base04;
|
||||
|
||||
/// The editor theme styles for Material Dark.
|
||||
export const toposDarkTheme = EditorView.theme(
|
||||
{
|
||||
"&": {
|
||||
color: base05,
|
||||
// backgroundColor: background,
|
||||
backgroundColor: "transparent",
|
||||
fontSize: "24px",
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-content": {
|
||||
caretColor: cursor,
|
||||
fontFamily: "IBM Plex Mono",
|
||||
},
|
||||
".cm-cursor, .cm-dropCursor": {
|
||||
borderLeftColor: cursor,
|
||||
},
|
||||
"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
|
||||
{
|
||||
backgroundColor: base00,
|
||||
border: `0.5px solid ${base00}`,
|
||||
},
|
||||
".cm-panels": {
|
||||
backgroundColor: darkBackground,
|
||||
color: base05,
|
||||
},
|
||||
".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
|
||||
".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },
|
||||
".cm-search.cm-panel": { backgroundColor: "transparent" },
|
||||
".cm-searchMatch": {
|
||||
outline: `1px solid ${base_cyan}`,
|
||||
},
|
||||
".cm-searchMatch.cm-searchMatch-selected": {
|
||||
backgroundColor: highlightBackground,
|
||||
},
|
||||
".cm-activeLine": {
|
||||
// backgroundColor: highlightBackground
|
||||
backgroundColor: "rgb(76,76,106, 0.1)",
|
||||
},
|
||||
".cm-selectionMatch": {
|
||||
backgroundColor: base04,
|
||||
outline: `1px solid ${base_red}`,
|
||||
},
|
||||
|
||||
"&.cm-focused .cm-matchingBracket": {
|
||||
color: base02,
|
||||
// outline: `1px solid ${base02}`,
|
||||
},
|
||||
|
||||
"&.cm-focused .cm-nonmatchingBracket": {
|
||||
color: base_red,
|
||||
},
|
||||
|
||||
".cm-gutters": {
|
||||
//backgroundColor: base00,
|
||||
backgroundColor: "transparent",
|
||||
color: base02,
|
||||
},
|
||||
|
||||
".cm-activeLineGutter": {
|
||||
backgroundColor: highlightBackground,
|
||||
color: base02,
|
||||
},
|
||||
|
||||
".cm-foldPlaceholder": {
|
||||
border: "none",
|
||||
color: `${base07}`,
|
||||
},
|
||||
|
||||
".cm-tooltip": {
|
||||
border: "none",
|
||||
backgroundColor: tooltipBackground,
|
||||
},
|
||||
".cm-tooltip .cm-tooltip-arrow:before": {},
|
||||
".cm-tooltip .cm-tooltip-arrow:after": {
|
||||
borderTopColor: tooltipBackground,
|
||||
borderBottomColor: tooltipBackground,
|
||||
},
|
||||
".cm-tooltip-autocomplete": {
|
||||
"& > ul > li[aria-selected]": {
|
||||
backgroundColor: highlightBackground,
|
||||
color: base03,
|
||||
},
|
||||
},
|
||||
},
|
||||
{ dark: true },
|
||||
);
|
||||
|
||||
/// The highlighting style for code in the Material Dark theme.
|
||||
export const toposDarkHighlightStyle = HighlightStyle.define([
|
||||
{ tag: t.keyword, color: base_purple },
|
||||
{
|
||||
tag: [t.name, t.deleted, t.character, t.macroName],
|
||||
color: base_cyan,
|
||||
},
|
||||
{ tag: [t.propertyName], color: base_yellow },
|
||||
{ tag: [t.variableName], color: base05 },
|
||||
{ tag: [t.function(t.variableName)], color: base_cyan },
|
||||
{ tag: [t.labelName], color: base_purple },
|
||||
{
|
||||
tag: [t.color, t.constant(t.name), t.standard(t.name)],
|
||||
color: base_yellow,
|
||||
},
|
||||
{ tag: [t.definition(t.name), t.separator], color: base_pink },
|
||||
{ tag: [t.brace], color: base_purple },
|
||||
{
|
||||
tag: [t.annotation],
|
||||
color: invalid,
|
||||
},
|
||||
{
|
||||
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
|
||||
color: base_orange,
|
||||
},
|
||||
{
|
||||
tag: [t.typeName, t.className],
|
||||
color: base_orange,
|
||||
},
|
||||
{
|
||||
tag: [t.operator, t.operatorKeyword],
|
||||
color: base_indigo,
|
||||
},
|
||||
{
|
||||
tag: [t.tagName],
|
||||
color: base_deeporange,
|
||||
},
|
||||
{
|
||||
tag: [t.squareBracket],
|
||||
color: base_red,
|
||||
},
|
||||
{
|
||||
tag: [t.angleBracket],
|
||||
color: base02,
|
||||
},
|
||||
{
|
||||
tag: [t.attributeName],
|
||||
color: base05,
|
||||
},
|
||||
{
|
||||
tag: [t.regexp],
|
||||
color: invalid,
|
||||
},
|
||||
{
|
||||
tag: [t.quote],
|
||||
color: base_green,
|
||||
},
|
||||
{ tag: [t.string], color: base_lightgreen },
|
||||
{
|
||||
tag: t.link,
|
||||
color: base_cyan,
|
||||
textDecoration: "underline",
|
||||
textUnderlinePosition: "under",
|
||||
},
|
||||
{
|
||||
tag: [t.url, t.escape, t.special(t.string)],
|
||||
color: base_yellow,
|
||||
},
|
||||
{ tag: [t.meta], color: base03 },
|
||||
{ tag: [t.comment], color: base02, fontStyle: "italic" },
|
||||
{ tag: t.monospace, color: base05 },
|
||||
{ tag: t.strong, fontWeight: "bold", color: base_red },
|
||||
{ tag: t.emphasis, fontStyle: "italic", color: base_lightgreen },
|
||||
{ tag: t.strikethrough, textDecoration: "line-through" },
|
||||
{ tag: t.heading, fontWeight: "bold", color: base_yellow },
|
||||
{ tag: t.heading1, fontWeight: "bold", color: base_yellow },
|
||||
{
|
||||
tag: [t.heading2, t.heading3, t.heading4],
|
||||
fontWeight: "bold",
|
||||
color: base_yellow,
|
||||
},
|
||||
{
|
||||
tag: [t.heading5, t.heading6],
|
||||
color: base_yellow,
|
||||
},
|
||||
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: base_cyan },
|
||||
{
|
||||
tag: [t.processingInstruction, t.inserted],
|
||||
color: base_red,
|
||||
},
|
||||
{
|
||||
tag: [t.contentSeparator],
|
||||
color: base_cyan,
|
||||
},
|
||||
{ tag: t.invalid, color: base02, borderBottom: `1px dotted ${base_red}` },
|
||||
]);
|
||||
|
||||
/// Extension to enable the Material Dark theme (both the editor theme and
|
||||
/// the highlight style).
|
||||
export const toposTheme: Extension = [
|
||||
toposDarkTheme,
|
||||
syntaxHighlighting(toposDarkHighlightStyle),
|
||||
];
|
||||
@ -1,21 +1,33 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
safelist: [
|
||||
{
|
||||
pattern: /hljs+/,
|
||||
},
|
||||
],
|
||||
content: ["./src/**/*.html", "./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
hljs: {
|
||||
theme: "nord",
|
||||
custom: {
|
||||
general: {
|
||||
comment: "#FEFEFE",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwind-highlightjs")],
|
||||
colors: {
|
||||
black: "rgb(var(--black) / <alpha-value>)",
|
||||
red: "rgb(var(--red) / <alpha-value>)",
|
||||
green: "rgb(var(--green) / <alpha-value>)",
|
||||
yellow: "rgb(var(--yellow) / <alpha-value>)",
|
||||
blue: "rgb(var(--blue) / <alpha-value>)",
|
||||
magenta: "rgb(var(--magenta) / <alpha-value>)",
|
||||
cyan: "rgb(var(--cyan) / <alpha-value>)",
|
||||
white: "rgb(var(--white) / <alpha-value>)",
|
||||
brightblack: "rgb(var(--brightblack) / <alpha-value>)",
|
||||
brightred: "rgb(var(--brightred) / <alpha-value>)",
|
||||
brightgreen: "rgb(var(--brightgreen) / <alpha-value>)",
|
||||
brightyellow: "rgb(var(--brightyellow) / <alpha-value>)",
|
||||
brightblue: "rgb(var(--brightblue) / <alpha-value>)",
|
||||
brightmagenta: "rgb(var(--brightmagenta) / <alpha-value>)",
|
||||
brightcyan: "rgb(var(--brightcyan) / <alpha-value>)",
|
||||
brightwhite: "rgb(var(--brightwhite) / <alpha-value>)",
|
||||
background: "rgb(var(--background) / <alpha-value>)",
|
||||
selection_foreground: "rgb(var(--selection_foreground) / <alpha-value>)",
|
||||
cursor: "rgb(var(--cursor) / <alpha-value>)",
|
||||
foreground: "rgb(var(--foreground) / <alpha-value>)",
|
||||
selection_background: "rgb(var(--selection_background) / <alpha-value>)",
|
||||
}
|
||||
},
|
||||
extend: {},
|
||||
safelist: [{
|
||||
pattern: /(bg|text|border)-(transparent|color0|color1|color2|color3|color4|color5|color6|color7|color8|color9|color10|color11|color12|color13|color14|color15|background|selection_background|cursor|foreground|selection_background)/,
|
||||
}],
|
||||
};
|
||||
|
||||
@ -10,11 +10,10 @@ const vitePWAconfiguration = {
|
||||
|
||||
workbox: {
|
||||
sourcemap: false,
|
||||
cleanupOutdatedCaches: true,
|
||||
cleanupOutdatedCaches: false,
|
||||
globPatterns: [
|
||||
"**/*.{js,js.gz,css,html,gif,png,json,woff,woff2,json,ogg,wav,mp3,ico,png,svg}",
|
||||
],
|
||||
// Thanks Froos :)
|
||||
runtimeCaching: [
|
||||
{
|
||||
urlPattern: ({ url }) =>
|
||||
|
||||
@ -2476,6 +2476,11 @@ highlight.js@^11.5.0:
|
||||
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.8.0.tgz#966518ea83257bae2e7c9a48596231856555bb65"
|
||||
integrity sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==
|
||||
|
||||
highlight.js@^11.9.0:
|
||||
version "11.9.0"
|
||||
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.9.0.tgz#04ab9ee43b52a41a047432c8103e2158a1b8b5b0"
|
||||
integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==
|
||||
|
||||
html-encoder-decoder@^1.3.9:
|
||||
version "1.3.9"
|
||||
resolved "https://registry.yarnpkg.com/html-encoder-decoder/-/html-encoder-decoder-1.3.9.tgz#d5ec7d249cd525709f7640ae9340f482cc86e94a"
|
||||
|
||||
Reference in New Issue
Block a user