@mindful-web/marko-web-html-sitemap 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Parameter1 LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/breadcrumb.marko

@@ -0,0 +1,46 @@
+import dayjs from "@mindful-web/dayjs";
+
+$ const {
+  pageNode,
+  mountPoint,
+  year,
+  month,
+  day,
+} = input;
+
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb">
+    <if(mountPoint)>
+      <if(year)>
+        <if(month)>
+          <li class="breadcrumb-item">
+            <marko-web-link href=`${mountPoint}/${year}`>
+              ${year}
+            </marko-web-link>
+          </li>
+          $ const d = dayjs(`${month} ${year}`, "MMMM YYYY");
+          <if(day)>
+            <li class="breadcrumb-item">
+              <marko-web-link href=`${mountPoint}/${d.format("YYYY/MM")}`>
+                ${d.format("MMMM")}
+              </marko-web-link>
+            </li>
+            <li class="breadcrumb-item">
+                ${day}
+            </li>
+          </if>
+          <else>
+            <li class="breadcrumb-item">
+              ${d.format("MMMM")}
+            </li>
+          </else>
+        </if>
+        <else>
+          <li class="breadcrumb-item">
+            ${year}
+          </li>
+        </else>
+      </if>
+    </if>
+  </ol>
+</nav>

package/components/breadcrumb.marko.js

@@ -0,0 +1,83 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-html-sitemap$1.0.0/components/breadcrumb.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_dayjs = require("@mindful-web/dayjs"),
+    dayjs = module_dayjs.default || module_dayjs,
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_web_link_template = require("@mindful-web/marko-web/components/element/link.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_link_tag = marko_loadTag(marko_web_link_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const {
+  pageNode,
+  mountPoint,
+  year,
+  month,
+  day,
+} = input;
+
+  out.w("<nav aria-label=\"breadcrumb\"><ol class=\"breadcrumb\">");
+
+  if (mountPoint) {
+    if (year) {
+      if (month) {
+        out.w("<li class=\"breadcrumb-item\">");
+
+        marko_web_link_tag({
+            href: (mountPoint + "/") + year,
+            renderBody: function(out) {
+              out.w(marko_escapeXml(year));
+            }
+          }, out, __component, "3");
+
+        out.w("</li>");
+
+        const d = dayjs(`${month} ${year}`, "MMMM YYYY");
+
+        if (day) {
+          out.w("<li class=\"breadcrumb-item\">");
+
+          marko_web_link_tag({
+              href: (mountPoint + "/") + d.format("YYYY/MM"),
+              renderBody: function(out) {
+                out.w(marko_escapeXml(d.format("MMMM")));
+              }
+            }, out, __component, "5");
+
+          out.w("</li><li class=\"breadcrumb-item\">" +
+            marko_escapeXml(day) +
+            "</li>");
+        } else {
+          out.w("<li class=\"breadcrumb-item\">" +
+            marko_escapeXml(d.format("MMMM")) +
+            "</li>");
+        }
+      } else {
+        out.w("<li class=\"breadcrumb-item\">" +
+          marko_escapeXml(year) +
+          "</li>");
+      }
+    }
+  }
+
+  out.w("</ol></nav>");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-html-sitemap$1.0.0/components/breadcrumb.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/link.marko"
+    ]
+  };

package/components/marko.json

@@ -0,0 +1,11 @@
+{
+  "<marko-web-html-sitemap-breadcrumb>": {
+    "template": "./breadcrumb.marko"
+  },
+  "<marko-web-html-sitemap-pagination-controls>": {
+    "template": "./pagination-controls.marko"
+  },
+  "<marko-web-html-sitemap-query-total-count>": {
+    "template": "./query-total-count.marko"
+  }
+}

package/components/pagination-controls.marko

@@ -0,0 +1,53 @@
+import { URLSearchParams } from "url";
+import { cleanPath } from "@mindful-web/utils";
+import defaultValue from "@mindful-web/marko-core/utils/default-value";
+
+$ const { perPage, totalCount, path } = input;
+$ const asRels = defaultValue(input.asRels, false);
+$ const { htmlSitemapPagination: p } = out.global;
+
+$ const totalPages = p.totalPages({ perPage, totalCount });
+$ const nextPage = p.nextPage({ perPage, totalCount });
+$ const prevPage = p.prevPage();
+
+$ const nextQuery = new URLSearchParams({ ...input.query, page: nextPage });
+$ const prevQuery = new URLSearchParams({ ...input.query, page: prevPage });
+
+$ const nextHref = `/${cleanPath(path)}?${nextQuery}`;
+$ const prevHref = `/${cleanPath(path)}?${prevQuery}`;
+
+$ const blockName = "pagination-controls";
+
+<if(totalCount)>
+  <if(asRels)>
+    <if(prevPage)>
+      <link rel="prev" href=prevHref />
+    </if>
+    <if(nextPage)>
+      <link rel="next" href=nextHref />
+    </if>
+  </if>
+  <else>
+    <marko-web-block name=blockName class=input.class>
+      <if(prevPage)>
+        <marko-web-link
+          class=`btn btn-primary ${blockName}__prev`
+          href=prevHref
+        >
+          Previous Page
+        </marko-web-link>
+      </if>
+      <marko-web-element block-name=blockName name="pages">
+        Page ${p.page} of ${totalPages}
+      </marko-web-element>
+      <if(nextPage)>
+        <marko-web-link
+          class=`btn btn-primary ${blockName}__next`
+          href=nextHref
+        >
+          Next Page
+        </marko-web-link>
+      </if>
+    </marko-web-block>
+  </else>
+</if>

