Design

List of supported components (Notion Blocks)

Headings

Headings help users and search engines to read and understand text.

Heading 1

Content Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

Heading 2

Content Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

Heading 3

Content Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

Toggle Headings

Allows you to create collapsible blocks with a large heading

Toggle Heading 1

Content Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

Toggle Heading 2

Content Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

Toggle Heading 3

Content Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus.

Paragraph

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

Another one Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

Bold

This is a bold text

Italic

This is an italicized text

Underline

This is an underlined text

Strikethrough

This text has a strikethrough

Code

This text is displayed as code

Inline Equation

Mass–energy equivalence:

Here's is a link to my GitHub

Line Break

A blank paragraph is treated as <br/>


Comments

This text has a comment

Colors

default gray brown orange yellow green blue purple pink red gray_background brown_background orange_background yellow_background green_background blue_background purple_background pink_background red_background

Useful for highlighting important stuff that need the most attention.

Block Color

  1. Text color of this block is gray
  2. Text color of this block is brown
  3. Text color of this block is pink
  4. Text color of this block is red
  5. Text color of this block is orange
  6. Text color of this block is yellow
  7. Text color of this block is green
  8. Text color of this block is blue
  9. Text color of this block is purple
  • Background color of this block is gray
  • Background color of this block is brown
  • Background color of this block is pink
  • Background color of this block is red
  • Background color of this block is orange
  • Background color of this block is yellow
  • Background color of this block is green
  • Background color of this block is blue
  • Background color of this block is purple

Nested Text

At level one long Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

At level 2 long Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Text on level C

  • A list on level C

<script>alert('xss');</script>

Horizontal Rule


Blockquote

Come on, baby! Do the magic hand thing” — Greef Karga

Lists

Unordered List

  • Item 1
  • Item 2 Long Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

    The HTML <hr> element is for creating a "thematic break" between paragraph-level elements.

    • this is a nested list
      • Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  • Item 3

Ordered List

  1. Item 1
  2. Item 2 Long Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    1. Item 2.1
      1. ltem 2.1.i
  3. Item 3

To-do List

Toggle List

Summary


Details Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

With other types of blocks


  • Bulleted in toggle
  1. Numbered in toggle

Toggle in toggle!


tada 🎉

With long text (and no contents) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


This block is empty

Callout

A callout with an emoji.
A callout with an uploaded image
A callout with a external image
Callout in callout. Long Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Block Equation

Here's the infamous Quadratic Formula for finding the roots of a Quadratic Equation

Mention

User: Lorem Ipsum Maximous Black is simply dummy text of the printing and typesetting industry

Page: Lorem Ipsum Uses is simply dummy text of the printing and typesetting industry

GitHub:

Date:

  • simple:
  • range:
  • with time:
  • @today:
  • @Sunday:
  • Reminder:
Maximous Black

Sub Page

Sub Page

Simple Table

CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Centro Comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly

Database

Unsupported block[child_database]

Media

Image

Linked
Linked
Broken Source
Broken Source

Video

Linked (youtube)

Audio

Linked

PDF

Essay1977-Personal_Dynamic_Media-Alan_Kay_Adele_Goldberg.pdf
Personal Dynamic Media by Alan Kay, Adele Goldberg

File

test-tone.mp3
JetBrainsMono-2.242.zip
my favorite monospace font

Bookmarks

Maximous Black

I'm a Web Developer who likes building beautiful web interfaces & experiences.

https://maximousblk.me/

My website

Deno for JavaScript Beginners - Maximous Black

I'm a Web Developer who likes building beautiful web interfaces & experiences.

https://maximousblk.me/posts/deno-for-javascript-beginners

The Open Graph protocol

The Open Graph protocol enables any web page to become a rich object in a social graph.

https://ogp.me/

BREAKING: Migrate to NextJS 13 by maximousblk · Pull Request #568 · maximousblk/maximousblk.me · GitHub

TODO Switch to pnpm add Vercel Analytics (evaluate umami v2) Add NextJS 13 Font Optimizations Add NextJS 13 Loading UI Add NextJS 13 Error Boundaries Use React 18 Streaming and Suspense for heavy UI elements Use React 18 cache() for content blocks Migrate most server side code to Edge Runtime Add Auto generated OG images (@vercel/og) Add Link previews (uiw.tf/link-preview) Add arbitrary webpage screenshot API Add content block menu (uiw.tf/component-menu) convert non-interactive content to Server Components Increase type strictness Migrate pages to /app directory Home Posts List Post Content Root Pages Move content blocks to separate components TableOfContents RichText Heading Simple Lists (Bullet, Numbered, ListItem) TodoList ToggleList Callout CodeBlock Image Video Audio File Bookmark Equation PageLink and ChildPage Divider Column Synced Quote Table preview https://blog-git-next13-maximousblk.vercel.app https://next.maximousblk.me

https://github.com/maximousblk/maximousblk.me/pull/568

Code Blocks

javascriptcaption here long long long long long long long long long long long long long long long long long long
/* This is a comment. (link for more info) */
function foo() {
  const color = "bar"
  return color;
  console.log("dead code");
}

Template

This is the template button


These the template contents

Unsupported block[breadcrumb]

Synced Block

A "Container" block (a callout), let's call it A.

This is a synced block

A "Reference" block that is pasted after clicking "Copy and sync" in A, let's call it B.

This is a synced block

A "Reference" block that is pasted after clicking "Copy and sync" in B, let's call it C.

This is a synced block

Columns

3 column divide:

Column 1/3

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Column 2/3

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Column 3/3

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

2 column divide:

Pros

  • It's good
  • It's good
  • It's good

Cons

  • It's bad
  • It's bad
  • It's bad

Embeds

Unsupported block[embed]
Unsupported block[embed]