More slots for dynamic components (#70)

* more slots for dynamic components

* more slots on sidebar and filetree

src/site/_data/dynamics.js

@@ -1,44 +1,60 @@
 const fsFileTree = require("fs-file-tree");
 
-const BASE_PATH = "src/site/_includes/components/user"
+const BASE_PATH = "src/site/_includes/components/user";
-const STYLE_PATH = "src/site/styles/user"
+const STYLE_PATH = "src/site/styles/user";
 const NAMESPACES = ["index", "notes", "common"];
-const SLOTS = ["header", "afterContent", "footer"]
+const SLOTS = ["head", "header", "beforeContent", "afterContent", "footer"];
+const FILE_TREE_NAMESPACE = "filetree";
+const FILE_TREE_SLOTS = ["beforeTitle", "afterTitle"];
+const SIDEBAR_NAMESPACE = "sidebar";
+const SIDEBAR_SLOTS = ["top", "bottom"];
+const STYLES_NAMESPACE = "styles";
 
-const generateComponentPaths = async (namespace) => {
+const generateComponentPaths = async (namespace, slots) => {
-    const data = {};
+  const data = {};
-    for (let index = 0; index < SLOTS.length; index++) {
+  for (let index = 0; index < slots.length; index++) {
-        const slot = SLOTS[index];
+    const slot = slots[index];
-        try {
+    try {
-            const tree = await fsFileTree(`${BASE_PATH}/${namespace}/${slot}`);
+      const tree = await fsFileTree(`${BASE_PATH}/${namespace}/${slot}`);
-            let comps = Object.keys(tree).filter((p) => p.indexOf(".njk") != -1).map((p) => `components/user/${namespace}/${slot}/${p}`);
+      let comps = Object.keys(tree)
-            comps.sort()
+        .filter((p) => p.indexOf(".njk") != -1)
-            data[slot] = comps;
+        .map((p) => `components/user/${namespace}/${slot}/${p}`);
-        } catch {
+      comps.sort();
-            data[slot] = [];
+      data[slot] = comps;
-        }
+    } catch {
+      data[slot] = [];
     }
-    return data;
+  }
-}
+  return data;
+};
 
 const generateStylesPaths = async () => {
-    try {
+  try {
-        const tree = await fsFileTree(`${STYLE_PATH}`);
+    const tree = await fsFileTree(`${STYLE_PATH}`);
-        let comps = Object.keys(tree).map((p) => `/styles/user/${p}`.replace('.scss', '.css'));
+    let comps = Object.keys(tree).map((p) =>
-        comps.sort()
+      `/styles/user/${p}`.replace(".scss", ".css")
-        return comps
+    );
-    } catch {
+    comps.sort();
-        return [];
+    return comps;
-    }
+  } catch {
-}
+    return [];
-
+  }
+};
 
 module.exports = async () => {
-    const data = {};
+  const data = {};
-    for (let index = 0; index < NAMESPACES.length; index++) {
+  for (let index = 0; index < NAMESPACES.length; index++) {
-        const ns = NAMESPACES[index];
+    const ns = NAMESPACES[index];
-        data[ns] = await generateComponentPaths(ns);
+    data[ns] = await generateComponentPaths(ns, SLOTS);
-    }
+  }
-    data['styles'] = await generateStylesPaths()
+  data[FILE_TREE_NAMESPACE] = await generateComponentPaths(
-    return data;
+    FILE_TREE_NAMESPACE,
-}
+    FILE_TREE_SLOTS
+  );
+  data[SIDEBAR_NAMESPACE] = await generateComponentPaths(
+    SIDEBAR_NAMESPACE,
+    SIDEBAR_SLOTS
+  );
+  data[STYLES_NAMESPACE] = await generateStylesPaths();
+  return data;
+};

src/site/_includes/components/filetreeNavbar.njk

@@ -1,9 +1,15 @@
 <nav class="navbar">
     <div class="navbar-inner">
         <i style="font-size: 1.5rem; margin-right: 10px;" @click="showFilesMobile=!showFilesMobile" class="fa fa-bars"></i>
