Merge pull request #25 from gibbs/rule-updates

Rule updates

Author: gibbs

attribution.yaml

@@ -1,13 +1,2 @@
 ---
-# This is for posterity and tracking. Do something with it eventually to 
-# attribute properly?
-images:
-  covers/currency-data.jpeg:
-    src: https://unsplash.com/photos/ROQzKIAdY78
-    author: John McArthur
-    url: https://unsplash.com/@snowjam
-
-  covers/placeholder.jpg:
-    src: https://unsplash.com/photos/Tjbk79TARiE
-    author: Sai Kiran Anagani
-    url: https://unsplash.com/@anagani_saikiran
+# This is for posterity and tracking. Do something with it eventually

content/index.md

@@ -15,10 +15,3 @@ jsonld:
 ---
 
 # Dan Gibbs { .hero__title #goto-h1 }
-
-## Full Stack Web Developer and Linux Sysadmin { .hero__subtitle #goto-h2 }
-
-I'm Dan Gibbs — an experienced developer involved in all things web related. I 
-work on front and backend projects, development/operations,
-databases, testing, deployment, automation, infrastructure as code and 
-everything else in between.

package-lock.json

@@ -0,0 +1,28 @@
+/**
+ * Content security policies
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP
+ */
+const resources = require('./resources')
+const directives = {
+  'upgrade-insecure-requests': '',
+  'base-uri': "'self'",
+  'child-src': "'none'",
+  'connect-src': `'self' ${resources.app.src}`,
+  'default-src': "'self'",
+  'font-src': "'self' data:",
+  'form-action': "'self'",
+  'frame-src': "'none'",
+  'img-src': "'self' https://github.com/gibbs/ https://img.shields.io/ data:",
+  'manifest-src': "'self'",
+  'media-src': "'self'",
+  'object-src': "'self'",
+  'script-src': `'self' ${resources['chart.js'].src}`,
+  'style-src': "'self' 'unsafe-inline'",
+  'worker-src': "'self'"
+}
+
+if (process.env.APP_ENV !== 'production') {
+  directives['script-src'] = `'self' 'unsafe-eval' 'unsafe-inline' ${resources['chart.js'].src}`
+}
+
+module.exports = Object.keys(directives).map(key => `${key} ${directives[key]}`).join('; ')

src/_data/rules/csp.js

@@ -0,0 +1,14 @@
+/**
+ * External resources
+ */
+const resources = {
+  app: {
+    src: process.env.APP_SERVICE_URL
+  },
+  'chart.js': {
+    src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js',
+    sha: 'sha512-IMvjDnJzMKoQZLPYQHxR4g8nm0sSd9bR7Kl5ayxnPHV8ChqVpHCdBYXGib3ZftuDlfaceqn7t47fObseBCEEJw=='
+  }
+}
+
+module.exports = resources

src/_data/rules/resources.js

@@ -0,0 +1,28 @@
+/**
+ * Speculation rules
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API
+ */
+const speculation = {
+  prerender: [
+    {
+      eagerness: 'eager',
+      source: 'list',
+      urls: [
+        '/',
+        '/projects/',
+        '/tools/'
+      ]
+    }, {
+      eagerness: 'moderate',
+      where: {
+        and: [
+          { href_matches: '/*' },
+          { not: { selector_matches: '.npr' } },
+          { not: { selector_matches: '[rel~=nofollow]' } }
+        ]
+      }
+    }
+  ]
+}
+
+module.exports = JSON.stringify(speculation)

src/_data/rules/speculation.js

@@ -11,26 +11,7 @@ module.exports = {
   host: url.host,
   hostname: url.hostname,
   year: (new Date()).getFullYear(),
-  contentSecurity: [
-    'upgrade-insecure-requests',
-    "default-src 'self'",
-    "style-src 'self' 'unsafe-inline'",
-    "script-src 'self' 'unsafe-inline' 'unsafe-eval' " + [
-      url.origin,
-      'https://cdn.jsdelivr.net/npm/chart.js'
-    ].join(' '),
-    "font-src 'self' " + [
-      'fonts.gstatic.com',
-      'data:'
-    ].join(' '),
-    'img-src * data:',
-    "connect-src 'self' " + [
-      url.host,
-      '*.' + url.host
-    ].join(' '),
-    "base-uri 'self'",
-    "object-src 'none'",
-    "manifest-src 'self'",
-    "worker-src 'self'"
-  ].join('; ')
+  contentSecurityPolicy: require('./rules/csp'),
+  speculationRules: require('./rules/speculation'),
+  resources: require('./rules/resources')
 }

src/_data/site.js

@@ -1,4 +1,4 @@
-<footer id="footer" class="footer">
+{#<footer id="footer" class="footer">
   <div class="container footer-grid">
     <nav class="footer-navigation">
       <ul class="footer-navigation__list">
@@ -51,7 +51,7 @@
       </a>
     </div>
   </div>
-</footer>
+</footer>#}
 
 <footer id="copyright" class="copyright">
   <div class="container copyright__grid">

src/_includes/footer.njk

@@ -2,9 +2,9 @@
   <li class="navigation__item" {% if page.url == '/' %} aria-current="page"{% endif %}>
     <a class="navigation__anchor{% if page.url == '/' %} navigation__anchor--active{% endif %}" href="{{ site.url }}/">Home</a>
   </li>
-  <li class="navigation__item" {% if '/blog/' in page.url %} aria-current="page"{% endif %}>
+  {#<li class="navigation__item" {% if '/blog/' in page.url %} aria-current="page"{% endif %}>
     <a class="navigation__anchor{% if '/blog/' in page.url %} navigation__anchor--active{% endif %}" href="{{ site.url }}/blog/">Blog</a>
-  </li>
+  </li>#}
   <li class="navigation__item" {% if page.url == '/projects/' %} aria-current="page"{% endif %}>
     <a class="navigation__anchor{% if '/projects/' in page.url %} navigation__anchor--active{% endif %}" href="{{ site.url }}/projects/">Projects</a>
   </li>

src/_includes/navigation.njk

@@ -3,19 +3,17 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="content-security-policy" content="{{ site.contentSecurity|safe }}">
+    <meta http-equiv="content-security-policy" content="{{ site.contentSecurityPolicy|safe }}">
     <title>{{ title or meta.title }}</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     {% block meta %}{% include "meta.njk" %}{% endblock %}
     {% if jsonld %}
     <script type="application/ld+json">
       {% block json_ld %}{{ jsonld | toJSONLD | safe }}{% endblock %}
     </script>
     {% endif %}
     <style>{% css %}</style>
+    <script integrity="{% sri 'init.js', true %}">{% asset 'init.js' %}</script>
     <noscript><style>.js-required{display:none}.navigation{flex-direction:row-reverse}@media (min-width:768px){.navigation{flex-direction:row}}</style></noscript>
-    <script>document.documentElement.setAttribute('data-dark-mode', JSON.parse(window.sessionStorage.getItem('theme')) ?? false)</script>
   </head>
 
   <body class="layout-{{ layout|default('base') }}">
@@ -52,6 +50,7 @@
     {% endblock %}
 
     <script src="{{ site.url }}{% manifest 'main.js' %}" integrity="{% sri 'main.js', true %}"></script>
+    <script type="speculationrules">{{ site.speculationRules|safe }}</script>
     {% block scripts %}{% endblock %}
   </body>
 </html>