Page not found.
10 |11 | For older versions try:{" "} 12 | 13 | {v0url} 14 | 15 |
16 |
6 | hey
7 |
8 | )
9 | }
10 | ```
11 |
--------------------------------------------------------------------------------
/demos/link/content.md:
--------------------------------------------------------------------------------
1 | ```js
2 | function lorem(ipsum, dolor = 1) {
3 | const sit = ipsum == null ? 0 : ipsum.sit
4 | dolor = sit - amet(dolor)
5 | // !link[/ipsum/] https://example.com
6 | return sit ? consectetur(ipsum) : []
7 | }
8 | ```
9 |
--------------------------------------------------------------------------------
/demos/callout/content.md:
--------------------------------------------------------------------------------
1 | ```js
2 | const lorem = ipsum(dolor, sit)
3 | // !callout[/amet/] This is a callout
4 | const [amet, consectetur] = [0, 0]
5 | lorem.adipiscing((sed, elit) => {
6 | if (sed) {
7 | amet += elit
8 | }
9 | })
10 | ```
11 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "all",
3 | "semi": false,
4 | "overrides": [
5 | {
6 | "files": ["*.mdx", "*.md"],
7 | "options": {
8 | "printWidth": 42,
9 | "semi": false
10 | }
11 | }
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/demos/annotations/groups/content.md:
--------------------------------------------------------------------------------
1 | ```jsx
2 | // !border[/className="(.*?)"/gm] pink
3 | function Foo() {
4 | return (
5 |
6 | hey
7 |
8 | )
9 | }
10 | ```
11 |
--------------------------------------------------------------------------------
/components/code/side-by-side.tsx:
--------------------------------------------------------------------------------
1 | export function SideBySide(props: React.HTMLProps
8 |
12 | )
13 | }
14 |
--------------------------------------------------------------------------------
/components/ui/collapsible.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
4 |
5 | const Collapsible = CollapsiblePrimitive.Root
6 |
7 | const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
8 |
9 | const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
10 |
11 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }
12 |
--------------------------------------------------------------------------------
/demos/c-cheat-sheet/asm-tricks/content.md:
--------------------------------------------------------------------------------
1 | ```c -cwn
2 | #include {new Date().toString()}
9 |
9 | hello, world
10 | 
11 |
12 | ),
13 | {
14 | width: 600,
15 | height: 400,
16 | },
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/app/api/revalidate/sponsors/route.ts:
--------------------------------------------------------------------------------
1 | import { revalidatePath } from "next/cache"
2 |
3 | export async function POST(request: Request) {
4 | try {
5 | const text = await request.text()
6 | console.log("[GitHub] Webhook received", text)
7 |
8 | revalidatePath("/")
9 | } catch (error: any) {
10 | return new Response(`Webhook error: ${error.message}`, {
11 | status: 400,
12 | })
13 | }
14 |
15 | return new Response("Success!", {
16 | status: 200,
17 | })
18 | }
19 |
--------------------------------------------------------------------------------
/app/api/revalidate/test/route.ts:
--------------------------------------------------------------------------------
1 | import { revalidatePath } from "next/cache"
2 |
3 | export async function POST(request: Request) {
4 | try {
5 | const text = await request.text()
6 | console.log("[GitHub] Webhook received", text)
7 |
8 | revalidatePath("/test")
9 | } catch (error: any) {
10 | return new Response(`Webhook error: ${error.message}`, {
11 | status: 400,
12 | })
13 | }
14 |
15 | return new Response("Success!", {
16 | status: 200,
17 | })
18 | }
19 |
--------------------------------------------------------------------------------
/components/annotations/focus.tsx:
--------------------------------------------------------------------------------
1 | import { AnnotationHandler, InnerLine } from "codehike/code"
2 | import { PreWithRef } from "./focus.client"
3 |
4 | export const focus: AnnotationHandler = {
5 | name: "focus",
6 | PreWithRef,
7 | onlyIfAnnotated: true,
8 | Line: (props) => (
9 |
11 |
16 | {displayTitle}: {children}
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/content/docs/python-cheat-sheet/bypass-commentary.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Bypass Commentary
3 | description: Bypass Commentary
4 | layout: PreviewAndImplementation
5 | ---
6 |
7 | import { CodeWithNotes } from "@/components/code/code-with-notes"
8 |
9 | ## !demo
10 |
11 | ### ding:hz and ~
12 |
13 |
14 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/demos/fold/page.tsx:
--------------------------------------------------------------------------------
1 | import { RawCode, Pre, highlight, AnnotationHandler } from "codehike/code"
2 | import Content from "./content.md"
3 | import { InlineFold } from "./annotations"
4 |
5 | export default function Page() {
6 | return
17 | {children}
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/components/annotations/fold.client.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { AnnotationHandler } from "codehike/code"
4 | import { useState } from "react"
5 |
6 | export const InlineFold: AnnotationHandler["Inline"] = ({
7 | annotation,
8 | children,
9 | }) => {
10 | const [folded, setFolded] = useState(true)
11 | if (!folded) {
12 | return children
13 | }
14 | return (
15 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/demos/filename/page.tsx:
--------------------------------------------------------------------------------
1 | import { RawCode, Pre, highlight } from "codehike/code"
2 | import Content from "./content.md"
3 |
4 | export default function Page() {
5 | return
12 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/components/providers/app-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import type { ReactNode } from "react"
4 | import dynamic from "next/dynamic"
5 | import { RootProvider } from "next-docs-ui/provider"
6 |
7 | const LocalSearchDialog = dynamic(() => import("@/components/search/local-search-dialog"), {
8 | ssr: false,
9 | })
10 |
11 | type AppProvidersProps = {
12 | children: ReactNode
13 | }
14 |
15 | export function AppProviders({ children }: AppProvidersProps) {
16 | return (
17 |
13 | {highlighted.meta}
14 |
15 |
16 |
13 | {annotation?.query}
14 |
15 |
16 |
17 |
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/content/docs/python-cheat-sheet/finding-sinks-from-modules.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Finding sinks from modules
3 | description: Finding sinks from modules
4 | layout: PreviewAndImplementation
5 | ---
6 |
7 | import { CodeWithNotes } from "@/components/code/code-with-notes"
8 |
9 | ## !demo
10 |
11 |
19 | {props.children}
20 |
21 |
11 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/demos/c-cheat-sheet/create-int/content.md:
--------------------------------------------------------------------------------
1 | ```c -cwn
2 | #include
12 |
19 |
13 | {left.children}
14 |
15 |
16 | {right.children}
17 |
18 | {caption?.children}
20 |
6 | Don't have time to build it yourself? Get a documentation component
7 | library customized for your tech stack and design system.
8 |
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/app/landing/demo.md:
--------------------------------------------------------------------------------
1 | ```jsx !page
2 | (lambda:...).__globals__
3 |
4 | // !rainbow(1:2)
5 | # obtain builtins from generators
6 | // !tt[/f_builtins/] foo
7 | (_ for _ in ()).gi_frame.f_builtins
8 | (await _ for _ in ()).ag_frame.f_builtins
9 |
10 | @exec
11 | @input
12 | // !callout[/def/] Can be class
13 | def a():
14 | // !rainbow(1:) 1
15 | pass
16 |
17 | # walrus operator (>= python3.8)
18 | // !diff +
19 | [a:=().__doc__, print(a)]
20 | // !diff -
21 | (lambda a: print(a))(().__doc__)
22 | ```
23 |
24 | ```py !content
25 | >>> import sys
26 | >>> frame = sys._getframe()
27 | >>>
28 | >>> frame.f_builtins == __builtins__.__dict__
29 | True
30 | >>> frame.f_builtins['abc'] = 3
31 | >>> frame.f_builtins['abc']
32 | 3
33 | >>> frame.f_builtins == __builtins__.__dict__
34 | True
35 | ```
36 |
--------------------------------------------------------------------------------
/content/docs/TEMPLATES/filename.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: File name
3 | description: Show the file name in the code block
4 | layout: PreviewAndImplementation
5 | ---
6 |
7 | ## !demo
8 |
9 | Show a title or file name with the code block.
10 |
11 |
23 |
28 | )
29 | }
30 | ```
31 |
--------------------------------------------------------------------------------
/components/copy-button.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { Copy, Check } from "lucide-react"
4 | import * as React from "react"
5 | import { cn } from "../lib/utils"
6 |
7 | export function CopyButton({
8 | text,
9 | className,
10 | }: {
11 | text: string
12 | className?: string
13 | }) {
14 | const [copied, setCopied] = React.useState(false)
15 |
16 | return (
17 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/demos/classname/page.tsx:
--------------------------------------------------------------------------------
1 | import { RawCode, Pre, highlight, AnnotationHandler } from "codehike/code"
2 | import Content from "./content.md"
3 |
4 | export default function Page() {
5 | return
24 | {highlighted.meta}
25 |
26 |
27 | {children}
23 | ),
24 | Inline: ({ annotation, children }) => (
25 | {children}
26 | ),
27 | }
28 |
--------------------------------------------------------------------------------
/content/blog/markdown.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Skeuomorphic Markdown
3 | description: Breaking the shackles of static content.
4 | date: 2023-12-24
5 | authors: [pomber]
6 | draft: true
7 | ---
8 |
9 | This is how markdown is usually used:
10 |
11 | ```js
12 | import { frontmatter, Content } from "./some.md"
13 | ```
14 |
15 | Examples:
16 |
17 | - https://docs.astro.build/en/guides/content-collections/
18 | - https://contentlayer.dev/docs/concepts/content-modeling-dc68721f
19 | - https://nuejs.org/blog/introducing-nuemark/
20 |
21 | One of the reasons why markdown has so good authoring experience is because of its focus on content, as oppose to presentation.
22 |
23 | This suits linear layouts, but it's not enough for more complex layouts. For more complex layouts we need to group pieces of content in sections, and put those sections in a hierarchy.
24 |
--------------------------------------------------------------------------------
/content/components/slideshow/slideshow.tsx:
--------------------------------------------------------------------------------
1 | import { Slides, Controls } from "./slides"
2 | import { Pre, RawCode, highlight } from "codehike/code"
3 |
4 | export function Slideshow({ hike }: { hike: any }) {
5 | return (
6 |
9 |
14 | ))}
15 | />
16 | )
17 | }
18 |
19 | async function Code({ codeblock }: { codeblock: RawCode }) {
20 | const info = await highlight(codeblock, "github-dark")
21 | return (
22 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/demos/annotations/groups/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return {step.children}
13 |
20 |
21 | {isOpen &&
23 | )
24 | }
25 | ```
26 |
27 | It also works if you selecte a word from a paragraph, try: button or `Carousel`.
28 |
--------------------------------------------------------------------------------
/app/landing/profile.md:
--------------------------------------------------------------------------------
1 | I ([@pomber](https://github.com/pomber)) am working full-time on this project. The official reason is that _I want to raise the bar on the formatting of technical content_, but the main reason is that I'm having a lot of fun building it.
2 |
3 | The goal of [Code Hike](https://codehike.org) is to provide the best experience for both authors and consumers of technical content on the web.
4 |
5 | Your sponsorship not only helps keep the project running but also supports the innovation that inspired some of your favorite websites.
6 |
7 | Sponsorship perks:
8 |
9 | - **$299/month or more**: I'll join your company's Slack channel for direct feedbacks and feature requests.
10 | - **$499/month or more**: You get a spot on our Top Sponsors (limited to 6 spots).
11 | - **$999/month or more**: You get up to 1 hour a month of personalized support (two 30-minute calls).
12 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/good-to-know/page.tsx:
--------------------------------------------------------------------------------
1 | import { RawCode, Pre, highlight, AnnotationHandler } from "codehike/code"
2 | import Content from "./content.md"
3 |
4 | export default function Page() {
5 | return {children}
23 | ),
24 | Inline: ({ annotation, children }) => (
25 | {children}
26 | ),
27 | }
28 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/magic-methods/page.tsx:
--------------------------------------------------------------------------------
1 | import { RawCode, Pre, highlight, AnnotationHandler } from "codehike/code"
2 | import Content from "./content.md"
3 |
4 | export default function Page() {
5 | return {children}
23 | ),
24 | Inline: ({ annotation, children }) => (
25 | {children}
26 | ),
27 | }
28 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/retrieving-builtins/page.tsx:
--------------------------------------------------------------------------------
1 | import { RawCode, Pre, highlight, AnnotationHandler } from "codehike/code"
2 | import Content from "./content.md"
3 |
4 | export default function Page() {
5 | return {children}
23 | ),
24 | Inline: ({ annotation, children }) => (
25 | {children}
26 | ),
27 | }
28 |
--------------------------------------------------------------------------------
/demos/c-cheat-sheet/without-lower-letters/content.md:
--------------------------------------------------------------------------------
1 | ```c -cwn
2 | // !callout[/echo/] to see avaible macro
3 | // echo "" | gcc -dM -E -
4 | #include Implementation
25 | {implementation.children} 26 | 27 | )} 28 | 29 | ) 30 | } 31 | -------------------------------------------------------------------------------- /demos/annotations/mark/page.tsx: -------------------------------------------------------------------------------- 1 | import Content from "./content.md" 2 | import { RawCode, Pre, highlight, InnerLine } from "codehike/code" 3 | import { AnnotationHandler } from "codehike/code" 4 | 5 | export default function Page() { 6 | return
25 |
27 | )
28 | },
29 | }
30 |
--------------------------------------------------------------------------------
/demos/annotations/basic/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return {children}
23 | ),
24 | }
25 |
26 | const bgHandler: AnnotationHandler = {
27 | name: "bg",
28 | Inline: ({ annotation, children }) => (
29 | {children}
30 | ),
31 | }
32 |
--------------------------------------------------------------------------------
/content/docs/TEMPLATES/link.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Link
3 | description: Add links to code snippets
4 | layout: PreviewAndImplementation
5 | ---
6 |
7 | ## !demo
8 |
9 | Add links to code snippets.
10 |
11 |
16 |
19 |
20 |
21 | )
22 | }
23 |
24 | export function CodeClient(props: { highlighted: HighlightedCode }) {
25 | const { highlighted } = props
26 | return (
27 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/content/blog/codeblocks.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Perfect codeblocks
3 | description: All the small details that make flawless codeblocks.
4 | date: 2024-01-02
5 | authors: [pomber]
6 | draft: true
7 | ---
8 |
9 | Lorem ipsum
10 |
11 | ```js
12 | const a = 1
13 |
14 | // !Collapse(1:3) collapsed
15 | function foo() {
16 | let b = 2
17 | return a + b
18 | }
19 |
20 | // !Collapse(1:3)
21 | function bar() {
22 | let b = 2
23 | return a + b
24 | }
25 |
26 | console.log(foo())
27 | ```
28 |
29 | Lorem ipsum
30 |
31 | Lorem ipsum
32 |
33 | Lorem ipsum
34 |
35 | Lorem ipsum
36 |
37 | Lorem ipsum
38 |
39 | Lorem ipsum
40 |
41 | Lorem ipsum
42 |
43 | Lorem ipsum
44 |
45 | Lorem ipsum
46 |
47 | Lorem ipsum
48 |
49 | Lorem ipsum
50 |
51 | Lorem ipsum
52 |
53 | Lorem ipsum
54 |
55 | Lorem ipsum
56 |
57 | Lorem ipsum
58 |
59 | Lorem ipsum
60 |
61 | Lorem ipsum
62 |
63 | Lorem ipsum
64 |
65 | Lorem ipsum
66 |
67 | Lorem ipsum
68 |
69 | Lorem ipsum
70 |
71 | Lorem ipsum
72 |
73 | Lorem ipsum
74 |
75 | Lorem ipsum
76 |
77 | Lorem ipsum
78 |
79 | Lorem ipsum
80 |
--------------------------------------------------------------------------------
/components/annotations/ruler.tsx:
--------------------------------------------------------------------------------
1 | import { AnnotationHandler } from "codehike/code"
2 |
3 | const colors = [
4 | "bg-green-500/20",
5 | "bg-teal-500/20",
6 | "bg-sky-500/20",
7 | "bg-violet-500/20",
8 | "bg-fuchsia-500/20",
9 | "bg-pink-500/20",
10 | // if adding more colors, dont forget to update global.css
11 | ]
12 |
13 | // needs ruler-group class in container
14 |
15 | export const ruler: AnnotationHandler = {
16 | name: "ruler",
17 | Block: ({ annotation, children }) => {
18 | const [k, c] = annotation.query?.split(" ")
19 | const n = Number(k || "1") % colors.length
20 | const bg = colors[n]
21 | return (
22 |
23 |
27 |
30 |
32 | )
33 | },
34 | }
35 |
--------------------------------------------------------------------------------
/demos/annotations/query/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return {children}
31 | {children}
24 | },
25 | }
26 |
27 | const bgHandler: AnnotationHandler = {
28 | name: "bg",
29 | Inline: ({ annotation, children }) => {
30 | const background = annotation.query || "#2d26"
31 | return {children}
32 | },
33 | }
34 |
--------------------------------------------------------------------------------
/demos/line-numbers/page.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | RawCode,
3 | Pre,
4 | highlight,
5 | AnnotationHandler,
6 | InnerLine,
7 | } from "codehike/code"
8 | import Content from "./content.md"
9 |
10 | export default function Page() {
11 | return
32 |
36 | {props.lineNumber}
37 |
38 |
40 | )
41 | },
42 | }
43 |
--------------------------------------------------------------------------------
/content/docs/TEMPLATES/classname.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: ClassName
3 | description: Add a class name to a piece of code
4 | layout: PreviewAndImplementation
5 | ---
6 |
7 | ## !demo
8 |
9 | Add a class name to a piece of code.
10 |
11 | {children}
22 | ),
23 | Inline: ({ annotation, children }) => (
24 | {children}
25 | ),
26 | }
27 | ```
28 |
29 | And then add the handler to your `Code` component:
30 |
31 | ```tsx code.tsx -c
32 | import { RawCode, Pre, highlight } from "codehike/code"
33 | import { className } from "./classname"
34 |
35 | async function Code({ codeblock }: { codeblock: RawCode }) {
36 | const highlighted = await highlight(codeblock, "github-dark")
37 | return
38 | }
39 | ```
40 |
--------------------------------------------------------------------------------
/app/blog/feed.xml/route.ts:
--------------------------------------------------------------------------------
1 | import RSS from "rss"
2 | import { blog } from "../../source"
3 |
4 | const posts = blog.getPages().filter((page) => page.data.draft !== true)
5 |
6 | export const dynamic = "force-static"
7 |
8 | export async function GET() {
9 | const feed = new RSS({
10 | title: "Code Hike",
11 | description: "Markdown, React and everything in between.",
12 | generator: "RSS for Node and Next.js",
13 | feed_url: "https://codehike.org/blog/feed.xml",
14 | site_url: "https://codehike.org/blog",
15 | language: "en-US",
16 | pubDate: new Date().toUTCString(),
17 | ttl: 120,
18 | image_url: "https://codehike.org/logo.png",
19 | })
20 |
21 | posts.map(({ data, url }) => {
22 | feed.item({
23 | title: data.title,
24 | description: data.description || "",
25 | url: `https://codehike.org${url}`,
26 | author: data.authors[0],
27 | date: data.date,
28 | })
29 | })
30 |
31 | return new Response(feed.xml({ indent: true }), {
32 | headers: {
33 | "Content-Type": "application/atom+xml; charset=utf-8",
34 | },
35 | })
36 | }
37 |
--------------------------------------------------------------------------------
/demos/slideshow/controls.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import { useSelectedIndex } from "codehike/utils/selection"
3 |
4 | export function Controls({ length }: { length: number }) {
5 | const [selectedIndex, setSelectedIndex] =
6 | useSelectedIndex()
7 |
8 | return (
9 |
10 |
18 | {[...Array(length)].map((_, i) => (
19 |
38 | )
39 | }
40 |
--------------------------------------------------------------------------------
/app/demo/content.mdx:
--------------------------------------------------------------------------------
1 | normal, extra spacer right
2 |
3 | ```js
4 | function lorem(ipsum, dolor = 1) {
5 | // !mark
6 | dolor = sit - amet(dolor)
7 | dolor = sit - amet(dolor)
8 | dolor = sit - amet(dolor)
9 | dolor = sit - amet(dolor)
10 | // !mark
11 | dolor = sit - amet(dolor)
12 | dolor = sit - amet(dolor)
13 | // !diff +
14 | dolor = sit - amet(dolor)
15 | dolor = sit - amet(dolor)
16 | dolor = sit - amet(dolor)
17 | dolor = sit - amet(dolor)
18 | // !collapse(1:3)
19 | dolor = sit - amet(dolor)
20 | // !callout[/sit/] hey
21 | dolor = sit - amet(dolor)
22 | dolor = sit - amet(dolor)
23 | }
24 | ```
25 |
26 |
27 |
28 | overflow
29 |
30 | ```js
31 | function lorem(ipsum, dolor = 1) {
32 | // !mark
33 | dolor = sit
34 | }
35 | ```
36 |
37 |
38 |
39 |
40 |
41 | wrap
42 |
43 | ```js w
44 | // !callout[/lorem/] hey
45 | function lorem(ipsum) {
46 | // !mark
47 | dolor = sit - amet(dolor) - consectetur(ipsum)
48 | // !callout[/dolor/] hey
49 | if (dolor === 1) {
50 | // !callout[/sit/] hey
51 | dolor = sit
52 | }
53 | }
54 | ```
55 |
56 |
57 |
--------------------------------------------------------------------------------
/content/blog/remotion/01.jsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 |
3 | // !mark(1:11)
4 | // !focus(1:11)
5 | const Schema = Block.extend({
6 | steps: z.array(
7 | Block.extend({
8 | code: HighlightedCodeBlock,
9 | }),
10 | ),
11 | })
12 | const { steps } = parseRoot(
13 | Content,
14 | Schema,
15 | )
16 |
17 | const STEP_FRAMES = 60
18 | function Video({ steps }) {
19 | return (
20 |
29 |
31 | {title}
19 |{children}
20 |
21 | {blocks.map((example) => (
22 |
29 | 
30 |
34 |
30 | {example.title}
31 | 32 | ))} 33 |
16 |
18 | )
19 | },
20 | Inline: ({ annotation, children }) => {
21 | const color = getColor(annotation)
22 | return (
23 |
30 | {children}
31 |
32 | )
33 | },
34 | }
35 |
36 | function getColor(annotation?: { query?: string }) {
37 | const n = Number(annotation?.query || "2") % colors.length
38 | return colors[n] || annotation?.query
39 | }
40 |
41 | const colors = [
42 | "#22c55e",
43 | "#14b8a6",
44 | "#0ea5e9",
45 | "#8b5cf6",
46 | "#d946ef",
47 | "#ec4899",
48 | ]
49 |
--------------------------------------------------------------------------------
/content/docs/TEMPLATES/line-numbers.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Line Numbers
3 | description: Line numbers
4 | layout: PreviewAndImplementation
5 | ---
6 |
7 | ## !demo
8 |
9 | Display line numbers.
10 |
11 |
27 |
31 | {props.lineNumber}
32 |
33 |
35 | )
36 | },
37 | }
38 | ```
39 |
40 | Pass it to the `handlers` prop of the `Pre` component:
41 |
42 | ```tsx code.tsx -c
43 | import { lineNumbers } from "./line-numbers"
44 |
45 | async function Code({ codeblock }: { codeblock: RawCode }) {
46 | const highlighted = await highlight(codeblock, "github-dark")
47 | return
48 | }
49 | ```
50 |
--------------------------------------------------------------------------------
/demos/tabs/page.tsx:
--------------------------------------------------------------------------------
1 | import { Pre, RawCode, highlight } from "codehike/code"
2 | import Content from "./content.mdx"
3 | import { Block, CodeBlock, parseProps } from "codehike/blocks"
4 | import { z } from "zod"
5 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
6 |
7 | export default async function Page() {
8 | return
31 | step.children)}
33 | />
34 |
35 |
33 |
39 |
40 |
20 | {props.children}
21 |
22 | )
23 | }
24 |
25 | function Link(props: { href?: string; children?: React.ReactNode }) {
26 | if (props.href?.startsWith("hover:")) {
27 | const hover = props.href.slice("hover:".length)
28 | return (
29 |
33 | {props.children}
34 |
35 | )
36 | } else {
37 | return
38 | }
39 | }
40 |
41 | async function Code({ codeblock }: { codeblock: RawCode }) {
42 | const highlighted = await highlight(codeblock, "github-dark")
43 | return
44 | }
45 |
46 | const hover: AnnotationHandler = {
47 | name: "hover",
48 | onlyIfAnnotated: true,
49 | Line: ({ annotation, ...props }) => (
50 |
27 |
29 | )
30 | },
31 | Inline: ({ annotation, children }) => {
32 | const color = annotation?.query || "rgb(14 165 233)"
33 | return (
34 |
41 | {children}
42 |
43 | )
44 | },
45 | }
46 |
47 | async function Code({ codeblock }: { codeblock: RawCode }) {
48 | const highlighted = await highlight(codeblock, "github-dark")
49 | return (
50 |
55 | )
56 | }
57 |
--------------------------------------------------------------------------------
/content/blog/remotion/03.jsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 |
3 | const Schema = Block.extend({
4 | steps: z.array(
5 | Block.extend({
6 | code: HighlightedCodeBlock,
7 | }),
8 | ),
9 | })
10 | const { steps } = parseRoot(
11 | Content,
12 | Schema,
13 | )
14 |
15 | const STEP_FRAMES = 60
16 | function Video({ steps }) {
17 | return (
18 |
52 | {children}
53 |
54 | )
55 | },
56 | }
57 |
58 | export function RemotionRoot() {
59 | return (
60 |
21 |
26 |
45 | )
46 | }
47 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/finding-sinks-from-modules-object-walker/content.md:
--------------------------------------------------------------------------------
1 | ```py -cwn
2 | $ objectwalker -m jinja2 --filter-module os --max-depth 15
3 | [FilterTypeIsModule] [module=os] [module_type=package] | jinja2.bccache.os
4 | [FilterTypeIsModule] [module=os] [module_type=package] | jinja2.environment.os
5 | [FilterTypeIsModule] [module=os] [module_type=package] | jinja2.loaders.os
6 | [FilterTypeIsModule] [module=os] [module_type=package] | jinja2.utils.os
7 | [FilterTypeIsModule] [module=os] [module_type=package] | jinja2.async_utils.inspect.os
8 | [FilterTypeIsModule] [module=os] [module_type=package] | jinja2.bccache.fnmatch.os
9 | [FilterTypeIsModule] [module=os] [module_type=package] | jinja2.bccache.tempfile._os
10 | [FilterTypeIsModule] [module=os] [module_type=package] | jinja2.clear_caches.__globals__["os"]
11 | [FilterTypeIsModule] [module=os] [module_type=package] | jinja2.filters.random._os
12 | [FilterTypeIsModule] [module=os] [module_type=package] | jinja2.is_undefined.__globals__["os"]
13 | [FilterTypeIsModule] [module=os] [module_type=package] | jinja2.loaders.posixpath.os
14 | [FilterTypeIsModule] [module=os] [module_type=package] | jinja2.nodes.inspect.os
15 | [FilterTypeIsModule] [module=os] [module_type=package] | jinja2.pass_context.__globals__["os"]
16 | [FilterTypeIsModule] [module=os] [module_type=package] | jinja2.pass_environment.__globals__["os"]
17 | [FilterTypeIsModule] [module=os] [module_type=package] | jinja2.pass_eval_context.__globals__["os"]
18 | [FilterTypeIsModule] [module=os] [module_type=package] | jinja2.select_autoescape.__globals__["os"]
19 | ```
--------------------------------------------------------------------------------
/content/docs/TEMPLATES/diff.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Diff
3 | description: Diff
4 | layout: PreviewAndImplementation
5 | ---
6 |
7 | ## !demo
8 |
9 | Show inserted and deleted lines.
10 |
11 |
27 |
43 |
44 |
34 | {annotation?.query}
35 |
36 |
36 | {props.children}
37 |
38 |
55 |
58 | )
59 | }
60 | ```
61 |
--------------------------------------------------------------------------------
/content/components/slideshow/slides.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import * as React from "react"
3 |
4 | const StepIndexContext = React.createContext<
5 | [number, React.Dispatch
31 |
39 | {[...Array(length)].map((_, i) => (
40 |
59 | )
60 | }
61 |
--------------------------------------------------------------------------------
/app/test/content.md:
--------------------------------------------------------------------------------
1 | ## The mother of all codeblocks
2 |
3 | ```js foo.js -awnc
4 | // !collapse(1:4)
5 | function lorem(ipsum, dolor = 1) {
6 | const sit = ipsum == null ? 0 : ipsum.sit
7 | // !mark(1:2)
8 | dolor = sit - amet(dolor)
9 | // !callout[/sit/] lorem ipsum dolor sit
10 | return sit ? consectetur(ipsum) : []
11 | }
12 |
13 | // !collapse(1:4) collapsed
14 | function ipsum(ipsum, dolor = 1) {
15 | const sit = ipsum == null ? 0 : ipsum.sit
16 | // !mark(1:2)
17 | dolor = sit - amet(dolor)
18 | return sit ? consectetur(ipsum) : []
19 | }
20 | ```
21 |
22 | ```js foo.js -anc
23 | // !collapse(1:4)
24 | function lorem(ipsum, dolor = 1) {
25 | const sit = ipsum == null ? 0 : ipsum.sit
26 | // !mark(1:2)
27 | dolor = sit - amet(dolor)
28 | // !callout[/sit/] lorem ipsum dolor sit
29 | return sit ? consectetur(ipsum) : []
30 | }
31 |
32 | // !collapse(1:4) collapsed
33 | function ipsum(ipsum, dolor = 1) {
34 | const sit = ipsum == null ? 0 : ipsum.sit
35 | // !mark(1:2)
36 | dolor = sit - amet(dolor)
37 | return sit ? consectetur(ipsum) : []
38 | }
39 | ```
40 |
41 | ```js -c
42 | function lorem(ipsum, dolor = 1) {
43 | const sit = ipsum == null ? 0 : ipsum.sit
44 | // !mark(1:2)
45 | dolor = sit - amet(dolor)
46 | // !callout[/sit/] lorem ipsum dolor sit
47 | return sit ? consectetur(ipsum) : []
48 | }
49 |
50 | function ipsum(ipsum, dolor = 1) {
51 | const sit = ipsum == null ? 0 : ipsum.sit
52 | // !mark(1:2)
53 | dolor = sit - amet(dolor)
54 | return sit ? consectetur(ipsum) : []
55 | }
56 | ```
57 |
58 | ```bash -c
59 | npx create-next-app -e https://github.com/code-hike/v1-starter
60 | ```
61 |
--------------------------------------------------------------------------------
/ui/tabs-toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import { ToggleGroup, ToggleGroupItem } from "./toggle-group"
3 |
4 | import React from "react"
5 |
6 | const TabsContext = React.createContext{children}
17 | {option.content}
53 | }
54 |
--------------------------------------------------------------------------------
/components/annotations/callout.tsx:
--------------------------------------------------------------------------------
1 | import { AnnotationHandler, InlineAnnotation, InnerLine } from "codehike/code"
2 |
3 | export const callout: AnnotationHandler = {
4 | name: "callout",
5 | transform: (annotation: InlineAnnotation) => {
6 | // transform inline annotation to block annotation
7 | const { name, query, lineNumber, fromColumn, toColumn } = annotation
8 | return {
9 | name,
10 | query,
11 | fromLineNumber: lineNumber,
12 | toLineNumber: lineNumber,
13 | data: {
14 | ...annotation.data,
15 | column: (fromColumn + toColumn) / 2,
16 | },
17 | }
18 | },
19 | AnnotatedLine: ({ annotation, ...props }) => {
20 | const { column } = annotation.data
21 | const { indentation, children } = props
22 | return (
23 |
32 |
36 | {annotation.data.children || (
37 |
40 | {annotation.query}
38 | )}
39 |
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/demos/c-cheat-sheet/asm-tricks/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/demos/c-cheat-sheet/diagraphs/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/demos/c-cheat-sheet/good-to-know/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/demos/c-cheat-sheet/trigraphs/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/app/demo/client.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import {
4 | AnnotationHandler,
5 | CustomPreProps,
6 | InnerPre,
7 | getPreRef,
8 | } from "codehike/code"
9 | import { forwardRef } from "react"
10 | import React from "react"
11 | import {
12 | TokenTransitionsSnapshot,
13 | calculateTransitions,
14 | getStartingSnapshot,
15 | } from "codehike/utils/token-transitions"
16 |
17 | const MAX_TRANSITION_DURATION = 900 // milliseconds
18 | export class SmoothPre extends React.Component
42 |
49 | )
50 |
51 | return (
52 |
45 | {children}
46 |
47 | )}
48 | *]:flex-1 [&>*]:min-w-72",
55 | className,
56 | )}
57 | >
58 | {displayUsage && (
59 |
63 | )
64 | }
65 |
--------------------------------------------------------------------------------
/demos/focus/code.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { HighlightedCode, Pre } from "codehike/code"
4 | import React, { useState } from "react"
5 | import { focus } from "./focus"
6 |
7 | const ranges = {
8 | lorem: { fromLineNumber: 1, toLineNumber: 5 },
9 | ipsum: { fromLineNumber: 7, toLineNumber: 11 },
10 | dolor: { fromLineNumber: 11, toLineNumber: 15 },
11 | }
12 |
13 | export function CodeContainer({ code }: { code: HighlightedCode }) {
14 | const [focused, setFocused] = useState<"lorem" | "ipsum" | "dolor">("dolor")
15 |
16 | return (
17 | <>
18 |
32 | {usage}
60 | )}
61 | {preview}
62 |
33 | You can also change the focus annotations on a rendered codeblock:
34 |
35 |
36 | {" "}
43 |
50 |
51 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/app/blog/og/page.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image"
2 | import { CodeHikeLogo } from "../../../ui/nav"
3 |
4 | const title = "The Curse of Markdown"
5 | const description = "And the content website wasteland"
6 | const date = "November 21, 2024"
7 |
8 | import pomber from "../[slug]/pomber.jpg"
9 |
10 | export default function Page() {
11 | return (
12 |
13 |
45 | )
46 | }
47 |
--------------------------------------------------------------------------------
/content/docs/TEMPLATES/transpile.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Transpile
3 | description: Show code together with its transpiled version
4 | layout: PreviewAndImplementation
5 | ---
6 |
7 | ## !demo
8 |
9 | Sometimes you have a code block that you want to show together with its versions in different languages. It may be typescript and javascript, or sass and css, or maybe you want to transform a cURL command into calls to SDKs in different languages.
10 |
11 | If you are using React Server Components and you have a function to transpile the code, you can call that function inside the component.
12 |
13 | Here's an example showing how to transpile a typescript code block to javascript, and then showing both versions in tabs:
14 |
15 |
17 |
27 |
29 |
44 |
18 |
19 |
25 | {title}
26 |
27 | {description}
28 |
29 |
30 |
43 |
39 |
42 | Rodrigo Pombo
40 | @pomber
41 |
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/app/landing/sponsors/gh-sponsors.js:
--------------------------------------------------------------------------------
1 | require("dotenv").config({ path: ".env.local" })
2 |
3 | const GITHUB_TOKEN = process.env.GITHUB_TOKEN
4 | if (!GITHUB_TOKEN) {
5 | console.log("Missing process.env.GITHUB_TOKEN")
6 | process.exit(1)
7 | }
8 |
9 | async function fetchSponsors() {
10 | let pageInfo = { hasNextPage: true, endCursor: null }
11 | let sponsors = []
12 |
13 | while (pageInfo.hasNextPage) {
14 | const page = await fetchPage(pageInfo.endCursor)
15 | sponsors = sponsors.concat(page.nodes)
16 | pageInfo = page.pageInfo
17 | }
18 |
19 | return sponsors.map(({ sponsor, amountInCents }) => ({
20 | name: sponsor.login,
21 | amount: Math.round(amountInCents / 100),
22 | }))
23 | }
24 |
25 | async function fetchPage(cursor) {
26 | const query = `{
27 | organization(login: "code-hike") {
28 | lifetimeReceivedSponsorshipValues(first: 100, after: "${cursor}") {
29 | nodes {
30 | amountInCents
31 | sponsor {
32 | ... on User { login }
33 | ... on Organization { login }
34 | }
35 | }
36 | pageInfo {
37 | endCursor
38 | hasNextPage
39 | }
40 | }
41 | }
42 | }`
43 | const r = await fetch("https://api.github.com/graphql", {
44 | method: "POST",
45 | body: JSON.stringify({ query }),
46 | headers: { Authorization: "bearer " + GITHUB_TOKEN },
47 | })
48 | if (!r.ok) {
49 | console.error(r)
50 | return
51 | }
52 | const { data, errors } = await r.json()
53 | if (errors) {
54 | console.error(JSON.stringify(errors))
55 | return
56 | }
57 | return data.organization.lifetimeReceivedSponsorshipValues
58 | }
59 |
60 | module.exports = fetchSponsors
61 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/base-execption/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/create-digits/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/format-string/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/unicode-bypass/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/environment-variables/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/pickle-cheat-sheet/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/without-parenthesis/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/bypass-commentary-ding/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/create-char-and-string/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/finding-sinks-from-modules/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/bypass-commentary-zip-confusion/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/pickle-with-only-one-global/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/demos/python-cheat-sheet/finding-sinks-from-modules-object-walker/page.tsx:
--------------------------------------------------------------------------------
1 | import Content from "./content.md"
2 | import { RawCode, Pre, highlight } from "codehike/code"
3 | import { InlineAnnotation, AnnotationHandler } from "codehike/code"
4 |
5 | export default function Page() {
6 | return
42 |
46 | {annotation.query}
47 |
48 |
49 | )
50 | },
51 | }
52 |
--------------------------------------------------------------------------------
/ui/toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TogglePrimitive from "@radix-ui/react-toggle"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const toggleVariants = cva(
10 | "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300",
11 | {
12 | variants: {
13 | variant: {
14 | default: "bg-transparent",
15 | tabs: "hover:bg-zinc-700 hover:text-zinc-200 text-zinc-400 data-[state=on]:text-zinc-100",
16 | outline:
17 | "border border-zinc-200 bg-transparent hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
18 | },
19 | size: {
20 | default: "h-10 px-3",
21 | sm: "h-6 px-2 -m-1 text-xs",
22 | lg: "h-11 px-5",
23 | },
24 | },
25 | defaultVariants: {
26 | variant: "default",
27 | size: "default",
28 | },
29 | },
30 | )
31 |
32 | const Toggle = React.forwardRef<
33 | React.ElementRef