package/components/pagination-controls.marko.js

@@ -0,0 +1,119 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-html-sitemap$1.0.0/components/pagination-controls.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_url_module = require("url"),
+    url_module = module_url_module.default || module_url_module,
+    URLSearchParams = module_url_module.URLSearchParams,
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    cleanPath = module_utils_module.cleanPath,
+    module_defaultValue = require("@mindful-web/marko-core/utils/default-value"),
+    defaultValue = module_defaultValue.default || module_defaultValue,
+    marko_attr = require("marko/dist/runtime/html/helpers/attr"),
+    marko_web_link_template = require("@mindful-web/marko-web/components/element/link.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_link_tag = marko_loadTag(marko_web_link_template),
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_web_element_template = require("@mindful-web/marko-web/components/element/index.marko"),
+    marko_web_element_tag = marko_loadTag(marko_web_element_template),
+    marko_web_block_template = require("@mindful-web/marko-web/components/element/block.marko"),
+    marko_web_block_tag = marko_loadTag(marko_web_block_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { perPage, totalCount, path } = input;
+
+  const asRels = defaultValue(input.asRels, false);
+
+  const { htmlSitemapPagination: p } = out.global;
+
+  const totalPages = p.totalPages({ perPage, totalCount });
+
+  const nextPage = p.nextPage({ perPage, totalCount });
+
+  const prevPage = p.prevPage();
+
+  const nextQuery = new URLSearchParams({ ...input.query, page: nextPage });
+
+  const prevQuery = new URLSearchParams({ ...input.query, page: prevPage });
+
+  const nextHref = `/${cleanPath(path)}?${nextQuery}`;
+
+  const prevHref = `/${cleanPath(path)}?${prevQuery}`;
+
+  const blockName = "pagination-controls";
+
+  if (totalCount) {
+    if (asRels) {
+      if (prevPage) {
+        out.w("<link rel=\"prev\"" +
+          marko_attr("href", prevHref) +
+          ">");
+      }
+
+      if (nextPage) {
+        out.w("<link rel=\"next\"" +
+          marko_attr("href", nextHref) +
+          ">");
+      }
+    } else {
+      marko_web_block_tag({
+          name: blockName,
+          tag: "div",
+          class: input.class,
+          renderBody: function(out) {
+            if (prevPage) {
+              marko_web_link_tag({
+                  class: ("btn btn-primary " + blockName) + "__prev",
+                  href: prevHref,
+                  renderBody: function(out) {
+                    out.w("Previous Page");
+                  }
+                }, out, __component, "3");
+            }
+
+            marko_web_element_tag({
+                name: "pages",
+                tag: "div",
+                blockName: blockName,
+                renderBody: function(out) {
+                  out.w("Page " +
+                    marko_escapeXml(p.page) +
+                    " of " +
+                    marko_escapeXml(totalPages));
+                }
+              }, out, __component, "4");
+
+            if (nextPage) {
+              marko_web_link_tag({
+                  class: ("btn btn-primary " + blockName) + "__next",
+                  href: nextHref,
+                  renderBody: function(out) {
+                    out.w("Next Page");
+                  }
+                }, out, __component, "5");
+            }
+          }
+        }, out, __component, "2");
+    }
+  }
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-html-sitemap$1.0.0/components/pagination-controls.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/link.marko",
+      "@mindful-web/marko-web/components/element/index.marko",
+      "@mindful-web/marko-web/components/element/block.marko"
+    ]
+  };

package/components/query-total-count.marko

