Fixing annoying little bugs

src/Documentation.ts

@@ -28,7 +28,7 @@ export const makeExampleFactory = (application: Editor): Function => {
   ) => {
     const codeId = `codeExample${application.exampleCounter++}`;
     // Store the code snippet in the data structure
-    application.api.codeExamples[codeId] = code;
+    application.api.codeExamples[codeId] = "bpm(120);\n" + code;
 
     return `
 <details ${open ? "open" : ""}>

src/documentation/synths.ts

@@ -41,12 +41,13 @@ beat(.5) && snd('triangle').note([60,"F4"].pick()).out()
   )}
 
 Chords can also played using different parameters:
--<ic>chord(string||number[]|...number)</ic>: parses and sets notes for the chord
+
+- <ic>chord(string||number[]|...number)</ic>: parses and sets notes for the chord
 
 ${makeExample(
     "Playing a named chord",
     `
-    beat(1) && snd('triangle').chord(["C","Em7","Fmaj7","Emin"].beat(2)).out()
+    beat(1) && snd('triangle').chord(["C","Em7","Fmaj7","Emin"].beat(2)).adsr(0,.2).out()
 `,
     true
   )}  
@@ -54,7 +55,7 @@ ${makeExample(
 ${makeExample(
     "Playing a chord from a list of notes and doing inversions",
     `
-    beat(.5) && snd('triangle').chord(60,64,67,72).invert([1,-3,4,-5].pick()).out()
+    beat(.5) && snd('triangle').chord(60,64,67,72).invert([1,-3,4,-5].pick()).adsr(0,.2).out()
 `,
     true
   )}  
@@ -152,8 +153,8 @@ These filters all come with their own set of parameters. Note that we are descri
 
 | Method     | Alias     | Description                     |
 |------------|-----------|---------------------------------|
-| cutoff     | lpf       | cutoff frequency of the lowpass filter |
+| <ic>cutoff</ic>     | <ic>lpf</ic>       | cutoff frequency of the lowpass filter |
-| resonance  | lpq       | resonance of the lowpass filter |
+| <ic>resonance</ic>  | <ic>lpq</ic>       | resonance of the lowpass filter |
 
 ${makeExample(
     "Filtering a bass",
@@ -165,8 +166,8 @@ ${makeExample(
 
 | Method     | Alias     | Description                     |
 |------------|-----------|---------------------------------|
-| hcutoff     | hpf       | cutoff frequency of the highpass filter |
+| <ic>hcutoff</ic>     | <ic>hpf</ic>       | cutoff frequency of the highpass filter |
-| hresonance  | hpq       | resonance of the highpass filter |
+| <ic>hresonance</ic>  | <ic>hpq</ic>       | resonance of the highpass filter |
 
 ${makeExample(
     "Filtering a noise source",
@@ -178,8 +179,8 @@ ${makeExample(
 
 | Method     | Alias     | Description                     |
 |------------|-----------|---------------------------------|
-| bandf      | bpf       | cutoff frequency of the bandpass filter |
+| <ic>bandf</ic>      | <ic>bpf</ic>       | cutoff frequency of the bandpass filter |
-| bandq      | bpq       | resonance of the bandpass filter |
+| <ic>bandq</ic>      | <ic>bpq</ic>       | resonance of the bandpass filter |
 
 ${makeExample(
     "Sweeping the filter on the same guitar sample",
@@ -245,12 +246,12 @@ The examples we have studied so far are static. They filter the sound around a f
 
 | Method     | Alias     | Description                     |
 |------------|-----------|---------------------------------|
-| lpenv      | lpe       | lowpass frequency modulation amount (negative or positive) |
+| <ic>lpenv</ic>      | <ic>lpe</ic>       | lowpass frequency modulation amount (negative or positive) |
-| lpattack   | lpa       | attack of the lowpass filter    |
+| <ic>lpattack</ic>   | <ic>lpa</ic>       | attack of the lowpass filter    |
-| lpdecay    | lpd       | decay of the lowpass filter     |
+| <ic>lpdecay</ic>    | <ic>lpd</ic>       | decay of the lowpass filter     |
-| lpsustain  | lps       | sustain of the lowpass filter   |
+| <ic>lpsustain</ic>  | <ic>lps</ic>       | sustain of the lowpass filter   |
-| lprelease  | lpr       | release of the lowpass filter   |
+| <ic>lprelease</ic>  | <ic>lpr</ic>       | release of the lowpass filter   |
-| lpadsr     |           | (**takes five arguments**) set all the parameters  |
+| <ic>lpadsr</ic>     |                    | (**takes five arguments**) set all the parameters  |
 
 
 ${makeExample(
@@ -265,12 +266,12 @@ ${makeExample(
 
 | Method     | Alias     | Description                     |
 |------------|-----------|---------------------------------|
-| hpenv      | hpe       | highpass frequency modulation amount (negative or positive) |
+| <ic>hpenv</ic>      | <ic>hpe</ic>       | highpass frequency modulation amount (negative or positive) |
-| hpattack   | hpa       | attack of the highpass filter    |
+| <ic>hpattack</ic>   | <ic>hpa</ic>       | attack of the highpass filter    |
-| hpdecay    | hpd       | decay of the highpass filter     |
+| <ic>hpdecay</ic>    | <ic>hpd</ic>       | decay of the highpass filter     |
-| hpsustain  | hps       | sustain of the highpass filter   |
+| <ic>hpsustain</ic>  | <ic>hps</ic>       | sustain of the highpass filter   |
-| hprelease  | hpr       | release of the highpass filter   |
+| <ic>hprelease</ic>  | <ic>hpr</ic>       | release of the highpass filter   |
-| hpadsr     |           | (**takes five arguments**) set all the parameters  |
+| <ic>hpadsr</ic>     |           | (**takes five arguments**) set all the parameters  |
 
 
 ${makeExample(
@@ -285,12 +286,12 @@ ${makeExample(
 
 | Method     | Alias     | Description                     |
 |------------|-----------|---------------------------------|
-| bpenv      | bpe       | bandpass frequency modulation amount (negative or positive) |
+| <ic>bpenv</ic>      | <ic>bpe</ic>       | bandpass frequency modulation amount (negative or positive) |
-| bpattack   | bpa       | attack of the bandpass filter    |
+| <ic>bpattack</ic>   | <ic>bpa</ic>       | attack of the bandpass filter    |
-| bpdecay    | bpd       | decay of the bandpass filter     |
+| <ic>bpdecay</ic>    | <ic>bpd</ic>       | decay of the bandpass filter     |
-| bpsustain  | bps       | sustain of the bandpass filter   |
+| <ic>bpsustain</ic>  | <ic>bps</ic>       | sustain of the bandpass filter   |
-| bprelease  | bpr       | release of the bandpass filter   |
+| <ic>bprelease</ic>  | <ic>bpr</ic>       | release of the bandpass filter   |
-| bpadsr     |           | (**takes five arguments**) set all the parameters  |
+| <ic>bpadsr</ic>     |           | (**takes five arguments**) set all the parameters  |
 
 
 ${makeExample(

src/documentation/time.ts

@@ -29,7 +29,7 @@ ${makeExample(
 beat([1,1/2,1/4,1/8].beat(2)) :: sound('bd').n(0).out()
 `,
     true
-)}
+  )}
 
 ${makeExample(
     "Some sort of ringtone",
@@ -41,7 +41,7 @@ flip(3) :: beat(1/6) :: blip(800).out();
 beat([1,0.75].beat(2)) :: blip([50, 100].beat(2)).out();
 `,
     false
-)}
+  )}
 
 
 - <ic>pulse(...n: number[])</ic>: faster version of the <ic>beat</ic> function. Instead of returning true for every beat, this function is returning true every _n_ clock ticks! It can be used to generate very unexpected results or to sequence by using your arithmetic ninja skills.
@@ -55,7 +55,7 @@ pulse([12, 36].beat(4)) :: snd('east')
   .n([2,4].add(5).beat(1)).out()
 `,
     true
-)}
+  )}
 ${makeExample(
     "pulse is the OG rhythmic function in Topos",
     `
@@ -63,7 +63,7 @@ pulse([48, 24, 16].beat(4)) :: sound('linnhats').out()
 beat(1)::snd('bd').out()
 `,
     false
-)};
+  )};
 
 - <ic>onbeat(...n: number[])</ic>: The <ic>onbeat</ic> function allows you to lock on to a specific beat from the clock to execute code. It can accept multiple arguments. It's usage is very straightforward and not hard to understand. You can pass either integers or floating point numbers. By default, topos is using a <ic>4/4</ic> bar meaning that you can target any of these beats (or in-between) with this function.
 
