[ { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Create a bug report for AI landing page generator\ntitle: \"[BUG]\"\nlabels: ''\nassignees: ''\n\n---\n\n# Bug Report\n\n**Description**\n⚠️ Please provide a clear and concise description of the bug.\n\n**Steps to Reproduce**\n⚠️ Please provide step-by-step instructions to reproduce the bug.\n\n**Expected Behavior**\n⚠️ Please describe what you expected to happen.\n\n**Actual Behavior**\n⚠️ Please describe what actually happened.\n\n**Additional Information**\n⚠️ Add any additional information or context about the bug here.\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n# Feature Request\n\n**Description**\nPlease provide a clear and concise description of the feature request.\n\n**Proposed Solution**\nPlease describe the proposed solution or new feature in detail.\n\n**Alternatives Considered**\nPlease describe any alternative solutions or features you've considered.\n\n**Additional Information**\nAdd any additional information or context about the feature request here.\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n.env\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n/.idea\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Code of Conduct\n\nAs contributors and maintainers of the AI Landing Page Generator project, we pledge to make participation in our project a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment include:\n\n- Being respectful and considerate of others' opinions and ideas.\n- Using inclusive language and being mindful of our words and their impact.\n- Being open to constructive feedback and providing feedback in a respectful manner.\n- Showing empathy and kindness towards others.\n- Focusing on collaboration and fostering a supportive community.\n\nExamples of unacceptable behavior include:\n\n- Harassment, discrimination, or derogatory comments and personal attacks.\n- Any form of offensive or inappropriate language or imagery.\n- Trolling, flaming, or insulting/derogatory comments.\n- Intimidating or bullying behavior.\n- Any other conduct that could be considered inappropriate in a professional setting.\n\n## Scope\n\nThis Code of Conduct applies to all project contributors, both online and offline, as well as in all project-related spaces.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [zinedkaloc](https://twitter.com/zinedkaloc). The project team is committed to reviewing and addressing all reported incidents promptly and fairly.\n\n## Consequences\n\nAny contributor who engages in behavior violating this Code of Conduct may be temporarily or permanently excluded from project participation at the discretion of the project team.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org/), version 2.0, available at [https://www.contributor-covenant.org/version/2/0/code_of_conduct.html](https://www.contributor-covenant.org/version/2/0/code_of_conduct.html).\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing to AI Landing Page Generator\n\nWe welcome and appreciate contributions from the community! By contributing to the AI Landing Page Generator project, you can help us make it even better.\n\n## Ways to Contribute\n\nThere are several ways you can contribute to this project:\n\n- Report bugs: If you come across any issues or bugs, please [open a new issue](https://github.com/zinedkaloc/ai-page/issues) and provide as much detail as possible.\n\n- Suggest new features: Have an idea for a new feature or improvement? We'd love to hear it! [Open a new issue](https://github.com/zinedkaloc/ai-page/issues) and let us know.\n\n- Submit pull requests: If you have code changes or enhancements you'd like to contribute, you can do so by opening a pull request. Make sure to follow the guidelines below when submitting your pull request.\n\n## Guidelines for Pull Requests\n\nTo ensure smooth collaboration and maintain code quality, please follow these guidelines when submitting a pull request:\n\n1. Fork the repository and create a new branch for your changes.\n\n2. Before making changes, make sure your branch is up to date with the master repository.\n\n3. Follow the coding style and conventions used in the project.\n\n4. Include clear and concise commit messages that describe the purpose of your changes.\n\n5. Provide a detailed description of the changes you've made in the pull request.\n\n6. Test your changes thoroughly to ensure they work as intended.\n\n7. Make sure your code is properly documented.\n\n8. Ensure that your changes do not introduce any breaking changes to the existing functionality.\n\n9. Be responsive to any feedback or questions regarding your pull request.\n\n10. Once your changes are approved, they will be merged into the master repository.\n\n## Code of Conduct\n\nPlease note that by participating in this project, you are expected to adhere to the [Code of Conduct](CODE_OF_CONDUCT.md). We kindly ask you to respect the guidelines and treat others with respect and kindness.\n\n## Questions or Concerns\n\nIf you have any questions or concerns regarding the project or the contribution process, please feel free to [zinedkaloc](https://twitter.com/zinedkaloc).\n\nThank you for your interest in contributing to the AI Landing Page Generator project!\n" }, { "path": "LICENSE", "content": "MIT License\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n" }, { "path": "README.md", "content": "# AI Landing Page Generator\n\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n\n## Description\n\n![A landing page generator](/public/logo.png)\n\nThe AI Landing Page Generator is a powerful tool that allows you to quickly create stunning landing pages using artificial intelligence. With this generator, you can save time and effort by automating the process of designing and coding landing pages. It is now experimental and only supports the creation of landing pages with HTML and Tailwind CSS.\n\n## Installation\n\n1. Clone the repository: `git clone https://github.com/zinedkaloc/aipage.dev.git`\n2. Install the required dependencies: `pnpm install`\n3. Navigate to the project directory `cd aipage.dev`\n4. Copy the `.env.example` file to `.env` and fill in the required information.\n\n> Note: If you are not comfortable with creating OPENAI_API_KEY, please reach out to me at [zinedkaloc](https://twitter.com/zinedkaloc) and I will be happy to help you.\n\n## Usage\n\n1. Run the generator: `pnpm dev`\n2. Open the browser and go to `http://localhost:3000`\n3. Describe your website and click on the \"Enter\".\n4. Wait for the genie to generate the landing page.\n\n### Test prompts\n\n> A landing page for a design studio located in New york. They make websites and custom logos. All the work is very stylish and minimalist. The page should include a contact form a some call to actions as well as a link to the portfolio.\n\n> A landing page for an interior architecture company based in Istanbul. They specialize in creating exceptional spatial designs and innovative interior solutions. Their work showcases a unique blend of style, minimalism, and functionality. The landing page should feature a captivating design with using gradients, including a contact form, compelling call-to-action elements, and a prominent link to their portfolio.\n\n> A landing page for a cutting-edge technology company based in Istanbul. They specialize in developing innovative software solutions and advanced technological products. Their work is known for its sleek design, seamless user experience, and transformative capabilities. The landing page should feature a modern design, including a contact form, compelling call-to-action elements, and a prominent link to their product offerings.\n\n## Roadmap\n\n- [x] Create a basic landing page generator.\n- [x] Display the generated landing page in the main page with an iframe.\n- [ ] Update text input to textarea and add submit button.\n- [ ] Add support to download the generated landing page as a zip file.\n- [ ] Add support to deploy the generated landing page to Vercel or Netlify with a single click.\n- [ ] Add support for dark mode.\n- [ ] Add support for multiple pages.\n- [ ] Add support for multiple languages.\n\nThis project is still in its early stages of development. If you have any suggestions or ideas, please feel free to open an issue or submit a pull request.\n\n## Contributing\n\nThank you for considering contributing to this project! To contribute, follow these steps:\n\n1. Fork the repository.\n2. Create a new branch for your feature/fix: `git checkout -b feature/your-feature-name`.\n3. Add your changes with: `git add .`.\n4. Make your changes and commit them: `git commit -m \"Add your feature description\"`.\n5. Push to the branch: `git push origin feature/your-feature-name`.\n6. Open a pull request to the `master` branch of the original repository. Provide a clear and descriptive title and description for your pull request. Include any relevant information or context that would help with the review process.\n7. Wait for the maintainers to review your pull request. Make any necessary changes or address any feedback provided.\n8. Once your pull request is approved, it will be merged into the `master` branch.\n\nCongratulations on your contribution!\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n## Contact\n\nFor any inquiries or feedback, please reach out to us at [zinedkaloc](https://twitter.com/zinedkaloc).\n" }, { "path": "app/(aipage)/layout.tsx", "content": "import \"@smastrom/react-rating/style.css\";\nimport { ReactNode } from \"react\";\nimport Header from \"@/components/Header\";\n\nexport default async function AipageLayout({\n children,\n}: {\n children: ReactNode;\n}) {\n return (\n <>\n
\n {children}\n \n );\n}\n" }, { "path": "app/(aipage)/loading.tsx", "content": "import LoadingSpinner from \"@/components/loadingSpinner\";\n\nexport default function RootLoading() {\n return (\n
\n \n
\n );\n}\n" }, { "path": "app/(aipage)/not-found.tsx", "content": "import Link from \"next/link\";\nimport Button from \"@/components/Button\";\n\nexport default async function NotFound() {\n return (\n
\n
\n
\n

404 NOT FOUND

\n

\n We can’t find that page\n

\n

\n Sorry, the page you are looking for doesn't exist or has been moved.\n

