├── app ├── favicon.ico ├── globals.css ├── layout.tsx ├── page.tsx └── api │ └── summarize │ └── route.ts ├── public ├── og-image.png ├── robots.txt ├── sitemap.xml ├── placeholder-logo.png ├── placeholder.jpg ├── placeholder-user.jpg ├── placeholder-logo.svg └── placeholder.svg ├── postcss.config.mjs ├── lib ├── utils.ts └── api.ts ├── components ├── ui │ ├── aspect-ratio.tsx │ ├── skeleton.tsx │ ├── collapsible.tsx │ ├── use-mobile.tsx │ ├── textarea.tsx │ ├── label.tsx │ ├── input.tsx │ ├── progress.tsx │ ├── separator.tsx │ ├── toaster.tsx │ ├── sonner.tsx │ ├── checkbox.tsx │ ├── slider.tsx │ ├── switch.tsx │ ├── badge.tsx │ ├── tooltip.tsx │ ├── hover-card.tsx │ ├── popover.tsx │ ├── avatar.tsx │ ├── radio-group.tsx │ ├── toggle.tsx │ ├── alert.tsx │ ├── scroll-area.tsx │ ├── resizable.tsx │ ├── toggle-group.tsx │ ├── tabs.tsx │ ├── button.tsx │ ├── card.tsx │ ├── accordion.tsx │ ├── input-otp.tsx │ ├── calendar.tsx │ ├── breadcrumb.tsx │ ├── pagination.tsx │ ├── table.tsx │ ├── drawer.tsx │ ├── dialog.tsx │ ├── sheet.tsx │ ├── use-toast.ts │ ├── form.tsx │ ├── alert-dialog.tsx │ ├── toast.tsx │ ├── navigation-menu.tsx │ ├── command.tsx │ ├── select.tsx │ ├── carousel.tsx │ ├── context-menu.tsx │ └── dropdown-menu.tsx ├── theme-provider.tsx ├── credit-text.tsx ├── headlines.tsx ├── logo-icon.tsx ├── results-section.tsx ├── github-link.tsx ├── animated-background.tsx ├── video-metadata.tsx ├── error-message.tsx ├── transcript-card.tsx ├── loading-indicator.tsx ├── hero-section.tsx ├── copy-button.tsx ├── footer.tsx ├── summary-card.tsx ├── language-selector.tsx ├── url-input-form.tsx └── faq-section.tsx ├── .gitignore ├── components.json ├── next-sitemap.config.js ├── hooks ├── use-mobile.tsx └── use-toast.ts ├── tsconfig.json ├── package.json ├── next.config.mjs ├── styles └── globals.css ├── tailwind.config.ts ├── README.md └── middleware.ts /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeXfolio/youtube-summarizer/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /public/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeXfolio/youtube-summarizer/HEAD/public/og-image.png -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /components/ui/aspect-ratio.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" 4 | 5 | const AspectRatio = AspectRatioPrimitive.Root 6 | 7 | export { AspectRatio } 8 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # * 2 | User-agent: * 3 | Allow: / 4 | Disallow: /api/* 5 | 6 | # Host 7 | Host: https://ytbsum.codexfolio.com 8 | 9 | # Sitemaps 10 | Sitemap: https://ytbsum.codexfolio.com/sitemap.xml 11 | -------------------------------------------------------------------------------- /components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils" 2 | 3 | function Skeleton({ 4 | className, 5 | ...props 6 | }: React.HTMLAttributes) { 7 | return ( 8 |
12 | ) 13 | } 14 | 15 | export { Skeleton } 16 | -------------------------------------------------------------------------------- /components/theme-provider.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import * as React from 'react' 4 | import { 5 | ThemeProvider as NextThemesProvider, 6 | type ThemeProviderProps, 7 | } from 'next-themes' 8 | 9 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) { 10 | return {children} 11 | } 12 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # next.js 7 | /.next/ 8 | /out/ 9 | 10 | # production 11 | /build 12 | 13 | # debug 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | .pnpm-debug.log* 18 | 19 | # env files 20 | .env* 21 | 22 | # vercel 23 | .vercel 24 | 25 | # typescript 26 | *.tsbuildinfo 27 | next-env.d.ts -------------------------------------------------------------------------------- /components/credit-text.tsx: -------------------------------------------------------------------------------- 1 | export function CreditText() { 2 | return ( 3 |
4 |

5 | Built with ❤️ by{" "} 6 | 12 | codeXfolio 13 | 14 |

