ci(github): use css bundles; test deployment

Author: timmywil

.github/workflows/deploy.yml

@@ -1,4 +1,4 @@
-name: Deploy site to Pages
+name: Deploy site
 
 on:
   # Runs on pushes targeting the default branch
@@ -34,30 +34,30 @@ jobs:
         uses: actions/checkout@v3
         with:
           submodules: recursive
-      # - name: Setup Pages
-      #   id: pages
-      #   uses: actions/configure-pages@v3
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v3
       - name: Install Node.js dependencies
         run: npm ci
       - name: Build with Eleventy
         env:
           NODE_ENV: production
           NODE_OPTIONS: '--max_old_space_size=4096'
-        # run: npm run build -- --pathprefix="${{ steps.pages.outputs.base_url }}/"
-        run: npm run build -- --pathprefix="/bugs.jquery.com/"
-      # - name: Upload artifact
-      #   uses: actions/upload-pages-artifact@v1
-      #   with:
-      #     path: ./_site
+        run: npm run build -- --pathprefix="${{ steps.pages.outputs.base_path }}/"
+        # run: npm run build -- --pathprefix="/bugs.jquery.com/"
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./_site
 
   # Deployment job
-  # deploy:
-  #   environment:
-  #     name: github-pages
-  #     url: ${{ steps.deployment.outputs.page_url }}
-  #   runs-on: ubuntu-latest
-  #   needs: build
-  #   steps:
-  #     - name: Deploy to GitHub Pages
-  #       id: deployment
-  #       uses: actions/deploy-pages@v2
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

_includes/layouts/base.njk

@@ -6,9 +6,6 @@
     <title data-pagefind-meta="title">{{ title or metadata.title }}</title>
     <meta name="description" content="{{ description or metadata.description }}">
     {% favicon './public/favicon.svg' %}
-    {# Atom and JSON feeds included by default #}
-    <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}" />
-    <link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}" />
     {#
       CSS bundles are provided via the `eleventy-plugin-bundle` plugin:
       1. You can add to them using `{% css %}`
@@ -20,8 +17,20 @@
       Hot reload isn't working with the bundle plugin on windows
       See https://github.com/11ty/eleventy/issues/2807
     #}
-    <link rel="stylesheet" href="/css/index.css" />
-    <link rel="stylesheet" href="/css/search.css" />
+    {%- css %}{% include "public/css/index.css" %}{% endcss %}
+    {%- css %}{% include "public/css/search.css" %}{% endcss %}
+    {# These are in the njk so the path prefix is respected #}
+    {%- css %}
+    body {
+      background-image: url({{ '/img/bg-interior-tile-drk.jpg' | htmlBaseUrl }});
+    }
+    a.extlink .icon {
+      background: url({{ '/img/extlink.png' | htmlBaseUrl }}) 0 50% no-repeat;
+    }
+    #search:after {
+      background: url({{ '/img/icon-search.png' | htmlBaseUrl }}) 0 0 no-repeat;
+    }
+    {% endcss %}
     {# Add an arbitrary string to the bundle #}
     {# {%- css %}* { box-sizing: border-box; }{% endcss %} #}
     {# Render the CSS bundle using Inlined CSS (for the fastest site performance in production) #}

_includes/layouts/ticket.njk

@@ -2,8 +2,8 @@
 layout: layouts/base.njk
 ---
 
-<link rel="stylesheet" href="/css/ticket.css" />
+{%- css %}{% include "public/css/ticket.css" %}{% endcss %}
 
 <div class="flex-column" data-pagefind-body>
   {{ content | safe }}
-</div>
+</div>

_includes/layouts/wiki.njk

@@ -2,7 +2,7 @@
 layout: layouts/base.njk
 ---
 
-<link rel="stylesheet" href="/css/wiki.css" />
+{%- css %}{% include "public/css/wiki.css" %}{% endcss %}
 
 <div class="wiki flex-column">
   <div class="breadcrumbs-nav flex-row">
@@ -24,4 +24,4 @@ layout: layouts/base.njk
   <div class="wiki-content">
     {{ content | safe }}
   </div>
-</div>
+</div>

content/attachment.njk

@@ -24,7 +24,7 @@
 {# Include syntax highligher CSS #}
 {%- css %}{% include "node_modules/prismjs/themes/prism.min.css" %}{% endcss %}
 {%- css %}{% include "public/css/prism-diff.css" %}{%- endcss %}
-<link rel="stylesheet" href="/css/attachment.css" />
+{%- css %}{% include "public/css/attachment.css" %}{% endcss %}
 
 <div class="flex-column attachment">
   <nav class="content-nav">

content/search.njk

@@ -2,7 +2,7 @@
 layout: layouts/base.njk
 ---
 
-<link rel="stylesheet" href="/css/fullpagesearch.css" />
+{%- css %}{% include "public/css/fullpagesearch.css" %}{% endcss %}
 
 <h1>Search</h1>
 <hr>
@@ -20,4 +20,4 @@ layout: layouts/base.njk
       }
     })
   })
-</script>
+</script>

public/css/index.css

@@ -77,7 +77,6 @@ html {
   overflow-y: auto;
 }
 body {
-  background-image: url(/img/bg-interior-tile-drk.jpg);
   background-repeat: repeat-x;
   background-position: 50% 80px;
 }
@@ -491,7 +490,6 @@ footer a[href]:visited {
 }
 a.ext-link .icon {
   padding-left: 15px;
-  background: url(/img/extlink.png) 0 50% no-repeat;
 }
 
 @media (max-width: 919px) {

public/css/search.css

@@ -25,7 +25,6 @@
   top: -4px;
   width: 35px;
   height: 35px;
-  background: url(/img/icon-search.png) 0 0 no-repeat;
   z-index: 2;
 }
 .pagefind-ui__search-input {