\n\n
\n \n \n \n
\n
\n
\n
\n );\n}\n" }, { "path": "app/(aipage)/page.tsx", "content": "\"use client\";\nimport { useChat } from \"ai/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport Frame from \"react-frame-component\";\nimport Image from \"next/image\";\nimport html2canvas from \"html2canvas\";\nimport TweetButton from \"@/components/tweetButton\";\nimport { useAuth } from \"@/context/AuthContext\";\nimport useSearchParams from \"@/hooks/useSearchParams\";\nimport RateModal from \"@/components/RateModal\";\nimport { cn, updateProject } from \"@/utils/helpers\";\nimport Link from \"next/link\";\n\nenum DeviceSize {\n Mobile = \"w-1/2\",\n Tablet = \"w-3/4\",\n Desktop = \"w-full\",\n}\n\nexport default function Chat() {\n const { user, setUser } = useAuth();\n const [lastMessageId, setLastMessageId] = useState(null);\n const [hasNoCreditsError, setHasNoCreditsError] = useState(false);\n const { set } = useSearchParams();\n\n const { messages, input, handleInputChange, handleSubmit, isLoading, stop } =\n useChat({\n onResponse: (message) => {\n setHasNoCreditsError(false);\n setLastMessageId(null);\n decreaseCredit();\n },\n onFinish: async (message) => {\n try {\n const res = JSON.parse(message.content) as { credits: number };\n setCredits(res.credits);\n setHasNoCreditsError(res.credits === 0);\n } catch {\n await saveResult(message.content);\n }\n },\n });\n\n function decreaseCredit(by: number = 1) {\n if (user) {\n setUser({ ...user, credits: user.credits - by });\n }\n }\n\n function setCredits(credits: number) {\n if (user) {\n setUser({ ...user, credits });\n }\n }\n\n async function saveResult(result: string) {\n const { _id } = await updateProject({\n result,\n });\n setLastMessageId(_id);\n set(\"rateModal\", \"true\");\n }\n\n const [iframeContent, setIframeContent] = useState(\"\");\n const [imageSrc, setImageSrc] = useState(\"\");\n\n const [deviceSize, setDeviceSize] = useState(DeviceSize.Desktop);\n const iframeRef = useRef(null);\n const [fileName, setFileName] = useState(\"\");\n const [selectedElement, setSelectedElement] = useState(null);\n const [editedContent, setEditedContent] = useState(\"\");\n const [editingMode, setEditingMode] = useState(false);\n const [codeViewActive, setCodeViewActive] = useState(false);\n const [isStopped, setIsStopped] = useState(false);\n\n const appendToIframe = (content: any) => {\n if (iframeRef.current) {\n const iframeDocument = (iframeRef.current as HTMLIFrameElement)\n .contentDocument;\n if (iframeDocument) {\n const newNode = iframeDocument.createElement(\"div\");\n newNode.innerHTML = content;\n newNode.querySelectorAll(\"*\").forEach((element) => {\n element.addEventListener(\"mouseover\", () => {\n element.classList.add(\"outline-blue\"); // Blue border\n });\n element.addEventListener(\"mouseout\", () => {\n element.style.outline = \"none\";\n });\n element.addEventListener(\"click\", () => {\n setSelectedElement(element);\n setEditedContent(element.innerHTML);\n });\n });\n requestAnimationFrame(() => {\n iframeDocument.body.appendChild(newNode);\n });\n }\n }\n };\n\n const captureIframeContent = async () => {\n if (iframeRef.current) {\n const iframeDocument = (iframeRef.current as HTMLIFrameElement)\n .contentDocument;\n if (iframeDocument) {\n const canvas = await html2canvas(iframeDocument.body);\n const imgURL = canvas.toDataURL();\n // You can use imgURL as the src for an image tag to display the image representation of the iframe content\n // For simplicity, let's just set it to a state variable\n setImageSrc(imgURL);\n }\n }\n };\n\n useEffect(() => {\n const stream = new EventSource(\"/api/chat\");\n stream.onmessage = (event) => {\n appendToIframe(event.data);\n };\n\n return () => stream.close();\n }, []);\n\n useEffect(() => {\n const lastMessage = messages[messages.length - 1];\n if (lastMessage && lastMessage.role !== \"user\") {\n setIframeContent(lastMessage.content);\n }\n }, [messages]);\n\n const handleSave = () => {\n const element = document.createElement(\"a\");\n const file = new Blob([iframeContent], { type: \"text/html\" });\n element.href = URL.createObjectURL(file);\n element.download = fileName || \"index.html\";\n document.body.appendChild(element);\n element.click();\n document.body.removeChild(element);\n const completionInput = iframeContent;\n };\n\n const listenersMap = useRef<\n Map void; mouseout: () => void }>\n >(new Map());\n\n // Create a map to store the listeners for each element\n\n const handleEdit = () => {\n if (editingMode) {\n // Save the updated iframe content\n if (iframeRef.current) {\n const iframeDocument = (iframeRef.current as HTMLIFrameElement)\n .contentDocument;\n if (iframeDocument) {\n setIframeContent(iframeDocument.documentElement.innerHTML);\n }\n }\n\n // Disable editing mode by setting the contentEditable property of all elements to false and remove the event listeners\n if (iframeRef.current) {\n const iframeDocument = (iframeRef.current as HTMLIFrameElement)\n .contentDocument;\n if (iframeDocument) {\n iframeDocument\n .querySelectorAll(\"*\")\n .forEach((element) => {\n element.contentEditable = \"false\";\n\n // Get the listeners for the element from the map\n const listeners = listenersMap.current.get(element);\n if (listeners) {\n // Remove the listeners\n element.removeEventListener(\"mouseover\", listeners.mouseover);\n element.removeEventListener(\"mouseout\", listeners.mouseout);\n // Remove the element from the map\n listenersMap.current.delete(element);\n }\n });\n }\n }\n } else {\n // Enable editing mode by setting the contentEditable property of all elements to true and add event listeners\n if (iframeRef.current) {\n const iframeDocument = (iframeRef.current as HTMLIFrameElement)\n .contentDocument;\n if (iframeDocument) {\n iframeDocument\n .querySelectorAll(\"*\")\n .forEach((element) => {\n element.contentEditable = \"true\";\n\n // Create the event listeners\n const mouseoverListener = () => {\n element.classList.add(\"outline-blue\");\n console.log(\"Mouseover event fired\");\n };\n const mouseoutListener = () => {\n console.log(\"Mouseout event fired\");\n element.classList.remove(\"outline-blue\");\n };\n\n // Add the listeners to the element\n element.addEventListener(\"mouseover\", mouseoverListener);\n element.addEventListener(\"mouseout\", mouseoutListener);\n\n // Store the listeners in the map\n listenersMap.current.set(element, {\n mouseover: mouseoverListener,\n mouseout: mouseoutListener,\n });\n });\n }\n }\n }\n\n setEditingMode(!editingMode);\n };\n\n const handleUpdate = () => {\n if (selectedElement) {\n selectedElement.innerHTML = editedContent;\n setSelectedElement(null);\n setEditedContent(\"\");\n if (iframeRef.current) {\n const iframeDocument = (iframeRef.current as HTMLIFrameElement)\n .contentDocument;\n if (iframeDocument) {\n setIframeContent(iframeDocument.documentElement.innerHTML);\n }\n }\n }\n };\n\n function onFocusHandler() {\n if (!user) {\n set(\"authModal\", \"true\");\n }\n }\n\n const handleStop = async () => {\n stop();\n setIsStopped(true);\n await saveResult(iframeContent);\n };\n\n return (\n <>\n
\n
\n
\n
\n Help spread the word! 📢 Post a tweet of your creation on Twitter\n and tag @aipagedev for early access to our exclusive beta—packed\n with stunning features. 🚀\n
\n \n
\n
\n\n {/* Display the image if imageSrc is set */}\n\n
\n
\n
\n Star us on Github to show your support\n
\n \n ⭐️\n \n
\n
\n\n {isLoading ? null : (\n
\n \n
\n

\n 🚧 Under Renovation 🚧\n

\n\n

\n A refreshed experience is on the horizon.
Follow us on\n \n X\n {\" \"}\n to stay updated!\n

\n

\n
\n
\n )}\n\n {editingMode && selectedElement && (\n
\n

Edit the selected element:

\n setEditedContent(e.target.value)}\n />\n \n
\n )}\n\n {hasNoCreditsError ? (\n
\n \n \n \n !\n \n \n

No Credits

\n

\n You do not have enough credits to proceed with this request today.\n Please try again tomorrow.\n

\n
\n ) : (\n iframeContent && (\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n acme.co\n {isLoading && (\n 🟠\n )}\n
\n {/* Clear and Stop buttons */}\n
\n \n \n 🟥\n \n \n {\n setIframeContent(\"\");\n setIsStopped(false);\n }}\n >\n \n 🧽\n \n \n
\n
\n
\n
\n
\n \n {!isLoading && iframeContent && (\n \n )}\n
\n
\n
\n \n {codeViewActive ? (\n 
{iframeContent}
\n ) : (\n \n )}\n \n
\n
\n
\n )\n )}\n
\n \n \n );\n}\n" }, { "path": "app/(aipage)/profile/invoices/loading.tsx", "content": "import LoadingSpinner from \"@/components/loadingSpinner\";\n\nexport default function InvoicesLoading() {\n return (\n
\n \n
\n );\n}\n" }, { "path": "app/(aipage)/profile/invoices/page.tsx", "content": "import { fetchInvoices } from \"@/utils/auth\";\nimport { moneyFormat, stripePrice } from \"@/utils/helpers\";\nimport Button from \"@/components/Button\";\nimport { FileText } from \"lucide-react\";\nimport { Invoice } from \"@/types\";\n\nexport default async function InvoicesPage() {\n const invoices = await fetchInvoices();\n\n const hasInvoices = invoices?.length > 0;\n\n return (\n
\n
\n {hasInvoices && (\n
\n

\n Invoices\n

\n

\n Check the invoices for your purchases.\n

\n
\n )}\n {!hasInvoices ? (\n
\n

\n You don't have any invoices yet!\n

\n \n
\n ) : (\n <>\n
\n \n
\n
\n \n
\n \n )}\n
\n
\n );\n}\n\nfunction DesktopTable({ invoices }: { invoices: Invoice[] }) {\n return (\n
\n
\n
\n
\n \n \n \n \n Product name\n \n \n Order date\n \n \n Status\n \n \n Total amount\n \n \n \n \n \n {invoices.map((invoice, index) => (\n \n \n \n \n \n \n \n ))}\n \n
\n {invoice.lines.data[0]?.price?.nickname ?? \"Unknown\"}{\" \"}\n Credits\n \n {new Date(invoice.created * 1000).toLocaleDateString()}\n \n {invoice.status.toUpperCase()}\n \n {moneyFormat(stripePrice(invoice.total))}\n \n
\n \n \n \n View Invoice\n \n \n
\n
\n
\n
\n
\n
\n );\n}\n\nfunction MobileTable({ invoices }: { invoices: Invoice[] }) {\n return (\n
\n {invoices?.map((invoice) => (\n \n
\n
\n
\n
Product Name
\n
\n {invoice.lines.data[0]?.price?.nickname ?? \"Unknown\"} Credits\n
\n
\n
\n
Order date
\n
\n \n
\n
\n
\n
Order status
\n
\n {invoice.status}\n
\n
\n
\n
Total amount
\n
\n {moneyFormat(stripePrice(invoice.total))}\n
\n
\n
\n
\n \n \n \n
\n
\n
\n ))}\n \n );\n}\n" }, { "path": "app/(aipage)/profile/layout.tsx", "content": "import { ReactNode } from \"react\";\nimport ProfileLayout from \"@/components/ProfileLayout\";\n\nexport default async function ProfileBaseLayout({\n children,\n}: {\n children: ReactNode;\n}) {\n return {children};\n}\n" }, { "path": "app/(aipage)/profile/projects/[id]/domains/layout.tsx", "content": "\"use client\";\nimport AddDomainModal from \"@/components/AddDomainModal\";\nimport Button from \"@/components/Button\";\nimport DomainCard from \"@/components/DomainCard\";\nimport useSearchParams from \"@/hooks/useSearchParams\";\nimport { ReactNode } from \"react\";\n\nexport default function DomainLayout({ children }: { children: ReactNode }) {\n const { set } = useSearchParams();\n\n return (\n <>\n \n
\n
\n
\n
\n
\n

Domains

\n
\n set(\"domainModal\", \"true\")}\n variant=\"default\"\n >\n Add Domain\n \n
\n
\n
\n
\n {children}\n
\n
\n \n );\n}\n" }, { "path": "app/(aipage)/profile/projects/[id]/domains/page.tsx", "content": "import DomainCard from \"@/components/DomainCard\";\nimport { toReversed } from \"@/utils/helpers\";\nimport { fetchProjectById } from \"@/utils/auth\";\nimport { SetProject } from \"@/hooks/useProject\";\n\nexport default async function ProjectDomains({\n params,\n}: {\n params: { id: string };\n}) {\n const project = await fetchProjectById(params.id);\n const hasDomains = !!(project && project?.domains.length > 0);\n\n return (\n
\n \n {hasDomains ? (\n toReversed(project?.domains).map((domain) => (\n \n ))\n ) : (\n
\n

\n No domains yet\n

\n \n
\n )}\n
\n );\n}\n" }, { "path": "app/(aipage)/profile/projects/[id]/integrations/page.tsx", "content": "export default function ProjectIntegrations({\n params,\n}: {\n params: {\n id: string;\n };\n}) {\n return
;\n}\n" }, { "path": "app/(aipage)/profile/projects/[id]/layout.tsx", "content": "import { ReactNode } from \"react\";\nimport { fetchProjectById } from \"@/utils/auth\";\nimport { notFound } from \"next/navigation\";\nimport { SetProject } from \"@/hooks/useProject\";\n\nexport default async function ProjectLayout({\n children,\n params,\n}: {\n children: ReactNode;\n params: {\n id: string;\n };\n}) {\n const project = await fetchProjectById(params.id);\n if (!project || project?.deletedAt) return notFound();\n\n return (\n <>\n \n {children}\n \n );\n}\n" }, { "path": "app/(aipage)/profile/projects/[id]/loading.tsx", "content": "import LoadingSpinner from \"@/components/loadingSpinner\";\n\nexport default function ProjectByIdLoading() {\n return (\n
\n \n
\n );\n}\n" }, { "path": "app/(aipage)/profile/projects/[id]/page.tsx", "content": "import { fetchProjectById, fetchProjects } from \"@/utils/auth\";\nimport { SetProjects } from \"@/hooks/useProjectList\";\nimport { SetProject } from \"@/hooks/useProject\";\nimport { FormEvent } from \"react\";\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n} from \"@/components/Drawer\";\nimport Button from \"@/components/Button\";\nimport ProjectDesign from \"@/components/ProjectDesign\";\n\nexport const revalidate = 0;\n\nexport default async function ProjectDetail({\n params,\n}: {\n params: { id: string };\n}) {\n const projects = await fetchProjects();\n const project = await fetchProjectById(params.id);\n\n return (\n
\n \n \n
\n
\n {project?.result ? (\n \n ) : (\n
\n No HTML to display\n
\n )}\n
\n
\n
\n );\n}\n\ninterface PanelProps {\n open: boolean;\n onOpenChange?: (open: boolean) => void;\n selected?: HTMLElement | null;\n onSave: (values: [string, string][]) => void;\n}\nfunction Panel(props: PanelProps) {\n const { open, onOpenChange, selected, onSave } = props;\n const includedKeys = [\n \"padding\",\n \"color\",\n \"width\",\n \"height\",\n \"margin\",\n \"fontSize\",\n \"display\",\n \"position\",\n \"top\",\n \"left\",\n \"right\",\n \"bottom\",\n \"border\",\n \"background\",\n \"transform\",\n ];\n\n function onSubmit(e: FormEvent) {\n e.preventDefault();\n if (!selected) return;\n const formData = new FormData(e.target as HTMLFormElement);\n onSave?.(Array.from(formData.entries()) as [string, string][]);\n }\n\n return (\n \n \n \n \n Edit selected section\n \n
\n
\n \n \n
\n {selected &&\n Object.entries(getComputedStyle(selected))\n .filter(\n ([key]) =>\n !key.match(/\\d/) &&\n includedKeys.includes(key) &&\n !key.startsWith(\"webkit\"),\n )\n .map(([key, value]) => (\n
\n \n \n
\n ))}\n
\n \n \n \n \n \n \n \n \n );\n}\n" }, { "path": "app/(aipage)/profile/projects/[id]/settings/page.tsx", "content": "\"use client\";\n\nimport useProject from \"@/hooks/useProject\";\nimport { FormEvent, useEffect, useState } from \"react\";\nimport { cn, updateProject } from \"@/utils/helpers\";\nimport NavLink from \"@/components/NavLink\";\nimport Button from \"@/components/Button\";\nimport DeleteProjectConfirmDialog from \"@/components/DeleteProjectConfirmDialog\";\nimport LoadingSpinner from \"@/components/loadingSpinner\";\nimport { useRouter } from \"next/navigation\";\n\nexport default function ProjectSettingsPage() {\n const { setProject, project } = useProject();\n const [name, setName] = useState(project?.name);\n const [loading, setLoading] = useState(false);\n const { refresh } = useRouter();\n\n async function onNameFormSubmit(event: FormEvent) {\n event.preventDefault();\n if (!name || name === project?.name) return;\n setLoading(true);\n\n const { message: projectFromAPI } = await updateProject(\n {\n name,\n },\n project?._id as string,\n );\n\n setLoading(false);\n setProject(projectFromAPI);\n refresh();\n }\n\n return (\n
\n
\n \n General\n \n
\n
\n \n
\n
\n

