diff --git a/.github/README.md b/.github/README.md new file mode 100644 index 0000000..cc2dd20 --- /dev/null +++ b/.github/README.md @@ -0,0 +1,154 @@ +

+ + Apiary: a WooCommerce theme for Pollora + +

+ +

+ Version + License +

+ +Apiary is a complete WooCommerce storefront for [Pollora](https://pollora.dev), written in Blade with Tailwind CSS v4 and Alpine.js. Every shop page is covered, from the product grid to the cart, the checkout and the customer account, so you start a shop from a finished design and change what you need instead of overriding WooCommerce template by template. + +

+ The Apiary storefront +

+ +## Installation + +Apiary is the "E-commerce" template of `pollora:make:theme`: + +```bash +php artisan pollora:make:theme my-shop # then choose "E-commerce" +# or, without the prompt +php artisan pollora:make:theme my-shop --repository=Pollora/theme-apiary +``` + +The command downloads the latest tag, fills in the theme's name and namespace, compiles the translations, offers to install and activate WooCommerce (declared in `requirements.json`), runs `npm install` and `npm run build`, and offers to activate the theme. + +Requirements: + +- A Pollora project: PHP 8.4+ and WordPress 7.1+ for a new one +- [WooCommerce](https://woocommerce.com/) 10.3+: the template overrides are written against 10.3, and CI runs the current release +- Node.js 20.19+ or 22.12+ (Vite 8), for the asset build + +## Development + +```bash +cd themes/my-shop +npm run dev # Vite dev server with hot reload +npm run build # production assets +``` + +The Vite dev server auto-detects DDEV/Docker environments for proper HMR configuration. + +## Structure + +``` +%theme_name%/ +├── app/ # PHP application logic +│ ├── Cms/ # WordPress integrations (setup, cascade layers, WooCommerce) +│ ├── Http/Controllers/ # Controllers, including the product search API +│ ├── Providers/ # Laravel service providers +│ ├── Services/ # Product price, search and URL helpers +│ ├── Walkers/ # Custom menu walkers +│ └── inc/ # Hooks, helpers, WooCommerce customizations +├── config/ # Theme configuration (menus, sidebars, supports, WooCommerce) +├── resources/ +│ ├── assets/ # CSS, JavaScript, fonts, images +│ └── views/ # Blade templates +│ └── woocommerce/ # Full WooCommerce template overrides +├── routes/api.php # Theme API routes (prefix /api) +├── languages/ # Translations (text domain: %theme_name%) +├── requirements.json # Packages make:theme offers to install (WooCommerce) +├── theme.json # Base settings; the build adds the design tokens +└── vite.config.js # Build configuration +``` + +## Features + +- **WooCommerce**: Complete template coverage (cart, checkout, my account, orders, product pages) +- **Tailwind CSS v4**: Design tokens synced with WordPress `theme.json` +- **Alpine.js**: Lightweight interactivity (menus, modals, cart slide-over) +- **Blade templates**: 130 views with component support +- **12 menu locations**: Header, footer, mobile, account, and more +- **Accessibility**: Semantic HTML, ARIA labels, keyboard navigation +- **i18n**: Fully translatable (French included) +- **Product search API**: `GET /api/products/search`, declared as a theme API route in `routes/api.php` + +## Design tokens + +The design lives in the `@theme static` block of `resources/assets/css/app.css`: +colors, type scale, fonts and radii, with concrete values. `npm run build` +writes them into the `theme.json` the editor reads +(`public/build/theme//assets/theme.json`), so the page and the editor +always offer the same palette and sizes. + +- Change a token in `app.css`, not in `theme.json`: the root `theme.json` is + only the base (layout, editor settings), and a slug defined there wins over + `@theme`. +- To keep a value out of Tailwind, define that slug in `theme.json`, or turn a + whole family off in `vite.config.js` (`disableTailwindColors`, + `disableTailwindFontSizes`, `disableTailwindFonts`, + `disableTailwindBorderRadius`). +- Spacing and layout widths are not generated: set them in `theme.json`. + +See [Theme.json and Vite Build Integration](https://pollora.dev/theming/theme-structure/) +for the details. + +## Gutenberg design system + +Every core block is styled in `theme.json` (`styles`: root, elements, blocks), +from the design tokens only, so a paragraph, a quote, a table or a button look +the same in the editor and on the page. Content is no longer styled by +Tailwind Typography (`prose`); product descriptions still are. + +- Reference presets by the name WordPress prints: `2xl` becomes + `var(--wp--preset--font-size--2-xl)`. Never a Tailwind variable: it does not + exist in the editor. A block's `css` takes one selector per rule. +- Links are styled inside content blocks (paragraph, list, table, verse), not + globally, so WooCommerce and the templates keep their own link styles. +- `app/Cms/StyleLayers.php` puts WordPress's CSS in cascade layers, declared at + the top of `app.css`: `theme, base, wp-core, wp, components, utilities`. The + block library and the global styles beat Tailwind's reset, and a Tailwind + class always beats them. +- `php bin/tests/design-system.php` (run in CI) checks that every preset and + custom variable the styles use exists. + +## Configuration + +All theme behavior is driven by config files in `config/`: + +| File | Purpose | +| ------------------ | ----------------------------------------------- | +| `admin.php` | WordPress admin customization | +| `config.php` | Asset paths and build settings | +| `disable.php` | Disable unnecessary WP features | +| `gutenberg.php` | Block editor categories | +| `images.php` | Custom image sizes | +| `login.php` | Login screen logo and switches | +| `menus.php` | Menu locations | +| `providers.php` | Additional service providers | +| `sidebars.php` | Widget areas | +| `supports.php` | Theme supports (thumbnails, WooCommerce, etc.) | +| `templates.php` | Custom page templates | +| `woocommerce.php` | Product grid classes, icons, checkout layout | + +## Documentation + +- [Themes](https://pollora.dev/theming/theme-structure/): generating a theme, its structure, `theme.json` and the Vite build +- [Assets and Vite](https://pollora.dev/theming/assets-vite/) +- [Theme API routes](https://pollora.dev/routing/wordpress-routes/#theme--plugin-api-routes), as used by `routes/api.php` + +## Template development + +This repository is a template: its files carry placeholders that `pollora:make:theme` substitutes, so it does not run as is. Develop on a theme generated under the slug `apiary` in a Pollora test project, then copy it back with `./bin/package-theme.sh /path/to/project/themes/apiary`, which turns the slug and namespace back into placeholders. `bin/` is removed when the theme is downloaded; it also holds the CI checks (`php bin/tests/design-system.php`, the HTTP sweep and the browser tests). + +## Contributing + +Contributions are welcome: see the [contributing guide](https://github.com/Pollora/.github/blob/main/CONTRIBUTING.md). Report security issues privately, as described in the [security policy](https://github.com/Pollora/.github/blob/main/SECURITY.md). + +## License + +Apiary is open-source software licensed under the [GPL-2.0-or-later](../LICENSE). © [RuBee group](https://rubee.group) diff --git a/license.txt b/LICENSE similarity index 97% rename from license.txt rename to LICENSE index 56c817e..9efa6fb 100644 --- a/license.txt +++ b/LICENSE @@ -2,7 +2,7 @@ Version 2, June 1991 Copyright (C) 1989, 1991 Free Software Foundation, Inc., - 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA + Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. @@ -290,8 +290,8 @@ to attach them to the start of each source file to most effectively convey the exclusion of warranty; and each file should have at least the "copyright" line and a pointer to where the full notice is found. - Themosis framework, a framework for WordPress developers. - Copyright (C) 2012 Julien Lambé + + Copyright (C) This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by @@ -304,8 +304,7 @@ the "copyright" line and a pointer to where the full notice is found. GNU General Public License for more details. You should have received a copy of the GNU General Public License along - with this program; if not, write to the Free Software Foundation, Inc., - 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. + with this program; if not, see . Also add information on how to contact you by electronic and paper mail. @@ -329,11 +328,11 @@ necessary. Here is a sample; alter the names: Yoyodyne, Inc., hereby disclaims all copyright interest in the program `Gnomovision' (which makes passes at compilers) written by James Hacker. - , 1 April 1989 - Ty Coon, President of Vice + , 1 April 1989 + Moe Ghoul, President of Vice This General Public License does not permit incorporating your program into proprietary programs. If your program is a subroutine library, you may consider it more useful to permit linking proprietary applications with the library. If this is what you want to do, use the GNU Lesser General -Public License instead of this License. \ No newline at end of file +Public License instead of this License. diff --git a/README.md b/README.md index 63694c4..990663e 100644 --- a/README.md +++ b/README.md @@ -1,122 +1,51 @@ -# Apiary +# %theme_name% -A WooCommerce theme built on the [Pollora](https://pollora.dev) framework, featuring Tailwind CSS v4 and Alpine.js. +%theme_description% -## Requirements +Built with [Pollora](https://pollora.dev) from the [Apiary](https://github.com/Pollora/theme-apiary) template: a WooCommerce storefront in Blade, Tailwind CSS v4 and Alpine.js. It needs the WooCommerce plugin, active. -- PHP 8.1+ -- WordPress 6.0+ -- [Pollora](https://pollora.dev) framework -- [WooCommerce](https://woocommerce.com/) 8.0+ -- Node.js 18+ (for asset compilation) - -## Installation - -The theme must be installed within a Pollora project. - -```bash -# Install Node dependencies -npm install - -# Build production assets -npm run build -``` - -## Development - -```bash -# Start Vite dev server with HMR -npm run dev -``` - -The Vite dev server auto-detects DDEV/Docker environments for proper HMR configuration. - -## Structure +## What's inside ``` %theme_name%/ -├── app/ # PHP application logic -│ ├── Cms/ # WordPress CMS integrations -│ ├── Providers/ # Laravel service providers -│ ├── Walkers/ # Custom menu walkers -│ └── inc/ # Hooks, helpers, WooCommerce customizations -├── config/ # Theme configuration (menus, sidebars, supports, WooCommerce) +├── app/ # PHP classes, namespace %theme_namespace% +│ ├── Cms/ # WordPress and WooCommerce integrations +│ ├── Http/Controllers # Controllers, including the product search API +│ ├── Services/ # Product price, search and URL helpers +│ └── inc/ # Hooks, helpers, WooCommerce customizations +├── config/ # menus, sidebars, supports, image sizes, WooCommerce, login screen +├── languages/ # Translations (text domain: %theme_name%) ├── resources/ -│ ├── assets/ # CSS, JavaScript, fonts, images -│ └── views/ # Blade templates (128 files) -│ └── woocommerce/ # Full WooCommerce template overrides -├── languages/ # Translations (text domain: %theme_name%) -├── theme.json # Base settings; the build adds the design tokens -├── vite.config.js # Build configuration -└── routes.php # Theme routes (optional) +│ ├── assets/ # CSS (design tokens in app.css), JS, fonts, images +│ └── views/ # Blade templates +│ └── woocommerce/ # WooCommerce template overrides +├── routes/api.php # Theme API routes, under /api +├── style.css # WordPress theme header +├── theme.json # Base editor settings; the build adds the design tokens +└── vite.config.js # Asset build ``` -## Features - -- **WooCommerce**: Complete template coverage (cart, checkout, my account, orders, product pages) -- **Tailwind CSS v4**: Design tokens synced with WordPress `theme.json` -- **Alpine.js**: Lightweight interactivity (menus, modals, cart slide-over) -- **Blade templates**: 128 views with component support -- **11 menu locations**: Header, footer, mobile, account, and more -- **Accessibility**: Semantic HTML, ARIA labels, keyboard navigation -- **i18n**: Fully translatable (French included) - -## Design tokens - -The design lives in the `@theme static` block of `resources/assets/css/app.css`: -colours, type scale, fonts and radii, with concrete values. `npm run build` -writes them into the `theme.json` the editor reads -(`public/build/theme//assets/theme.json`), so the page and the editor -always offer the same palette and sizes. - -- Change a token in `app.css`, not in `theme.json`: the root `theme.json` is - only the base (layout, editor settings), and a slug defined there wins over - `@theme`. -- To keep a value out of Tailwind, define that slug in `theme.json`, or turn a - whole family off in `vite.config.js` (`disableTailwindColors`, - `disableTailwindFontSizes`, `disableTailwindFonts`, - `disableTailwindBorderRadius`). -- Spacing and layout widths are not generated: set them in `theme.json`. - -See [Theme.json and Vite Build Integration](https://pollora.dev/theming/theme-structure/) -for the details. +## Commands -## Gutenberg design system +Run from `themes/%theme_name%`: -Every core block is styled in `theme.json` (`styles`: root, elements, blocks), -from the design tokens only, so a paragraph, a quote, a table or a button look -the same in the editor and on the page. Content is no longer styled by -Tailwind Typography (`prose`); product descriptions still are. - -- Reference presets by the name WordPress prints: `2xl` becomes - `var(--wp--preset--font-size--2-xl)`. Never a Tailwind variable: it does not - exist in the editor. A block's `css` takes one selector per rule. -- Links are styled inside content blocks (paragraph, list, table, verse), not - globally, so WooCommerce and the templates keep their own link styles. -- `app/Cms/StyleLayers.php` puts WordPress's CSS in cascade layers, declared at - the top of `app.css`: `theme, base, wp-core, wp, components, utilities`. The - block library and the global styles beat Tailwind's reset, and a Tailwind - class always beats them. -- `php bin/tests/design-system.php` (run in CI) checks that every preset and - custom variable the styles use exists. +```bash +npm run dev # Vite dev server with hot reload +npm run build # production assets +``` -## Configuration +From the project root: -All theme behavior is driven by config files in `config/`: +```bash +php artisan pollora:make:block my-block --theme=%theme_name% # a new Gutenberg block +php artisan discovery:clear # after adding attribute-based classes +php artisan pollora:doctor # when something fails without an error +``` -| File | Purpose | -| ------------------ | ----------------------------------------------- | -| `admin.php` | WordPress admin customization | -| `disable.php` | Disable unnecessary WP features | -| `gutenberg.php` | Block editor categories | -| `images.php` | Custom image sizes | -| `menus.php` | Menu locations | -| `providers.php` | Additional service providers | -| `sidebars.php` | Widget areas | -| `supports.php` | Theme supports (thumbnails, WooCommerce, etc.) | -| `templates.php` | Custom page templates | -| `woocommerce.php` | Product grid classes, icons, checkout layout | +Change colors, font sizes, fonts and radii in the `@theme static` block of `resources/assets/css/app.css`, not in `theme.json`: `npm run build` writes them into the `theme.json` the editor reads. -## License +## Read more -GPL-2.0-or-later +- [Themes](https://pollora.dev/theming/theme-structure/): structure, template hierarchy, `theme.json` and the Vite build +- [Assets and Vite](https://pollora.dev/theming/assets-vite/) +- [Theme API routes](https://pollora.dev/routing/wordpress-routes/#theme--plugin-api-routes) diff --git a/bin/package-theme.sh b/bin/package-theme.sh index ac06d10..5c44c54 100755 --- a/bin/package-theme.sh +++ b/bin/package-theme.sh @@ -42,17 +42,43 @@ rsync -av --delete \ --exclude='.claude' \ --exclude='package-theme.sh' \ --exclude='bin/' \ - --exclude='README.md' \ --exclude='languages/*.mo' \ --exclude='screenshot.png' \ --exclude='tailwind.safelist.txt' \ + --exclude='/README.md' \ + --exclude='/.github/' \ + --exclude='/LICENSE' \ + --exclude='/license.txt' \ "$SOURCE/" "$TARGET_DIR/" \ --quiet +# package.json comes from the development copy, which declares no license (or +# another one): the template's is GPL-2.0-or-later, the same as LICENSE. +echo "Setting the package.json license to GPL-2.0-or-later..." +node -e ' +const fs = require("fs"); +const [file, license] = process.argv.slice(1); +const pkg = JSON.parse(fs.readFileSync(file, "utf8")); +let out = pkg; +if ("license" in pkg) { + pkg.license = license; +} else { + out = {}; + for (const [key, value] of Object.entries(pkg)) { + out[key] = value; + if (key === "private") out.license = license; + } + if (!("license" in out)) out.license = license; +} +fs.writeFileSync(file, JSON.stringify(out, null, 4) + "\n"); +' "$TARGET_DIR/package.json" "GPL-2.0-or-later" + echo "Replacing code name with placeholders..." find "$TARGET_DIR" -type f \ -not -path "*/.git/*" \ + -not -path "*/.github/*" \ + -not -path "*/bin/*" \ -not -path "*/node_modules/*" \ -not -name "package-theme.sh" \ -not -name "README.md" \ diff --git a/package.json b/package.json index 94b405d..8acdd14 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "private": true, + "license": "GPL-2.0-or-later", "type": "module", "scripts": { "dev": "vite",