Forward article :D #5

Merged
JazzyJonah merged 5 commits from forward_article into master 2024-05-06 14:15:55 -04:00
12 changed files with 572 additions and 92 deletions
Showing only changes of commit 99f3f0e283 - Show all commits

25
.helix/languages.toml Normal file
View file

@ -0,0 +1,25 @@
[[language]]
name = "grz"
scope = "scope.grz"
injection-regex = "grz"
file-types = ["grz"]
roots = []
auto-format = true
comment-token = "//"
indent = { tab-width = 4, unit = " " }
language-servers = ["grezi"]
[[grammer]]
name = "grz"
[[language]]
name = "djot"
scope = "scope.djot"
injection-regex = "dj|djot"
file-types = ["dj"]
roots = []
comment-token = "{%"
indent = { tab-width = 4, unit = " " }
[[grammar]]
name = "djot"

View file

@ -1,7 +1,13 @@
steps: steps:
- name: build - name: build
image: journal image: journal
environment:
BASE_URL: https://compute.nations.lol
CODE_THEME: emacs
HELIX_RUNTIME: /usr/lib/helix/runtime
commands: commands:
- bruin-journal-gen - bruin-journal-gen
volumes: volumes:
- /var/woodpecker:/var/woodpecker - /var/woodpecker:/var/woodpecker
- /usr/share/fonts:/usr/share/fonts
- /usr/lib/helix/runtime/:/usr/lib/helix/runtime/

BIN
assets/google_cosplay.jpg Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 B

After

Width:  |  Height:  |  Size: 58 KiB

View file

