diff --git a/app/(navigation)/(code)/assets/tinybird.svg b/app/(navigation)/(code)/assets/tinybird.svg new file mode 100644 index 00000000..cc35d9e2 --- /dev/null +++ b/app/(navigation)/(code)/assets/tinybird.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/app/(navigation)/(code)/components/Editor.module.css b/app/(navigation)/(code)/components/Editor.module.css index 26333734..0e2b7fd7 100644 --- a/app/(navigation)/(code)/components/Editor.module.css +++ b/app/(navigation)/(code)/components/Editor.module.css @@ -158,3 +158,8 @@ font-family: var(--font-soehne-mono), "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", monospace; font-weight: 400; } + +.iaWriterMono { + font-family: var(--font-ia-writer-mono), "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", monospace; + font-weight: 400; +} diff --git a/app/(navigation)/(code)/components/Editor.tsx b/app/(navigation)/(code)/components/Editor.tsx index 6e8560e9..61e73a42 100644 --- a/app/(navigation)/(code)/components/Editor.tsx +++ b/app/(navigation)/(code)/components/Editor.tsx @@ -250,7 +250,9 @@ function Editor() { ? styles.firaCode : themeFont === "soehne-mono" ? styles.soehneMono - : styles.jetBrainsMono, + : themeFont === "ia-writer-mono" + ? styles.iaWriterMono + : styles.jetBrainsMono, isHighlightingLines && styles.isHighlightingLines, showLineNumbers && selectedLanguage !== LANGUAGES.plaintext && [ diff --git a/app/(navigation)/(code)/components/Frame.module.css b/app/(navigation)/(code)/components/Frame.module.css index 9304ee9e..c8b125f2 100644 --- a/app/(navigation)/(code)/components/Frame.module.css +++ b/app/(navigation)/(code)/components/Frame.module.css @@ -913,3 +913,129 @@ display: none; } } + +.tinybirdFrame { + position: relative; + overflow: hidden; + background: #151515; + font-family: var(--font-ia-writer-mono); +} + +.tinybirdWindow { + position: relative; + z-index: 1; + border: 1px solid #c2c2c2; + border-bottom: none; + background: #151515; + clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); +} + +.tinybirdWindow { + mask-image: linear-gradient(to bottom, #151515 70%, transparent 100%); +} + +.tinybirdWindow::after { + position: absolute; + z-index: 100; + top: -4px; + right: -28px; + width: 59px; + height: 5px; + background: #c2c2c2; + content: ""; + transform: rotate(45deg); + transform-origin: left; +} + +.tinybirdHeader { + position: relative; + display: flex; + height: 32px; + align-items: center; + justify-content: flex-start; + padding: 0 12px; + background: #151515; + gap: 8px; +} + +.tinybirdHeader::before { + position: absolute; + right: -2px; + bottom: 0px; + left: 0px; + height: 1px; + background-image: linear-gradient(to right, transparent 0%, #27f795 10%, #27f795 100%); + content: ""; + mask-image: linear-gradient(to left, transparent 50%, #151515 99%, #151515 100%); +} + +.tinybirdCircle { + width: 12px; + height: 12px; + border: 2px solid #c2c2c2; + border-radius: 50%; + margin-right: 0px; + background-position: center; + background-repeat: no-repeat; + background-size: contain; +} + +.tinybirdCircleText { + color: #27f795; + font-size: 12px; + font-weight: 700; +} + +.tinybirdFileName { + position: relative; + display: grid; + align-items: center; + color: #ffffff; + font-size: 12px; + font-weight: 700; + + > input { + color: rgba(0, 0, 0, 0); + } + + > input:focus + span { + display: block; + } +} + +.tinybirdFrameLightMode { + background: #ffffff; + + .tinybirdWindow { + background: #ffffff; + } + + .tinybirdHeader { + background: #ffffff; + } + + .tinybirdCircleText { + color: #151515; + } + + .tinybirdFileName { + color: #151515; + } + + .tinybirdHeader::before { + background-image: none; + } + + .tinybirdWindow { + border: 1px solid #151515; + } + + .tinybirdWindow::after { + background: #151515; + } + + .tinybirdHeader::before { + background-image: linear-gradient(to right, transparent 0%, #151515 10%, #151515 100%); + mask-image: linear-gradient(to left, transparent 50%, #151515 99%, #151515 100%); + } +} diff --git a/app/(navigation)/(code)/components/Frame.tsx b/app/(navigation)/(code)/components/Frame.tsx index 8a4b44ac..472fe480 100644 --- a/app/(navigation)/(code)/components/Frame.tsx +++ b/app/(navigation)/(code)/components/Frame.tsx @@ -254,6 +254,45 @@ const OpenAIFrame = () => { ); }; +const TinybirdFrame = () => { + const [darkMode] = useAtom(darkModeAtom); + const [padding] = useAtom(paddingAtom); + const [showBackground] = useAtom(showBackgroundAtom); + const [fileName, setFileName] = useAtom(fileNameAtom); + + return ( +
+ {!showBackground &&
} +
+
+
tb {">"}
+
+ setFileName(event.target.value)} + spellCheck={false} + tabIndex={-1} + size={1} + /> + {fileName || "Untitled-1"} +
+
+ +
+
+
+ ); +}; + const DefaultFrame = () => { const [padding] = useAtom(paddingAtom); const isSafari = useIsSafari(); @@ -325,6 +364,8 @@ const Frame = ({ resize = true }: { resize?: boolean }) => { return ; case THEMES.prisma.id: return ; + case THEMES.tinybird.id: + return ; default: return ; } diff --git a/app/(navigation)/(code)/store/font.ts b/app/(navigation)/(code)/store/font.ts index f72e3b41..a919ef4d 100644 --- a/app/(navigation)/(code)/store/font.ts +++ b/app/(navigation)/(code)/store/font.ts @@ -1,6 +1,13 @@ import { atomWithHash } from "jotai-location"; -export const FONTS = ["jetbrains-mono", "geist-mono", "ibm-plex-mono", "fira-code", "soehne-mono"] as const; +export const FONTS = [ + "jetbrains-mono", + "geist-mono", + "ibm-plex-mono", + "fira-code", + "soehne-mono", + "ia-writer-mono", +] as const; export type Font = (typeof FONTS)[number]; diff --git a/app/(navigation)/(code)/store/themes.ts b/app/(navigation)/(code)/store/themes.ts index f4a7d8a5..0e046282 100644 --- a/app/(navigation)/(code)/store/themes.ts +++ b/app/(navigation)/(code)/store/themes.ts @@ -22,6 +22,8 @@ import MintlifyLogoUrl from "../assets/mintlify.svg?url"; import { showLineNumbersAtom } from "."; import { createCssVariablesTheme } from "../util/theme-css-variables"; import { BASE_URL } from "@/utils/common"; +import TinybirdLogo from "../assets/tinybird.svg"; +import TinybirdLogoUrl from "../assets/tinybird.svg?url"; export const shikiTheme = createCssVariablesTheme({ name: "css-variables", @@ -1007,6 +1009,53 @@ export const THEMES: { [index: string]: Theme } = { }), }, }, + tinybird: { + id: "tinybird", + name: "Tinybird", + background: { + from: "#27F795", + to: "#27F795", + }, + icon: TinybirdLogo, + iconUrl: `${BASE_URL}${TinybirdLogoUrl.src}`, + partner: true, + lineNumbers: false, + font: "ia-writer-mono", + syntax: { + light: convertToShikiTheme({ + foreground: "#151515", + constant: "#151515", + string: "#151515", + comment: "#151515", + keyword: "#151515", + parameter: "#151515", + function: "#151515", + stringExpression: "#151515", + punctuation: "#151515", + link: "#151515", + number: "#151515", + property: "#151515", + highlight: "rgba(0, 0, 0, 0.05)", + highlightHover: "rgba(0, 0, 0, 0.1)", + }), + dark: convertToShikiTheme({ + foreground: "#FFFFFF", + constant: "#FFFFFF", + string: "#FFFFFF", + comment: "#A5A7B4", + keyword: "#27F795", + parameter: "#A5A7B4", + function: "#27F795", + stringExpression: "#A5A7B4", + punctuation: "#FFFFFF", + link: "#A5A7B4", + number: "#A5A7B4", + property: "#FFFFFF", + highlight: "rgba(0, 0, 0, 0.05)", + highlightHover: "rgba(0, 0, 0, 0.1)", + }), + }, + }, }; const themeAtom = atomWithHash( diff --git a/app/(navigation)/layout.tsx b/app/(navigation)/layout.tsx index dcbcbb40..51165c34 100644 --- a/app/(navigation)/layout.tsx +++ b/app/(navigation)/layout.tsx @@ -22,6 +22,10 @@ const soehneMono = localFont({ src: "../assets/soehne-mono-buch.woff2", variable: "--font-soehne-mono", }); +const writerMono = localFont({ + src: "../assets/iAWriterMonoS-Regular.woff2", + variable: "--font-ia-writer-mono", +}); /** * We can't adjust the fallback stack of the font so instead we just extract the @@ -33,7 +37,14 @@ const geistMonoFontName = GeistMono.style.fontFamily.split(",")[0]; export default function NavigationLayout({ children }: { children: React.ReactNode }) { return (