Quick start toolkit for building Interactive Overrides in Copilot.
- Astro - Static site generator
- React - UI framework
- Radix - Component library
- React Markdown
- Swiper
- Tailwind - Styling
- Nanostores - State manager
To create a new copy of this theme copy and past the prompt below into your terminal.
npm create astro@latest -- --template aratner/cncc-override-theme
Inside of your project, you'll see the following folders and files:
/
├── public/
├── src/
│ ├── components/
│ │ └── PictureResponsive.tsx
│ │ └── Swiper.jsx
│ ├── stores/
│ │ └── PreviewStore.js
│ └── pages/
│ └── index.astro
└── package.json
PictureResponsive
- Responsive picture element for Copilot photosVideoInline
- Inline video element for Copilot clipsSwiper
- Content slider
All commands are run from the root of the project, from a terminal:
Command | Action |
---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:3000 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add , astro check |
npm run astro -- --help |
Get help using the Astro CLI |
Update astro.config.mjs
outDir: `../../public/${folderName}`,
build: { assetsPrefix: `https://interactive.[BRAND].com/${folderName}/`}
Run the Unwrapper script (removes html, head, title, meta, body tags)
node unwrapper.js