@ -1,3 +1,5 @@
`attributes`{published="2024-05-02 08:00"}
# Web-dev, and the Power of Simplicity. # Web-dev, and the Power of Simplicity.
Hi! I'm Isaac Mills, I'm the guy managing the infrastructure behind Compute! In this article, I'd like to talk about just that: the infra behind this media outlet, how it all works, and why it is the way it is. Hi! I'm Isaac Mills, I'm the guy managing the infrastructure behind Compute! In this article, I'd like to talk about just that: the infra behind this media outlet, how it all works, and why it is the way it is.
@ -45,7 +47,7 @@ Consider the following: If I'm accepting untrusted code from the public into my
Their pipeline checks if the library with your new code compiles to every platform it's compatible with, with every feature enabled. It also makes sure that your code is well-formatted, contains no conflicts of license, uses no libraries banned by the project, and contains no security advisories. The _only_ way this many checks can be done on every git commit, is through CI, GitHub Actions in egui's case. Their pipeline checks if the library with your new code compiles to every platform it's compatible with, with every feature enabled. It also makes sure that your code is well-formatted, contains no conflicts of license, uses no libraries banned by the project, and contains no security advisories. The _only_ way this many checks can be done on every git commit, is through CI, GitHub Actions in egui's case.
The way I've described CI so far has probably made it seem like the least simplest thing you could add to your project, but CI is actually _quite_ simple, and it's an excellent example of how capable of a tool you can make by just building simple, on top of simple, on top of simple. Really, CI is just shell scripting with extra steps. Despite it's inherent simplicity, CI can not only serve as a means to filter bugs out of pull requests, but it can also be a simple way to communicate to open source developers _what a project wants_ out of their code. Instead of having to read a big `CONTRIBUTORS.md` file to get an idea of that, developers can know that their code is good quality if it just passes CI. The way I've described CI so far has probably made it seem like the least simple thing you could add to your project, but CI is actually _quite_ simple, and it's an excellent example of how capable of a tool you can make by just building simple, on top of simple, on top of simple. Really, CI is just shell scripting with extra steps. Despite it's inherent simplicity, CI can serve not only as a means to filter bugs out of pull requests, but it can also be a simple way to communicate to open source developers _what a project wants_ out of their code. Instead of having to read a big `CONTRIBUTORS.md` file to get an idea of that, developers can know that their code is good quality if it just passes CI.
Fortunately, the level of CI I've described above isn't required for journalism. Our CI simply compiles our journalists' unreviewed articles, and serves them on an un-indexed (not visible on production) web page so that they and the team can preview their work before merging it. Our CI is also responsible for indexing and publishing finished articles onto our production website. Fortunately, the level of CI I've described above isn't required for journalism. Our CI simply compiles our journalists' unreviewed articles, and serves them on an un-indexed (not visible on production) web page so that they and the team can preview their work before merging it. Our CI is also responsible for indexing and publishing finished articles onto our production website.
@ -61,11 +63,11 @@ Because our CI tool is running this code, we can know which articles need compil
- Stat the changed files, which is how we know which files need to be compiled, and which files have been deleted - Stat the changed files, which is how we know which files need to be compiled, and which files have been deleted
- Run a blame on new articles, which is how we figure out who wrote them - Run a blame on new articles, which is how we figure out who wrote them
- See if we are we have changed the production branch, and index new articles if so - See if we have changed the production branch, and index new articles if so
Everything I've just described can be done in just ~400 lines of Rust. This is the effect of buidling simple on top of simple, _and making an effort to retain simplicity_ by making the most out of the simple building blocks. Everything I've described that the program can do so far can be done in just \~400 lines of Rust. This is the effect of buidling simple on top of simple, _and making an effort to retain simplicity_ by making the most out of the simple building blocks. (P.S: Our Rust code now also generates a title card image for each article, so they look better on platforms like Twitter and Discord. By using the same stradegy, I only needed to add \~230 lines to our Rust code)
![Google cosplay is not business-critical](https://programming.dev/pictrs/image/e69b09e9-3ef6-40ff-b47b-e2ba2b4b633a.png) [![Google cosplay is not business-critical](assets/google_cosplay.jpg)](https://twitter.com/garybernhardt/status/1344341213575483399)
My Rust code makes heavy use of git, a very simple yet amazing tool for adding functionality to plain text. My Rust code makes heavy use of git, a very simple yet amazing tool for adding functionality to plain text.

View file

@ -1,44 +1,65 @@
<!DOCTYPE html><!-- This site was created in Webflow. https://www.webflow.com --> <!DOCTYPE html><!-- This site was created in Webflow. https://www.webflow.com -->
<!-- Last Published: Fri Apr 05 2024 16:19:10 GMT+0000 (Coordinated Universal Time) --> <!-- Last Published: Fri Apr 05 2024 16:19:10 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="66101585e19be8199060db0a" data-wf-site="66007382143b5f99deb20223"> <html data-wf-page="66101585e19be8199060db0a" data-wf-site="66007382143b5f99deb20223" prefix="og: http://ogp.me/ns#"
xmlns:og="http://opengraphprotocol.org/schema/">
<head> <head>
<meta charset="utf-8"> <meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>{{title}}</title> <title>{{title}}</title>
<meta content="{{title}}" property="twitter:title"> <link href="/atom.xml" rel="alternate" title="Compute: Lake Braddock's Comp-Sci Journal" type="application/atom+xml">
<meta property="twitter:title" content="{{title}}">
<meta name="theme-color" content="#F6C415">
<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="/images/logo-z.png"> <meta property="og:image" content="{{base_url}}/{{branch}}/{{id}}.png">
<meta property="og:image:width" content="310"> <meta property="twitter:image" content="{{base_url}}/{{branch}}/{{id}}.png">
<meta property="og:image:height" content="310"> <meta property="og:url" content="{{base_url}}/{{branch}}/{{id}}.html">
<meta property="og:image:alt" content="The Compute logo"> <meta property="twitter:domain" content="{{domain}}">
<meta property="twitter:url" content="{{base_url}}/{{branch}}/{{id}}.html">
<meta property="article:published_time" content="{{modified_date}}">
<meta name="twitter:card" content="summary_large_image">
<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: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}}">
{% for author in authors %} {% for author in authors %}
<meta name="author" content="{{author.full_name}}">
<meta property="og:article:author:first_name" content="{{ author.full_name | split(pat=' ') | nth(n=0) }}"> <meta property="og:article:author:first_name" content="{{ author.full_name | split(pat=' ') | nth(n=0) }}">
<meta property="og:article:author:last_name" content="{{ author.full_name | split(pat=' ') | nth(n=1) }}"> <meta property="og:article:author:last_name" content="{{ author.full_name | split(pat=' ') | nth(n=1) }}">
<meta property="og:article:author:username" content="{{author.username}}"> <meta property="og:article:author:username" content="{{author.username}}">
<meta property="profile:first_name" content="{{ author.full_name | split(pat=' ') | nth(n=0) }}">
<meta property="profile:last_name" content="{{ author.full_name | split(pat=' ') | nth(n=1) }}">
<meta property="profile:username" content="{{author.username}}">
{% endfor %} {% endfor %}
<meta property="og:description" content="{{description}}">
<meta property="twitter:description" content="{{description}}">
<meta content="width=device-width, initial-scale=1" name="viewport"> <meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator"> <meta content="Webflow" name="generator">
<link href="/css/normalize.css" rel="stylesheet" type="text/css"> <link href="{{base_url}}/css/normalize.css" rel="stylesheet" type="text/css">
<link href="/css/webflow.css" rel="stylesheet" type="text/css"> <link href="{{base_url}}/css/webflow.css" rel="stylesheet" type="text/css">
<link href="/css/compute-c23f91.webflow.css" rel="stylesheet" type="text/css"> <link href="{{base_url}}/css/compute-c23f91.webflow.css" rel="stylesheet" type="text/css">
<link href="{{base_url}}/css/code-theme.css" rel="stylesheet" type="text/css">
<script <script
type="text/javascript">!function (o, c) {var n = c.documentElement, t = " w-mod-"; n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")}(window, document);</script> type="text/javascript">!function (o, c) {var n = c.documentElement, t = " w-mod-"; n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")}(window, document);</script>
<link href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon"> <link href="{{base_url}}/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="/images/webclip.png" rel="apple-touch-icon"> <link href="{{base_url}}/images/webclip.png" rel="apple-touch-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Fira+Code:wght@300..700&display=swap"
rel="stylesheet">
</head> </head>
<body> <body>
<div data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" <div data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease"
role="banner" class="w-nav"> role="banner" class="w-nav">
<div class="container-2 w-container"> <div class="container-2 w-container">
<a href="/" class="w-nav-brand"><img src="/images/logo-z.svg" loading="lazy" alt="Compute logo" height="64"></a> <a href="{{base_url}}/" class="w-nav-brand"><img src="{{base_url}}/images/logo-z.svg" loading="lazy"
alt="Compute logo" height="64"></a>
<nav role="navigation" class="w-nav-menu"> <nav role="navigation" class="w-nav-menu">
<a href="/" class="w-nav-link">Home</a> <a href="{{base_url}}/" class="w-nav-link">Home</a>
<a href="/atom" class="w-nav-link">RSS/Atom</a> <a href="{{base_url}}/atom.xml" class="w-nav-link">RSS/Atom</a>
<a href="https://discord.gg/mRHP9mSqG9" class="w-nav-link">Discord Server</a> <a href="https://discord.gg/mRHP9mSqG9" class="w-nav-link">Discord Server</a>
</nav> </nav>
<div class="w-nav-button"> <div class="w-nav-button">
@ -46,26 +67,49 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-layout-vflex flex-block-2 purple" style="align-items: flex-start;"> <div class="w-layout-vflex flex-block-2 purple" style="background-color:#552a85">
<h1 class="heading-8" style="font-size: 72px; margin-top: 20px;">{{title}}</h1> <div id="header-elements">
<div class="w-layout-hflex flex-block-3" style="margin-bottom: 10px;"> <h1 class="heading-8">{{title}}</h1>
{% for author in authors %} <div class="w-layout-hflex flex-block-3">
<img src="{{author.avatar_url}}" loading="lazy" width="32" height="32" alt="{{author.full_name}}'s Avatar" {% for author in authors %}
class="image"> <img src="{{author.avatar_url}}" loading="lazy" width="32" height="32" alt="{{author.full_name}}'s Avatar"
<div class="text-block-2">{{author.full_name}}</div> class="image">
{% endfor %} <div class="text-block-2">{{author.full_name}}</div>
{% endfor %}
</div>
<p class="text-block-2" style="font-size: 16px;margin: 0;">
{{read_time}} minute read · Published: {{published}}
</p>
</div> </div>
<p style="margin-left: 20px;color: white;font-size: 16px">{{published}}</p>
</div> </div>
<article>{{body}}</article> <article class="content">{{body}}</article>
<hr> <hr>
<a href="/"> <center>
<h3 style="margin-left: 20px;min-height:200px">Read more from Compute</h3> <a style="text-decoration: none;" href="https://listmonk.nations.lol/subscription/form">
</a> <h3 style="font-size: 24px; color: grey;">Get Notified of new articles!</h3>
</a>
<a style="vertical-align: text-bottom;" href="https://listmonk.nations.lol/subscription/form"><svg
xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"
style="vertical-align: text-bottom;">
<path style="fill: grey;"
d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z" />
</svg></a>
<a href="http://compute.nations.lol/atom.xml" style="vertical-align: text-bottom;"><svg
xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"
style="vertical-align: text-bottom;">
<path style="fill: grey;"
d="M200-120q-33 0-56.5-23.5T120-200q0-33 23.5-56.5T200-280q33 0 56.5 23.5T280-200q0 33-23.5 56.5T200-120Zm480 0q0-117-44-218.5T516-516q-76-76-177.5-120T120-680v-120q142 0 265 53t216 146q93 93 146 216t53 265H680Zm-240 0q0-67-25-124.5T346-346q-44-44-101.5-69T120-440v-120q92 0 171.5 34.5T431-431q60 60 94.5 139.5T560-120H440Z" />
</svg></a>
<a href="{{base_url}}/">
<h3 style="min-height:200px">Read more from Compute</h3>
</a>
</center>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=66007382143b5f99deb20223" <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=66007382143b5f99deb20223"
type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script src="/js/webflow.js" type="text/javascript"></script> <script src="{{base_url}}/js/webflow.js" type="text/javascript"></script>
<script src="{{base_url}}/js/code_copy.js" type="text/javascript"></script>
</body> </body>
</html> </html>

