Add opengraph image generation
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Isaac Mills 2024-04-20 17:19:14 -04:00
parent b97b91990d
commit 6026c006db
Signed by: fnmain
GPG key ID: B67D7410F33A0F61
4 changed files with 94 additions and 5 deletions

View file

@ -7,3 +7,4 @@ steps:
- bruin-journal-gen - bruin-journal-gen
volumes: volumes:
- /var/woodpecker:/var/woodpecker - /var/woodpecker:/var/woodpecker
- /usr/share/fonts:/usr/share/fonts

View file

@ -11,14 +11,14 @@
<meta name="theme-color" content="#552A85"> <meta name="theme-color" content="#552A85">
<meta property="og:title" content="{{title}}"> <meta property="og:title" content="{{title}}">
<meta property="og:type" content="article"> <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="og:url" content="{{base_url}}/{{branch}}/{{id}}.html">
<meta property="twitter: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 property="article:published_time" content="{{published_date}}">
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta property="og:image:width" content="310"> <meta property="og:image:width" content="1200">
<meta property="og:image:height" content="310"> <meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The Compute logo">
<meta property="og:site_name" content="Compute: Lake Braddock's Comp-Sci Journal"> <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:published_time" content="{{published_og}}">
<meta property="og:article:modified_time" content="{{modified_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> <script src="{{base_url}}/js/webflow.js" type="text/javascript"></script>
</body> </body>
</html> </html>

78
templates/opengraph.svg Normal file
View file

@ -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>

After

Width:  |  Height:  |  Size: 4.5 KiB

10
templates/opengraph.toml Normal file
View file

@ -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