Nickz'in 👑
Developing a cool blog

Developing a cool blog

Fri Nov 01 2024
Hello my name
3 minutes
tech patch notes
320 words

Preface#

I created this blog using Astro technology, and my main intention was to use md to facilitate posting and to be a static website, without needing depend on a backend.

Main text#

Getting started#

First you need to create an mdx file, which is as simple as changing the extension to .mdx.

Introducing#

The components provided by Astro are placed in the /blog and /page folders. Write something under the document properties (frontmatter):

ASTRO
1
2
3
4
5
6
7
8
9
import Collapse from "../../components/blog/collapse.astro"; import Diff from
"../../components/blog/diff.astro"; import Error from
"../../components/blog/error.astro"; import Info from
"../../components/blog/info.astro"; import Kbd from
"../../components/blog/kbd.astro"; import Success from
"../../components/blog/success.astro"; import Warning from
"../../components/blog/warning.astro"; import TimeLine from
"../../components/page/TimeLine.astro"; import LinkCard from
"../../components/page/LinkCard.astro";

Example#

Collapse#

This is an example text.

This is the hidden content!

ASTRO
1
2
3
<Collapse title="This is an example text.">
  This is the hidden content!
</Collapse>

Diff#

daisy
daisy
ASTRO
1
<Diff r="https://media.discordapp.net/attachments/786743851674632252/1302085064837824523/image.png?ex=6726d4b7&is=67258337&hm=9ac88c603d24b08a248762ed824415cb1fd1b155b738a032104ae19109ebdb76" l="https://media.discordapp.net/attachments/786743851674632252/1302085157431545886/image.png?ex=6726d4cd&is=6725834d&hm=f9f48b723a5037735e6055c8d431762a49a7c5607efbffef22aa371f431c2bcd"/>

Error#

ASTRO
1
<Error>Maybe something went wrong?</Error>

Warning#

ASTRO
1
<Warning>Hey! Watch out for potholes!</Warning>

Message#

ASTRO
1
<Info>It's just a message.</Info>

Success#

ASTRO
1
<Success>Congratulations on your successful deployment!</Success>

Kbd#

Ctrl + C to copy the text.

ASTRO
1
<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy the text.

TimeLine#

  • I bought my first super mega top computer
  • I sold my pc
  • I built another PC
  • I bought an iPhone
  • I bought a house and a Porsche
ASTRO
1
2
3
4
5
6
7
8
9
<TimeLine
  items={[
    { year: "2022", event: "I bought my first super mega top computer" },
    { year: "2023", event: "I sold my pc" },
    { year: "2024", event: "I built another PC" },
    { year: "2025", event: "I bought an iPhone" },
    { year: "2026", event: "I bought a house and a Porsche" },
  ]}
/>

LinkCard#

NickZ'in | Blog

NickZ'in | Blog

My own blog to post daily content

ASTRO
1
2
3
4
5
6
<LinkCard
  title="NickZ'in | Blog"
  desc="My own blog to post daily content"
  url="https://github.com/Nickz1n/Blog"
  img="/favicon.svg"
/>