profound-logoProfound CMS
⌘K
Admin
Theme
DocsTutorialBlogPhilosophy
DocsTutorialBlogPhilosophy

Hybrid

Collection of Pages with ComponentsTypes of ComponentsSetup server sent events (SSE) content refetchएडमिन पैनल प्रॉक्सी सेटअपटेम्पलेट बिल्डर में स्क्रिप्टिंगProject Scaffoldingमीडिया लाइब्रेरी

Headless

त्वरित प्रारंभSplit Screen JSON Component Builder with LLMComponent Zod Pull

REST API

REST API OverviewgetConnect your websitegetरूट्स प्राप्त करेंgetरूट प्राप्त करेंgetब्लॉक प्राप्त करेंgetCEL कैश के साथ ब्लॉक्स प्राप्त करेंgetब्लॉक्स-जनरेटेड-प्राप्त करेंgetघटक प्राप्त करेंgetGET /components/{name}getडेटासेट स्कीमा नाम प्राप्त करेंgetGET /content-changes (SSE)patchPATCH /dataset/{schema_name}postPOST /translationpatchपैच अनुवादgetGET /usagepostPOST /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 सेट नहीं है। इसे अपने environment या .env फ़ाइल में सेट करें।'
    );
  }
  if (!websiteId) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_PROFOUND_WEBSITE_ID सेट नहीं है। इसे अपने environment या .env फ़ाइल में सेट करें।'
    );
  }
  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY सेट नहीं है। इसे अपने environment या .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