Playground v2

Introduction

Hello there. This is where experiments sprout and blossom. Some even become features! Or they may become bugs that then become features. Or they... well yea, stuff happens.

Ctr-f TODO to quickly find things I'm working on implementation. Likely in order of top to bottom.

Images

Video

Callouts

And nesting callouts

and this continues the paragraph.

This is another quote that is long enough to be on multiple lines. Let's see how it looks. And just to make sure it's long enough, I'll add some more text. Just a bit more.

but also without any variant

This is another quote that is long enough to be on multiple lines. Let's see how it looks. And just to make sure it's long enough, I'll add some more text. Just a bit more.

and nested

Level-one reply

Level-two reply

Level-three reply

and now a quote with a caption:

Basic Text Formatting

This text is italicized.

This text is bold.

~This text is not strikethrough.~

This text is strikethrough.

This text is bold and italicized.

Compound Formatting

This is bold and italicized text.

This is bold and strikethrough text.

This is a blockquote with bold text.

Here is a list with different formatting:

1. Bold Item
2. Italicized Item
3. Strikethrough Item
4. Bold and Italicized Item

TODO Extended Formatting

H_2_O

X^2

Spoilers

Don't you just hate spoilers?

Also, this is some spoiler that's far too long to fit in one line when listed on a page.

How about with... markup? this is italics and bold and underline and something.

TODO: absolutely failing —

...how about a formatting spoiler? a link home and external link to Google

Links

This is an internal link example.

This is an external link example.

This is an internal anchor link example.

This is an internal link to file example.

This is an external link to file example.

Lists

Headers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim arcu sit amet ullamcorper malesuada. Phasellus quis posuere sem, nec euismod nisi. Quisque a risus fermentum, venenatis elit ac, mattis magna. Nulla facilisi. Donec mauris leo, viverra et erat at, sollicitudin interdum mi. Phasellus cursus orci vel eleifend viverra. Curabitur eleifend tristique ipsum eu sagittis. Quisque vitae augue cursus, luctus nisi vitae, mattis neque. Aenean euismod erat sed eros consequat, sed elementum justo luctus. Cras faucibus id ex in ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

This is a really long one ugh

Mauris ac convallis ligula. Phasellus nec ultricies libero, vel bibendum nunc. Ut id nibh leo. Pellentesque cursus nunc non facilisis ultrices. Praesent vel fermentum nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis vulputate sapien, vitae vehicula odio. Nunc eget ante vitae nibh aliquet euismod. Vestibulum sagittis lacinia urna, nec dapibus purus sollicitudin in. Proin accumsan arcu leo, id egestas tellus tristique vel. Mauris ultricies luctus maximus. Nullam blandit lacinia felis, sed placerat sem sagittis varius. Sed ut arcu nec massa molestie fermentum vitae quis sem. Etiam id urna quis ipsum volutpat tempus et vel felis.

Vivamus vel bibendum eros. Nulla varius faucibus ex, nec congue urna ornare sit amet. Pellentesque in elit aliquam est vehicula scelerisque ac vel risus. Nulla facilisis nec mauris ac fringilla. Cras dignissim ultricies vulputate. Nam a odio lorem. Integer sit amet velit libero. Sed convallis ex sit amet nibh blandit, id facilisis velit luctus. Aliquam erat volutpat. Mauris tincidunt lacinia erat, quis pellentesque nisl.

Proin dapibus mollis libero id viverra. Proin efficitur id nunc vitae semper. Aenean feugiat pulvinar eros vitae dictum. Donec tincidunt facilisis fringilla. Sed semper suscipit dictum. Etiam sed quam at sem egestas convallis at quis eros. Mauris et laoreet odio. Ut orci dui, malesuada pretium iaculis id, pretium eget magna. Etiam tellus est, imperdiet in posuere sed, venenatis venenatis eros. Mauris risus est, suscipit eu luctus a, pellentesque nec tellus. Sed quis urna fringilla, vestibulum urna id, dictum arcu. Mauris lectus odio, faucibus eget est at, maximus sodales ipsum.

Codeblocks

// say hello
function greet() {
  console.log("Hello, world!", 5 + 17)
}

greet()

console.log(
  "text-violet11 shadow-blackA4 hover:bg-violet3 bg-white focus:shadow-black inline-flex h-[35px] w-[35px] items-center justify-center rounded-full shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px]"
)

import React from "react"
import { PlusIcon } from "@radix-ui/react-icons"
import * as Tooltip from "@radix-ui/react-tooltip"

const TooltipDemo = () => {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger asChild>
          <button className="text-violet11 shadow-blackA4 hover:bg-violet3 bg-white focus:shadow-black inline-flex h-[35px] w-[35px] items-center justify-center rounded-full shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px]">
            <PlusIcon />
          </button>
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content
            className="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 bg-white rounded-[4px] px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] select-none"
            sideOffset={5}
          >
            Add to library
            <Tooltip.Arrow className="fill-white" />
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  )
}

export default TooltipDemo

// say hello
function greet() {
  console.log("Hello, world!", 5 + 17)
}

greet()

// say hello
function greet() {
  console.log("Hello, world!", 5 + 17)
}

greet()

// say hello
function greet() {
  console.log("Hello, world!", 5 + 17)
}

greet()

// say hello
function greet1() {
  console.log("Hello, world!", 5 + 17)
}

greet1()

import React from "react"
import { PlusIcon } from "@radix-ui/react-icons"
import * as Tooltip from "@radix-ui/react-tooltip"

const TooltipDemo = () => {
  return (
    <Tooltip.Provider>
      <Tooltip.Root>
        <Tooltip.Trigger asChild>
          <button className="text-violet11 shadow-blackA4 hover:bg-violet3 bg-white focus:shadow-black inline-flex h-[35px] w-[35px] items-center justify-center rounded-full shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px]">
            <PlusIcon />
          </button>
        </Tooltip.Trigger>
        <Tooltip.Portal>
          <Tooltip.Content
            className="data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 bg-white rounded-[4px] px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] select-none"
            sideOffset={5}
          >
            Add to library
            <Tooltip.Arrow className="fill-white" />
          </Tooltip.Content>
        </Tooltip.Portal>
      </Tooltip.Root>
    </Tooltip.Provider>
  )
}

export default TooltipDemo