Learning new technologies can be hard, and it’s even hard when you’re learning new script language while you’re working on the project.

For this website (and blog), I’ve come across this new javascript framework that actually easy for me to understand and produce a lot of static websites by running the npm run build. This entire personal website was built using Astro and Tailwind CSS for the styling.

I’d normally use pico.CSS as my base styling, but since I’ve already made a few websites with it - I believe it’s time to continue learning another technology or CSS framework.

This blog is also my first introduction to TypeScript. At the very least, my experience can help me a lot in understanding the syntax, but the JSX-like expression to output some HTML still bother me during the development of this website.

For this website, as an example - I create a Typecript document (*.ts) that contains classes, functions and enums to be used by the other astro files and components. Using export, other component can import the class/function.

schedule.ts

export const enum SUBJECT_STATUS {
  normal = "normal",
  mute = "mute",
  important = "important",
}

Card.astro

---
import {SUBJECT_STATUS} from 'schedule.ts'
---

---
const chapters = ["Ch. 1","Ch. 2","Ch. 3"];
---

<h1>Title</h1>
{
  chapters.map((chapter:any) => {
    let checkChapter:boolean = (chapter === "Ch. 1") ? true : false;
    return <div>
    {checkChapter} {chapter}
    </div>
  })
}

---
const chapters = ["Ch. 1","Ch. 2","Ch. 3"];
---

<h1>Title</h1>
{
  chapters.map((chapter:any) => (
    <div>
    (chapter === "Ch. 1" ? `1` : `0`) {chapter}
    </div>
  ))
}