jsdoc · Sarah-okolo · Sep 9, 2024 · Sep 9, 2024 · Sep 9, 2024 · Sep 9, 2024
diff --git a/content/about-block-inline-tags.md b/content/about-block-inline-tags.md
@@ -1,6 +1,7 @@
 ---
 title: Block and inline tags
 tags: gettingStarted
+layout: index.njk
 ---
 
 ## Overview

diff --git a/content/about-commandline.md b/content/about-commandline.md
@@ -1,13 +1,14 @@
 ---
 title: Command-line arguments to JSDoc
 tags: gettingStarted
+layout: index.njk
 related:
     - /about-configuring-jsdoc
 ---
 
 At its most basic level, JSDoc is used like so:
 
-    /path/to/jsdoc yourSourceCodeFile.js anotherSourceCodeFile.js ...
+    `/path/to/jsdoc yourSourceCodeFile.js anotherSourceCodeFile.js ...`
 
 where `...` are paths to other files to generate documentation for.
 

diff --git a/content/about-configuring-default-template.md b/content/about-configuring-default-template.md
@@ -1,6 +1,7 @@
 ---
 title: Configuring JSDoc's default template
 tags: gettingStarted
+layout: index.njk
 related:
     - /about-configuring-jsdoc
 ---

diff --git a/content/about-configuring-jsdoc.md b/content/about-configuring-jsdoc.md
@@ -1,6 +1,7 @@
 ---
 title: Configuring JSDoc with a configuration file
 tags: gettingStarted
+layout: index.njk
 related:
     - /about-commandline
     - /about-plugins

diff --git a/content/about-getting-started.md b/content/about-getting-started.md
diff --git a/content/about-including-package.md b/content/about-including-package.md
@@ -1,6 +1,7 @@
 ---
 title: Including a Package File
 tags: gettingStarted
+layout: index.njk
 ---
 
 Package files contain information that can be useful for your project's documentation, such as

diff --git a/content/about-including-readme.md b/content/about-including-readme.md
@@ -1,6 +1,7 @@
 ---
 title: Including a README File
 tags: gettingStarted
+layout: index.njk
 ---
 
 There are two ways to incorporate a `README` file into your documentation:

diff --git a/content/about-license-jsdoc3.md b/content/about-license-jsdoc3.md
@@ -1,6 +1,7 @@
 ---
 title: License
 tags: gettingStarted
+layout: index.njk
 ---
 
 JSDoc is free software, licensed under the [Apache License, Version 2.0][apache-license]. Commercial

diff --git a/content/about-namepaths.md b/content/about-namepaths.md
@@ -1,13 +1,12 @@
 ---
 title: Using namepaths with JSDoc
 tags: gettingStarted
+layout: index.njk
 related:
     - /about-block-inline-tags
     - /tags-inline-link
 ---
 
-## Namepaths in JSDoc
-
 When referring to a JavaScript variable that is elsewhere in your documentation, you must provide a unique identifier that maps to that variable. A namepath provides a way to do so and disambiguate between instance members, static members and inner variables.
 
 ::: example "Basic Syntax Examples of Namepaths in JSDoc"

diff --git a/content/about-plugins.md b/content/about-plugins.md
@@ -1,6 +1,7 @@
 ---
 title: About JSDoc plugins
 tags: gettingStarted
+layout: index.njk
 ---
 
 ## Creating and Enabling a Plugin

diff --git a/content/about-tutorials.md b/content/about-tutorials.md
@@ -1,6 +1,7 @@
 ---
 title: Tutorials
 tags: gettingStarted
+layout: index.njk
 ---
 
 JSDoc allows you to include tutorials alongside your API documentation. You can use this feature to

diff --git a/content/data/redirects.yaml b/content/data/redirects.yaml
@@ -6,4 +6,4 @@ redirects:
 - from: /tags-link
   to: /tags-inline-link
 - from: /tags-method
-  to: /tags-function
+  to: /tags-function
diff --git a/content/howto-amd-modules.md b/content/howto-amd-modules.md
@@ -1,5 +1,6 @@
 ---
 title: AMD Modules
+layout: index.njk
 related:
     - /about-namepaths
     - /tags-exports

diff --git a/content/howto-commonjs-modules.md b/content/howto-commonjs-modules.md
@@ -1,5 +1,6 @@
 ---
 title: CommonJS Modules
+layout: index.njk
 related:
     - /about-namepaths
     - /tags-exports

diff --git a/content/howto-es2015-classes.md b/content/howto-es2015-classes.md
@@ -1,5 +1,6 @@
 ---
 title: ES 2015 Classes
+layout: index.njk
 related:
     - /tags-augments
 ---

diff --git a/content/howto-es2015-modules.md b/content/howto-es2015-modules.md
@@ -1,5 +1,6 @@
 ---
 title: ES 2015 Modules
+layout: index.njk
 related:
     - /about-namepaths
     - /tags-module

diff --git a/content/includes/index.njk b/content/includes/index.njk
@@ -9,47 +9,59 @@
 {%- endmacro -%}
 
 {%- macro generateSection(tocSection) -%}
-  <dl>
+  <ul>
     {%- for item in collections[tocSection.generated] | sortTags -%}
       {%- set tagName = item.data.tag -%}
-      <dt>
+      <li>
         <a href="{{ item.filePathStem }}">{{ formatTag(tagName, tocSection.generated) }}</a>
