tom/personal_site
1
0
Fork 0
mirror of https://github.com/TomHodson/tomhodson.github.com.git synced 2025-06-26 10:01:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

add comments

Browse Source
This commit is contained in:
Tom Hodson 2023-07-30 09:06:16 +01:00
parent 7014af407b
commit 7797b0695e
11 changed files with 124 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -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/ - add humans.txt https://humanstxt.org/
- fix the OG tags so that https://cards-dev.twitter.com/validator works - fix the OG tags so that https://cards-dev.twitter.com/validator works
- consider switching to using pandoc as a markdown renderer - 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 ## Notes
[Installation](https://jekyllrb.com/docs/installation/macos/) [Installation](https://jekyllrb.com/docs/installation/macos/)

15
_includes/klipse_scripts.html Normal file
View 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>

2
_layouts/default.html
View File

@ -9,4 +9,4 @@
{{ content }} {{ content }}
</main> </main>
</body> </body>
</html> </html>

52
_layouts/post.html
View File

@ -1,12 +1,42 @@
--- <!doctype html>
layout: default <html>
--- <head>
<article class="h-entry"> {% include default_head_tags.html%}
<h1 class = "p-name">{{ page.title }}</h1>
<time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_to_string }}</time> {% if page.klipse %}
<summary style="display:none" class="p-summary">{{ page.excerpt }}</summary> {% include klipse_scripts.html %}
<div class="e-content"> {% endif %}
{{ content }}
</div> {% if page.commentid %}
</article> <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>

33
_layouts/post_klipse.html
View File

@ -1,33 +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">
<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>
<article class="h-entry">
<h1 class = "p-name">{{ page.title }}</h1>
<time class="dt-published">{{ page.date | date_to_string }}</time>
<summary style="display:none" class="p-summary">{{ page.excerpt }}</summary>
<div class="e-content">
{{ content }}
</div>
</article>
</main>
<script src="/assets/klipse/klipse_plugin.min.js"></script>
</body>
</html>

1
_posts/2023-07-20-writing_grammars_is_fun.md
View File

@ -4,6 +4,7 @@ excerpt: I came across something I wanted to quickly parse that was too niche to
layout: post layout: post
image: /assets/blog/parsing/snippet.png 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. 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. 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.

3
_posts/2023-07-25-interactive-code-snippets.md
View File

@ -1,8 +1,9 @@
--- ---
title: A little REPL in every blog post title: A little REPL in every blog post
layout: post_klipse layout: post
image: image:
alt: 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! 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!

33
_sass/comments.scss Normal file
View 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;
}
}

1
_sass/main.scss
View File

@ -7,6 +7,7 @@
@import "cv"; // the CV page @import "cv"; // the CV page
@import "thesis"; // the thesis content @import "thesis"; // the thesis content
@import "blogroll"; // the summaries of the blogposts @import "blogroll"; // the summaries of the blogposts
@import "comments"; //the mastodon comments
// The syntax highlighting css // The syntax highlighting css
// generated with rougify style bw > code_style_bw.scss // generated with rougify style bw > code_style_bw.scss

2
assets/js/jquery-3.7.0.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

27
assets/js/mastodon.js Normal file
View 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;
}
});
};