{"id":50787826,"url":"https://github.com/kunalshetye/opti-astro","last_synced_at":"2026-06-12T09:03:44.801Z","repository":{"id":263468882,"uuid":"875159210","full_name":"kunalshetye/opti-astro","owner":"kunalshetye","description":"Astrojs implementation of the Optimizely Graph for Optimizely SaaS CMS","archived":false,"fork":false,"pushed_at":"2026-06-04T14:38:40.000Z","size":87914,"stargazers_count":7,"open_issues_count":14,"forks_count":36,"subscribers_count":5,"default_branch":"main","last_synced_at":"2026-06-04T16:18:32.412Z","etag":null,"topics":["astrojs","cms","frontend","graphql","optimizely"],"latest_commit_sha":null,"homepage":"https://www.optimizely.com/get-started/","language":"Svelte","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/kunalshetye.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-10-19T08:48:49.000Z","updated_at":"2026-06-04T14:39:13.000Z","dependencies_parsed_at":"2024-12-16T21:42:57.872Z","dependency_job_id":"67056b92-0ef6-43b0-b352-2d5a93597fc4","html_url":"https://github.com/kunalshetye/opti-astro","commit_stats":null,"previous_names":["kunalshetye/opti-astro"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kunalshetye/opti-astro","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunalshetye%2Fopti-astro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunalshetye%2Fopti-astro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunalshetye%2Fopti-astro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunalshetye%2Fopti-astro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kunalshetye","download_url":"https://codeload.github.com/kunalshetye/opti-astro/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunalshetye%2Fopti-astro/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34236558,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["astrojs","cms","frontend","graphql","optimizely"],"created_at":"2026-06-12T09:03:43.380Z","updated_at":"2026-06-12T09:03:44.795Z","avatar_url":"https://github.com/kunalshetye.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Example Astro frontend integrated with Optimizely SaaS CMS and Optimizely Graph\n\n## Quick Deploy\n\nPre-requisites for quick deploy:\n- Optimizely SaaS CMS instance, with administrator access\n- GitHub account\n- Netlify or Vercel account\n\nDeploy this project with one click:\n\n### Vercel\n[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fkunalshetye%2Fopti-astro\u0026env=OPTIMIZELY_CMS_URL,OPTIMIZELY_GRAPH_GATEWAY,OPTIMIZELY_GRAPH_SINGLE_KEY,OPTIMIZELY_GRAPH_APP_KEY,OPTIMIZELY_GRAPH_SECRET\u0026envDescription=Required%20API%20keys%20for%20Optimizely%20Graph%20integration\u0026envLink=https%3A%2F%2Fgithub.com%2Fkunalshetye%2Fopti-astro%23environment-setup\u0026project-name=opti-astro\u0026repository-name=opti-astro)\n\n### Netlify\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/kunalshetye/opti-astro#OPTIMIZELY_CMS_URL=\u0026OPTIMIZELY_GRAPH_GATEWAY=https://cg.optimizely.com\u0026OPTIMIZELY_GRAPH_SINGLE_KEY=\u0026OPTIMIZELY_GRAPH_APP_KEY=\u0026OPTIMIZELY_GRAPH_SECRET=)\n\n**Note:** You'll need to configure the environment variables during deployment. See the [Environment Setup](#environment-setup) section below for required values.\n\nAfter deploying the project via one of the buttons above, your front-end will return a 404. Next, you need to configure an Application in the CMS (which will also require creating a site homepage -- be sure to publish it!). The Application hostname should match the front-end domain (for example: your-project-name.netlify.app / your-project-name.vercel.app), and the locale should be \"en\". After configuring the Application, re-run the Optimizely Graph Full Synchronization Scheduled Job, and your homepage should now appear.\n\n## Getting Started (Local Devs)\nNote: these instructions are for configuring the CMS, and setting up and running the front-end locally on your computer.\n\nMore in-depth setup and usage instructions will follow.\n\n1. Clone the repository\n2. CMS: import the content pack (and types) into your CMS instance\n   1. *CMS \u003e Settings \u003e Import Data*\n   2. Import the content pack file from the repo [/contentpack/Astro - ContentTypes.episerverdata](/contentpack/Astro%20-%20ContentTypes.episerverdata), selecting \"Root\" as the content destination.\n3. CMS: configure an Application (front-end)\n   1. *CMS \u003e Settings \u003e Applications \u003e Create Application*\n   2. *Hostnames \u003e Add Hostname...*\n      1. Hostname: *localhost:4321*\n      2. Use a secure connection (HTTPS): *true*\n      3. Locale: *en*\n4. \u003ca id=\"environment-setup\"\u003e\u003c/a\u003e**Environment Setup**: Create your *.env* file based on the [.env.template](/.env.template) example\n   1. Values can be found at: *CMS \u003e Settings \u003e API Keys*\n   2. Note, you must create a new API key for managing styles (it does not exist by default)\n5. Install dependencies using Yarn (or your preferred package manager):\n    ```sh\n    yarn install\n    ```\n6. Run the codegen command to generate your local graphql files from the CMS content types\n    ```sh\n    yarn codegen\n    ```\n7. OPTIONAL: Pull the styles from the CMS (added via the content pack import)\n   ```sh\n   yarn styles:pull\n   ```\n8. Run the Astro front-end locally in dev mode\n   ```sh\n   yarn run dev\n   ```\n\n**Result**: your frontend should now load at https://localhost:4321/ and inside the CMS for content preview.\n\n## Environment Variables\n\nThe following environment variables are required for the application to function properly:\n\n### Required API Keys\n| Variable | Description | Where to find |\n|----------|-------------|---------------|\n| `OPTIMIZELY_CMS_URL` | Your CMS instance URL | CMS domain (e.g., `https://app-yourinstance.cms.optimizely.com`) |\n| `OPTIMIZELY_GRAPH_GATEWAY` | Optimizely Graph API endpoint | Usually `https://cg.optimizely.com` |\n| `OPTIMIZELY_GRAPH_SINGLE_KEY` | Single-use API key for Graph | *CMS \u003e Settings \u003e API Keys* |\n| `OPTIMIZELY_GRAPH_APP_KEY` | Application key for Graph | *CMS \u003e Settings \u003e API Keys* |\n| `OPTIMIZELY_GRAPH_SECRET` | Secret key for Graph | *CMS \u003e Settings \u003e API Keys* |\n| `OPTIMIZELY_CLIENT_ID` | API client ID for style management | *CMS \u003e Settings \u003e API Keys* (create new) |\n| `OPTIMIZELY_CLIENT_SECRET` | API client secret for style management | *CMS \u003e Settings \u003e API Keys* (create new) |\n\n### Optional Configuration\n| Variable | Description | Default | Usage |\n|----------|-------------|---------|-------|\n| `PREVIEW_DELAY` | Delay in ms for content preview updates | `600` | Increase if preview updates are unreliable |\n| `EXTERNAL_PREVIEW_ENABLED` | Enable external preview feature | `false` | Set to `true` to enable external preview links |\n| `EXTERNAL_PREVIEW_TOKEN` | String token for external preview feature | `OptiPreview123` | Required to enable external preview links |\n| `OPTIMIZELY_DEV_MODE` | Enable GraphQL debug panel in footer | `false` | Set to `true` to show GraphQL queries being executed |\n| `ADMIN_DASHBOARD_USERNAME` | Enable + set username for basic auth in Opti Admin page to manage Graph optimizations, etc | `admin` | Change to your preferred username |\n| `ADMIN_DASHBOARD_PASSWORD` | Enable + set password for basic auth in Opti Admin page to manage Graph optimizations, etc | `your-secure-password-here` | Change to your preferred password |\n\n### DAM \u0026 Forms Auto-Detection\nDAM (Digital Asset Management) and Forms features are **automatically detected** during `yarn codegen` by querying your Optimizely Graph schema. No manual configuration is needed — the build process determines which GraphQL fragments to use based on the features available in your CMS instance.\n\n### Additional setup notes\n#### Site Settings\nNote: the Site Settings component currently allows you to update the site logo, header/top nav, footer, and social accounts, and set an Optimizely Web Project ID. Additional features may follow.\n\n1. Create a new Shared Block of type \"Site Settings\". If using the existing content pack, a Site Settings block is included in the \"For This Page\" for the imported homepage.\n2. Set the \"Site Domain\" field to match your domain, eg. \"www.yoursite.com\" -- for a local setup, it should be \"localhost:4321\". (Without this value defined, the site won't use the block.)\n3. Update the Site Settings as desired. Updates will be reflected on publish.\n\n#### Site Styles\nNote: the Site Styles component allows you to update the site colors, base font sizes, etc.\n\n1. Create a new Shared Block of type \"Site Styles\".\n2. Set the \"Site Domain\" field to match your domain, eg. \"www.yoursite.com\" -- for a local setup, it should be \"localhost:4321\". (Without this value defined, the site won't use the block.)\n3. Update the Site Styles as desired. Updates will be reflected on publish.\n\nNote: the site is built using daisyUI. You can create a new theme via [daisyUI's Theme Generator](https://daisyui.com/theme-generator/), and paste the full results (click the \"CSS\" button) into the \"DaisyUI Theme\" property text box.\n\n#### Optimizely Web\nUsing the industry's leading testing and personalization platform? Set your Web Project ID in the Site Settings component, and the Web snippet will load on all pages.\n\n#### Additional Languages\nWant to create content in additional languages?\n\nYou should be able to simply enable the language via the [CMS Settings UI](https://docs.developers.optimizely.com/content-management-system/v1.0.0-CMS-SaaS/docs/languages).\n\nIf the new language does not render, or you want the new language to fallback to English (when a page in the new language doesn't exist):\n\n1. Run the Optimizely Graph Full Sync scheduled job\n2. Redeploy your site frontend to dynamically update the astro.config.mjs file based on enabled languages.\n\n## Components\n\n### Layout Components\n- [Grid Component](src/cms/components/GridComponent/Grid.md) - Flexible layout system with standard and Bento grid options\n\n### Content Components\n- [ArticleList Component](src/cms/components/ArticleListComponent/ArticleList.md) - Horizontally scrollable list of article cards\n- [Card Component](src/cms/components/CardComponent/Card.md) - Versatile content display with multiple layout configurations\n- [Carousel Component](src/cms/components/CarouselComponent/Carousel.md) - Infinite-scrolling image carousel with autoplay\n- [Collapse Component](src/cms/components/CollapseComponent/Collapse.md) - Expandable/collapsible content sections\n- [Hero Component](src/cms/components/HeroComponent/Hero.md) - Full-width banner with video/image backgrounds\n- [Paragraph Component](src/cms/components/ParagraphComponent/Paragraph.md) - Rich text content rendering\n\n### Media Components\n- [Image Component](src/cms/components/ImageComponent/Image.md) - Optimized images with configurable styling\n- [Video Component](src/cms/components/VideoComponent/Video.md) - Video content with aspect ratios and playback controls\n\n### Interactive Components\n- [CallToAction Component](src/cms/components/CallToActionComponent/CallToAction.md) - Collection of action buttons for user engagement\n- [Text Component](src/cms/components/TextComponent/Text.md) - Configurable heading and text elements\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkunalshetye%2Fopti-astro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkunalshetye%2Fopti-astro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkunalshetye%2Fopti-astro/lists"}