@@ -75,7 +75,7 @@ onbeat(2,4)::snd('snare').out() // Snare on acccentuated beats
 onbeat(1.5,2.5,3.5, 3.75)::snd('hat').out() // Cool high-hats
 `,
     true
-)}
+  )}
 
 ${makeExample(
     "Let's do something more complex",
@@ -87,7 +87,7 @@ beat([.25, 1/8].beat(1.5))::snd('hat').n(2)
   .pan(usine()).out()
 `,
     false
-)}
+  )}
 
 - <ic>oncount(beats: number[], meter: number)</ic>: This function is similar to <ic>onbeat</ic> but it allows you to specify a custom number of beats as the last argument.
 
@@ -101,7 +101,7 @@ ${makeExample(
   oncount([1,3,5.5,7,7.5,8],8) :: sound('hh').gain(irand(1.0,4.0)).out()
 `,
     true
-)}
+  )}
 
 ${makeExample(
     "Using oncount to create rhythms with a custom meter",
@@ -114,7 +114,7 @@ ${makeExample(
   sound('hh').out()
 `,
     true
-)}
+  )}
 
 ## Rhythm generators
 	
@@ -130,7 +130,7 @@ beat(.5) && euclid($(2), 2, 8) && snd('sd').out()
 beat(4) :: sound('cp').out()
 `,
     true
-)}
+  )}
 
 ${makeExample(
     "And now for more interesting rhythmic constructions",
@@ -141,7 +141,7 @@ beat(.5) && euclid($(2), [1,0].beat(8), 8) :: sound('sd').out()
 beat(.5) && euclid($(6), [6,7].beat(8), 8) :: sound('hh').out()
 `,
     false
