### Install Kirimase Globally Source: https://kirimase.dev/getting-started Install Kirimase globally using npm to make it accessible from any directory on your system. This is the recommended way to start. ```bash npm install -g kirimase ``` -------------------------------- ### Run Kirimase Add Command Source: https://kirimase.dev/commands/add Executes the interactive package installation process. ```bash kirimase add ``` -------------------------------- ### Install Stripe via Kirimase Source: https://kirimase.dev/the-tutorial Run the Kirimase CLI command to automatically install and configure Stripe. ```bash pnpm dlx kirimase@latest add ``` -------------------------------- ### Interactive Generation Example Source: https://kirimase.dev/commands/generate An example of the interactive CLI prompts and the resulting file generation output. ```bash cd your-nextjs-project kirimase generate ℹ Quickly generate your Model (Drizzle schema + queries / mutations), Controllers (API Routes and TRPC Routes), and Views 19:11:01 ? Please select the resources you would like to generate: Model, TRPC Route, Views + Components (with Shadcn UI, requires TRPC route) ? Please enter the table name (plural and in snake_case): authors ? Please select the type of this field: string ? Please enter the field name (in snake_case): name ? Is this field required? yes ? Would you like to add another field? yes ? Please select the type of this field: number ? Please enter the field name (in snake_case): birth_year ? Is this field required? no ? Would you like to add another field? no ? Would you like to set up an index? no OUTPUT: ✔ Added Author to Prisma schema 19:13:12 ✔ File replaced at prisma/schema.prisma 19:13:12 ℹ Updated Prisma schema 19:13:12 ✔ File created at src/lib/db/schema/authors.ts 19:13:12 ✔ File created at src/lib/server/routers/authors.ts 19:13:12 ✔ File replaced at src/lib/server/routers/_app.ts 19:13:12 ✔ Added 'authors' router to the root tRPC router successfully. 19:13:12 ✔ File created at src/app/authors/page.tsx 19:13:12 ✔ File created at src/components/authors/AuthorList.tsx 19:13:12 ✔ File created at src/components/authors/AuthorForm.tsx 19:13:12 ✔ File created at src/components/authors/AuthorModal.tsx 19:13:12 ``` -------------------------------- ### Run Development Server Source: https://kirimase.dev/the-tutorial Starts the Next.js development server, allowing you to view and test your application locally. Access the application via the specified URL. ```bash pnpm run dev ``` -------------------------------- ### Run Stripe CLI listener Source: https://kirimase.dev/the-tutorial Start the Stripe CLI listener to handle webhooks locally during development. ```bash pnpm run stripe:listen ``` -------------------------------- ### Run Kirimase Database Commands Source: https://kirimase.dev/the-tutorial Executes commands to generate database schema, push changes to the database, and start the development server for Kirimase. ```bash pnpm run db:generate pnpm run db:push pnpm run dev ``` -------------------------------- ### Create First Page Entry Source: https://kirimase.dev/the-tutorial Example of input data for creating a new page, specifying values for Name, Description, Public, Slug, and Background Color. ```text Mine: - Name: Kirimase Resources - Description: Helpful resources for Kirimase - Public: unchecked - Slug: kirimase - Background Color: empty ``` -------------------------------- ### Check Kirimase Version Source: https://kirimase.dev/the-tutorial Verifies the installed version of the Kirimase CLI tool. ```bash pnpm dlx kirimase@latest -V ``` -------------------------------- ### Run Kirimase Command with npx Source: https://kirimase.dev/getting-started If you prefer not to install Kirimase globally, you can run its latest version using npx. Replace '*command*' with the specific Kirimase command you wish to execute. ```bash npx kirimase@latest *command* ``` -------------------------------- ### Create a New Next.js Application Source: https://kirimase.dev/getting-started Quickly set up a new Next.js project using create-next-app. After creation, navigate into the project directory. ```bash npx create-next-app@latest cd your-nextjs-project ``` -------------------------------- ### Initialize Kirimase Configuration Source: https://kirimase.dev/commands/init Use this command to create the kirimase.config.json file in your Next.js project. Ensure you are in your project's root directory before execution. Kirimase does not support the pages directory. ```bash kirimase init ``` -------------------------------- ### Execute Kirimase Generate Source: https://kirimase.dev/commands/generate Run this command inside a Next.js project directory to initiate the scaffolding process. ```bash kirimase generate ``` -------------------------------- ### Generate Database Migrations Source: https://kirimase.dev/the-tutorial Generates the initial database migration files based on the selected ORM and schema. This command is essential after initializing Kirimase and before pushing changes to the database. ```bash pnpm run db:generate ``` -------------------------------- ### Initialize Kirimase in Next.js Project Source: https://kirimase.dev/the-tutorial Initializes Kirimase within an existing Next.js project. Follow the interactive prompts to select your desired stack components, including UI library, ORM, database, and authentication. ```bash pnpm dlx kirimase@latest init ``` -------------------------------- ### Create Next.js App with Kirimase Flags Source: https://kirimase.dev/the-tutorial Scaffolds a new Next.js application with TypeScript and the App Router, which are required by Kirimase. Ensure these flags are used for compatibility. ```bash pnpm create next-app kirimase-tutorial --ts --app --tailwind ``` -------------------------------- ### Run Kirimase Generate Command Source: https://kirimase.dev/the-tutorial Executes the interactive generator to scaffold data models and CRUD operations. ```bash pnpm dlx kirimase@latest generate ``` -------------------------------- ### Fetch Page by Slug with Links Source: https://kirimase.dev/the-tutorial Retrieves a page and its associated links from the database using a slug. Requires the pageSlugSchema for validation. ```typescript export const getPageBySlugWithPageLinks = async (slug: PageSlug) => { const { slug: pageSlug } = pageSlugSchema.parse({ slug }); const rows = await db .select({ page: pages, pageLink: pageLinks }) .from(pages) .where(eq(pages.slug, pageSlug)) .leftJoin(pageLinks, eq(pages.id, pageLinks.pageId)); if (rows.length === 0) return {}; const p = rows[0].page; const pp = rows .filter((r) => r.pageLink !== null) .map((p) => p.pageLink) as CompletePageLink[]; return { page: p, pageLinks: pp }; }; ``` -------------------------------- ### Kirimase package.json Scripts for Drizzle Source: https://kirimase.dev/the-tutorial These scripts in package.json are configured to streamline Drizzle ORM operations, including database schema generation, migration, introspection, and studio access. ```json { "db:generate": "drizzle-kit generate:sqlite", "db:migrate": "tsx src/lib/db/migrate.ts", "db:drop": "drizzle-kit drop", "db:pull": "drizzle-kit introspect:sqlite", "db:push": "drizzle-kit push:sqlite", "db:studio": "drizzle-kit studio", "db:check": "drizzle-kit check:sqlite" } ``` -------------------------------- ### Attempt to Create Page with Duplicate Slug Source: https://kirimase.dev/the-tutorial Demonstrates the error handling mechanism when attempting to create a new page with a slug that already exists in the database. ```text Now try creating a new page with the same slug (for me “kirimase”). ``` -------------------------------- ### Push Database Migrations Source: https://kirimase.dev/the-tutorial Applies the generated database migrations to your SQLite database. This command updates the database schema to match the defined models. ```bash pnpm run db:push ``` -------------------------------- ### Integrate TogglePublic into Page Route Source: https://kirimase.dev/the-tutorial Shows where to place the component within the page structure and how to pass the required props including subscription status. ```tsx const Page = async ({ id }: { id: string }) => { await checkAuth(); const { page, pageLinks } = await getPageByIdWithPageLinks(id); if (!page) notFound(); return ( }>
{/* <- add here */}

