Make 404 page more appealing.

[cgiradkar]

The 404 page was just having a plain old vanilla text.
To revamp it, added a sad seal picture to signify the same.
NotFound component was Swizzled via docusaurus and edited accordingly.

closes #124

Signed-off-by: Chetan Giradkar <[email protected]>

[cgiradkar]

• To Swizzle a component: yarn swizzle @docusaurus/theme-classic NotFound --eject
• To List Swizzle-able compoenents: yarn swizzle @docusaurus/theme-classic --list
• Swizzle Docs

[TomSweeneyRedHat]

I like where this is going!

[TomSweeneyRedHat]

LGTM
but would like a looksee from @mairin

[mairin]

Hey (sorry for the delay, I can give quicker feedback with screenshots, I don't always have access to the full env)

Here is what I see:

I think this is great! I would just modify the text a bit:

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

I don't think many people are realistically going to contact the referrer (who may well be us) to report a broken link. Instead, can you offer them a way to search for the content they are looking for? Eg

https://duckduckgo.com/?hps=1&q=site%3Apodman.io&atb=v299-1&ia=web

Can you also refer to the link they tried to access that isn't available?

If so I would rephrase like this (adding a bit of fun):

Oh no! We can't seal the deal!

We could not find what you were looking for: [podman.io/foo/bar](url) isn't a working link. The content may have moved; [try a search for it](url).

A few fun headers you could rotate between:

• "Oh no! We can't seal the deal!"
• "We can't seal with it!"
• "This is seal-iously embarassing..."
• "Seal-ly us! We can't find that page."
• "Don't flip, but we can't find that."
• "We don't sea that page."

[cgiradkar]

I like where this is going!

[cgiradkar]

This is how it looks now:



@mairin FYI

[TomSweeneyRedHat]

Love it, LGTM!

[mairin]

@cgiradkar yes!!! just a couple nits and i think good to go:

• the header text needs a bit more margin-bottom or padding-bottom. like, maybe 5px additional to what it has now?

• maaaaybe color the url that didn't resolve differently or use a fixed-width font or bold it? I would just bold it to be honest. But I'd like to see it stand out differently than the rest of the text.

Otherwise love it :)

[cgiradkar]

@cgiradkar yes!!! just a couple nits and i think good to go:

• the header text needs a bit more margin-bottom or padding-bottom. like, maybe 5px additional to what it has now?
• maaaaybe color the url that didn't resolve differently or use a fixed-width font or bold it? I would just bold it to be honest. But I'd like to see it stand out differently than the rest of the text.

Otherwise love it :)

Done, PTAL @mairin

[cgiradkar]

Screenshot after latest updates:

[mairin]

@cgiradkar maybe 5 px more? It's looking better!

[mairin]

(also the url coloring looks perfect!)

[cgiradkar]

padding-bottom: 1rem;

[mairin]

perfect!! LGTM 👍🏻

[TomSweeneyRedHat]

LGTM