Add directory structure css classes and docs. Improve filepath includ…

…e and organize custom.scss
ReWrite-Media · Nov 8, 2020 · 0a97d2a · 0a97d2a
1 parent 7293e72
commit 0a97d2a
Show file tree

Hide file tree

Showing 4 changed files with 351 additions and 23 deletions.
diff --git a/_includes/filepath.html b/_includes/filepath.html
@@ -1 +1,10 @@
-<p class="filepath">{{ include.path | replace: "/", "<span class='path-separator'>/</span>" }}</p>
+{% comment %}
+<!--
+File path include
+
+Params:
+ - path: path to the file
+ - id: optional parameter, which will add ID to the element
+-->
+{% endcomment %}
+<p class="filepath" {% if include.id %}id="{{include.id}}"{% endif %}>{{ include.path | replace: "/", "<span class='path-separator'>/</span>" }}</p>
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
@@ -1,3 +1,7 @@
+/*
+  Theme switcher
+*/
+
 .theme-switcher {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%239fa6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
   border-width: 1px;
@@ -16,6 +20,10 @@
   background-repeat: no-repeat;
 }
 
+/*
+  Table of contents
+*/
+
 @media (min-width: 93rem) {
   #toc {
     position: fixed;
@@ -116,6 +124,18 @@
   padding-left: 1em;
 }
 
+details#toc summary::-webkit-details-marker {
+  display: none;
+}
+
+details#toc > summary {
+  list-style: none;
+}
+
+/*
+  Contributors widget
+*/
+
 #contributors {
   display: flex;
 }
@@ -129,6 +149,10 @@
   width: 30px;
 }
 
+/*
+  News
+*/
+
 .post {
   background: $table-background-color;
   padding: 10px;
@@ -139,29 +163,15 @@
   line-break: anywhere;
 }
 
+/*
+  Navigation labels
+*/
+
 .nav-list-link .label {
   padding-top: 0;
   padding-bottom: 0;
 }
 
-.search-input {
-  color: $body-text-color;
-}
-
-details#toc summary::-webkit-details-marker {
-  display: none;
-}
-
-details#toc > summary {
-  list-style: none;
-}
-
-.nav-list .nav-list-item .nav-list-link:hover, .nav-list .nav-list-item .nav-list-link.active {
-  background-image: none;
-  background: $feedback-color;
-  border-radius: 4px;
-}
-
 .label-guide {
   background-color: #7253ed;
   width: 25px;
@@ -171,6 +181,10 @@ details#toc > summary {
   padding: 0;
 }
 