+        {% for imp in dynamics.filetree.beforeTitle %}
+            {% include imp %}
+        {% endfor %}
         <a href="/" style="text-decoration: none;">
             <h1 style="margin: 15px !important;">{{meta.siteName}}</h1>
         </a>
+        {% for imp in dynamics.filetree.afterTitle %}
+            {% include imp %}
+        {% endfor %}
     </div>
     
     {% if settings.dgEnableSearch === true%}

src/site/_includes/components/sidebar.njk

@@ -1,7 +1,9 @@
 <aside>
       <div class="sidebar">
             <div class="sidebar-container">
-
+                  {% for imp in dynamics.sidebar.top %}
+                        {% include imp %}
+                  {% endfor %}
                   {%if settings.dgShowLocalGraph === true%}
                         <div class="graph">
                               <div class="graph-title-container">
@@ -27,65 +29,68 @@
                               </div>
                               <div id="link-graph"></div>
                         </div>
-                        {%endif%}
+                  {%endif%}
 
-                        {%if settings.dgShowToc === true%}
+                  {%if settings.dgShowToc === true%}
-                              {%set tocHtml= (content and (content|toc)) %}
+                        {%set tocHtml= (content and (content|toc)) %}
-                              {%if tocHtml %}
+                        {%if tocHtml %}
-                                    <div class="toc">
+                              <div class="toc">
-                                          <div class="toc-title-container">
+                                    <div class="toc-title-container">
-                                                <div class="toc-title">
+                                          <div class="toc-title">
-                                                      On this page
+                                                On this page
-                                                </div>
-                                          </div>
-                                          <div class="toc-container">
-                                                {{ tocHtml | safe }}
                                           </div>
                                     </div>
-                              {%endif%}
+                                    <div class="toc-container">
-
+                                          {{ tocHtml | safe }}
+                                    </div>
+                              </div>
                         {%endif%}
 
-                              {%if settings.dgShowBacklinks === true %}
+                  {%endif%}
-                                    {%if settings.dgShowBacklinks === true %}
-                                    <div class="backlinks">
-                                          <div class="backlink-title" style="margin: 4px 0 !important;">Pages mentioning this page</div>
-                                                <div class="backlink-list">
-                                                {%- if page.url == "/" -%}
-                                                      {%- if graph.nodes[graph.homeAlias].backLinks.length === 0 -%}
-                                                            <div class="backlink-card">
-                                                                  <span class="no-backlinks-message">No other pages mentions this page</span>
-                                                            </div>
-                                                      {%- endif -%}
-                                                {%- for backlink in graph.nodes[graph.homeAlias].backLinks -%}
-                                                      {%- if graph.nodes[backlink].url != graph.homeAlias -%}
-                                                      <div class="backlink-card">
-                                                            <i class="fa fa-link"></i> <a href="{{graph.nodes[backlink].url}}">{{graph.nodes[backlink].title}}</a>
-                                                      </div>
-                                                      {%- endif -%}
-                                                {%- endfor -%}
-                                                {%- else -%}
-                                                      {%- if graph.nodes[page.url].backLinks.length === 0 -%}
-                                                            <div class="backlink-card">
-                                                                  <span class="no-backlinks-message">No other pages mentions this page</span>
-                                                            </div>
-                                                      {%- endif -%}
-                                                {%- for backlink in graph.nodes[page.url].backLinks -%}
-                                                      {%- if graph.nodes[backlink].url != page.url -%}
-                                                      <div class="backlink-card">
-                                                            <i class="fa fa-link"></i> <a href="{{graph.nodes[backlink].url}}">{{graph.nodes[backlink].title}}</a>
-                                                      </div>
-                                                      {%- endif -%}
-                                                {%- endfor -%}
-                                                {%- endif -%}
-                                                </div>
-                                          </div>
-                                    {%endif%}
-                              {%endif%}
-                              </div>
-                        </div>
-                  </aside>
 
