Skip to content

Commit

Permalink
Use the /v0 CDN namespace.
Browse files Browse the repository at this point in the history
  • Loading branch information
@lgarron
lgarron committed Sep 27, 2024
1 parent e245791 commit 797d3f9
Show file tree
Hide file tree
Showing 6 changed files with 93 additions and 84 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
```

Expand Down
118 changes: 62 additions & 56 deletions src/docs/js.cubing.net/cubing/alg/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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>
Expand All @@ -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">
Expand All @@ -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">
Expand Down
17 changes: 9 additions & 8 deletions src/docs/js.cubing.net/cubing/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -35,10 +35,11 @@ <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;
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>
src=&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/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>
</code>
<twisty-player alg="R U R' U R U2' R'">
</twisty-player>
Expand All @@ -58,7 +59,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>
Expand All @@ -83,7 +84,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>
Expand Down Expand Up @@ -124,7 +125,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">
Expand Down
18 changes: 10 additions & 8 deletions src/docs/js.cubing.net/cubing/kpuzzle/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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">
Expand Down
Loading

0 comments on commit 797d3f9

Please sign in to comment.