18 | {isClient 19 | ? `Slide ${Math.min(currentPage + 1, numPages)} / ${numPages}` 20 | : ""} 21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /src/lib/providers/keys-context.tsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | 3 | interface KeysContextValue { 4 | apiKey: string; 5 | setApiKey: (apiKey: string) => void; 6 | } 7 | 8 | const KeysContext = React.createContext
8 |
14 |
20 |
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/app/actions.tsx:
--------------------------------------------------------------------------------
1 | "use server";
2 | import { messageRateLimit } from "@/lib/rate-limit";
3 |
4 | import { generateCarouselSlides } from "@/lib/langchain";
5 | import { headers } from "next/headers";
6 |
7 | export async function generateCarouselSlidesAction(userPrompt: string) {
8 | if (!process.env.OPENAI_API_KEY) {
9 | return null;
10 | }
11 |
12 | if (process.env.KV_REST_API_URL && process.env.KV_REST_API_TOKEN) {
13 | const ip = headers().get("x-real-ip") ?? "local";
14 | const rl = await messageRateLimit.limit(ip);
15 |
16 | if (!rl.success) {
17 | // TODO: Handle returning errors
18 | return null;
19 | }
20 | }
21 |
22 | const generatedSlides = await generateCarouselSlides(
23 | userPrompt,
24 | process.env.OPENAI_API_KEY
25 | );
26 | return generatedSlides;
27 | }
28 |
--------------------------------------------------------------------------------
/src/lib/providers/reference-context.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, useContext, useRef, ReactNode } from "react";
2 |
3 | // Create a context for the ref
4 | const RefContext = createContext
19 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/lib/providers/pager-context.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 |
3 | interface PagerContextValue {
4 | currentPage: number;
5 | onPreviousClick: () => void;
6 | onNextClick: () => void;
7 | setCurrentPage: (pageNum: number) => void;
8 | }
9 |
10 | const PagerContext = React.createContext25 | {number} 26 |
27 |
21 | 
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface InputProps
6 | extends React.InputHTMLAttributes
21 |
26 | );
27 | });
28 |
29 | export default Footer;
30 |
--------------------------------------------------------------------------------
/src/components/no-api-keys-text.tsx:
--------------------------------------------------------------------------------
1 | import { BringYourKeysDialog } from "@/components/api-keys-dialog";
2 | import { TypographyExternalLink } from "@/components/typography";
3 | import { Button } from "@/components/ui/button";
4 | import { cn } from "@/lib/utils";
5 | import { Settings } from "lucide-react";
6 |
7 | export function NoApiKeysText() {
8 | return (
9 |
10 | Please enter your{" "}
11 |
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 | {label}
21 | {
25 | setCurrentPage(pageNumber);
26 | setCurrentSelection(fieldName, event);
27 | }}
28 | >
29 | {children}
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/editor.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { SidebarPanel } from "@/components/settings-panel";
4 | import { SlidesEditor } from "@/components/slides-editor";
5 | import React from "react";
6 | import { useComponentPrinter } from "@/lib/hooks/use-component-printer";
7 |
8 | import { RefProvider } from "@/lib/providers/reference-context";
9 | import { MainNav } from "./main-nav";
10 |
11 | export default function Editor({}: {}) {
12 | const { componentRef, handlePrint, isPrinting } = useComponentPrinter();
13 |
14 | return (
15 |
17 |
27 |
23 |
26 |
13 |
14 |
16 | {apiKey ? (
17 | <>
18 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/lib/providers/selection-context.tsx:
--------------------------------------------------------------------------------
1 | import React, { FocusEvent, useContext } from "react";
2 |
3 | interface SelectionContextValue {
4 | currentSelection: string;
5 | setCurrentSelection: (
6 | selection: string,
7 | event:
8 | | FocusEvent {
28 | setCurrentPage(pageNumber);
29 | setCurrentSelection(fieldName, event);
30 | }}
31 | >
32 | {children}
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/drawer.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { forwardRef } from "react";
4 | import { Drawer as DrawerPrimitive } from "vaul";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | const DrawerTrigger = DrawerPrimitive.Trigger;
9 |
10 | const DrawerContent = forwardRef<
11 | React.ElementRef
38 | {children}
39 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/icons.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | AlertTriangle,
3 | ArrowRight,
4 | Check,
5 | ChevronLeft,
6 | ChevronRight,
7 | ClipboardCheck,
8 | Command,
9 | Copy,
10 | CreditCard,
11 | File,
12 | FileText,
13 | Github,
14 | HelpCircle,
15 | Image,
16 | Laptop,
17 | Loader2,
18 | LucideProps,
19 | Moon,
20 | MoreVertical,
21 | Pizza,
22 | Plus,
23 | Settings,
24 | SunMedium,
25 | Trash,
26 | Twitter,
27 | User,
28 | X,
29 | GalleryHorizontal,
30 | LucideIcon,
31 | } from "lucide-react";
32 |
33 | import { GithubIcon } from "@/components/github-icon";
34 |
35 | export type Icon = LucideIcon;
36 |
37 | export const Icons = {
38 | logo: GalleryHorizontal,
39 | close: X,
40 | copy: Copy,
41 | copyDone: ClipboardCheck,
42 | spinner: Loader2,
43 | chevronLeft: ChevronLeft,
44 | chevronRight: ChevronRight,
45 | trash: Trash,
46 | post: FileText,
47 | page: File,
48 | media: Image,
49 | settings: Settings,
50 | billing: CreditCard,
51 | ellipsis: MoreVertical,
52 | add: Plus,
53 | warning: AlertTriangle,
54 | user: User,
55 | arrowRight: ArrowRight,
56 | help: HelpCircle,
57 | pizza: Pizza,
58 | gitHub: GithubIcon,
59 | twitter: Twitter,
60 | check: Check,
61 | sun: SunMedium,
62 | moon: Moon,
63 | laptop: Laptop,
64 | };
65 |
--------------------------------------------------------------------------------
/src/components/pages/add-element.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { Dialog, DialogTrigger } from "@/components/ui/dialog";
3 | import { Plus } from "lucide-react";
4 | import { getSlideNumber } from "@/lib/field-path";
5 | import { useFormContext } from "react-hook-form";
6 | import { NewElementDialogContent } from "@/components/new-element-dialog-content";
7 | import {
8 | DocumentFormReturn,
9 | ElementArrayFieldPath,
10 | } from "@/lib/document-form-types";
11 |
12 | export function AddElement({
13 | className,
14 | fieldName,
15 | }: {
16 | className?: string;
17 | fieldName: ElementArrayFieldPath;
18 | }) {
19 | const pageNumber = getSlideNumber(fieldName);
20 | const form: DocumentFormReturn = useFormContext();
21 | return (
22 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/ui/hover-card.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const HoverCard = HoverCardPrimitive.Root
9 |
10 | const HoverCardTrigger = HoverCardPrimitive.Trigger
11 |
12 | const HoverCardContent = React.forwardRef<
13 | React.ElementRef
19 | {/* @ts-ignore Style works ok */}
20 |
30 | );
31 | }
32 | );
33 |
34 | AutoTextarea.displayName = "Textarea";
35 |
36 | export { AutoTextarea };
37 |
--------------------------------------------------------------------------------
/src/components/forms/filename-form.tsx:
--------------------------------------------------------------------------------
1 | import { useFormContext } from "react-hook-form";
2 |
3 | import {
4 | Form,
5 | FormControl,
6 | FormField,
7 | FormItem,
8 | FormLabel,
9 | FormMessage,
10 | } from "@/components/ui/form";
11 | import { Input } from "@/components/ui/input";
12 | import { cn } from "@/lib/utils";
13 | import { Textarea } from "@/components/ui/textarea";
14 | import { DocumentFormReturn } from "@/lib/document-form-types";
15 |
16 | export function FilenameForm({ className = "" }: { className?: string }) {
17 | const form: DocumentFormReturn = useFormContext(); // retrieve those props
18 |
19 | return (
20 |
42 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as PopoverPrimitive from "@radix-ui/react-popover"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Popover = PopoverPrimitive.Root
9 |
10 | const PopoverTrigger = PopoverPrimitive.Trigger
11 |
12 | const PopoverContent = React.forwardRef<
13 | React.ElementRef
30 |
44 | {children}
45 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/src/lib/theme-utils.ts:
--------------------------------------------------------------------------------
1 | import {
2 | interpolate,
3 | wcagContrast,
4 | Oklch,
5 | Color,
6 | rgb,
7 | formatHex,
8 | } from "culori";
9 |
10 | const cutNumber = (number: number) => {
11 | try {
12 | if (number) {
13 | return +number.toFixed(6);
14 | } else {
15 | return 0;
16 | }
17 | } catch (e) {
18 | // colorIsInvalid(number)
19 | return false;
20 | }
21 | };
22 |
23 | const isDark = (color: Color | string) => {
24 | try {
25 | if (wcagContrast(color, "black") < wcagContrast(color, "white")) {
26 | return true;
27 | }
28 | return false;
29 | } catch (e) {
30 | // colorIsInvalid(color)
31 | return false;
32 | }
33 | };
34 |
35 | export const generateForegroundColorFrom = function (
36 | input: Color | string,
37 | percentage = 0.8
38 | ) {
39 | const result = interpolate(
40 | [input, isDark(input) ? "white" : "black"],
41 | "oklch"
42 | )(percentage);
43 | return colorObjToString(result);
44 | };
45 |
46 | const generateDarkenColorFrom = function (input: any, percentage = 0.07) {
47 | try {
48 | const result = interpolate([input, "black"], "oklch")(percentage);
49 | return colorObjToString(result);
50 | } catch (e) {
51 | // colorIsInvalid(input)
52 | return false;
53 | }
54 | };
55 |
56 | export const colorObjToString = function (input: Oklch) {
57 | const rbgColor = rgb(input);
58 |
59 | return `${formatHex(rbgColor)}`;
60 | };
61 |
--------------------------------------------------------------------------------
/src/lib/validation/slide-schema.tsx:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 | import {
3 | ContentImageSchema,
4 | DEFAULT_BACKGROUND_IMAGE_INPUT,
5 | DEFAULT_CONTENT_IMAGE_INPUT,
6 | ImageSchema,
7 | } from "./image-schema";
8 | import {
9 | TitleSchema,
10 | SubtitleSchema,
11 | DescriptionSchema,
12 | UnstyledTitleSchema,
13 | UnstyledSubtitleSchema,
14 | UnstyledDescriptionSchema,
15 | } from "./text-schema";
16 |
17 | export const SlideType = z.enum(["Intro", "Content", "Outro", "Common"]);
18 | export type SlideType = z.infer
41 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/elements/description.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { cn } from "@/lib/utils";
3 | import { fontIdToClassName } from "@/lib/fonts-map";
4 | import { textStyleToClasses } from "@/lib/text-style-to-classes";
5 | import { useFormContext } from "react-hook-form";
6 | import { TextAreaFormField } from "@/components/forms/fields/text-area-form-field";
7 | import {
8 | DocumentFormReturn,
9 | TextFieldPath,
10 | TextFieldStyle,
11 | StyleFieldPath,
12 | TextTextFieldPath,
13 | } from "@/lib/document-form-types";
14 |
15 | export function Description({
16 | fieldName,
17 | className = "",
18 | }: {
19 | fieldName: TextFieldPath;
20 | className?: string;
21 | }) {
22 | const form: DocumentFormReturn = useFormContext();
23 | const { getValues } = form;
24 | const config = getValues("config");
25 | const style = getValues(
26 | `${fieldName}.style` as StyleFieldPath
27 | ) as TextFieldStyle;
28 | const textFieldName = (fieldName + ".text") as TextTextFieldPath;
29 |
30 | return (
31 |
20 | {config.brand.avatar?.source.src && (
21 | // eslint-disable-next-line @next/next/no-img-element
22 | 
30 | )}
31 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/src/components/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-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
11 | {
12 | variants: {
13 | variant: {
14 | default: "bg-transparent",
15 | outline:
16 | "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
17 | },
18 | size: {
19 | default: "h-10 px-3",
20 | sm: "h-9 px-2.5",
21 | lg: "h-11 px-5",
22 | },
23 | },
24 | defaultVariants: {
25 | variant: "default",
26 | size: "default",
27 | },
28 | }
29 | )
30 |
31 | const Toggle = React.forwardRef<
32 | React.ElementRef
30 | )}
31 |
32 |
52 | 38 | {config.brand.name} 39 |
40 |49 | {config.brand.handle} 50 |
51 |
13 |
24 |
32 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const ScrollArea = React.forwardRef<
9 | React.ElementRef
35 |
38 |
39 |
30 |
60 |
31 |
32 |
39 |
40 |
41 |
48 |
49 |
50 |
57 |
58 |
59 |
22 |
58 | );
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
5 | import { VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 | import { toggleVariants } from "@/components/ui/toggle"
9 |
10 | const ToggleGroupContext = React.createContext<
11 | VariantProps
23 |
31 |
39 |
{" "}
57 | {children}
51 | {fontsMap[fontId].name}
76 |
47 | {/* // TODO: Extract to component */}
48 | 
{
64 | setCurrentPage(pageNumber);
65 | setCurrentSelection(fieldName, event);
66 | }}
67 | />
68 |
69 | );
70 | }
71 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "carousel-generator",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@hookform/resolvers": "^3.3.1",
13 | "@radix-ui/react-checkbox": "^1.0.4",
14 | "@radix-ui/react-dialog": "^1.0.4",
15 | "@radix-ui/react-hover-card": "^1.0.6",
16 | "@radix-ui/react-label": "^2.0.2",
17 | "@radix-ui/react-menubar": "^1.0.3",
18 | "@radix-ui/react-popover": "^1.0.7",
19 | "@radix-ui/react-radio-group": "^1.1.3",
20 | "@radix-ui/react-scroll-area": "^1.0.4",
21 | "@radix-ui/react-select": "^1.2.2",
22 | "@radix-ui/react-separator": "^1.0.3",
23 | "@radix-ui/react-slider": "^1.1.2",
24 | "@radix-ui/react-slot": "^1.0.2",
25 | "@radix-ui/react-switch": "^1.0.3",
26 | "@radix-ui/react-tabs": "^1.0.4",
27 | "@radix-ui/react-toast": "^1.1.4",
28 | "@radix-ui/react-toggle": "^1.0.3",
29 | "@radix-ui/react-toggle-group": "^1.0.4",
30 | "@radix-ui/react-tooltip": "^1.0.7",
31 | "@react-pdf/renderer": "^3.1.12",
32 | "@types/culori": "^2.0.4",
33 | "@types/node": "20.5.0",
34 | "@types/react": "18.2.45",
35 | "@types/react-dom": "18.2.18",
36 | "@upstash/ratelimit": "^1.0.1",
37 | "@upstash/redis": "^1.28.4",
38 | "autoprefixer": "10.4.15",
39 | "browser-image-compression": "^2.0.2",
40 | "class-variance-authority": "^0.7.0",
41 | "clsx": "^2.0.0",
42 | "culori": "^3.3.0",
43 | "deepmerge": "^4.3.1",
44 | "dotenv": "^16.3.1",
45 | "embla-carousel-react": "8.0.0-rc17",
46 | "encoding": "^0.1.13",
47 | "geist": "^1.0.0",
48 | "html-to-image": "^1.11.11",
49 | "jspdf": "^2.5.1",
50 | "langchain": "^0.0.209",
51 | "lucide-react": "^0.268.0",
52 | "next": "14.0.4",
53 | "openai": "^4.20.1",
54 | "postcss": "8.4.28",
55 | "react": "18.2.0",
56 | "react-dom": "18.2.0",
57 | "react-hook-form": "^7.48.2",
58 | "react-pdf": "^7.3.3",
59 | "react-pdf-tailwind": "^2.1.0",
60 | "react-textarea-autosize": "^8.5.3",
61 | "react-to-print": "^2.14.13",
62 | "react-use": "^17.4.0",
63 | "tailwind-merge": "^1.14.0",
64 | "tailwindcss": "^3.4.13",
65 | "tailwindcss-animate": "^1.0.7",
66 | "tsx": "^4.6.2",
67 | "typescript": "5.1.6",
68 | "usehooks-ts": "^2.9.1",
69 | "vaul": "^0.7.7",
70 | "zod": "^3.22.2",
71 | "zod-to-json-schema": "^3.22.3"
72 | },
73 | "devDependencies": {
74 | "@eslint/eslintrc": "^3.0.0",
75 | "eslint": "^8.57.1",
76 | "eslint-config-next": "^14.2.13"
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/src/components/ui/vertical-tabs.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import * as React from "react";
3 |
4 | import { cn } from "@/lib/utils";
5 | import * as TabsPrimitive from "@radix-ui/react-tabs";
6 |
7 | const VerticalTabs = React.forwardRef<
8 | React.ElementRef
47 |
86 |
48 |
49 |
56 |
57 |
58 |
65 |
66 |
67 |
74 |
75 |
76 |
83 |
84 |
85 |
41 | {name}
42 | (
46 |
47 |
48 |
53 | {Object.entries(
54 | enumValueElements
55 | ).map(([value, icon]) => (
56 |
57 |
58 |
65 | {icon}
66 |
67 |
68 | {/* Huemint 1 */}
69 |
70 | ))}
71 |
72 |
73 |
75 | )}
76 | />
77 |
78 | );
79 | }
80 |
--------------------------------------------------------------------------------
/src/lib/validation/text-schema.tsx:
--------------------------------------------------------------------------------
1 | import { ElementType } from "@/lib/validation/element-type";
2 | import * as z from "zod";
3 |
4 | export const FontSizeType = z.enum(["Small", "Medium", "Large"]);
5 | export type FontSizeType = z.infer
37 |
93 | );
94 | }
95 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Carousel Generator
2 |
3 | **Carousel Generator** is an open-source carousel generator tool that allows you to easily create and customize carousels for your LinkedIn.
4 |
5 | 🔗 [Website](https://carouselgenerator.vercel.app)
6 |
7 | ## AI Demo
8 |
9 | https://github.com/FranciscoMoretti/carousel-generator/assets/16997807/50cb033d-84d5-4214-93aa-45c6f524d0b1
10 |
11 | ## Features
12 |
13 | Carousel Generator comes packed with a variety of features to help you create stunning carousels effortlessly:
14 |
15 | - 🪄 Generate carousels with AI
16 | - ✍️ Forms powered by [react-hook-form](https://react-hook-form.com/)
17 | - 🎨 Sleek UI components from [Shadcn/ui](https://ui.shadcn.com/)
18 | - ✅ Input validation using [ZOD](https://zod.dev/)
19 | - 🌐 Responsive layout for various screen sizes
20 | - 🔄 Automatic updates on changes
21 | - 🍥 Icons from [Lucide Dev](https://lucide.dev/)
22 | - 🆎 Titles auto-balance (no orphan words)
23 | - 💾 Data persists with browser refresh
24 | - ⚙️ Configure the carousel with various settings
25 | - ➕ Add, remove, or reorder slides with ease
26 | - 🖼️ Different types of slides, including Intro, Content, and Outro
27 | - 📤 Export and Import settings
28 | - 📥 Export and import slide content
29 | - 😃 Support for emojis to spark joy with your carousels
30 | - 📝 Select fonts for titles and content to match your style
31 |
32 | ## Usage
33 |
34 | 1. Visit [carouselgenerator.vercel.app](https://carouselgenerator.vercel.app) to access the Carousel Generator tool.
35 |
36 | 2. Customize your carousel settings and add/edit slides as needed.
37 |
38 | 3. Download your carousel to post on social media
39 |
40 | ## Installation
41 |
42 | To get started with Carousel Generator, follow these simple installation steps:
43 |
44 | 1. Create your environment file
45 |
46 | ```bash
47 | cp .env.example .env
48 | ```
49 |
50 | 2. Install the required dependencies using `pnpm`:
51 |
52 | ```bash
53 | pnpm i
54 | ```
55 |
56 | or
57 |
58 | ```bash
59 | npm install
60 | ```
61 |
62 | 3. Create the environment variables file:
63 |
64 | ```bash
65 | cp .env.example .env.local
66 | ```
67 |
68 | and update the values in the `.env.local` file.
69 |
70 | To get an OpenaI API key, use [your OpenAI API key](https://platform.openai.com/account/api-keys)
71 |
72 | Rate limiting is optional. To enable it, you'll need [Vercel KV credentials](https://vercel.com/docs/storage/vercel-kv/quickstart#quickstart)
73 |
74 | NOTE: Remember to include these environment variables on your server if you are deploying this application.
75 |
76 | 4. Start the development server:
77 |
78 | ```bash
79 | pnpm dev
80 | ```
81 |
82 | or
83 |
84 | ```bash
85 | npm run dev
86 | ```
87 |
88 | Now you're all set to start using Carousel Generator!
89 |
90 | ## License
91 |
92 | This project is licensed under the [MIT License](LICENSE).
93 |
94 | ---
95 |
96 | Happy carousel generating! If you have any questions or need assistance, feel free to [open an issue](https://github.com/FranciscoMoretti/carousel-generator/issues) on GitHub.
97 |
98 | 🚀 Thank you for using Carousel Generator!
99 |
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "./globals.css";
2 | import type { Metadata } from "next";
3 | import {
4 | Inter,
5 | PT_Serif,
6 | Roboto,
7 | Roboto_Condensed,
8 | Syne,
9 | Ultra,
10 | Archivo_Black,
11 | Montserrat,
12 | } from "next/font/google";
13 | import { GeistSans, GeistMono } from "geist/font";
14 | import { Toaster } from "@/components/ui/toaster";
15 | import { DM_Sans, DM_Serif_Display } from "next/font/google";
16 | import { SiteFooter } from "@/components/site-footer";
17 |
18 | const dm_sans = DM_Sans({
19 | subsets: ["latin"],
20 | display: "swap",
21 | variable: "--font-dm-sans",
22 | weight: "variable",
23 | });
24 |
25 | const dm_serif_display = DM_Serif_Display({
26 | subsets: ["latin"],
27 | display: "swap",
28 | variable: "--font-dm-serif-display",
29 | weight: ["400"],
30 | });
31 |
32 | const montserrat = Montserrat({
33 | subsets: ["latin"],
34 | display: "swap",
35 | variable: "--font-montserrat",
36 | weight: ["500", "700", "900"],
37 | });
38 |
39 | const pt_serif = PT_Serif({
40 | subsets: ["latin"],
41 | display: "swap",
42 | variable: "--font-pt-serif",
43 | weight: ["400", "700"],
44 | });
45 |
46 | const roboto = Roboto({
47 | subsets: ["latin"],
48 | display: "swap",
49 | variable: "--font-roboto",
50 | weight: ["500", "700"],
51 | });
52 |
53 | const inter = Inter({
54 | subsets: ["latin"],
55 | display: "swap",
56 | variable: "--font-inter",
57 | weight: ["500", "700"],
58 | });
59 |
60 | const archivoBlack = Archivo_Black({
61 | subsets: ["latin"],
62 | display: "swap",
63 | variable: "--font-archivo-black",
64 | weight: ["400"],
65 | });
66 |
67 | const ultra = Ultra({
68 | subsets: ["latin"],
69 | display: "swap",
70 | variable: "--font-ultra",
71 | weight: ["400"],
72 | });
73 |
74 | const roboto_condensed = Roboto_Condensed({
75 | subsets: ["latin"],
76 | display: "swap",
77 | variable: "--font-roboto-condensed",
78 | weight: ["400", "700"],
79 | });
80 |
81 | const syne = Syne({
82 | subsets: ["latin"],
83 | display: "swap",
84 | variable: "--font-syne",
85 | weight: ["500", "700"],
86 | });
87 |
88 | export const metadata: Metadata = {
89 | ...(process.env.NEXT_PUBLIC_APP_URL && {
90 | metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL),
91 | }),
92 | title: "Carousel Generator",
93 | description: "An open source carousel maker for LinkedIn",
94 | };
95 |
96 | export default function RootLayout({
97 | children,
98 | }: {
99 | children: React.ReactNode;
100 | }) {
101 | return (
102 |
103 |
106 |
38 |
39 |
46 |
47 |
49 |
50 |
85 |
92 |
51 |
53 |
62 |
77 |
80 |
81 | {/* // TODO: Re-enable your own keys system */}
82 | {/*
86 |
88 |
89 | }
90 | /> */}
91 |
107 | {children}
108 |
109 |
45 |
57 |
78 |
97 |
109 |
110 | );
111 | }
112 |
--------------------------------------------------------------------------------
/src/components/ai-input-form.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { zodResolver } from "@hookform/resolvers/zod";
4 | import { useForm, useFormContext } from "react-hook-form";
5 | import * as z from "zod";
6 |
7 | import { Button } from "@/components/ui/button";
8 | import {
9 | Form,
10 | FormControl,
11 | FormDescription,
12 | FormField,
13 | FormItem,
14 | FormLabel,
15 | FormMessage,
16 | } from "@/components/ui/form";
17 | import { Input } from "@/components/ui/input";
18 | import { toast } from "@/components/ui/use-toast";
19 | import { Sparkles } from "lucide-react";
20 | import { generateCarouselSlides } from "@/lib/langchain";
21 | import { DocumentFormReturn } from "@/lib/document-form-types";
22 | import { useState } from "react";
23 | import { LoadingSpinner } from "@/components/loading-spinner";
24 | import { useKeys } from "@/lib/hooks/use-keys";
25 | import { useKeysContext } from "@/lib/providers/keys-context";
26 | import { useStatusContext } from "@/lib/providers/editor-status-context";
27 | import { generateCarouselSlidesAction } from "@/app/actions";
28 |
29 | const FormSchema = z.object({
30 | prompt: z.string().min(2, {
31 | message: "Prompt must be at least 2 characters.",
32 | }),
33 | });
34 |
35 | export function AIInputForm() {
36 | const { apiKey } = useKeysContext();
37 | const { setValue }: DocumentFormReturn = useFormContext(); // retrieve those props
38 | const [isLoading, setIsLoading] = useState(false);
39 | const { status, setStatus } = useStatusContext();
40 |
41 | const form = useForm {
58 | // Only clear selection if this element started the event
59 | setCurrentSelection("", event);
60 | }}
61 | >
62 |
99 | );
100 | }
101 |
--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
5 | import { X } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Dialog = DialogPrimitive.Root
10 |
11 | const DialogTrigger = DialogPrimitive.Trigger
12 |
13 | const DialogPortal = ({
14 | className,
15 | ...props
16 | }: DialogPrimitive.DialogPortalProps) => (
17 |
63 |
98 |
64 | {isLoadingWidth || status == "loading" ? (
65 |
96 |
74 |
83 |
84 |
85 |
94 |
*/}
95 | 161 | {body} 162 |
163 | ) 164 | }) 165 | FormMessage.displayName = "FormMessage" 166 | 167 | export { 168 | useFormField, 169 | Form, 170 | FormItem, 171 | FormLabel, 172 | FormControl, 173 | FormDescription, 174 | FormMessage, 175 | FormField, 176 | } 177 | -------------------------------------------------------------------------------- /src/components/typography.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils"; 2 | import React from "react"; 3 | 4 | export function TypographyH1({ 5 | children, 6 | className = "", 7 | }: { 8 | children: React.ReactNode; 9 | className?: string; 10 | }) { 11 | return ( 12 |18 | {children} 19 |
20 | ); 21 | } 22 | 23 | export function TypographyH2({ 24 | children, 25 | className = "", 26 | }: { 27 | children: React.ReactNode; 28 | className?: string; 29 | }) { 30 | return ( 31 |37 | {children} 38 |
39 | ); 40 | } 41 | 42 | export function TypographyH3({ 43 | children, 44 | className = "", 45 | }: { 46 | children: React.ReactNode; 47 | className?: string; 48 | }) { 49 | return ( 50 |56 | {children} 57 |
58 | ); 59 | } 60 | 61 | export function TypographyH4({ 62 | children, 63 | className = "", 64 | }: { 65 | children: React.ReactNode; 66 | className?: string; 67 | }) { 68 | return ( 69 |75 | {children} 76 |
77 | ); 78 | } 79 | 80 | export function TypographyP({ 81 | children, 82 | className = "", 83 | }: { 84 | children: React.ReactNode; 85 | className?: string; 86 | }) { 87 | return ( 88 |89 | {children} 90 |
91 | ); 92 | } 93 | 94 | export function TypographyBlockquote({ 95 | children, 96 | className = "", 97 | }: { 98 | children: React.ReactNode; 99 | className?: string; 100 | }) { 101 | return ( 102 |103 | {children} 104 |105 | ); 106 | } 107 | 108 | // TODO: Add table styles 109 | 110 | export function TypographyList({ 111 | children, 112 | className = "", 113 | }: { 114 | children: React.ReactNode; 115 | className?: string; 116 | }) { 117 | return ( 118 |
- li]:mt-2", className)}>
119 | {children}
120 |
138 | {children} 139 |
140 | ); 141 | } 142 | 143 | export function TypographyExternalLink({ 144 | children, 145 | href, 146 | className = "", 147 | }: { 148 | children: React.ReactNode; 149 | href: string; 150 | className?: string; 151 | }) { 152 | return ( 153 | 159 | {children} 160 | 161 | ); 162 | } 163 | 164 | export function TypographyLead({ 165 | children, 166 | className = "", 167 | }: { 168 | children: React.ReactNode; 169 | className?: string; 170 | }) { 171 | return ( 172 |{children}
173 | ); 174 | } 175 | 176 | export function TypographyLarge({ 177 | children, 178 | className = "", 179 | }: { 180 | children: React.ReactNode; 181 | className?: string; 182 | }) { 183 | return ( 184 |{children}
185 | );
186 | }
187 |
188 | export function TypographySmall({
189 | children,
190 | className = "",
191 | }: {
192 | children: React.ReactNode;
193 | className?: string;
194 | }) {
195 | return (
196 |
197 | {children}
198 |
199 | );
200 | }
201 |
202 | export function TypographyMuted({
203 | children,
204 | className = "",
205 | }: {
206 | children: React.ReactNode;
207 | className?: string;
208 | }) {
209 | return (
210 | {children}
211 | ); 212 | } 213 | 214 | export function TypographyFieldName({ 215 | children, 216 | className = "", 217 | }: { 218 | children: React.ReactNode; 219 | className?: string; 220 | }) { 221 | return ( 222 |223 | {children} 224 |
225 | ); 226 | } 227 | --------------------------------------------------------------------------------