Typed.sh

About

How to write on Typed.sh

This post describes basic writing in Typed.sh.

T
Typed.sh

19/02/2021

Thumbnail image of How to write on Typed.sh.

Typed.sh 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.

Typed.sh 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>

Typed.sh 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>
Light mode enabled!

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>
Copyright 2021 Typed.sh contributors.