-)}
+  )}
 
 ${makeExample(
     "Adding more rhythmic density",
@@ -152,7 +152,7 @@ beat(.5) && euclid($(3), 6, 9, 1) && snd('east').end(0.5).n(5).freq(200).speed([
 beat(.25) && euclid($(4), 7, 9, 1) && snd('hh').out()
 `,
     false
-)}
+  )}
 
 Alternatively, you can <ic>oneuclid</ic> or <ic>rhythm</ic> without the _iterators_:
 
@@ -166,7 +166,7 @@ ${makeExample(
   oneuclid(7,16) :: snd('east').end(0.5).n(irand(3,5)).out()
 `,
     false
-)}
+  )}
 
 - <ic>rhythm(divisor: number, pulses: number, length: number, rotate: number): boolean</ic>: generates <ic>true</ic> or <ic>false</ic> values from an euclidian rhythm sequence. This is another version of <ic>euclid</ic> that does not take an iterator.
 ${makeExample(
@@ -179,7 +179,7 @@ rhythm(speed, 3, 12) :: snd('east').n(4).out()
 rhythm(speed, 7, 12) :: snd('east').n(9).out()
 `,
     true
-)}
+  )}
 
 - <ic>bin(iterator: number, n: number): boolean</ic>: a binary rhythm generator. It transforms the given number into its binary representation (_e.g_ <ic>34</ic> becomes <ic>100010</ic>). It then returns a boolean value based on the iterator in order to generate a rhythm.
 - <ic>binrhythm(divisor: number, n: number): boolean: boolean</ic>: iterator-less version of the  binary rhythm generator.
@@ -191,7 +191,7 @@ beat(.5) && bin($(1), 34) && snd('kick').out()
 beat(.5) && bin($(2), 48) && snd('sd').out()
 `,
     true
-)}
+  )}
 
 ${makeExample(
     "binrhythm for fast cool binary rhythms!",
@@ -200,7 +200,7 @@ binrhythm(.5, 13) && snd('kick').out()
 binrhythm(.5, 18) && snd('sd').out()
 `,
     true
-)}
+  )}
 
 ${makeExample(
     "Submarine jungle music",
@@ -210,7 +210,7 @@ beat(.5) && bin($(1), 911) && snd('ST69').n([2,3,4].beat())
 beat(.5) && sound('amencutup').n(irand(2,7)).shape(0.3).out() 
 `,
     false
-)}
+  )}
 
 ${makeExample(
     "Using tabla to play unpredictable rhythms",
@@ -220,7 +220,7 @@ beat(.5) && bin($(1), [123, 456, 789].beat(4))
 beat(1) && sound('kick').shape(0.5).out()
 `,
     false
-)}
+  )}
 	
 If you don't find it spicy enough, you can add some more probabilities to your rhythms by taking advantage of the probability functions. See the functions documentation page to learn more about them. 
 	
@@ -232,7 +232,7 @@ prob(60)::beat(.5) && euclid($(2), 3, 8) && snd('sd').out()
 prob(80)::beat(.5) && sound('hh').out()
 `,
     true
-)}
+  )}
 
 ## Time Warping
 
