feat(toc): got the table of contents working for imported documents

Signed-off-by: Laura Santamaria <[email protected]>

Author: nimbinatus

site/config.toml

@@ -43,7 +43,7 @@ highlight_theme = "inspired-github"
 render_emoji = true
 external_links_target_blank = true
 external_links_no_referrer = true
-insert_anchor_links = "left"
+#insert_anchor_links = "left"
 
 [extra]
 # Put all your custom variables here

site/content/about/about.md

@@ -7,6 +7,6 @@ toc = true
 
 # So what is bootc?
 
-Imagine the ability to set up your operating system using a file you can check into source control. bootc basically turns your operating system into a containerized system, complete with in-place updates, custom configuations and pre-installed software and drivers, and more. You can share your custom containerized operating system image with others, too.
+Imagine the ability to set up your operating system using a file you can check into source control. bootc basically turns your operating system into a containerized system, complete with in-place updates, custom configurations and pre-installed software and drivers, and more. You can share your custom containerized operating system image with others, too.
 
-Unlock the power of bootc with shared custom OS images
+Unlock the power of bootc with shared custom OS images.

site/templates/imported.html

@@ -28,31 +28,26 @@
         {% set_global mapset = mapset | concat(with=mapset1) %}
     {%- endif %}
 {%- endfor %}
-<p>{{ mapset | json_encode(pretty=true) | safe }}</p>
 <div class="toc">
     <div class="toc-sticky">
-        <ul>
-        {%- for elem in toc %}
-            {%- if elem is starting_with("<h1") %}
-            {%- set id_val = elem | regex_replace(pattern=`<h1 id="(?P<anchor>.*)">.*</h1>`, rep=`$anchor`) %}
-            <li class="toc-item"><a href="#{{ id_val }}" class="subtext">{{ elem | regex_replace(pattern=`<h1 id=".*">(?P<heading>.*)</h1>`, rep=`$heading`) | as_str }}</a></li>
-            {%- else %}
-                <ul>
-                {%- if elem is starting_with("<h2") %}
-                    {%- set id_val = elem | regex_replace(pattern=`<h2 id="(?P<anchor>.*)">.*</h2>`, rep=`$anchor`) %}
-                <li class="toc-item"><a href="#{{ id_val }}" class="subtext">{{ elem | regex_replace(pattern=`<h2 id=".*">(?P<heading>.*)</h2>`, rep=`$heading`) | as_str }}</a></li>
-                    {%- else %}
-                    <ul>
-                        {%- if elem is starting_with("<h3") %}
-                        {%- set id_val = elem | regex_replace(pattern=`<h3 id="(?P<anchor>.*)">.*</h3>`, rep=`$anchor`) %}
-                        <li class="toc-item"><a href="#{{ id_val }}" class="subtext">{{ elem | regex_replace(pattern=`<h3 id=".*">(?P<heading>.*)</h3>`, rep=`$heading`) | as_str }}</a></li>
-                        {%- endif %}
-                    </ul>
-                {%- endif %}
-                </ul>
-            {%- endif %}
-        {%- endfor %}
-        </ul>
+        {%- for elem in mapset %}
+            {%- set id_val = elem | regex_replace(pattern=`(?P<id>\d*),(?P<anchor>.*),(?P<heading>.*)`, rep=`$id`) %}
+            {%- set anchor = elem | regex_replace(pattern=`(?P<id>\d*),(?P<anchor>.*),(?P<heading>.*)`, rep=`$anchor`) %}
+            {%- set heading = elem | regex_replace(pattern=`(?P<id>\d*),(?P<anchor>.*),(?P<heading>.*)`, rep=`$heading`) %}
+            {%- if id_val == "1" -%}
+                <div class="toc-item">
+                    <a href="#{{ anchor }}" class="subtext">{{ heading }}</a>
+                </div>
+            {%- elif id_val == "2" -%}
+                <div class="toc-item-child">
+                    <a href="#{{ anchor }}" class="subtext">
+                        <small>- {{ heading }}</small>
+                    </a>
+                </div>
+            {%- else -%}
+                <div></div>
+            {%- endif -%}
+        {%- endfor -%}
     </div>
 </div>
 {% endblock toc %}

site/templates/index.html

@@ -23,6 +23,12 @@ <h3 class="title-text text-center">
             <img src="https://img.shields.io/badge/bootc_on_CNCF_Slack-join_us-green?style=for-the-badge&logo=slack&logoColor=white&label=bootc%20on%20CNCF%20Slack">
         </a>
     </div>
+    <div class="explore-more-container">
+        <div class="explore-more text"
+             onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})">
+            Explore More ⇩
+        </div>
+    </div>
 </section>
 
 {% endblock hero %}
@@ -40,7 +46,6 @@ <h3 class="title-text text-center">
 {% endblock fonts %}
 
 {% block sidebar %}
-<div>
-    Your cool sidebar
+<div class="sidebar">
 </div>
 {% endblock sidebar %}