-                  {%if settings.dgShowLocalGraph === true %}
+                        {%if settings.dgShowBacklinks === true %}
-                        {%include "components/graphScript.njk"%}
+                              {%if settings.dgShowBacklinks === true %}
-                  {% endif %}
+                              <div class="backlinks">
+                                    <div class="backlink-title" style="margin: 4px 0 !important;">Pages mentioning this page</div>
+                                          <div class="backlink-list">
+                                          {%- if page.url == "/" -%}
+                                                {%- if graph.nodes[graph.homeAlias].backLinks.length === 0 -%}
+                                                      <div class="backlink-card">
+                                                            <span class="no-backlinks-message">No other pages mentions this page</span>
+                                                      </div>
+                                                {%- endif -%}
+                                          {%- for backlink in graph.nodes[graph.homeAlias].backLinks -%}
+                                                {%- if graph.nodes[backlink].url != graph.homeAlias -%}
+                                                <div class="backlink-card">
+                                                      <i class="fa fa-link"></i> <a href="{{graph.nodes[backlink].url}}">{{graph.nodes[backlink].title}}</a>
+                                                </div>
+                                                {%- endif -%}
+                                          {%- endfor -%}
+                                          {%- else -%}
+                                                {%- if graph.nodes[page.url].backLinks.length === 0 -%}
+                                                      <div class="backlink-card">
+                                                            <span class="no-backlinks-message">No other pages mentions this page</span>
+                                                      </div>
+                                                {%- endif -%}
+                                          {%- for backlink in graph.nodes[page.url].backLinks -%}
+                                                {%- if graph.nodes[backlink].url != page.url -%}
+                                                <div class="backlink-card">
+                                                      <i class="fa fa-link"></i> <a href="{{graph.nodes[backlink].url}}">{{graph.nodes[backlink].title}}</a>
+                                                </div>
+                                                {%- endif -%}
+                                          {%- endfor -%}
+                                    {%- endif -%}
+                                    </div>
+                              </div>
+                        {%endif%}
+                  {%endif%}
+                  {% for imp in dynamics.sidebar.bottom %}
+                        {% include imp %}
+                  {% endfor %}
+            </div>
+      </div>
+</aside>
+
+{%if settings.dgShowLocalGraph === true %}
+      {%include "components/graphScript.njk"%}
+{% endif %}

src/site/_includes/layouts/note.njk

@@ -6,6 +6,12 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
   <head>
     <title>{% if title %}{{ title }}{% else %}{{ page.fileSlug }}{% endif %}</title>
     {%include "components/pageheader.njk"%}
+    {% for imp in dynamics.common.head %}
+      {% include imp %}
+    {% endfor %}
+    {% for imp in dynamics.notes.head %}
+      {% include imp %}
+    {% endfor %}
   </head>
   <body class="theme-{{meta.baseTheme}} markdown-preview-view markdown-rendered markdown-preview-section">
     {%include "components/notegrowthhistory.njk"%}
@@ -45,6 +51,12 @@ permalink: "notes/{{ page.fileSlug | slugify }}/"
         {% include imp %}
       {% endfor %}
       </header>
+      {% for imp in dynamics.common.beforeContent %}
+        {% include imp %}
+      {% endfor %}
+      {% for imp in dynamics.notes.beforeContent %}
+        {% include imp %}
+      {% endfor %}
       {{ content | hideDataview | link | taggify | highlight | safe}}
       {% for imp in dynamics.common.afterContent %}
         {% include imp %}

src/site/index.njk

@@ -3,6 +3,12 @@
   <head>
     <title>{{ noteTitle }}</title>
     {%include "components/pageheader.njk"%}
+    {% for imp in dynamics.common.head %}
+      {% include imp %}
+    {% endfor %}
+    {% for imp in dynamics.index.head %}
+      {% include imp %}
+    {% endfor %}
   </head>
   <body class="theme-{{meta.baseTheme}} markdown-preview-view markdown-rendered markdown-preview-section">
     {%include "components/notegrowthhistory.njk"%}
@@ -40,6 +46,12 @@
         {% include imp %}
       {% endfor %}
       </header>
+      {% for imp in dynamics.common.beforeContent %}
+        {% include imp %}
+      {% endfor %}
+      {% for imp in dynamics.index.beforeContent %}
+        {% include imp %}
+      {% endfor %}
       {%- for garden in collections.gardenEntry -%}
         {{garden.templateContent | hideDataview | link | taggify | highlight | safe }}
       {%- endfor -%}