+/*
+  File path include
+*/
+
 .filepath {
   font-family: "SFMono-Regular", Menlo, Consolas, monospace;
   margin-bottom: 0;
@@ -193,4 +207,69 @@ details#toc > summary {
 div.highlighter-rouge {
   border-radius: 0;
   border: $border-color 1px solid;
+}
+
+/*
+  Directory structure include
+*/
+
+.folder-structure ul {
+  list-style: none;
+  margin-top: 0;
+  padding-left: 0;
+}
+
+.folder-structure li {
+  padding-left: 20px;
+  position: relative;
+  line-height: 2em;
+  margin: 0;
+}
+
+.folder-structure li:before {
+  position: absolute;
+  left: 5px;
+  top: -2px;
+  content: '' !important;
+  display: block;
+  height: 1em;
+  border-bottom: 1px solid #bbb;
+  width: 10px;
+  margin-left: 0 !important;
+}
+
+.folder-structure li:after {
+  position: absolute;
+  left: 5px;
+  bottom: 0;
+  content: '';
+  display: block;
+  border-left: 1px solid #bbb;
+  height: 100%;
+}
+
+.file::before {
+  content: '📝';
+}
+
+.folder::before {
+  content: '📁';
+}
+
+.image::before {
+  content: '🖼️';
+}
+
+/*
+  Misc fixes
+*/
+
+.search-input {
+  color: $body-text-color;
+}
+
+.nav-list .nav-list-item .nav-list-link:hover, .nav-list .nav-list-item .nav-list-link.active {
+  background-image: none;
+  background: $feedback-color;
+  border-radius: 4px;
 }
diff --git a/dir-structure.md b/dir-structure.md
@@ -0,0 +1,199 @@
+---
+layout: default
+title: Directory structure
+nav_exclude: true
+search_exclude: true
+---
+
+# Directory structure
+
+There is a number of CSS classes, which help build the directory structure. 
+
+Example:
+```html
+<div markdown="0" class="folder-structure">
+    <ul>
+        <li><span class="folder">BP</span>
+            <ul>
+                <li><span class="folder">items</span>
+                    <ul>
+                        <li><span class="file">gem.item.json</span></li>
+                        <li><span class="file">meal.item.json</span></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><span class="folder">RP</span>
+            <ul>
+                <li><span class="folder">items</span>
+                    <ul>
+                        <li><span class="file">gem.item.json</span></li>
+                        <li><span class="file">meal.item.json</span></li>
+                    </ul>
+                </li>
+                <li><span class="folder">texts</span>
+                    <ul>
+                        <li><span class="file">en_US.lang</span></li>
+                    </ul>
+                </li>
+                <li><span class="folder">textures</span>
+                    <ul>
+                        <li><span class="file">item_texture.json</span></li>
+                        <li><span class="folder">items</span>
+                            <ul>
+                                <li><span class="image">gem.png</span></li>
+                                <li><span class="image">meal.png</span></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</div>
+```
+
+Result:
+<div markdown="0" class="folder-structure">
+    <ul>
+        <li><span class="folder">BP</span>
+            <ul>
+                <li><span class="folder">items</span>
+                    <ul>
+                        <li><span class="file">gem.item.json</span></li>
+                        <li><span class="file">meal.item.json</span></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><span class="folder">RP</span>
+            <ul>
+                <li><span class="folder">items</span>
+                    <ul>
+                        <li><span class="file">gem.item.json</span></li>
+                        <li><span class="file">meal.item.json</span></li>
+                    </ul>
+                </li>
+                <li><span class="folder">texts</span>
+                    <ul>
+                        <li><span class="file">en_US.lang</span></li>
+                    </ul>
+                </li>
+                <li><span class="folder">textures</span>
+                    <ul>
+                        <li><span class="file">item_texture.json</span></li>
+                        <li><span class="folder">items</span>
+                            <ul>
+                                <li><span class="image">gem.png</span></li>
+                                <li><span class="image">meal.png</span></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</div>
+
+## CSS classes
+
+### folder-structure
+
+Changes unordered list style, so it resembles directory tree.
+
+### folder
+
+Adds folder emoji before element. 
+
+### file
+
+Adds text file emoji before element. 
+
+### image
+
+Adds image emoji before element. 
+
+## Structure generator
+
+There is also automatic structure generator at [https://stirante.com/dir-converter/converter.html](https://stirante.com/dir-converter/converter.html).
+
+The text area on the left accepts a list of paths delimited by new line. After clicking the convert button, the HTML should be generated in text area on the right side.
+
+To generate the output in the first example, use this input:
+```
+RP/texts/en_US.lang
+RP/textures/item_texture.json
+RP/items/meal.item.json
+BP/items/meal.item.json
+BP/items/gem.item.json
+RP/items/gem.item.json
+RP/textures/items/gem.png
+RP/textures/items/meal.png
+```
+
+### File links
+
+To link file inside directory structure to an element, add `#<id>` after file path like this:
+
+```
+RP/texts/en_US.lang
+RP/textures/item_texture.json
+RP/items/meal.item.json#rp_meal_item
+BP/items/meal.item.json#bp_meal_item
+BP/items/gem.item.json#bp_gem_item
+RP/items/gem.item.json#rp_gem_item
+RP/textures/items/gem.png
+RP/textures/items/meal.png
+```
+
+This will result in this output:
+```html
+<div markdown="0" class="folder-structure">
+    <ul>
+        <li><span class="folder">BP</span>
+            <ul>
+                <li><span class="folder">items</span>
+                    <ul>
+                        <li><a href="#bp_gem_item" class="file">gem.item.json</>
+                        </li>
+                        <li><a href="#bp_meal_item" class="file">meal.item.json</>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><span class="folder">RP</span>
+            <ul>
+                <li><span class="folder">items</span>
+                    <ul>
+                        <li><a href="#rp_gem_item" class="file">gem.item.json</>
+                        </li>
+                        <li><a href="#rp_meal_item" class="file">meal.item.json</>
+                        </li>
+                    </ul>
+                </li>
+                <li><span class="folder">texts</span>
+                    <ul>
+                        <li><span class="file">en_US.lang</>
+                        </li>
+                    </ul>
+                </li>
+                <li><span class="folder">textures</span>
+                    <ul>
+                        <li><span class="file">item_texture.json</>
+                        </li>
+                        <li><span class="folder">items</span>
+                            <ul>
+                                <li><span class="image">gem.png</>
+                                </li>
+                                <li><span class="image">meal.png</>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+    </ul>
+</div>
+```