@@ -0,0 +1,27 @@
+import gql from "graphql-tag";
+import { getAsObject } from "@mindful-web/object-path";
+
+$ const { apollo } = out.global;
+
+$ const params = { ...getAsObject(input, "params") };
+$ delete params.queryFragment;
+
+$ const optionsMap = {
+  "all-published-content": {
+    query: gql`
+      query AllPublishedContentCount($input: AllPublishedContentQueryInput!) {
+        result: allPublishedContent(input: $input) {
+          totalCount
+        }
+      }
+    `,
+    variables: { input: params },
+  }
+};
+$ const options = optionsMap[input.name];
+$ if (!options) throw new Error(`No query options have been defined for ${input.name}`);
+
+<marko-web-resolve|{ resolved }| promise=apollo.query(options)>
+  $ const { data } = resolved;
+  <${input.renderBody} total-count=data.result.totalCount />
+</marko-web-resolve>

package/components/query-total-count.marko.js

@@ -0,0 +1,68 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-html-sitemap$1.0.0/components/query-total-count.marko",
+    marko_component = require("./query-total-count.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_gql = require("graphql-tag"),
+    gql = module_gql.default || module_gql,
+    module_objectPath_module = require("@mindful-web/object-path"),
+    objectPath_module = module_objectPath_module.default || module_objectPath_module,
+    getAsObject = module_objectPath_module.getAsObject,
+    marko_dynamicTag = require("marko/dist/runtime/helpers/dynamic-tag"),
+    marko_web_resolve_template = require("@mindful-web/marko-core/components/resolve.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_resolve_tag = marko_loadTag(marko_web_resolve_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { apollo } = out.global;
+
+  const params = { ...getAsObject(input, "params") };
+
+  delete params.queryFragment;
+
+  const optionsMap = {
+  "all-published-content": {
+    query: gql`
+      query AllPublishedContentCount($input: AllPublishedContentQueryInput!) {
+        result: allPublishedContent(input: $input) {
+          totalCount
+        }
+      }
+    `,
+    variables: { input: params },
+  }
+};
+
+  const options = optionsMap[input.name];
+
+  if (!options) throw new Error(`No query options have been defined for ${input.name}`);
+
+  marko_web_resolve_tag({
+      promise: apollo.query(options),
+      renderBody: function(out, { resolved }) {
+        const { data } = resolved;
+
+        marko_dynamicTag(out, input.renderBody, function() {
+          return {
+              "total-count": data.result.totalCount
+            };
+        }, null, null, null, __component, "1");
+      }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-html-sitemap$1.0.0/components/query-total-count.marko",
+    component: "./query-total-count.marko",
+    tags: [
+      "@mindful-web/marko-core/components/resolve.marko"
+    ]
+  };

package/graphql/fragments/sitemap-published-content.js

@@ -0,0 +1,13 @@
+const gql = require('graphql-tag');
+
+module.exports = gql`
+fragment SitemapPublishedContentFragment on Content {
+  id
+  published
+  shortName
+  siteContext {
+    path
+  }
+}
+
+`;

package/marko.json

@@ -0,0 +1,5 @@
+{
+  "taglib-imports": [
+    "./components/marko.json"
+  ]
+}

package/middleware/paginated.js

@@ -0,0 +1,24 @@
+module.exports = ({ param = 'page' } = {}) => (req, res, next) => {
+  const page = parseInt(req.query[param], 10) || 1;
+
+  const totalPages = ({ perPage, totalCount }) => Math.ceil(totalCount / perPage);
+
+  res.locals.htmlSitemapPagination = {
+    page,
+    skip: ({ skip = 0, perPage } = {}) => {
+      if (page < 1) return skip;
+      return (perPage * (page - 1)) + skip;
+    },
+    totalPages,
+    nextPage: ({ perPage, totalCount }) => {
+      const total = totalPages({ perPage, totalCount });
+      if (page < total) return page + 1;
+      return null;
+    },
+    prevPage: () => {
+      if (page > 1) return page - 1;
+      return null;
+    },
+  };
+  next();
+};

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@mindful-web/marko-web-html-sitemap",
+  "version": "1.0.0",
+  "author": "Brian Miller <brian@parameter1.com>",
+  "license": "MIT",
+  "repository": "https://github.com/parameter1/mindful-web/tree/main/packages/marko-web-html-sitemap",
+  "scripts": {
+    "lint:fix": "yarn lint --fix",
+    "lint": "eslint --ext .js --ext .vue --max-warnings 5 --ignore-path ../../.eslintignore ./",
+    "compile": "mindful-web-marko-compile compile",
+    "prepublish": "yarn compile --silent",
+    "test": "yarn compile --no-clean && yarn lint"
+  },
+  "dependencies": {
+    "@mindful-web/dayjs": "^1.0.0",
+    "@mindful-web/object-path": "^1.0.0",
+    "@mindful-web/utils": "^1.0.0",
+    "graphql": "^14.5.4",
+    "graphql-tag": "^2.12.6"
+  },
+  "peerDependencies": {
+    "@mindful-web/marko-core": "^0.0.0",
+    "@mindful-web/marko-web": "^0.0.0"
+  },
+  "gitHead": "0b77cab713eb5841202bb86c7119949866bc68b5"
+}

package/routes/index.js

@@ -0,0 +1,151 @@
+const { getAsArray } = require('@mindful-web/object-path');
+const gql = require('graphql-tag');
+const { asyncRoute } = require('@mindful-web/utils');
+const dayjs = require('@mindful-web/dayjs');
+const dateListTemplate = require('../templates/date-list');
+const dayTemplate = require('../templates/day');
+
+const FORMAT = 'YYYY-MM-DD';
+const dateNotFound = () => {
+  const error = new Error('The requested date was not found.');
+  error.statusCode = 404;
+  return error;
+};
+const invalidDate = () => {
+  const error = new Error('The requested date is invalid.');
+  error.statusCode = 400;
+  return error;
+};
+
+const getTwoCharNum = (number) => number.toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false });
+
+const ALL_PUBLISHED_CONTENT_DATES = gql`
+  query AllPublishedContentDates($input: AllPublishedContentDatesQueryInput = {}) {
+    allPublishedContentDates(input: $input) {
+      id,
+      year,
+      month,
+      day,
+      count
+    }
+  }
+`;
+
+module.exports = (app, { mountPoint } = { mountPoint: '/site-map' }) => {
+  app.get(`${mountPoint}/:year(\\d{4})/:month(\\d{2})/:day(\\d{2})`, asyncRoute(async (req, res) => {
+    const { year, month, day } = req.params;
+
+    // Validate date
+    const dateString = `${year}-${month}-${day}`;
+    const date = dayjs(dateString, FORMAT);
+    if (!date.isValid()) throw invalidDate();
+    const now = dayjs().endOf('day');
+    if (date > now) throw dateNotFound();
+
+    // Set page data
+    const ending = date.endOf('day');
+    const after = date.startOf('day');
+    const displayMonth = date.format('MMMM');
+    return res.marko(
+      dayTemplate,
+      {
+        ending,
+        after,
+        year,
+        month: displayMonth,
+        day,
+        mountPoint,
+      },
+    );
+  }));
+
+  app.get(`${mountPoint}/:year(\\d{4})/:month(\\d{2})`, asyncRoute(async (req, res) => {
+    const { year, month } = req.params;
+    const startOfMonth = dayjs(`${year}-${month}-01`, FORMAT);
+    if (!startOfMonth.isValid()) throw invalidDate();
+    const endOfMonth = startOfMonth.clone().endOf('month');
+    const now = dayjs().endOf('day');
+    const after = startOfMonth.format(FORMAT);
+    if (startOfMonth > now) throw dateNotFound();
+    const before = (endOfMonth > now ? now : endOfMonth).format(FORMAT);
+    const input = {
+      before,
+      after,
+      format: 'days',
+    };
+    const variables = { input };
+    const { data } = await req.apollo.query({ query: ALL_PUBLISHED_CONTENT_DATES, variables });
+    const alias = `${mountPoint}/${year}/${getTwoCharNum(month)}`;
+    const nodes = getAsArray(data, 'allPublishedContentDates').map((node) => ({
+      ...node,
+      alias: `${alias}/${getTwoCharNum(node.day)}`,
+    }));
+    return res.marko(
+      dateListTemplate,
+      {
+        nodes,
+        year,
+        month: startOfMonth.format('MMMM'),
+        displayType: 'day',
+        mountPoint,
+      },
+    );
+  }));
+
+  app.get(`${mountPoint}/:year(\\d{4})`, asyncRoute(async (req, res) => {
+    const { year } = req.params;
+    const now = dayjs().endOf('day');
+    if (year > now.format('year')) throw dateNotFound();
+    const nowFormatted = now.format(FORMAT);
+    const end = `${year}-12-31`;
+    const after = `${year}-01-01`;
+    const before = nowFormatted < end ? nowFormatted : end;
+    const input = {
+      before,
+      after,
+      format: 'months',
+    };
+    const variables = { input };
+    const { data } = await req.apollo.query({ query: ALL_PUBLISHED_CONTENT_DATES, variables });
+    const alias = `${mountPoint}/${year}`;
+    const nodes = getAsArray(data, 'allPublishedContentDates').map((node) => ({
+      ...node,
+      alias: `${alias}/${getTwoCharNum(node.month)}`,
+    }));
+    return res.marko(
+      dateListTemplate,
+      {
+        nodes,
+        year,
+        displayType: 'month',
+        mountPoint,
+      },
+    );
+  }));
+
+  app.get(`${mountPoint}`, asyncRoute(async (req, res) => {
+    const now = dayjs().endOf('day');
+    const year = dayjs().format('YYYY');
+    const nowFormatted = now.format(FORMAT);
+    const end = `${year}-12-31`;
+    const before = nowFormatted < end ? nowFormatted : end;
+    const input = {
+      before,
+      format: 'years',
+    };
+    const variables = { input };
+    const { data } = await req.apollo.query({ query: ALL_PUBLISHED_CONTENT_DATES, variables });
+    const nodes = getAsArray(data, 'allPublishedContentDates').map((node) => ({
+      ...node,
+      alias: `${mountPoint}/${node.year}`,
+    }));
+    return res.marko(
+      dateListTemplate,
+      {
+        nodes,
+        displayType: 'year',
+        mountPoint,
+      },
+    );
+  }));
+};

