{"id":27512061,"url":"https://github.com/chenaski/sanity-test","last_synced_at":"2025-04-17T23:29:55.521Z","repository":{"id":277195616,"uuid":"931646469","full_name":"chenaski/sanity-test","owner":"chenaski","description":null,"archived":false,"fork":false,"pushed_at":"2025-02-12T16:20:49.000Z","size":5448,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-12T17:28:10.690Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://nextjs-sanity-fast-85mg5.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chenaski.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-12T16:17:01.000Z","updated_at":"2025-02-12T16:23:28.000Z","dependencies_parsed_at":"2025-02-12T17:41:02.822Z","dependency_job_id":null,"html_url":"https://github.com/chenaski/sanity-test","commit_stats":null,"previous_names":["chenaski/sanity-test"],"tags_count":0,"template":false,"template_full_name":"focusreactive/cms-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenaski%2Fsanity-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenaski%2Fsanity-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenaski%2Fsanity-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenaski%2Fsanity-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chenaski","download_url":"https://codeload.github.com/chenaski/sanity-test/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249390989,"owners_count":21263197,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-17T23:29:54.960Z","updated_at":"2025-04-17T23:29:55.515Z","avatar_url":"https://github.com/chenaski.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CMS-Kit 🔧🔧🔧\n\nAn endeavor accumulating the experience and best practices collected at [Focus Reactive](https://focusreactive.com/).\nThe project serves the idea of making Headless CMS-based development accessible, comfortable, and fast.\n\n## Quick start\n\n### What you get\n\n1. New Storyblok space, set up with vercel deployments\n2. 10+ ready to use components with different presets(styles)\n3. New Vercel project, deployed and configured with your new Storyblok space\n4. Multiple ready pages in different styles\n\n### Storyblok\n\n0. Since application will be deployed to Vercel, make sure your Github account is linked to Vercel. You can do it [here](https://github.com/settings/installations).\n\n1. Create a new repository using this template by clicking the \"Use this template\" button at the top of the repository page.\n   ![Screenshot 2024-11-07 at 13 38 48](https://github.com/user-attachments/assets/9a159ebd-d810-4b6d-ab79-ab453da6ab9c)\n\n2. Await the initial workflow to be finished\n\n![Screenshot 2024-11-07 at 16 00 17](https://github.com/user-attachments/assets/375ce843-8185-4782-95ff-5f9d6aaf2935)\n\n3. Clone your new repository:\n\n   ```bash\n   git clone \u003cyour-repository-url\u003e\n   ```\n\n4. Navigate to the project directory:\n\n   ```bash\n   cd \u003crepository-name\u003e\n   ```\n\n5. Install dependencies using pnpm:\n\n   ```bash\n   pnpm install\n   ```\n\n6. Navigate to the Storyblok CLI directory:\n\n   ```bash\n   cd apps/storyblok/CLI\n   ```\n\n7. Run the setup script,\n\n⚠️ command should be executed from _apps/storyblok/CLI_ (previous step), to consume correct environment variables:\n\n```bash\n   node sb.mjs\n```\n\n8. Follow the interactive prompts in the CLI tool to:\n\n   - Enter your Storyblok Personal Access Token\n   - Enter your Vercel Personal Auth Token\n   - Select your Vercel team\n   - Choose a project name\n   - Complete the space creation and configuration process\n\n9. Go to project settings in Vercel dashboard\n   - select **Git** section\n   - create deploy hook and copy it\n   - select **Environment variables** section\n   - add variables called **VERCEL_REDEPLOY_HOOK_URL** and assign it to created deploy hook value\n   - trigger rebuild\n\nThis process ensures that global component updates are displayed on all pages.\n\n### [TODO]: add video example\n\n### Sanity\n\nsoon\n\n## Demo 👀\n\n- [Storyblok Landing](https://turbo-cms-kit-storyblok.vercel.app/)\n- [Sanity landing](https://turbo-cms-kit-sanity.vercel.app/)\n\n## Core Features\n\n- Monorepo using **Turborepo**\n- **Multiple CMS** support\n- New `/app` dir\n- Routing, layouts, nested layouts\n- Data fetching, **caching** and **revalidation**\n- Server and client components\n- Reusable UI components built using **Radix UI**\n- Styled using **tailwind CSS**\n- Written in **TypeScript**\n- Types and components **generation**\n- **CLI** to create new set up project\n- **Themes** using CSS variables\n- **Predefined** structure\n\n## Repo structure\n\n- `apps/storyblok`: CMS app\n- `apps/sanity`: CMS app\n- `packages/ui`: UI components library, shared between both CMS apps\n- `packages/eslint-config`: shared `eslint` configurations\n- `packages/ts-config`: shared `ts-config` configuration\n- `packages/tailwind-config`: shared `tailwind` configuration\n\n### Types of components\n\n- **UI component** - universal and sharable component between multiple CMSs\n- **Controller component** - takes data from CMS, convert it to UI component format, and use UI component with converted props. Each CMS has it's own controller component for each UI component.\n- All **controller components** have common propertiers to change style, such as margin, background, alignment etc.\n\n### Components composition and hierarchy\n\nThe website structure follows a clear hierarchical composition:\n\n1. Pages\n\n   - Top-level components that represent entire web pages\n   - Each page contains multiple sections, SEO properties and theme\n\n2. Sections\n\n   - Container components that organize content into distinct areas\n   - Can be configured with settings like margin, background, width, alignment etc.\n   - Hold and arrange other components\n\n3. Base Components\n\n   - Components like **link**, **image**, and **rich text**\n   - Combination of multiple functional components like **card**\n   - Can be combined and reused across different sections\n\n**RichText** component has additional functionality. It allows to add sections inside, which gives ability to combine sections with text.\n\n### Add new section\n\n1. Create new component using generators\n\n```bash\npnpm gen\n```\n\n2. Select type of component to create\n\n```bash\n- UI: Create a new UI component\n- Storyblok: Create a new content section\n- Sanity: Create a new content section\n```\n\n3. Enter name of the component\n4. For Storyblok, add section component to the CMS\n5. Update properties and design\n6. Go to CMS folder\n\n```bash\ncd apps/storyblok\n```\n\nor\n\n```bash\ncd apps/sanity\n```\n\n7. Generate types for added section\n\n```bash\n# For Storyblok you will additionally\n# need to log into CLI\npnpm sb-login\n\npnpm gen:types\n```\n\n⚠️If you generating types for Storyblok, make sure you logged into CLI⚠️\n\n```bash\n\n```\n\n### Update existing section\n\n1. Updata design\n2. Update fields\n3. Go to CMS folder\n\n```bash\ncd apps/storyblok\n```\n\nor\n\n```bash\ncd apps/sanity\n```\n\n4. Generate types for updated section\n\n```bash\npnpm gen:types\n```\n\n## Start project in dev mode\n\n### Instalation\n\n1. Clone repository\n   ```bash\n   git clone https://github.com/focusreactive/cms-kit\n   ```\n2. Go to project directory\n   ```bash\n   cd cms-kit\n   ```\n3. Install dependencies\n   ```bash\n   pnpm install\n   ```\n\n### Environment variables\n\n#### Storyblok project\n\nCreate `.env` and `.env.local` files in the root of your project and add the following variables:\n\n.env\n\n```bash\nREPO_PROD_BRANCH=\"main\"\nREPO_TYPE=\"github\"\nREPO_ID=\"[repo id]\"\nREPO_NAME=\"[nickname]/[repo name]\"\n```\n\n.env.local\n\n```bash\n# Created by Vercel CLI\nNEXT_PUBLIC_DOMAIN=\"https://localhost:4050\"\nNEXT_PUBLIC_IS_PREVIEW=\"true\"\nNEXT_PUBLIC_STORYBLOK_TOKEN=\"[storyblok space preview token]\"\nNEXT_PUBLIC_STORYBLOK_API_GATE=\"https://api.storyblok.com/v2/cdn\"\nVERCEL_REDEPLOY_HOOK_URL=\"https://api.vercel.com/v1/integrations/deploy/[KEY]/[KEY\"\nSB_WEBHOOK_REVALIDATE_SECRET=\"[storyblok webhook revalidate key]\"\n```\n\n#### Sanity\n\n.env\n\n```bash\nREPO_PROD_BRANCH=\"main\"\nREPO_TYPE=\"github\"\nREPO_ID=\"[repo id]\"\nREPO_NAME=\"[nickname]/[repo name]\"\n```\n\n.env.local\n**tbd**\n\n4. Create a new repo based on [cms-kit template](https://github.com/focusreactive/cms-kit)\n   ![Screenshot 2024-10-24 at 17 52 54](https://github.com/user-attachments/assets/b4773c54-bf7f-4697-ae7e-ada6e5163bf0)\n5. Pull repo locally\n6. Install packages\n   ```bash\n   pnpm install\n   ```\n7. Go to CLI folder\n   ```bash\n   cd apps/storyblok/cli\n   ```\n8. Execute command\n   ```bash\n   node sb.mjs\n   ```\n9. Follow steps\n\nHappy hacking 👾\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenaski%2Fsanity-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchenaski%2Fsanity-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenaski%2Fsanity-test/lists"}