Method1: Run scripts in the terminal

pnpm post
bash

slect blog directory
category vs new category
1. category
  1. slect exsisting category
  2. type new post title
2. new category
  1. type new category title
  2. type new category’s description
  3. type new post title
3. 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
1. format: YYYY/MM/DD
color: string
1. format: “#HEX” or “rgba(r,g,b,a)” or “rgb(r,g,b)”
tags: string
1. format: tag1, tag2, …

Slectable meta property

sereis: string
1. format: seriesTitle-seriesNumber
2. ex): js-1, will be first js series
postpone: boolean
1. if true: post will not display
reference: string
1. format: ref_url1, ref_url2, ...

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 than styled-jsx built in nextJs
- more info about styled-jsx
jotai global state is not shared

Have fun with Game Component

MDX with javascript expression

export const some = some_value
1. declare variable
```
export const message = "HI!"
js
```
1. 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

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

Local Title

Visit MDX official docs

about expression, click here 🔎

danpacho

•

2022년 08월 03일

•

Thanks For Reading !

Blog 글 목록으로 돌아가기

What is MDX component?