This project was made mainly for myself a long time ago when long-pressing an image on a mobile-browser did not consistently show you the title attribute that one normally sees on hover. I enjoyed reading XKCDs but found it difficult to read the entire comic, the hover text being an important part of the comic. That's how it started, and it eventually became a small widget for embedding XKCDs.
The idea was that people running small personal websites, like this one, could embed their favorite XKCDs within the context of some blog or article.
Here it is being used as intended to display the latest XKCD.
And here is a one of my favorites.
To use the embedder, simply add the following two lines to your page.
<link rel='stylesheet' href='https://xkcd-embedder.fahmidur.com/css/xkcd-embedder.css'/>
<script src='https://xkcd-embedder.fahmidur.com/js/xkcd-embedder.js'></script>
And then to display a particular comic, add a div into your blog post:
<div class='xkcd-embed' data-id='224'></div>
Or for the latest comic, you can use the special id `latest`.
<div class='xkcd-embed' data-id='latest'></div>
I would really like to add a full text search to this, to not only search the title and descriptions, but also to search the text within the comic. Unfortunately, the state of open-source OCR is pretty bad. A few tests against Tesseract on a few of my favorite comics reveals just how bad it is. It doesn't help that Randall's drawings will sometimes include equations. The commercial OCR options from Google strangely do not seem to be significantly better. In both cases, there are obvious errors which most humans would rule out from an understanding of context and document structure. ie "that is not 'x2', it is 'x squared'". I must be doing something wrong, it will be fun to try this on a weekend.