profound-logoProfound CMS
⌘K
Admin
Theme
DocsTutorialBlogPhilosophy
DocsTutorialBlogPhilosophy

Hybrid

ניתוב פרמטריסוגי רכיביםSetup server sent events (SSE) content refetchInstall Profound CMS as a proxyכתיבת סקריפטים בבונה התבניותProject Scaffoldingספריית המדיה

ללא ראש

התחלה מהירהSplit Screen JSON Component Builder with LLMComponent Zod Pull

ממשק REST

סקירת REST APIgetחיבור-אתר-ל-API-של-CMSgetGET /routesgetGET /routegetקבלת בלוקיםgetהשגת-בלוקים-עם-מטמון-CELgetGET /blocks/generatedgetקבל רכיביםgetGET /components/{name}getGET /dataset/{schema_name}getGET /content-changes (SSE)patchPATCH /dataset/{schema_name}postתרגום פוסטpatchPATCH /translationsgetGET /usagepostפוסט-CSVpatchPATCH /csv
All Systems Operational
Powered Byprofound-logo
Theme

Component Zod Pull

משוך תיאור Zod של הרכיבים שלך בזמן קומפילציה באמצעות סקריפט

תכונה זו מאפשרת לך לקבל את תיאור הרכיב שלך בצורת תיאור "Zod" בטוח טיפוסים, המספק ולידציה של סכימה עם עדיפות ל-TS והיסק טיפוסים סטטי עבור התוכן שלך.

https://zod.dev

כדי למשוך את סכימת ה-Zod שלנו, נטען כמה תלויות וניצור סקריפט שמשתמש בכמה כלי עזר מתוך cms-renderer שלנו.

בואו נתחיל עם מבנה הפרויקט שלנו

apps/
 web/
 app/
   page.tsx
 scripts/
   generate-schemas.ts // כאן הסקריפט שלנו חי

עכשיו נערוך את הקובץ generated-schema.ts הזה

import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // מייבא את קובץ התצורה שלי

async function main() {
  const { cmsUrl, websiteId, apiKey } = cmsConfig;

  if (!cmsUrl) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_CMS_API_URL לא הוגדר. הגדר אותו בסביבת העבודה שלך או בקובץ .env.'
    );
  }
  if (!websiteId) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_PROFOUND_WEBSITE_ID לא הוגדר. הגדר אותו בסביבת העבודה שלך או בקובץ .env.'
    );
  }
  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY לא הוגדר. הגדר אותו בסביבת העבודה שלך או בקובץ .env.'
    );
  }

  const schemas = await fetchAllCustomSchemaFields({ cmsUrl, websiteId, apiKey });

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] לא הוחזרו רכיבים מה-API. בדוק ש-PROFOUND_API_KEY תקף ומצביע על האתר הנכון.'
    );
  }

  await saveZodSchemaCode(schemas, './generated/cms-schemas.ts');

  console.log('[generate-schemas] הושלם.');
}

main().catch((err) => {
  console.error('[generate-schemas] נכשל:', err);
  process.exit(1);
});

ה-CmsConfig שלך צריך להיראות כך

export const cmsConfig = {
  cmsUrl: process.env.NEXT_PUBLIC_CMS_API_URL,
  apiKey: process.env.CMS_API_KEY,
  websiteId: '...',
};

בתוך קובץ ה-package.json שלנו, נגדיר כיצד להריץ את הסקריפט וכמה תלויות

הערה: אם אין לך tsconfig, אפשר להסיר את הדגל --tsconfig ואת הערך שלו

{
  "name": "web",
  "version": "0.1.0",
  "type": "module",
  "private": true,
  "scripts": {
    "generate-schemas": "tsx --tsconfig tsconfig.json scripts/generate-schemas.ts",
    "...": "..."
  },
  "dependencies": {
    "cms-renderer": "0.3.1",
    "zod": "^4.3.6",
    "...": "..."
  },
  "devDependencies": {
    "tsx": "^4.21.0",
    "object-hash": "^3.0.0",
    "...": "..."
  }
}

עכשיו, אחרי שנריץ

$ bun run generate-schemas
tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] הושלם.

נקבל פלט דומה, ונראה קובץ חדש במבנה הפרויקט שלנו

apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // כאן הסקריפט שלנו חי
 generated/
   cms-schema.ts // סכימת zod שנוצרה

אפשר להסתכל בפנים ולראות איך נראית הסכימה שלך. כדי לעדכן את הקובץ הזה, צריך להריץ שוב את הפקודה bun run generate-schemas, שאפשר לחבר אל תהליך ה-dev או ה-build שלך.

לאחר מכן אפשר למשוך את אובייקטי ה-zod האלה לקובץ page.tsx שלנו כך

import type { PetFoodPost, SiteConfig } from '@/generated/cms-schemas';
import { petFoodPostSchema } from '@/generated/cms-schemas';

// הפעל petFoodPostSchema.parse(obj) עבור ניתוח אובייקטים בטוח טיפוסים

אפשר לעדכן את הרכיב שלך מלוח הניהול ולמשוך שוב את הסכימה המעודכנת לפיתוח נוח.

Continue Reading
Previous‹Split Screen JSON Component Builder with LLM