Embed icons and hopefully fix social media tags
Tom
@ -8,6 +8,8 @@ You probably want to run ruby from a version manager like `chruby`, see [here](h
|
||||
- fix the OG tags so that https://cards-dev.twitter.com/validator works
|
||||
- consider switching to using pandoc as a markdown renderer
|
||||
- setup webmentions https://aarongustafson.github.io/jekyll-webmention_io/
|
||||
- add a theme toggle button: https://whitep4nth3r.com/blog/best-light-dark-mode-theme-toggle-javascript/
|
||||
- make sure the above works with the thesis section, will probably require stripping the html tag.
|
||||
|
||||
## Validators
|
||||
- [blacklight](https://themarkup.org/blacklight)
|
||||
|
||||
@ -23,20 +23,31 @@
|
||||
{% assign image = page.social_image %}
|
||||
{% elsif page.image %}
|
||||
{% assign image = page.image %}
|
||||
{% elsif page.img %}
|
||||
{% assign image = page.img.src %}
|
||||
{% elsif page.thumbnail %}
|
||||
{% assign image = page.thumbnail %}
|
||||
{% else image = false %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.img %}
|
||||
{% assign alt = page.img.alt %}
|
||||
{% elsif page.alt %}
|
||||
{% assign alt = page.alt %}
|
||||
{% else alt = False %}
|
||||
{% endif %}
|
||||
|
||||
{% if image %}
|
||||
<!-- This tag enables pages to be featured in Google Discover as large previews
|
||||
See: https://developers.google.com/search/docs/advanced/mobile/google-discover?hl=en&visit_id=637424198370039526-3805703503&rd=1 -->
|
||||
<meta name="robots" content="max-image-preview:large">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:image" content="{{site.url}}{{page.image}}">
|
||||
<meta property="og:image" content="{{site.url}}{{page.image}}">
|
||||
{% if page.alt %} <!-- Note og:image:alt must immediately follow og:image tag -->
|
||||
<meta property="og:image:alt" content="{{page.alt | strip}}">
|
||||
<meta property="twitter:image:alt" content="{{page.alt | strip}}">
|
||||
<meta name="twitter:image" content="{{image | absolute_url}}">
|
||||
<meta property="og:image" content="{{image | absolute_url}}">
|
||||
{% if alt %} <!-- Note og:image:alt must immediately follow og:image tag -->
|
||||
<meta property="og:image:alt" content="{{alt | strip}}">
|
||||
<meta property="twitter:image:alt" content="{{alt | strip}}">
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
</div>
|
||||
<p class="p-note">Physicist, Programmer, Maker and Baker
|
||||
<p class="professional-links">
|
||||
<a href="https://github.com/TomHodson" rel="me authn" class="u-url"><img class="icon" src="/assets/icons/github.svg">GitHub</a>
|
||||
<a href="https://tech.lgbt/@Tomhodson" rel="me" class="u-url"><img class="icon" src="/assets/icons/mastodon.svg">Mastodon</a>
|
||||
<a href="/feed.xml"><img class="icon" src="/assets/icons/rss.svg">RSS</a>
|
||||
<a href="https://github.com/TomHodson" rel="me authn" class="u-url">GitHub {% include icons/github.svg %}</a>
|
||||
<a href="https://tech.lgbt/@Tomhodson" rel="me" class="u-url">Mastodon {% include icons/mastodon.svg %}</a>
|
||||
<a href="/feed.xml">RSS {% include icons/RSS.svg %}</a>
|
||||
</p>
|
||||
{% include sidebar.html%}
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 822 B After Width: | Height: | Size: 822 B |
|
Before Width: | Height: | Size: 610 B After Width: | Height: | Size: 610 B |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 508 B After Width: | Height: | Size: 508 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 602 B After Width: | Height: | Size: 602 B |
@ -1,15 +0,0 @@
|
||||
<!-- 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: "jupyter",
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<script src="/assets/klipse/klipse_plugin.min.js" defer></script>
|
||||
@ -3,10 +3,6 @@
|
||||
<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>
|
||||
|
||||
@ -7,7 +7,19 @@ image: /assets/blog/REPL/repl.png
|
||||
thumbnail: /assets/blog/REPL/thumbnail.png
|
||||
image_class: invertable
|
||||
alt: A screenshot of a small javascript widget that lets you evaluate python code. It's showing some numpy code and its evaluated output.
|
||||
klipse: True
|
||||
head: |
|
||||
<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: "jupyter",
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<script src="/assets/klipse/klipse_plugin.min.js" defer></script>
|
||||
---
|
||||
|
||||
On this excellent [personal site](http://lambdafunk.com/) I saw [Klipse](https://github.com/viebel/klipse), a little js library that lets you modify and execute code snippets in blogs. How cute!
|
||||
|
||||
@ -6,6 +6,7 @@ excerpt: |
|
||||
|
||||
image:
|
||||
thumbnail: /assets/blog/pmtiles/thumbnail.png
|
||||
alt: A small map.
|
||||
head: |
|
||||
<link rel="prefetch" href="/assets/blog/pmtiles/light.json" as="fetch">
|
||||
<link rel="stylesheet" href="/assets/css/maplibre-gl.css">
|
||||
@ -14,18 +15,29 @@ head: |
|
||||
---
|
||||
PMTiles is a new project that lets you serve vector map data from static files through the magic of HTTP range requests.
|
||||
|
||||
By following this [blog post][blog] and throwing in a bit of code from [the official examples][official_examples] I've put together this little map below. The vector data is entirely served from a static file on this server. Most interactive web maps work by constantly requesting little map images from an external server at different zoom levels. This approach uses much less data and doesn't require an external server to host all the map data.
|
||||
The vector data is entirely served from a static file on this server. Most interactive web maps work by constantly requesting little map images from an external server at different zoom levels. This approach uses much less data and doesn't require an external server to host all the map data.
|
||||
|
||||
Getting this to work was a little tricky, I mostly followed the steps from Simon Willison's post but I didn't want to use npm. As I write this I realise that this site is generated with jekyll which uses npm anyway but somehow I would like the individual posts to Just Work™ without worrying about updating libraries and npm.
|
||||
|
||||
So I grabbed `maplibre-gl.css`, `maplibre-gl.js` and `pmtiles.js`, plonked them into this site and started hacking around. I ended up mashing up the code from [Simon Willison's post][blog] and [the official examples][official_examples] to get something that worked.
|
||||
|
||||
I figured out from [this github issue][github_issue] how to grab a module version of `protomaps-themes-base` without npm. However I don't really like the styles in produces. Instead I played around a bit with the generated json styles to make something that looks a bit more like the Stamen Toner theme.
|
||||
|
||||
Looking at the source code for `protomaps-themes-base` I realise I could probably make custom themes much more easily by just swapping out the theme variables in the package.
|
||||
|
||||
Todo:
|
||||
- Figure out how to use [maputnik][maputnik] to generate styles for PMTiles.
|
||||
|
||||
[github_issue]: https://github.com/preactjs/preact/issues/1961#issuecomment-537255092
|
||||
[blog]: https://til.simonwillison.net/gis/pmtiles
|
||||
[official_examples]: https://github.com/protomaps/PMTiles/blob/main/js/examples/maplibre.html
|
||||
[maputnik]: maputnik.github.io/editor/
|
||||
|
||||
<figure id="map" style="width:100%; height:500px;"></figure>
|
||||
|
||||
<script type="text/javascript">
|
||||
<script type="module">
|
||||
// import layers from "https://www.unpkg.com/protomaps-themes-base@latest?module";
|
||||
|
||||
async function main() {
|
||||
// add the PMTiles plugin to the maplibregl global.
|
||||
let protocol = new pmtiles.Protocol();
|
||||
@ -58,6 +70,7 @@ Todo:
|
||||
}
|
||||
},
|
||||
layers: await getLayers(isDark),
|
||||
// layers: layers("static_hackney", "grayscale"),
|
||||
}
|
||||
|
||||
let map = new maplibregl.Map({
|
||||
|
||||
@ -17,51 +17,50 @@ header {
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
//a horizontal dividing line to swap in when we switch to mobile layout
|
||||
header hr {
|
||||
border:0px solid #eee;
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
}
|
||||
//a horizontal dividing line to swap in when we switch to mobile layout
|
||||
hr {
|
||||
border:0px solid #eee;
|
||||
width: 100%;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
header .profile-pic-name {
|
||||
text-align: center;
|
||||
}
|
||||
.profile-pic-name {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header .avatar {
|
||||
max-width: 175px;
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
border: 1px solid #f2f3f3;
|
||||
}
|
||||
.avatar {
|
||||
max-width: 175px;
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
border: 1px solid #f2f3f3;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
header h1, header h2 {
|
||||
font-family: $title_font_stack;
|
||||
}
|
||||
h1, h2 {
|
||||
font-family: $title_font_stack;
|
||||
}
|
||||
|
||||
header img.icon {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin-right: 0.5em;
|
||||
margin-left: 0.5em;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
p.professional-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
header p.professional-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
svg {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin-left: 0.5em;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
header p.professional-links a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
a {
|
||||
display: flex; //
|
||||
align-items: center; // Get the icons centered vertically
|
||||
justify-content: right; //Align right
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media
|
||||
|
||||
3
cv.html
@ -2,6 +2,9 @@
|
||||
layout: default
|
||||
title: "CV"
|
||||
permalink: /cv/
|
||||
img:
|
||||
src: /assets/images/avatar.jpeg
|
||||
alt: A picture of me.
|
||||
---
|
||||
<p>Welcome to my little home on the web! Take a look at my CV below
|
||||
or have a look at my <a href="/blog">blog</a>. Click any item for a little more detail.
|
||||
|
||||