kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tooling overhaul

Browse Source
This commit is contained in:
itsMapleLeaf
2023-08-16 19:32:28 -05:00
parent 7ac1a9cdce
commit e9e5a1617b
111 changed files with 6758 additions and 6156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

318
packages/website/src/components/landing-animation.tsx
View File

@@ -5,191 +5,191 @@ import cursorIbeamUrl from "~/assets/cursor-ibeam.png"
import cursorUrl from "~/assets/cursor.png"
const defaultState = {
chatInputText: "",
chatInputCursorVisible: true,
messageVisible: false,
count: 0,
cursorLeft: "25%",
cursorBottom: "-15px",
chatInputText: "",
chatInputCursorVisible: true,
messageVisible: false,
count: 0,
cursorLeft: "25%",
cursorBottom: "-15px",
}
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
const animationFrame = () =>
new Promise((resolve) => requestAnimationFrame(resolve))
new Promise((resolve) => requestAnimationFrame(resolve))
export function LandingAnimation() {
const [state, setState] = useState(defaultState)
const chatInputRef = useRef<HTMLDivElement>(null)
const addRef = useRef<HTMLDivElement>(null)
const deleteRef = useRef<HTMLDivElement>(null)
const cursorRef = useRef<HTMLImageElement>(null)
const [state, setState] = useState(defaultState)
const chatInputRef = useRef<HTMLDivElement>(null)
const addRef = useRef<HTMLDivElement>(null)
const deleteRef = useRef<HTMLDivElement>(null)
const cursorRef = useRef<HTMLImageElement>(null)
useEffect(() => {
const animateClick = (element: HTMLElement) =>
element.animate(
[{ transform: `translateY(2px)` }, { transform: `translateY(0px)` }],
300,
)
useEffect(() => {
const animateClick = (element: HTMLElement) =>
element.animate(
[{ transform: `translateY(2px)` }, { transform: `translateY(0px)` }],
300,
)
let running = true
let running = true
void (async () => {
while (running) {
setState(defaultState)
await delay(700)
void (async () => {
while (running) {
setState(defaultState)
await delay(700)
for (const letter of "/counter") {
setState((state) => ({
...state,
chatInputText: state.chatInputText + letter,
}))
await delay(100)
}
for (const letter of "/counter") {
setState((state) => ({
...state,
chatInputText: state.chatInputText + letter,
}))
await delay(100)
}
await delay(1000)
await delay(1000)
setState((state) => ({
...state,
messageVisible: true,
chatInputText: "",
}))
await delay(1000)
setState((state) => ({
...state,
messageVisible: true,
chatInputText: "",
}))
await delay(1000)
setState((state) => ({
...state,
cursorLeft: "70px",
cursorBottom: "40px",
}))
await delay(1500)
setState((state) => ({
...state,
cursorLeft: "70px",
cursorBottom: "40px",
}))
await delay(1500)
for (let i = 0; i < 3; i++) {
setState((state) => ({
...state,
count: state.count + 1,
chatInputCursorVisible: false,
}))
animateClick(addRef.current!)
await delay(700)
}
for (let i = 0; i < 3; i++) {
setState((state) => ({
...state,
count: state.count + 1,
chatInputCursorVisible: false,
}))
animateClick(addRef.current!)
await delay(700)
}
await delay(500)
await delay(500)
setState((state) => ({
...state,
cursorLeft: "140px",
}))
await delay(1000)
setState((state) => ({
...state,
cursorLeft: "140px",
}))
await delay(1000)
animateClick(deleteRef.current!)
setState((state) => ({ ...state, messageVisible: false }))
await delay(1000)
animateClick(deleteRef.current!)
setState((state) => ({ ...state, messageVisible: false }))
await delay(1000)
setState(() => ({
...defaultState,
chatInputCursorVisible: false,
}))
await delay(500)
}
})()
setState(() => ({
...defaultState,
chatInputCursorVisible: false,
}))
await delay(500)
}
})()
return () => {
running = false
}
}, [])
return () => {
running = false
}
}, [])
useEffect(() => {
let running = true
useEffect(() => {
let running = true
void (async () => {
while (running) {
// check if the cursor is in the input
const cursorRect = cursorRef.current!.getBoundingClientRect()
const chatInputRect = chatInputRef.current!.getBoundingClientRect()
void (async () => {
while (running) {
// check if the cursor is in the input
const cursorRect = cursorRef.current!.getBoundingClientRect()
const chatInputRect = chatInputRef.current!.getBoundingClientRect()
const isOverInput =
cursorRef.current &&
chatInputRef.current &&
cursorRect.top + cursorRect.height / 2 > chatInputRect.top
const isOverInput =
cursorRef.current &&
chatInputRef.current &&
cursorRect.top + cursorRect.height / 2 > chatInputRect.top
cursorRef.current!.src = isOverInput ? cursorIbeamUrl : cursorUrl
cursorRef.current!.src = isOverInput ? cursorIbeamUrl : cursorUrl
await animationFrame()
}
})()
await animationFrame()
}
})()
return () => {
running = false
}
})
return () => {
running = false
}
})
return (
<div
className="grid gap-2 relative pointer-events-none select-none"
role="presentation"
>
<div
className={clsx(
"bg-slate-800 p-4 rounded-lg shadow transition",
state.messageVisible ? "opacity-100" : "opacity-0 -translate-y-2",
)}
>
<div className="flex items-start gap-4">
<div className="w-12 h-12 p-2 rounded-full bg-no-repeat bg-contain bg-black/25">
<img
src={blobComfyUrl}
alt=""
className="object-contain scale-90 w-full h-full"
/>
</div>
<div>
<p className="font-bold">comfybot</p>
<p>this button was clicked {state.count} times</p>
<div className="mt-2 flex flex-row gap-3">
<div
ref={addRef}
className="bg-emerald-700 text-white py-1.5 px-3 text-sm rounded"
>
+1
</div>
<div
ref={deleteRef}
className="bg-red-700 text-white py-1.5 px-3 text-sm rounded"
>
🗑 delete
</div>
</div>
</div>
</div>
</div>
<div
className="bg-slate-700 pb-2 pt-1.5 px-4 rounded-lg shadow"
ref={chatInputRef}
>
<span
className={clsx(
"text-sm after:content-[attr(data-after)] after:relative after:-top-px after:-left-[2px]",
state.chatInputCursorVisible
? "after:opacity-100"
: "after:opacity-0",
)}
data-after="|"
>
{state.chatInputText || (
<span className="opacity-50 block absolute translate-y-1">
Message #showing-off-reacord
</span>
)}
</span>
</div>
return (
<div
className="pointer-events-none relative grid select-none gap-2"
role="presentation"
>
<div
className={clsx(
"rounded-lg bg-slate-800 p-4 shadow transition",
state.messageVisible ? "opacity-100" : "-translate-y-2 opacity-0",
)}
>
<div className="flex items-start gap-4">
<div className="h-12 w-12 rounded-full bg-black/25 bg-contain bg-no-repeat p-2">
<img
src={blobComfyUrl}
alt=""
className="h-full w-full scale-90 object-contain"
/>
</div>
<div>
<p className="font-bold">comfybot</p>
<p>this button was clicked {state.count} times</p>
<div className="mt-2 flex flex-row gap-3">
<div
ref={addRef}
className="rounded bg-emerald-700 px-3 py-1.5 text-sm text-white"
>
+1
</div>
<div
ref={deleteRef}
className="rounded bg-red-700 px-3 py-1.5 text-sm text-white"
>
🗑 delete
</div>
</div>
</div>
</div>
</div>
<div
className="rounded-lg bg-slate-700 px-4 pb-2 pt-1.5 shadow"
ref={chatInputRef}
>
<span
className={clsx(
"text-sm after:relative after:-left-[2px] after:-top-px after:content-[attr(data-after)]",
state.chatInputCursorVisible
? "after:opacity-100"
: "after:opacity-0",
)}
data-after="|"
>
{state.chatInputText || (
<span className="absolute block translate-y-1 opacity-50">
Message #showing-off-reacord
</span>
)}
</span>
</div>
<img
src={cursorUrl}
alt=""
className="transition-all duration-500 absolute scale-75 bg-transparent"
style={{ left: state.cursorLeft, bottom: state.cursorBottom }}
ref={cursorRef}
/>
</div>
)
<img
src={cursorUrl}
alt=""
className="absolute scale-75 bg-transparent transition-all duration-500"
style={{ left: state.cursorLeft, bottom: state.cursorBottom }}
ref={cursorRef}
/>
</div>
)
}