package/scss/index.scss

@@ -0,0 +1,76 @@
+$primary: #000 !default;
+.sitemap {
+  .breadcrumb {
+    font-size: 1.5rem;
+    background: transparent;
+  }
+  .page-wrapper {
+    &__title {
+      padding-top: 1.5rem;
+      padding-bottom: .5rem;
+      margin: 0;
+      border-bottom: solid 2px $primary;
+    }
+    &__description {
+      padding-top: .75rem;
+    }
+  }
+  .node-list {
+    &__node {
+      font-size: 1.1rem;
+    }
+  }
+  .pagination-controls {
+    padding-top: 1.2rem;
+    margin-bottom: 1.5rem;
+  }
+  .row {
+    &__dates {
+      padding-right: .5rem;
+      padding-left: .5rem;
+      margin-bottom: 1.5rem;
+      overflow: hidden;
+    }
+  }
+  .col {
+    &__date {
+      padding: .75rem .5rem;
+      margin-top: 1px;
+      margin-bottom: -1px;
+      font-size: 1.1rem;
+      text-align: center;
+      border-bottom: 1px solid #ccc;
+
+      &--year,
+      &--day {
+        @include media-breakpoint-down(sm) {
+          @include make-col(2);
+        }
+        @include media-breakpoint-up(sm) {
+          flex: 0 0 8.3333%;
+          max-width: 8.3333%;
+        }
+        @include media-breakpoint-up(sm) {
+          flex: 0 0 8.3333%;
+          max-width: 8.3333%;
+        }
+        @include media-breakpoint-up(md) {
+          flex: 0 0 5%;
+          max-width: 5%;
+        }
+      }
+      &--year {
+        @include media-breakpoint-up(lg) {
+          flex: 0 0 5%;
+          max-width: 5%;
+        }
+      }
+      &--month {
+        @include make-col-ready();
+        @include media-breakpoint-up(md) {
+          @include make-col(6);
+        }
+      }
+    }
+  }
+}

