franky47 / francoisbest.com

Homepage & blog

This is the source code for my personal website and blog, hosted at https://francoisbest.com

Built with:

• Next.js
• TailwindCSS
• TypeScript
• MDX

Inspiration & Thanks

• Lee Robinson
• Juan Olvera
• Max Stoiber
• Guillermo Rauch

And many others!

License

• Inspiration is welcome
• No plagiarism

Made with ❤️ by François Best - Sponsor my work

francoisbest.com's Issues

Hashvatar interactivity issues

• slider styles
• animation on the SVG makes it slow to respond to slider movements

Add search

Multiple options here:

• Searching title & description only -> Cmd+F #usetheplatform
• Full text search (may be slow or require more tooling)
• Semantic search with LLMs and embeddings

Add public keys page

• GitHub SSH for commit signature verification
• Keybase
• PGP / ProtonMail for external E2EE email
• Chiffre bundle signature

Add YouTube embeds

Lightweight embed component:
https://rg3.name/202012062121.html

Play video from peertube or dtube for privacy

403 on redirect

The Mastodon webfinger redirect returns a 403.

Add support for anchor links in MDX

• Headings
• Footnotes

Improve footnotes

Some ideas:

• Josh Comeau's hover tooltip
• Inline on hover
• Aside on desktop

Requirements:

• Must play nice with screen readers & a11y
• Must not break the flow of reading (ie: jump/scroll somewhere else on the page)
• Should be obvious it's a footnote, not just a link (like Josh's red star).

https://gwern.net/sidenote

Add last modified dates

https://mobile.twitter.com/tchayen/status/1353338298241077249
https://github.com/aquilesC/static_website_builder/blob/master/aqui_brain_dump/git_process.py

Invalid HN url

https://hn.algolia.com/?q=https%3A%2F%2Ffrancoisbest-ev6gng1zy-franky47.vercel.app%2Fposts%2F2021%2Fhashvatars

It uses the preview URL on the production deployment.

Under what license do you publish your components?

I'm espacilly asking about francoisbest.com/blob/next/src/components/SHA256Avatar.tsx

Styling issue after numbered lists

Paragraphs seem to lose their formatting after a numbered list:

Automated articles index

• List published posts
• Include summary when available
• Statically built with getStaticProps
• Show tags when available
• Dynamic client-side tag filtering, by query string

Tag filtering story

Tags are represented in the index and the articles as Badges from Chakra. They are clickable, and point to the index page with a ?tag=tagName query string. The index listens for this query and show only the relevant articles, plus a way to clear the query.

The post listing logic might be shared with #1, some examples:
https://github.com/zeit/next.js/tree/canary/examples/blog-starter

Reading List

• Add search (title & description)
• Add RSS feeds (daily & weekly digests)
• Add mailing list (daily & weekly digests). will require automation.

ISR errors with FS access

Pages that require ISR refreshing (eg: /open-source) fail if they embed a blog post or anything that calls the filesystem.

Could be due to bundling failing to pick the dependency.

Add view counters refresher

View counters expire after 6 months of inactivity. As the site is built daily, check if some counters have a TTL of 2 days or less (to keep some jitter margin) and bump a fake view to keep it alive.

Add tag filtering

Some predicaments:

At the moment, the blog index page (/posts) is a static page that contains all posts, and tags in the query string have no effect.

To add tag filtering, there are a few options:

• Store the tag in the querystring, eg: /posts?tag=react
• Store the tag in the pathname as a dynamic path: /posts/tags/react

Querystring approach

If using a server-centric approach, by using the searchParams prop on the blog index page, it turns it into a serverless function, which doesn't pick up the blog posts.

If using a static approach with islands of interactivity (wrapped in Suspense) to read the querystring and render a conditional list of posts, it gives a FOUC (flash of unfiltered content), where all the posts are initially shown and the filter applies.
Not wrapping in Suspense deopts into client-side rendering which has issues with dark mode not being applied (possibly another issue to look into).

Dynamic path approach

Research stage: investigate the possibility of generating static pages based on known tags, with a custom 'not-found' for unknown tags that doesn't 404 but show "no posts tagged XYZ".

It could also be possible to generate a tag index at /posts/tags, with the frequency of each tag.

Chakra v1 breakages

• Tooltips on open-source repo embeds (forward ref issue ?)
• NPM download graph sizing and viewporting
• Notes right negative margin on mobile

Client-side navigation shows `local` as Git SHA-1

Hard-refresh shows the right SHA-1, but navigating to any page through client-side navigation resets it to local.

Fix FOUC

Flash of unthemed content, where the initial load shows the light theme, then partially switches to dark theme on dark OSes.

Update syntax highlighting

Using mdx-pretty-code.

VSCode themes:

• Dark: One Monokai
• Light: One Light

Add syntax highlighting in article code blocks

Add RSS / Atom feeds

• Semantic article content export for syndication
• Ignore unpublished articles
• Add CORS * on feeds

https://github.com/jpmonette/feed
https://jolvera.dev/posts/rebuilding-my-blog-with-nextjs

Example output:
https://gateway.ipfs.io/ipns/blog.ipfs.io/index.xml

Reduce bundle size

Some leads:

• Partial hydration
• Progressive loading (code splitting)
• Switching to Preach
• ChakraUI code splitting investigation

Sources:
https://webcloud.se/blog/2020-03-12-nextjs-without-client-side-react/