Modify styling. Add github-paint post.

Author: tbrockman

_posts/2024-01-29-content-script-messaging.md

@@ -4,7 +4,7 @@ title: message passing and `MAIN` world content scripts ✉️
 date: 2024-01-29 09:32:00 -0400
 author: Theodore Brockman
 categories: chrome extensions content-scripts message-passing
-excerpt: Making up for a lack of browser extension documentation... again.
+excerpt: Making up for a lack of browser extension documentation (again!).
 thumbnail: /assets/img/hello_world_thumbnail.png
 ---
 
@@ -14,7 +14,7 @@ You would need the ability to intercept the request before it happens, modify th
 
 There's a few ways you could go about doing this, but one of the more straight-forward ones is by using a [content script](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts).
 
-# content scripts
+## content scripts
 
 Depending on the browser (Firefox is a bit [more security conscious](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts)), content scripts can directly interact with existing webpage Javascript objects (with the converse being true as well), and modify them as desired.
 
@@ -118,7 +118,7 @@ Pretty neat, right? But what if we were feeling bad and wanted to extend our lit
 
 This is where [message passing](https://developer.chrome.com/docs/extensions/develop/concepts/messaging) comes in.
 
-# message passing
+## message passing
 
 If you've worked in browser extensions before, you're likely already familiar with sending messages between the background script and the popup, maybe even communicating with content scripts injected into the default [`ISOLATED`](https://developer.chrome.com/docs/extensions/reference/api/scripting#type-ExecutionWorld) world, but it turns out that once your code exists in the same realm as other webpage Javascript, you can't send messages as easily. 
 
@@ -198,7 +198,7 @@ _oh poop._
 
 This is because the content script only has access to a limited subset of the `chrome.runtime` API as a result of being injected into the `MAIN` world. While at first frustrating, if you stop to think about it, it makes sense: Content scripts injected into the `MAIN` world are now running in the same context as the webpage, and the webpage (or other content scripts) can't be trusted. Naturally the browser requires a few more precautions to help make sure you understand [the full implications of what you're doing](https://developer.chrome.com/docs/extensions/develop/concepts/messaging#content-scripts-are-less-trustworthy).
 
-# externally connectable
+## externally connectable
 
 Instead, we need to treat our own content script as an [*external webpage*](https://developer.chrome.com/docs/extensions/develop/concepts/messaging#external-webpage), since it can no longer be considered a trusted part of the extension. This means that we need to allow connections from external webpages in our `manifest.json`:
 
@@ -260,7 +260,7 @@ _it's toggled_
 
 Note that after making your extension externally connectable, you should be *very* careful about how you process information you receive, and what information you send, to untrusted external connections--even *if* the recipient is trusted, there's no guarantee other code won't be spying.
 
-# bonus: using [`func`](https://developer.chrome.com/docs/extensions/reference/api/scripting#method-ScriptInjection-func)
+## bonus: using [`func`](https://developer.chrome.com/docs/extensions/reference/api/scripting#method-ScriptInjection-func)
 
 You may have noticed earlier that we had to hardcode our extension ID in our content script, which isn't very portable (it'll be different each time someone develops locally *and* when it's published in production) and will need to be manually updated. You may find other reasons that you want to provide context directly to your content script from your background script.
 

_posts/2024-06-28-github-paint.md

@@ -0,0 +1,40 @@
+---
+layout: post
+title: github paint 🎨
+date: 2024-06-28
+author: Theodore Brockman
+categories: project github action python cli
+excerpt: A GitHub Action to help your GitHub profile *really* stand out.
+---
+
+A few years ago I encountered the GitHub profile of someone who created a fake commit history in GitHub in order to write their username in their GitHub contribution graph:
+
+> &lt;imagine a cool picture of it here&gt; <sup>because <sup>i <sup>lost<sup>it🥺</sup></sup></sup></sup>
+
+Since then, I've always had it in the back of my mind as something I'd like to take a stab at. Primarily for the sake of solving an interesting problem, but also to fuck with recruiters who believe contribution activity strongly correlates programming ability (*said with chip on shoulder as someone required to use a separate GitHub account for work*).
+
+Since taking a burnout-induced leave-of-absence, I've had some time to explore the problem, which has led to the creation of...
+
+## [`tbrockman/github-paint`](https://github.com/tbrockman/github-paint)
+
+which is a GitHub Action which\-\-given a string, a GitHub API token, and any optional parameters\-\-performs the necessary calculations to create the right number of commits on the right dates to render something like the following in your GitHub profile:
+
+![the text "theo.lol" written in tbrockman's contribution graph](/assets/img/github-paint/example.png)
+
+Since it's a GitHub Action, you can also configure it to run periodically such that your contribution graph always shows the same text as time goes on.
+
+## how it works
+
+The whole thing is a Python [Typer-CLI](https://typer.tiangolo.com/) that primarily makes calls to [`gh`](https://cli.github.com/) and [`git`](https://git-scm.com/), orchestrating the following:
+
+1. First, we create a window where `x = number_of_weeks_in_timeframe` and `y = 7`.
+1. Then, we take our (potentially repeated) text, determine its size given the font (and the dimensions of each glyph used), and position it within the window (given specified padding and alignment).
+1. Then, we map each pixel in the window to its corresponding date. 
+1. Then, retrieving the users existing contribution activity for each date, we determine (given [some secret sauce](https://stackoverflow.com/a/78686095/23271846) on how commit activity correlates to pixel color) how many additional commits we need on that day. 
+    * If we actually need *fewer*, we can handle this by adding more commits to *other* days\-\-assuming our target isn't zero commits.
+1. Then, after initializing a fresh `git` repository, for each day (in the appropriate order\-\-though this doesn't seem to matter to GitHub), we forge the necessary number of commits on each date (since `git` allows setting arbitrary commit dates).
+1. Finally, push the new repository and history (deleting the old one if it exists), and wait a bit for GitHub to render our shiny new contribution graph.
+
+So far, it seems to work pretty well, but it's not *super* well-tested, so if you run into issues feel free to create a pull request: [https://github.com/tbrockman/github-paint](https://github.com/tbrockman/github-paint).
+
+hope you like it!

_sass/blog.scss

@@ -87,7 +87,7 @@ body {
 
 .blog-post-title {
     font-size: 2em;
-    font-family: Arial;
+    font-weight: bold;
     overflow-y: hidden;
     overflow: hidden;
     word-break: break-word;
@@ -111,6 +111,10 @@ body {
     color: #fff;
 }
 
+.blog-post-excerpt>p {
+    margin: 0;
+}
+
 .blog-list li h2 {
     margin-top: 0;
 }

_sass/common.scss

@@ -5,29 +5,48 @@ $breakpoint-navbar: 1400px;
 $breakpoint-mobile: 800px;
 
 @keyframes nav-slide-in-from-right {
-    0% { left: 100vw; }
-    100% { left: 30vw; }
+    0% {
+        left: 100vw;
+    }
+
+    100% {
+        left: 30vw;
+    }
 }
 
 @keyframes nav-slide-out-from-left {
-    0% { left: 30vw; }
-    100% { left: 100vw; }
+    0% {
+        left: 30vw;
+    }
+
+    100% {
+        left: 100vw;
+    }
 }
 
 @keyframes slide-left-make-way-for-nav {
-    0% { left: 0; }
-    100% { left: -70vw; }
-}
+    0% {
+        left: 0;
+    }
 
-@keyframes slide-right-close-nav {
-    0% { left: -70vw; position:absolute; }
-    100% { left: 0}
+    100% {
+        left: -70vw;
+    }
 }
 
-@media(max-width: $breakpoint-mobile) {
+@keyframes slide-right-close-nav {
+    0% {
+        left: -70vw;
+        position: absolute;
+    }
 
+    100% {
+        left: 0
+    }
 }
 
+@media(max-width: $breakpoint-mobile) {}
+
 @media(max-width: $breakpoint-navbar) {
 
     // div.page-container {
@@ -58,19 +77,22 @@ body {
     height: 100%;
     display: flex;
     flex-direction: column;
-    font-size: 1vw;
     color: #fff;
+    text-transform: lowercase;
+}
+
+code {
+    text-transform: none;
 }
 
 .page-container {
     box-sizing: border-box;
     width: 100%;
-    max-width: 124ch;
+    max-width: 120ch;
     margin: 0 auto;
     padding: 0em 12em 8em;
     z-index: 1;
     flex: 1;
-    font-size: 1rem;
 }
 
 a {
@@ -95,8 +117,6 @@ a.fa:hover {
 }
 
 h1 {
-    font-family: "Montserrat", sans-serif;
-    font-weight: normal;
     color: #fe5858;
     font-size: 6em;
 }

_sass/post.scss

@@ -84,22 +84,18 @@ h2 {
 	color: $color-primary;
 	margin-top: 1em;
 	font-size: 3em;
-	font-weight: normal;
-	font-family: 'Montserrat', sans-serif;
 	word-break: break-word;
 }
 
 h3 {
 	color: $color-primary;
 	margin-top: 1em;
 	font-size: 2rem;
-	font-weight: normal;
-	font-family: 'Montserrat', sans-serif;
 	word-break: break-word;
 }
 
 img {
-	margin: 0 auto 4em;
+	margin: 0 auto 2em;
 	display: flex;
 	max-width: -webkit-fill-available;
 	max-width: -moz-available;
@@ -109,8 +105,8 @@ img {
 }
 
 blockquote {
-	margin: 4em 0;
-	padding: 2em 4em;
+	margin: 2em 0 3em;
+	padding: 0 4em;
 	color: #fff;
 	background: $hover-background-color;
 	box-shadow: $hover-box-shadow;
@@ -159,15 +155,12 @@ p>strong>code {
 }
 
 .post-header h1 {
-	font-family: 'Montserrat', sans-serif;
-	font-weight: normal;
 	margin: 0;
 	margin-bottom: 0.25em;
 	word-break: break-word;
 }
 
 .post-header h4 {
-	font-weight: normal;
 	margin: 0;
 	color: #252525;
 	font-size: 1.25em;
@@ -207,7 +200,6 @@ p>strong>code {
 
 a:has(img)+em,
 img+em {
-	margin-top: -2rem;
 	text-align: center;
 	font-size: 1rem;
 	display: block;

assets/img/github-paint/example.png

@@ -11,7 +11,7 @@
         <div>
           <div class='blog-post-preview'>
             <div class='blog-post-title'>{{post.title | markdownify | remove: '<p>' | remove: '</p>'}}</div>
-            <div class='blog-post-excerpt'>{{ post.excerpt }}</div>
+            <div class='blog-post-excerpt'>{{ post.excerpt | markdownify }}</div>
           </div>
         </div>
       </a>