package/templates/date-list.marko

@@ -0,0 +1,66 @@
+import dayjs from "@mindful-web/dayjs";
+import { isFunction } from '@mindful-web/utils';
+
+$ const { config, i18n } = out.global;
+
+$ const {
+  nodes,
+  displayType,
+  month,
+  year,
+  mountPoint,
+  alias,
+} = input;
+
+$ const type = "sitemap";
+$ const pageNode = {
+  title: `${ isFunction(i18n) ? i18n("Site Map") : "Site Map"}`,
+};
+$ switch (displayType) {
+  case "day":
+    pageNode.description = `All ${config.siteName()} stories published by days in ${month} ${year}`;
+    break;
+  case "month":
+    pageNode.description = `All ${config.siteName()} stories published by months in ${year}`;
+    break;
+  default:
+    pageNode.description = `All ${config.siteName()} stories published by years`;
+};
+<marko-web-default-page-layout type=type title=pageNode.title description=pageNode.description>
+  <@page>
+    <marko-web-page-wrapper class="sitemap">
+      <@section>
+
+        <h1 class="page-wrapper__title">
+          <if(year)>
+            <marko-web-link href=`${mountPoint}/`>
+              ${pageNode.title}
+            </marko-web-link>
+          </if>
+          <else>
+            ${pageNode.title}
+          </else>
+        </h1>
+        <marko-web-html-sitemap-breadcrumb ...input page-node=pageNode />
+        <!-- <div class="page-wrapper__description">${pageNode.description}</div> -->
+        <if(nodes)>
+          <div class="row row__dates">
+            <for|node| of=nodes>
+              <div class=`col__date col__date--${displayType}`>
+                <marko-web-link href=`${node.alias}` >
+                  <if(displayType === 'month')>
+                    $ const d = dayjs(`${node.year}-${node.month}`, "YYYY-M");
+                    ${d.format("MMMM")}
+                  </if>
+                  <else>
+                    ${node[displayType]}
+                  </else>
+                </marko-web-link>
+              </div>
+            </for>
+          </div>
+        </if>
+      </@section>
+    </marko-web-page-wrapper>
+  </@page>
+</marko-web-default-page-layout>

