From 6026c006db58108f251833536d8134a003fd7a12 Mon Sep 17 00:00:00 2001
From: Isaac Mills <rooster0055@protonmail.com>
Date: Sat, 20 Apr 2024 17:19:14 -0400
Subject: [PATCH] Add opengraph image generation

---
 .woodpecker.yml          |  1 +
 templates/article.html   | 10 +++---
 templates/opengraph.svg  | 78 ++++++++++++++++++++++++++++++++++++++++
 templates/opengraph.toml | 10 ++++++
 4 files changed, 94 insertions(+), 5 deletions(-)
 create mode 100644 templates/opengraph.svg
 create mode 100644 templates/opengraph.toml

diff --git a/.woodpecker.yml b/.woodpecker.yml
index 391c920..e89d049 100644
--- a/.woodpecker.yml
+++ b/.woodpecker.yml
@@ -7,3 +7,4 @@ steps:
       - bruin-journal-gen
     volumes:
       - /var/woodpecker:/var/woodpecker
+      - /usr/share/fonts:/usr/share/fonts
diff --git a/templates/article.html b/templates/article.html
index 59efb62..4b82aab 100644
--- a/templates/article.html
+++ b/templates/article.html
@@ -11,14 +11,14 @@
   <meta name="theme-color" content="#552A85">
   <meta property="og:title" content="{{title}}">
   <meta property="og:type" content="article">
-  <meta property="og:image" content="{{base_url}}/images/logo-z.png">
+  <meta property="og:image" content="{{base_url}}/{{branch}}/{{id}}.png">
+  <meta property="twitter:image" content="{{base_url}}/{{branch}}/{{id}}.png">
   <meta property="og:url" content="{{base_url}}/{{branch}}/{{id}}.html">
   <meta property="twitter:url" content="{{base_url}}/{{branch}}/{{id}}.html">
   <meta property="article:published_time" content="{{published_date}}">
   <meta name="twitter:card" content="summary_large_image">
-  <meta property="og:image:width" content="310">
-  <meta property="og:image:height" content="310">
-  <meta property="og:image:alt" content="The Compute logo">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
   <meta property="og:site_name" content="Compute: Lake Braddock's Comp-Sci Journal">
   <meta property="og:article:published_time" content="{{published_og}}">
   <meta property="og:article:modified_time" content="{{modified_og}}">
@@ -82,4 +82,4 @@
   <script src="{{base_url}}/js/webflow.js" type="text/javascript"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/templates/opengraph.svg b/templates/opengraph.svg