12
packages/website/src/components/menu-item.astro
View File

@@ -1,13 +1,13 @@
---
export type Props = {
icon: (props: { class?: string; className?: string }) => any
label: string
export interface Props {
icon: (props: { class?: string; className?: string }) => unknown
label: string
}
---
<div
class="px-3 py-2 transition text-left font-medium block w-full opacity-50 inline-flex gap-1 items-center hover:opacity-100 hover:text-emerald-500"
class="flex w-full items-center gap-1 px-3 py-2 text-left font-medium opacity-50 transition hover:text-emerald-500 hover:opacity-100"
>
<Astro.props.icon class="inline-icon" className="inline-icon" />
<span class="flex-1">{Astro.props.label}</span>
<Astro.props.icon class="inline-icon" className="inline-icon" />
<span class="flex-1">{Astro.props.label}</span>
</div>

8
packages/website/src/components/nav-link.astro
View File

@@ -1,6 +1,6 @@
---
export type Props = astroHTML.JSX.AnchorHTMLAttributes & {
href: string
href: string
}
const removeTrailingSlash = (str: string) => str.replace(/\/$/, "")
@@ -8,10 +8,10 @@ const removeTrailingSlash = (str: string) => str.replace(/\/$/, "")
const linkUrl = new URL(Astro.props.href, Astro.url)
const isActive =
removeTrailingSlash(Astro.url.pathname) ===
removeTrailingSlash(linkUrl.pathname)
removeTrailingSlash(Astro.url.pathname) ===
removeTrailingSlash(linkUrl.pathname)
---
<a {...Astro.props} data-active={isActive || undefined}>
<slot />
<slot />
</a>

12
packages/website/src/content/config.ts
View File

@@ -1,10 +1,10 @@
import { defineCollection, z } from "astro:content"
export const collections = {
guides: defineCollection({
schema: z.object({
title: z.string(),
description: z.string(),
}),
}),
guides: defineCollection({
schema: z.object({
title: z.string(),
description: z.string(),
}),
}),
}

2
packages/website/src/content/guides/0-getting-started.md
View File

@@ -38,7 +38,7 @@ const client = new Client()
const reacord = new ReacordDiscordJs(client)
client.on("ready", () => {
console.log("Ready!")
console.log("Ready!")
})
await client.login(process.env.BOT_TOKEN)

122
packages/website/src/content/guides/1-sending-messages.md
View File

@@ -12,7 +12,7 @@ You can send messages via Reacord to a channel like so.
const channelId = "abc123deadbeef"
client.on("ready", () => {
reacord.send(channelId, "Hello, world!")
reacord.send(channelId, "Hello, world!")
})
```
@@ -22,21 +22,21 @@ Components rendered through this instance can include state and effects, and the
```jsx
function Uptime() {
const [startTime] = useState(Date.now())
const [currentTime, setCurrentTime] = useState(Date.now())
const [startTime] = useState(Date.now())
const [currentTime, setCurrentTime] = useState(Date.now())
useEffect(() => {
const interval = setInterval(() => {
setCurrentTime(Date.now())
}, 3000)
return () => clearInterval(interval)
}, [])
useEffect(() => {
const interval = setInterval(() => {
setCurrentTime(Date.now())
}, 3000)
return () => clearInterval(interval)
}, [])
return <>this message has been shown for {currentTime - startTime}ms</>
return <>this message has been shown for {currentTime - startTime}ms</>
}
client.on("ready", () => {
reacord.send(channelId, <Uptime />)
reacord.send(channelId, <Uptime />)
})
```
@@ -46,9 +46,9 @@ The instance can be rendered to multiple times, which will update the message ea
const Hello = ({ subject }) => <>Hello, {subject}!</>
client.on("ready", () => {
const instance = reacord.send(channel)
instance.render(<Hello subject="World" />)
instance.render(<Hello subject="Moon" />)
const instance = reacord.send(channel)
instance.render(<Hello subject="World" />)
instance.render(<Hello subject="Moon" />)
})
```
@@ -63,9 +63,9 @@ By default, Reacord has a max limit on the number of active instances, and deact
```js
const reacord = new ReacordDiscordJs(client, {
// after sending four messages,
// the first one will be deactivated
maxInstances: 3,
// after sending four messages,
// the first one will be deactivated
maxInstances: 3,
})
```
@@ -79,24 +79,24 @@ To reply to a command interaction, use the `.reply()` function. This function re
```jsx
import { Client } from "discord.js"
import * as React from "react"
import { Button, ReacordDiscordJs } from "reacord"
import * as React from "react"
const client = new Client({ intents: [] })
const reacord = new ReacordDiscordJs(client)
client.on("ready", () => {
client.application?.commands.create({
name: "ping",
description: "pong!",
})
client.application?.commands.create({
name: "ping",
description: "pong!",
})
})
client.on("interactionCreate", (interaction) => {
if (interaction.isCommand() && interaction.commandName === "ping") {
// Use the reply() function instead of send
reacord.reply(interaction, <>pong!</>)
}
if (interaction.isCommand() && interaction.commandName === "ping") {
// Use the reply() function instead of send
reacord.reply(interaction, <>pong!</>)
}
})
client.login(process.env.DISCORD_TOKEN)
@@ -110,40 +110,40 @@ However, the process of creating commands can get really repetitive and error-pr
```jsx
function handleCommands(client, commands) {
client.on("ready", () => {
for (const { name, description } of commands) {
client.application?.commands.create({ name, description })
}
})
client.on("ready", () => {
for (const { name, description } of commands) {
client.application?.commands.create({ name, description })
}
})
client.on("interactionCreate", (interaction) => {
if (interaction.isCommand()) {
for (const command of commands) {
if (interaction.commandName === command.name) {
command.run(interaction)
}
}
}
})
client.on("interactionCreate", (interaction) => {
if (interaction.isCommand()) {
for (const command of commands) {
if (interaction.commandName === command.name) {
command.run(interaction)
}
}
}
})
}
```
```jsx
handleCommands(client, [
{
name: "ping",
description: "pong!",
run: (interaction) => {
reacord.reply(interaction, <>pong!</>)
},
},
{
name: "hi",
description: "say hi",
run: (interaction) => {
reacord.reply(interaction, <>hi</>)
},
},
{
name: "ping",
description: "pong!",
run: (interaction) => {
reacord.reply(interaction, <>pong!</>)
},
},
{
name: "hi",
description: "say hi",
run: (interaction) => {
reacord.reply(interaction, <>hi</>)
},
},
])
```
@@ -153,13 +153,13 @@ Ephemeral replies are replies that only appear for one user. To create them, use
```tsx
handleCommands(client, [
{
name: "pong",
description: "pong, but in secret",
run: (interaction) => {
reacord.ephemeralReply(interaction, <>(pong)</>)
},
},
{
name: "pong",
description: "pong, but in secret",
run: (interaction) => {
reacord.ephemeralReply(interaction, <>(pong)</>)
},
},
])
```

48
packages/website/src/content/guides/2-embeds.md
View File

@@ -12,14 +12,14 @@ Reacord comes with an `<Embed />` component for sending rich embeds.
import { Embed } from "reacord"
function FancyMessage({ title, description }) {
return (
<Embed
title={title}
description={description}
color={0x00ff00}
timestamp={Date.now()}
/>
)
return (
<Embed
title={title}
description={description}
color={0x00ff00}
timestamp={Date.now()}
/>
)
}
```
@@ -33,30 +33,30 @@ Reacord also comes with multiple embed components, for defining embeds on a piec
import { Embed, EmbedTitle } from "reacord"
function FancyDetails({ title, description }) {
return (
<>
<EmbedTitle>{title}</EmbedTitle>
{/* embed descriptions are just text */}
{description}
</>
)
return (
<>
<EmbedTitle>{title}</EmbedTitle>
{/* embed descriptions are just text */}
{description}
</>
)
}
function FancyMessage({ children }) {
return (
<Embed color={0x00ff00} timestamp={Date.now()}>
{children}
</Embed>
)
return (
<Embed color={0x00ff00} timestamp={Date.now()}>
{children}
</Embed>
)
}
```
```jsx
reacord.send(
channelId,
<FancyMessage>
<FancyDetails title="Hello" description="World" />
</FancyMessage>,
channelId,
<FancyMessage>
<FancyDetails title="Hello" description="World" />
</FancyMessage>,
)
```

30
packages/website/src/content/guides/3-buttons.md
View File

@@ -12,14 +12,14 @@ Use the `<Button />` component to create a message with a button, and use the `o
import { Button } from "reacord"
function Counter() {
const [count, setCount] = useState(0)
const [count, setCount] = useState(0)
return (
<>
You've clicked the button {count} times.
<Button label="+1" onClick={() => setCount(count + 1)} />
</>
)
return (
<>
You've clicked the button {count} times.
<Button label="+1" onClick={() => setCount(count + 1)} />
</>
)
}
```
@@ -29,17 +29,17 @@ The `onClick` callback receives an `event` object. It includes some information,
import { Button } from "reacord"
function TheButton() {
function handleClick(event) {
const name = event.guild.member.displayName || event.user.username
function handleClick(event) {
const name = event.guild.member.displayName || event.user.username
const publicReply = event.reply(`${name} clicked the button. wow`)
setTimeout(() => publicReply.destroy(), 3000)
const publicReply = event.reply(`${name} clicked the button. wow`)
setTimeout(() => publicReply.destroy(), 3000)
const privateReply = event.ephemeralReply("good job, you clicked it")
privateReply.deactivate() // we don't need to listen to updates on this
}
const privateReply = event.ephemeralReply("good job, you clicked it")
privateReply.deactivate() // we don't need to listen to updates on this
}
return <Button label="click me i dare you" onClick={handleClick} />
return <Button label="click me i dare you" onClick={handleClick} />
}
```

12
packages/website/src/content/guides/4-links.md
View File

@@ -12,12 +12,12 @@ In Discord, links are a type of button, and they work similarly. Clicking on it
import { Link } from "reacord"
function AwesomeLinks() {
return (
<>
<Link label="look at this" url="https://google.com" />
<Link label="wow" url="https://youtube.com/watch?v=dQw4w9WgXcQ" />
</>
)
return (
<>
<Link label="look at this" url="https://google.com" />
<Link label="wow" url="https://youtube.com/watch?v=dQw4w9WgXcQ" />
</>
)
}
```

80
packages/website/src/content/guides/5-select-menu.md
View File

@@ -10,40 +10,40 @@ To create a select menu, use the `Select` component, and pass a list of `Option`
```jsx
export function FruitSelect({ onConfirm }) {
const [value, setValue] = useState()
const [value, setValue] = useState()
return (
<>
<Select
placeholder="choose a fruit"
value={value}
onChangeValue={setValue}
>
<Option value="🍎" />
<Option value="🍌" />
<Option value="🍒" />
</Select>
<Button
label="confirm"
disabled={value == undefined}
onClick={() => {
if (value) onConfirm(value)
}}
/>
</>
)
return (
<>
<Select
placeholder="choose a fruit"
value={value}
onChangeValue={setValue}
>
<Option value="🍎" />
<Option value="🍌" />
<Option value="🍒" />
</Select>
<Button
label="confirm"
disabled={value == undefined}
onClick={() => {
if (value) onConfirm(value)
}}
/>
</>
)
}
```
```jsx
const instance = reacord.send(
channelId,
<FruitSelect
onConfirm={(value) => {
instance.render(`you chose ${value}`)
instance.deactivate()
}}
/>,
channelId,
<FruitSelect
onConfirm={(value) => {
instance.render(`you chose ${value}`)
instance.deactivate()
}}
/>,
)
```
@@ -51,19 +51,19 @@ For a multi-select, use the `multiple` prop, then you can use `values` and `onCh
```tsx
export function FruitSelect({ onConfirm }) {
const [values, setValues] = useState([])
const [values, setValues] = useState([])
return (
<Select
placeholder="choose a fruit"
values={values}
onChangeMultiple={setValues}
>
<Option value="🍎" />
<Option value="🍌" />
<Option value="🍒" />
</Select>
)
return (
<Select
placeholder="choose a fruit"
values={values}
onChangeMultiple={setValues}
>
<Option value="🍎" />
<Option value="🍌" />
<Option value="🍒" />
</Select>
)
}
```

16
packages/website/src/content/guides/6-use-instance.md
View File

@@ -12,14 +12,14 @@ You can use `useInstance` to get the current [instance](/guides/sending-messages
import { Button, useInstance } from "reacord"
function SelfDestruct() {
const instance = useInstance()
return (
<Button
style="danger"
label="delete this"
onClick={() => instance.destroy()}
/>
)
const instance = useInstance()
return (
<Button
style="danger"
label="delete this"
onClick={() => instance.destroy()}
/>
)
}
reacord.send(channelId, <SelfDestruct />)

3
packages/website/src/env.d.ts vendored
View File

@@ -1,2 +1,3 @@
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />
/// <reference types="astro/client" />

2
packages/website/src/pages/guides/[slug].astro
View File

@@ -6,7 +6,7 @@ import Layout from "~/components/layout.astro"
import MainNavigation from "~/components/main-navigation.astro"
import NavLink from "~/components/nav-link.astro"
export type Props = {
export interface Props {
guide: CollectionEntry<"guides">
}

86
packages/website/src/styles/prism-theme.css
View File

@@ -7,59 +7,59 @@
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
background: none;
/* font-family: "Fira Code", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
color: #f8f8f2;
background: none;
/* font-family: "Fira Code", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
monospace; */
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.7;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.7;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
border-radius: 0.3em;
padding: 1em;
margin: 0.5em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
/* background: #2e3440; */
background: rgba(0, 0, 0, 0.3);
/* background: #2e3440; */
background: rgba(0, 0, 0, 0.3);
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #636f88;
color: #636f88;
}
.token.punctuation {
color: #81a1c1;
color: #81a1c1;
}
.namespace {
opacity: 0.7;
opacity: 0.7;
}
.token.property,
@@ -67,15 +67,15 @@ pre[class*="language-"] {
.token.constant,
.token.symbol,
.token.deleted {
color: #81a1c1;
color: #81a1c1;
}
.token.number {
color: #b48ead;
color: #b48ead;
}
.token.boolean {
color: #81a1c1;
color: #81a1c1;
}
.token.selector,
@@ -84,7 +84,7 @@ pre[class*="language-"] {
.token.char,
.token.builtin,
.token.inserted {
color: #a3be8c;
color: #a3be8c;
}
.token.operator,
@@ -93,41 +93,41 @@ pre[class*="language-"] {
.language-css .token.string,
.style .token.string,
.token.variable {
color: #81a1c1;
color: #81a1c1;
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
color: #88c0d0;
color: #88c0d0;
}
.token.keyword {
color: #81a1c1;
color: #81a1c1;
}
.token.regex,
.token.important {
color: #ebcb8b;
color: #ebcb8b;
}
.token.important,
.token.bold {
font-weight: bold;
font-weight: bold;
}
.token.italic {
font-style: italic;
font-style: italic;
}
.token.entity {
cursor: help;
cursor: help;
}
.code-line.highlight-line {
background-color: rgba(255, 255, 255, 0.08);
padding: 0 1rem;
margin: 0 -1rem;
display: block;
background-color: rgba(255, 255, 255, 0.08);
padding: 0 1rem;
margin: 0 -1rem;
display: block;
}

68
packages/website/src/styles/tailwind.css
View File

@@ -3,45 +3,45 @@
@tailwind utilities;
@layer base {
:focus {
@apply outline-none;
}
:focus-visible {
@apply ring-2 ring-emerald-500 ring-inset;
}
:focus {
@apply outline-none;
}
:focus-visible {
@apply ring-2 ring-inset ring-emerald-500;
}
pre,
code {
font-variant-ligatures: none;
}
pre,
code {
font-variant-ligatures: none;
}
}
@layer components {
.container {
@apply mx-auto w-full max-w-screen-lg px-4;
}
.container {
@apply mx-auto w-full max-w-screen-lg px-4;
}
.inline-icon {
@apply inline w-5 align-sub;
}
.inline-icon {
@apply inline w-5 align-sub;
}
.link {
@apply font-medium inline-block relative opacity-60 hover:opacity-100 transition-opacity;
}
.link::after {
@apply content-[''] bottom-[-2px] absolute block w-full h-px bg-current translate-y-[3px] opacity-0 transition;
}
.link:hover::after {
@apply -translate-y-px opacity-50;
}
.link-active {
@apply text-emerald-500 opacity-100;
}
.link {
@apply relative inline-block font-medium opacity-60 transition-opacity hover:opacity-100;
}
.link::after {
@apply absolute bottom-[-2px] block h-px w-full translate-y-[3px] bg-current opacity-0 transition content-[''];
}
.link:hover::after {
@apply -translate-y-px opacity-50;
}
.link-active {
@apply text-emerald-500 opacity-100;
}
.button {
@apply inline-block mt-4 px-4 py-2.5 text-xl transition rounded-lg bg-black/25 hover:bg-black/40 hover:-translate-y-0.5 hover:shadow active:translate-y-0 active:transition-none;
}
.button-solid {
@apply bg-emerald-700 hover:bg-emerald-800;
}
.button {
@apply mt-4 inline-block rounded-lg bg-black/25 px-4 py-2.5 text-xl transition hover:-translate-y-0.5 hover:bg-black/40 hover:shadow active:translate-y-0 active:transition-none;
}
.button-solid {
@apply bg-emerald-700 hover:bg-emerald-800;
}
}