{"id":20313974,"url":"https://github.com/craftcms/spoke-and-chain","last_synced_at":"2026-04-22T02:11:30.979Z","repository":{"id":39568425,"uuid":"298222714","full_name":"craftcms/spoke-and-chain","owner":"craftcms","description":"Craft CMS + Craft Commerce demo site.","archived":false,"fork":false,"pushed_at":"2026-04-15T00:55:05.000Z","size":975642,"stargazers_count":60,"open_issues_count":7,"forks_count":32,"subscribers_count":2,"default_branch":"stable","last_synced_at":"2026-04-15T02:35:27.778Z","etag":null,"topics":["craft-commerce","craftcms","demo"],"latest_commit_sha":null,"homepage":"https://craftcms.com/demo?kind=spokeandchain","language":"Twig","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"0bsd","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/craftcms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","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":"2020-09-24T08:54:02.000Z","updated_at":"2026-04-15T00:55:07.000Z","dependencies_parsed_at":"2026-02-08T03:05:03.575Z","dependency_job_id":"a1c82f5e-39d4-412d-b139-a5e2b037e756","html_url":"https://github.com/craftcms/spoke-and-chain","commit_stats":null,"previous_names":[],"tags_count":2799,"template":false,"template_full_name":null,"purl":"pkg:github/craftcms/spoke-and-chain","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftcms%2Fspoke-and-chain","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftcms%2Fspoke-and-chain/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftcms%2Fspoke-and-chain/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftcms%2Fspoke-and-chain/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/craftcms","download_url":"https://codeload.github.com/craftcms/spoke-and-chain/tar.gz/refs/heads/stable","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/craftcms%2Fspoke-and-chain/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31991755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"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":["craft-commerce","craftcms","demo"],"created_at":"2024-11-14T18:13:37.924Z","updated_at":"2026-04-19T02:18:15.236Z","avatar_url":"https://github.com/craftcms.png","language":"Twig","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eSpoke \u0026 Chain Craft Commerce Demo\u003c/h1\u003e\n\n![Spoke \u0026 Chain homepage](https://github.com/craftcms/spoke-and-chain/raw/stable/web/assets/volumes/images/Logos/logo.png)\n\n## Overview\n\nSpoke \u0026 Chain is a fictitious bicycle shop custom-built to demonstrate [Craft CMS](https://craftcms.com) and [Craft Commerce](https://craftcms.com/commerce). This repository houses the source code for our demo, which you can spin up for yourself by visiting [craftcms.com/demo](https://craftcms.com/demo?kind=spokeandchain).\n\nWe’ve also included instructions below for setting up the demo in a local development environment with [DDEV](https://ddev.com/).\n\nSpoke \u0026 Chain shows core Craft CMS features and a fully-configured Craft Commerce store:\n\n- Articles and pages with custom layouts and flexible content.\n- Front-end global search for products and articles.\n- Categorized products with variants, categories, filtering, and sorting.\n- Customer membership area with subscription-based services, order tracking and returns, and account management.\n- Full, customized checkout process with coupon codes.\n- Configured for healthy SEO and built targeting WCAG AA compliance.\n\n### Development Technologies\n\n- [Craft CMS 5](https://craftcms.com/docs/5.x/)\n- [Craft Commerce 5](https://craftcms.com/docs/commerce/5.x/)\n- PostgreSQL (13+) / MySQL (8.0.17++)\n- PHP (8.2+), built on the [Yii 2 framework](https://www.yiiframework.com/)\n- Native Twig templates with reactive [Sprig](https://plugins.craftcms.com/sprig) components\n- [Node](https://nodejs.org/en/) (12+) / [npm](https://www.npmjs.com/) (6+), managing and building front end resources\n\n### Front End Dependencies\n\n- [webpack](https://webpack.js.org)\n- [Tailwind CSS](https://tailwindcss.com)\n- [Alpine.js](https://alpinejs.dev)\n- [Cypress](https://www.cypress.io)\n\n## Local Development\n\n### Environment\n\nIf you’d like to get Spoke \u0026 Chain running in a local environment, we recommend using [DDEV](https://ddev.com):\n\n1. Clone the Spoke \u0026 Chain repository to your system.\n   ```sh\n   git clone git@github.com:craftcms/spoke-and-chain.git spokeandchain \u0026\u0026 cd spokeandchain\n   ```\n2. Initialize a DDEV project for the repo:\n   ```sh\n   ddev config --project-type=craftcms --project-name=spokeandchain --docroot=web \u0026\u0026 ddev start\n   ```\n3. Install the Composer dependencies:\n   ```sh\n   ddev composer install\n   ```\n4. Create your `.env` file:\n   ```sh\n   cp .env.example .env\n   ```\n5. Set the application ID and security key:\n   ```sh\n   ddev craft setup/keys\n   ```\n6. Restore the initial database\n   ```sh\n   curl -L https://github.com/craftcms/spoke-and-chain/raw/stable/seed.sql -o seed.sql \u0026\u0026 ddev import-db --src seed.sql\n   ```\n7. Optionally seed demo data:\n   ```sh\n   ddev craft demos/seed\n   ```\n   \u003e ⚠️ The Craft site is offline by default, and the seeder turns it on when it’s finished. If you skip this step, you’ll need to manually bring the site online by navigating to **Settings** → **General Settings** and switching **System Status** to “Online”.\n8. Add a Craft account for yourself by following the prompts:\n   ```sh\n   ddev craft users/create --admin\n   ```\n\n\u003e 💡 If you’re using a different local environment, see Craft’s [Server Requirements](https://craftcms.com/docs/4.x/requirements.html) and [Installation Instructions](https://craftcms.com/docs/4.x/installation.html).\n\n### Front End\n\nRun `npm ci` with node 12. (If you’ve installed [nvm](https://github.com/nvm-sh/nvm) run `nvm use`, then `npm ci`.)\n\nIf you’ve chosen a different environment setup, make sure your `.env` is configured for it. These environment variables are specifically used by `webpack-dev-server`:\n\n- `DEVSERVER_PUBLIC`\n- `DEVSERVER_PORT`\n- `DEVSERVER_HOST`\n- `TWIGPACK_MANIFEST_PATH`\n- `TWIGPACK_PUBLIC_PATH`\n\nYou can then run any of the development scripts found in `package.json`:\n\n- `npm run serve` to build and automatically run webpack with hot module reloading for local development\n- `npm run build` to build front end assets for production\n\n\u003e 💡 When using `npm run serve`, switch your site’s URL from `https://` to `http://`.\n\n#### PurgeCSS\n\nThis project uses PurgeCSS to automatically remove redundant or unused styles generated by Tailwind CSS.\n\nPurgeCSS is disabled by default for the `serve` script, meaning your site will be loaded with every available CSS class. It also means you’ll need to check the site after running `build` to be sure important classes aren’t inadvertently stripped away.\n\nClasses actively being used should be detected automatically, but you can encourage them to be recognized by making sure full class names appear in your template, stylesheet, and JavaScript files.\n\n❌ For example, don’t dynamically combine `text-red-` with a variable for this loop:\n\n```twig\n{% set classes = ['100', '500', '900'] %}\n{% for class in classes %}\n  \u003cdiv class=\"text-red-{{ class }}\"\u003e\u003c/div\u003e\t\n{% endfor %}\n```\n\n✅ Loop through complete class names like so they each appear in full:\n```twig\n{% set classes = ['text-red-100', 'text-red-500', 'text-red-900'] %}\n{% for class in classes %}\n  \u003cdiv class=\"{{ class }}\"\u003e\u003c/div\u003e\t\n{% endfor %}\n```\n\nIf you can’t avoid programmatic concatenation, use Tailwind’s [safelist](https://tailwindcss.com/docs/optimizing-for-production#safelisting-specific-classes) option in `tailwind.config.js`.\n\n### Testing\n\nCypress tests cover multiple parts of the website:\n\n- **control panel** – make sure the content structure is properly defined.\n- **front end** – check that the website’s different sections work as expected.\n- **accessibility** – evaluate the website for WCAG 2.0 compliance.\n\nSet the environment variables Cypress needs to run by copying `cypress.example.json` to `cypress.json` and adjusting it:\n\n```sh\ncp cypress.config.example.js cypress.config.js\n```\n\nOpen the Cypress Test Runner from the project root:\n\n```sh\nnpx cypress open\n```\n\nRun accessibility tests only:\n\n```sh\nnpx cypress run --spec \"cypress/e2e/front/a11y/*.cy.js\"\n```\n\n## License\n\nThe source code of this project is licensed under the [BSD Zero Clause License](LICENSE.md) unless stated otherwise.\n\nThe imagery used by this project is the property of Marin Bikes, and used with permission. You are not free to use it for your own projects.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcraftcms%2Fspoke-and-chain","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcraftcms%2Fspoke-and-chain","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcraftcms%2Fspoke-and-chain/lists"}