Github Action for generating PDFs (#91)

.github/workflows/export-pdf.yml

@@ -0,0 +1,118 @@
+name: Export PDFs
+
+on:
+  # Triggers the workflow on push or pull request events but only for the master branch
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      # Get necessary packages for this image
+      - uses: actions/checkout@v3
+      - name: Install necessary packages
+        run: sudo apt-get install graphicsmagick -y
+
+      # Get latest chrome
+      - name: Get Chrome
+        run: |
+          wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+          sudo apt install ./google-chrome-stable_current_amd64.deb
+
+      # Check out the code
+      - name: Checkout
+        uses: actions/checkout@v3.0.0
+
+      # Get appropriate nodejs version
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+          cache: 'npm'
+
+      # Restore packages and build
+      - name: Restore node_modules cache
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node_modules
+
+      - name: Restore Asset Caches
+        uses: actions/cache@v2
+        with:
+          key: if-cache
+          path: |
+            ./if-cache
+            ./if-cache.json
+            ./twitter-cache.json
+
+      - run: npm ci
+        
+      - name: Run build
+        run: npm run build
+
+      # Create a "dummy" http server inside the container
+      # on the output folder of the build
+      - name: Launch HTTP Server
+        uses: Eun/http-server-action@v1.0.3
+        with:
+          directory: dist
+
+      # Launch a headless chrome instance for exporting
+      - name: (EN) Get PDF from HTML
+        run: |
+          google-chrome --headless --print-to-pdf-no-header \
+          --run-all-compositor-stages-before-draw --print-to-pdf="./dist/en.pdf" \
+          http://127.0.0.1:8080/en/printable/index.html
+          
+      - name: (CN) Get PDF from HTML
+        run: |
+          google-chrome --headless --print-to-pdf-no-header \
+          --run-all-compositor-stages-before-draw --print-to-pdf="./dist/cn.pdf" \
+          http://127.0.0.1:8080/zh/printable/index.html
+          
+      - name: (DE) Get PDF from HTML
+        run: |
+          google-chrome --headless --print-to-pdf-no-header \
+          --run-all-compositor-stages-before-draw --print-to-pdf="./dist/de.pdf" \
+          http://127.0.0.1:8080/de/druckbar/index.html
+
+      - name: (HU) Get PDF from HTML
+        run: |
+          google-chrome --headless --print-to-pdf-no-header \
+          --run-all-compositor-stages-before-draw --print-to-pdf="./dist/hu.pdf" \
+          http://127.0.0.1:8080/hu/nyomtathato/index.html
+          
+      - name: (PL) Get PDF from HTML
+        run: |
+          google-chrome --headless --print-to-pdf-no-header \
+          --run-all-compositor-stages-before-draw --print-to-pdf="./dist/pl.pdf" \
+          http://127.0.0.1:8080/pl/do-druku/index.html
+
+      - name: (ZH) Get PDF from HTML
+        run: |
+          google-chrome --headless --print-to-pdf-no-header \
+          --run-all-compositor-stages-before-draw --print-to-pdf="./dist/zh.pdf" \
+          http://127.0.0.1:8080/zh/printable/index.html
+
+      # Something is coming soon ;)
+#      - name: (FR) Get PDF from HTML
+#        run: |
+#          google-chrome --headless --print-to-pdf-no-header \
+#          --run-all-compositor-stages-before-draw --print-to-pdf="./dist/fr.pdf" \
+#          http://127.0.0.1:8080/fr/a-imprimer/index.html
+        
+      - name: Upload PDF artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: pdfs
+          path: |
+            dist/**/*.pdf

public/de/_menu.hbs

@@ -2,6 +2,7 @@
 <a href="/de/" class="top-nav-item dropdown-toggle" id="nav-gdb" data-toggle="dropdown" data-flip="false" aria-haspopup="true" aria-expanded="false">Die Gender Dysphorie Bibel</a>
 <div class="dropdown-menu" aria-labelledby="nav-gdb">
   <a href="/de/druckbar"                          class="{{#is meta.url '/de/druckbar'                         }}active {{/is}}dropdown-item">Alle ansehen</a>
+  <a href="/gdb-de.pdf"                     class="dropdown-item">PDF Herunterladen {{icon 'pdf' size="1em" style="vertical-align:middle;margin-bottom:3px;"}} </a>
   <hr class="dropdown-divider">
   <a href="/de/"                                  class="{{#is meta.url '/de/index'                            }}active {{/is}}dropdown-item">Einleitung</a>
   <a href="/de/was-ist-gender"                    class="{{#is meta.url '/de/was-ist-gender'                   }}active {{/is}}dropdown-item">Was ist Gender?</a>

public/en/_menu.hbs

@@ -2,7 +2,7 @@
 <a href="/en/" class="top-nav-item dropdown-toggle" id="nav-gdb" data-toggle="dropdown" data-flip="false" aria-haspopup="true" aria-expanded="false">The Gender Dysphoria Bible</a>
 <div class="dropdown-menu" aria-labelledby="nav-gdb">
   <a href="/en/printable"                class="{{#is meta.url '/en/printable'               }}active {{/is}}dropdown-item">View All</a>
-  <a href="/gdb.pdf"                     class="dropdown-item">Download PDF {{icon 'pdf' size="1em" style="vertical-align:middle;margin-bottom:3px;"}} </a>
+  <a href="/gdb-en.pdf"                     class="dropdown-item">Download PDF {{icon 'pdf' size="1em" style="vertical-align:middle;margin-bottom:3px;"}} </a>
   <hr class="dropdown-divider">
   <a href="/en/"                         class="{{#is meta.url '/en/index' '/'               }}active {{/is}}dropdown-item">Introduction</a>
   <a href="/en/what-is-gender"           class="{{#is meta.url '/en/what-is-gender'          }}active {{/is}}dropdown-item">What is Gender?</a>

public/hu/_menu.hbs

@@ -2,7 +2,7 @@
 <a href="/hu/" class="top-nav-item dropdown-toggle" id="nav-gdb" data-toggle="dropdown" data-flip="false" aria-haspopup="true" aria-expanded="false">A Gender Diszfória Biblia</a>
 <div class="dropdown-menu" aria-labelledby="nav-gdb">
  <a href="/hu/nyomtathato" class="{{#is meta.url '/hu/nyomtathato' }}active {{/is}}dropdown-item">Minden megnyitása</a>
- <!--<a href="/gdb.pdf" class="dropdown-item">Download PDF {{icon 'pdf' size="1em" style="vertical-align:middle;margin-bottom:3px;"}} </a>-->
+ <a href="/gdb-hu.pdf" class="dropdown-item">PDF Letöltése {{icon 'pdf' size="1em" style="vertical-align:middle;margin-bottom:3px;"}} </a>
  <hr class="dropdown-divider">
  <a href="/hu/" class="{{#is meta.url '/hu/index' '/' }}active {{/is}}dropdown-item">Előszó</a>
  <a href="/hu/mi-is-az-a-gender" class="{{#is meta.url '/hu/mi-is-az-a-gender' }}active {{/is}}dropdown-item">Mi is az a Gender?</a>

public/pl/_menu.hbs

@@ -2,6 +2,7 @@
 <a href="/pl/" class="top-nav-item dropdown-toggle" id="nav-gdb" data-toggle="dropdown" data-flip="false" aria-haspopup="true" aria-expanded="false">Biblia Dysforii Płciowej</a>
 <div class="dropdown-menu" aria-labelledby="nav-gdb">
   <a href="/pl/do-druku"                 class="{{#is meta.url '/pl/do-druku'                 }}active {{/is}}dropdown-item">Zobacz wszystko</a>
+  <a href="/gdb-pl.pdf"                     class="dropdown-item">Pobierz PDF {{icon 'pdf' size="1em" style="vertical-align:middle;margin-bottom:3px;"}} </a>
   <hr class="dropdown-divider">
   <a href="/pl/"                         class="{{#is meta.url '/pl/index' '/pl/'             }}active {{/is}}dropdown-item">Wstęp</a>
   <a href="/pl/czym-jest-gender"         class="{{#is meta.url '/pl/czym-jest-gender'         }}active {{/is}}dropdown-item">Czym jest gender?</a>

public/zh/_menu.hbs

@@ -2,6 +2,7 @@
 <a href="/zh/" class="top-nav-item dropdown-toggle" id="nav-gdb" data-toggle="dropdown" data-flip="false" aria-haspopup="true" aria-expanded="false">性别烦躁指南</a>
 <div class="dropdown-menu" aria-labelledby="nav-gdb">
   <a href="/zh/printable"                class="{{#is meta.url '/zh/printable'    }}active {{/is}}dropdown-item">查看全部</a>
+  <a href="/gdb-cn.pdf"                class="{{#is meta.url '/zh/printable'    }}active {{/is}}dropdown-item">下载PDF</a>
   <hr class="dropdown-divider">
   <a href="/zh/"                         class="{{#is meta.url '/zh/index' '/'    }}active {{/is}}dropdown-item">简介</a>
   <a href="/zh/什么是性别"                class="{{#is meta.url '/zh/什么是性别'     }}active {{/is}}dropdown-item">什么是性别？</a>

scss/print.scss

@@ -106,6 +106,8 @@ $header-full-height: 100px;
 @import "./markup";
 // @import "./pager";
 @import "./longform";
+@import "./font-compatibility";
+
 
 header {
   .top-nav { display: none; }