Project Name

\n

\n This will be your project name on AIPage.dev\n

\n
\n setName(e.target.value)}\n />\n
\n
\n

Max 32 characters.

\n
\n \n {loading && }\n

Save Changes

\n \n
\n
\n \n
\n
\n

Delete Project

\n

\n Permanently delete your AIPage.dev project\n

\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n );\n}\n" }, { "path": "app/(aipage)/profile/projects/loading.tsx", "content": "import LoadingSpinner from \"@/components/loadingSpinner\";\n\nexport default function ProjectsLoading() {\n return (\n
\n \n
\n );\n}\n" }, { "path": "app/(aipage)/profile/projects/page.tsx", "content": "import { cn } from \"@/utils/helpers\";\nimport Link from \"next/link\";\nimport Button from \"@/components/Button\";\nimport ListProjects from \"@/components/ListProjects\";\nimport { fetchProjects } from \"@/utils/auth\";\n\nexport const revalidate = 0;\n\nexport default async function ProfileProjects() {\n const projects = await fetchProjects();\n const hasProjects = !!projects && projects.length > 0;\n\n return (\n
\n \n \n {!hasProjects ? (\n
\n

\n You don't have any projects yet!\n

\n \n \n \n \n
\n ) : (\n \n )}\n
\n \n \n );\n}\n" }, { "path": "app/(aipage)/profile/settings/loading.tsx", "content": "import LoadingSpinner from \"@/components/loadingSpinner\";\n\nexport default function SettingsLoading() {\n return (\n
\n \n
\n );\n}\n" }, { "path": "app/(aipage)/profile/settings/page.tsx", "content": "\"use client\";\nimport { useAuth } from \"@/context/AuthContext\";\nimport { useState, FormEvent } from \"react\";\nimport LoadingSpinner from \"@/components/loadingSpinner\";\nimport Button from \"@/components/Button\";\nimport { cn } from \"@/utils/helpers\";\nimport DeleteAccountConfirmDialog from \"@/components/DeleteAccountConfirmDialog\";\nimport NavLink from \"@/components/NavLink\";\n\nexport default function ProfileSettings() {\n const { user, setUser } = useAuth();\n const [name, setName] = useState(user?.name);\n const [loading, setLoading] = useState(false);\n\n async function onNameFormSubmit(event: FormEvent) {\n event.preventDefault();\n if (!name || name === user?.name) return;\n setLoading(true);\n const res = await fetch(\"/api/user\", {\n method: \"PATCH\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ name }),\n });\n const { user: userFromAPI, errors } = await res.json();\n setLoading(false);\n if (!errors) {\n setUser(userFromAPI);\n }\n }\n\n return (\n
\n
\n \n General\n \n
\n
\n \n
\n
\n

