mirror of
https://github.com/TomHodson/tomhodson.github.com.git
synced 2025-06-26 10:01:18 +02:00
Merge branch 'main' of github.com:TomHodson/tomhodson.github.com
This commit is contained in:
Tom
commit
ecc9cd58bf
@ -7,6 +7,7 @@ You probably want to run ruby from a version manager like `chruby`, see [here](h
|
||||
- add humans.txt https://humanstxt.org/
|
||||
- fix the OG tags so that https://cards-dev.twitter.com/validator works
|
||||
- consider switching to using pandoc as a markdown renderer
|
||||
- switch so that the blog is served from the root instead of doing a redirect
|
||||
|
||||
## Notes
|
||||
[Installation](https://jekyllrb.com/docs/installation/macos/)
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
<header>
|
||||
<!-- See https://microformats.org/wiki/h-card for meaning of h-card, u-photo etc classes -->
|
||||
<header class = "h-card">
|
||||
<div class = "profile-pic-name">
|
||||
<img src="/assets/images/avatar.jpeg" class = "avatar" alt = "A picture of me.">
|
||||
<h1> Tom Hodson </h1>
|
||||
<img src="/assets/images/avatar.jpeg" class = "u-photo avatar" alt = "A picture of me.">
|
||||
<a class="p-name u-url u-uid" href="https://thomashodson.com"><h1>Tom Hodson</h1></a>
|
||||
</div>
|
||||
<p>Physicist, Programmer, Maker and Baker
|
||||
<p class="p-note">Physicist, Programmer, Maker and Baker
|
||||
<p class="professional-links">
|
||||
<a href="https://github.com/TomHodson"><img class="icon" src="/assets/icons/github.svg">GitHub</a>
|
||||
<a href="https://twitter.com/T_Hodson"><img class="icon" src="/assets/icons/twitter.svg"><s>Twitter</s></a>
|
||||
<a class="u-url" rel="me" href="https://github.com/TomHodson"><img class="icon" src="/assets/icons/github.svg">GitHub</a>
|
||||
<a class="u-url" rel="me" href="https://twitter.com/T_Hodson"><img class="icon" src="/assets/icons/twitter.svg"><s>Twitter</s></a>
|
||||
<a href="/feed.xml"><img class="icon" src="/assets/icons/rss.svg">RSS</a>
|
||||
<a rel="me" href="https://tech.lgbt/@Tomhodson"><img class="icon" src="/assets/icons/mastodon.svg">Mastodon</a>
|
||||
<a class="u-url" rel="me" href="https://tech.lgbt/@Tomhodson"><img class="icon" src="/assets/icons/mastodon.svg">Mastodon</a>
|
||||
</p>
|
||||
{% include sidebar.html%}
|
||||
|
||||
|
||||
15
_includes/klipse_scripts.html
Normal file
15
_includes/klipse_scripts.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!-- This bit gets included if the post uses Klipse editable code blocks -->
|
||||
|
||||
<!-- For styling the interactive code snippets -->
|
||||
<link rel="stylesheet" type="text/css" href="/assets/klipse/codemirror.css">
|
||||
|
||||
<script>
|
||||
window.klipse_settings = {
|
||||
selector_pyodide: '.language-klipse-python', // css selector for the html elements to be klipsified
|
||||
codemirror_options_in: {
|
||||
theme: "neo",
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<script src="/assets/klipse/klipse_plugin.min.js" defer></script>
|
||||
@ -9,4 +9,4 @@
|
||||
{{ content }}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -1,7 +1,42 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
<h1>{{ page.title }}</h1>
|
||||
<time>{{ page.date | date_to_string }}</time>
|
||||
{{ content }}
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
{% include default_head_tags.html%}
|
||||
|
||||
{% if page.klipse %}
|
||||
{% include klipse_scripts.html %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.commentid %}
|
||||
<script src="/assets/js/jquery-3.7.0.min.js"></script>
|
||||
<script src="/assets/js/mastodon.js"></script>
|
||||
<script defer>getComments("{{page.commentid}}");</script>
|
||||
{% endif %}
|
||||
|
||||
</head>
|
||||
<body>
|
||||
{% include header.html %}
|
||||
<main>
|
||||
<article class="h-entry">
|
||||
<h1 class = "p-name">{{ page.title }}</h1>
|
||||
<time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_to_string }}</time>
|
||||
<summary style="display:none" class="p-summary">{{ page.excerpt }}</summary>
|
||||
<div class="e-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
</article>
|
||||
<div id="comments" class="comments">
|
||||
<h2>Comments</h2>
|
||||
{% unless page.commentid %}
|
||||
<div class="reference">
|
||||
Comments are handled by my <a href='https://tech.lgbt/@Tomhodson'>Mastodon account</a>.
|
||||
</div>
|
||||
{% endunless %}
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
{% include default_head_tags.html%}
|
||||
|
||||
<!-- For styling the interactive code snippets -->
|
||||
<link rel="stylesheet" type="text/css" href="/assets/klipse/codemirror.css">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/klipse/neo.css">
|
||||
|
||||
|
||||
<script>
|
||||
window.klipse_settings = {
|
||||
selector_pyodide: '.language-klipse-python', // css selector for the html elements to be klipsified
|
||||
codemirror_options_in: {
|
||||
theme: "neo",
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
{% include header.html %}
|
||||
<main>
|
||||
<h1>{{ page.title }}</h1>
|
||||
<time>{{ page.date | date_to_string }}</time>
|
||||
{{ content }}
|
||||
</main>
|
||||
<script src="/assets/klipse/klipse_plugin.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -4,6 +4,7 @@ excerpt: I came across something I wanted to quickly parse that was too niche to
|
||||
layout: post
|
||||
image: /assets/blog/parsing/snippet.png
|
||||
alt: A purely illustrative screenshot of a snippet of python code with a little bit of a PEG grammar definition visible.
|
||||
commentid: 110746239432993930
|
||||
---
|
||||
|
||||
Usually when I want to parse something so that I can manipulate it in code, be it JSON, YAML, HTML, XML, whatever, there is a nice existing library to do that for me. The solution is a simple `import json` away. However if the language is a bit more niche, there maybe won't be a good parser for it available or that parser might be missing features.
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
---
|
||||
title: A little REPL in every blog post
|
||||
layout: post_klipse
|
||||
layout: post
|
||||
image:
|
||||
alt:
|
||||
klipse: True
|
||||
---
|
||||
|
||||
On someone else's [excellent personal](http://lambdafunk.com/) site I saw [Klipse](https://github.com/viebel/klipse), a little js library that lets you modify and execute code snippets in blogs. How cute!
|
||||
|
||||
21
_posts/2024-02-16-toothbrush-holder.md
Normal file
21
_posts/2024-02-16-toothbrush-holder.md
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
title: Toothbrush Shelf
|
||||
excerpt: It can be hard to find genuine everyday uses of 3D printing, but after a while you do find some.
|
||||
layout: post
|
||||
image: /assets/blog/toothbrush_shelf/spin.gif
|
||||
alt: A render of a 3D printed shelf sitting above a shaver outlet, it spins slowly.
|
||||
---
|
||||
|
||||
<figure>
|
||||
<img src="/assets/blog/toothbrush_shelf/spin.gif"/>
|
||||
<figcaption>
|
||||
</figcaption>
|
||||
|
||||
<figure>
|
||||
<img src="/assets/blog/toothbrush_shelf/crop.jpeg"/>
|
||||
<figcaption>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
h2.blogroll-title > a {
|
||||
text-decoration: none;
|
||||
h2.blogroll-title {
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
}
|
||||
33
_sass/comments.scss
Normal file
33
_sass/comments.scss
Normal file
@ -0,0 +1,33 @@
|
||||
.comments {
|
||||
.comment .avatar {
|
||||
float: left;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 16px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.reference {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.comment {
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
font-size: 16px;
|
||||
.comment {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.toot {
|
||||
padding-left: 66px;
|
||||
}
|
||||
|
||||
.author {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
@ -7,6 +7,7 @@
|
||||
@import "cv"; // the CV page
|
||||
@import "thesis"; // the thesis content
|
||||
@import "blogroll"; // the summaries of the blogposts
|
||||
@import "comments"; //the mastodon comments
|
||||
|
||||
// The syntax highlighting css
|
||||
// generated with rougify style bw > code_style_bw.scss
|
||||
@ -69,6 +70,11 @@ main :not(:is(h1,h2,h3,h4,h5,h6)) {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* increase line-height for everything except headings */
|
||||
main :is(p,h1,h2,h3,h4,h5,h6) {
|
||||
margin-block-end: 0.0em;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: #222;
|
||||
|
||||
BIN
assets/blog/toothbrush_shelf/IMG_2342.jpeg
Normal file
BIN
assets/blog/toothbrush_shelf/IMG_2342.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 MiB |
BIN
assets/blog/toothbrush_shelf/crop.jpeg
Normal file
BIN
assets/blog/toothbrush_shelf/crop.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
assets/blog/toothbrush_shelf/spin.gif
Normal file
BIN
assets/blog/toothbrush_shelf/spin.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
2
assets/js/jquery-3.7.0.min.js
vendored
Normal file
2
assets/js/jquery-3.7.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
27
assets/js/mastodon.js
Normal file
27
assets/js/mastodon.js
Normal file
@ -0,0 +1,27 @@
|
||||
function getComments(statusId) {
|
||||
$.ajax({
|
||||
url: "https://tech.lgbt/api/v1/statuses/" + statusId + "/context",
|
||||
type: "get",
|
||||
success: function(replies) {
|
||||
console.log(replies);
|
||||
replies.descendants.forEach(reply => {
|
||||
var timestamp = Date.parse(reply.created_at);
|
||||
var date = new Date(timestamp);
|
||||
var comment = "<div class='comment' id='" + reply.id + "'>";
|
||||
comment += "<img class='avatar' src='" + reply.account.avatar + "' />";
|
||||
comment += "<div class='author'><a class='displayName' href='" + reply.account.url + "'>" + reply.account.display_name + "</a> wrote at ";
|
||||
comment += "<a class='date' href='" + reply.url + "'>" + date.toDateString() + ', ' + date.toLocaleTimeString() + "</a></div>";
|
||||
comment += "<div class='toot'>" + reply.content + "</div>";
|
||||
comment += "</div>";
|
||||
if (reply.in_reply_to_id == statusId) {
|
||||
document.getElementById("comments").innerHTML = document.getElementById("comments").innerHTML + comment;
|
||||
} else {
|
||||
var selector = reply.in_reply_to_id;
|
||||
document.getElementById(selector).innerHTML = document.getElementById(selector).innerHTML + comment;
|
||||
}
|
||||
});
|
||||
var join = "<div class=\"reference\"><a href=\"https://tech.lgbt/@TomHodson/" + statusId + "\">Join the discussion on Mastodon.</a></div>"
|
||||
document.getElementById("comments").innerHTML = document.getElementById("comments").innerHTML + join;
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -4,9 +4,10 @@ title: Blog
|
||||
permalink: /blog/
|
||||
---
|
||||
{% for post in site.posts %}
|
||||
<article>
|
||||
<h2 class="blogroll-title"><a href="{{ post.url }}">{{ post.title }}</a></h2>
|
||||
<summary>{{ post.excerpt }}</summary>
|
||||
<figure class="blogroll"><img src = "{{post.image}}"></figure>
|
||||
<article class="h-entry">
|
||||
<h2 class="p-name blogroll-title"><a class="u-uid u-url" href="{{ post.url }}">{{ post.title }}</a></h2>
|
||||
<time class="dt-published" datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time>
|
||||
<summary class="p-summary">{{ post.excerpt | remove: '<p>' | remove: '</p>' }}</summary>
|
||||
<figure class="blogroll"><img class="u-photo" src = "{{post.image}}"></figure>
|
||||
</article>
|
||||
{% endfor %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user