package/templates/date-list.marko.js

@@ -0,0 +1,143 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-html-sitemap$1.0.0/templates/date-list.marko",
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_dayjs = require("@mindful-web/dayjs"),
+    dayjs = module_dayjs.default || module_dayjs,
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    isFunction = module_utils_module.isFunction,
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_web_link_template = require("@mindful-web/marko-web/components/element/link.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_link_tag = marko_loadTag(marko_web_link_template),
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_html_sitemap_breadcrumb_template = require("../components/breadcrumb.marko"),
+    marko_web_html_sitemap_breadcrumb_tag = marko_loadTag(marko_web_html_sitemap_breadcrumb_template),
+    marko_forOf = require("marko/dist/runtime/helpers/for-of"),
+    marko_classAttr = require("marko/dist/runtime/html/helpers/class-attr"),
+    marko_web_page_wrapper_template = require("@mindful-web/marko-web/components/page/wrapper.marko"),
+    marko_web_page_wrapper_tag = marko_loadTag(marko_web_page_wrapper_template),
+    marko_web_default_page_layout_template = require("@mindful-web/marko-web/components/page/layouts/default.marko"),
+    marko_web_default_page_layout_tag = marko_loadTag(marko_web_default_page_layout_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { config, i18n } = out.global;
+
+  const {
+  nodes,
+  displayType,
+  month,
+  year,
+  mountPoint,
+  alias,
+} = input;
+
+  const type = "sitemap";
+
+  const pageNode = {
+  title: `${ isFunction(i18n) ? i18n("Site Map") : "Site Map"}`,
+};
+
+  switch (displayType) {
+  case "day":
+    pageNode.description = `All ${config.siteName()} stories published by days in ${month} ${year}`;
+    break;
+  case "month":
+    pageNode.description = `All ${config.siteName()} stories published by months in ${year}`;
+    break;
+  default:
+    pageNode.description = `All ${config.siteName()} stories published by years`;
+};
+
+  marko_web_default_page_layout_tag({
+      type: type,
+      title: pageNode.title,
+      description: pageNode.description,
+      page: {
+          renderBody: function(out) {
+            marko_web_page_wrapper_tag({
+                blockName: "page-wrapper",
+                tag: "div",
+                class: "sitemap",
+                sections: [
+                    {
+                        tag: "div",
+                        renderBody: function(out) {
+                          out.w("<h1 class=\"page-wrapper__title\">");
+
+                          if (year) {
+                            marko_web_link_tag({
+                                href: mountPoint + "/",
+                                renderBody: function(out) {
+                                  out.w(marko_escapeXml(pageNode.title));
+                                }
+                              }, out, __component, "5");
+                          } else {
+                            out.w(marko_escapeXml(pageNode.title));
+                          }
+
+                          out.w("</h1>");
+
+                          marko_web_html_sitemap_breadcrumb_tag(marko_assign({}, input, {
+                              pageNode: pageNode
+                            }), out, __component, "6");
+
+                          if (nodes) {
+                            out.w("<div class=\"row row__dates\">");
+
+                            var $for$0 = 0;
+
+                            marko_forOf(nodes, function(node) {
+                              var $keyScope$0 = "[" + (($for$0++) + "]");
+
+                              out.w("<div" +
+                                marko_classAttr("col__date col__date--" + displayType) +
+                                ">");
+
+                              marko_web_link_tag({
+                                  href: "" + node.alias,
+                                  renderBody: function(out) {
+                                    if (displayType === "month") {
+                                      const d = dayjs(`${node.year}-${node.month}`, "YYYY-M");
+
+                                      out.w(marko_escapeXml(d.format("MMMM")));
+                                    } else {
+                                      out.w(marko_escapeXml(node[displayType]));
+                                    }
+                                  }
+                                }, out, __component, "9" + $keyScope$0);
+
+                              out.w("</div>");
+                            });
+
+                            out.w("</div>");
+                          }
+                        }
+                      }
+                  ]
+              }, out, __component, "2");
+          }
+        }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    d_: true,
+    e_: marko_componentType
+  });
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-html-sitemap$1.0.0/templates/date-list.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/link.marko",
+      "../components/breadcrumb.marko",
+      "@mindful-web/marko-web/components/page/wrapper.marko",
+      "@mindful-web/marko-web/components/page/layouts/default.marko"
+    ]
+  };

package/templates/day.marko