Your Name

\n

\n This will be your display name on AIPage.dev\n

\n
\n setName(e.target.value)}\n />\n
\n
\n

Max 32 characters.

\n
\n \n {loading && }\n

Save Changes

\n \n
\n
\n \n
\n
\n

Delete Account

\n

\n Permanently delete your AIPage.dev account and all of your data.\n This action cannot be undone - please proceed with caution.\n

\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n );\n}\n" }, { "path": "app/(preview)/not-found.tsx", "content": "import Link from \"next/link\";\nimport Button from \"@/components/Button\";\n\nexport default async function NotFound() {\n return (\n
\n
\n
\n

404 NOT FOUND

\n

\n We can’t find that page\n

\n

\n Sorry, the page you are looking for doesn't exist or has been moved.\n

\n\n
\n \n \n \n
\n
\n
\n
\n );\n}\n" }, { "path": "app/(preview)/profile/projects/[id]/preview/loading.tsx", "content": "import LoadingSpinner from \"@/components/loadingSpinner\";\n\nexport default function PreviewLoading() {\n return (\n
\n \n
\n );\n}\n" }, { "path": "app/(preview)/profile/projects/[id]/preview/page.tsx", "content": "import { fetchProjectById } from \"@/utils/auth\";\nimport { notFound } from \"next/navigation\";\nimport HTMLPreview from \"@/components/HTMLPreview\";\n\nexport default async function projectPreview({\n params,\n}: {\n params: { id: string };\n}) {\n const project = await fetchProjectById(params.id);\n if (!project || !project.result) return notFound();\n return ;\n}\n" }, { "path": "app/api/chat/route.ts", "content": "import { Configuration, OpenAIApi } from \"openai-edge\";\nimport { Ratelimit } from \"@upstash/ratelimit\";\nimport redis from \"../../../utils/redis\";\nimport { OpenAIStream, StreamingTextResponse } from \"ai\";\nimport { headers, cookies } from \"next/headers\";\nimport { NextResponse } from \"next/server\";\n\n/* // REMOVE THIS IF YOU DON'T WANT RATE LIMITING\n// START\nconst ratelimit = redis\n ? new Ratelimit({\n redis: redis,\n limiter: Ratelimit.fixedWindow(5, \"1440 m\"),\n analytics: true,\n })\n : undefined;\n\n// END\n */\nconst config = new Configuration({\n apiKey: process.env.OPENAI_API_KEY,\n});\n\nconst openai = new OpenAIApi(config);\n\nexport const runtime = \"edge\";\n\nexport async function POST(req: Request) {\n const cookieStore = cookies();\n /* // REMOVE THIS IF YOU DON'T WANT RATE LIMITING\n // START\n if (ratelimit) {\n const headersList = headers();\n const ipIdentifier = headersList.get(\"x-real-ip\");\n\n const result = await ratelimit.limit(ipIdentifier ?? \"\");\n\n if (!result.success) {\n const fakeStream =\n \"Too many requests in 1 day. Please try again in a 24 hours. Thank you. 🙏\";\n return new Response(fakeStream, {\n status: 429,\n headers: {\n \"X-RateLimit-Limit\": result.limit,\n \"X-RateLimit-Remaining\": result.remaining,\n } as any,\n });\n }\n }\n // END */\n\n const { messages } = await req.json();\n\n // Implemented for to test the API\n\n const sessionToken = cookieStore.get(\"sessionToken\")?.value as string;\n\n const storeMessage = await fetch(\n \"https://c3-na.altogic.com/e:64d52ccfc66bd54b97bdd78a/test\",\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n Session: sessionToken,\n },\n body: JSON.stringify({ content: messages[0].content }),\n },\n );\n\n const { credits } = await storeMessage.json();\n\n if (credits === 0) {\n return NextResponse.json({ code: \"no-credits\", credits });\n }\n\n const systemPrompt = `You are a talented UI designer who needs help creating a clear and concise HTML UI using Tailwind CSS. The UI should be visually appealing and responsive. Please design a UI component that includes the following elements:\n\n1. A header Section: Include a logo and a navigation menu.\n2. A hero Section: Create a captivating headline and a call-to-action button. Use a random image related to the prompt for the background image, generating it with the URL \"https://source.unsplash.com/featured/1280x720/?{description}\" (replace {description} with a relevant keyword).\n3. A feature Section: Showcase three standout feature cards with eye-catching featured icons from the Fontawesome CDN icon library. Apply subtle CSS animations, such as fade-in or slide-in effects using Animate.css, to enhance visual appeal.\n4. An individual Feature Sections: Create a separate section for each feature card. Each section should include a captivating title, description, and a call-to-action button. Use a random image related to the prompt for the background image, generating it with the URL \"https://source.unsplash.com/featured/1280x720/?{description}\" (replace {description} with a relevant keyword). You can float the image to the left or right of the text.\n5. A testimonial Section: Display two testimonials with names, roles, and feedback. Apply a CSS animation, like fade-in or slide-in animation using Animate.css, to reveal testimonials when scrolled into view.\n6. A blog Section: Include a section that displays recent blog posts with a title, short description, and a \"Read More\" link.\n7. An FAQ Section: Add a section for frequently asked questions and answers.\n8. A Team Section: Showcase the team with photos, names, roles, and social media links.\n9. A Newsletter Subscription: Add a section for users to subscribe to a newsletter.\n10. A Contact Form: Create fields for name, email, and message. Apply appropriate CSS animations or transitions using jQuery for smooth interactivity.\n11. A map Section: Include a Google Maps section with a marker showing the location of the business (you may need a Google Maps API key).\n12. A footer Section: Add links to social media profiles, utilizing the Fontawesome CDN icon library for social media icons.\n\nPlease ensure the HTML code is valid and properly structured, incorporating the necessary CDN links for Tailwind CSS, Fontawesome icons, jQuery, Animate.css, Google Maps API, and any additional CSS or JS files.\n\nRemember to keep the design minimalistic, intuitive, and visually appealing. Your attention to detail is highly appreciated. Once you complete the design, provide the HTML code for the UI component. The code should be valid HTML, formatted for readability, and include the necessary CDN links for Tailwind CSS, icons, and any additional libraries used for data visualization.\n\n Given the prompt, generate the only HTML code for the UI component. The code should be valid HTML and include the necessary CDN links for Tailwind CSS, Fontawesome icons, and any additional CSS and JavaScript files.\n\n Start with and end with . The code should be formatted for readability.`;\n\n const combinedMessages = [\n ...messages,\n { role: \"system\", content: systemPrompt },\n ];\n\n let response;\n let stream;\n\n response = await openai.createChatCompletion({\n model: \"gpt-3.5-turbo-16k\",\n messages: combinedMessages.map((message: any) => ({\n role: message.role,\n content: message.content,\n })),\n stream: true,\n });\n\n stream = OpenAIStream(response);\n // Continue generating the response if incomplete\n\n // If rate limited, return a fake response\n return new StreamingTextResponse(stream);\n}\n" }, { "path": "app/api/create-checkout-session/route.ts", "content": "import { NextResponse } from \"next/server\";\nimport { cookies } from \"next/headers\";\nimport altogic from \"@/utils/altogic\";\n\nexport async function POST(req: Request) {\n const { priceId } = await req.json();\n const cookieStore = cookies();\n const session = cookieStore.get(\"sessionToken\");\n\n if (!session) {\n return NextResponse.json(\n { error: \"You must be logged in to purchase this product\" },\n { status: 401 },\n );\n }\n\n // @ts-ignore\n altogic.auth.setSession({\n token: session.value,\n });\n\n const path = process.env.NEXT_PUBLIC_CREATE_SESSION_PATH as string;\n const { errors, data } = await altogic.endpoint.post(path, {\n priceId,\n });\n\n if (errors) {\n return NextResponse.json({ errors }, { status: errors.status });\n }\n\n return NextResponse.json({ url: data.url });\n}\n" }, { "path": "app/api/domain/check-domain/route.ts", "content": "import { NextResponse } from \"next/server\";\n\nexport async function POST(req: Request) {\n const { domain } = await req.json();\n\n const [configResponse, domainResponse] = await Promise.all([\n fetch(`https://api.vercel.com/v6/domains/${domain}/config`, {\n method: \"GET\",\n headers: {\n Authorization: `Bearer ${process.env.AUTH_BEARER_TOKEN_VERCEL}`,\n \"Content-Type\": \"application/json\",\n },\n }),\n fetch(\n `https://api.vercel.com/v9/projects/${process.env.PROJECT_ID_VERCEL}/domains/${domain}`,\n {\n method: \"GET\",\n headers: {\n Authorization: `Bearer ${process.env.AUTH_BEARER_TOKEN_VERCEL}`,\n \"Content-Type\": \"application/json\",\n },\n },\n ),\n ]);\n\n const configJson = await configResponse.json();\n const domainJson = await domainResponse.json();\n if (domainResponse.status !== 200) {\n return NextResponse.json(domainJson, { status: domainResponse.status });\n }\n\n /**\n * If domain is not verified, we try to verify now\n */\n let verificationResponse = null;\n if (!domainJson.verified) {\n const verificationRes = await fetch(\n `https://api.vercel.com/v9/projects/${process.env.PROJECT_ID_VERCEL}/domains/${domain}/verify`,\n {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${process.env.AUTH_BEARER_TOKEN_VERCEL}`,\n \"Content-Type\": \"application/json\",\n },\n },\n );\n verificationResponse = await verificationRes.json();\n }\n\n if (verificationResponse && verificationResponse.verified) {\n /**\n * Domain was just verified\n */\n return NextResponse.json(\n {\n configured: !configJson.misconfigured,\n ...verificationResponse,\n },\n { status: 200 },\n );\n }\n\n return NextResponse.json(\n {\n configured: !configJson.misconfigured,\n ...domainJson,\n ...(verificationResponse ? { verificationResponse } : {}),\n },\n { status: 200 },\n );\n}\n" }, { "path": "app/api/domain/remove-domain/route.ts", "content": "import { NextResponse } from \"next/server\";\nimport altogic from \"@/utils/altogic\";\nimport { getSessionCookie } from \"@/utils/auth\";\n\nexport async function POST(req: Request) {\n const { domain } = await req.json();\n\n console.log({ domain });\n\n const response = await fetch(\n `https://api.vercel.com/v9/projects/${process.env.PROJECT_ID_VERCEL}/domains/${domain}`,\n {\n headers: {\n Authorization: `Bearer ${process.env.AUTH_BEARER_TOKEN_VERCEL}`,\n },\n method: \"DELETE\",\n },\n );\n\n const json = await response.json();\n\n console.log(JSON.stringify(json, null, 2));\n console.log(\"-----\");\n\n // @ts-ignore\n altogic.auth.setSession({\n token: getSessionCookie() as string,\n });\n\n const { errors } = await altogic.db\n .model(\"messages.domains\")\n .filter(`domain == '${domain}'`)\n .delete();\n\n console.log(JSON.stringify(errors, null, 2));\n\n if (errors) {\n return NextResponse.json(errors, { status: errors.status });\n }\n\n NextResponse.json(json);\n}\n" }, { "path": "app/api/domain/verify-domain/route.ts", "content": "import { NextResponse } from \"next/server\";\n\nexport async function POST(req: Request) {\n const { domain } = await req.json();\n\n const response = await fetch(\n `https://api.vercel.com/v9/projects/${process.env.PROJECT_ID_VERCEL}/domains/${domain}/verify`,\n {\n headers: {\n Authorization: `Bearer ${process.env.AUTH_BEARER_TOKEN_VERCEL}`,\n \"Content-Type\": \"application/json\",\n },\n method: \"POST\",\n },\n );\n\n const data = await response.json();\n return NextResponse.json(data, {\n status: response.status,\n });\n}\n" }, { "path": "app/api/logout/route.ts", "content": "import { NextResponse } from \"next/server\";\nimport { logout } from \"@/utils/auth\";\n\nexport async function GET(req: Request) {\n return logout(req, NextResponse);\n}\n" }, { "path": "app/api/message/route.ts", "content": "import altogic from \"@/utils/altogic\";\nimport { NextResponse } from \"next/server\";\nimport { cookies } from \"next/headers\";\nimport { revalidatePath } from \"next/cache\";\n\nexport async function PUT(req: Request) {\n const cookieStore = cookies();\n const token = cookieStore.get(\"sessionToken\");\n\n if (!token) {\n return NextResponse.json(\n {\n message: \"You must be logged in to update your project.\",\n },\n { status: 401 },\n );\n }\n\n const body = await req.json();\n // @ts-ignore\n altogic.auth.setSession({\n token: token.value,\n });\n\n const { data, errors } = await altogic.endpoint.put(\"/message-content\", body);\n\n if (errors) return NextResponse.json({ errors }, { status: 500 });\n\n revalidatePath(\"/profile/projects\");\n return NextResponse.json({ message: data }, { status: 200 });\n}\n" }, { "path": "app/api/og/route.tsx", "content": "import { ImageResponse } from \"next/server\";\nimport { useState } from \"react\";\n// App router includes @vercel/og.\n// No need to install it.\n\nexport const runtime = \"edge\";\n\nexport async function GET(request: Request) {\n const tweetIntents = [\n \"Just used AI to craft an EPIC landing page in minutes with AIpage.dev ! 🤖 This is the future of web design! Check it out 👉 @aipagedev\",\n \"Creating a stunning webpage has never been easier thanks to AIpage.dev! 🚀 Give it a try 👉 @aipagedev\",\n \"Web design will never be the same after you try AIpage.dev! 🛠️ A whole new level of creativity unleashed! Check it out 👉 @aipagedev\",\n \"Revolutionize your web design process with AIpage.dev. The future is here! 👉 @aipagedev\",\n \"I just built an amazing webpage with AIpage.dev in minutes! 🌟 You have to try this 👉 @aipagedev\",\n \"AIpage.dev is a game-changer for web design! Say hello to efficiency 👋 @aipagedev\",\n \"Why spend hours on web design when AIpage.dev can do it in minutes? 🕒 Check it out! 👉 @aipagedev\",\n \"Impressed by the power of AI in web design with AIpage.dev! This is incredible 👀 @aipagedev\",\n \"I used AIpage.dev and it completely transformed how I approach web design. You need to try this! 🎉 @aipagedev\",\n \"Just when I thought web design couldn’t get any easier, I found AIpage.dev! 🎊 Try it now 👉 @aipagedev\",\n \"Unleashing my inner designer with the help of AIpage.dev. This is next level! 🚀 Check it out 👉 @aipagedev\",\n \"With AIpage.dev, I can focus on creativity while AI handles the coding. It’s amazing! 💥 @aipagedev\",\n ];\n\n // Function to generate a random index for selecting a tweet text\n const getRandomIndex = () => {\n return Math.floor(Math.random() * tweetIntents.length);\n };\n\n // Function to generate a random tweet text\n const getRandomTweet = () => {\n return tweetIntents[getRandomIndex()];\n };\n\n const text = getRandomTweet();\n\n return new ImageResponse(\n (\n \n \n \n \n \n\n \n\n \n \n \n\n \n \n\n \n \n \n\n \n \n
\n\n \n {text}\n \n \n \n ),\n {\n width: 1200,\n height: 630,\n }\n );\n}\n" }, { "path": "app/api/project/[id]/domain/route.ts", "content": "import { NextResponse } from \"next/server\";\nimport altogic from \"@/utils/altogic\";\nimport { getSessionCookie } from \"@/utils/auth\";\n\nexport async function POST(\n req: Request,\n { params }: { params: { id: string } },\n) {\n const { domain, isPrimary } = await req.json();\n\n // @ts-ignore\n altogic.auth.setSession({\n token: getSessionCookie() as string,\n });\n\n try {\n const { data, errors } = await altogic.endpoint.post(\n \"/add-domain\",\n {\n domain,\n isPrimary,\n projectId: params.id,\n },\n undefined,\n {\n Session: getSessionCookie(),\n },\n );\n\n if (errors) {\n return NextResponse.json({ errors }, { status: errors.status });\n }\n\n const response = await fetch(\n `https://api.vercel.com/v9/projects/${process.env.PROJECT_ID_VERCEL}/domains`,\n {\n body: JSON.stringify({ name: domain }),\n headers: {\n Authorization: `Bearer ${process.env.AUTH_BEARER_TOKEN_VERCEL}`,\n \"Content-Type\": \"application/json\",\n },\n method: \"POST\",\n },\n );\n\n const domainData = await response.json();\n\n if (domainData.error?.code == \"forbidden\") {\n return NextResponse.json(\n {\n error: domainData.error,\n },\n { status: 403 },\n );\n } else if (domainData.error?.code == \"domain_taken\") {\n return NextResponse.json(\n {\n error: domainData.error,\n },\n { status: 409 },\n );\n }\n\n return NextResponse.json({ data }, { status: 200 });\n } catch (error) {\n return NextResponse.json({}, { status: 500 });\n }\n}\n" }, { "path": "app/api/project/[id]/route.ts", "content": "import { deleteProject } from \"@/utils/auth\";\nimport { NextResponse } from \"next/server\";\nimport { revalidatePath } from \"next/cache\";\n\nexport async function DELETE(\n req: Request,\n { params }: { params: { id: string } },\n) {\n try {\n const { errors } = await deleteProject(params.id);\n\n if (errors) {\n return NextResponse.json({ errors }, { status: 500 });\n }\n\n revalidatePath(\"/profile/projects\");\n return NextResponse.json({ status: \"ok\" }, { status: 200 });\n } catch (error) {\n return NextResponse.json({}, { status: 500 });\n }\n}\n" }, { "path": "app/api/project/route.ts", "content": "import { deleteProject, updateProjectName } from \"@/utils/auth\";\nimport { NextResponse } from \"next/server\";\n\nexport async function PATCH(req: Request) {\n const { name, id } = await req.json();\n\n try {\n const { project, errors } = await updateProjectName(id, name);\n\n if (errors) {\n return NextResponse.json({ errors }, { status: 500 });\n }\n\n return NextResponse.json({ project }, { status: 200 });\n } catch (error) {\n return NextResponse.json({}, { status: 500 });\n }\n}\n" }, { "path": "app/api/user/route.ts", "content": "import { deleteUser, logout, updateUser } from \"@/utils/auth\";\nimport { NextResponse } from \"next/server\";\n\nexport async function PATCH(req: Request) {\n const { data, errors } = await updateUser(await req.json());\n\n if (errors) {\n return NextResponse.json({ errors }, { status: 500 });\n }\n\n return NextResponse.json({ user: data }, { status: 200 });\n}\n\nexport async function DELETE(req: Request) {\n const { errors } = await deleteUser();\n\n if (errors) {\n return NextResponse.json({ errors }, { status: 500 });\n }\n\n return logout(req, NextResponse);\n}\n" }, { "path": "app/auth-redirect/route.ts", "content": "import altogic from \"@/utils/altogic\";\nimport { NextResponse } from \"next/server\";\n\nexport async function GET(req: Request) {\n const url = new URL(req.url);\n const accessToken = url.searchParams.get(\"access_token\") as string;\n const status = url.searchParams.get(\"status\");\n const isOk = status === \"200\";\n\n const destinationUrl = new URL(\"/\", new URL(req.url).origin);\n const response = NextResponse.redirect(destinationUrl, { status: 302 });\n\n if (!isOk) return response;\n\n const { session, errors } = await altogic.auth.getAuthGrant(accessToken);\n\n if (errors) {\n // TODO: handle errors;\n }\n\n if (session) {\n response.cookies.set(\"sessionToken\", session.token, {\n path: \"/\",\n httpOnly: true,\n maxAge: 60 * 60 * 24 * 7, // 1 week\n });\n }\n\n return response;\n}\n" }, { "path": "app/layout.tsx", "content": "import AuthModal from \"@/components/AuthModal\";\nimport PricesModal from \"@/components/PricesModal\";\nimport { AuthProvider } from \"@/context/AuthContext\";\nimport { Project } from \"@/types\";\nimport { fetchAuthUser, fetchProducts, getProjectByDomain } from \"@/utils/auth\";\nimport { isAipage } from \"@/utils/helpers\";\nimport { Metadata } from \"next\";\nimport { Inter } from \"next/font/google\";\nimport { headers } from \"next/headers\";\nimport { ReactNode } from \"react\";\nimport \"../styles/globals.css\";\nconst inter = Inter({ subsets: [\"latin\"] });\n\nexport async function generateMetadata(): Promise {\n const isAipageDomain = isAipage(headers().get(\"Host\") as string);\n if (!isAipageDomain) {\n const project = await getProjectByDomain(headers().get(\"Host\") as string);\n if (project) return {};\n }\n\n return {\n title: \"AIPage.dev - An AI-Powered Landing Page Generator | by @zinedkaloc\",\n description:\n \"AI-Powered Landing Page Generator. Experience the Open Source Project that Empowers You to Build Stunning Landing Pages Instantly\",\n openGraph: {\n title:\n \"AIPage.dev - An AI-Powered Landing Page Generator | by @zinedkaloc\",\n description:\n \"AI-Powered Landing Page Generator. Experience the Open Source Project that Empowers You to Build Stunning Landing Pages Instantly\",\n type: \"website\",\n url: \"https://aipage.dev\",\n images: `${process.env.NEXT_PUBLIC_DOMAIN}/api/og?text=${new Date()\n .getTime()\n .toString()}`,\n },\n };\n}\n\nexport default async function RootLayout({\n children,\n}: {\n children: ReactNode;\n}) {\n const isAipageDomain = isAipage(headers().get(\"Host\") as string);\n const user = await fetchAuthUser();\n const products = await fetchProducts();\n let project: Project | null = null;\n\n if (!isAipageDomain) {\n project = await getProjectByDomain(headers().get(\"Host\") as string);\n }\n\n if (!isAipageDomain && project?.result) {\n return require(\"html-react-parser\")(project?.result);\n }\n\n return (\n \n \n \n {children}\n \n \n \n \n \n );\n}\n" }, { "path": "app/not-found.tsx", "content": "import Link from \"next/link\";\nimport Button from \"@/components/Button\";\n\nexport default async function NotFound() {\n return (\n
\n
\n
\n

404 NOT FOUND

\n

\n We can’t find that page\n

\n

\n Sorry, the page you are looking for doesn't exist or has been moved.\n

\n\n
\n \n \n \n
\n
\n
\n
\n );\n}\n" }, { "path": "components/AddDomainModal.tsx", "content": "\"use client\";\nimport useSearchParams from \"@/hooks/useSearchParams\";\nimport Modal from \"@/components/Modal\";\nimport { FormEvent, useState } from \"react\";\nimport Button from \"@/components/Button\";\nimport LoadingSpinner from \"@/components/loadingSpinner\";\nimport Image from \"next/image\";\nimport Switch from \"@/components/Switch\";\nimport { useParams, useRouter } from \"next/navigation\";\nimport useProject from \"@/hooks/useProject\";\nimport { APIError } from \"altogic\";\n\nexport default function AddDomainModal() {\n const { deleteByKey, has } = useSearchParams();\n const [loading, setLoading] = useState(false);\n const [hasError, setHasError] = useState(false);\n const [isPrimary, setIsPrimary] = useState(false);\n const [domain, setDomain] = useState(\"\");\n const [error, setError] = useState(null);\n const { id } = useParams();\n const { addDomain } = useProject();\n const { refresh } = useRouter();\n\n function close() {\n setIsPrimary(false);\n setDomain(\"\");\n deleteByKey(\"domainModal\");\n setError(null);\n setHasError(false);\n }\n\n async function onSubmit(e: FormEvent) {\n e.preventDefault();\n\n const data = {\n domain,\n isPrimary,\n };\n\n setLoading(true);\n setHasError(false);\n try {\n const res = await fetch(`/api/project/${id}/domain`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(data),\n });\n\n const { errors, data: domainFromAPI } = await res.json();\n\n if (errors) {\n setHasError(true);\n setError(errors);\n } else {\n close();\n addDomain(domainFromAPI);\n refresh();\n }\n } catch {\n setHasError(true);\n } finally {\n setLoading(false);\n }\n }\n\n return (\n \n
\n
\n \n