View file

@ -1 +1 @@
../assets ../assets/

View file

@ -0,0 +1,273 @@
.content code .a {
color: #483D8B;
}
.content code .b {
color: #B22222;
}
.content code .c {
color: #008B8B;
}
.content code .d {
color: #483D8B;
}
.content code .e {
color: #228B22;
}
.content code .f {
text-decoration-color: #FF0000;
text-decoration: underline wavy;
}
.content code .g {
text-decoration-color: #008B8B;
text-decoration: underline wavy;
}
.content code .h {
text-decoration-color: #228B22;
text-decoration: underline wavy;
}
.content code .i {
text-decoration-color: #FF8C00;
text-decoration: underline wavy;
}
.content code .j {
color: #EE9A00;
}
.content code .k {
color: #EE0000;
}
.content code .l {
color: #00CD00;
}
.content code .m {
color: #FF0000;
}
.content code .n {
color: #0000FF;
}
.content code .o {
color: #483D8B;
}
.content code .p {
color: #0000FF;
}
.content code .q {
color: #483D8B;
}
.content code .r {
color: #483D8B;
}
.content code .s {
color: #008B8B;
}
.content code .t {
color: #228B22;
}
.content code .u {
color: #A020F0;
}
.content code .v {
color: #483D8B;
}
.content code .w {
font-weight: bold;
}
.content code .x {
color: #FFD700;
font-weight: bold;
}
.content code .y {
color: #0000FF;
}
.content code .z {
color: #A0522D;
}
.content code .aa {
color: #A020F0;
}
.content code .ab {
color: #B22222;
}
.content code .ac {
color: #228B22;
}
.content code .ad {
color: #008B8B;
}
.content code .ae {
color: #999999;
}
.content code .af {
font-style: italic;
}
.content code .ag {
color: #3A5FCD;
}
.content code .ah {
color: #3A5FCD;
text-decoration: underline;
}
.content code .ai {
color: #000000;
}
.content code .aj {
color: #999999;
}
.content code .ak {
color: #008B8B;
}
.content code .al {
color: #008B8B;
}
.content code .am {
}
.content code .an {
color: #008B8B;
}
.content code .ao {
color: #008B8B;
}
.content code .ap {
color: #A020F0;
}
.content code .aq {
color: #000000;
}
.content code .ar {
color: #0000FF;
}
.content code .as {
color: #8B2252;
}
.content code .at {
color: #8B2252;
font-weight: bold;
}
.content code .au {
color: #0000FF;
}
.content code .av {
color: #228B22;
}
.content code .aw {
color: #483D8B;
}
.content pre {
border: 1px solid #999;
color: #000000;
background-color: #FFFFFF;
}
.content code .ay {
color: #000000;
background-color: #FFFFFF;
}
.content code .az {
color: #5C5C5C;
background-color: #E5E5E5;
text-decoration: underline;
}
.content code .ba {
color: #000000;
background-color: #FCFCFC;
}
.content code .bb {
background-color: #BFBFBF;
}
.content code .bc {
color: #FFFFFF;
background-color: #B3B3B3;
}
.content code .bd {
color: #FF0000;
background-color: #000000;
}
.content code .be {
color: #000000;
background-color: #40E0D0;
}
.content code .bf {
color: #FFFFFF;
background-color: #000000;
}
.content code .bg {
color: #FFFFFF;
background-color: #000000;
}
.content code .bh {
background-color: #B4EEB4;
}
.content code .bi {
background-color: #B4EEB4;
}
.content code .bj {
color: #8B0000;
background-color: #FFF8DC;
}
.content code .bk {
color: #999999;
}
.content code .bl {
color: #CCCCCC;
}
.content code .bm {
color: #000000;
background-color: #FFF8DC;
}
.content code .bn {
color: #8B0000;
background-color: #ADD8E6;
}
.content code .bo {
color: #000000;
background-color: #F7F7F7;
}
.content code .bp {
color: #000000;
background-color: #F7F7F7;
}
.content code .bq {
background-color: #FFEC8B;
}
.content code .br {
background-color: #EEDC82;
}
.content code .bs {
color: #000000;
background-color: #BFBFBF;
}
.content code .bt {
color: #333333;
background-color: #E5E5E5;
}
.content pre code {
display: block;
padding: 20px;
width: fit-content;
color: #000000;
}
.content code .bv {
color: #000000;
background-color: #B4EEB4;
}
.content code .bw {
color: #BFBFBF;
}
.content code .bx {
background-color: #F2F2F2;
}
.content code .by {
}
.content code .bz {
color: #000000;
}
.content code .ca {
color: #A0522D;
}
.content code .cb {
color: #483D8B;
}
.content code .cc {
color: #A0522D;
}
.content code .cd {
color: #FF8C00;
}

