Refactor content style guide updates page

.eleventy.js

@@ -29,6 +29,23 @@ module.exports = function (eleventyConfig) {
     'node_modules/govuk-frontend/dist/'
   ])
 
+  const md = markdownIt({
+    html: true,
+    typographer: true,
+    quotes: '“”‘’',
+    highlight(code, language) {
+      const { value } = hljs.highlight(code.trim(), {
+        language: language || 'plaintext'
+      })
+
+      return value
+    }
+  })
+    .disable('code')
+    .use(markdownItAnchor, {
+      level: [1, 2, 3, 4]
+    })
+
   Object.entries({
     ...eleventyConfig.nunjucksFilters,
     ...mojFilters()
@@ -43,25 +60,7 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.setLibrary('njk', nunjucksEnv)
 
-  eleventyConfig.setLibrary(
-    'md',
-    markdownIt({
-      html: true,
-      typographer: true,
-      quotes: '“”‘’',
-      highlight(code, language) {
-        const { value } = hljs.highlight(code.trim(), {
-          language: language || 'plaintext'
-        })
-
-        return value
-      }
-    })
-      .disable('code')
-      .use(markdownItAnchor, {
-        level: [1, 2, 3, 4]
-      })
-  )
+  eleventyConfig.setLibrary('md', md)
 
   eleventyConfig.addShortcode('example', function (exampleHref, height) {
     let { data, content: nunjucksCode } = matter(
@@ -289,6 +288,14 @@ module.exports = function (eleventyConfig) {
     })
   })
 
+  eleventyConfig.addFilter('timestamp', (date) => {
+    return date.getTime()
+  })
+
+  eleventyConfig.addFilter('markdownify', (content) => {
+    return `${md.render(content)}`
+  })
+
   // Rebuild when a change is made to a component template file
   eleventyConfig.addWatchTarget('src/moj/components/**/*.njk')
   eleventyConfig.addWatchTarget('docs/examples/**/script.js')

docs/_includes/layouts/style-guide-updates.njk

@@ -0,0 +1,65 @@
+{% from "govuk/components/table/macro.njk" import govukTable %}
+{% from "govuk/components/tag/macro.njk" import govukTag %}
+
+{% extends "./base.njk" %}
+
+{% block content %}
+    {% include "./partials/page-header.njk" %}
+
+    <div class="app-page__body">
+        <div class="app-page__width-container">
+          {{ content | safe }}
+
+          {% set rows = [] %}
+
+          {%- for entry in collections['style-guide-update'] -%}
+            {% set link = '<a class="govuk-!-font-weight-bold" href="/content-standards/style-guide#'+entry.data.anchor+'">'+entry.data.title+'</a>' %}
+            {% set tagText = entry.data.type | upperFirst %}
+            {% set tagClass='govuk-tag govuk-tag--green' if entry.data.type | lower === 'new' else 'govuk-tag govuk-tag--blue' %}
+            {% set entryContent = entry.content | markdownify  %}
+
+            {% set row = [
+                { html: link },
+                { html: govukTag({ text: tagText, classes: tagClass})},
+                { html: entryContent },
+                { html: entry.date | mojDate('date') | replace(' ', '&nbsp;'), attributes: { 'data-sort-value': entry.date | timestamp } }
+            ] %}
+
+            {% set rows = (rows.push(row), rows) %}
+          {% endfor %}
+
+          {{ govukTable({
+            attributes: {
+              'data-module': 'moj-sortable-table'
+            },
+            head: [
+              {
+                text: "Entry",
+                attributes: {
+                  'aria-sort': 'none'
+                }
+              },
+              {
+                text: "Type",
+                attributes: {
+                  'aria-sort': 'none'
+                }
+              },
+              {
+                text: "Description",
+                attributes: {
+                  'aria-sort': 'none'
+                }
+              },
+              {
+                text: "Date",
+                attributes: {
+                  'aria-sort': 'descending'
+                }
+              }
+            ],
+            rows: rows
+          }) }}
+    </div>
+  </div>
+{% endblock %}