Merge pull request #202 from eecs485staff/sitemap-label

[Sitemap] Allow removing label from sitemap

Author: seshrs

_config.yml

@@ -18,12 +18,14 @@ description: Primer Spec is a Jekyll theme for GitHub Pages
 primerSpec:
   sitemap:
     label: Docs & Demos
+    # Setting the label to an empty string removes the label from the sitemap.
+    # label: ''
     externalLinks:
       - title: Wikipedia
         url: https://www.wikipedia.org/
-      - title: "Google" 
+      - title: 'Google'
         url: https://google.com/
-      - title: "EECS 485"
+      - title: 'EECS 485'
         url: https://eecs485.org
 
 # defaultCodeblockVariant: no-line-numbers

_layouts/spec.html

@@ -96,7 +96,19 @@
                     {%- endfor -%}
                     {%- endif -%}
                 ],
-                sitemapLabel: '{{ site.primerSpec.sitemap.label | default: "" }}',
+                {%- comment -%}
+                This is not intuitive, but
+                  - If the label is not defined in the config, show the default label (by unsetting it).
+                  - If the label is set to '' in the config, then DO NOT show a sitemap label.
+                  - Otherwise, use the given sitemap label.
+                {%- endcomment -%}
+                {% unless site.primerSpec.sitemap.label %}
+                sitemapLabel: undefined,
+                {% elsif site.primerSpec.sitemap.label == '' %}
+                sitemapLabel: null,
+                {% else %}
+                sitemapLabel: '{{ site.primerSpec.sitemap.label }}',
+                {% endunless -%}
                 sitemapSiteTitle: '{{ site.title | default: "" }}',
                 {%- comment -%}
                 The issue with the "default" filter is that it executes on ANY
@@ -112,7 +124,7 @@
                 {% assign useLegacyCodeBlocks = page.useLegacyCodeBlocks %}
                 {%- if useLegacyCodeBlocks == nil -%}
                 {%- assign useLegacyCodeBlocks = site.primerSpec.useLegacyCodeBlocks -%}
-                {%- endif -%}
+                {%- endif %}
                 useLegacyCodeBlocks: {{ useLegacyCodeBlocks | default: false }},
                 {% assign defaultCodeblockVariant = page.defaultCodeblockVariant %}
                 {%- if defaultCodeblockVariant == nil -%}

demo/long-headings.md

@@ -1,6 +1,6 @@
 ---
 layout: spec
-title: title: "[DEMO] Long Headings"
+title: '[DEMO] Long Headings'
 excludeFromSitemap: true
 ---
 

docs/USAGE_ADVANCED.md

@@ -388,7 +388,7 @@ _[EECS 280's Project 1](https://eecs280staff.github.io/p1-stats/) has a great ex
 
 If set to `true`, a sitemap will be auto-generated and displayed in the Sidebar of every Primer Spec page with the label _"Supplemental Pages"_.
 
-To customize the label, specify it under a `label` field.
+To customize the label, specify it under a `label` field. If you would prefer to remove the label from your sitemap, set the field to the empty string (`label: ''`).
 
 To add external links, specify them under an `externalLinks` field. Each item in the `externalLinks` array must have a `title` and a `url` field. External links will always appear at the bottom of the sidebar, below all internal links. They will appear in the same order that you include them in your `_config.yml`.
 

src_js/Config.ts

@@ -31,7 +31,7 @@ export default {
   INIT_SUBTHEME_MODE,
   INIT_SITEMAP_ENABLED,
   SITEMAP_URLS: window.PrimerSpecConfig.sitemapUrls || [],
-  SITEMAP_LABEL: window.PrimerSpecConfig.sitemapLabel || 'Supplemental Pages',
+  SITEMAP_LABEL: getSitemapLabel(),
   SITEMAP_SITE_TITLE: window.PrimerSpecConfig.sitemapSiteTitle || '',
   DEFAULT_CODEBLOCK_VARIANT: getDefaultCodeblockVariant(),
 
@@ -90,3 +90,10 @@ function getDefaultCodeblockVariant(): CodeblockVariant {
   }
   return CodeblockVariant.ENHANCED;
 }
+
+function getSitemapLabel(): null | string {
+  if (window.PrimerSpecConfig.sitemapLabel === null) {
+    return null;
+  }
+  return window.PrimerSpecConfig.sitemapLabel || 'Supplemental Pages';
+}

src_js/components/sidebar/SidebarContent.tsx

@@ -17,28 +17,56 @@ export default function SidebarContent(props: PropsType): h.JSX.Element {
     );
   }
 
+  const isRootPageCurrent = props.sitemap.rootPage.current;
+
   return (
     <Fragment>
-      <details
-        role="navigation"
-        aria-label={Config.SITEMAP_LABEL}
-        open={props.sitemap.rootPage.current ? undefined : true}
-      >
-        <summary>{Config.SITEMAP_LABEL}</summary>
-        {props.sitemap.siteUrls.map((sitePage) => (
-          <SitemapPage key={sitePage.url} page={sitePage}>
-            {sitePage.current ? props.children : undefined}
-          </SitemapPage>
-        ))}
-      </details>
+      <Sitemap sitemap={props.sitemap}>
+        {isRootPageCurrent ? undefined : props.children}
+      </Sitemap>
       <hr />
       <SitemapPage page={props.sitemap.rootPage} dedent>
-        {props.sitemap.rootPage.current ? props.children : undefined}
+        {isRootPageCurrent ? props.children : undefined}
       </SitemapPage>
     </Fragment>
   );
 }
 
+function Sitemap(props: {
+  sitemap: SitemapType;
+  children?: h.JSX.Element;
+}): h.JSX.Element {
+  const shouldDedentSitemap = Config.SITEMAP_LABEL == null;
+  const renderedSiteUrls = (
+    <Fragment>
+      {props.sitemap.siteUrls.map((sitePage) => (
+        <SitemapPage
+          key={sitePage.url}
+          page={sitePage}
+          dedent={shouldDedentSitemap}
+        >
+          {sitePage.current ? props.children : undefined}
+        </SitemapPage>
+      ))}
+    </Fragment>
+  );
+
+  if (shouldDedentSitemap) {
+    return renderedSiteUrls;
+  }
+
+  return (
+    <details
+      role="navigation"
+      aria-label={Config.SITEMAP_LABEL}
+      open={props.sitemap.rootPage.current ? undefined : true}
+    >
+      <summary>{Config.SITEMAP_LABEL}</summary>
+      {renderedSiteUrls}
+    </details>
+  );
+}
+
 function SitemapPage(props: {
   page: SitemapPageInfoType;
   dedent?: boolean;