new article: hacky spell checking
Build and (eventually) deploy / Check if website builds (push) Successful in 44s Details
Build and (eventually) deploy / Deploy to Fly.io (push) Successful in 1m53s Details
Build and (eventually) deploy / Check if website builds (pull_request) Successful in 1m3s Details
Build and (eventually) deploy / Deploy to Fly.io (pull_request) Has been skipped Details

pull/7/head
Tudor Roman 2024-03-04 16:58:54 +01:00
parent 04fb733fc7
commit e1377fac84
Signed by: tudor
SSH Key Fingerprint: SHA256:3CwS9plgXBecpXImPGxDIaSktUXBejbV/zerZMqzzBk
4 changed files with 88 additions and 1 deletions

View File

@ -46,7 +46,10 @@ site.use(feed({
title: "=site.title",
description: "=site.description"
},
items: {} // use defaults
items: {
title: "=title",
description: "=excerpt",
}
}));
site.use(jsxPreact());
site.use(mdx({

View File

@ -0,0 +1,23 @@
export interface Picture {
path: string;
desc?: string;
className?: string;
}
export default function Picture({
path,
desc,
className,
}: Picture, {url}: Lume.Helpers) {
const urlBase = `~/static/pictures/${path}`;
return (
<figure className={`max-w-2xl mx-auto ${className}`}>
<a href={url(`${urlBase}.avif`)}>
<img alt={desc}
loading="lazy"
src={url(`${urlBase}.avif`)} />
</a>
{desc && <figcaption>{desc}</figcaption>}
</figure>
);
}

View File

@ -0,0 +1,61 @@
---
title: "Hacky Spell Checking for Blog Posts"
excerpt: >-
While writing another post for this blog, I came up
with a dirty hack to quickly check the spelling and grammar of my text.
date: 2024-03-04 15:27:26+01:00
category: technical
tags:
- writing
---
While writing another post for this blog, I came up
with a dirty hack to quickly check the spelling and grammar of my text.
I use [Helix][helix] as my text editor of choice, also when authoring blog posts.
It does, however, come with a major shortcoming: no support for spell checking whatsoever!
Or maybe it does support spell checking: you can configure custom language servers,
which should allow me to use [LT<sub>E</sub>X][ltex] as an
<abbr title="Language Server Protocol">LSP</abbr> interface to [LanguageTool][lt],
a pretty decent spell and grammar checker.
Jens Getreu [wrote an article about it][helix-lt], among a couple other things.
But that's too much work, and I'm very prone to [yak shaving][xkcd-success]!
## The actual hack
Set the [`contenteditable`][contenteditable] attribute on your content.
Now, your browser will check your content!
<comp.Picture path="easy-spell-checking"
desc="The hack in action. Pictured is this blog post, with a poorly-spelled
word intentionally inserted. The word has a red underline, signalling wrong spelling,
and a context menu with a suggestion is shown next to it." />
You can exploit this even further by installing extensions to alter the
spell checking behaviour of your browser, such as
the [LanguageTool browser extension][lt-ff].
Time it took to set this up: 30 seconds.
## How I use this
As you can see from the picture above, my website has a &ldquo;staging mode&rdquo;.
I can use a flag &mdash; which is descriptively called `release` &mdash;
to show content only when the website is in one of the two modes: staging and release.
To &ldquo;enable&rdquo; spell checking, I only had to change this line:
```diff
- <main class="p-2 text-lg">
+ <main class="p-2 text-lg" {{ if !release }}contenteditable{{ /if }}>
```
I gave myself a good pat on the back after discovering this!
[helix-lt]: https://blog.getreu.net/20220828-tp-note-new8/
[helix]: https://helix-editor.com/
[ltex]: https://valentjn.github.io/ltex/index.html
[lt]: https://languagetool.org/
[xkcd-success]: https://xkcd.com/349/
[contenteditable]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
[lt-ff]: https://addons.mozilla.org/en-GB/firefox/addon/languagetool/

Binary file not shown.