{
  "$type": "site.standard.document",
  "canonicalUrl": "https://johnnyreilly.com/posts/blog-archive-for-docusaurus",
  "description": "Learn how to add a blog archive to your Docusaurus blog and browse through historic posts. Follow the articles steps to implement.",
  "path": "/posts/blog-archive-for-docusaurus",
  "publishedAt": "2021-05-01T00:00:00.000Z",
  "site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
  "tags": [
    "docusaurus",
    "webpack"
  ],
  "textContent": "Docusaurus doesn't ship with \"blog archive\" functionality. By which I mean, something that allows you to look at an overview of your historic blog posts. It turns out it is fairly straightforward to implement your own. This post does just that.\n\nUpdated 2021-09-01\n\nAs of v2.0.0-beta.6, Docusauras _does_ ship with blog archive functionality that lives at the archive route. This is down to the work of Gabriel Csapo in this PR.\n\nIf you'd like to know how to build your own, read on... But you may not need to!\n\n\n\nBlogger's blog archive\n\nI recently went through the exercise of migrating my blog from Blogger to Docusaurus. I found that Docusaurus was a tremendous platform upon which to build a blog, but it was missing a feature from Blogger that I valued highly; the blog archive:\n\nThe blog archive is a way by which you can browse through your historic blog posts. A place where you can see all that you've written and when. I find this very helpful. I didn't really want to make the jump without having something like that around.\n\nHandrolling a Docusaurus blog archive\n\nLet's create our own blog archive in the land of the Docusaurus.\n\nWe'll create a new page under the pages directory called blog-archive.js and we'll add a link to it in our docusaurus.config.js:\n\nObtaining the blog data\n\nThis page will be powered by webpack's require.context function. require.context allows us to use webpack to obtain all of the blog modules:\n\nThe code snippet above looks in the blog directory for files / modules ending with the suffix \"/index.md\". Each one of these represents a blog post. The function returns a context object, which contains all of the data about these modules.\n\nBy reducing over that data we can construct an array of objects called allPosts that could drive a blog archive screen. Let's do this below, and we'll use TypeScripts JSDoc support to type our JavaScript:\n\nObserve the metadata property in the screenshot below:\n\nThis gives us a flavour of the data available in the modules and shows how we pull out the bits that we need; date, formattedDate, title and permalink.\n\nPresenting it\n\nNow we have our data in the form of allPosts, let's display it. We'd like to break it up into posts by year, which we can do by reducing and looking at the date property which is an ISO-8601 style date string taking a format that begins yyyy-mm-dd:\n\nNow we're ready to blast it onto the screen. We'll create two components:\n\n- Year - which is a list of the posts for a given year and\n- BlogArchive - which is the overall page and maps over yearsOfPosts to render Years\n\nBringing it all together\n\nWe're finished! We have a delightful looking blog archive plumbed into our blog:\n\nIt is possible that a blog archive may become natively available in Docusaurus in future. If you're interested in this, you can track this issue.\n\nHere's the final code - which you can see powering this screen. And you can see the code that backs it here:",
  "title": "Blog Archive for Docusaurus"
}