v1.2.9

Second minor release

Second minor release brings some new features in the production.

Static Site Generation

Posts and post list are now statically generated (SSG) which brings a massive speed boost on load. With that being said posts now are revalidated automatically each month.

Revalidate on-demand

An API now includes a path to revalidate all (or a single) posts.

The /api/post/revalidate takes 2 query parameters: token & path.

Token is an equivalent to API_KEY environment variable mentioned in .env.local-example. Without the token API will throw a 401 Unauthorized response.

If the path is not provided, it will revalidate all posts, otherwise it will take path query as the path. If an error occurs, API will throw a 500 Internal Server Error response.

Reduced motion support

Blog now supports reduced motion support for all browsers. Links' transitions will be immediate. This also includes the transform transition of cat humanity illustration on home page!

v1.0.7

Seventh patch release

Seventh patch change includes a full initial release of a blog with some of the features.

Server Side Rendering

SSR (Server Side Rendering) for blog posts in home page & the post itself. Post is fetched & parsed in runtime. This approach is not effecient in case you have a lot of posts.

Server Side Rendering takes the post slug as provided after /post/... in URL and does a firebase fetch for matching slug - firestore key. If nothing is found it returns a 404 content and then a 404 page from SSR, otherwise parses the content and returns both markdown (rawContent key) and HTML (content key) via remark to the static page.

Meta tags support

Release provides partial support for Open Graph tags. Those let blog to be enriched with embeddings on social medias! A small example of a post on discord:

Release supports 2 meta tags - og:title & og:description. Banner and its sizing is not included due to no support for banner images as they are not necessary for the blog.

To set the title & description head to /public/config/site.tsx file that contains following variables: ogTitle, ogDescription. Those can be set to a string with some content for the home page.

Post page on the other hand does little different. Since the static post page gets rawContent key, there is a markdown string that can be used as the description sliced to 183th character. Make sure your introduction text does not include unusual artifacts from markdown as not every social media supports markdown in the description e.g. [this link](/that-leads-to-cool-site) won't be rendered correctly by discord.

The title is preset with title key by the properties so no worries about the correct rendering.

White theme (embed color) cannot be changed without monkey patches due to blog being light themed.

Re-piping

Native re-piping from Google Cloud also known as Firebase Storage to a custom /cdn/ base path. Requires STORAGE_BUCKET to be provided as the environment variable. It is stated in .env.local-example.

For every request to /api/cdn/... or /cdn/... API fetches the same file with the path provided after, then if a file does not exist it returns 404 page, otherwise it pipes a file with node:https native get method.

The custom re-piping caches images and files.

It cannot be Static Site Generated (SSG) due to file format piping issues. Middleware and rewrites are not statically generated. However, there is a s-maxage header which stays for server side caching thus with a proper setup, API will cache the response. The first request can take some time to respond.

Rewrites

The blog includes a small rewrite support for /cdn/... to /api/cdn/... for shortening purposes. With a bit of a configuration you can setup Multi zones.

Not Found page

Custom not found page with the contact information and customizable content.

You can configure some of the content with the configuration provided in /public/config/not-found.tsx. This includes meta tags as mentioned above & of course title & description. There you can change a contact link or even the entire content of a description just make sure it is type of react node.

Illustration pack compatibility

Humanities component with rgbDataURL placeholder. Silver gray is set before the image is loaded.

Requires storage to have transparent humanities uploaded to /humanities/ folder!

Ikota & linters

For the people who want to make changes to the blog, release supports linters.

The project supports ikota and has an initial configuration for it including the vanilla-extract plugin.

Project includes Next.js' eslint configuration as well as prettier for the code formatting.