Bring "Community components" example into A-Frame Examples. (#5211)

* Copy example from glitch * Update example to use latest working code * Add link to Community Components example * Consistently use jsdelivr for CDN * Update Title * Update documentation of community components example * Fix docs lint error * Add comment explaining what to do if copy/pasting code. * Tidy up. * Move community components from "showcase" to "docs" * Fix some bad links left over from #5215 * Use versioned release here Docs will be auto-updated using per-release process.
aframevr · Mar 28, 2023 · 84e766f · 84e766f
1 parent bc6b11a
commit 84e766f
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 26 deletions.
diff --git a/docs/guides/building-a-minecraft-demo.md b/docs/guides/building-a-minecraft-demo.md
@@ -6,11 +6,11 @@ parent_section: guides
 order: 10
 examples:
   - title: Aincraft
-    src: https://github.com/aframevr/aframe/tree/master/examples/showcase/aincraft/ 
+    src: https://github.com/aframevr/aframe/tree/master/examples/docs/aincraft/ 
 ---
 
-[source-code]: https://github.com/aframevr/aframe/tree/master/examples/showcase/aincraft/
-[live-demo]: https://aframe.io/examples/showcase/aincraft/
+[source-code]: https://github.com/aframevr/aframe/tree/master/examples/docs/aincraft/
+[live-demo]: https://aframe.io/examples/docs/aincraft/
 
 > View the [source code][source-code], or try out [the demo][live-demo]
 
@@ -53,7 +53,7 @@ our assets, and create a thin cylinder entity pointing to that texture:
 </a-scene>
 ```
 
-See a live version [here](https://aframe.io/examples/showcase/aincraft/step1.html)
+See a live version [here](https://aframe.io/examples/docs/aincraft/step1.html)
 
 ### Preloading Assets
 
@@ -84,7 +84,7 @@ Let's move our ground texture to `<a-assets>` to be preloaded using an
 </a-scene>
 ```
 
-See a live version [here](https://aframe.io/examples/showcase/aincraft/step2.html)
+See a live version [here](https://aframe.io/examples/docs/aincraft/step2.html)
 
 ## Adding a Background
 
@@ -123,7 +123,7 @@ to match the ground:
 </a-scene>
 ```
 
-See a live version [here](https://aframe.io/examples/showcase/aincraft/step3.html)
+See a live version [here](https://aframe.io/examples/docs/aincraft/step3.html)
 
 ## Adding Voxels
 
@@ -255,7 +255,7 @@ and include it before the scene:
 </a-scene>
 ```
 
-See a live version [here](https://aframe.io/examples/showcase/aincraft/step4.html)
+See a live version [here](https://aframe.io/examples/docs/aincraft/step4.html)
 
 Components can be plugged into any entity without having to create or extend a
 class like we'd have to in traditional inheritance. If we wanted to attach it
@@ -277,7 +277,7 @@ modular and reusable!
 
 ### Snap Component
 
-[snap]: https://github.com/aframevr/aframe/tree/master/examples/showcase/aincraft/components/snap.js
+[snap]: https://github.com/aframevr/aframe/tree/master/examples/docs/aincraft/components/snap.js
 
 We'll have a `snap` component to snap our boxes to a grid so they aren't
 overlapping. We won't get into the details of how this component is
@@ -345,7 +345,7 @@ And we've added voxels using that mixin:
 <a-entity mixin="voxel" position="1 0 -2"></a-entity>
 ```
 
-See a live version [here](https://aframe.io/examples/showcase/aincraft/step5.html)
+See a live version [here](https://aframe.io/examples/docs/aincraft/step5.html)
 
 Next, we'll be creating voxels dynamically through interaction using tracked
 controllers. Let's start adding our hands to the application.
@@ -470,7 +470,7 @@ document.querySelector('#blockHand').addEventListener(`click`, function (evt) {
 });
 ```
 
-[intersection-spawn]: https://github.com/aframevr/aframe/tree/master/examples/showcase/aincraft/components/intersection-spawn.js
+[intersection-spawn]: https://github.com/aframevr/aframe/tree/master/examples/docs/aincraft/components/intersection-spawn.js
 
 To generalize creating entities from an intersection event, we've created an
 `intersection-spawn` component that can be configured with any event and list

diff --git a/docs/introduction/entity-component-system.md b/docs/introduction/entity-component-system.md
@@ -451,27 +451,37 @@ Now we can include it into our HTML:
 </html>
 ```
 
+### Using jsdelivr for CDN
+
+[jsdelivr]: https://www.jsdelivr.com/
+
+[JSDELIVR][jsdelivr] is an alternative CDN to unpkg.  One benefit of JSDELIVR is that it can download files from GitHub as well as NPM.
+
+You can convert unpkg URLs to  JSDELIVR URLs using this link: https://www.jsdelivr.com/unpkg
+
+You can convert GitHub URLs to  JSDELIVR URLs using this link: https://www.jsdelivr.com/github
+
 ### Example
 
-[glitch]: http://glitch.com/~aframe-registry
+[community-example]: https://aframe.io/examples/docs/community-components
 
-![Registry Example](https://cloud.githubusercontent.com/assets/674727/25502318/0f76ceec-2b4b-11e7-9829-cb3784b20dc1.gif)
+![Community Components Example](https://cloud.githubusercontent.com/assets/674727/25502318/0f76ceec-2b4b-11e7-9829-cb3784b20dc1.gif)
 
 Below is a complete example of using various community components from the
-Registry and using the unpkg CDN. We can [remix or check out this example on
-Glitch][glitch].
+Registry and using the JSDELIVR CDN.  This example can also be viewed in the [A-Frame Examples][community-example].
 
 ```html
 <html>
   <head>
-    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
-    <script src="https://unpkg.com/aframe-animation-component@3.2.1/dist/aframe-animation-component.min.js"></script>
-    <script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
-    <script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script>
-    <script src="https://unpkg.com/aframe-gradient-sky@1.4.0/dist/gradientsky.min.js"></script>
+    <title>Community Components Example</title>
+    <meta name="description" content="Community Components Example">
+    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>  
+    <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-particle-system-component@a5a8449/dist/aframe-particle-system-component.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/aframe-simple-sun-sky@^1.2.2/simple-sun-sky.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@d5f3f8/dist/aframe-extras.min.js"></script>
   </head>
   <body>
-    <a-scene>
+    <a-scene> 
       <a-entity id="rain" particle-system="preset: rain; color: #24CAFF; particleCount: 5000"></a-entity>
 
       <a-entity id="sphere" geometry="primitive: sphere"
@@ -483,11 +493,9 @@ Glitch][glitch].
       <a-entity id="ocean" ocean="density: 20; width: 50; depth: 50; speed: 4"
                 material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1"
                 rotation="-90 0 0"></a-entity>
-
-      <a-entity id="sky" geometry="primitive: sphere; radius: 5000"
-                material="shader: gradient; topColor: 235 235 245; bottomColor: 185 185 210"
-                scale="-1 1 1"></a-entity>
-
+
+      <a-simple-sun-sky sun-position="1 0.4 0"></a-simple-sun-sky>
+
       <a-entity id="light" light="type: ambient; color: #888"></a-entity>
     </a-scene>
   </body>

diff --git a/examples/docs/community-components/index.html b/examples/docs/community-components/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Community Components Example</title>
+    <meta name="description" content="Community Components Example">
+    <!-- If running this example without a local copy of A-Frame, replace this next line with:
+    <script src="https://aframe.io/releases/<release_number>/aframe.min.js"></script>
+    -->
+    <script src="../../../dist/aframe-master.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-particle-system-component@a5a8449/dist/aframe-particle-system-component.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/aframe-simple-sun-sky@^1.2.2/simple-sun-sky.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@d5f3f8/dist/aframe-extras.min.js"></script>
+  </head>
+  <body>
+    <a-scene> 
+      <a-entity id="rain" particle-system="preset: rain; color: #24CAFF; particleCount: 5000"></a-entity>
+
+      <a-entity id="sphere" geometry="primitive: sphere"
+                material="color: #EFEFEF; shader: flat"
+                position="0 0.15 -5"
+                light="type: point; intensity: 5"
+                animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 -0.10 -5; loop: true"></a-entity>
+
+      <a-entity id="ocean" ocean="density: 20; width: 50; depth: 50; speed: 4"
+                material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1"
+                rotation="-90 0 0"></a-entity>
+
+      <a-simple-sun-sky sun-position="1 0.4 0"></a-simple-sun-sky>
+
+      <a-entity id="light" light="type: ambient; color: #888"></a-entity>
+    </a-scene>
+  </body>
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -136,7 +136,7 @@ <h2>Examples</h2>
     <ul class="links">
       <li><a href="showcase/anime-UI/">Anime UI</a></li>
       <li><a href="showcase/comicbook/">Comic Book</a></li>
-      <li><a href="showcase/composite/">Composite</a></li>
+      <li><a href="showcase/composite/">Composite</a></li>      
       <li><a href="showcase/curved-mockups/">Curved Mockups</a></li>
       <li><a href="showcase/dynamic-lights/">Dynamic Lights</a></li>
       <li><a href="showcase/hand-tracking/">Hand Tracking</a></li>
@@ -159,6 +159,7 @@ <h2>Examples from Documentation</h2>
     <ul class="links">
        <li><a href="docs/360-gallery/">360 Gallery</a></li>
        <li><a href="docs/aincraft/">Aincraft</a></li>
+       <li><a href="docs/community-components/">Community Components</a></li>
     </ul>
 
     <h2>Tests</h2>