feat: add FrontMatter CMS, biome, translation, etc.

* add Frontmatter CMS

* add biome

* update

* update

* fixed & add docs

* fix translation.ts

* fix translation

src/content/posts/markdown.md

@@ -2,22 +2,21 @@
 title: Markdown Example
 published: 2023-10-01
 description: A simple example of a Markdown blog post.
-image:
 tags: [Markdown, Blogging, Demo]
 category: Example
+draft: false
 ---
 
-An h1 header
-============
+# An h1 header
 
 Paragraphs are separated by a blank line.
 
-2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
+2nd paragraph. _Italic_, **bold**, and `monospace`. Itemized lists
 look like:
 
-* this one
-* that one
-* the other one
+- this one
+- that one
+- the other one
 
 Note that --- not considering the asterisk --- the actual text
 content starts at 4-columns in.
@@ -32,10 +31,7 @@ Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
 in chapters 12--14"). Three dots ... will be converted to an ellipsis.
 Unicode is supported. ☺
 
-
-
-An h2 header
-------------
+## An h2 header
 
 Here's a numbered list:
 
@@ -52,50 +48,48 @@ from the left side). Here's a code sample:
 As you probably guessed, indented 4 spaces. By the way, instead of
 indenting the block, you can use delimited blocks, if you like:
 
-~~~
+```
 define foobar() {
     print "Welcome to flavor country!";
 }
-~~~
+```
 
 (which makes copying & pasting easier). You can optionally mark the
 delimited block for Pandoc to syntax highlight it:
 
-~~~python
+```python
 import time
 # Quick, count to ten!
 for i in range(10):
     # (but not *too* quick)
     time.sleep(0.5)
     print i
-~~~
+```
 
-
-
-### An h3 header ###
+### An h3 header
 
 Now a nested list:
 
 1. First, get these ingredients:
 
-    * carrots
-    * celery
-    * lentils
+    - carrots
+    - celery
+    - lentils
 
 2. Boil some water.
 
 3. Dump everything in the pot and follow
-   this algorithm:
+    this algorithm:
 
-       find wooden spoon
-       uncover pot
-       stir
-       cover pot
-       balance wooden spoon precariously on pot handle
-       wait 10 minutes
-       goto first step (or shut off burner when done)
+        find wooden spoon
+        uncover pot
+        stir
+        cover pot
+        balance wooden spoon precariously on pot handle
+        wait 10 minutes
+        goto first step (or shut off burner when done)
 
-   Do not bump wooden spoon or it will fall.
+    Do not bump wooden spoon or it will fall.
 
 Notice again how text always lines up on 4-space indents (including
 that last line which continues item 3 above).
@@ -108,32 +102,38 @@ doc](#an-h2-header). Here's a footnote [^1].
 
 Tables can look like this:
 
-size  material      color
-----  ------------  ------------
-9     leather       brown
-10    hemp canvas   natural
-11    glass         transparent
+size material color
+
+---
+
+9 leather brown
+10 hemp canvas natural
+11 glass transparent
 
 Table: Shoes, their sizes, and what they're made of
 
 (The above is the caption for the table.) Pandoc also supports
 multi-line tables:
 
---------  -----------------------
-keyword   text
---------  -----------------------
-red       Sunsets, apples, and
+---
+
+keyword text
+
+---
+
+red Sunsets, apples, and
 other red or reddish
 things.
 
-green     Leaves, grass, frogs
+green Leaves, grass, frogs
 and other things it's
 not easy being.
---------  -----------------------
+
+---
 
 A horizontal rule follows.
 
-***
+---
 
 Here's a definition list:
 
@@ -150,7 +150,7 @@ term/definition pair to spread things out more.)
 Here's a "line block":
 
 | Line one
-|   Line too
+| Line too
 | Line tree
 
 and images can be specified like so:
@@ -163,4 +163,4 @@ math should get its own line and be put in in double-dollarsigns:
 $$I = \int \rho R^{2} dV$$
 
 And note that you can backslash-escape any punctuation characters
-which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc.
+which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc.