binyamin / binyam.in

:house: My personal website

Shalom, I'm Binyamin

I'm a college student, web developer, and Jew from Baltimore, Maryland. I'd like to expand my network, so please get in touch.

🥇 I'm proud of my personal website
♊ There's this new type of web/internet/thingy named Gemini, and I'm making a browser for it.
❓ Not sure what to put here. I'm pretty boring.

binyam.in's Issues

Add roadmap page

• https://marcjenkins.co.uk/roadmap/
• https://daveredfern.com/roadmap/

[mobile] clicking on menu button doesn't hide navigation menu

This is not expected behavior.

Only add webmentions to post frontmatter

Currently, the webmentions are in the frontmatter of each page.
I could change this with Computed data. Eg, only computer webmentions for the posts directory.

Display webmention likes separately

• (ref) https://sia.codes/posts/webmentions-eleventy-in-depth/

Small issue with code from blog post

Hey, Binyamin. I read your article Filter Posts by tag and implemented the search by data-tags feature on my site. It works great!

I did notice one minor issue. When attempting to use filter on the NodeList from querySelectorAll, it throws an error that posts is not a generic array and doesn't have access to array methods like filter (since its a NodeList).

const posts = document.querySelectorAll(".post");
...
let postsNoTag = posts.filter(l => {
        return JSON.parse(l.dataset.tags).includes(tag) === false;
    });

Solution 1:

Convert the posts NodeList (which is iterable) into an array

const posts = [...document.querySelectorAll(".post")];

Solution 2:

Apply filter on the static results of the posts NodeList

let postsNoTag = Array.prototype.filter.call(posts, function(l) {
        return JSON.parse(l.dataset.tags).includes(tag) === false;
    });

Solution 3:

Use the good ole Array.from() method.

const posts = Array.from(document.querySelectorAll(".post");

Maybe something to note in the article, or just update to one of the above solutions. Let me know your thoughts @binyamin

post-process html

use parse5 to post-process html (deal with external link rels, heading anchors, etc.)

hamburger menu "not working" on ios

Via @kevquirk and @[email protected] on fosstodon.

post titles don't show

It's because the variable meta.isPost isn't being calculated for posts. So the code to create the title is breaking.

Migrate to eleventy (11ty)

Why?
I'm a JavaScript guy. My plugins should be in JavaScript.

https://11ty.dev

Add animation

• Good JS library (w/t physics-based stuff) - https://github.com/Popmotion/popmotion

search functionality

A searchbar would improve the ability for users to find things.

Requirements

• UI implementation
• search index (generated when site is built)
• search functionality (actual JS)

Possible Solution
From Dawid Gawel at Jamstack Conf (video)
When the site is build, create a search index with elasticlunr, export it as JSON, and save it to /functions. Use Netlify functions or Cloudflare workers to expose a search endpoint.

Support Bi-directional links

• wikilinks syntax - https://www.npmjs.com/package/markdown-it-wikilinks

Send webmentions automatically

Send, not receive. I already do receive webmentions.

• https://jamesmead.org/blog/2020-10-13-sending-webmentions-from-a-static-website

use article excerpt as default og/twitter description

Create categorized rss feeds

• code
• writing
• index (all)

webmentions should match current design specs

fetch & display backlinks

Add Colophon page

Add a page which describes how the site was built.
Examples:

• https://ericwbailey.design/colophon.html
• https://www.richardsprague.com/colophon/
• https://nhs.io/colophon/
• https://jimramsden.com/colophon
• https://boffosocko.com/about/colophon/

use escaped html in rss feed

Currently, the rss feed descriptions for each item contain simply text. Not good for parsing.

Add url embeds widgets

• Microlink has a free api for this. See https://api.microlink.io/?url=https://github.com/binyamin/binyam.in. Note that microlink won't scale well, because you only get 50 requests per day on the free tier. Even if I'm generating on build, I could run into request limits down the road.
• Use some tool to pull data on build. Microlink does a lot of parsing, but I probably just need one or more of OpenGraph, Twitter, oEmbed, and JSON LD (structured data). In that order, probably.

Generate twitter images

animate logo on hover

[mobile] deal with aria-expanded regarding nav menu

deal with non-existent pages

In notes.

Pass lighthouse audits

binyam.in/.lighthouserc.yml

Lines 17 to 22 in 044d3ea

	# Disabled until fixed by PR
	cumulative-layout-shift: "off"
	render-blocking-resources: "off"
	unsized-images: "off"
	uses-rel-preconnect: "off"
	color-contrast: "off"

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @binyamin/data-cache to v2
• Update dependency markdown-it to v14
• Update dependency markdown-it-footnote to v4
• Update dependency title-case to v4
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• Update dependency del to v7

Detected dependencies

npm

package.json

• @11ty/eleventy ^2.0.1
• @binyamin/data-cache ^1.1.0
• @binyamin/markdown-it-wikilinks ^1.1.1
• dayjs ^1.11.10
• del ^6.1.1
• highlight.js ^11.9.0
• markdown-it ^13.0.2
• markdown-it-anchor ^8.6.7
• markdown-it-attrs ^4.1.6
• markdown-it-external-anchor ^1.0.0
• markdown-it-footnote ^3.0.3
• node-fetch ^3.3.2
• title-case ^3.0.3

---

• Check this box to trigger a request for Renovate to run again on this repository

move to nunjucks

in print view, internal links have no context

See https://binyam.in/blog/my-year-as-a-moderator/ in print view. The text "tl;dr" makes no sense. It just says tl;dr", but there's no context as to what the "tl;dr" is, or where that might be located. There's no indication that it refers to the summary below.

filter publishable notes by frontmatter

Only publish notes which have the publish frontmatter key set to true.

Also, just clone the notes into a temporary directory, parse the frontmatter, and copy the appropriate files.