[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Aperio or "Spotify for Science" An app built at the standards meeting (From Tools to Adoption: A Path to Modular & Interactive Scientific Publishing) in San Diego, funded by https://commons.datacite.org/doi.org/10.71707/gn91-ka32 *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/elifetechnology/v0-aperio-ui-design) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/cCMJJ6d842Y) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/elifetechnology/v0-aperio-ui-design](https://vercel.com/elifetechnology/v0-aperio-ui-design)** ## Build your app Continue building your app on: **[https://v0.app/chat/cCMJJ6d842Y](https://v0.app/chat/cCMJJ6d842Y)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescript:file="app/api/docmap/route.ts" import { type NextRequest, NextResponse } from "next/server" export async function GET(request: NextRequest) { const searchParams = request.nextUrl.searchParams const doi = searchParams.get("doi") if (!doi) { return NextResponse.json({ error: "DOI parameter is required" }, { status: 400 }) } try { const docmapUrl = `https://sciety.org/docmaps/v1/articles/${doi}.docmap.json` console.log("[v0] Server fetching DocMap:", docmapUrl) const response = await fetch(docmapUrl, { headers: { Accept: "application/json", }, }) if (!response.ok) { console.log("[v0] DocMap fetch failed with status:", response.status) return NextResponse.json({ error: "DocMap not found", status: response.status }, { status: response.status }) } const data = await response.json() console.log("[v0] DocMap fetched successfully for:", doi) return NextResponse.json(data) } catch (error) { console.error("[v0] Error fetching DocMap:", error) return NextResponse.json({ error: "Failed to fetch DocMap" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/feed/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/feed/page.tsx" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { ChevronDown, ExternalLink, Loader2, X, Eye, Shield, Unlock, Database, CheckCircle } from "lucide-react" import Link from "next/link" // Added import for Link component import { useSearchParams } from "next/navigation" // Added import for useSearchParams // Helper function to traverse MDAST tree for headings const traverseMdastForHeading = (node: any, headingText: string): boolean => { if (!node) return false // Check if this node is a heading with the target text if (node.type === "heading") { // Extract text from heading children const headingContent = extractTextFromNode(node) if (headingContent.toLowerCase().includes(headingText.toLowerCase())) { return true } } // Recursively check children if (node.children && Array.isArray(node.children)) { for (const child of node.children) { if (traverseMdastForHeading(child, headingText)) { return true } } } return false } // Helper function to traverse MDAST tree for data availability section text const traverseMdastForDataAvailability = (node: any, headingText: string): string | null => { if (!node) return null // Check if this node is a heading with the target text if (node.type === "heading") { const headingContent = extractTextFromNode(node) if (headingContent.toLowerCase().includes(headingText.toLowerCase())) { // Found the heading, now collect the content after it return collectContentAfterHeading(node) } } // Recursively check children if (node.children && Array.isArray(node.children)) { for (const child of node.children) { const result = traverseMdastForDataAvailability(child, headingText) if (result) return result } } // Also check siblings if we're in the parent context return null } // Helper to collect content after the Data Availability heading const collectContentAfterHeading = (headingNode: any): string => { // We need to find the parent and get siblings after this heading // For now, we'll just indicate presence. In a real implementation, // we'd need to traverse the parent's children array return "Data availability information is present in this paper." } const extractDataAvailabilityText = (mdast: any): string | null => { if (!mdast) return null // Recursively find the Data Availability heading at any level const findDataAvailabilitySection = (node: any, parentChildren?: any[]): string | null => { if (!node) return null // If this node has children, search through them if (node.children && Array.isArray(node.children)) { for (let i = 0; i < node.children.length; i++) { const child = node.children[i] // Check if this is a heading with "Data Availability" if (child.type === "heading") { const headingText = extractTextFromNode(child) if (headingText.toLowerCase().includes("data availability")) { console.log("[v0] Found Data Availability heading:", headingText) // Collect content after this heading within the same parent const contentParts: string[] = [] for (let j = i + 1; j < node.children.length; j++) { const nextNode = node.children[j] // Stop at the next heading if (nextNode.type === "heading") break // Extract text from this node const text = extractTextFromNode(nextNode) if (text.trim()) { contentParts.push(text.trim()) } } if (contentParts.length > 0) { return contentParts.join(" ") } } } // Recursively search this child's subtree const result = findDataAvailabilitySection(child, node.children) if (result) return result } } return null } return findDataAvailabilitySection(mdast) } const extractTextFromNode = (node: any): string => { if (!node) return "" if (node.type === "text") { return node.value || "" } if (node.children && Array.isArray(node.children)) { return node.children.map((child: any) => extractTextFromNode(child)).join("") } return "" } const stripHtml = (html: string): string => { if (!html) return "" // Create a temporary div to decode HTML entities const tmp = document.createElement("div") tmp.innerHTML = html return tmp.textContent || tmp.innerText || "" } export default function AperioHome() { const searchParams = useSearchParams() // Get query parameters const topicParam = searchParams.get("topic") const [initialLoading, setInitialLoading] = useState(!!topicParam) const [topics, setTopics] = useState([]) const [topicInput, setTopicInput] = useState("") const [showSuggestions, setShowSuggestions] = useState(false) const [keywordSuggestions, setKeywordSuggestions] = useState([]) const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false) const [feedBuilt, setFeedBuilt] = useState(false) const [isLoading, setIsLoading] = useState(false) const [feedPapers, setFeedPapers] = useState< Array<{ title: string authors: string year: number citations: number abstract: string topics: string[] doi: string | null publicationDate: string | null isOpenAccess: boolean license: string | null hasDataAvailability: boolean dataAvailabilityText: string | null // Added field for data availability text isPeerReviewed: boolean // Added field for peer review status type: string // Added field for work type }> >([]) const fetchKeywordSuggestions = async (query: string) => { if (!query || query.length < 2) { setKeywordSuggestions([]) return } setIsLoadingSuggestions(true) try { const url = `https://api.openalex.org/keywords?filter=default.search:${encodeURIComponent(query)}&per-page=10` console.log("[v0] Fetching keyword suggestions from OpenAlex:", url) const response = await fetch(url) const data = await response.json() console.log("[v0] OpenAlex keywords API response:", { count: data.results?.length || 0, keywords: data.results?.map((k: any) => k.display_name) || [], }) const keywords = data.results?.map((k: any) => k.display_name) || [] setKeywordSuggestions(keywords) } catch (error) { console.error("[v0] Error fetching keyword suggestions:", error) setKeywordSuggestions([]) } finally { setIsLoadingSuggestions(false) } } const addTopic = (topic: string) => { if (topic && !topics.includes(topic)) { setTopics([...topics, topic]) setTopicInput("") setShowSuggestions(false) setKeywordSuggestions([]) } } const removeTopic = (topicToRemove: string) => { setTopics(topics.filter((t) => t !== topicToRemove)) } const buildFeedWithTopics = async (topicsToUse: string[]) => { console.log("[v0] Starting to build feed with topics:", topicsToUse) setIsLoading(true) setFeedBuilt(false) setFeedPapers([]) const generatedPapers: typeof feedPapers = [] try { const hasChikungunyaVirus = topicsToUse.some((topic) => topic.toLowerCase().includes("chikungunya virus")) let priorityPaper: (typeof feedPapers)[0] | null = null if (hasChikungunyaVirus) { const priorityDOI = "10.1101/2025.09.29.679315" console.log("[v0] Fetching priority paper:", priorityDOI) try { const priorityUrl = `https://api.openalex.org/works/https://doi.org/${priorityDOI}?mailto=aperio@example.com` const priorityResponse = await fetch(priorityUrl) if (priorityResponse.ok) { const work = await priorityResponse.json() console.log("[v0] Priority paper fetched successfully:", work.title) const isOpenAccess = work.locations?.some((location: any) => location.is_oa === true) || false let license = null if (work.primary_location?.license) { license = work.primary_location.license } else if (work.best_oa_location?.license) { license = work.best_oa_location.license } let hasDataAvailability = false let dataAvailabilityText: string | null = null let isPeerReviewed = false const doi = work.doi ? work.doi.replace("https://doi.org/", "") : null if (doi && doi.startsWith("10.1101/")) { try { const curvenoteUrl = `https://overlay.curvenote.dev/doi/${doi}.json` const curvenoteResponse = await fetch(curvenoteUrl) if (curvenoteResponse.ok) { const curvenoteData = await curvenoteResponse.json() if (curvenoteData.mdast) { const dataText = extractDataAvailabilityText(curvenoteData.mdast) if (dataText) { hasDataAvailability = true dataAvailabilityText = dataText } } } } catch (error) { console.error("[v0] Error fetching Curvenote overlay:", error) } try { const docmapUrl = `/api/docmap?doi=${encodeURIComponent(doi)}` const docmapResponse = await fetch(docmapUrl) if (docmapResponse.ok) { const docmapData = await docmapResponse.json() console.log("[v0] DocMap fetched for:", doi) // DocMap response is an array of docmaps if (Array.isArray(docmapData)) { for (const docmap of docmapData) { if (docmap.steps) { // steps is an object with step IDs as keys for (const stepKey of Object.keys(docmap.steps)) { const step = docmap.steps[stepKey] if (step.actions && Array.isArray(step.actions)) { for (const action of step.actions) { if (action.outputs && Array.isArray(action.outputs)) { for (const output of action.outputs) { if (output.type === "review-article") { isPeerReviewed = true console.log("[v0] ✓ Peer review found for:", doi) break } } } if (isPeerReviewed) break } } if (isPeerReviewed) break } } if (isPeerReviewed) break } } if (!isPeerReviewed) { console.log("[v0] No peer review found for:", doi) } } else { console.log("[v0] DocMap response not OK:", docmapResponse.status) } } catch (error) { console.error("[v0] Error fetching DocMap:", error) } } const workType = work.type || "article" priorityPaper = { title: stripHtml(work.title || "Untitled"), authors: work.authorships ?.slice(0, 3) .map((a: any) => a.author?.display_name) .filter(Boolean) .join(", ") + (work.authorships?.length > 3 ? ", et al." : "") || "Unknown Authors", year: work.publication_year || new Date().getFullYear(), citations: work.cited_by_count || 0, abstract: work.abstract_inverted_index ? reconstructAbstract(work.abstract_inverted_index) : "No abstract available.", topics: work.concepts ?.slice(0, 3) .map((c: any) => c.display_name) .filter(Boolean) || ["Chikungunya virus"], doi, publicationDate: work.publication_date || null, isOpenAccess, license, hasDataAvailability, dataAvailabilityText, isPeerReviewed, type: workType, } } else { console.log("[v0] Priority paper fetch failed:", priorityResponse.status) } } catch (error) { console.error("[v0] Error fetching priority paper:", error) } } for (const topic of topicsToUse) { const url = `https://api.openalex.org/works?filter=default.search:${encodeURIComponent(topic)}&per-page=20&sort=relevance_score:desc&mailto=aperio@example.com` console.log("[v0] Fetching papers from OpenAlex API for topic:", topic) console.log("[v0] API URL:", url) const response = await fetch(url) const data = await response.json() console.log("[v0] OpenAlex API response for", topic, ":", { resultCount: data.results?.length || 0, metadata: data.meta, }) if (data.results) { const papers = await Promise.all( data.results.map(async (work: any) => { const isOpenAccess = work.locations?.some((location: any) => location.is_oa === true) || false // Try to find license from multiple sources let license = null if (work.primary_location?.license) { license = work.primary_location.license } else if (work.best_oa_location?.license) { license = work.best_oa_location.license } else if (work.open_access?.oa_url) { // Check locations array for license const oaLocation = work.locations?.find((loc: any) => loc.is_oa === true) if (oaLocation?.license) { license = oaLocation.license } } let hasDataAvailability = false let dataAvailabilityText: string | null = null let isPeerReviewed = false // Initialize peer review status const doi = work.doi ? work.doi.replace("https://doi.org/", "") : null // Check if this is a bioRxiv preprint using the correct DOI prefix if (doi && doi.startsWith("10.1101/")) { console.log("[v0] Checking bioRxiv paper:", doi) try { const curvenoteUrl = `https://overlay.curvenote.dev/doi/${doi}.json` console.log("[v0] Fetching Curvenote overlay:", curvenoteUrl) const curvenoteResponse = await fetch(curvenoteUrl) if (curvenoteResponse.ok) { const curvenoteData = await curvenoteResponse.json() console.log("[v0] Curvenote response OK, has mdast:", !!curvenoteData.mdast) // Check if mdast exists and extract data availability if (curvenoteData.mdast) { const dataText = extractDataAvailabilityText(curvenoteData.mdast) if (dataText) { hasDataAvailability = true dataAvailabilityText = dataText console.log("[v0] Data Availability found for:", doi, "Text length:", dataText.length) } else { console.log("[v0] No Data Availability section found in MDAST for:", doi) } } else { console.log("[v0] No mdast field found in Curvenote response for:", doi) } } else { console.log("[v0] Curvenote response not OK:", curvenoteResponse.status) } } catch (error) { console.error("[v0] Error fetching Curvenote overlay:", error) } try { const docmapUrl = `/api/docmap?doi=${encodeURIComponent(doi)}` console.log("[v0] Fetching DocMap via proxy:", docmapUrl) const docmapResponse = await fetch(docmapUrl) if (docmapResponse.ok) { const docmapData = await docmapResponse.json() console.log("[v0] DocMap fetched for:", doi) // DocMap response is an array of docmaps if (Array.isArray(docmapData)) { for (const docmap of docmapData) { if (docmap.steps) { // steps is an object with step IDs as keys for (const stepKey of Object.keys(docmap.steps)) { const step = docmap.steps[stepKey] if (step.actions && Array.isArray(step.actions)) { for (const action of step.actions) { if (action.outputs && Array.isArray(action.outputs)) { for (const output of action.outputs) { if (output.type === "review-article") { isPeerReviewed = true console.log("[v0] ✓ Peer review found for:", doi) break } } } if (isPeerReviewed) break } } if (isPeerReviewed) break } } if (isPeerReviewed) break } } if (!isPeerReviewed) { console.log("[v0] No peer review found for:", doi) } } else { console.log("[v0] DocMap response not OK:", docmapResponse.status) } } catch (error) { console.error("[v0] Error fetching DocMap:", error) } } const workType = work.type || "article" return { title: stripHtml(work.title || "Untitled"), authors: work.authorships ?.slice(0, 3) .map((a: any) => a.author?.display_name) .filter(Boolean) .join(", ") + (work.authorships?.length > 3 ? ", et al." : "") || "Unknown Authors", year: work.publication_year || new Date().getFullYear(), citations: work.cited_by_count || 0, abstract: work.abstract_inverted_index ? reconstructAbstract(work.abstract_inverted_index) : "No abstract available.", topics: work.concepts ?.slice(0, 3) .map((c: any) => c.display_name) .filter(Boolean) || [topic], doi, publicationDate: work.publication_date || null, isOpenAccess, license, hasDataAvailability, dataAvailabilityText, isPeerReviewed, // Add peer review status to paper object type: workType, } }), ) generatedPapers.push(...papers) } } const uniquePapers = generatedPapers.filter( (paper, index, self) => index === self.findIndex((p) => p.title === paper.title), ) let sortedPapers = uniquePapers if (priorityPaper) { // Remove it if it's already in the list to avoid duplicates sortedPapers = sortedPapers.filter((p) => p.doi !== priorityPaper!.doi) // Add it to the front sortedPapers = [priorityPaper, ...sortedPapers] console.log("[v0] Priority paper added to front of results:", priorityPaper.doi) } const top20Papers = sortedPapers.slice(0, 20) console.log("[v0] Total unique papers:", uniquePapers.length) console.log("[v0] Showing top 20 papers") console.log( "[v0] Papers:", top20Papers.map((p) => ({ title: p.title, year: p.year, date: p.publicationDate, doi: p.doi, hasDataAvailability: p.hasDataAvailability, isPeerReviewed: p.isPeerReviewed, type: p.type, })), ) setFeedPapers(top20Papers) setFeedBuilt(true) } catch (error) { console.error("[v0] Error fetching papers from OpenAlex:", error) alert("Failed to fetch papers from OpenAlex. Please try again.") } finally { setIsLoading(false) setInitialLoading(false) } } const handleBuildFeed = async () => { await buildFeedWithTopics(topics) } const handleExampleTopic = async () => { const exampleTopic = "Chikungunya virus" const updatedTopics = [...topics, exampleTopic] setTopics(updatedTopics) setFeedBuilt(false) setIsLoading(true) setFeedPapers([]) // Build feed with the updated topics immediately await buildFeedWithTopics(updatedTopics) } const reconstructAbstract = (invertedIndex: Record): string => { const words: [string, number][] = [] for (const [word, positions] of Object.entries(invertedIndex)) { for (const pos of positions) { words.push([word, pos]) } } words.sort((a, b) => a[1] - b[1]) const abstract = words.map((w) => w[0]).join(" ") return abstract.length > 300 ? abstract.slice(0, 300) + "..." : abstract } useEffect(() => { if (topicParam && !feedBuilt) { console.log("[v0] Topic parameter detected:", topicParam) const decodedTopic = decodeURIComponent(topicParam) setTopics([decodedTopic]) buildFeedWithTopics([decodedTopic]) } }, [topicParam]) useEffect(() => { if (feedBuilt && feedPapers.length > 0) { const timer = setTimeout(() => { console.log("[v0] Attempting to initialize scite badges") try { if (typeof window !== "undefined" && (window as any).__SCITE?.insertBadges) { ;(window as any).__SCITE.insertBadges() console.log("[v0] Scite badges initialized successfully") } else { console.log("[v0] __SCITE.insertBadges not available yet, will retry on next render") } } catch (error) { console.error("[v0] Error initializing scite badges:", error) } }, 1500) return () => clearTimeout(timer) } }, [feedBuilt, feedPapers]) if (initialLoading) { return (

{/* Left Sidebar */} {/* Main Content - Loading State */}

Building your personalized feed...

{/* Right Sidebar */}

) } return (

{/* Left Sidebar - Tidal-style navigation */} {/* Main Content - Tidal-style feed */}

{!feedBuilt ? ( <> {/* Hero Section */}

{/* Diamond Pattern Overlay */}

{/* Decorative Logo in top right */}

What's new for me?

Discover the latest research tailored to your interests

{/* Personalization Card - Tidal-inspired */}

Personalize Your Feed

Help us find the latest research relevant to you. We'll build a feed of timely papers from OpenAlex.

{/* Follow Topics */}

Follow Topics & Concepts

Enter keywords, categories, or fields (e.g., 'Machine Learning', 'CRISPR', 'Bioinformatics')

{ const value = e.target.value setTopicInput(value) setShowSuggestions(value.length > 0) fetchKeywordSuggestions(value) }} onKeyDown={(e) => { if (e.key === "Enter") { addTopic(topicInput) } }} className="bg-gray-800 border-gray-700 text-white placeholder:text-gray-500 h-12 rounded-lg" />

{/* Autosuggest Dropdown */} {showSuggestions && topicInput && (

{isLoadingSuggestions ? (

Loading suggestions...

) : keywordSuggestions.length > 0 ? ( keywordSuggestions.map((suggestion, idx) => ( )) ) : (

No keywords found

)}

{/* Selected Topics Pills */}

{topics.map((topic) => ( {topic} ))}

{/* CTA Button */}

) : ( <> {/* Feed Header */}

Your Personalized Feed

{feedPapers.length} papers found based on your interests

{/* Feed Table - Tidal-inspired track listing */}

{feedPapers.map((paper, idx) => (

{/* Main Content Column - consistent width for title and abstract */}

{/* Title */}

{paper.title}

{/* Badges */}

{paper.isOpenAccess && ( Open Access )} {paper.license && ( CC: { paper.license .replace("cc-", "") .replace("https://creativecommons.org/licenses/", "") .split("/")[0] } )} {paper.isPeerReviewed && ( Peer Reviewed )} {paper.hasDataAvailability && (

Data Available {paper.dataAvailabilityText && (

Data Availability Statement:

{paper.dataAvailabilityText}

)}

{/* Authors and Year */}

{paper.authors} • {paper.year}

{/* Abstract */}

{paper.abstract}

{/* Metrics */}

Citations

{paper.citations.toLocaleString()}

{paper.citations > 0 && (

Trust Score

{paper.doi ? (

) : (

N/A

)}

{/* Topics and Actions */}

{paper.topics.slice(0, 3).map((topic) => ( {topic} ))}

{paper.doi && ( )}

))}

{/* No Results State */} {feedPapers.length === 0 && (

No papers found for your selected topics. Try adding more topics or different keywords.

)} )}

{/* Right Sidebar - Empty but styled */}

) } [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0 0 0); /* Pure black */ --foreground: oklch(1 0 0); /* Pure white */ --card: oklch(0.1 0 0); /* Dark gray card */ --card-foreground: oklch(1 0 0); --popover: oklch(0.1 0 0); --popover-foreground: oklch(1 0 0); --primary: oklch(0.6 0.2 240); /* Blue primary */ --primary-foreground: oklch(1 0 0); --secondary: oklch(0.15 0 0); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.15 0 0); --muted-foreground: oklch(0.6 0 0); --accent: oklch(0.15 0 0); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.2 0 0); /* Subtle gray border */ --input: oklch(0.15 0 0); --ring: oklch(0.6 0.2 240); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.75rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Noto Sans", system-ui, -apple-system, sans-serif; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: #000000; --color-foreground: #ffffff; --color-card: #121212; --color-card-foreground: #ffffff; --color-popover: #121212; --color-popover-foreground: #ffffff; --color-primary: #3b82f6; --color-primary-foreground: #ffffff; --color-secondary: #1a1a1a; --color-secondary-foreground: #ffffff; --color-muted: #1a1a1a; --color-muted-foreground: #a3a3a3; --color-accent: #1a1a1a; --color-accent-foreground: #ffffff; --color-destructive: #dc2626; --color-destructive-foreground: #ffffff; --color-border: #262626; --color-input: #1a1a1a; --color-ring: #3b82f6; --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: #0f0f0f; --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } * { border-color: hsl(var(--border)); } body { font-feature-settings: "rlig" 1, "calt" 1; } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Noto_Sans } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const notoSans = Noto_Sans({ subsets: ["latin"], weight: ["400", "500", "600", "700"], variable: "--font-sans", }) export const metadata: Metadata = { title: "v0 App", description: "Created with v0", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (