Use the /v0 CDN namespace.

cubing · Sep 27, 2024 · fd75970 · fd75970
1 parent e245791
commit fd75970
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 81 deletions.
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@ Twizzle</a> is the spiritual successor to [alg.cubing.net](https://alg.cubing.ne
 If you're just getting started, the easiest way to use `cubing.js` is through `cdn.cubing.net`:
 
 ```html
-<script src="https://cdn.cubing.net/js/cubing/twisty" type="module"></script>
+<script src="https://cdn.cubing.net/v0/js/cubing/twisty" type="module"></script>
 <twisty-player alg="R U R' U R U2' R'"></twisty-player>
 ```
 

diff --git a/src/docs/js.cubing.net/cubing/alg/index.html b/src/docs/js.cubing.net/cubing/alg/index.html
@@ -23,29 +23,33 @@
 
     <section id="string-conversion">
       <h1><a href="#string-conversion">String conversion</a></h1>
-      <p>Parse an alg by passing it to the <code>Alg</code> constructor. You can call <code>.toString()</code> to get back a string representation.</p>
+      <p>Parse an alg by passing it to the <code>Alg</code> constructor. You can call <code>.toString()</code> to get
+        back a string representation.</p>
       <div class="code-demo">
         <div>
           <code class="sample">
-            <span>import { Alg } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/alg&quot;<br>
-<br>
-const alg = new Alg(&quot;R U R' U R U2' R'&quot;);<br>
-console.log(alg);<br>
-console.log(alg.toString());</span>
+            <span>import { Alg } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/alg&quot;<br>
+          <br>
+          const alg = new Alg(&quot;R U R' U R U2' R'&quot;);<br>
+          console.log(alg);<br>
+          console.log(alg.toString());</span>
           </code>
         </div>
         <code class="sample output">
           <span><span class="js-object" title="This will show available methods and internal details of the Alg object, depending on your JS environment.">Alg {}</span></span>
           <span>&quot;R U R' U R U2' R'&quot;</span>
         </code>
       </div>
-      <p>As a convenience, you can use <code>.log()</code> to view an alg in a JavaScript console (e.g. <a href="https://nodejs.org/en/about/"><code>node</code></a> or <a href="https://developer.chrome.com/docs/devtools/console/javascript/">DevTools</a>). We'll use that for all the examples from now on:</p>
+      <p>As a convenience, you can use <code>.log()</code> to view an alg in a JavaScript console (e.g. <a
+          href="https://nodejs.org/en/about/"><code>node</code></a> or <a
+          href="https://developer.chrome.com/docs/devtools/console/javascript/">DevTools</a>). We'll use that for all
+        the examples from now on:</p>
       <div class="code-demo">
         <div>
           <code class="sample">
-            <span>import { Alg } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/alg&quot;<br>
-<br>
-new Alg(&quot;R U R' U R U2' R'&quot;).log();</span>
+            <span>import { Alg } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/alg&quot;<br>
+          <br>
+          new Alg(&quot;R U R' U R U2' R'&quot;).log();</span>
           </code>
         </div>
         <code class="sample output">
@@ -56,10 +60,11 @@ <h1><a href="#string-conversion">String conversion</a></h1>
       <div class="code-demo">
         <div>
           <code class="sample">
-            <span>import { Alg } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/alg&quot;<br>
-<br>
-const alg = new Alg(&quot;&nbsp;R&nbsp;&nbsp;&nbsp;U&nbsp;R'&nbsp;&nbsp;&nbsp;U&nbsp;R&nbsp;U2'&nbsp;&nbsp;&nbsp;R'&quot;);<br>
-alg.log();</span>
+            <span>import { Alg } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/alg&quot;<br>
+          <br>
+          const alg = new
+          Alg(&quot;&nbsp;R&nbsp;&nbsp;&nbsp;U&nbsp;R'&nbsp;&nbsp;&nbsp;U&nbsp;R&nbsp;U2'&nbsp;&nbsp;&nbsp;R'&quot;);<br>
+          alg.log();</span>
           </code>
         </div>
         <code class="sample output">
@@ -70,22 +75,23 @@ <h1><a href="#string-conversion">String conversion</a></h1>
 
     <section id="methods">
       <h1><a href="#methods">Methods</a></h1>
-      <p><code>Alg</code> objects are immutable (cannot be modified directly). If you want a modified version of an <code>Alg</code>, you can call its methods:
-        <ul>
-          <li><code>alg.invert()</code></li>
-          <li><code>alg.concat(alg2)</code></li>
-          <li><code>alg.expand()</code></li>
-          <li><code>alg.experimentalSimplify()</code></li>
-        </ul>
+      <p><code>Alg</code> objects are immutable (cannot be modified directly). If you want a modified version of an
+        <code>Alg</code>, you can call its methods:
+      <ul>
+        <li><code>alg.invert()</code></li>
+        <li><code>alg.concat(alg2)</code></li>
+        <li><code>alg.expand()</code></li>
+        <li><code>alg.experimentalSimplify()</code></li>
+      </ul>
       </p>
       <div class="code-demo">
         <div>
           <code class="sample">
-            <span>import { Alg } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/alg&quot;;<br>
-<br>
-const commutator = new Alg(&quot;[R, [U': L']]&quot;);<br>
-commutator<b><u>.expand()</u></b>.log();
-</span>
+            <span>import { Alg } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/alg&quot;;<br>
+          <br>
+          const commutator = new Alg(&quot;[R, [U': L']]&quot;);<br>
+          commutator<b><u>.expand()</u></b>.log();
+          </span>
           </code>
         </div>
         <code class="sample output">
@@ -97,14 +103,14 @@ <h1><a href="#methods">Methods</a></h1>
         <div>
           <!-- TODO: The number of underlines match the number of output lines, which might deceivingly imply they match up. Can we make this clear in another way? -->
           <code class="sample">
-            <span>import { Alg } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/alg&quot;;<br>
-const commutator = new Alg(&quot;[R, [U': L']]&quot;);<br>
-<br>
-const niklas = commutator<b><u>.concat(&quot;U'&quot;)</u></b>;<br>
-niklas.log();<br>
-niklas<b><u>.expand()</u></b>.log();<br>
-niklas<b><u>.expand().simplify({cancel: true})</u></b>.log();
-</span>
+            <span>import { Alg } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/alg&quot;;<br>
+          const commutator = new Alg(&quot;[R, [U': L']]&quot;);<br>
+          <br>
+          const niklas = commutator<b><u>.concat(&quot;U'&quot;)</u></b>;<br>
+          niklas.log();<br>
+          niklas<b><u>.expand()</u></b>.log();<br>
+          niklas<b><u>.expand().simplify({cancel: true})</u></b>.log();
+          </span>
           </code>
         </div>
         <code class="sample output">
@@ -117,16 +123,16 @@ <h1><a href="#methods">Methods</a></h1>
       <div class="code-demo">
         <div>
           <code class="sample">
-            <span>import { Alg } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/alg&quot;;<br>
-<br>
-const sune = new Alg(&quot;[R U R2', [R: U]]&quot;);<br>
-const antiSune = sune.<b><u>invert()</u></b>;<br>
-antiSune.log();<br>
-antiSune<b><u>.expand()</u></b>.log();
-</span>
+            <span>import { Alg } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/alg&quot;;<br>
+          <br>
+          const sune = new Alg(&quot;[R U R2', [R: U]]&quot;);<br>
+          const antiSune = sune.<b><u>invert()</u></b>;<br>
+          antiSune.log();<br>
+          antiSune<b><u>.expand()</u></b>.log();
+          </span>
           </code>
         </div>
-          <code class="sample output">
+        <code class="sample output">
             <span><span class="js-object" title="This will show available methods and internal details of the Alg object, depending on your JS environment.">Alg {}</span> &quot;[[R: U], R U R2']&quot;</span>
             <span><span class="js-object" title="This will show available methods and internal details of the Alg object, depending on your JS environment.">Alg {}</span> &quot;R U2 R' U' R U' R'&quot;</span>
           </code>
@@ -135,15 +141,15 @@ <h1><a href="#methods">Methods</a></h1>
       <div class="code-demo">
         <div>
           <code class="sample">
-            <span>import { Alg } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/alg&quot;;<br>
-const antiSune = new Alg(&quot;[[R: U], R U R2']&quot;);<br>
-const niklas = new Alg(&quot;[R, [U': L']] U'&quot;);<br>
-<br>
-const jPerm = antiSune<b><u>.concat(niklas)</u></b>;<br>
-jPerm.log();<br>
-jPerm<b><u>.expand()</u></b>.log();<br>
-jPerm<b><u>.expand()</u></b>.simplify({cancel: true}).log();
-</span>
+            <span>import { Alg } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/alg&quot;;<br>
+          const antiSune = new Alg(&quot;[[R: U], R U R2']&quot;);<br>
+          const niklas = new Alg(&quot;[R, [U': L']] U'&quot;);<br>
+          <br>
+          const jPerm = antiSune<b><u>.concat(niklas)</u></b>;<br>
+          jPerm.log();<br>
+          jPerm<b><u>.expand()</u></b>.log();<br>
+          jPerm<b><u>.expand()</u></b>.simplify({cancel: true}).log();
+          </span>
           </code>
         </div>
         <code class="sample output">
@@ -156,11 +162,11 @@ <h1><a href="#methods">Methods</a></h1>
       <div class="code-demo">
         <div>
           <code class="sample">
-            <span>import { Alg } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/alg&quot;;<br>
-<br>
-const oll = new Alg(&quot;[F: [R, U]]&quot;);<br>
-<b><u>oll.expand({depth: 1})</u></b>.log();<br>
-</span>
+            <span>import { Alg } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/alg&quot;;<br>
+          <br>
+          const oll = new Alg(&quot;[F: [R, U]]&quot;);<br>
+          <b><u>oll.expand({depth: 1})</u></b>.log();<br>
+          </span>
           </code>
         </div>
         <code class="sample output">

diff --git a/src/docs/js.cubing.net/cubing/index.html b/src/docs/js.cubing.net/cubing/index.html
@@ -7,7 +7,7 @@
   <meta name="theme-color" content="#4285f4">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="../main.css">
-  <script src="https://cdn.cubing.net/js/cubing/twisty" type="module"></script>
+  <script src="https://cdn.cubing.net/v0/js/cubing/twisty" type="module"></script>
 </head>
 
 <body>
@@ -35,7 +35,7 @@ <h1><a href="./twisty/" class="separate-page">cubing/twisty</a></h1>
       <div class="code-demo">
         <code class="sample">
           &lt;script
-            src=&quot;https://cdn.cubing.net/js/cubing/twisty&quot;
+            src=&quot;https://cdn.cubing.net/v0/js/cubing/twisty&quot;
             type=&quot;module&quot;&gt;&lt;/script&gt;<br>
 <br>
 <span>&lt;twisty-player alg=&quot;R U R&#x27; U R U2&#x27; R&#x27;&quot;&gt;&lt;/twisty-player&gt;</span>
@@ -58,7 +58,7 @@ <h1><a href="./alg/" class="separate-page">cubing/alg</a></h1>
           <code class="sample">
 <code class="boilerplate">&lt;script type=&quot;module&quot;&gt;</code><br>
           import { Alg } from &quot;<code class="boilerplate"
-            title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/alg&quot;;<br>
+            title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/alg&quot;;<br>
           <br>
           const commutator = new Alg(&quot;[R, [U': L']]&quot;);<br>
           commutator.invert().expand().log();<br>
@@ -83,7 +83,7 @@ <h1><a href="./scramble/" class="separate-page">cubing/scramble</a></h1>
           <code class="sample">
 <code class="boilerplate">&lt;script type=&quot;module&quot;&gt;</code><br>
           import { randomScrambleForEvent } from &quot;<code class="boilerplate"
-            title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/scramble&quot;;<br>
+            title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/scramble&quot;;<br>
           <br>
           const scramble = await randomScrambleForEvent("333");<br>
           scramble.log();<br>
@@ -124,7 +124,7 @@ <h1><a href="#javascript"><code>npm</code> package</a></h1>
       </code>
       <p>
         Most examples on this site use CDN import paths for convenient copy-and-pasting. To import from
-        <code>npm</code>, remove the <code class="boilerplate">https://cdn.cubing.net/js/</code> prefix from any
+        <code>npm</code>, remove the <code class="boilerplate">https://cdn.cubing.net/v0/js/</code> prefix from any
         relevant imports.
       </p>
       <section id="create-cubing-app" class="inline no-header">

diff --git a/src/docs/js.cubing.net/cubing/kpuzzle/index.html b/src/docs/js.cubing.net/cubing/kpuzzle/index.html
@@ -17,7 +17,9 @@
     </div>
     <section class="no-header">
       <p>
-        <code>cubing/kpuzzle</code> is the part of <code>cubing.js</code> that lets you calculate transformations and patterns for puzzles using the KPuzzle definition format (based on <a href="https://github.com/cubing/ksolve++">ksolve</a>).
+        <code>cubing/kpuzzle</code> is the part of <code>cubing.js</code> that lets you calculate transformations and
+        patterns for puzzles using the KPuzzle definition format (based on <a
+          href="https://github.com/cubing/ksolve++">ksolve</a>).
       </p>
     </section>
 
@@ -27,13 +29,13 @@ <h1><a href="#KTransformation">KTransformation</a></h1>
       <div class="code-demo">
         <div>
           <code class="sample">
-            <span>import { cube3x3x3 } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/puzzles&quot;;<br>
-<br>
-const kpuzzle = await cube3x3x3.kpuzzle();<br>
-const suneTransformation =<br>
-&nbsp;&nbsp;kpuzzle.algToTransformation(&quot;R U R' U R U2' R'&quot;);<br>
-<br>
-console.log(suneTransformation.repetitionOrder());</span>
+            <span>import { cube3x3x3 } from &quot;<code class="boilerplate" title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/puzzles&quot;;<br>
+          <br>
+          const kpuzzle = await cube3x3x3.kpuzzle();<br>
+          const suneTransformation =<br>
+          &nbsp;&nbsp;kpuzzle.algToTransformation(&quot;R U R' U R U2' R'&quot;);<br>
+          <br>
+          console.log(suneTransformation.repetitionOrder());</span>
           </code>
         </div>
         <code class="sample output">

diff --git a/src/docs/js.cubing.net/cubing/scramble/index.html b/src/docs/js.cubing.net/cubing/scramble/index.html
@@ -34,7 +34,7 @@ <h1><a href="#random-scramble">Random Scramble</a></h1>
           <code class="sample">
             <span><code class="boilerplate">&lt;script type=&quot;module&quot;&gt;</code><br>
           import { randomScrambleForEvent } from &quot;<code class="boilerplate"
-            title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/scramble&quot;;<br>
+            title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/scramble&quot;;<br>
           <br>
           const scramble = await randomScrambleForEvent("333");
           console.log(scramble.toString());<br>
@@ -51,7 +51,7 @@ <h1><a href="#random-scramble">Random Scramble</a></h1>
           <code class="sample">
             <span><code class="boilerplate">&lt;script type=&quot;module&quot;&gt;</code><br>
           import { randomScrambleForEvent } from &quot;<code class="boilerplate"
-            title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/scramble&quot;;<br>
+            title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/scramble&quot;;<br>
           <br>
           (await randomScrambleForEvent("333")).log();<br>
           (await randomScrambleForEvent("333bf")).log();<br>
@@ -83,7 +83,7 @@ <h1><a href="#random-scramble">Random Scramble</a></h1>
           <code class="sample">
             <span><code class="boilerplate">&lt;script type=&quot;module&quot;&gt;</code><br>
           import { randomScrambleForEvent } from &quot;<code class="boilerplate"
-            title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/scramble&quot;;<br>
+            title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/scramble&quot;;<br>
           <br>
           (await randomScrambleForEvent("fto")).log();<br>
           (await randomScrambleForEvent("master_tetraminx")).log();<br>
@@ -156,7 +156,7 @@ <h1><a href="#prefetching">Prefetching and debug options</a></h1>
       <code class="sample"><code class="boilerplate">&lt;script type=&quot;module&quot;&gt;</code><br>
       // Note that this is `cubing/search`, not `cubing/scramble`.<br>
       import { setSearchDebug } from &quot;<code class="boilerplate"
-        title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/search&quot;;<br>
+        title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/search&quot;;<br>
       <br>
       // You can specify any subset of debug options.<br>
       setSearchDebug({<br>
@@ -197,9 +197,9 @@ <h1><a href="#with-twisty-player">With <code>&lt;twisty-player&gt;</code></a></h
 <br>
 <code class="boilerplate">&lt;script type=&quot;module&quot;&gt;</code><br>
           &nbsp;&nbsp;import &quot;<code class="boilerplate"
-            title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/twisty&quot;;<br>
+            title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/twisty&quot;;<br>
           &nbsp;&nbsp;import { randomScrambleForEvent } from &quot;<code class="boilerplate"
-            title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/js/</code>cubing/scramble&quot;;<br>
+            title="Remove this part of the import path if you are using `npm`.">https://cdn.cubing.net/v0/js/</code>cubing/scramble&quot;;<br>
           &nbsp;&nbsp;<br>
           &nbsp;&nbsp;const scramblePromise = randomScrambleForEvent(&quot;333&quot;);<br>
           &nbsp;&nbsp;document.querySelector(&quot;#main-player&quot;).alg = scramblePromise;<br>
@@ -211,8 +211,8 @@ <h1><a href="#with-twisty-player">With <code>&lt;twisty-player&gt;</code></a></h
 <twisty-player id="main-player" style="height: 256px;"></twisty-player>
 
 <script type="module">
-  import "https://cdn.cubing.net/js/cubing/twisty";
-  import { randomScrambleForEvent } from "https://cdn.cubing.net/js/cubing/scramble";
+  import "https://cdn.cubing.net/v0/js/cubing/twisty";
+  import { randomScrambleForEvent } from "https://cdn.cubing.net/v0/js/cubing/scramble";
 
   const scramblePromise = randomScrambleForEvent("333");
   document.querySelector("#main-player").alg = scramblePromise;