@@ -0,0 +1,71 @@
+import queryFragment from "../graphql/fragments/sitemap-published-content";
+import { isFunction } from '@mindful-web/utils';
+
+$ const { config, htmlSitemapPagination: p, req, i18n } = out.global;
+$ const {
+  ending,
+  after,
+  year,
+  month,
+  day,
+  mountPoint,
+} = input;
+
+$ const perPage = 1000;
+$ const type = "sitemap";
+$ const date = `${month} ${day}, ${year}`;
+$ const pageNode = {
+  title: `${ isFunction(i18n) ? i18n("Site Map") : "Site Map"}`,
+  description: `All ${config.siteName()} stories published on ${date}`,
+};
+<marko-web-default-page-layout type=type title=pageNode.title description=pageNode.description>
+  <@page>
+    <marko-web-page-wrapper class="sitemap">
+      <@section>
+        <h1 class="page-wrapper__title">
+          <marko-web-link href=`${mountPoint}/`>
+            ${pageNode.title}
+          </marko-web-link>
+        </h1>
+        <marko-web-html-sitemap-breadcrumb ...input page-node=pageNode />
+        <marko-web-query|{ nodes }|
+          name="all-published-content"
+          params={
+            requiresIndexed: true,
+            publishedAfter: new Date(after.toISOString()),
+            since: new Date(ending.toISOString()),
+            limit: perPage,
+            skip: p.skip({ perPage }),
+            queryFragment,
+          }
+        >
+          <marko-web-node-list
+            inner-justified=false
+            flush-x=true
+            modifiers=["published-content-list"]
+          >
+            <@nodes nodes=nodes>
+              <@slot|{ node }|>
+                <marko-web-content-short-name obj=node link=true />
+              </@slot>
+            </@nodes>
+          </marko-web-node-list>
+        </marko-web-query>
+        <marko-web-html-sitemap-query-total-count|{ totalCount }|
+          name="all-published-content"
+          params={
+            requiresIndexed: true,
+            after: after.toDate().getTime(),
+            since: ending.toDate().getTime(),
+          }
+        >
+          <marko-web-html-sitemap-pagination-controls
+            per-page=perPage
+            total-count=totalCount
+            path=req.path
+          />
+        </marko-web-html-sitemap-query-total-count>
+      </@section>
+    </marko-web-page-wrapper>
+  </@page>
+</marko-web-default-page-layout>

package/templates/day.marko.js