Add Domain

\n
\n
\n
\n \n Domain\n \n
\n setDomain(e.target.value)}\n autoComplete=\"off\"\n pattern=\"[a-z0-9]+\\.[a-zA-Z]{2,}\"\n className=\"border-gray-300 text-gray-900 placeholder-gray-300 focus:border-gray-500 focus:ring-gray-500 block w-full rounded-md focus:outline-none sm:text-sm\"\n placeholder=\"aipage.dev\"\n required\n />\n
\n
\n Please enter a valid domain name (e.g. aipage.dev)\n
\n
\n {/*\n
\n

Primary Domain

\n \n
\n */}\n {hasError && (\n
\n {error && error.items.length > 0 ? (\n error?.items.map((item) => (\n

{item.message}

\n ))\n ) : (\n

\n There was an error adding your domain. Please try again later.\n

\n )}\n
\n )}\n
\n \n \n {loading && }\n Add Domain\n \n
\n
\n
\n \n );\n}\n" }, { "path": "components/AlertCircleFill.tsx", "content": "export default function AlertCircleFill({ className }: { className: string }) {\n return (\n \n \n \n \n \n );\n}\n" }, { "path": "components/AlertDialog.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\n\nimport { cn } from \"@/utils/helpers\";\n\nconst AlertDialog = AlertDialogPrimitive.Root;\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger;\n\nconst AlertDialogPortal = ({\n className,\n ...props\n}: AlertDialogPrimitive.AlertDialogPortalProps) => (\n \n);\nAlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n));\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n \n));\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;\n\nconst AlertDialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n);\nAlertDialogHeader.displayName = \"AlertDialogHeader\";\n\nconst AlertDialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n);\nAlertDialogFooter.displayName = \"AlertDialogFooter\";\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogDescription.displayName =\n AlertDialogPrimitive.Description.displayName;\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;\n\nexport {\n AlertDialog,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n};\n" }, { "path": "components/AuthModal.tsx", "content": "\"use client\";\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport altogic from \"@/utils/altogic\";\nimport useSearchParams from \"@/hooks/useSearchParams\";\nimport Image from \"next/image\";\nimport Modal from \"@/components/Modal\";\nimport LoadingSpinner from \"@/components/loadingSpinner\";\nimport Button, { ButtonVariant } from \"@/components/Button\";\n\nexport default function AuthModal() {\n const { deleteByKey, has } = useSearchParams();\n\n const [selected, setSelected] = useState();\n\n const loginMethods = [\n {\n name: \"Google\",\n variant: \"default\",\n icon: GoogleIcon,\n handler: () => altogic.auth.signInWithProvider(\"google\"),\n },\n {\n name: \"Github\",\n variant: \"light\",\n icon: GithubIcon,\n handler: () => altogic.auth.signInWithProvider(\"github\"),\n },\n ];\n\n function close() {\n deleteByKey(\"authModal\");\n }\n\n return (\n \n
\n \n \n \n

Sign in to AIPage

\n

\n Powered by AI, Perfected for You\n

\n
\n
\n {loginMethods.map((method, index) => (\n {\n setSelected(index);\n method.handler();\n }}\n className=\"h-10\"\n >\n {index === selected ? (\n \n ) : (\n \n )}\n

Continue with {method.name}

\n \n ))}\n