@@ -257,7 +257,7 @@ flip(3) :: beat([.25,.5].beat(.5)) :: sound('dr')
 beat(.25) :: warp([12, 48, 24, 1, 120, 30].pick())
 `,
     true
-)}
+  )}
 	
 - <ic>beat_warp(beat: number)</ic>: this function jumps to the _n_ beat of the clock. The first beat is <ic>1</ic>.
 
@@ -279,7 +279,7 @@ beat(.5) :: snd('arpy').note(
 beat(1) :: beat_warp([2,4,5,10,11].pick())
 `,
     true
-)}
+  )}
 
 ## Larger time divisions
 	
@@ -294,7 +294,7 @@ ${makeExample(
 flip(4) :: beat(1) :: snd('kick').out()
 `,
     true
-)}
+  )}
 
 ${makeExample(
     "Clapping on the edge",
@@ -305,7 +305,7 @@ flip(2.5) :: beat(.5) :: snd('bd').out()
 beat(.25) :: sound('hh').out()
 `,
     false
-)}
+  )}
 
 ${makeExample(
     "Good old true and false",
@@ -317,7 +317,7 @@ if (flip(4, 75)) {
 }
 `,
     true
-)}
+  )}
 	
 <ic>flip</ic> is extremely powerful and is used internally for a lot of other Topos functions. You can also use it to think about **longer durations** spanning over multiple bars. Here is a silly composition that is using <ic>flip</ic> to generate a 4 bars long pattern.
 	
@@ -342,7 +342,7 @@ if (flip(16)) {
 }
 `,
     true
-)}
+  )}
 	
 You can use it everywhere to spice things up, including as a method parameter picker:
 	
@@ -352,7 +352,7 @@ ${makeExample(
 beat(.5)::snd(flip(4) ? 'kick' : 'hat').out()
 `,
     true
-)}
+  )}
 	
 - <ic>flipbar(n: number = 1)</ic>: this method works just like <ic>flip</ic> but counts in bars instead of beats. It allows you to think about even larger time cycles. You can also pair it with regular <ic>flip</ic> for writing complex and long-spanning algorithmic beats.
 	
@@ -363,7 +363,7 @@ flipbar(2) :: beat(1):: snd('kick').out()
 flipbar(3) :: beat(.5):: snd('hat').out()
 `,
     true
-)}
+  )}
 ${makeExample(
     "Alternating over four bars",
     `
@@ -372,7 +372,7 @@ flipbar(2)
   : beat(.5) && snd(['east', 'east:2'].beat(1)).out()
 `,
     false
-)};
+  )};
 
 	
 - <ic>onbar(bars: number | number[], n: number)</ic>: The second argument, <ic>n</ic>, is used to divide the time in a period of <ic>n</ic> consecutive bars. The first argument should be a bar number or a list of bar numbers to play on. For example, <ic>onbar([1, 4], 5)</ic> will return <ic>true</ic> on bar <ic>1</ic> and <ic>4</ic> but return <ic>false</ic> the rest of the time. You can easily divide time that way.
@@ -396,7 +396,7 @@ if (onbar([1,2], 4)) {
     rhythm(.5, 2, 7) :: snd('snare').n(3).out();
 }`,
     true
-)}
+  )}
 
 ## What are pulses?
 	
@@ -445,6 +445,6 @@ if((cbar() % 4) > 1) {
 beat([.5, .5, 1, .25].beat(0.5)) :: sound('shaker').out() 
 `,
     true
-)}
+  )}
 `;
 };

src/main.ts

@@ -35,7 +35,7 @@ import { makeStringExtensions } from "./StringExtensions";
 const classMap = {
   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 bg-neutral-900 rounded-lg py-2 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 bg-neutral-900 rounded-lg py-2 px-2",
-  h3: "text-white lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutoral-700 rounded-lg py-2 px-2 lg:mt-16",
+  h3: "text-white lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-700 rounded-lg py-2 px-2 lg:mt-16",
   ul: "text-underline pl-6",
   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",