View file

@ -1,12 +1,15 @@
:root { :root {
--white: white; --white: white;
--black: black; --black: black;
--gap: calc(1rem * 12.5 / 16);
} }
.w-layout-vflex { body {
flex-direction: column; font-family: 'Arimo', 'Arial', sans-serif;
align-items: flex-start; }
display: flex;
code {
font-family: 'Fira Code', monospace;
} }
.w-layout-blockcontainer { .w-layout-blockcontainer {
@ -44,7 +47,38 @@
} }
article { article {
margin: 20px; display: flex;
flex-direction: column;
align-items: center;
margin: 25px;
gap: var(--gap);
}
.content section {
display: flex;
flex-direction: column;
gap: var(--gap);
word-wrap: break-word;
margin-top: calc(2 * var(--gap));
margin-bottom: 0;
}
.content img {
margin: var(--gap) 0;
}
.content ul,
.content ol {
display: flex;
flex-direction: column;
padding: 0 0 0 2em;
}
.content * {
line-height: 1.5;
margin: 0 0;
padding: 0 0;
} }
h1 { h1 {
@ -54,8 +88,6 @@ h1 {
} }
p { p {
margin-bottom: 10px;
margin-top: 10px;
font-size: 18px; font-size: 18px;
} }
@ -97,12 +129,10 @@ li {
} }
.flex-block-2.purple { .flex-block-2.purple {
color: #333;
background-color: #552a85;
flex-flow: column;
justify-content: space-around;
padding-top: 0; padding-top: 0;
align-items: center;
display: flex; display: flex;
background-color: #552a85;
overflow-x: hidden; overflow-x: hidden;
} }
@ -177,9 +207,8 @@ li {
background-image: linear-gradient(90deg, #f6c415, rgba(246, 196, 21, .3)); background-image: linear-gradient(90deg, #f6c415, rgba(246, 196, 21, .3));
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
margin-bottom: 20px; font-size: 64px;
margin-left: 20px; margin-bottom: 8px;
margin-right: 20px;
} }
.image { .image {
@ -187,18 +216,32 @@ li {
background-clip: border-box; background-clip: border-box;
border-radius: 50%; border-radius: 50%;
margin-bottom: 0; margin-bottom: 0;
margin-left: 20px;
margin-right: 10px; margin-right: 10px;
} }
.flex-block-3 { .flex-block-3 {
align-items: center; align-items: center;
margin-bottom: 20px;
} }
.text-block-2 { .text-block-2 {
color: #fff; color: white;
font-size: 18px; font-size: 18px;
margin-right: 20px;
}
article>* {
width: 96vw;
max-width: 940px;
}
#header-elements {
max-width: 940px;
display: flex;
justify-content: space-around;
flex-direction: column;
margin: 20px;
align-items: flex-start;
gap: 14px;
} }
@media screen and (max-width: 991px) { @media screen and (max-width: 991px) {
@ -207,13 +250,16 @@ li {
min-height: 0%; min-height: 0%;
} }
.grid { article>* {
grid-template-columns: 1fr; max-width: min(575px, 85vw);
} }
.heading-8 { #header-elements {
margin-bottom: 20px; max-width: 575px;
font-size: 64px; }
.grid {
grid-template-columns: 1fr;
} }
} }
@ -235,10 +281,6 @@ li {
.heading-3.unwrapped-compute.compute-gradiant { .heading-3.unwrapped-compute.compute-gradiant {
display: none; display: none;
} }
.heading-8 {
font-size: 64px;
}
} }
@media screen and (max-width: 479px) { @media screen and (max-width: 479px) {

32
templates/js/code_copy.js Normal file
View file

@ -0,0 +1,32 @@
const copyButtonLabel = "Copy Code";
// use a class selector if available
if (navigator.clipboard) {
let blocks = document.querySelectorAll("pre");
blocks.forEach((block) => {
// only add button if browser supports Clipboard API
let button = document.createElement("button");
button.innerText = copyButtonLabel;
block.parentNode.insertBefore(button, block);
button.addEventListener("click", async (event) => {
await copyCode(block, event.target);
});
});
}
async function copyCode(block, button) {
let code = block.querySelector("code");
let text = code.innerText;
await navigator.clipboard.writeText(text);
// visual feedback that task is completed
button.innerText = "Code Copied";
setTimeout(() => {
button.innerText = copyButtonLabel;
}, 700);
}

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.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.61131147"
inkscape:cx="184.03057"
inkscape:cy="83.427193"
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 154.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 224.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.26624,-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 63.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 84.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>

Before

Width:  |  Height:  |  Size: 4.5 KiB

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 = 425.15115
y = 8.0
width = 736.84885
height = 594.60768
value = "{{title}}"
font = "Noto Sans"
bold = true

View file

@ -1,32 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<meta content="{{title}}" property="twitter:title">
<meta property="og:title" content="{{title}}">
<meta property="og:type" content="article">
<meta property="og:image" content="/images/logo-z.png">
<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: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}}">
{% for author in authors %}
<meta property="og:article:author:first_name" content="{{ author.full_name | split(pat=' ') | nth(n=0) }}">
<meta property="og:article:author:last_name" content="{{ author.full_name | split(pat=' ') | nth(n=1) }}">
<meta property="og:article:author:username" content="{{author.username}}">
{% endfor %}
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="/images/webclip.png" rel="apple-touch-icon">
</head>
<body>
<a href="{{id}}.html">View full webpage</a>
{{body}}
</body>
</html>