-        {{ synonyms(item, tocSection.generated) }}
-      </dt>
-      <dd>{{ item.data.description }}</dd>
+      </li>
     {%- endfor -%}
-  </dl>
+  </ul>
 {%- endmacro -%}
 
 {%- macro renderSection(tocSection) -%}
   <h2 id="{{ tocSection.section | slugify }}">{{ tocSection.section }}</h2>
   {%- if tocSection.generated -%}
     {{ generateSection(tocSection) }}
   {%- else -%}
-    <dl>
+    <ul>
       {%- for item in tocSection.contents -%}
-        <dt><a href="{{ item.path | default('') }}">{{ item.title | default('') }}</a></dt>
-        <dd>{{ item.description | default('') }}</dd>
+        <li><a href="{{ item.path | default('') }}">{{ item.title | default('') }}</a></li>
       {%- endfor -%}
-    </dl>
-  {%- endif -%}
-{%- endmacro -%}
-
-{%- macro synonyms(item, tagType) -%}
-  {%- if item.data.synonyms -%}
-    {%- set comma = joiner(', ') -%}
-    (synonyms: {% for synonym in item.data.synonyms -%}
-      {{ comma() }}{{ formatTag(synonym, tagType) -}}
-    {%- endfor -%})
+    </ul>
   {%- endif -%}
 {%- endmacro -%}
 
 {%- block content -%}
-  {%- for tocSection in toc -%}
-    {{- renderSection(tocSection) -}}
-  {%- endfor -%}
+  {% if title -%}
+    <h1>{{ title }}</h1>
+  {%- endif %}
+
+  {%- block synonyms -%}
+    {%- if synonyms | length -%}
+      <h2 id="synonyms">Synonyms</h2>
+      <ul>
+        {% for synonym in synonyms -%}
+          <li><code>{{ synonym }}</code></li>
+        {%- endfor %}
+      </ul>
+    {%- endif -%}
+  {%- endblock -%}
+
+  {{ content | safe }}
+
+  {%- if related | length -%}
+    {%- set relatedLinks = related | relatedList(collections) -%}
+    <h2 id="related-links">Related links</h2>
+    <ul>
+      {%- for relatedLink in relatedLinks -%}
+        <li><a href="{{ relatedLink.path }}">{{ relatedLink.title }}</a></li>
+      {%- endfor -%}
+    </ul>
+  {%- endif -%}
 
+  <!-- Additional content, GitHub ribbon -->
   <p>
-    <a href="https://github.com/jsdoc/jsdoc" class="github-ribbon">Fork me on GitHub</a>
+    <a href="https://github.com/jsdoc/jsdoc" class="github-ribbon">Fork me on<br>GitHub</a>
   </p>
 {% endblock %}
diff --git a/content/includes/layout.njk b/content/includes/layout.njk
@@ -5,6 +5,7 @@
     {% block meta -%}
       <meta charset="utf-8">
       <meta name="generator" content="{{ eleventy.generator }}">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
       {% if keywords -%}
         <meta name="keywords" content="{{ keywords }}">
       {%- endif %}
@@ -25,39 +26,29 @@
   <body>
     <header>
       <a href="/">@use JSDoc</a>
-    </header>
-
-    <article>
-      {% if title -%}
-        <h1>{{ title }}</h1>
-      {%- endif %}
-
-      {%- block synonyms -%}
-        {%- if synonyms | length -%}
-          <h2 id="synonyms">Synonyms</h2>
-          <ul>
-            {% for synonym in synonyms -%}
-              <li><code>{{ synonym }}</code></li>
-            {%- endfor %}
-          </ul>
-        {%- endif -%}
-      {%- endblock -%}
 
-      {%- block content -%}
-        {{ content | safe }}
-      {%- endblock -%}
+      <div class="menu-wrapper">
+        <div id="theme-toggle-btn">
+          <ion-icon name="sunny" id="theme-icon"></ion-icon>
+        </div>
+        <ion-icon name="menu-outline" id="burger-menu"></ion-icon>
+      </div>
+    </header>
 
-      {%- if related | length -%}
-        {%- set relatedLinks = related | relatedList(collections) -%}
-        <h2 id="related-links">Related links</h2>
-        <ul>
-          {%- for relatedLink in relatedLinks -%}
-            <li><a href="{{ relatedLink.path }}">{{ relatedLink.title }}</a></li>
-          {%- endfor -%}
-        </ul>
-      {%- endif -%}
+    <main class="main-secion">
+      <nav class="nav-sidebar">
+      <ion-icon name="close-outline" id="closeMenuIcon"></ion-icon>
+      {%- for tocSection in toc -%}
+        {{ renderSection(tocSection) }}
+      {%- endfor -%}
+      </nav>
 
-    </article>
+      <article class="article-content">
+        {%- block content -%}
+          <!-- Generated article content goes here-->
+        {%- endblock -%}
+      </article>
+    </main>
 
     <footer>
       <a class="license-badge" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" class="license-badge" src="images/cc-by-sa.svg" width="80" height="15" /></a>
@@ -71,5 +62,11 @@
       <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons
       Attribution-ShareAlike 3.0 Unported License</a>.
     </footer>
+
+     {%- block script -%}
+      <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
+      <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
+      <script type="text/javascript" src="/lib/nav-sidebar.js"></script>
+    {%- endblock -%}
   </body>
 </html>