Adding updates to the data elements and adding the examples to the list

data.json

@@ -132,5 +132,34 @@
         "text-input",
         "textarea",
         "pagination"
-    ]
+    ],
+    "examples" : {
+        "accordion" : ["01", "02"],
+        "alert" : ["01", "02"],
+        "badge" : ["01", "02", "03", "04"],
+        "banner" : ["01", "02"],
+        "breadcrumbs" : ["01", "02"],
+        "button" : ["01", "02", "03"],
+        "card" : ["01", "02", "03"],
+        "checkbox" : ["01", "02", "03"],
+        "command" : ["01", "02"],
+        "context-menu" : ["01", "02"],
+        "copy-to-clipboard" : ["01", "02"],
+        "date-picker" : ["01"],
+        "dropdown-menu" : ["01"],
+        "full-screen-menu" : ["01"],
+        "full-screen-modal" : ["01"],
+        "modal" : ["01", "02"],
+        "pagination" : ["01"],
+        "progress" : ["01"],
+        "slide-over" : ["01"],
+        "switch" : ["01"],
+        "table" : ["01", "02"],
+        "tabs" : ["01"],
+        "text-animation" : ["01", "02"],
+        "textarea-auto-resize" : ["01"],
+        "textarea" : ["01"],
+        "tooltip" : ["01", "02"],
+        "video" : ["01", "02"]
+    }
 }

index.html

@@ -17,9 +17,13 @@
         <svg class="w-auto h-6 mb-5" viewBox="0 0 355 99" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M119.1 87V66.4h19.8c34.3 0 34.2-49.5 0-49.5-11 0-22 .1-33 .1v70h13.2zm19.8-32.7h-19.8V29.5h19.8c16.8 0 16.9 24.8 0 24.8zm32.6-30.5c0 9.5 14.4 9.5 14.4 0s-14.4-9.5-14.4 0zM184.8 87V37.5h-12.2V87h12.2zm22.8 0V61.8c0-7.5 5.1-13.8 12.6-13.8 7.8 0 11.9 5.7 11.9 13.2V87h12.2V61.1c0-15.5-9.3-24.2-20.9-24.2-6.2 0-11.2 2.5-16.2 7.4l-.8-6.7h-10.9V87h12.1zm72.1 1.3c7.5 0 16-2.6 21.2-8l-7.8-7.7c-2.8 2.9-8.7 4.6-13.2 4.6-8.6 0-13.9-4.4-14.7-10.5h38.5c1.9-20.3-8.4-30.5-24.9-30.5-16 0-26.2 10.8-26.2 25.8 0 15.8 10.1 26.3 27.1 26.3zM292 56.6h-26.6c1.8-6.4 7.2-9.6 13.8-9.6 7 0 12 3.2 12.8 9.6zm41.2 32.1c14.1 0 21.2-7.5 21.2-16.2 0-13.1-11.8-15.2-21.1-15.8-6.3-.4-9.2-2.2-9.2-5.4 0-3.1 3.2-4.9 9-4.9 4.7 0 8.7 1.1 12.2 4.4l6.8-8c-5.7-5-11.5-6.5-19.2-6.5-9 0-20.8 4-20.8 15.4 0 11.2 11.1 14.6 20.4 15.3 7 .4 9.8 1.8 9.8 5.2 0 3.6-4.3 6-8.9 5.9-5.5-.1-13.5-3-17-6.9l-6 8.7c7.2 7.5 15 8.8 22.8 8.8z" id="a"></path></defs><g fill="none" fill-rule="evenodd"><g fill="currentColor"><path d="M19.742 49h28.516L68 83H0l19.742-34z"></path><path d="M26 69h14v30H26V69zM4 50L33.127 0 63 50H4z"></path></g><g fill-rule="nonzero"><use fill="currentColor" xlink:href="#a"></use><use fill="currentColor" xlink:href="#a"></use></g></g></svg>
         <a id="back" href="/" class="hidden text-blue-500 underline">&larr; Back</a>
 		<h2 id="start" class="mb-1 font-bold text-neutral-900">Getting Started</h2>