\n Enterprise login?{\" \"}\n \n Contact\n \n

\n
\n \n );\n}\n\nconst GoogleIcon = () => (\n \n \n \n);\n\nconst GithubIcon = () => (\n \n \n \n);\n" }, { "path": "components/Badge.tsx", "content": "import { cn } from \"@/utils/helpers\";\n\nexport type BadgeVariant = \"yellow\" | \"gray\" | \"red\" | \"black\" | \"green\";\n\nexport default function Badge({\n text,\n variant,\n className,\n}: {\n text: string;\n variant?: BadgeVariant;\n className?: string;\n}) {\n return (\n \n {text}\n \n );\n}\n" }, { "path": "components/BrowserWindow.tsx", "content": "import { ReactNode } from \"react\";\nimport { cn } from \"@/utils/helpers\";\n\ninterface BrowserWindowProps {\n children: ReactNode;\n className?: string;\n}\nexport default function BrowserWindow({\n children,\n className,\n}: BrowserWindowProps) {\n return (\n \n
\n
\n
\n
\n
\n
\n
\n
\n
{children}
\n
\n
\n );\n}\n" }, { "path": "components/Button.tsx", "content": "import { cn } from \"@/utils/helpers\";\nimport { ComponentPropsWithoutRef } from \"react\";\nimport * as React from \"react\";\nexport type ButtonVariant = \"default\" | \"light\" | \"pill\" | \"danger\";\n\ninterface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n variant?: ButtonVariant;\n}\n\nconst Button = React.forwardRef(\n ({ className, children, variant, ...props }, ref) => (\n \n {children}\n \n ),\n);\n\nexport default Button;\n" }, { "path": "components/Chart.tsx", "content": "export default function Chart({ className }: { className: string }) {\n return (\n \n \n \n \n \n );\n}\n" }, { "path": "components/CheckCircleFill.tsx", "content": "export default function CheckCircleFill({ className }: { className?: string }) {\n return (\n \n \n \n \n );\n}\n" }, { "path": "components/ConfiguredSection.tsx", "content": "import { useState } from \"react\";\nimport { DomainInfo } from \"@/types\";\n\ninterface ConfiguredSectionProps {\n domainInfo?: DomainInfo | null;\n}\nconst ConfiguredSection = ({ domainInfo }: ConfiguredSectionProps) => {\n const [recordType, setRecordType] = useState(\"A\");\n\n if (!domainInfo?.verified) {\n const txtVerification = domainInfo?.verification?.find(\n (x: any) => x.type === \"TXT\",\n );\n return (\n <>\n
\n \n \n \n \n \n

\n Domain is pending verification\n

\n
\n\n
\n
\n
\n setRecordType(\"CNAME\")}\n className={`${\n recordType == \"CNAME\"\n ? \"text-black border-black\"\n : \"text-gray-400 border-white\"\n } text-sm border-b-2 pb-1 transition-all ease duration-150`}\n >\n Verify Domain Ownership\n
\n
\n
\n

\n Please set the following TXT record on {domainInfo?.apexName} to\n prove ownership of {domainInfo?.name}:\n

\n
\n
\n

Type

\n

\n {txtVerification?.type}\n

\n
\n
\n

Name

\n

\n {txtVerification?.domain &&\n domainInfo?.apexName &&\n txtVerification?.domain?.slice(\n 0,\n txtVerification?.domain?.length -\n domainInfo?.apexName?.length -\n 1,\n )}\n

\n
\n
\n

Value

\n

\n \n {txtVerification?.value}\n \n

\n
\n
\n
\n
\n \n );\n }\n\n return (\n <>\n
\n \n \n {domainInfo.configured ? (\n <>\n \n \n ) : (\n <>\n \n \n \n )}\n \n \n {domainInfo.configured ? \"Valid\" : \"Invalid\"} Configuration\n

\n
\n\n {!domainInfo.configured && (\n <>\n
\n
\n
\n setRecordType(\"A\")}\n className={`${\n recordType == \"A\"\n ? \"text-black border-black\"\n : \"text-gray-400 border-white\"\n } text-sm border-b-2 pb-1 transition-all ease duration-150`}\n >\n A Record (Recommended)\n \n setRecordType(\"CNAME\")}\n className={`${\n recordType == \"CNAME\"\n ? \"text-black border-black\"\n : \"text-gray-400 border-white\"\n } text-sm border-b-2 pb-1 transition-all ease duration-150`}\n >\n CNAME Record (subdomains)\n \n
\n
\n

\n Set the following record on your DNS provider to continue:\n

\n
\n
\n

Type

\n

{recordType}

\n
\n
\n

Name

\n

\n {recordType == \"CNAME\" ? \"www\" : \"@\"}\n

\n
\n
\n

Value

\n

\n {recordType == \"CNAME\" ? `cname.aipage.dev` : `76.76.21.21`}\n

\n
\n
\n
\n
\n \n )}\n \n );\n};\n\nexport default ConfiguredSection;\n" }, { "path": "components/ConfirmDialog.tsx", "content": "\"use client\";\n\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogTrigger,\n} from \"@/components/AlertDialog\";\nimport Button from \"@/components/Button\";\nimport { XIcon } from \"lucide-react\";\nimport { useAuth } from \"@/context/AuthContext\";\nimport { ReactNode, useState } from \"react\";\n\ninterface ConfirmDialogProps {\n text: string;\n trigger: ReactNode;\n onConfirm: () => void;\n children?: ReactNode;\n}\n\nexport default function ConfirmDialog({\n trigger,\n text,\n onConfirm,\n children,\n}: ConfirmDialogProps) {\n const [confirmText, setConfirmText] = useState(\"\");\n\n return (\n \n {trigger}\n \n \n \n \n {children && (\n
\n {children}\n
\n )}\n
\n
\n \n To verify, type{\" \"}\n {text} below\n \n
\n setConfirmText(e.target.value)}\n className=\"block w-full rounded-md border-gray-300 pr-10 text-gray-900 placeholder-gray-300 focus:border-gray-500 focus:outline-none focus:ring-gray-500 sm:text-sm\"\n />\n
\n
\n\n \n {\n setConfirmText(\"\");\n onConfirm();\n }}\n >\n {text.toUpperCase()}\n \n \n
\n \n \n );\n}\n" }, { "path": "components/DeleteAccountConfirmDialog.tsx", "content": "\"use client\";\n\nimport Button from \"@/components/Button\";\nimport { useState } from \"react\";\nimport ConfirmDialog from \"@/components/ConfirmDialog\";\nimport LoadingSpinner from \"@/components/loadingSpinner\";\nimport { useAuth } from \"@/context/AuthContext\";\n\nexport default function DeleteAccountConfirmDialog() {\n const [deleting, setDeleting] = useState(false);\n const { user } = useAuth();\n\n async function deleteAccountHandler() {\n setDeleting(true);\n const res = await fetch(\"/api/user\", {\n method: \"DELETE\",\n });\n if (res.ok && res.redirected) {\n window.location.href = res.url;\n } else {\n setDeleting(false);\n }\n }\n\n return (\n \n {deleting && }\n

Delete Account

\n \n }\n onConfirm={deleteAccountHandler}\n >\n \n

