How to post?

Blog

cli

posting

Method1: Run scripts in the terminal

pnpm post
bash
  1. slect blog directory

  2. 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

  1. title: string
  2. preview: string
  3. author: string
  4. update: string
    1. format: YYYY/MM/DD
  5. color: string
    1. format: โ€œ#HEXโ€ or โ€œrgba(r,g,b,a)โ€ or โ€œrgb(r,g,b)โ€
  6. tags: string
    1. format: tag1, tag2, โ€ฆ

Slectable meta property

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

More power with MDX ๐Ÿ”ฅ

MDX with React component

  1. Import component
import { Head } from "@components/BlogOnly/Head"
;<Head title={"This is Next your home"} />
jsx

import path support absoulte path like @components/...

  1. 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
  • jotai global state is not shared

Have fun with Game Component

Rock Scissors Paper!


MDX with javascript expression

  1. export const some = some_value

    1. declare variable
    export const message = "HI!"
    
    js
    1. use variable
    {message}
    
    md
  2. IIFE

    1. 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
    1. results
    4
  3. Local React Component

    1. declare component
    export const LocalTitle = ({ text }) => (
        <span
            style={{
                color: "white",
                fontWeight: 700,
                padding: "1rem",
                backgroundColor: "tomato",
                borderRadius: "2.5px",
            }}
        >
            {text}
        </span>
    )
    
    jsx
    1. using inside of mdx file
    <LocalTitle text={"Local Title"} />
    
    md
    1. results
Local Title

Visit MDX official docs

about expression, click here ๐Ÿ”Ž

danpacho

โ€ข

2022๋…„ 08์›” 03์ผ

โ€ข

Thanks For Reading !

Blog ๊ธ€ ๋ชฉ๋ก์œผ๋กœ ๋Œ์•„๊ฐ€๊ธฐ

What is MDX component?