15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /components/headlines.tsx: -------------------------------------------------------------------------------- 1 | export function Headlines() { 2 | return ( 3 |
4 |

5 | Summarize Any YouTube Video Instantly 6 |

7 |

8 | Paste a YouTube link and get a clean transcript with an AI-powered summary. 9 |

10 |
11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "app/globals.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } -------------------------------------------------------------------------------- /public/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | https://ytbsum.codexfolio.com2025-05-25T12:48:50.131Zdaily0.7 4 | -------------------------------------------------------------------------------- /next-sitemap.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next-sitemap').IConfig} */ 2 | module.exports = { 3 | siteUrl: process.env.SITE_URL || "https://ytbsum.codexfolio.com", 4 | generateRobotsTxt: true, 5 | generateIndexSitemap: false, 6 | changefreq: "daily", 7 | priority: 0.7, 8 | sitemapSize: 7000, 9 | exclude: ["/api/*"], 10 | robotsTxtOptions: { 11 | additionalSitemaps: [], 12 | policies: [ 13 | { 14 | userAgent: "*", 15 | allow: "/", 16 | disallow: ["/api/*"], 17 | }, 18 | ], 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /public/placeholder-logo.png: -------------------------------------------------------------------------------- 1 | �PNG 2 |  3 | IHDR�M��0PLTEZ? tRNS� �@��`P0p���w �IDATx��ؽJ3Q�7'��%�|?� ���E�l�7���(X�D������w`����[�*t����D���mD�}��4; ;�DDDDDDDDDDDD_�_İ��!�y�`�_�:�� ;Ļ�'|� ��;.I"����3*5����J�1�� �T��FI�� ��=��3܃�2~�b���0��U9\��]�4�#w0��Gt\&1 �?21,���o!e�m��ĻR�����5�� ؽAJ�9��R)�5�0.FFASaǃ�T�#|�K���I�������1� 4 | M������N"��$����G�V�T� ��T^^��A�$S��h(�������G]co"J׸^^�'�=���%� �W�6Ы�W��w�a�߇*�^^�YG�c���`'F����������������^5_�,�S�%IEND�B`� -------------------------------------------------------------------------------- /components/logo-icon.tsx: -------------------------------------------------------------------------------- 1 | import { Play, Sparkles } from "lucide-react" 2 | 3 | export function LogoIcon() { 4 | return ( 5 |
6 |
7 |
8 | 9 |
10 |
11 | 12 |
13 |
14 |
15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /hooks/use-mobile.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | const MOBILE_BREAKPOINT = 768 4 | 5 | export function useIsMobile() { 6 | const [isMobile, setIsMobile] = React.useState(undefined) 7 | 8 | React.useEffect(() => { 9 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) 10 | const onChange = () => { 11 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 12 | } 13 | mql.addEventListener("change", onChange) 14 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 15 | return () => mql.removeEventListener("change", onChange) 16 | }, []) 17 | 18 | return !!isMobile 19 | } 20 | -------------------------------------------------------------------------------- /components/ui/use-mobile.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | const MOBILE_BREAKPOINT = 768 4 | 5 | export function useIsMobile() { 6 | const [isMobile, setIsMobile] = React.useState(undefined) 7 | 8 | React.useEffect(() => { 9 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) 10 | const onChange = () => { 11 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 12 | } 13 | mql.addEventListener("change", onChange) 14 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 15 | return () => mql.removeEventListener("change", onChange) 16 | }, []) 17 | 18 | return !!isMobile 19 | } 20 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "target": "ES6", 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /components/results-section.tsx: -------------------------------------------------------------------------------- 1 | import { SummaryCard } from "./summary-card" 2 | import { TranscriptCard } from "./transcript-card" 3 | 4 | interface ResultsSectionProps { 5 | results: { 6 | summary: string 7 | transcript: string 8 | } | null 9 | videoUrl?: string 10 | } 11 | 12 | export function ResultsSection({ results, videoUrl }: ResultsSectionProps) { 13 | if (!results) return null 14 | 15 | return ( 16 |
17 |
18 | 19 | 20 |
21 |
22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /components/github-link.tsx: -------------------------------------------------------------------------------- 1 | import { Github, ExternalLink } from "lucide-react"; 2 | 3 | interface GitHubLinkProps { 4 | className?: string; 5 | } 6 | 7 | export function GitHubLink({ className = "" }: GitHubLinkProps) { 8 | return ( 9 | 15 | 16 | View on GitHub 17 | 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | const Textarea = React.forwardRef< 6 | HTMLTextAreaElement, 7 | React.ComponentProps<"textarea"> 8 | >(({ className, ...props }, ref) => { 9 | return ( 10 |