Start loading posts from Wordpress
This commit is contained in:
Lewis Dale
parent
95d4e45ef0
commit
2430b9f3eb
@ -1,4 +1,6 @@
|
||||
module.exports = function(eleventyConfig) {
|
||||
eleventyConfig.addFilter('parseDate', dateString => new Date(dateString));
|
||||
|
||||
eleventyConfig.addFilter('dateDisplay', date => new Date(date).toLocaleDateString('en-GB', {
|
||||
"dateStyle": "short"
|
||||
}));
|
||||
|
||||
17
src/_data/posts.js
Normal file
17
src/_data/posts.js
Normal file
@ -0,0 +1,17 @@
|
||||
const wordpressPassword = process.env.WORDPRESS_PASSWORD;
|
||||
|
||||
|
||||
|
||||
module.exports = async () => {
|
||||
const response = await fetch("https://lewisdale.dev/wp-json/wp/v2/posts?per_page=100", {
|
||||
headers: {
|
||||
"Authorization": `Basic lewis:${wordpressPassword}`
|
||||
}
|
||||
});
|
||||
|
||||
const responses = await response.json();
|
||||
|
||||
console.log(JSON.stringify(responses[0], null, 2));
|
||||
|
||||
return responses;
|
||||
};
|
||||
@ -5,6 +5,9 @@
|
||||
{% if includeFA %}
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/fontawesome.css" />
|
||||
{% endif %}
|
||||
{% if includePrism %}
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/prism.css" />
|
||||
{% endif %}
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/styles.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
---
|
||||
layout: base.njk
|
||||
includePrism: true
|
||||
eleventyComputed:
|
||||
title: "{{ post.title.rendered }}"
|
||||
---
|
||||
<main class="wrapper-md stack-lg">
|
||||
<article class="stack-md">
|
||||
|
||||
3
src/assets/css/prism.css
Normal file
3
src/assets/css/prism.css
Normal file
@ -0,0 +1,3 @@
|
||||
/* PrismJS 1.29.0
|
||||
https://prismjs.com/download.html#themes=prism-twilight&languages=markup+css+clike+javascript+bash+markdown+markup-templating+nginx+rust+shell-session+twig+typescript */
|
||||
code[class*=language-],pre[class*=language-]{color:#fff;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;text-shadow:0 -.1em .2em #000;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}:not(pre)>code[class*=language-],pre[class*=language-]{background:#141414}pre[class*=language-]{border-radius:.5em;border:.3em solid #545454;box-shadow:1px 1px .5em #000 inset;margin:.5em 0;overflow:auto;padding:1em}pre[class*=language-]::-moz-selection{background:#27292a}pre[class*=language-]::selection{background:#27292a}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:hsla(0,0%,93%,.15)}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:hsla(0,0%,93%,.15)}:not(pre)>code[class*=language-]{border-radius:.3em;border:.13em solid #545454;box-shadow:1px 1px .3em -.1em #000 inset;padding:.15em .2em .05em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#777}.token.punctuation{opacity:.7}.token.namespace{opacity:.7}.token.boolean,.token.deleted,.token.number,.token.tag{color:#ce6849}.token.builtin,.token.constant,.token.keyword,.token.property,.token.selector,.token.symbol{color:#f9ed99}.language-css .token.string,.style .token.string,.token.attr-name,.token.attr-value,.token.char,.token.entity,.token.inserted,.token.operator,.token.string,.token.url,.token.variable{color:#909e6a}.token.atrule{color:#7385a5}.token.important,.token.regex{color:#e8c062}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.language-markup .token.attr-name,.language-markup .token.punctuation,.language-markup .token.tag{color:#ac885c}.token{position:relative;z-index:1}.line-highlight.line-highlight{background:hsla(0,0%,33%,.25);background:linear-gradient(to right,hsla(0,0%,33%,.1) 70%,hsla(0,0%,33%,0));border-bottom:1px dashed #545454;border-top:1px dashed #545454;margin-top:.75em;z-index:0}.line-highlight.line-highlight:before,.line-highlight.line-highlight[data-end]:after{background-color:#8693a6;color:#f4f1ef}
|
||||
@ -2,9 +2,8 @@
|
||||
title: Blog
|
||||
layout: base.njk
|
||||
pagination:
|
||||
data: collections.posts
|
||||
data: posts
|
||||
size: 5
|
||||
reverse: true
|
||||
---
|
||||
<main class="wrapper-md stack-lg">
|
||||
<h1>Blog posts</h1>
|
||||
@ -12,10 +11,10 @@ pagination:
|
||||
<ol class="stack-xl">
|
||||
{% for item in pagination.items %}
|
||||
<li class="stack-xs">
|
||||
<h2><a href="{{ item.url }}">{{ item.data.title }}</a></h2>
|
||||
<time class="block">{{ item.date | dateDisplay }}</time>
|
||||
{{ item.page.excerpt | md | safe }}
|
||||
<a href="{{ item.url }}" class="inline-block">Read more</a>
|
||||
<h2><a href="/post/{{ item.slug }}">{{ item.title.rendered }}</a></h2>
|
||||
<time class="block">{{ item.date | parseDate | dateDisplay }}</time>
|
||||
{{ item.excerpt.rendered | safe }}
|
||||
<a href="/post/{{ item.slug }}" class="inline-block">Read more</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
|
||||
11
src/blog/post.html
Normal file
11
src/blog/post.html
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
layout: post.njk
|
||||
pagination:
|
||||
data: posts
|
||||
alias: post
|
||||
size: 1
|
||||
eleventyComputed:
|
||||
permalink: "post/{{ post.slug }}/"
|
||||
---
|
||||
|
||||
{{ post.markdown | md | safe }}
|
||||
@ -1,18 +0,0 @@
|
||||
---
|
||||
title: My first post
|
||||
---
|
||||
|
||||
This is an excerpt, written at the start of the post
|
||||
|
||||
* Wait, does it not render markdown?
|
||||
* Let's find out
|
||||
|
||||
---
|
||||
|
||||
Something something something
|
||||
|
||||
## Something else
|
||||
|
||||
Some content in here
|
||||
|
||||
### A sub-subheading
|
||||
@ -1,11 +0,0 @@
|
||||
---
|
||||
title: My fourth post
|
||||
---
|
||||
|
||||
Something something something
|
||||
|
||||
## Something else
|
||||
|
||||
Some content in here
|
||||
|
||||
### A sub-subheading
|
||||
@ -1,61 +0,0 @@
|
||||
---
|
||||
layout: post
|
||||
title: Microblogging with Eleventy
|
||||
date: 2022-12-30T21:24:54.088Z
|
||||
tags:
|
||||
- posts
|
||||
- eleventy
|
||||
---
|
||||
Given the drive to move all of my content into one place and syndicate it to other networks, I decided that I'd also try out doing microblog-style posts with Eleventy. Before I could do that, I needed to add a CMS (there's no way I'm manually adding Markdown files everytime I want to post a status).
|
||||
|
||||
---
|
||||
|
||||
Once that was done, I added a new collection for Microblog posts, which are just text fields with a posting datetime - no title, or any of the other frontmatter data that I'd normally add to a full blog post.
|
||||
|
||||
|
||||
I also modified Netlify CMS to enable a max length on textarea fields - Mastodon Toots are 500 characters, so that's where I drew the line.
|
||||
|
||||
Finally, I created a new [RSS feed](https://lewisdale.dev/micro/feed.xml) for my microblog posts - this will also be important later when I want to publish to other platforms.
|
||||
|
||||
## Syndicating
|
||||
|
||||
I've already added [Webmentions](https://indieweb.org/Webmention) to my website, which allow me to send and receive certain types of interactions from other websites. These map pretty nicely to certain social media interactions, like replies, reblogs, and likes.
|
||||
|
||||
To start with, I need to be able to send out Webmentions when they're included. To do this, I use [Webmention.io](https://webmention.io), which provides me a webhook I can call. Then, I use [IFTTT](https://ifttt.com) to trigger the webhook when it detects a new RSS feed item.
|
||||
|
||||
The final step is to use [Bridgy](https://brid.gy) to handle cross-posting. This is done by including the webmention syndication URL in the post body as an invisible anchor. For cross-posting to work, I need to markup my post using [Microformats](https://indieweb.org/microformats)
|
||||
|
||||
For blog posts, this means adding `h-entry` with `e-content` and `p-name` tags. Bridgy will detect these, determine that it's an article, and cross-post just the article title and a link.
|
||||
|
||||
```twig
|
||||
<article class="h-entry">
|
||||
<h1 class="p-name">{{ title }}</h1>
|
||||
<div class="e-content">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
<div class="syndication">
|
||||
<a href="https://brid.gy/publish/mastodon"></a>
|
||||
</div>
|
||||
</article>
|
||||
```
|
||||
|
||||
For microblog posts, this is slightly different. Bridgy assumes that a post is an article if it contains a `p-name` tag, so I omit that. In it's place I include the timestamp, which is slightly more important for these:
|
||||
|
||||
{% raw %}
|
||||
```twig
|
||||
<article class="h-entry">
|
||||
<time class="dt-published">{{ date | microDate }}</time>
|
||||
<div class="flow e-content">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
<div class="syndication">
|
||||
<a href="https://brid.gy/publish/mastodon"></a>
|
||||
</div>
|
||||
</article>
|
||||
```
|
||||
{% endraw %}
|
||||
## Next steps
|
||||
|
||||
This works reasonably well - there's a fairly large delay between publishing on my site and syndicating across to different platforms. That's mostly because there are several different intermediaries that have to be triggered in turn (IFTTT -> Webhooks -> Webmention -> Brid.gy -> Mastodon). In fairly short order I'd like to replace at least some of this with my own code. I already use post-deploy Netlify functions to send ActivityPub messages, so I may as well use it for other syndication too.
|
||||
|
||||
I also want to improve some of the markup on my microblog posts, and add a proper feed to my home page. But that'll also come with a bit of a site redesign, because I'm getting bored of this one.
|
||||
@ -1,32 +0,0 @@
|
||||
---
|
||||
title: A new blog
|
||||
description: I've just finished redesigning a new blog, after not having one for a long time
|
||||
date: 2021-12-17
|
||||
---
|
||||
|
||||
It's been a long time since I've had an actively-maintained personal website/blog, but I got a spurt of inspiration after seeing a few other recently-revamped blogs. What better way to celebrate the end of the year than with... a blog?
|
||||
|
||||
My intention is to try and write a post on here relatively frequently, but we'll see how that goes as I'm quite out of practice.
|
||||
|
||||
## Tech stack
|
||||
|
||||
I wanted this website to achieve three things: be of my own design, be easy to update, and be accessible. To that end, I chose a relatively simple tech stack:
|
||||
|
||||
- [Eleventy](https://11ty.dev)
|
||||
- HTML
|
||||
- CSS
|
||||
|
||||
And that's... just about it. Eleventy gives me more than enough functionality to write simple blog posts in Markdown, convert them to HTML, and display them on a page.
|
||||
|
||||
I did start out using [Tailwind](https://tailwindcss.com), but after a little while and seeing some of the recent discourse around it, I decided I wanted to write all the styles myself from scratch. It was pretty easy to remove Tailwind from the stack, as I hadn't done too much work on it to begin with. Plus, it meant that I could get rid of PostCSS, which was giving me a headache when trying to serve both PostCSS and Eleventy at the same time.
|
||||
|
||||
I deployed the site using [Netlify](https://netlify.app). It was my first time using it, and to be honest I'm pretty impressed by how quickly I was able to get things up and running. It took maybe 3 minutes from signing up to getting a version of the site deployed (pointing the domain took longer thanks to pesky DNS propagation times).
|
||||
|
||||
## Accessibility and Performance
|
||||
|
||||
I wanted some assurance that my website would be accessible, so I regularly tested my pages with [axe DevTools](https://www.deque.com/axe/devtools/) and Lighthouse in Chrome.
|
||||
|
||||
At the time of writing, there are no accessibility issues reported by Axe or Lighthouse, so that's a win!
|
||||
|
||||
|
||||
If anybody reading this does in fact spot or experience an accessibility issue, [please send me a DM or tweet on Twitter](https://twitter.com/LewisDaleUK).
|
||||
@ -1,7 +0,0 @@
|
||||
{
|
||||
"tags": [
|
||||
"posts"
|
||||
],
|
||||
"permalink": "post/{{ title | slugify }}/",
|
||||
"layout": "post.njk"
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
---
|
||||
title: My second post
|
||||
---
|
||||
|
||||
Something something something
|
||||
|
||||
## Something else
|
||||
|
||||
Some content in here
|
||||
|
||||
### A sub-subheading
|
||||
@ -1,48 +0,0 @@
|
||||
---
|
||||
title: Solving 2048 Using A* Search
|
||||
description: One of my recent project has been to attempt to solve the game 2048 using A* Search
|
||||
date: 2014-05-23
|
||||
tags:
|
||||
- algorithms
|
||||
- archive
|
||||
---
|
||||
|
||||
One of my recent projects has been to attempt to solve the game 2048 using A* Search - it all started from a bet with my girlfriend about who could get the highest score, and I decided I’d “cheat” and just get my computer to do it for me. It didn’t work, she still managed to get to the 2048 tile first.
|
||||
|
||||
To start with, I wrote a command-line version of the 2048 game in Java - it was fairly simple, if a little unncessary, and worked well - I even had a little play of it before implementing the A* algorithm, and it was fairly fun to play. There were no real issues here, just a small amount of confusion about how to implement the “gravity” style of tile movement, but a little thought sorted that one out.
|
||||
|
||||
Then it came to actually writing the A* Search. I was lucky, in that I had a template from a previous University assignment to work from. All there really was to do was swap a few classes and methods, and change the heuristics.
|
||||
|
||||
## The Heuristic
|
||||
|
||||
The heuristic I am using at the minute is a less-than-optimal one, but it was the first one I tried. I was actually quite surprised at how effective it was.
|
||||
|
||||
```
|
||||
(0 - sum of tiles) + solution depth
|
||||
```
|
||||
|
||||
Like I say, this is not optimal, and certainly does not provide the highest-scoring solutions. But it does give fairly high scores, and certainly finds the 2048 tile - and even the 4096 tile.
|
||||
|
||||
Oher possible heuristics include:
|
||||
* (0 - score) + solution depth
|
||||
* Difference between largest tile and 2048 tile
|
||||
* Mean value of tiles
|
||||
|
||||
There are a lot of options, and I have seen some impressive implementations. I look forward to improving this further.
|
||||
|
||||
## The Pseudocode
|
||||
Here’s a snippet of pseudocode for the A* algorithm:
|
||||
|
||||
```
|
||||
While queue is not empty
|
||||
if game is solved
|
||||
print current state
|
||||
end running
|
||||
else
|
||||
get next state from queue
|
||||
add children of current state to queue
|
||||
endwhile
|
||||
```
|
||||
|
||||
## Screenshots
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
---
|
||||
title: The web is exhausting
|
||||
description: Some thoughts about using - and developing for - the web
|
||||
date: 2022-08-31
|
||||
tags:
|
||||
- meta
|
||||
---
|
||||
|
||||
I've been using the web in some form for over 20 years - granted, the early parts of that were heavily monitored because I was about 5 years old when we got dialup. But, a large part of my formative years were spent online, and it was such a different place compared to how it is today.
|
||||
|
||||
I remember spending hours on different websites, which were mostly forums dedicated to a single topic, speaking with a variety of people (although the same few names were usually present). The web felt _huge_ back then, a vast array of small communities. It feels like the total commercialisation of the web has taken that from us, though. I now visit maybe 3 websites regularly, and just endlessly, mindlessly doomscroll. I can honestly say that using the web these days is so much less exciting and fun compared to what it used to be.
|
||||
|
||||
It's not just become exhausting as a consumer, though. A lot of the modern tooling available to web developers is overwhelmingly complicated. This post came about because I considered building a small web app using WebGL and Javascript - I decided I wanted a bit of type safety, and to use one library, (Three.js). Then I looked at the number of steps required just to get Typescript working nicely with ThreeJS and gave up. It shouldn't be this hard to build web applications, I shouldn't have a development directory that regularly exceeds 1gb per project because there are thousands of dependencies.
|
||||
|
||||
It's not all doom and gloom, thankfully. There are tons of people making interesting, fun, and exciting content for the web. They're just harder to find these days. And there _are_ simple tools for building web applications (this blog is <a href="https://11ty.dev">built using one</a>), and I don't _need_ the libraries or Typescript to build apps, they're just nice to have.
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
title: Thinking about the web
|
||||
description: Mulling over how best to use this website
|
||||
date: 2022-12-28
|
||||
tags:
|
||||
- personal
|
||||
---
|
||||
|
||||
I've been seeing some good posts recently, like these ones from [Andy Bell](https://andy-bell.co.uk/bring-back-blogging/), [Chris Coyier](https://chriscoyier.net/2022/12/26/bring-back-blogging/), and [Sophie Koonin](https://localghost.dev/blog/building-a-website-like-it-s-1999-in-2022/), about using a blog as a real "base" for your place on the web, and then following the [POSSE principle](https://indieweb.org/POSSE) for everywhere else.
|
||||
|
||||
I like that idea - this is the one part of the web I have the most control over. It's already partially-federated (with some improvements coming this way in the near future). I just need to set up some more syndication tools using IFTTT, and then I think I'll be good to go.
|
||||
|
||||
I'd like to add a second post format too, for shorter-form posts that I'd normally have written for Twitter - as well as making it a bit easier to publish content. But that means getting a CMS of some description, so might take me a little while.
|
||||
@ -1,11 +0,0 @@
|
||||
---
|
||||
title: My third post
|
||||
---
|
||||
|
||||
Something something something
|
||||
|
||||
## Something else
|
||||
|
||||
Some content in here
|
||||
|
||||
### A sub-subheading
|
||||
4
src/css/exceptions/article.css
Normal file
4
src/css/exceptions/article.css
Normal file
@ -0,0 +1,4 @@
|
||||
article img {
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user