V1.1.3: added code lang support + TOC support

drabkirn · Mar 28, 2020 · 640e48d · 640e48d
1 parent 4442f63
commit 640e48d
Show file tree

Hide file tree

Showing 7 changed files with 216 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 > Desityle is a sleek and straightforward DIY CSS library built from scratch with DIY(Do It Yourself) concept in mind.
 
 <!-- Add CI/CD info, language, main frameworks used from shields.io. Example -->
-[![Desityle 1.1.2](https://img.shields.io/badge/Desityle-v1.1.2-green.svg)](https://www.npmjs.com/package/desityle)
+[![Desityle 1.1.3](https://img.shields.io/badge/Desityle-v1.1.3-green.svg)](https://www.npmjs.com/package/desityle)
 [![Issues](https://img.shields.io/github/issues/drabkirn/desityle.svg)](https://github.com/drabkirn/desityle/issues)
 [![Issues closed](https://img.shields.io/github/issues-closed/drabkirn/desityle.svg)](https://github.com/drabkirn/desityle/issues)
 [![Pulls](https://img.shields.io/github/issues-pr/drabkirn/desityle.svg)](https://github.com/drabkirn/desityle/pulls)
@@ -17,7 +17,7 @@
 
 Desityle is a sleek and straightforward DIY CSS library built from scratch with DIY(Do It Yourself) concept in mind. Desityle helps you to make your websites look stunning neat and gloriously attractive. Our default mode is dark, thus eyes saving to the rescue. Check out what we've got for you in the bag:
 
-**See Demo at: [https://drabkirn.cdadityang.xyz/desityle](https://drabkirn.cdadityang.xyz/desityle)**
+**See Demo at: [https://go.cdadityang.xyz/style](https://go.cdadityang.xyz/style)**
 
 -----
 -----
@@ -35,17 +35,17 @@ Desityle is a sleek and straightforward DIY CSS library built from scratch with
 1. **Using CDN on your static website:**
     - Just include our CSS and JS CDN files in your `index.html`(or any other `.html` file):
         ```html
-        <link rel="stylesheet" href="https://unpkg.com/desityle@1.1.2/build/css/desityle.min.css" />
+        <link rel="stylesheet" href="https://unpkg.com/desityle@1.1.3/build/css/desityle.min.css" />
 
-        <script src="https://unpkg.com/desityle@1.1.2/build/js/desityle.min.js"></script>
+        <script src="https://unpkg.com/desityle@1.1.3/build/js/desityle.min.js"></script>
         ```
 
 2. **Using in React or other JS Libraries/Frameworks:**
     - Install using NPM or Yarn:
         ```bash
-        $ yarn add desityle@1.1.2
+        $ yarn add desityle@1.1.3
         # or
-        $ npm install desityle@1.1.2 --save
+        $ npm install desityle@1.1.3 --save
         ```
     - Then Import in your libraries:
         ```js

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "desityle",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Desityle is a sleek and straightforward DIY CSS library built from scratch with DIY(Do It Yourself) concept in mind.",
   "main": "index.js",
   "scripts": {

diff --git a/src/components.html b/src/components.html
@@ -115,6 +115,7 @@ <h2>Desityle</h2>
     <a href="#componentsContentSection" class="btn">Jumbos</a>
     <a href="#componentsContentSection" class="btn">Badgetags</a>
     <a href="#componentsContentSection" class="btn">Table</a>
+    <a href="#componentsContentSection" class="btn">TOC</a>
     <a href="#componentsContentSection" class="btn">Cards</a>
     <a href="#componentsContentSection" class="btn">Footer</a>
   </section>
@@ -678,21 +679,26 @@ <h3>Code for Floatings: </h3>
 
     <!-- Code snipets -->
     <div>
-      <div>
+      <div class="container">
         <p>This is code snippet. Syntax highlighting as per language is in draft specification. Currently, all the code is in light pink color: </p>
-  <pre><code><xmp>let firstVariable = "I am first Variable";
-  console.log(firstVariable);
-  </xmp></code></pre>
+        <pre><code><xmp>let firstVariable = "I am first Variable";
+console.log(firstVariable);
+</xmp></code></pre>
+      </div>
+
+      <div class="container">
+        <p>This is code snippet with language of the code specified:</p>
+        <pre class="pre-code"><span class="pre-code-span">ruby</span><code><xmp>a = [1, 2, 3, 4]
+b = [5, 6, 7, 8]
+a + b
+# => [1, 2, 3, 4, 5, 6]
+</xmp></code></pre>
       </div>
 
       <!-- Code for Above code snippet -->
       <div class="container mt-30">
-        <h3>Code for Above code snippet: </h3>
-        <pre><code><xmp><pre><code><xmp>
-let firstVariable = "I am first Variable";
-console.log(firstVariable);
-</xmp></code></pre>
-</xmp></code></pre>
+        <h3>Code for Above code snippets: </h3>
+        <p class="mt-10">We'll not be able to show you this demo here. But hey, we can show you <a href="#">here at our codepen</a>.</p>
       </div>
     </div>
 
@@ -1140,6 +1146,53 @@ <h3>Code for Table: </h3>
       </div>
     </div>
 
+    <!-- Table of contents: -->
+    <div>
+      <div class="container">
+        <ol class="ol-toc">
+          <li class="ol-toc-item">Introduction</li>
+          <li class="ol-toc-item">
+            <ol class="ol-toc-nested">
+              <li data-href="about-us">About Us</li>
+              <li data-href="know-more-about-us">Know more about us</li>
+            </ol>
+          </li>
+          <li class="ol-toc-item">Desityle</li>
+          <li class="ol-toc-item">
+            <ol class="ol-toc-nested">
+              <li data-href="di">Development Installation</li>
+              <li data-href="pi">Production Installation</li>
+            </ol>
+          </li>
+        </ol>
+
+        <p class="mt-40"><em>Table of contents requires you to have our Javascript file included. Read our <a href="https://drabkirn.cdadityang.xyz/docs/index.html#desityle" target="_blank" rel="noopener noreferrer">docs</a> on how to integrate our Javascript file. When you click on "About Us" section above, the user will be jumped to "#about-us" taken from "data-href" attribute.</em></p>
+      </div>
+
+      <!-- Code of Table of contents -->
+      <div class="container mt-20">
+          <h3>Code for Table of contents: </h3>
+          <pre><code><xmp><div class="container">
+  <ol class="ol-toc">
+    <li class="ol-toc-item">Introduction</li>
+    <li class="ol-toc-item">
+      <ol class="ol-toc-nested">
+        <li data-href="about-us">About Us</li>
+        <li data-href="know-more-about-us">Know more about us</li>
+      </ol>
+    </li>
+    <li class="ol-toc-item">Desityle</li>
+    <li class="ol-toc-item">
+      <ol class="ol-toc-nested">
+        <li data-href="di">Development Installation</li>
+        <li data-href="pi">Production Installation</li>
+      </ol>
+    </li>
+  </ol>
+</div></xmp></code></pre>
+      </div>
+    </div>
+
     <!-- Cards -->
     <div>
       <div class="container">

diff --git a/src/css/03-helpers.css b/src/css/03-helpers.css
@@ -713,10 +713,12 @@
 /* Fonts Sizing START */
 .fs-1 {
   font-size: 1em;
+  line-height: 1;
 }
 
 .fs-1-2 {
   font-size: 1.2em;
+  line-height: 1.2;
 }
 
 .fs-1-4 {

diff --git a/src/css/04-desityle.css b/src/css/04-desityle.css
@@ -69,8 +69,8 @@ i, em {
   font-style: italic;
 }
 
-/* Links under p, u, i, b, em must be equalized */
-p > a, u > a, i > a, b > a, em > a {
+/* Links under p, u, i, b, em, blockquote and indent-lists must be equalized */
+p > a, u > a, i > a, b > a, em > a, blockquote > p, ol li ol, ul li ul, ol li ul, ol li a, ul li a {
   font-size: 1em;
 }
 
@@ -736,6 +736,93 @@ ul {
 }
 /* Pagination END */
 
+
+/* Code snippet START */
+.pre-code {
+  position: relative;
+}
+
+.pre-code .pre-code-span {
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  border-radius: 20%;
+  background: var(--dark-red-color);
+  color: var(--light-white-color);
+}
+
+.pre-code code xmp {
+  margin-top: 15px;
+}
+/* Code snippet END */
+
+
+
+/* TOC START */
+.ol-toc {
+  list-style-type: none;
+  border: 2px solid var(--light-white-color);
+  font-size: 1.3em;
+  padding: 0;
+  width: 80%;
+  margin: 0 auto;
+}
+
+.ol-toc .ol-toc-item {
+  padding-left: 1em;
+  border-bottom: 2px solid var(--light-white-color);
+}
+
+.ol-toc .ol-toc-item:nth-child(odd) {
+  color: pink;
+}
+
+.ol-toc .ol-toc-item:nth-child(odd):hover {
+  background: var(--dark-red-color);
+}
+
+.ol-toc .ol-toc-item:last-child {
+  border-bottom: none;
+}
+
+.ol-toc .ol-toc-item .ol-toc-nested {
+  list-style-type: none;
+  padding-left: 0;
+  border-left: 2px solid;
+}
+
+.ol-toc .ol-toc-item .ol-toc-nested li {
+  padding-left: 1em;
+  border-bottom: 2px solid var(--light-white-color);
+}
+
+.ol-toc .ol-toc-item .ol-toc-nested li:hover {
+  background: var(--light-white-color);
+  color: var(--light-black-color);
+}
+
+.ol-toc .ol-toc-item .ol-toc-nested li:last-child {
+  border-bottom: none;
+}
+
+/* Small Devices: Mobile */
+@media only screen and (max-width: 480px) {
+  .ol-toc {
+    width: 100%;
+    font-size: 1.2em;
+  }
+}
+
+/* Large Devices: Desktop */
+@media only screen and (min-width: 992px) {
+  .ol-toc {
+    width: 60%;
+  }
+}
+/* TOC END */
+
+
+
 /* Others START */
 .field-explanation {
   font-style: italic;

diff --git a/src/custom.js b/src/custom.js
@@ -24,6 +24,7 @@ function hideAllContentExceptMentioned(mentionedContent = ""){
 hideAllContentExceptMentioned();
 
 
+
 // Pagination Demo START
 document.addEventListener('DOMContentLoaded', () => {
   const paginationLiATags = document.querySelectorAll('.pagination li a');
@@ -35,4 +36,29 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   } 
 });
-// Pagination Demo END
+// Pagination Demo END
+
+
+
+// TOC Demo START
+document.addEventListener('DOMContentLoaded', () => {
+  const mainLi = document.querySelectorAll('.ol-toc .ol-toc-item:nth-child(odd)');
+  const nestedLi = document.querySelectorAll('.ol-toc .ol-toc-item .ol-toc-nested li');
+
+  for(let i = 0; i < mainLi.length; i++) {
+    let nextEle = mainLi[i].nextElementSibling;
+    nextEle.style.display = "none";
+
+    mainLi[i].addEventListener('click', () => {
+      if(nextEle.style.display === "none") nextEle.style.display = "block";
+      else nextEle.style.display = "none";
+    });
+  }
+
+  for(let i = 0; i < nestedLi.length; i++) {
+    nestedLi[i].addEventListener('click', () => {
+      window.location.href = "#" + nestedLi[i].dataset.href;
+    });
+  }
+});
+// TOC Demo END
diff --git a/src/js/01-app.js b/src/js/01-app.js
@@ -1,5 +1,6 @@
 // ADD LICENSE HERE
 
+
 // Navbar configuration START
 document.addEventListener('DOMContentLoaded', () => {
   const htmlTag = document.querySelector('html');
@@ -40,6 +41,7 @@ document.addEventListener('DOMContentLoaded', () => {
 // Navbar configuration END
 
 
+
 // Pagination START
 document.addEventListener('DOMContentLoaded', () => {
   const paginationLiATags = document.querySelectorAll('.pagination li a');
@@ -51,4 +53,29 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   } 
 });
-// Pagination END
+// Pagination END
+
+
+
+// TOC START
+document.addEventListener('DOMContentLoaded', () => {
+  const mainLi = document.querySelectorAll('.ol-toc .ol-toc-item:nth-child(odd)');
+  const nestedLi = document.querySelectorAll('.ol-toc .ol-toc-item .ol-toc-nested li');
+
+  for(let i = 0; i < mainLi.length; i++) {
+    let nextEle = mainLi[i].nextElementSibling;
+    nextEle.style.display = "none";
+
+    mainLi[i].addEventListener('click', () => {
+      if(nextEle.style.display === "none") nextEle.style.display = "block";
+      else nextEle.style.display = "none";
+    });
+  }
+
+  for(let i = 0; i < nestedLi.length; i++) {
+    nestedLi[i].addEventListener('click', () => {
+      window.location.href = "#" + nestedLi[i].dataset.href;
+    });
+  }
+});
+// TOC END