AstroPaper v3

[satnaing]

Updates

Major Changes 🔥

• upgrade to Astro version 3
• add ViewTransitions

Other Changes 🎯

• add whitespace-nowrap in title
• remove showing featured posts in Recent Posts section of the home page. (in order to avoid duplicates and to be compatible with new ViewTransitions API.
• add prettier-plugin-astro for formatting .astro files.

TODO 👀

• update the docs

Suggestions 🤷🏻‍♂️

Here, I'm requesting some suggestions for the newer version of AstroPaper.

• should we add testing with playwright?
• should we remove commitizen from AstroPaper? Since this way of committing is a little bit too opinionated for general users.

Live URL

You can now check the preview of AstroPaper v3 here. Any kind of suggestions are welcome!

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	adb2c51
Status:	✅  Deploy successful!
Preview URL:	https://a61029a9.astro-paper.pages.dev

View logs

[Talento90]

Hello @satnaing, great work maintaining this Astro Paper! When are you planning to merge the 3.0? I am looking forward to updating my blog to the latest version and this template is my personal choice. Let me know if you need some help.

[satnaing]

Hello @Talento90

This PR is going to be merged within this week (maybe around coming weekend).
If you want to try this rn, you can checkout the feature/version-3. It is pretty much stable now.
I just need to update docs and probably fix minor bugs.

[tanishqmanuja]

@satnaing, I can't understand why we are using a dummy endpoint to generate all OG images at once. Also this way you cant even access them on the dev server because they will get generated during the build. What am I missing here?

[satnaing]

@satnaing, I can't understand why we are using a dummy endpoint to generate all OG images at once. Also, this way you can't even access them on the dev server because they will get generated during the build. What am I missing here?

@tanishqmanuja
I use satori package to automatically generate OG images during build. However, Satori has its own limitations. At the time of writing this, Satori is only able to produce SVG images and cannot generate PNG images directly. While this is typically not an issue for regular images, it becomes problematic when dealing with Twitter cards, as they do not support SVG format.

To work around this limitation, I've implemented a solution in src/utils/generateOgImages.tsx to convert the generated SVG images into PNG format.

As you said, src/pages/[ogImage].png.ts is just a dummy endpoint that does not produce an actual OG image. Nevertheless, during build time, it can invoke generateOgImages() function inside src/utils/generateOgImages.tsx file, which is responsible for generating the necessary OG images in PNG format.

Using [ogImage].png.ts to trigger generateOgImages() is kinda "hacky", but it allows us to achieve the desired functionality without the need for additional configuration or scripts.

Another thing is that, while we can't access them on dev environment, we can build and preview them by
running npm run build and npm run preview. But keep in mind that in order to view them on dev server, we will have to update the astro.config.ts file a little bit.

export default defineConfig({
  site: "http://localhost:4321/", // we just replaced with localhost
  // other config
});

Currently, there is no option to disable "automatic OG image generation". In the future, that option might be included.

If you have any alternative suggestions or ideas for a more streamlined approach, please feel free to share them.

[tanishqmanuja]

Sure, I have few ideas but that could delay the 3.0 release. So probably the best option will be that I will make a draft PR which you can merge or iterate over with some commits of your own within 3.1 or whatever is the release after 3.0.

Edit: It worked on the first try, so maybe mergeable with 3.0 after testing

[alec-c4]

@satnaing I've found one more issue in hamburger menu when I've added one more menu item:

vs

I've just added "publications" and ... Is it possible to line up search and theme switch icons? You can check it here https://alec-c4.com

[tanishqmanuja]

file: Header.astro

[alec-c4]

file: Header.astro

Thanks a lot!!!!!