I really wanted to try astro out but I was always busy yet I kept eye on it. Astro seemed ready-to-use framework comparing to qwik however I knew nothing about it & I had no project ideas for that unique all-in-one web framework.

After some time, I found my first web project written in html, scss & typescript - Discord profile card. That was a great opportunity to try universal approach out.

This post is all about how I rewrote my profile card & what has improved.

Configuration

With the native support of markdown, I ended up with choosing the markup language as the configuration file to have less dependencies & faster load performance. I did not include any additional mdx & ended up with frontmatter yaml support in index file of src/pages route.

Astro comes with markdown metadata parsing support so I decided to use it as the source of customization. Metadata can only be parsed inside a markdown divider:

---
displayName: Domin
username: dominnya
...
---

...

Inside the dividers you pass data exactly the same as you would in yaml. The file has complete documentation in comments on the usage of every key, all of these are considered a configuration of the discord user shown.

About me section, on the other hand, should be considered main bio as the portfolio therefore it takes place as the contents of the markdown. As the result, markdown contents of portfolio should be provided after the metadata dividers, after the comment.

To find more information on customizing & finding types of assets, head to public route. File names are considered the types you use.

Components

Not going to lie, at first profile card was so hard coded, you had to inject html straight into the main file with some documentation on it. Now the entire layout of the card is made of the component tree.

That means if you want to monkey patch the card, you could reuse components in a different order.

Image & Font Optimization

By saying all-in-one I meant a strong alternative to react spa framework called Next.js. Project uses image & picture optimization extensions & third-party fontsource dependency.

Astro comparing to Next.js does not include an image optimization out-of-the-box for optimization purposes. Instead, astro provides @astrojs/image dependency for optimizing assets based on squoosh.

Astro, as stated in documentation, suggests using fontsource as for no-external-link font optimization. This basically means that the site won't make a third-party source installation request for the font you use.

Responsiveness

While discord by itself doesn't provide responsive styling for mobile users, the project does a great job at working with any resolution.

Unlike the previous version of the profile card, the contents are no more 2-resolution based. Instead the look is based off the width & height of the screen.

New Look

Rewrite is based off the new look of the discord profile. That includes a support for global display name & username along with legacy badge. I don't think that the current look of the user interface is great yet I can't say it'd be better with an outdated look.

As for now card is not meant to have additional gradient look. This feature will be added in an another update or if you wish to, you could make a pull request.

Vectorized

All of the assets used in profile card as vectorized, have correct sizing & padding as well as have different other use-case alternatives you can take for other projects.

Meta tags

I really like simplicity in meta tags so I decided to make meta tags in the project as simple as possible. It includes a partial support with title as display name provided in src/pages/index.md route.

These were the things I worked with while developing with astro. Of course I could mention its features & my personal opinion on it but that'd be useless unless you try it yourself.