-        <ul id="gettingStarted" class="space-y-0.5 font-medium mb-5"></ul>
+        <ul id="gettingStarted" class="space-y-1 font-medium mb-5">
+            <li><a class="text-blue-500 underline" href="?start=introduction">Introduction</a></li>
+            <li><a class="text-blue-500 underline" href="?start=how-to-use">How To Use</a></li>
+            <li><a class="text-blue-500 underline" href="?start=contribution">Contribution</a></li>
+        </ul>
 		<h2 id="title" class="mb-1 font-bold text-neutral-900">Elements</h2>
-        <ul id="elements" class="space-y-0.5 font-medium"></ul>
+        <ul id="elements" class="space-y-1 font-medium"></ul>
     </div>
     <div id="content"></div>
     <script src="./main.js"></script>

main.js

@@ -4,7 +4,7 @@
  * If not, load the list of elements and getting started items from the JSON file.
  */
 document.addEventListener('DOMContentLoaded', function() {
-    const element = getQueryParameter('element');
+    let element = getQueryParameter('element');
     const start = getQueryParameter('start');
     if(element || start){
         document.getElementById('list').remove();
@@ -14,6 +14,11 @@ document.addEventListener('DOMContentLoaded', function() {
             let folderLocation = (element) ? 'elements' : 'getting-started';
             let file = (element) ? element : start;
             if(element){
+                
+                if(element.includes('-examples')){
+                    element = element.replace('-examples', '').split('/')[0];
+                }
+                console.log(element);
                 document.getElementById('content').className = data.container[element];
             } else {
                 document.getElementById('content').className = 'max-w-3xl p-10 prose';
@@ -27,8 +32,13 @@ document.addEventListener('DOMContentLoaded', function() {
         document.getElementById('content').remove();
         load_file('./data.json', function(text){
             let data = JSON.parse(text);
-            addItemsToList(data.elements, document.getElementById('elements'), 'element');
+            addItemsToList(data.elements, document.getElementById('elements'), 'element', data.examples);
             addItemsToList(data.start, document.getElementById('gettingStarted'), 'start');
+
+            // for(let i=0; i < data.examples.length; i++){
+                
+            // }
+
             document.body.style = '';
         });
     }
@@ -49,28 +59,39 @@ function getQueryParameter(parameter){
 /**
  * Add element and getting started items from the JSON file to the html list
  */
-function addItemsToList(myObject, myList, param){
+function addItemsToList(myObject, myList, param, examples = null){
     for (const key in myObject) {
         const listItem = document.createElement('li');
         const link = document.createElement('a');
         link.className = 'text-blue-500 underline';
         link.href = '?' + param + '=' + key;
         link.textContent = myObject[key];
+
         listItem.appendChild(link);
+
+        if(examples){
+            if(examples[key]){
+                let exampleList = document.createElement('ul');
+                exampleList.classList.add('list-disc', 'pl-4');
+                let exampleFiles = examples[key];
+                for(let i=0; i < exampleFiles.length; i++){
+                    let exampleListItem = document.createElement('li');
+                    let exampleLink = document.createElement('a');
+                    exampleLink.className = 'text-blue-500 underline';
+                    exampleLink.href = '?' + param + '=' + key + '-examples/example-' + exampleFiles[i];
+                    exampleLink.textContent = 'Example ' + exampleFiles[i];
+
+                    exampleListItem.appendChild(exampleLink);
+                    exampleList.appendChild(exampleListItem);
+
+                }
+            
+                listItem.appendChild(exampleList);
+            }
+        }
+        
         myList.appendChild(listItem);
 
-        // POSSIBLE TODO: Add click event to load content from HTML file, DYNAMIC PAGE LOAD INSTEAD OF FULL PAGE LOAD
-        // link.addEventListener('click', function(e){
-        //     e.preventDefault();
-        //     console.log(e.target.href);
-        //     console.log('do magic');
-        //     get_element(e.target.href, function(text){
-        //         const parser = new DOMParser();
-        //         const doc = parser.parseFromString(text, 'text/html');
-        //         const bodyContent = doc.querySelector('body').innerHTML;
-        //         console.log(bodyContent);
-        //     });
-        // });
     }
 }