Delete Account

\n

\n Warning: This will permanently delete your account and all your data.\n

\n \n );\n}\n" }, { "path": "components/DeleteProjectConfirmDialog.tsx", "content": "\"use client\";\n\nimport Button from \"@/components/Button\";\nimport { useState } from \"react\";\nimport ConfirmDialog from \"@/components/ConfirmDialog\";\nimport LoadingSpinner from \"@/components/loadingSpinner\";\nimport { Project } from \"@/types\";\nimport { useRouter } from \"next/navigation\";\nimport useProjectList from \"@/hooks/useProjectList\";\n\nexport default function DeleteProjectConfirmDialog({\n project,\n}: {\n project: Project | null;\n}) {\n const [deleting, setDeleting] = useState(false);\n const { push, prefetch, refresh } = useRouter();\n const { deleteProject } = useProjectList();\n\n async function deleteProjectHandler() {\n if (!project) return;\n setDeleting(true);\n const res = await fetch(\"/api/project/\" + project._id, {\n method: \"DELETE\",\n });\n const { errors } = await res.json();\n\n if (!errors) {\n deleteProject(project._id);\n refresh();\n push(\"/profile/projects\");\n } else setDeleting(false);\n }\n\n return (\n \n {deleting && }\n

Delete project

\n \n }\n onConfirm={deleteProjectHandler}\n />\n );\n}\n" }, { "path": "components/Divider.tsx", "content": "export default function Divider({ className }: { className?: string }) {\n return (\n \n \n \n );\n}\n" }, { "path": "components/DomainCard.tsx", "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport LoadingSpinner from \"@/components/loadingSpinner\";\nimport ConfiguredSection from \"@/components/ConfiguredSection\";\nimport { Domain } from \"@/types\";\nimport Button from \"@/components/Button\";\nimport { useRouter } from \"next/navigation\";\nimport useProject from \"@/hooks/useProject\";\n\ninterface DomainCardProps {\n domain: Domain;\n}\n\nconst DomainCard = ({ domain }: DomainCardProps) => {\n const removeDomainFromState = useProject((state) => state.removeDomain);\n const [domainInfo, setDomainInfo] = useState(null);\n const [isValidating, setIsValidating] = useState(false);\n const [removing, setRemoving] = useState(false);\n\n const { refresh } = useRouter();\n\n useEffect(() => {\n checkDomain();\n const interval = setInterval(checkDomain, 10000);\n return () => clearInterval(interval);\n }, []);\n\n async function checkDomain() {\n setIsValidating(true);\n const res = await fetch(\"/api/domain/check-domain\", {\n method: \"POST\",\n body: JSON.stringify({ domain: domain.domain }),\n });\n const data = await res.json();\n setDomainInfo(data);\n setIsValidating(false);\n }\n\n async function removeDomain() {\n setRemoving(true);\n try {\n await fetch(\"/api/domain/remove-domain\", {\n method: \"POST\",\n body: JSON.stringify({ domain: domain.domain }),\n });\n refresh();\n removeDomainFromState(domain._id);\n } catch {\n setRemoving(false);\n }\n }\n\n return (\n
\n
\n \n {domain.domain}\n \n \n \n \n \n \n \n \n
\n \n \n
\n
\n\n \n
\n );\n};\n\nexport default DomainCard;\n" }, { "path": "components/DomainConfiguration.tsx", "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { getSubdomain } from \"@/utils/helpers\";\nimport { DomainVerificationStatusProps } from \"@/types\";\n\nexport const InlineSnippet = ({ children }: { children: string }) => {\n return (\n \n {children}\n \n );\n};\n\nexport default function DomainConfiguration({\n data,\n}: {\n data: { status: DomainVerificationStatusProps; response: any };\n}) {\n const { domainJson } = data.response;\n console.log();\n const subdomain = getSubdomain(domainJson.name, domainJson.apexName);\n const [recordType, setRecordType] = useState(!!subdomain ? \"CNAME\" : \"A\");\n\n if (data.status === \"Pending Verification\") {\n const txtVerification = domainJson.verification.find(\n (x: any) => x.type === \"TXT\",\n );\n return (\n
\n

