Proposal: blog archive - is it handrollable?

[johnnyreilly]

Of late I've been in the process of porting my blog from Blogger to Docusaurus. I've covered a lot of ground and I'm currently dual publishing to both Blogger and to Docusaurus. I have a critieria for switching which I've documented here.

🚀 Feature

The one thing that I really miss is Blogger's "Blog Archive". This is really valuable for discovering older blog posts quickly. I'd like this to exist prior to making the move. I often dive back into older posts and so value it. A screenshot of the Blogger one is below

Have you read the [Contributing Guidelines on issues]

Yes

Motivation

See feature.

Pitch

It's possible that there may be a hook in Docusaurus that would allow me to build a standalone page in a blog which could be a Blog Archive. This needn't necessarily be built into Docusaurus (as nice as that would be).

I've dug around useDocusaurusContext but couldn't find any blog metadata which would allow me to build a Blog Archive.

Is there such a thing knocking around that I just haven't noticed? Or could something be exposed?

I figure that's what's necessary is the title / URLs of the various blog posts as well as when they were published (although this could be inferred from the URL probably). Thoughts?

[johnnyreilly]

I have now handrolled a blog archive using webpack's require.context

johnnyreilly/blog.johnnyreilly.com#18

There may well be a better way?

[slorber]

Hi

Currently, the blog plugin does not create any archive page but we could add this easily.

You can also swizzle the BlogSidebar component if you want to implement this as a sidebar.

I don't think sidebar items receive post dates for now but we could add them to the props.

Assigning to MLH fellows as it's a quite easy contribution to get started with content plugins:

[johnnyreilly]

Thanks @slorber

I've been able to implement my own blog archive fairly straightforwardly - you can see it here:

https://blog.priou.co.uk/blog-archive

And the code for it is here:

https://github.com/johnnyreilly/blog.johnnyreilly.com/blob/main/blog-website/src/pages/blog-archive.js

I'm fairly happy with the implementation. The thing that gives me pause for thought is that it relies upon require.context from webpack.

Is there an API that could be exposed from Docusaurus instead which could reveal this? This is the required data: (metadata essentially)

const { date, formattedDate, title, permalink } = module.metadata;

https://github.com/johnnyreilly/blog.johnnyreilly.com/blob/c64b2ff08cc10b7d1c5b7ce6b9d980c9ffac37fe/blog-website/src/pages/blog-archive.js#L14

[slorber]

Is there an API that could be exposed from Docusaurus instead which could reveal this?

This is exactly what the plugin API is made for :)

You use NodeJS FS API, compute json props, pass them to @theme/BlogArchivePage, and then render it with regular client-side React code.

Our doc is not very organized but you'll find some inspiration here:
https://v2.docusaurus.io/docs/lifecycle-apis#actions

But it would be better to do this on the docs plugin as those blog posts have already been read there and frontmatter has been parsed etc...

[johnnyreilly]

Do you mean in this plugin? https://github.com/facebook/docusaurus/tree/master/packages/docusaurus-plugin-content-blog

[slorber]

Yes this one.

If you want to contribute this let me know, you probably just need to add something like:

addRoute({
  path: "/blog/archive",
  component: "@theme/BlogArchivePage",
  exact: true,
  modules: {
    blogItems
  }
});

And then add a @theme/BlogArchivePage component to the classic theme.

Your design on twitter looks good enough for now

[javidrashid]

@slorber To update the PR details coming from other than MLH fellows.

[slorber]

@johnnyreilly are you planning to add this to Docusaurus? Because we are trying to figure out if MLH fellows should work on this.

FYI what we want is something like this, directly in the blog plugin: https://blog.johnnyreilly.com/blog-archive

[johnnyreilly]

Noob question: what are MLH fellows? Is it this? https://fellowship.mlh.io/

@johnnyreilly are you planning to add this to Docusaurus? Because we are trying to figure out if MLH fellows should work on this.

I'd like to contribute this, yes. But I don't have a specific timeframe for when I'd do this in mind; my OSS has to fit in around my other commitments of work and family; both of which are busy at present.

I'm totally fine if you'd like someone else to work on this instead if you're targeting a speedy go-live

[slorber]

Yes this is it So we'll keep it on the MLH task queue. Just ping us if you want to claim this issue. Le mer. 17 mars 2021 à 20:27, John Reilly ***@***.***> a écrit :

…

Noob question: what are MLH fellows? Is it this? https://fellowship.mlh.io/ @johnnyreilly <https://github.com/johnnyreilly> are you planning to add this to Docusaurus? Because we are trying to figure out if MLH fellows should work on this. I'd like to contribute this, yes. But I don't have a specific timeframe for when I'd do this in mind; my OSS has to fit in around my other commitments of work and family; both of which are busy at present. I'm totally fine if you'd like someone else to work on this instead if you're targeting a speedy go-live — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4431 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFW6PSOOU4EQNV7S6P227DTED7CVANCNFSM4ZEX4OWQ> .

[johnnyreilly]

Thanks @slorber - Docusaurus is really amazing BTW. A month ago I was on Blogger and wasn't planning to go anywhere. Encountering Docusaurus made me reconsider. I really like it; great work to all involved!

[slorber]

Thanks :)

Would also love to move my blog to Docusaurus, but it needs some extra features first (like React-Native-Web support)

[johnnyreilly]

I blogged about this in case anyone wants to borrow this technique: https://johnnyreilly.com/blog-archive-for-docusaurus

[gabrielcsapo]

Is this still on the roadmap? I have a fork of the blog plugin that does exactly what @johnnyreilly has provided, but uses the addRoute functionality that you suggested @slorber .

[slorber]

I'd be happy to have a PR for that feature if you already built it.
I can review and/or complete the PR to make it robust and future proof for other use-cases

[gabrielcsapo]

I will have a PR up today!

[gabrielcsapo]

PR is up and ready for review #5428