Update cdn links

css-doodle · Sep 26, 2024 · d417309 · d417309
1 parent 4eb0957
commit d417309
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -9,11 +9,10 @@
   <link rel="icon" href=favicon.png type="image/png">
   <link rel="stylesheet" href="lib/codemirror/style.css">
   <link rel="stylesheet" href="style.css?3e7f4fb5e44596523a3cc50355b529cd">
-  <link rel="preconnect" href="https://cdnjs.cloudflare.com">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=PT+Mono&display=swap" rel="stylesheet">
   <script>(window.customElements && document.head.attachShadow) || (document.querySelector('html').className += ' oldie')</script>
-  <script src="https://cdn.jsdelivr.net/npm/[email protected].3/css-doodle.js"></script>
+  <script type="module">import 'https://esm.sh/[email protected].5'</script>
 </head>
 <body>
 
@@ -23,7 +22,8 @@
       <h1>
         <span class="title">
           &lt; <em>css-doodle</em> /&gt;
-          <a class="version" href="https://cdn.jsdelivr.net/npm/[email protected]/css-doodle.js">v0.40.3</a>
+          <a class="version" href="https://cdn.jsdelivr.net/npm/[email protected]/css-doodle.min.js">v0.40.5</a>
+        </span>
         </span>
       </h1>
       <p>A web component for drawing patterns with CSS</p>
@@ -87,26 +87,43 @@ <h3>
     <section class="gettting-started wrap">
       <h2><a name="getting-started"></a>Getting Started</h2>
       <p>
-        Download the <a href="https://cdn.jsdelivr.net/npm/css-doodle@0.40.3/css-doodle.js">latest version</a> or include it directly from a CDN:
+        Download the <a href="https://cdn.jsdelivr.net/npm/css-doodle@latest/css-doodle.min.js">latest version</a> or include it directly from a CDN:
       </p>
       <p class="first-code-sample">
         <textarea code>
-          <script src="https://cdn.jsdelivr.net/npm/[email protected]/css-doodle.js"></script>
-
-          <css-doodle>
-            /* put your code here */
-          </css-doodle>
+          <script src="https://cdn.jsdelivr.net/npm/css-doodle@latest/css-doodle.min.js"></script>
         </textarea>
       </p>
-      <p>You can also install it from <a href="http://npmjs.org/package/css-doodle">npm</a> and import the module in JavaScript:
+      <p>You can also use ES Modules in modern browsers:</p>
+      <p>
+        <textarea code>
+          <script type="module">
+            import 'https://esm.sh/css-doodle@latest'
+          </script>
+        </textarea>
+      </p>
+
+      <p>If you're using a build tool, you can install it via <a href="http://npmjs.org/package/css-doodle">npm</a> and import it in JavaScript:</p>
+
       <p>
         <textarea code>
           npm install css-doodle
 
-          /* import it */
-          import 'css-doodle';
+          /* index.js */
+          import 'css-doodle'
         </textarea>
       </p>
+
+      <p>Start creating!</p>
+
+      <p>
+        <textarea code>
+          <css-doodle>
+            /* put your code here */
+          </css-doodle>
+        </textarea>
+      </p>
+
     </section>
 
     <!-- usage -->

diff --git a/main.js b/main.js
@@ -171,7 +171,7 @@
         @i(*4, 10), 70%, 68%, @r.8
       );
     `),
-    dashed: indent(`
+    rotate: indent(`
       @grid: 15 / 90%;
       border-radius: 50%;
       background: hsl(@t(/20), 70%, 60%);