obsidiangarden_netlify/src/site/_includes/components/sidebar.njk

<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">
                                    <div class="graph-title">Connected Pages</div>
                                    <div id="graph-controls">
                                          <div class="depth-control">
                                                <label for="graph-depth">Depth</label>
                                                <div class="slider">
                                                      <input name="graph-depth" list="depthmarkers" type="range" step="1" min="1" max="3" id="graph-depth"/>
                                                <datalist id="depthmarkers">
                                                      <option value="1" label="1"></option>
                                                      <option value="2" label="2"></option>
                                                      <option value="3" label="3"></option>
                                                </datalist>
                                                </div>
                                                <span id="depth-display"></span>
                                          </div>
                                          <div class="ctrl-right">
                                                <span id="global-graph-btn"><i  icon-name="globe" aria-hidden="true"></i></span>
                                                <span  id="graph-fs-btn"><i  icon-name="expand" aria-hidden="true"></i></span>
                                          </div>
                                    </div>
                              </div>
                              <div id="link-graph"></div>
                        </div>
                  {%endif%}

                  {%if settings.dgShowToc === true%}
                        {%set tocHtml= (content and (content|toc)) %}
                        {%if tocHtml %}
                              <div class="toc">
                                    <div class="toc-title-container">
                                          <div class="toc-title">
                                                On this page
                                          </div>
                                    </div>
                                    <div class="toc-container">
                                          {{ tocHtml | safe }}
                                    </div>
                              </div>
                        {%endif%}

                  {%endif%}

                        {%if settings.dgShowBacklinks === true %}
                              {%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  icon-name="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  icon-name="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 %}