{page.name}'s Page Links

); }; ``` ```tsx ``` ```tsx const Page = async ({ id }: { id: string }) => { await checkAuth(); const { isSubscribed } = await getUserSubscriptionPlan(); // rest of your code ``` ```tsx ``` -------------------------------- ### Create TogglePublic Component Source: https://kirimase.dev/the-tutorial Defines a client-side component that handles page visibility toggling and subscription-gated sharing features. ```tsx "use client"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { updatePageAction } from "@/lib/actions/pages"; import { Page } from "@/lib/db/schema/pages"; import Link from "next/link"; import { toast } from "sonner"; export default function TogglePublic({ isSubscribed, page, }: { isSubscribed: boolean; page: Page; }) { const pageLink = "http://localhost:3000/share/" + page.slug; return (
{isSubscribed ? null : (

You need to subscribe to share this page

)} Share this page Anyone with the link can view this page. {page.public ? (
) : (
)}
); } ``` -------------------------------- ### Dynamic Shareable Page Route Source: https://kirimase.dev/the-tutorial This component handles the display of shareable pages. It fetches page data by slug and renders a linktree-style page. It includes checks for page existence and public visibility. ```typescript import { getPageBySlugWithPageLinks } from "@/lib/api/pages/queries"; import { HomeIcon } from "lucide-react"; import Link from "next/link"; import { notFound } from "next/navigation"; export default async function SharedPage({ params, }: { params: { slug: string }; }) { const { page, pageLinks } = await getPageBySlugWithPageLinks(params.slug); if (page === undefined) notFound(); if (page.public === false) return
This page is not public
; return (

{page.name}

{page.description}

); } ``` -------------------------------- ### Define Pages Schema in TypeScript Source: https://kirimase.dev/the-tutorial Defines the schema for the 'pages' table in a TypeScript file, including fields like id, name, description, public, slug, and backgroundColor. It sets default values and constraints for these fields. ```typescript //... your imports export const pages = sqliteTable("pages", { id: text("id") .primaryKey() .$defaultFn(() => nanoid()), name: text("name").notNull(), description: text("description").notNull(), public: integer("public", { mode: "boolean" }).notNull().default(false), slug: text("slug").notNull().unique(), backgroundColor: text("background_color").notNull().default("#688663"), //...rest of your code ``` -------------------------------- ### Define Page Slug Types Source: https://kirimase.dev/the-tutorial Exports TypeScript types for page IDs and slugs derived from their respective Zod schemas. ```typescript export type PageId = z.infer["id"]; export type PageSlug = z.infer["slug"]; ``` -------------------------------- ### Define Page Slug Schema Source: https://kirimase.dev/the-tutorial Defines the Zod schema for page slugs based on the base schema. ```typescript export const pageIdSchema = baseSchema.pick({ id: true }); export const pageSlugSchema = baseSchema.pick({ slug: true }); ``` -------------------------------- ### Update updatePageAction call Source: https://kirimase.dev/the-tutorial Include public and backgroundColor fields in the updatePageAction call within handleSubmit. ```typescript const error = editing ? await updatePageAction({ public: page.public, // add this backgroundColor: page.backgroundColor, // add this ...values, id: page.id, }) : await createPageAction(values); ``` -------------------------------- ### Configure Zod Form Validation Source: https://kirimase.dev/the-tutorial Updates the insertPageParams schema to include custom validation rules for public and slug fields. ```typescript export const insertPageParams = baseSchema .extend({ public: z.coerce.boolean(), slug: z .string() .min(5, { message: "Your slug must be at least 5 characters long." }), }) .omit({ id: true, userId: true, }); ``` -------------------------------- ### Update PageForm pendingPage object Source: https://kirimase.dev/the-tutorial Add public and backgroundColor fields to the pendingPage object within the handleSubmit function. ```typescript const pendingPage: Page = { public: page?.public ?? false, // add this backgroundColor: page?.backgroundColor ?? "", // add this updatedAt: page?.updatedAt ?? new Date().toISOString().slice(0, 19).replace("T", " "), createdAt: page?.createdAt ?? new Date().toISOString().slice(0, 19).replace("T", " "), id: page?.id ?? "", userId: page?.userId ?? "", ...values, }; ``` -------------------------------- ### Update Zod Schema for Page Insertion Source: https://kirimase.dev/the-tutorial This code updates the `insertPageParams` in the Zod schema to exclude 'public' and 'backgroundColor' fields, ensuring the form no longer expects these values. ```typescript export const insertPageParams = baseSchema .extend({ // public: z.coerce.boolean(), // DELETE THIS LINE slug: z .string() .min(5, { message: "Your slug must be at least 5 characters long." }), }) .omit({ public: true, // add this backgroundColor: true, // add this id: true, userId: true, }); ``` -------------------------------- ### Comment Out Public Field in PageForm Source: https://kirimase.dev/the-tutorial This snippet shows how to comment out the 'public' field within the PageForm component. Ensure to also comment out the 'backgroundColor' field similarly. ```typescript {/*
*/} {/* */} {/*
*/} {/* */} {/* {errors?.public ? ( */} {/*

{errors.public[0]}

*/} {/* ) : ( */} {/*
*/} {/* )} */} {/*
*/} ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.