blog.saebasol.org is based on markdown rendered with MDX and Chakra-UI. You can both use markdown and React components to write post.

Components

Followings are basically implemented components for general users.

MDAST

MDAST stands for Markdown abstract syntax tree. You can check every available markdown syntax on following website.

Chakra-UI

Since MDX supports writing JSX directly into markdown, you need to checkout available modules from Chakra-UI's documentation if you want to make your post more beautiful.

blog.saebasol.org is based on version 1.3.3 and all components are available without importing manually.

<Button
  onClick={() => {
    if (confirm('Will you refresh this page?')) {
      window.location.href = ''
    }
  }}
>
  Refresh!
</Button>

blog.saebasol.org Components

Sometimes, you want to do more! 👌

TypedColorMode

TypedColorMode component provides a selective rendering by user's color mode.

<TypedColorMode only='dark'>
  Dark mode enabled!
</TypedColorMode>
<TypedColorMode only='light'>
  Light mode enabled!
</TypedColorMode>

Scopes

Not only components, we do provide some useful variables and ready to use functions.

toast({ title, description, ... })

You can send toast to user simply calling toast function.

<Button
  onClick={() => {
    toast({
      title: 'Title',
      description: 'Description of the toast.',
      status: 'success',
      duration: 3000,
      isClosable: true
    })
  }}
>
  Send!
</Button>

toggleColorMode()

You can toggle color mode of user by calling this function.

<Button
  onClick={toggleColorMode}
>
  Toggle
</Button>

isLightMode

A bool value that indicates if user enabled dark mode.

<Alert>
  {
    isLightMode
      ? 'Light'
      : 'Dark'
  } mode enabled!
</Alert>