new file mode 100644
index 0000000..333193b
--- /dev/null
+++ b/templates/opengraph.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1200"
+   height="630"
+   viewBox="0 0 1200 630"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="opengraph-image.svg"
+   inkscape:export-filename="opengraph-image-export.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showguides="false"
+     inkscape:zoom="0.28834299"
+     inkscape:cx="603.44799"
+     inkscape:cy="554.8947"
+     inkscape:window-width="1054"
+     inkscape:window-height="1056"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1"><sodipodi:guide
+       position="1165.2862,111.68266"
+       orientation="0,-1"
+       id="guide4"
+       inkscape:locked="false" /></sodipodi:namedview><defs
+     id="defs1"><rect
+       x="463.15115"
+       y="27.766033"
+       width="736.84885"
+       height="494.60768"
+       id="rect3" /><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath4"><circle
+         style="fill:#f6c318;fill-opacity:1;stroke:none;stroke-width:5;stroke-opacity:1"
+         id="circle4"
+         cx="741.96826"
+         cy="274.80307"
+         r="256" /></clipPath><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath6"><path
+         style="fill:#f6c318;fill-opacity:1;stroke-width:5"
+         d="M 0,630.00003 123.42918,456.44012 173.55991,630.00003 Z"
+         id="path7" /></clipPath></defs><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"><rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:5.3586;stroke-opacity:1"
+       id="rect4"
+       width="447.72949"
+       height="630"
+       x="0"
+       y="0" /><path
+       d="m 148.57988,37.870709 -0.0353,63.146141 0.0864,-0.0857 15.37032,15.48848 -15.47496,15.35616 -0.007,14.24017 40.51551,0.15416 -40.51644,40.21004 0.063,35.56856 c 0,0 3.97958,2.5272 7.56742,2.40241 3.58784,-0.12479 34.50115,-13.34641 40.76748,-18.07953 6.26634,-4.73311 24.51397,-22.11186 28.00094,-26.99698 3.48623,-4.88587 16.20968,-46.79405 15.85421,-53.2772 -0.35547,-6.48241 -5.74346,-21.76903 -5.74346,-21.76903 0,0 9.75473,-3.89671 18.17576,-17.176977 8.42029,-13.280266 10.09027,-20.881164 5.48734,-29.902254 -4.60218,-9.021839 -45.78654,0.04205 -45.78654,0.04205 0,0 -35.14503,-19.209455 -64.32467,-19.320478 z m 90.93422,24.8529 c 3.32933,-0.02776 6.55651,0.232227 9.24754,0.972809 10.76283,2.963826 -19.36239,31.095392 -19.36239,31.095392 L 218.6305,65.469748 c 0,0 10.89494,-2.66441 20.8836,-2.746139 z m -43.6008,7.325367 1.67481,18.068165 -15.48026,8.486716 -16.73691,-15.635113 z m -47.4322,-32.178643 0.0366,63.146417 -0.0872,-0.0856 -15.36921,15.48827 15.47409,15.35717 0.008,14.23948 -40.51595,0.1549 40.51652,40.20931 -0.062,35.56808 c 0,0 -3.97936,2.5276 -7.567,2.40319 -3.58763,-0.12589 -34.50209,-13.3463 -40.76833,-18.0792 -6.266241,-4.73292 -24.51408,-22.11134 -28.00054,-26.99606 -3.486468,-4.88471 -16.210538,-46.79317 -15.855875,-53.27662 0.356167,-6.48269 5.742995,-21.76947 5.742995,-21.76947 0,0 -9.754265,-3.89611 -18.175274,-17.176851 -8.420253,-13.280746 -10.089981,-20.880872 -5.48802,-29.902113 4.602717,-9.021985 45.786985,0.04101 45.786985,0.04101 0,0 35.144549,-19.209908 64.324289,-19.321129 z M 57.547077,62.724185 c -3.329092,-0.02761 -6.556019,0.232474 -9.247488,0.973528 -10.762895,2.96423 19.363001,31.094569 19.363001,31.094569 L 78.431481,65.47135 c 0,0 -10.895622,-2.665009 -20.884404,-2.747165 z m 43.601163,7.325659 -1.6746,18.068135 15.48003,8.486278 16.73691,-15.635708 z"
+       style="fill:#572c84;stroke:#f6c318;stroke-width:3.74149px;stroke-linejoin:round"
+       id="path1" /><path
+       style="fill:#572c84;fill-opacity:1;stroke:none;stroke-width:5;stroke-opacity:1"
+       d="M 0,630 447.72948,0 H 1200 v 630 z"
+       id="path3" /><path
+       style="fill:#f6c318;fill-opacity:1;stroke-width:5"
+       d="M 0,630 118.01632,463.93927 223.86475,630 Z"
+       id="path8" /></g></svg>
diff --git a/templates/opengraph.toml b/templates/opengraph.toml
new file mode 100644
index 0000000..9930beb
--- /dev/null
+++ b/templates/opengraph.toml
@@ -0,0 +1,10 @@
+faces = ["/usr/share/fonts/noto/NotoSans-Bold.ttf"]
+
+[[text]]
+x = 435.15115
+y = 8.0
+width = 736.84885
+height = 594.60768
+value = "{{title}}"
+font = "Noto Sans"
+bold = true