@@ -0,0 +1,175 @@
+// Compiled using marko@4.20.2 - DO NOT EDIT
+"use strict";
+
+var marko_template = module.exports = require("marko/dist/html").t(__filename),
+    marko_componentType = "/@mindful-web/marko-web-html-sitemap$1.0.0/templates/day.marko",
+    marko_component = require("./day.marko"),
+    marko_renderer = require("marko/dist/runtime/components/renderer"),
+    module_queryFragment = require("../graphql/fragments/sitemap-published-content"),
+    queryFragment = module_queryFragment.default || module_queryFragment,
+    module_utils_module = require("@mindful-web/utils"),
+    utils_module = module_utils_module.default || module_utils_module,
+    isFunction = module_utils_module.isFunction,
+    helpers_escape_xml = require("marko/dist/runtime/html/helpers/escape-xml"),
+    marko_escapeXml = helpers_escape_xml.x,
+    marko_web_link_template = require("@mindful-web/marko-web/components/element/link.marko"),
+    marko_loadTag = require("marko/dist/runtime/helpers/load-tag"),
+    marko_web_link_tag = marko_loadTag(marko_web_link_template),
+    marko_assign = require("marko/dist/runtime/helpers/assign"),
+    marko_web_html_sitemap_breadcrumb_template = require("../components/breadcrumb.marko"),
+    marko_web_html_sitemap_breadcrumb_tag = marko_loadTag(marko_web_html_sitemap_breadcrumb_template),
+    marko_web_content_short_name_template = require("@mindful-web/marko-web/components/element/content/short-name.marko"),
+    marko_web_content_short_name_tag = marko_loadTag(marko_web_content_short_name_template),
+    marko_web_node_list_template = require("@mindful-web/marko-web/components/node-list/index.marko"),
+    marko_web_node_list_tag = marko_loadTag(marko_web_node_list_template),
+    marko_web_query_template = require("@mindful-web/marko-core/components/queries/index.marko"),
+    marko_web_query_tag = marko_loadTag(marko_web_query_template),
+    marko_web_html_sitemap_pagination_controls_template = require("../components/pagination-controls.marko"),
+    marko_web_html_sitemap_pagination_controls_tag = marko_loadTag(marko_web_html_sitemap_pagination_controls_template),
+    marko_web_html_sitemap_query_total_count_template = require("../components/query-total-count.marko"),
+    marko_web_html_sitemap_query_total_count_tag = marko_loadTag(marko_web_html_sitemap_query_total_count_template),
+    marko_web_page_wrapper_template = require("@mindful-web/marko-web/components/page/wrapper.marko"),
+    marko_web_page_wrapper_tag = marko_loadTag(marko_web_page_wrapper_template),
+    marko_web_default_page_layout_template = require("@mindful-web/marko-web/components/page/layouts/default.marko"),
+    marko_web_default_page_layout_tag = marko_loadTag(marko_web_default_page_layout_template);
+
+function render(input, out, __component, component, state) {
+  var data = input;
+
+  const { config, htmlSitemapPagination: p, req, i18n } = out.global;
+
+  const {
+  ending,
+  after,
+  year,
+  month,
+  day,
+  mountPoint,
+} = input;
+
+  const perPage = 1000;
+
+  const type = "sitemap";
+
+  const date = `${month} ${day}, ${year}`;
+
+  const pageNode = {
+  title: `${ isFunction(i18n) ? i18n("Site Map") : "Site Map"}`,
+  description: `All ${config.siteName()} stories published on ${date}`,
+};
+
+  marko_web_default_page_layout_tag({
+      type: type,
+      title: pageNode.title,
+      description: pageNode.description,
+      page: {
+          renderBody: function(out) {
+            marko_web_page_wrapper_tag({
+                blockName: "page-wrapper",
+                tag: "div",
+                class: "sitemap",
+                sections: [
+                    {
+                        tag: "div",
+                        renderBody: function(out) {
+                          out.w("<h1 class=\"page-wrapper__title\">");
+
+                          marko_web_link_tag({
+                              href: mountPoint + "/",
+                              renderBody: function(out) {
+                                out.w(marko_escapeXml(pageNode.title));
+                              }
+                            }, out, __component, "5");
+
+                          out.w("</h1>");
+
+                          marko_web_html_sitemap_breadcrumb_tag(marko_assign({}, input, {
+                              pageNode: pageNode
+                            }), out, __component, "6");
+
+                          marko_web_query_tag({
+                              collapsible: true,
+                              name: "all-published-content",
+                              params: {
+                                  requiresIndexed: true,
+                                  publishedAfter: new Date(after.toISOString()),
+                                  since: new Date(ending.toISOString()),
+                                  limit: perPage,
+                                  skip: p.skip({
+                                      perPage: perPage
+                                    }),
+                                  queryFragment: queryFragment
+                                },
+                              renderBody: function(out, { nodes }) {
+                                marko_web_node_list_tag({
+                                    blockName: "node-list",
+                                    tag: "div",
+                                    justified: false,
+                                    innerJustified: false,
+                                    flushX: true,
+                                    flushY: false,
+                                    fullHeight: false,
+                                    collapsible: true,
+                                    modifiers: [
+                                        "published-content-list"
+                                      ],
+                                    nodes: {
+                                        nodes: nodes,
+                                        slots: [
+                                            {
+                                                renderBody: function(out, { node }) {
+                                                  marko_web_content_short_name_tag({
+                                                      obj: node,
+                                                      link: true
+                                                    }, out, __component, "11");
+                                                }
+                                              }
+                                          ]
+                                      }
+                                  }, out, __component, "8");
+                              }
+                            }, out, __component, "7");
+
+                          marko_web_html_sitemap_query_total_count_tag({
+                              name: "all-published-content",
+                              params: {
+                                  requiresIndexed: true,
+                                  after: after.toDate().getTime(),
+                                  since: ending.toDate().getTime()
+                                },
+                              renderBody: function(out, { totalCount }) {
+                                marko_web_html_sitemap_pagination_controls_tag({
+                                    perPage: perPage,
+                                    totalCount: totalCount,
+                                    path: req.path
+                                  }, out, __component, "13");
+                              }
+                            }, out, __component, "12");
+                        }
+                      }
+                  ]
+              }, out, __component, "2");
+          }
+        }
+    }, out, __component, "0");
+}
+
+marko_template._ = marko_renderer(render, {
+    e_: marko_componentType
+  }, marko_component);
+
+marko_template.meta = {
+    id: "/@mindful-web/marko-web-html-sitemap$1.0.0/templates/day.marko",
+    component: "./day.marko",
+    tags: [
+      "@mindful-web/marko-web/components/element/link.marko",
+      "../components/breadcrumb.marko",
+      "@mindful-web/marko-web/components/element/content/short-name.marko",
+      "@mindful-web/marko-web/components/node-list/index.marko",
+      "@mindful-web/marko-core/components/queries/index.marko",
+      "../components/pagination-controls.marko",
+      "../components/query-total-count.marko",
+      "@mindful-web/marko-web/components/page/wrapper.marko",
+      "@mindful-web/marko-web/components/page/layouts/default.marko"
+    ]
+  };