Blog
cli
posting
Before You Read
Method1: Run scripts in the terminal
pnpm post
bash
-
slect blog directory
-
category
vsnew category
category
- slect exsisting category
- type new post title
new category
- type new category title
- type new categoryโs description
- type new post title
- results
--- title: typed title preview: PREVIEW author: AUTHOR update: 2022/07/25 color: "#716ffe" tags: TAG1, TAG2 --- # Post Title
md
Method2: by yourself
Should include meta property
- title:
string
- preview:
string
- author:
string
- update:
string
- format:
YYYY/MM/DD
- format:
- color:
string
- format:
โ#HEXโ
orโrgba(r,g,b,a)โ
orโrgb(r,g,b)โ
- format:
- tags:
string
- format:
tag1, tag2, โฆ
- format:
Slectable meta property
- sereis:
string
- format:
seriesTitle-seriesNumber
- ex): js-1, will be first js series
- format:
- postpone:
boolean
- if
true
: post will not display
- if
- reference:
string
- format:
ref_url1, ref_url2, ...
- format:
More power with MDX ๐ฅ
MDX with React component
- Import component
import { Head } from "@components/BlogOnly/Head" ;<Head title={"This is Next your home"} />
jsx
import path support absoulte path like @components/...
- Example component
const Head = ({ title }: { title: string }) => { return ( <> <header className="head">{title}</header> <style jsx> {` .head { font-size: 1.25rem; text-align: center; font-weight: 700; } `} </style> </> ) } export default Head
tsx
- component should be pure
- react hook, means stateful component
- Do not use the
css-in-js
library for styling other thanstyled-jsx
built innextJs
- more info about
styled-jsx
- more info about
jotai
global state is not shared
Have fun with Game Component
Rock Scissors Paper!
MDX with javascript expression
-
export const some = some_value
- declare variable
export const message = "HI!"
js- use variable
{message}
md -
IIFE
- declare
IIFE
inside of MDX
{(() => { const rand = Math.floor(Math.random() / 0.1) return <span style={{color: "white", border: "1px solid white", padding: "0.25rem", borderRadius: "0.1rem"}}>{rand}</span> })()}
md- results
- declare
-
Local React Component
- declare component
export const LocalTitle = ({ text }) => ( <span style={{ color: "white", fontWeight: 700, padding: "1rem", backgroundColor: "tomato", borderRadius: "2.5px", }} > {text} </span> )
jsx- using inside of mdx file
<LocalTitle text={"Local Title"} />
md- results
Visit MDX official docs
about expression, click here ๐
danpacho
โข
2022๋ 08์ 03์ผ
โข
Thanks For Reading !
Blog ๊ธ ๋ชฉ๋ก์ผ๋ก ๋์๊ฐ๊ธฐ
What is MDX component?