Lunarweb

Github

created on: Monday, August 7, 2023

updated on: Saturday, April 20, 2024

A simple website built with Astro .


For the first version of this website I used React along with EmotionCSS for styling (I am a huge fan of CSS-in-JS).


Not long after that I rebuilt it with NextJS and PandaCSS. Both frameworks are designed to mix the modern, reactive way of building websites with the performance and stability of pre-rendered content.


Half a year later I started working on current version of Lunarweb. This time utilizing the modular framework Astro which is amazing for building mostly-static websites like this one.


How it’s built


Content of all /projects pages is written with MDX , which is a way of mixing JavaScript components (React Vue and Astro in my case) with syntax of Markdown. Astro has a great support for it. Below you can see a fragment of how it looks like. Along with syntax highlighting which I am utilizing in some examples. 


import { Github } from 'lucide-astro'; // regular astro component

import { mapComponents } from '~/components/mdx/mapped-components.astro';
export const components = mapComponents(); // importing components which will be mapped to corresponding markdown syntax

{/* ... some stuff ... */}

Content of all **/projects** pages is written with [MDX](https://mdxjs.com/), which is a way of mixing JavaScript components (~~React~~ Vue and Astro in my case) with syntax of Markdown. Astro has a great support for it. Below you can see a fragment of how it looks like. Along with syntax highlighting which I am utilizing in some examples.

MDX and Markdown have support for optional frontmatter blocks written with YAML syntax. They allow to add some metadata to your files which is not displayed once rendered. Here’s a great overview of how it actually works. Also that’s how frontmatter for this file looks like: 


---
title: Lunarweb
shortDescription: You're here, my portfolio website created with Astro, Vue and PandaCSS. Previous versions used NextJS, and EmotionCSS among others.
technologies:
  - name: Astro
    link: https://astro.build/
  - name: Vue
    link: https://vuejs.org/
  - name: React
    link: https://react.dev/
  - name: PandaCSS
    link: https://panda-css.com/
  - name: NextJS
    link: https://nextjs.org/
  - name: EmotionCSS
    link: https://emotion.sh/docs/introduction
  - name: TypeScript
    link: https://www.typescriptlang.org/
links:
  - name: Github
    link: https://github.com/lunarW1TCH/lunarweb
priority: 1
createdOn: 2023-08-07
updatedOn: 2024-04-20
---