\n Please set the following TXT record on{\" \"}\n {domainJson.apexName} to prove\n ownership of {domainJson.name}:\n

\n
\n
\n

Type

\n

{txtVerification.type}

\n
\n
\n

Name

\n

\n {txtVerification.domain.slice(\n 0,\n txtVerification.domain.length - domainJson.apexName.length - 1,\n )}\n

\n
\n
\n

Value

\n

\n {txtVerification.value}\n

\n
\n
\n

\n Warning: if you are using this domain for another site, setting this\n TXT record will transfer domain ownership away from that site and\n break it. Please exercise caution when setting this record.\n

\n
\n );\n }\n\n if (data.status === \"Unknown Error\") {\n return (\n
\n

{data.response.domainJson.error.message}

\n
\n );\n }\n\n return (\n
\n
\n setRecordType(\"A\")}\n className={`${\n recordType == \"A\"\n ? \"border-black text-black\"\n : \"border-white text-gray-400\"\n } ease border-b-2 pb-1 text-sm transition-all duration-150`}\n >\n A Record{!subdomain && \" (recommended)\"}\n \n setRecordType(\"CNAME\")}\n className={`${\n recordType == \"CNAME\"\n ? \"border-black text-black\"\n : \"border-white text-gray-400\"\n } ease border-b-2 pb-1 text-sm transition-all duration-150`}\n >\n CNAME Record{subdomain && \" (recommended)\"}\n \n
\n
\n

\n To configure your {recordType === \"A\" ? \"apex domain\" : \"subdomain\"} (\n \n {recordType === \"A\" ? domainJson.apexName : domainJson.name}\n \n ), set the following {recordType} record on your DNS provider to\n continue:\n

\n
\n
\n

Type

\n

{recordType}

\n
\n
\n

Name

\n

\n {recordType === \"A\" ? \"@\" : subdomain ?? \"www\"}\n

\n
\n
\n

Value

\n

\n {recordType === \"A\" ? `76.76.21.21` : `cname.dub.co`}\n

\n
\n
\n

TTL

\n

86400

\n
\n
\n

\n Note: for TTL, if 86400 is not\n available, set the highest value possible. Also, domain propagation\n can take anywhere between 1 hour to 12 hours.\n

\n
\n
\n );\n}\n" }, { "path": "components/Drawer.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/utils/helpers\";\nimport { XIcon } from \"lucide-react\";\n\nconst Sheet = SheetPrimitive.Root;\n\nconst SheetTrigger = SheetPrimitive.Trigger;\n\nconst SheetClose = SheetPrimitive.Close;\n\nconst SheetPortal = ({\n className,\n ...props\n}: SheetPrimitive.DialogPortalProps) => (\n \n);\nSheetPortal.displayName = SheetPrimitive.Portal.displayName;\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-white px-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n },\n);\n\ninterface SheetContentProps\n extends React.ComponentPropsWithoutRef,\n VariantProps {}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef,\n SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n));\nSheetContent.displayName = SheetPrimitive.Content.displayName;\n\nconst SheetHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n);\nSheetHeader.displayName = \"SheetHeader\";\n\nconst SheetFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n);\nSheetFooter.displayName = \"SheetFooter\";\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n};\n" }, { "path": "components/HTMLPreview.tsx", "content": "interface HTMLPreviewProps {\n html: string;\n}\n\nexport default function HTMLPreview({ html }: HTMLPreviewProps) {\n return (\n