diff --git a/.gitignore b/.gitignore index bf04367f0..685522f37 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,8 @@ # Dependencies Snowdog_Components/node_modules +docs/node_modules + # Build Snowdog_Components/build diff --git a/README.md b/README.md index 4ae0bdd92..0755e5166 100644 --- a/README.md +++ b/README.md @@ -1,76 +1,35 @@
Alpaca Logo -[![Latest Stable Version](http://poser.pugx.org/snowdog/theme-frontend-alpaca/v)](https://packagist.org/packages/snowdog/theme-frontend-alpaca) [![Total Downloads](http://poser.pugx.org/snowdog/theme-frontend-alpaca/downloads)](https://packagist.org/packages/snowdog/theme-frontend-alpaca)
-📚 [Docs](./docs) | 📝 [Changelog](./CHANGELOG.md)
+[![Latest Stable Version](http://poser.pugx.org/snowdog/theme-frontend-alpaca/v)](https://packagist.org/packages/snowdog/theme-frontend-alpaca) Magento 2.4.3 [![Total Downloads](http://poser.pugx.org/snowdog/theme-frontend-alpaca/downloads)](https://packagist.org/packages/snowdog/theme-frontend-alpaca) +📚 [Documentation](https://alpaca-docs.vercel.app/) | 📝 [Changelog](./CHANGELOG.md) | 🔺 [Migration Guide](https://alpaca-docs.vercel.app/guide/migration-guide.html) + +🔹 [Component Library](https://magento2-alpaca-theme.vercel.app/)
🔹 [Magento OS Demo](https://alpaca-community.snowdog.dev/)
🔹 [Adobe Commerce Demo](https://alpaca-commerce.snowdog.dev/)
-🔹 [Components Preview](https://magento2-alpaca-theme-git-master-snowdog1.vercel.app/)
-# Magento 2 Theme Frontend Alpaca -> `2.26.0` includes a lot of changes and has different file structure, please go to [Migration Guide](.doc/MIGRATION_GUIDE.md) for more information. +# Magento 2 Alpaca Theme +📝 **Component-based** +* Built on top of a collection of reusable components - guided by clear rules to ensure design consistency. -✅ Compatible with Magento 2.4.3
-📝 Component-based
-📚 Feature-rich
-🎨 Themable
-💅 Polished
-♿️ Accessible
-⚡️ Easy to set up
+🎨 **Themable** +* Gives a lot of flexibility to customize the look of the store. -## Key features -* Polished component system, built with [Sass](https://sass-lang.com/) and [Fractal](https://fractal.build/), on which you can work on outside of Magento to speed up development process. -* It makes it easy to customize design. -* Advanced menu built with [Snowdog Module Menu](https://github.com/SnowdogApps/magento2-menu) -* Optimised images - responsive images, lazyloading, webp, and aspect ratio -* SVG icons that can be used in CMS content -* Customisable content with banners -* Customizable slider built with [slick](https://kenwheeler.github.io/slick/) -* Content types built with [Blackbird Content Manager](https://www.advancedcontentmanager.com/) for slider and blog articles +📚 **Feature-rich** +* Comes in a package with a set of modules. +* Compatible with the majority of Magento Open Source and Adobe Commerce features. -And much more. Check how to work with different features in [Working with Alpaca guide](./docs/working-with-alpaca.md) +💅 **Polished** +* We've put a lot of work into the little things. -## Alpaca Packages -Alpaca Theme is a part of [Alpaca Packages](https://github.com/SnowdogApps/magento2-alpaca-packages) - a set of open source modules that cover Alpaca base features. -It includes: -* [magepal/magento2-gmailsmtpapp](https://github.com/magepal/magento2-gmail-smtp-app) -* [magepal/magento2-googletagmanager](https://github.com/magepal/magento2-google-tag-manager) -* [mailchimp/mc-magento2](https://github.com/mailchimp/mc-magento2) -* [smile/elasticsuite](https://github.com/Smile-SA/elasticsuite) -* [snowdog/module-alpaca-general](https://github.com/SnowdogApps/magento2-alpaca-general) -* [snowdog/module-bullet-points](https://github.com/SnowdogApps/magento2-bullet-points) -* [snowdog/module-csp](https://github.com/SnowdogApps/magento2-module-csp) -* [snowdog/module-category-attributes](https://github.com/SnowdogApps/magento2-category-attributes) -* [snowdog/module-menu](https://github.com/SnowdogApps/magento2-menu) -* [snowdog/module-product-attribute-description](https://github.com/SnowdogApps/magento2-product-attribute-description) -* [snowdog/module-shipping-latency](https://github.com/SnowdogApps/magento2-shipping-latency) -* [snowdog/module-wishlist-unlocker](https://github.com/SnowdogApps/magento2-wishlist-unlocker) -* [webshopapps/module-matrixrate](https://github.com/webshopapps/module-matrixrate) +♿️ **Accessible** +* WCAG AA level compliant -## Third-party module compatibility -Besides modules included in [Alpaca Packages](#alpaca-packages), Alpaca supports the following modules: -* Open source: - * paradoxlabs/authnetcim - * paradoxlabs/tokenbase - * authorizenet/magento-module-creditcard - * [snowdog/module-alpaca-acm](https://github.com/SnowdogApps/magento2-alpaca-acm) - Alpaca customisations for paid `blackbird/contentmanager` extension +⚡️ **Fast Child Theme Setup** +* Create Alpaca Child Theme in your Magento project by running one command. -* Paid: - * amasty/adminactionslog - * amasty/module-gdpr - * amasty/module-gift-card - * amasty/module-google-rich-snippets - * amasty/module-product-feed - * amasty/module-shipping-rules - * amasty/module-special-promo - * amasty/module-store-locator - * amasty/payrestriction - * amasty/shiprestriction - * apptrian/facebook-pixel - * blackbird/contentmanager - * vladimirpopov/webforms +--- -## Installation -Check [Alpaca installation step by step guide](./docs/alpaca-step-by-step.md) +To learn more about Alpaca, check [documentation](https://alpaca-docs.vercel.app/). diff --git a/Snowdog_Components/README.md b/Snowdog_Components/README.md deleted file mode 100644 index 9b09438a4..000000000 --- a/Snowdog_Components/README.md +++ /dev/null @@ -1,122 +0,0 @@ -# Alpaca Components - -## Introduction -Components library of Alpaca [design system](https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/) created to speed up the process of working with design on Magento 2 stores, by creating each UI element, module, and view in a simplified, front-end developer friendly, environment. - -This components library is built on top of [Fractal.js](http://fractal.build/guide). -It's separate npm package, created based on [Alpaca Components](https://github.com/SnowdogApps/magento2-alpaca-components). To make the work easier, now it's implemented inside the theme, as a part of theme composer package. - -Magento 2 experience is not required to work with this code. - -## Requirements -- node version >=16 <17.0.0 installed globally -- npm or yarn installed globally - -## Installation -- Install dependencies using `yarn` -- Run `yarn dev` to start Fractal.js development server -- Run `yarn build` if you want to generate static files (for example to deploy them) - -## How to create a components library on top of Alpaca Components -1. Copy-paste `package.json`, `gulpfile.js`, `.eslintignore`, `.eslintrc`, `.sass-lint.yml`, `.stylelintrc` files into `theme-frontend-/Snowdog_Components`: - -2. Update project name in `package.json` and `gulpfile.js` - -3. Copy `styles.scss` and `checkout.scss` from `theme-frontend-alpaca/Snowdog_Components/docs/styles/` and add child project variables import there. - -4. Create `modules.mjs` file with an array of paths to parent components libraries. To inherit dependencies from Alpaca components, you have to define path to `theme-forntend-alpaca/Snowdog_Components`. - In most cases, inside Magento, it will look like this: - ```js - export default[ - "../../../snowdog/theme-frontend-alpaca/Snowdog_Components" - ] - ``` -5. Customize or add new files following the same structure as in Alpaca components - -6. Components imports are located in files in: `vendor/snowdog/theme-frontend-alpaca/Snowdog_Components/components/styles`, copy appropriate file(s) from there in your child theme to import extended or new component(s) - -6. Run `yarn` and `yarn dev` to run components in fractal.build. :tada: - -## Directory structure -- `components` directory is what you are going to import into the Magento 2 theme. -- `docs` and `public` are just for the local environment purposes, you will find there sample images, testing libs, utility styles etc. - -## Core concepts -### Components architecture -Components are divided into 4 groups based on [Atomic Design](http://atomicdesign.bradfrost.com/chapter-2/) system: -1. Atoms - - Contains code that other components can use in any place, for example, typography, icons or SASS variables. -2. Molecules - - Smallest UI parts, for example, buttons - - Molecules can't depend on other molecule - - Molecules shouldn't have any layout -3. Organisms - - More complex UI parts like search form or header - - Takes Molecules or other Organisms and combine them together adding layout and context -4. Templates - - Takes Molecules or Organisms and combine them together adding final layout and context - - You should be able to show it to client/PM as a preview of ready to use store view - - You shouldn't create any new UI elements, everything needs to be reusable. - -### Naming -* Group name needs to be plural -* Component name needs to be singular -* Component name shouldn't be related to any project or place in the layout - - Bad: `top-banner` - - Good: `dropdown-list` or `collapsible-list` -* Avoid using `box`, `block`, `item`, `info`, `text`, `cms`, especially combined together, for example `info-box` -* Avoid naming two components in similar way i.e. `cms-subcategories` and `cms-subcategory` - -### Colors -* By default Alpaca components uses up to 7 step grayscale -* `$color-primary` & `$color-secondary` are mainly used inside components styles - -### SASS Variables naming - -Follow BEM-like naming convention i.e. when you component name is `button` and you are creating a variable for a `padding` it should be `$button__padding`. - -Same as in BEM, you are not allowed to build construction like `$button__icon__padding`, it should be `$button__icon-padding`. - -Variables related to the pseudo-classes and pseudo-selectors should be treated as a BEM elements `$button__color-hover`. - -Also, BEM modifier are allowed in variables `$button__padding--secondary`, you can even stack them like this `$button__padding--secondary--dark`. - -To target variable to specific breakpoint adding `\@breakpoint` at the end of the variable name `$button__padding\@medium`. Always use `small`, `medium`, `large` etc. to describe the breakpoint. - -Examples of proper variables names: -```scss -$swatch__option-border -$swatch__option-border-color-hover - -$swatch__option-image-height\@large - -$swatch__option-size--small -$swatch__option-image-width--small -$swatch__option-image-width--small\@large -``` - -## Accessibility -Components are tested with [axe-core](https://github.com/dequelabs/axe-core). The results are displayed as a console output in browser tools. -A11y test files you can find in `/public/tests/` - -## Common JS files -General concept for JS files is that we load them inside component .hbs file using: -1) `` -2) If component that contains JS file is required by other component we are using `script` variable to avoid problems with duplicated declaration of JS files. This variable can be defined in config.js file and JS script is loaded in .hbs file using: -``` -{{#if script}} - -{{/if}} -``` -Above method is recommended for most JS scripts used in components, but requires additional config which can be complex, especially in the `Templates` views where current component that contains JS file is loaded multiple times. Good example of that kind component type is `dropdown-list` which on one view is loaded in: sidemenu, header minicart, filters and in footer. -To avoid problems with complex config and duplicated declaration of JS files `common-js` component is created in `Atoms`. -This component contain only common-js.hbs file where JS scripts created in components can be loaded globally using: -3) `` -This component is used in `_preview.hbs` file after lib JS files are loaded. -Do not use `common-js` component for libs files and for JS scripts created in components that are not loaded multiple time on one view. - -## Show on scroll elements -To show sticky elements on product page (tabs header & `add-to-cart` component) we use [aos lib](https://github.com/michalsnik/aos/tree/v2) - -## Components notes -In more complex component there is a README.md added, when you can find information about usage, features or a11y implementation. Please check it. In fractal UI, it's available in `Notes` Tab diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js new file mode 100644 index 000000000..456e86d7a --- /dev/null +++ b/docs/.vitepress/config.js @@ -0,0 +1,113 @@ +module.exports = { + lang: 'en-US', + title: 'Alpaca', + description: 'Theme for Magento 2', + head: [['link', { rel: 'icon', href: `/snowdog.png` }]], + themeConfig: { + repo: 'SnowdogApps/magento2-alpaca-theme', + docsDir: 'docs', + docsBranch: 'master', + editLinks: true, + editLinkText: 'Edit this page on GitHub', + lastUpdated: 'Last Updated', + nav: [ + { text: 'Guide', link: '/guide', activeMatch: '^/$|^/guide/' }, + { text: "Contact", link: "https://snow.dog/contact" }, + ], + sidebar: { + '/': [ + { + text: 'Introduction', + children: [ + { + text: 'Overview', + link: '/guide/' + }, + { + text: 'Alpaca Packages', + link: '/guide/introduction/alpaca-packages' + }, + { + text: 'Third-Party Module Compatibility', + link: '/guide/introduction/third-party-module-compatibility' + }, + { + text: 'Browser support', + link: '/guide/introduction/browser-support' + } + ] + }, + { + text: 'Getting Started', + children: [ + { + text: 'Alpaca Setup Guide', + link: '/guide/getting-started/alpaca-setup-guide' + }, + { + text: 'Magento Setup Guide', + link: '/guide/getting-started/magento-setup-guide' + }, + { + text: 'Which version should I use?', + link: '/guide/getting-started/which-version-should-i-use' + } + ] + }, + { + text: 'Working with Alpaca', + children: [ + { + text: 'Frontools', + link: '/guide/working-with-alpaca/frontools' + }, + { + text: 'Components', + link: '/guide/working-with-alpaca/components' + }, + { + text: 'Styles', + link: '/guide/working-with-alpaca/styles' + }, + { + text: 'Fonts', + link: '/guide/working-with-alpaca/fonts' + }, + { + text: 'JavaScript', + link: '/guide/working-with-alpaca/javascript' + }, + { + text: 'Main Content Elements', + link: '/guide/working-with-alpaca/main-content-elements' + }, + { + text: 'Images', + link: '/guide/working-with-alpaca/images' + }, + { + text: 'SVG Icons', + link: '/guide/working-with-alpaca/svg-icons' + }, + { + text: 'Sliders', + link: '/guide/working-with-alpaca/sliders' + }, + { + text: 'Blog', + link: '/guide/working-with-alpaca/blog' + }, + { + text: 'Magepack', + link: '/guide/working-with-alpaca/magepack' + } + ] + }, + { + text: 'Migration Guide', + link: '/guide/migration-guide' + } + ] + } + } +} diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css new file mode 100644 index 000000000..d7cd63e6d --- /dev/null +++ b/docs/.vitepress/theme/custom.css @@ -0,0 +1,33 @@ +:root { + --c-brand: #1a1b1d; + --code-bg-color: #1a1b1d; + --c-brand-light: #1a1b1d; + --code-inline-bg-color: #eaeaea; + --c-accent: #0075e4; +} + +#main-title { + position: absolute; + clip: rect(0 0 0 0); + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; +} + +a { + color: var(--c-accent); +} + +.action .item { + border-radius: 0 !important; +} + +code { + color: var(--c-brand); +} + +.custom-block.tip { + border-color: var(--c-accent); +} diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js new file mode 100644 index 000000000..42fe9a936 --- /dev/null +++ b/docs/.vitepress/theme/index.js @@ -0,0 +1,4 @@ +import DefaultTheme from 'vitepress/theme' +import './custom.css' + +export default DefaultTheme diff --git a/docs/alpaca-step-by-step.md b/docs/alpaca-step-by-step.md deleted file mode 100644 index 191650228..000000000 --- a/docs/alpaca-step-by-step.md +++ /dev/null @@ -1,427 +0,0 @@ -# Set up Alpaca Theme on Magento 2.4 - -This is a step-by-step guide of how to install Snowdog's Alpaca Theme and child theme based on Alpaca Theme on working Magento 2.4 project.
-If you need to help with setup Magento project locally, check our [Magento 2 setup guide here](magento-setup-guide.md)
- -Alpaca Theme components and templates preview - see [Alpaca Components Preview](https://magento2-alpaca-theme-git-master-snowdog1.vercel.app/)
-Alpaca Theme preview: [Alpaca Magento OS](https://alpaca-community.snowdog.dev/), [Alpaca Magento Commerce](https://alpaca-commerce.snowdog.dev/)
- -## Create Alpaca Child Theme with npx: -There is a tool that make a full child theme based on alpaca in existing Magento project with one command: -Try it out running `npx create-alpaca-theme` in your Magento root directory (node@16 and working Magento 2.4 required). -More info: [alpaca boilerplate npm project page](#to-do-here) - -// TO DO update table of contents -## Table of Contents - * [Requirements](#requirements) - * [Alpaca Versions](#alpaca-versions) - * [Set up Alpaca Theme](#set-up-alpaca-theme) - * [Set up Alpaca Child Theme](#set-up-alpaca-child-theme) - * [Working with Alpaca Theme](#working-with-alpaca-theme) - * [Useful Links](#useful-links) - -## Requirements -* Working Magento 2.4 project -* Node version 16 -* [yarn](https://yarnpkg.com/) (we recommended yarn but you can also use npm to install dependencies and run node command). - -## Alpaca versions -This guide is adjusted to the latest version of Alpaca theme: ^2.26 and work with Magento 2.4.3 -If you work with older Magento version, use appropriate Alpaca Theme: -* Alpaca 2.14.0 supports Magento 2.4.2 -* Alpaca 2.13.0 supports Magento 2.4.1 -* Alpaca 2.12.* supports Magento 2.3.6 - -Check [Changelog file](../CHANGELOG.md) for more details
. - - -## Set up Alpaca Theme - When using **Valet Plus** run commands in main project directory, with **Warden** remember to launch shell session see [Warden usage and common commands](https://docs.warden.dev/usage.html) - -1. Add Snowdog Alpaca Packages:
- ``` - composer require snowdog/module-alpaca-packages - ``` - See [content of Alpaca Packages here](https://github.com/SnowdogApps/magento2-alpaca-packages) -2. Install Alpaca Theme latest version: - ``` - composer require snowdog/theme-frontend-alpaca:^2.26 - ``` -3. Add frontools: - ``` - composer require snowdog/frontools - ``` - [Learn about Frontools here](https://github.com/SnowdogApps/magento2-frontools) -4. Run db queries to add to your database all Alpaca CMS block & content - [Copy db queries from here](https://github.com/SnowdogApps/create-alpaca-theme/blob/master/templates/database/queries.sql) - -5. Upgrade application, DB data and schema (_[learn more here](https://devdocs.magento.com/guides/v2.4/install-gde/install/cli/install-cli-subcommands-db-upgr.html#instgde-cli-db-upgr)_): - ``` - bin/magento setup:upgrade - ``` -6. Setup frontools - * in `/` create files: - `theme.json`: - ```json - { - "alpaca": { - "src": "vendor/snowdog/theme-frontend-alpaca", - "dest": "pub/static/frontend/Snowdog/alpaca", - "locale": ["en_US"], - "ignore": [ - "**/node_modules/**", - "**/Snowdog_Components/docs/**", - "**/Snowdog_Components/build/**" - ] - } - } - ``` - - `browser-sync.json`, adjust file for your local domain: - ```json - [ - { - "proxy": ".test", - "rewriteRules": [ - { - "match": "..test", - "replace": "" - } - ] - }, - { - "proxy": "b2b..test", - "rewriteRules": [ - { - "match": ".b2b..test", - "replace": "" - } - ] - } - ] - ``` - - * Go to `vendor/snowdog/frontools` and run commands: - ```` - yarn - yarn setup - yarn styles && yarn svg && yarn babel - ```` - Setting up frontools creates symlinks. After set up, `yarn` commands are available from `/tools`
- -7. Log in to admin panel. - - You can find admin page URL in `app/etc/env.php` file in `backend` section (`frontName` parameter) - - You can create new admin user by using magento CLI: - ``` - bin/magento admin:user:create --admin-user="YOUR_USER_NAME" --admin-password="YOUR_PASS" --admin-firstname="Test" --admin-lastname="Test" --admin-email="test@test.com" - ``` - - Go to `Content -> Design -> Configuration`, and choose Alpaca Theme -8. Flush cache storage - `System -> Tools -> Cache Managment` or run command below: - ``` - bin/magento cache:flush - ``` -9. Run Alpaca components - - go to `vendor/snowdog/theme-frontend-alpaca/Snowdog_Components` - - run `yarn` to install node dependencies - - run `yarn dev` and check localhost to see Alpaca components in development mode. -

-Congrats! You've installed Alpaca Theme successfully!
- -To create your own child theme, see the instruction below: -## Set up Alpaca Child Theme -After installing Alpaca theme, you can create child theme based on Alpaca Theme as a separate composer package (in `vendor` directory) or in `app/design/frontend` directory. -In this guide, we will create it in `app/design/frontend`. - -1. Go to `app/design/frontend` and create directories with your Vendor name and with you theme name: `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME`, example: `app/design/frontend/Snowdog/alpaca-child` -2. Create configuration theme's files: -Inside `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME`, create `registration.php` and `theme.xml` files. - * `registration.php`: - - ```php - - CHILD_THEME_NAME - Snowdog/alpaca - - preview.jpg - - - ``` - Adjust `CHILD_THEME_NAME` - -3. Copy theme files: -Copy following files from Alpaca theme (`vendor/snowdog/theme-frontend-alpaca`): -* `.editorconfig` -* `.eslintignore` -* `.gitignore` -* `preview.jpg` -You can create also `README.md` and `CHANGELOG.md` files. - -4. Adjust styles inheritance in child theme: -### Add basic styles and child theme variables: -In components: - * `app/design/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components/components/Atoms/variables/_CHILD_THEME_NAME-variables.scss` - child theme variables, where you can create basic variables for a child theme or overwrite those from `vendor/snowdog/theme-frontend-alpaca/Snowdog_Components/components/Atoms/variables/_variables.scss` - change assigned value without `!default` - * `app/design/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components/docs/styles/styles.scss`: - ```scss - // Variables - @import '../../components/Atoms/variables/variables'; - - // Child theme variables (imported after alpaca variables) - @import "../../components/Atoms/variables/CHILD_THEME_NAME-variables"; - - // Components - @import '../../components/styles/critical'; - @import '../../components/styles/non-critical'; - - // Styles necessary only for Fractal purposes - @import 'fractal'; - ``` - - * `app/design/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components/docs/styles/checkout.scss` - ```scss - // Variables - @import '../../components/Atoms/variables/variables'; - - // Child theme variables - @import "../../components/Atoms/variables/CHILD_THEME_NAME-variables"; - - // Components - @import '../../components/styles/critical-checkout'; - @import '../../components/styles/checkout'; - - // Styles necessary only for Fractal purposes - @import 'fractal'; - ``` - -In theme: - * `app/design/VENDOR_NAME/CHILD_THEME_NAME/styles/styles.scss`: - - ```scss - // Variables - @import '../Snowdog_Components/components/Atoms/variables/variables'; - - // Child theme variables - @import "../Snowdog_Components/components/Atoms/variables/CHILD_THEME_NAME-variables"; - - // Components - @import '../Snowdog_Components/components/styles/non-critical'; - - // Theme partials - @import '../Amasty_Storelocator/styles/module'; - @import '../Amasty_GiftCard/styles/module'; - @import '../Magento_Ui/styles/module'; - @import '../Magento_Catalog/styles/module'; - @import '../Magento_Customer/styles/module'; - @import '../VladimirPopov_WebForms/styles/module'; - @import '../Magento_PageBuilder/styles/module'; - @import '../Magento_QuickOrder/styles/module'; - @import '../Yotpo_Yotpo/styles/module'; - @import '../Magento_Msrp/styles/module'; - @import '../PayPal_Braintree/styles/module'; - @import '../Magento_ReCaptchaFrontendUi/styles/module'; - @import '../Magento_Theme/styles/module-non-critical'; - - // Show sections hidden in critical.scss - .page-main, - .footer { - display: block !important; - } - ``` - - * `app/design/VENDOR_NAME/CHILD_THEME_NAME/styles/critical.scss`: - - ```scss - // Variables - @import '../Snowdog_Components/components/Atoms/variables/variables'; - - // Child theme variables - @import "../Snowdog_Components/components/Atoms/variables/CHILD_THEME_NAME-variables"; - - // Components - @import '../Snowdog_Components/components/styles/critical'; - @import '../Magento_Theme/styles/module-critical'; - - // Hide non-critical sections, before loading full stylesheet - .page-main, - .footer, - .breadcrumbs { - display: none; - } - ``` - * `app/design/VENDOR_NAME/CHILD_THEME_NAME/styles/critical-checkout.scss`: - ```scss - // Variables - @import '../Snowdog_Components/components/Atoms/variables/variables'; - - // Child theme variables - @import "../Snowdog_Components/components/Atoms/variables/CHILD_THEME_NAME-variables"; - - // Components - @import '../Snowdog_Components/components/styles/critical-checkout'; - @import '../Magento_Theme/styles/module-critical'; - - // Hide non-critical sections, before loading full stylesheet - .page-main, - .footer, - .breadcrumbs { - display: none; - } - - ``` - * `app/design/VENDOR_NAME/CHILD_THEME_NAME/Magento_Checkout/styles/checkout.scss`: - ```scss - // Mixins - @import '../../Snowdog_Components/components/styles/mixins'; - - // Component variables - @import '../../Snowdog_Components/components/Atoms/variables/variables'; - // Child theme variables - @import "../../Snowdog_Components/components/Atoms/variables/CHILD_THEME_NAME-variables"; - - // Components partials for checkout - @import '../../Snowdog_Components/components/styles/checkout'; - - // Theme partials for checkout - @import '../../Amasty_GiftCard/styles/module'; - @import '../../Magento_Msrp/styles/module'; - @import '../../Magento_Ui/styles/module'; - @import '../../Magento_PageBuilder/styles/module'; - @import '../../Magento_ReCaptchaFrontendUi/styles/module'; - @import '../../Magento_Theme/styles/module-non-critical'; - @import '../../PayPal_Braintree/styles/module'; - - // Show sections hidden in critical.scss - .page-main, - .footer { - display: block !important; - } - ``` - - -### Extend components styles: -It's a quick guide to create extended styles for `button` component. -More details about styles in Alpaca Theme & components and theits inheritance, you can find in [Working with Alpaca guide](./working-with-alpaca.md) - - * Button Alpaca component styles can be found at: `vendor/snowdog/theme-frontend-alpaca/Snowdog_Components/components/Molecules/button/_button.scss` - * In your child theme, create 3 files: - 1) `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components/components/Molecules/button/_CHILD_THEME_NAME-button-variables.scss`: - ```scss - // change button text color: - $button__text-color: $seafoam-blue; - ``` - 2) `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components/components/Molecules/button/_CHILD_THEME_NAME-button.scss`: - ```scss - // EDIT/ADD COMPONENT STYLES ACCORDING TO YOUR NEEDS - // to test you can check .button { background-color: blue !important; } - ``` - 3) `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components/components/Molecules/button/_button-extend.scss`: - ```scss - @import 'CHILD_THEME_NAME-button-variables'; - @import 'button'; - @import 'CHILD_THEME_NAME-button'; - ``` - you need to change all imports of `_button.scss` to `_button-extend.scss`: - * copy `vendor/snowdog/theme-frontend-alpaca/Snowdog_Components/components/styles/_critical-checkout.scss` to `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components/components/styles/_critical-checkout.scss` and change line `@import '../Molecules/button/button';` to `@import '../Molecules/button/button-extend';` - * copy `vendor/snowdog/theme-frontend-alpaca/Snowdog_Components/components/styles/_critical.scss` to `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components/components/styles/_critical-checkout.scss` and change line `@import '../Molecules/button/button';` to `@import '../Molecules/button/button-extend';` - - If you extend a component imported in `non-critical` styles, you need to copy `vendor/snowdog/theme-frontend-alpaca/Snowdog_Components/components/styles/_non-critical.scss` and `vendor/snowdog/theme-frontend-alpaca/Snowdog_Components/components/styles/_checkout.scss` and update component's import styles to `...-extend.scss` accordingly. - - -5. Create components: -1) From Alpaca components directory (`vendor/snowdog/theme-frontend-alpaca/Snwodog_Components`) copy follwing files: -* `.browserslistrc` -* `.editorconfig` -* `.eslintignore` -* `.eslintrc.json` -* `.node-version` -* `.sass-lint.yml` -* `.stylelintrc` -* `gulpfile.mjs` -* `package.json` - -2) in `package.json` and `gulpfile.mjs` replace `Alpaca` name to `CHILD_THEME_NAME` -3) Set inheritance from Alpaca component by creating `modules.mjs` file with following content: -```mjs -export default [ - "../../../../../../vendor/snowdog/theme-frontend-alpaca/Snowdog_Components" -] -``` -4) run `yarn` to install dependencies -5) run `yarn dev` to work with components in dev mode. - -6. Create frontools config file to compile theme static assets: -Go to `dev/tools/frontools/themes.json` and add or adjust your theme: -```json -{ - "alpaca": { - "src": "vendor/snowdog/theme-frontend-alpaca", - "dest": "pub/static/frontend/Snowdog/alpaca", - "locale": ["en_US"], - "ignore": [ - "**/node_modules/**", - "**/Snowdog_Components/docs/**", - "**/Snowdog_Components/build/**" - ] - }, - "YOUR_THEME_NAME": { - "src": "app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME", - "dest": "pub/static/frontend/VENDOR_NAME/CHILD_THEME_NAME", - "parent": "alpaca", - "locale": ["en_US"], - "ignore": [ - "**/node_modules/**", - "**/Snowdog_Components/docs/**", - "**/Snowdog_Components/build/**" - ] - } -} - -``` -7. Go to `dev/tools/frontools/browser-sync.json` and set proper values: -```json -{ - "proxy": "your-local-domain.test", - "rewriteRules": [ - { - "match": ".your-local-domain.test", - "replace": "" - } - ] -} - -``` -8. Upgrade application, DB data and schema: - ``` - bin/magento setup:upgrade - ``` -9. Frontools are already installed with Alpaca theme, so after update config, go to `/tool`and run: - ```` - yarn styles && yarn svg && yarn babel - ```` -10. Log in to the admin panel. -11. Go to `Content -> Design -> Configuration`, and choose your theme -12. Flush cache storage. - -## Useful Links - * [Snowdog Frontools](https://github.com/SnowdogApps/magento2-frontools) - * [Valet Plus](https://github.com/weprovide/valet-plus/wiki/Database) - * [Fractal guide](https://fractal.build/guide/) - * [Alpaca Packages](https://github.com/SnowdogApps/magento2-alpaca-packages) - * [Alpaca Components guide](https://github.com/SnowdogApps/magento2-alpaca-theme/blob/master/Snowdog_Components/README.md) - * [Alpaca Components preview](https://magento2-alpaca-theme-git-master-snowdog1.vercel.app/) - * [Theme inheritance magento docs](https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/themes/theme-inherit.html) - * [Layout instructions magento docs](https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/layouts/xml-instructions.html) -**** -2021 **[SNOW.DOG](https://www.snow.dog)** diff --git a/docs/guide/getting-started/alpaca-setup-guide.md b/docs/guide/getting-started/alpaca-setup-guide.md new file mode 100644 index 000000000..b87c0451f --- /dev/null +++ b/docs/guide/getting-started/alpaca-setup-guide.md @@ -0,0 +1,357 @@ +# Alpaca Setup Guide +In this guide we will be covering how to set up Alpaca and create Alpaca Child Theme in an existing Magento project. + +If you need to help with setting up Magento project, check our [Magento 2 Setup Guide](/guide/getting-started/magento-setup-guide.html). + +## Requirements +* Magento `2.4` project +* Node `>=16 <17.0.0` +* [yarn](https://yarnpkg.com/) (we recommend yarn but you can also use npm to install dependencies and run node commands) + +## Set up Alpaca Automatically +Use [Create Alpaca Theme](https://www.npmjs.com/package/@snowdog/create-alpaca-theme) to automatically: +* Install Alpaca on your existing Magento 2.4 project +* Create Alpaca Child Theme +* Set up [frontools](/guide/working-with-alpaca/frontools.html) +* Add exemplary Alpaca content elements to data base (optional) + +**Simply run in your Magento project root:** +```shell +npx @snowdog/create-alpaca-theme +``` +[Check more info here.](https://www.npmjs.com/package/@snowdog/create-alpaca-theme) + +## Set up Alpaca Manually +This is a step-by-step guide on how to install Alpaca and Alpaca Child Theme. It covers the same steps that are done automatically [here](#set-up-alpaca-automatically). + +The guide is adjusted for Theme Alpaca `>= 2.26.0`. + +### Set up Alpaca Theme +::: info + When using **Valet Plus** run commands in main project directory, with **Warden** remember to launch shell session see [Warden usage and common commands](https://docs.warden.dev/usage.html) +::: + +1. Add Snowdog Alpaca Packages: + ```shell + composer require snowdog/module-alpaca-packages + ``` + See [content of Alpaca Packages here](https://github.com/SnowdogApps/magento2-alpaca-packages) +2. Install Alpaca Theme latest version: + ```shell + composer require snowdog/theme-frontend-alpaca:^2.26 + ``` +3. Add frontools: + ```shell + composer require snowdog/frontools + ``` + [Learn about Frontools here](https://github.com/SnowdogApps/magento2-frontools) +4. Run db queries to add to your database all Alpaca CMS block & content + [Copy db queries from here](https://github.com/SnowdogApps/create-alpaca-theme/blob/master/templates/database/queries.sql) + +5. Upgrade application, DB data and schema (_[learn more here](https://devdocs.magento.com/guides/v2.4/install-gde/install/cli/install-cli-subcommands-db-upgr.html#instgde-cli-db-upgr)_): + ```shell + bin/magento setup:upgrade + ``` +6. Setup frontools + * In `dev/tools/frontools/config` create files: + 1. `theme.json` + ```json + { + "alpaca": { + "src": "vendor/snowdog/theme-frontend-alpaca", + "dest": "pub/static/frontend/Snowdog/alpaca", + "locale": ["en_US"], + "ignore": [ + "**/node_modules/**", + "**/Snowdog_Components/docs/**", + "**/Snowdog_Components/build/**" + ] + } + } + ``` + + 2. `browser-sync.json` + ```json + { + "proxy": ".test", + "rewriteRules": [ + { + "match": "..test", + "replace": "" + } + ] + } + ``` + Replace `` + + * Go to `vendor/snowdog/frontools` and run commands: + ```shell + yarn + yarn setup + yarn styles && yarn svg && yarn babel + ``` + Setting up frontools creates a convenient symlink `tools` in the project root directory. + +7. In Admin go to `Content -> Design -> Configuration`, and choose Alpaca Theme + ::: tip + * You can find admin page URL in `app/etc/env.php` file in `backend` section (`frontName` parameter) + + * You can create a new admin user by using magento CLI: + ```shell + bin/magento admin:user:create --admin-user="YOUR_USER_NAME" --admin-password="YOUR_PASS" --admin-firstname="Test" --admin-lastname="Test" --admin-email="test@test.com" + ``` + ::: +8. Flush cache storage - `System -> Tools -> Cache Management` or run command below: + ``` + bin/magento cache:flush + ``` +9. Run Alpaca Components locally + - Go to `vendor/snowdog/theme-frontend-alpaca/Snowdog_Components` + - Run `yarn` to install node dependencies + - Run `yarn dev` and check localhost to see Alpaca Components +
+ +Congrats! You've installed Alpaca Theme successfully! 🎉 + +### Set up Alpaca Child Theme +After installing Alpaca theme, you can create child theme based on Alpaca Theme as a separate composer package (in `vendor` directory) or in `app/design/frontend` directory. +In this guide, we will create it in `app/design/frontend`. + +1. Go to `app/design/frontend` and create directories with your Vendor name and with you theme name: `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME`, example: `app/design/frontend/Snowdog/alpaca-child` +2. Create configuration files in `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME`: + 1. `registration.php`: + ```php + + CHILD_THEME_NAME + Snowdog/alpaca + + preview.jpg + + + ``` + Replace `CHILD_THEME_NAME` + +3. Copy `vendor/snowdog/theme-frontend-alpaca` files: +* `.editorconfig` +* `.eslintignore` +* `.gitignore` +* `preview.jpg` +You can create also `README.md` and `CHANGELOG.md` files. + +4. Add Alpaca styles + 1. `app/design/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components/components/Atoms/variables/_CHILD_THEME_NAME-variables.scss` + + You can add there base variables or overwrite those from Alpaca (`vendor/snowdog/theme-frontend-alpaca/Snowdog_Components/components/Atoms/variables/_variables.scss`) + ::: warning + Don't use `!default` flag when changing Alpaca variables values + ::: + + 2. `app/design/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components/docs/styles/styles.scss` + ```scss + // Variables + @import '../../components/Atoms/variables/variables'; + + // Child theme variables (imported after alpaca variables) + @import "../../components/Atoms/variables/CHILD_THEME_NAME-variables"; + + // Components + @import '../../components/styles/critical'; + @import '../../components/styles/non-critical'; + + // Styles necessary only for Fractal purposes + @import 'fractal'; + ``` + + 3. `app/design/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components/docs/styles/checkout.scss` + ```scss + // Variables + @import '../../components/Atoms/variables/variables'; + + // Child theme variables + @import "../../components/Atoms/variables/CHILD_THEME_NAME-variables"; + + // Components + @import '../../components/styles/critical-checkout'; + @import '../../components/styles/checkout'; + + // Styles necessary only for Fractal purposes + @import 'fractal'; + ``` + + 4. `app/design/VENDOR_NAME/CHILD_THEME_NAME/styles/styles.scss` + ```scss + // Variables + @import '../Snowdog_Components/components/Atoms/variables/variables'; + + // Child theme variables + @import "../Snowdog_Components/components/Atoms/variables/CHILD_THEME_NAME-variables"; + + // Components + @import '../Snowdog_Components/components/styles/non-critical'; + + // Theme partials + @import '../Amasty_Storelocator/styles/module'; + @import '../Amasty_GiftCard/styles/module'; + @import '../Magento_Ui/styles/module'; + @import '../Magento_Catalog/styles/module'; + @import '../Magento_Customer/styles/module'; + @import '../VladimirPopov_WebForms/styles/module'; + @import '../Magento_PageBuilder/styles/module'; + @import '../Magento_QuickOrder/styles/module'; + @import '../Yotpo_Yotpo/styles/module'; + @import '../Magento_Msrp/styles/module'; + @import '../PayPal_Braintree/styles/module'; + @import '../Magento_ReCaptchaFrontendUi/styles/module'; + @import '../Magento_Theme/styles/module-non-critical'; + + // Show sections hidden in critical.scss + .page-main, + .footer { + display: block !important; + } + ``` + + 5. `app/design/VENDOR_NAME/CHILD_THEME_NAME/styles/critical.scss` + ```scss + // Variables + @import '../Snowdog_Components/components/Atoms/variables/variables'; + + // Child theme variables + @import "../Snowdog_Components/components/Atoms/variables/CHILD_THEME_NAME-variables"; + + // Components + @import '../Snowdog_Components/components/styles/critical'; + @import '../Magento_Theme/styles/module-critical'; + + // Hide non-critical sections, before loading full stylesheet + .page-main, + .footer, + .breadcrumbs { + display: none; + } + ``` + 6. `app/design/VENDOR_NAME/CHILD_THEME_NAME/styles/critical-checkout.scss` + ```scss + // Variables + @import '../Snowdog_Components/components/Atoms/variables/variables'; + + // Child theme variables + @import "../Snowdog_Components/components/Atoms/variables/CHILD_THEME_NAME-variables"; + + // Components + @import '../Snowdog_Components/components/styles/critical-checkout'; + @import '../Magento_Theme/styles/module-critical'; + + // Hide non-critical sections, before loading full stylesheet + .page-main, + .footer, + .breadcrumbs { + display: none; + } + + ``` + 7. `app/design/VENDOR_NAME/CHILD_THEME_NAME/Magento_Checkout/styles/checkout.scss` + ```scss + // Mixins + @import '../../Snowdog_Components/components/styles/mixins'; + + // Component variables + @import '../../Snowdog_Components/components/Atoms/variables/variables'; + // Child theme variables + @import "../../Snowdog_Components/components/Atoms/variables/CHILD_THEME_NAME-variables"; + + // Components partials for checkout + @import '../../Snowdog_Components/components/styles/checkout'; + + // Theme partials for checkout + @import '../../Amasty_GiftCard/styles/module'; + @import '../../Magento_Msrp/styles/module'; + @import '../../Magento_Ui/styles/module'; + @import '../../Magento_PageBuilder/styles/module'; + @import '../../Magento_ReCaptchaFrontendUi/styles/module'; + @import '../../Magento_Theme/styles/module-non-critical'; + @import '../../PayPal_Braintree/styles/module'; + + // Show sections hidden in critical.scss + .page-main, + .footer { + display: block !important; + } + ``` + +5. Create Components + 1. Copy (`vendor/snowdog/theme-frontend-alpaca/Snwodog_Components`) files: + * `.browserslistrc` + * `.editorconfig` + * `.eslintignore` + * `.eslintrc.json` + * `.node-version` + * `.sass-lint.yml` + * `.stylelintrc` + * `gulpfile.mjs` + * `package.json` + + 2. in `package.json` and `gulpfile.mjs` replace `Alpaca` name to `CHILD_THEME_NAME` + 3. Set inheritance from Alpaca components by creating `modules.mjs` file with following content: + ```js + export default [ + "../../../../../../vendor/snowdog/theme-frontend-alpaca/Snowdog_Components" + ] + ``` + 4. Run `yarn` to install dependencies + 5. Run `yarn dev` to work with components in dev mode. + +6. Add the new theme to `dev/tools/frontools/themes.json` + ```json + { + "alpaca": { + "src": "vendor/snowdog/theme-frontend-alpaca", + "dest": "pub/static/frontend/Snowdog/alpaca", + "locale": ["en_US"], + "ignore": [ + "**/node_modules/**", + "**/Snowdog_Components/docs/**", + "**/Snowdog_Components/build/**" + ] + }, + "YOUR_THEME_NAME": { + "src": "app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME", + "dest": "pub/static/frontend/VENDOR_NAME/CHILD_THEME_NAME", + "parent": "alpaca", + "locale": ["en_US"], + "ignore": [ + "**/node_modules/**", + "**/Snowdog_Components/docs/**", + "**/Snowdog_Components/build/**" + ] + } + } + ``` +7. Upgrade application, DB data and schema: + ```shell + bin/magento setup:upgrade + ``` +8. Frontools are already installed with Alpaca theme, so after update config, go to `/tools`and run: + ````shell + yarn styles && yarn svg && yarn babel + ```` +10. Log in to the admin panel. +11. In Admin go to `Content -> Design -> Configuration`, and choose the new theme +12. Flush cache storage: + ```shell + bin/magento cache:flush + ``` +Congrats! You've created Alpaca Child Theme successfully! 🎉 diff --git a/docs/magento-setup-guide.md b/docs/guide/getting-started/magento-setup-guide.md similarity index 89% rename from docs/magento-setup-guide.md rename to docs/guide/getting-started/magento-setup-guide.md index d9bf2edbb..ee773b340 100644 --- a/docs/magento-setup-guide.md +++ b/docs/guide/getting-started/magento-setup-guide.md @@ -1,32 +1,21 @@ -# Magento 2 setup guide -It's a quick guide to setup Magento 2 project on your local environment and configure it for development purposes. +# Magento 2 Setup Guide +If you have Magento already set up, you can skip this guide. -## Table of Contents - * [Requirements](#requirements) - * [Install and configure Magento 2](#install-and-configure-magento-2) - * [Configure with Valet Plus](configure-with-valet-plus) - * [Configure with Warden](configure-with-warden) - * [Configuration for development purposes](configuration-for-development-purposes) +To make working in local environment easier, we recommend using one of the tools listed below: + * [Valet+](https://github.com/weprovide/valet-plus/wiki) - works on macOS. It doesn't use Vagrant or Docker but configures your Mac to always run Nginx in the background when your machine starts. + * [Warden](https://docs.warden.dev/) - works on MacOS, Linux and Windows (WSL). It's based on Docker containers. + +Of course you can run Magento 2 projects without those tools _(see [Magneto 2 docs](https://devdocs.magento.com/guides/v2.4/install-gde/composer.html))_, however in this guide we will be covering set up with Valet+ and Warden. ## Requirements -* Before we start, make sure you meet the requirements needed to run Magento 2.4 projects: +Make sure: +* You meet requirements needed to run Magento 2.4 projects: * See [system requirements](https://devdocs.magento.com/guides/v2.4/install-gde/system-requirements.html) * See [complete guide of prerequisites necessary to run Magento 2](https://devdocs.magento.com/guides/v2.4/install-gde/prereq/prereq-overview.html) +* You have Valet+ or Warden successfully installed -* To make working in local environment easier, I recommend using one of tools listed below: - - * See [Valet Plus wiki](https://github.com/weprovide/valet-plus/wiki) - works on macOS - * See [Warden 2 docs](https://docs.warden.dev/installing.html#prerequisites) - works on macOS, Linux and Windows - -* Of course you can run Magento 2 projects without those tools _(see [Magneto 2 docs](https://devdocs.magento.com/guides/v2.4/install-gde/composer.html))_, however in this tutorial we will be covering set up with Valet Plus and Warden. - -## Install and configure Magento 2 -Local environment setup with Valet+ or Warden. Working env with one of those tools is required to move forward with this guide. - -### Configure with Valet Plus -(_For configuration with Warden see paragraph below_)
-Valet+ is a development environment for macOS. It doesn't use Vagrant or Docker but configures your Mac to always run Nginx in the background when your machine starts. - +## Installation +### Valet+ 1. Install Magento 2 Community Edition in your valet directory ``` composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition @@ -191,10 +180,7 @@ Valet+ is a development environment for macOS. It doesn't use Vagrant or Docker valet secure ``` -### Configure with Warden -(_If you're using Valet Plus, skip to next paragraph_)
-Warden is a similar to Valet+ for setting up local project environment. As opposed to Valet+, Warden works on MacOS, Linux and Windows (WSL). It's based on Docker containers.
-See [Warden Magento 2 docs.](https://docs.warden.dev/environments/magento2.html) +### Warden 1. Install Magento 2 ``` composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition @@ -396,7 +382,9 @@ See [Warden Magento 2 docs.](https://docs.warden.dev/environments/magento2.html) * See Warden [databse documentation.](https://docs.warden.dev/configuration/database.html) * Make sure database section in `env.php ` file is properly set. -### Configuration for development purposes (for both Valet+ and Warden env): +## Configuration for development purposes +The following steps are common for Valet+ and Warden. + 1. Disable 2FA and CSP for development purposes - run: ``` bin/magento module:disable Magento_TwoFactorAuth Magento_Csp diff --git a/docs/guide/getting-started/which-version-should-i-use.md b/docs/guide/getting-started/which-version-should-i-use.md new file mode 100644 index 000000000..b364f9c51 --- /dev/null +++ b/docs/guide/getting-started/which-version-should-i-use.md @@ -0,0 +1,10 @@ +# Which version should I use? + +| Magento Version | Alpaca Latest Version | +| --------------- |:---------------------:| +| 2.4.3 | 2.26.0 | +| 2.4.2 | 2.24.1 | +| 2.4.1 | 2.13.0 | +| 2.3.6 | 2.12.* | + +Check [changelog](https://github.com/SnowdogApps/magento2-alpaca-theme/blob/master/CHANGELOG.md) for more information.
diff --git a/docs/guide/index.md b/docs/guide/index.md new file mode 100644 index 000000000..b5a6b41d0 --- /dev/null +++ b/docs/guide/index.md @@ -0,0 +1,9 @@ +# Overview +Alpaca is a Magento 2 Theme built on top of Alpaca [design system](https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/) crafted for ecommerce. + +## Demos +* [Magento Open Source](https://alpaca-community.snowdog.dev/)
+* [Adobe Commerce](https://alpaca-commerce.snowdog.dev/)
+ +## Component Library +[Browse Alpaca Components](https://magento2-alpaca-theme.vercel.app/)
diff --git a/docs/guide/introduction/alpaca-packages.md b/docs/guide/introduction/alpaca-packages.md new file mode 100644 index 000000000..079f1b154 --- /dev/null +++ b/docs/guide/introduction/alpaca-packages.md @@ -0,0 +1,94 @@ +# Alpaca Packages +Alpaca Theme is a part of [Alpaca Packages](https://github.com/SnowdogApps/magento2-alpaca-packages) - a set of open source modules that are required for some of Alpaca's base features. + +## Snowdog Menu +[snowdog/module-menu](https://github.com/SnowdogApps/magento2-menu)
+ +* Gives greater control over site navigation menus than native Magento 2 offers. Provides a drag-and-drop interface to build menus with links to categories, products, CMS pages, or custom URLs in the admin. +* Used for desktop, mobile and footer menus. Example content can be imported with [these database queries](https://github.com/SnowdogApps/create-alpaca-theme/blob/master/templates/database/queries.sql). +* You can modify the look of menu items by including Alpaca CSS classes in menu nodes configuration. + + For example: to create a column, add a menu node with type "wrapper" and classes `list__column list__column--hidden`. + + Check [Mega Menu](https://magento2-alpaca-theme.vercel.app/components/detail/mega-menu.html), [Side Menu](https://magento2-alpaca-theme.vercel.app/components/detail/side-menu.html) and [Footer](https://magento2-alpaca-theme.vercel.app/components/detail/footer--default.html) to see more options. + +![expanded-menu-1](/images/expanded-menu-1.webp) +![expanded-menu-2](/images/expanded-menu-2.webp) +![menu-configuration](/images/menu-configuration.png) + +## Snowdog Product Bullet Points +[snowdog/module-bullet-points](https://github.com/SnowdogApps/magento2-bullet-points)
+ +Allows for additional product content on the category page list view to provide customers with more information about each product. + +![product-bullets](/images/product-bullets.webp) + +## Snowdog Shipping Latency +[snowdog/module-shipping-latency](https://github.com/SnowdogApps/magento2-shipping-latency)
+ +Replaces default "In Stock/Out of Stock" indicators on category and product detail pages with custom labels to give customers more insight into the availability of products. +Displays popup content when stock indicator is clicked to inform customers about low stock, back in stock dates, delivery lead times, or any other messaging. +* [Theme implementation for Catalog](https://github.com/SnowdogApps/magento2-alpaca-theme/tree/master/Magento_Catalog/templates/product/list.phtml) +* [Theme implementation for PDP](https://github.com/SnowdogApps/magento2-alpaca-theme/tree/master/Magento_Catalog/templates/product/view/shipping-latency.phtml) + + +![stock-status-1](/images/stock-status-1.webp) +![stock-status-2](/images/stock-status-2.webp) + +## Snowdog Product Attribute Descriptions +[snowdog/module-product-attribute-description](https://github.com/SnowdogApps/magento2-product-attribute-description)
+ +Allows for including a "More information" button next to attributes in category and search page layered navigation to explain what each attribute means to help guide customers. + +* [Theme implementation for catalog tooltip](https://github.com/SnowdogApps/magento2-alpaca-theme/tree/master/Smile_ElasticsuiteCatalog/templates/layer/filter/attribute.phtml) +* [Theme implementation for swatches](https://github.com/SnowdogApps/magento2-alpaca-theme/tree/master/Magento_Swatches/templates/product/layered/renderer.phtml) +* [Theme implementation for range filter](https://github.com/SnowdogApps/magento2-alpaca-theme/tree/master/Smile_ElasticsuiteCatalog/templates/layer/filter/slider.phtml) + +![attribute-description](/images/attribute-description.png) + +## Snowdog Category Bottom Descriptions +[snowdog/module-category-attributes](https://github.com/SnowdogApps/magento2-category-attributes)
+ +Allows adding content to the bottom of a category to help guide user experience and improve SEO. + +![category-bottom-descriptions-1](/images/category-bottom-descriptions-1.webp) + +## Snowdog CSP +[snowdog/module-csp](https://github.com/SnowdogApps/magento2-module-csp)
+ +Adds CSP rules for resources utilized in Alpaca. + +## Snowdog WishList Unlocker +[snowdog/module-wishlist-unlocker](https://github.com/SnowdogApps/magento2-wishlist-unlocker)
+ +Allows adding more than 3 products to the wishlist. Gives the ability to set the limit inside Magento whishlist configuration. + +## Snowdog Alpaca General +[snowdog/module-alpaca-general](https://github.com/SnowdogApps/magento2-alpaca-general)
+ +Includes some general Alpaca adjustments and fixes. + +## Smile ElasticSuite Search +[smile/elasticsuite](https://github.com/Smile-SA/elasticsuite)
+ +Provides out the box a lot of features usually only available with proprietary merchandising tools. + +## MagePal SMTP Extension +[magepal/magento2-gmailsmtpapp](https://github.com/magepal/magento2-gmail-smtp-app)
+ +Send all transactional emails using Google App, Gmail, Amazon Simple Email Service (SES), Microsoft Office365 or any other SMTP servers. + +## MagePal Google Tag Manager +[magepal/magento2-googletagmanager](https://github.com/magepal/magento2-google-tag-manager)
+ +Makes Google Tag Manager easier. + +## MailChimp +[mailchimp/mc-magento2](https://github.com/mailchimp/mc-magento2)
+ +Syncs all data (subscriber, customers, orders, products) and enables marketing automation with email campaigns, automations, ads, postcards and more. + +## Matrixrate Shipping +[webshopapps/module-matrixrate](https://github.com/webshopapps/module-matrixrate)
+ + Gives the ability to define custom shipping methods and rates based on destination, cart, or product data via a CSV. Matrixrates Shipping grants the flexibility to cover custom shipping rates for business needs where standard carriers are more rigid. diff --git a/docs/guide/introduction/browser-support.md b/docs/guide/introduction/browser-support.md new file mode 100644 index 000000000..a1135e42d --- /dev/null +++ b/docs/guide/introduction/browser-support.md @@ -0,0 +1,3 @@ +# Browser support +We support browsers that have more than 1% of market share in North America and Europe.
+[Check the list of compatible browsers.](https://browserslist.dev/?q=PiAxJSBpbiBhbHQtbmEsID4gMSUgaW4gYWx0LWV1) diff --git a/docs/guide/introduction/third-party-module-compatibility.md b/docs/guide/introduction/third-party-module-compatibility.md new file mode 100644 index 000000000..2b1e0d934 --- /dev/null +++ b/docs/guide/introduction/third-party-module-compatibility.md @@ -0,0 +1,24 @@ +# Third-Party Module Compatibility +Besides modules included in [Alpaca Packages](#alpaca-packages), Alpaca supports the following modules: +* **Open source:** + * paradoxlabs/authnetcim + * paradoxlabs/tokenbase + * authorizenet/magento-module-creditcard + * creativestyle/magesuite-magepack + * [snowdog/module-alpaca-acm](https://github.com/SnowdogApps/magento2-alpaca-acm) (Alpaca customisations for paid `blackbird/contentmanager` extension) + * yireo/magento2-webp2 + +* **Paid:** + * amasty/adminactionslog + * amasty/module-gdpr + * amasty/module-gift-card + * amasty/module-google-rich-snippets + * amasty/module-product-feed + * amasty/module-shipping-rules + * amasty/module-special-promo + * amasty/module-store-locator + * amasty/payrestriction + * amasty/shiprestriction + * apptrian/facebook-pixel + * blackbird/contentmanager + * vladimirpopov/webforms diff --git a/docs/migration-guide.md b/docs/guide/migration-guide.md similarity index 75% rename from docs/migration-guide.md rename to docs/guide/migration-guide.md index bfec6665b..03b5e8f05 100644 --- a/docs/migration-guide.md +++ b/docs/guide/migration-guide.md @@ -1,6 +1,13 @@ -# Migration guide for Alpaca theme >= 2.26.0 +# Migration guide +## >= 2.26.0 -## New files +### Tools +You can use [this helper](https://github.com/SnowdogApps/theme-alpaca-upgrade-helper) to update child theme styles to Alpaca version >= 2.26.0 automatically. + +Then move to [this](#start-here-when-using-upgrade-helper) step. + +### Step by step guide +**New files overview** ``` theme-frontend-alpaca/ ├── styles/ @@ -24,11 +31,6 @@ theme-frontend-alpaca/ └── _module-non-critical.scss ``` -## Tools -You can use [this helper](https://github.com/SnowdogApps/theme-alpaca-upgrade-helper) to update child theme styles to Alpaca version >= 2.26.0 - -## Step by step guide - 1. Remove `/styles/styles.scss` 2. Copy `critical.scss`, `critical-checkout.scss`, `styles.scss` files from `vendor/snowdog/theme-frontend-alpaca/styles` to `/styles` @@ -99,9 +101,10 @@ Also in `/Snowdog_Components/docs/styles/checkout.scss` // Styles necessary only for Fractal purposes @import 'fractal'; ``` +### [*Start here when using upgrade helper*] 9. Adjust fractal components inheritance: * replace `/Snowdog_Components/modules.json` file with an array of paths to Alpaca components libraries with `modules.mjs` and adjust the content, example: -```mjs +```js export default [ "../../../../../../vendor/snowdog/theme-frontend-alpaca/Snowdog_Components" ] @@ -109,67 +112,35 @@ export default [ * copy content of `vendor/snowdog/theme-frontend-alpaca/Snowdog_Components/gulpfile.mjs` to child theme (`/Snowdog_Components/gulpfile.mjs`) components and adjust child components customisations if needed. 10. Update the following component configuration options in `.config.js` files to their new version: -* `preview: '@checkout'` -> +* `preview: '@checkout'` to: ```js meta: { checkout: true } ``` -* `preview: '@docs-only-styles'` -> +* `preview: '@docs-only-styles'` to: ```js meta: { docsOnlyStyles: true } ``` -## Magento_Theme module -* If you've overwritten `root.phtml` file please adjust content to the newest changes in `theme-frontend-alpaca/Magento_Theme/templates/root.phtml` +11. Remove `Snowdog_Components/components/Atoms/_fonts/_fonts.scss` and add `Snowdog_Components/docs/styles/docs-only-styles/_fonts.scss` instead -```php -assetRepo->createAsset('css/critical-checkout.css')->getContent(); - $inlineStyles = str_replace('../images', $this->getViewFileUrl('images'), $criticalStyles); - $inlineStyles = str_replace('critical.css.map', $this->getViewFileUrl('css/critical-checkout.css.map'), $inlineStyles); - } else { - $criticalStyles = $this->assetRepo->createAsset('css/critical.css')->getContent(); - $inlineStyles = str_replace('../images', $this->getViewFileUrl('images'), $criticalStyles); - $inlineStyles = str_replace('critical.css.map', $this->getViewFileUrl('css/critical.css.map'), $inlineStyles); - } -?> - - - - - - - - -``` +#### Magento_Theme module +* If you've overwritten `root.phtml` file please adjust content to the newest changes in `theme-frontend-alpaca/Magento_Theme/templates/root.phtml` * Styles which use `@extend` rule are moved to `Magento_Theme/styles/_module-critical.scss` and `Magento_Theme/styles/_module-non-critical.scss` -## Minicart +#### Minicart Theme Alpaca `2.26.0` requires [snowdog/module-alpaca-general](https://github.com/SnowdogApps/magento2-alpaca-general): `1.5.0`. We introduced an option to remove quantity input in minicart in `Admin > Store > Configuration > Snowdog > Alpaca General > Mini Cart > Qty`. -## Magepack -In `magepack.config.js` change: -* `Magento_Wishlist/js/add-to-wishlist-mixin` -> `Magento_Wishlist/js/add-to-wishlist-mixin.babel` +#### Magepack +In `magepack.config.js`: +1. Change: +* `Magento_Wishlist/js/add-to-wishlist-mixin` to `Magento_Wishlist/js/add-to-wishlist-mixin.babel` +2. Remove: +* `'Magento_Theme/js/lib/lazysizes.min': 'Magento_Theme/js/lib/lazysizes.min'` +* `'Magento_Theme/js/lib/picturefill.min': 'Magento_Theme/js/lib/picturefill.min'` diff --git a/docs/guide/working-with-alpaca/blog.md b/docs/guide/working-with-alpaca/blog.md new file mode 100644 index 000000000..53d649a29 --- /dev/null +++ b/docs/guide/working-with-alpaca/blog.md @@ -0,0 +1,12 @@ +# Blog +[Demo](https://alpaca-community.snowdog.dev/blog) + +## Installation +Required modules: +* [Blackbird Advanced Content Manager](https://www.advancedcontentmanager.com/) +* [snowdog/module-alpaca-acm](https://github.com/SnowdogApps/magento2-alpaca-acm) + +After modules installation import content types from [Snowdog Alpaca ACM /imports directory](https://github.com/SnowdogApps/magento2-alpaca-acm/tree/master/imports) in `Admin -> Content -> Content Manager -> Content Types -> Import Content Types button`. +## Usage +* Add articles in `Admin -> Content -> Contents -> Articles` +* Blog will be available under [/blog](https://alpaca-community.snowdog.dev/blog) diff --git a/docs/guide/working-with-alpaca/components.md b/docs/guide/working-with-alpaca/components.md new file mode 100644 index 000000000..96e929597 --- /dev/null +++ b/docs/guide/working-with-alpaca/components.md @@ -0,0 +1,196 @@ +# Components +Theme Alpaca styles are based on reusable components. They're created in a simplified, front-end developer friendly environment to speed up the process of working with design on Magento 2 stores. + +Alpaca Components are built inside Theme Alpaca (`Snowdog_Components` directory) - it isn't a separate composer package or git repository. + +## Browse Components Locally + +In `Snowdog_Components` directory (inside Alpaca or Alpaca Child Theme) run: +```` +yarn && yarn dev +```` +Then go to http://localhost:4000/ and start exploring 🎉 + +::: tip +Check [Alpaca Setup Guide](/guide/getting-started/alpaca-setup-guide.html) for more details. +::: +## Core Concepts +### Styles +Styles are written in [Sass](https://sass-lang.com/). They're **used across Magento Theme**. + +### Fractal +Components are built with [Fractal](https://fractal.build/) using [Handlebars](https://handlebarsjs.com/). JS scripts and `.hbs` templates are only for Fractal purpose and they are **not used in Magento**. +### Architecture +``` +theme-frontend-alpaca/ +├── Snowdog_Components/ +│ ├── components/ +│ │ ├──Atoms/ +│ │ ├──Molecules/ +│ │ ├──Organisms/ +│ │ ├──Templates/ +│ │ ├──styles/ +│ │ │ ├── _critical.scss +│ │ │ ├── _non-critical.scss +│ │ │ ├── _checkout.scss +│ │ │ ├── _critical-checkout.scss +│ │ │ └── ... +``` + +**Components are divided into 4 groups based on [Atomic Design](http://atomicdesign.bradfrost.com/chapter-2/) system:** +1. **Atoms** + - Contains code that other components can use in any place, for example, typography, icons or SASS variables. +2. **Molecules** + - Smallest UI parts, for example, buttons + - Molecules can't depend on other molecule + - Molecules shouldn't have any layout +3. **Organisms** + - More complex UI parts like search form or header + - Takes Molecules or other Organisms and combine them together adding layout and context +4. **Templates** + - Takes Molecules or Organisms and combine them together adding final layout and context + - You should be able to show it to client/PM as a preview of ready to use store view + - You shouldn't create any new UI elements, everything needs to be reusable. + +**Component styles are imported in `Snowdog_Components/components/styles` in the appropriate file(s):** +* `_critical.scss` - styles for above-the-fold content that's loaded inline ([learn about Critical CSS](https://web.dev/extract-critical-css/)) +* `_non-critical.scss` - the rest of styles + +The above files aren't loaded in checkout. Instead, there are separate files for checkout: +* `_critical-checkout.scss` checkout styles for above-the-fold content that's loaded inline +* `_checkout.scss` - the rest of checkout styles + +The reason behind it is that checkout requires some unique components. On the other hand, there are a lot of components that are never used in checkout. Loading all component styles on every page would result in a lot of unused CSS. +### Inheritance +Components inside Alpaca Child Theme inherit components from Alpaca Theme. This means that unless component files are overwritten in Child Theme, they're copied from Alpaca during build process. + +### Global Variables +The base of our design system are global variables. They include colors, typography, spacers, breakpoints and more. They're used across components and other modules to maintain visual consistency. They make it easy to customize the general look of the store.
+[Check all variables here](https://github.com/SnowdogApps/magento2-alpaca-theme/blob/master/Snowdog_Components/components/Atoms/variables/_variables.scss). + +### Component Variables +Components have most of the styles defined with variables. You can change the look of components by overriding these variables. Component variables simplify the process of design customization. They significantly reduce the need for overriding styles which helps to save time and keep the code clean. + +## Component Notes +More complex components include a `README.md`. You can find there information about usage, features and a11y implementation. In Fractal UI they're available in `Notes` tab. + +## Accessibility +Components are tested with [axe-core](https://github.com/dequelabs/axe-core). The results are displayed as a console output in browser tools. +A11y test files are located in in `Snowdog_Components/public/tests`. + +## Customization +### Global Variables +* Create `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components/components/Atoms/variables/_CHILD_THEME_NAME-variables.scss` +* Modify any [Alpaca variable values](https://github.com/SnowdogApps/magento2-alpaca-theme/blob/master/Snowdog_Components/components/Atoms/variables/_variables.scss) or create new ones. +* Import the file after Alpaca variables (search `// Variables` in Theme Alpaca to find all of the files that require variables import). +::: warning +In child theme don't use `!default` flag when changing variables declared in Alpaca theme or creating new variables for your needs. +::: +### Component styles +**As an example, here's how to customize `button` component styles:** + +Button Alpaca component styles can be found in `theme-frontend-alpaca/Snowdog_Components/components/Molecules/button/_button.scss`. + +**1. In your Alpaca Child Theme, create 3 files:** +* `Snowdog_Components/components/Molecules/button/_CHILD_THEME_NAME-button-variables.scss`: + + Here you can overwrite variables from `theme-frontend-alpaca/Snowdog_Components/components/Molecules/button/_button-variables.scss` or add new ones. + ```scss + // Example: change button text color + $button__text-color: $seafoam-blue; + ``` +* `Snowdog_Components/components/Molecules/button/_CHILD_THEME_NAME-button.scss`: + ```scss + // Example: add new button variant + .button { + &--tertiary { + background-color: $seafoam-blue; + } + } + ``` +* `Snowdog_Components/components/Molecules/button/_button-extend.scss`: + ```scss + @import 'CHILD_THEME_NAME-button-variables'; + @import 'button'; // original Alpaca button styles + @import 'CHILD_THEME_NAME-button'; + ``` + +**2. Change all imports of `_button.scss` to `_button-extend.scss`:** +::: tip +To check where button styles are imported, you can use global search in your IDE. In this case, search `/button'` in `theme-frontend-alpaca`. +::: +* Copy `vendor/snowdog/theme-frontend-alpaca/Snowdog_Components/components/styles/_critical-checkout.scss` to your Child Theme and change line `@import '../Molecules/button/button';` to `@import '../Molecules/button/button-extend';` +* Copy `vendor/snowdog/theme-frontend-alpaca/Snowdog_Components/components/styles/_critical.scss` to your Child Theme and change line `@import '../Molecules/button/button';` to `@import '../Molecules/button/button-extend';` + +### Component configuration file +Data from `.config.js` is used inside `.hbs` template. To change some values, copy `.config.js` to Child Theme and adjust. Follow the same file structure as in Alpaca. + +### Component template +Copy component `hbs` file to Child Theme and add customizations there. Follow the same file structure as in Alpaca. + + +## Good practices +1. **Classes naming** + + Use [BEM](https://css-tricks.com/bem-101/). +2. **Components Naming**
+ * Group name needs to be plural + * Component name needs to be singular + * Component name shouldn't be related to any project or place in the layout + - Bad: `top-banner` + - Good: `dropdown-list` or `collapsible-list` + * Avoid using `box`, `block`, `item`, `info`, `text`, `cms`, especially combined together, for example `info-box` + * Avoid naming two components in a similar way i.e. `cms-subcategories` and `cms-subcategory` +3. **SASS Variables Naming**
+ Follow BEM-like naming convention, i.e. in `button` component, a variable for button `padding` should be called `$button__padding`. + + Same as in BEM, you are not allowed to use multiple `__`, i.e. instead of `$button__icon__padding` call the variable `$button__icon-padding`. + + Variables related to the pseudo-classes and pseudo-selectors should be treated as a BEM elements `$button__color-hover`. + + Also, BEM modifiers are allowed in variables, i.e. `$button__padding--secondary` for `button` component secondary variant. + + For variables used in specific breakpoints, add `\@breakpoint` at the end of the variable name, i.e. `$button__padding\@medium`. Always use `small`, `medium`, `large` etc. to describe the breakpoint. + + Examples of proper variables names: + ```scss + $swatch__option-border + $swatch__option-border-color-hover + + $swatch__option-image-height\@large + + $swatch__option-size--small + $swatch__option-image-width--small + $swatch__option-image-width--small\@large + ``` +4. **Use global variables instead of hard coded values.**
+ This makes the design more consistent and the project easier to maintain. +5. **Use component variables if possible to change component's styling.**
+ Components in Theme Alpaca have most of the styles defined with variables. So instead of overriding the styles, change variable values. [Example - Badge](https://github.com/SnowdogApps/magento2-alpaca-theme/tree/master/Snowdog_Components/components/Molecules/badge). Write additional CSS only if variables don't cover your needs. +6. **Don't use component specific variables in other components.**
+7. **Don't base mixins on component specific variables.**
+8. **Don't use `@extend` between components** (unless it's based on placeholders, and those placeholders are not tightly coupled with components).
+ + +## JavaScript +::: warning +Component JS files are only used inside Fractal. For Magento, we need to build JS files using RequireJS. +::: +### Add JS to Component +Component related js is loaded inside `hbs` files. +```js + +``` +If a component that contains JS file is required by other component, we are using `script` variable defined in `config.js`. This helps to avoid problems with duplicated declaration of JS files. +``` +{{#if script}} + +{{/if}} +``` + +### Common JS +Above method is recommended for most JS scripts used in components, but requires additional config which can be complex, especially in the `Templates`. There can be multiple components that contain the same JS file. A good example of this kind of JS is `dropdown-list.js`. In one `Template` it's used in sidemenu, header minicart, filters and footer. + +To avoid problems with complex configs and duplicated declarations of JS files, there's `Atoms/common-js` component. `common-js.hbs` contains scripts that are reused multiples times across the same views. This file is loaded globally. + +Do not use `common-js` component for library files and for JS scripts created in components that are not loaded multiple time on the same views. diff --git a/docs/guide/working-with-alpaca/fonts.md b/docs/guide/working-with-alpaca/fonts.md new file mode 100644 index 000000000..25ae284e5 --- /dev/null +++ b/docs/guide/working-with-alpaca/fonts.md @@ -0,0 +1,21 @@ +# Fonts +This guide explains how to change fonts in Alpaca Child Theme. + +1. Add fonts to `web/fonts` directory +2. Copy `Magento_Theme/templates/root.phtml` from Alpaca Theme +3. In `Magento_Theme/templates/root.phtml`: + * Swap preloaded Alpaca font files with the new ones + * Swap `@font-face` rules in ` \ No newline at end of file diff --git a/docs/images/stock-status-1.webp b/docs/images/stock-status-1.webp new file mode 100644 index 000000000..d938f78d0 Binary files /dev/null and b/docs/images/stock-status-1.webp differ diff --git a/docs/images/stock-status-2.webp b/docs/images/stock-status-2.webp new file mode 100644 index 000000000..6181cddf6 Binary files /dev/null and b/docs/images/stock-status-2.webp differ diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 000000000..4c27f55f3 --- /dev/null +++ b/docs/index.md @@ -0,0 +1,28 @@ +--- +home: true +heroImage: /logo.svg +heroAlt: Alpaca logo +actionText: Get Started +actionLink: /guide/ +altActionText: Install +altActionLink: /guide/getting-started/alpaca-setup-guide + +features: + - title: 📝 Component-based + details: Built on top of a collection of reusable components - guided by clear rules to ensure design consistency. + - title: 📚 Feature-rich + details: Comes in a package with a set of modules. Compatible with the majority of Magento OS and Adobe Commerce features. + - title: ⚡️ Fast Child Theme Setup + details: Create Alpaca Child Theme in your Magento project by running one command. + - title: 🎨 Themable + details: Gives a lot of flexibility to customize the look of the store. + - title: ♿️ Accessible + details: WCAG AA level compliant + - title: 💅 Polished + details: We've put a lot of work into the little things. + +footer: MIT Licensed | Copyright © 2017-present Snowdog +--- +
+ Snowdog Logo +
diff --git a/docs/package.json b/docs/package.json new file mode 100644 index 000000000..465690d37 --- /dev/null +++ b/docs/package.json @@ -0,0 +1,18 @@ +{ + "name": "alpaca-docs", + "private": true, + "scripts": { + "docs:dev": "vitepress dev .", + "docs:build": "vitepress build .", + "docs:serve": "vitepress serve ." + }, + "engines": { + "node": ">=14.13 <17" + }, + "volta": { + "node": "16.13.1" + }, + "devDependencies": { + "vitepress": "^0.22.3" + } +} diff --git a/docs/public/logo.svg b/docs/public/logo.svg new file mode 100644 index 000000000..00ee26dc3 --- /dev/null +++ b/docs/public/logo.svg @@ -0,0 +1 @@ + diff --git a/docs/public/snowdog.png b/docs/public/snowdog.png new file mode 100644 index 000000000..cd369ccff Binary files /dev/null and b/docs/public/snowdog.png differ diff --git a/docs/working-with-alpaca.md b/docs/working-with-alpaca.md deleted file mode 100644 index 08a8a4345..000000000 --- a/docs/working-with-alpaca.md +++ /dev/null @@ -1,417 +0,0 @@ -# Working with Alpaca - -You'll find here information how to work with different features of Alpaca Theme. -For installation details, check [Step by step Alpaca installation guide](./alpaca-step-by-step.md) - -## Table of Contents - * [Requirements](#requirements) - * [Frontools](#frontools) - * [Components](#components) - * [Customisation of Alpaca Components](#alpaca-components-customisation) - * [Customising theme files](#customising-theme-files) - * [Styles](#styles) - * [JS](#js) - * [Images](#images) - * [Responsive images](#responsive-images) - * [Lazyloading images](#lazyloading-images) - * [Preventing images from jumping on load](#preventing-images-from-jumping-on-load) - * [SVG icons](#svg-icons) - * [Sliders](#sliders) - * [Header and Footer](#header-and-footer) - * [Homepage](#homepage) - * [Working with Snowdog Modules](#working-with-snowdog-modules) - * [Magepack](#magepack) - -## Requirements -* Working Magento 2.4.3 -* Node version 16 -* [yarn](https://yarnpkg.com/) (we recommended yarn but you can also use npm to install dependencies and run node command). - -## Frontools - Set of front-end tools for Magento 2. Run commands below in `tools`. - - When developing run comand below to watch for style changes and running processing tasks: - ```` - yarn watch - ```` - - You can also use `yarn dev` to run [browserSync](https://browsersync.io/) and inheritance, babel, styles, watch tasks. - ```` - yarn dev - ```` - **NOTE!** To run `yarn dev`, set correct proxy values in file - `dev/tools/frontools/config/browser-sync.json` - - After every application upgrade (`bin/magento setup:upgrade` command) run: - ```` - yarn styles && yarn svg && yarn babel - ```` - - Config files are kept in `dev/tools/frontools/config`. - - `themes.json` file is essential. It needs to be set properly, without it frontools won't work. See [themes.json example.](https://github.com/SnowdogApps/magento2-frontools/blob/master/config/themes.json.sample) - - Setting up frontools creates symlink, after set up, `yarn` commands are available from `/tools` - - To learn how to fully utilize frontools see [frontools readme.md](https://github.com/SnowdogApps/magento2-frontools#magento-2-frontools) - -## Components - * `theme-frontend-alpaca/Snowdog_Components` it's separate [fractal.build](https://fractal.build/guide/) tool integrated with Alpaca Theme, which allows you to work with Magento UI styles easier and faster. It is not set as a separate composer package (neither separate git repository) to work with Magento theme easier and faster. But you can work on components separately and run them outside of Magento. - * Check it out, go to **Snowdog_Components** (`app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components`), install node dependencies and run dev command: - ```` - yarn - yarn dev - ```` - * Go to `http://localhost:4000/` to play with components. To learn how to change components, **read section below**. - * Component styles in Alpaca follow [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/). Components are divided into Atomic groups, that is: - * Atoms - * Molecules - * Organisms - * Templates
- * Styles written in fractal components are used in Magento theme. JS scripts and hbs templates are only for fractal purpose and they are not used inside Magento theme. - * Check full styles structure in `vendor/snowdog/theme-frontend-alpaca/Snowdog_Components` - * **NOTE!** Detailled instruction how to set child theme inherited from Alapca theme you can find in out [Step by step Alpaca installation guide](./alpaca-step-by-step.md) -## Alpaca Components customisation - - Customising components with variables - * You can overwrite any of Alpaca Components variabales in child theme in - `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components/components/Atoms/variables/_CHILD_THEME_NAME-variables.scss` - * Child theme variables should be imported after Alpaca variables. Use values without `!default` to change variables declared in Alpaca theme or create new variables for your needs. - * You can customise your styles by changing variables values - global or components variables), extending styles by using Alpaca's and custom and overwrite styles by creating totally new styles for components. - * For Components, we use 2 create 2 main `.scss` files in `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components/docs/styles/`: - * `styles.scss` - * `checkout.scss` - * Main `.scss` files are required in child components to use custom child theme's variables. - - Customising components - * Customize or add new files following the same structure as in Alpaca Components. - Create file `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components/components/Molecules/button/_button-extend.scss` - ```scss - @import 'CHILD_THEME_NAME-button-variables'; // optional; - @import 'button'; - @import 'CHILD_THEME_NAME-button'; - ``` - Inside `button-extend.scss`, `CHILD_THEME_NAME-button-variables` is a file where you change component's variable, `button` is an original Alpaca Component style and `CHILD_THEME_NAME-button` contains additional or overwritten by child theme styles.
- * you need to import extended component, to do it, copy file(s) from `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME/Snowdog_Components/components/styles` and change `@import '../Molecules/button/button';` to `@import '../Molecules/button/button-extend';` - * You can overwrite any component in your child theme by maintaining the same file structure (`.hbs`, `config.js`, `.scss`). - * Read more about Alpaca components [here](https://github.com/SnowdogApps/magento2-alpaca-theme/blob/master/Snowdog_Components/README.md) -## Customising theme files - * To customise layout `XML` files and template `.phtml` files, follow Magento theme inheritance [standard.](https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/themes/theme-inherit.html) - * Rememeber that: - * Templates have to be overwritten in child theme - * Layouts can be extended from parent theme, so there is no need for copying and overwriting file. Add, remove, change what you need. -## Styles -Are was mentionned before, Styles in Alpaca are separated: -* Components styles inside `theme-frontend-alpaca/Snowdog_Components` to work with components directly.
- -Those styles are also imported inside the theme in `theme-frontend-alpaca/styles/` directory -* For Magento we need to create 3 main `.scss` files inside child theme: - * `styles.scss` in `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME/styles/styles.scss` where components and theme styles are imported. And where child theme variable are imported after Alpaca variables - * `critical.scss` in `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME/styles/critical.scss` to load basic critical styles for page loading. - * `critical-checkout.scss` in `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME/styles/critical-checkout.scss` to load basic critical styles for checkout page loading. - * `gallery-styles.scss` in `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME/styles/gallery-styles.scss` to load styles for fotorama gallery. - * `checkout.scss` in `app/design/frontend/VENDOR_NAME/CHILD_THEME_NAME/Magento_Checkout/styles/checkout.scss` where components and checkout styles are imported - -* During styles compilation for theme, following directories are ignored: -``` -"**/node_modules/**", -"**/Snowdog_Components/docs/**", -"**/Snowdog_Components/build/**" -``` -It should be added in `themes.json` in [frontools config](#https://github.com/SnowdogApps/magento2-frontools/blob/master/config/themes.json.sample) as ignores files - -## JS -* JS files from components are not imported in theme, they are only demonstrative. For theme we need to build JS files using RequireJS. -* If you use ES6 in theme's js files, you should use babel support, just add `.babel` in file name before `.js` extension, example: [script for tabs](../Magento_Theme/web/js/tab.babel.js) and run `yarn babel` with frontools - -## Images -### Responsive images - -* to display responsive image for banners and slider items, we use: -* template `picture.phtml`: `vendor/snowdog/theme-frontend-alpaca/Magento_Theme/templates/html/picture.phtml` you can adjust it for your needs in the child theme. -* usage of phtml in cms block/page: -``` -{{block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/picture.phtml" img480="" img768="" img960="" img1024="" img1328="" img_full="" picture_class="image" picture_alt="" }} -``` -* by default you can use different image for media query breakpoints, you can also implement images with different device-pixel-ratio, check the template's code for details -* `picture_class` is a required attribute - -## Lazyloading images -We use [lazysizes](https://github.com/aFarkas/lazysizes) in project, so when you implement images with `` tag (ex. in CMS content), use: -* placeholder in `src` attribute: `data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=` -* image url in `data-src` attribute -* `lazyload` class on `` tag - -This solution is already implemented on responsive solution in `picture.phtml` template - -## Preventing images from jumping on load -* to prevent jumping we need aspect ratio of image which we can calculate with formula: $aspectRatio = (imgHeight / imgWidth) * 100 -* usage for single image (with lazyloading): -``` -
- <descriptive alternative text for image> -
-``` -* usage for images added with picture.phtml. To work we need set `img_ratio_width` and `img_ratio_height`: -``` -{{block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/picture.phtml" img_default="cms/home/banners/my-file.jpg" picture_class="image" img_ratio_width="656" img_ratio_height="264"}} -``` -* aspect ratio for responsive images implemented using `picture.phtml`: -If responsive images - images for different viewports - have different aspect ratio than the default image, we should implement each of them: either in picture content type (if blackbird contentmanager is used), or in picture.phtml template. We need to add a unique `id` and `picture_class` attribute, which is required to make it works. -Use additional attributes for responsive aspect ratio: - `img_ratio_width_480` -> for image max-width 480px - `img_ratio_width_768` -> for image max-width 768px - `img_ratio_width_1024` -> for image max-width 1024px - `img_ratio_width_1328` -> for image min-width 1025px - -usage example: -``` -{{block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/picture.phtml" img_768="" img_1024="" img_full="" img_default="" picture_class="image" picture_alt="" img_ratio_width="1200" img_ratio_height="600" img_ratio_width_768="768" img_ratio_height_768="500" img_ratio_width_1024="472" img_ratio_height_1024="376" img_ratio_width_1328="1328" img_ratio_height_1328="1200" id=""}} -``` -!Important Note: -If responsive image aspect ratio is added, additional styles inline are generated, so use it ONLY if needed (if aspect ratio for responsive image is different that for default image) to keep your code as clean as possible. - -## SVG icons - -* {{block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/svg-icon.phtml" icon="" icon_class="icon" title="" role="presentation" focusable="false"}} -* as `icon` value use icon id (Alpaca components) -* as `title` use accessible title that describe the icon image -* base class for icon is `icon` you can add, adjust class according to your needs -* a11y - use role="presentation" and focusable="false" if an icon is only decorative to hide in a11y API tree -## Sliders -Sliders in Alpaca re build with `blackbird/contentmanager` extension
-* There is one template for all sliders. You can find it in [Magento_Theme/templates/html/slider.phtml](../Magento_Theme/templates/html/slider.phtml). It is based on [slick slider](https://kenwheeler.github.io/slick/).
-How to use: -1. If possible define block in xml: -``` - - - //required option with uniq name - - some_slider_name - - - //required option for sliders using content type `pictures` as slides - - some_picture_block_name - - - // optional option used to define slider variant - - some_class_name - - - // optional option used to define classes for slider title - - heading heading--first-level margin-0 - - - - // required block with name parameter same as defined in slider_block argument - - -``` -if not use: -``` -$sliderBlock = $this->getLayout() - ->createBlock("Magento\Framework\View\Element\Template") - ->setTemplate("Magento_Theme::html/slider.phtml"); -``` -2. Initialize "before-slides" block in .phtml file -``` -getSliderBlock(); // -$sliderBlockBefore->setData(['slider_html'=>'before-slides', ...]); -?> -toHtml(); ?> -``` - -"..." - additional config options: -``` -$sliderBlock->setData([ - 'slider_html' => 'before-slides', //required option - 'slider_class' => '', //optional slider class name - 'wrapper_class' => '', //optional slider wrapper class name - 'display_title' => '', //optional bool value - 'slider_title' => '', //optional slider title - 'title_class' => '', //optional slider title class name - 'content_before' => '', //optional content before slides - 'arrows' => '', //optional bool value - 'is_ajax' => '', //bool value - set to true when slides are loaded with ajax - - //below options are optional and described in: [https://kenwheeler.github.io/slick/#settings] - 'infinite' => '', //default true - 'mobile_first' => '', //default true - 'center_mode' => '', //default false - 'dots' => '', //default true - 'autoplay' => '', //default false - 'autoplay_speed' => '', //default 3000 - 'pause_on_focus' => '', //default true - 'pause_on_hover' => '', //default true - 'slides_to_show' => '', //default 1 - 'slides_to_scroll' => '', //default 1 - 'responsive_config' => '', //default false -]); -``` - -3. Render html for slides - -``` - $item) : ?> -
- ... -
- -``` - -4. Initialize "after-slides" block in .phtml file -``` -setData(['slider_html'=>'after-slides', ...]); -?> -toHtml(); ?> -``` - -5. Sliders created using Advanced Content Manager can be placed in any CMS content using Content Manager Content List widget. -Click on "Insert Widget..." button when editing CMS content with wysiwyg editor. Select "Content Manager Content List" as Widget Type. Set options: -"Content Type" -> "Sliders" -"Number of Contents to Display" -> 1 -"Template" -> "Slider Content List Template" -"Condition" -> Slider ID is "your-slider-id" -"Attributes to show" -> not required -Click on "Insert Widget" - -6. Full width variant - -To display slider full width, just add class `slider--full-with`, by extending block `home-slider` with argument `slider_class` in `cms_index_index.xml`. - -## Header and Footer - * To display and customise content in header or footer we use CMS block ([read more](https://docs.magento.com/user-guide/cms/blocks.html)) - * See default structure - `vendor/snowdog/theme-frontend-alpaca/Magento_Theme/layout/default.xml`. -## Homepage - * To display homepage content we use static blocks. - * See default structure - `vendor/snowdog/theme-frontend-alpaca/Magento_Cms/layout/cms_index_index.xml` - -## Working with Snowdog Modules - Snowdog Modules is a set of open source modules used with Alpaca Theme installed via [Magento 2 Alpaca Packages](https://github.com/SnowdogApps/magento2-alpaca-packages). You can find list of installed modules in [README description](../README.md#description) section. - - ### Magento2 menu - snowdog/magento2-menu - * Provides powerful menu editor to replace category based menus in Magento 2. - * Displays desktop menu, mobile menu or footer links menu - * You can use Alpaca styles implementation to use different configuration of menu items, by adding classes to nodes, check Alpaca components for details to build menu's adjusted to your project's needs, for example: to create a column, create node "wrapper" with Node CSS Classes: list__column list__column--hidden - * Example data can be imported [with alpaca db queries](https://github.com/SnowdogApps/create-alpaca-theme/blob/master/templates/database/queries.sql)). - * See [Magento 2 menu details](https://github.com/SnowdogApps/magento2-menu). - ### Shipping latency - snowdog/module-shipping-latency - * It is an extension allowing to display additional informations about shipping time - * Extension work on catalog and product detail page, to customise it you need to set attribute (dropdown) option and create cms block for popup content - * See [Shipping latency module details](https://github.com/SnowdogApps/magento2-shipping-latency). - * [Theme implementation for catalog](../Magento_Catalog/templates/product/list.phtml) - * [Theme implementation for PDP](../Magento_Catalog/templates/product/view/shipping-latency.phtml) - - ### Bullet points - snowdog/module-bullet-points - * Extension is used to display product attributes listed on product list item on catalog page - * See [Bullet points module details](https://github.com/SnowdogApps/magento2-bullet-points). - - ### Category attributes - snowdog/module-category-attributes - * This extension adds a field for additional content on the bottom of catalog page - * See [Category attributes module details](https://github.com/SnowdogApps/magento2-category-attributes). - - ### Product attribute description - snowdog/module-product-attribute-description - * This extension allows to add additional description for attribute, implemented from admin level - * See [Product attribute description module details](https://github.com/SnowdogApps/magento2-product-attribute-description). - * [theme implementation on catalog level as an additional tooltip](../Smile_ElasticsuiteCatalog/templates/layer/filter/attribute.phtml) - * [theme implementation in swatches](../Magento_Swatches/templates/product/layered/renderer.phtml) - * [theme implementation in range filter](../Smile_ElasticsuiteCatalog/templates/layer/filter/slider.phtml) - ### Wishlist unlocker - snowdog/module-wishlist-unlocker - * This extension allows to show more than 3 items in sidebar wishlist (M2 default is 3) - * Limit value can be set in admin: `Store -> Configuration -> Customer -> Wish List -> General Option -> Items Limit` - * See [Wishlist unlocker description module details](https://github.com/SnowdogApps/magento2-wishlist-unlocker). - -## Blog -* we use Blackbird Content Manager `blackbird/contentmanager` for blog - -## Magepack -for Magento version < 2.3.6, mixins.js module patch is required/ [Patch provided and explained here](https://github.com/magento/baler/issues/23) - -Magepack is already integrated with [Frontools](https://github.com/SnowdogApps/magento2-frontools) - -### Generate magepack config -To start using magepack we need to generate magepack config. -Before start: -* clear Magento cache -* compile assest for production mode (in `/tools` directory): -``` -yarn styles --prod && yarn babel --prod && yarn svg -``` -* generate config with command (with appropriate path for each site): -``` -yarn magepackGenerate --cms-url="https://baseUrl/" --category-url="https://baseUrl/categoryPage" --product-url="https://baseUrl/productPage" -``` -Magepack config will be generated in `/tools` as `magepack.config.js` (which is a symlink to vendor/snowdog/frontools/magepack.config.js). -You can move this file to main repo or to other location, add this to `.gitignore` and commit changes. - -With commited magepack config, during deployment, after assets compilation, run magepack bundling: -``` -yarn magepackBundle --config -``` - -### Add assets -* If you added fonts or external assets that can be load with `preload`, add them in: -`vendor/snowdog/theme-frontend-alpaca/Magento_Theme/templates/root.phtml` with `preload` attribute. - -* if assets come from external module which is not always enable, add preload assets in following way: -in module folder inside theme: - * using xml layout add block in `head.additional` and in custom template add assets: - ``` - - ``` - an example can be found here: `vendor/snowdog/theme-frontend-alpaca/Amasty_GdprCookie` - -### Test magepack locally - -To test magepack locally: -* clear and enable cache, -* enable merging, minifying and magepack budnling in your db: -``` -bin/magento config:set dev/js/enable_magepack_js_bundling 1 -bin/magento config:set dev/js/merge_files 1 -bin/magento config:set dev/js/minify_files 1 -bin/magento config:set dev/css/minify_files 1 -bin/magento config:set dev/css/merge_css_files 1 -``` -* run tools compilation for production: -``` -yarn styles --prod && yarn babel --prod && yarn svg -``` -* generate magepack config: -yarn magepackGenerate .. - -* switch to production mode: -``` -bin/magento deploy:mode:set production -``` -* bundle magepack -in `/tools` -``` -yarn magepackBundle --config -``` -* clear cache -* check results in browser diff --git a/docs/yarn.lock b/docs/yarn.lock new file mode 100644 index 000000000..4fe03e6c9 --- /dev/null +++ b/docs/yarn.lock @@ -0,0 +1,541 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +"@algolia/autocomplete-core@1.5.2": + version "1.5.2" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.5.2.tgz#ec0178e07b44fd74a057728ac157291b26cecf37" + integrity sha512-DY0bhyczFSS1b/CqJlTE/nQRtnTAHl6IemIkBy0nEWnhDzRDdtdx4p5Uuk3vwAFxwEEgi1WqKwgSSMx6DpNL4A== + dependencies: + "@algolia/autocomplete-shared" "1.5.2" + +"@algolia/autocomplete-preset-algolia@1.5.2": + version "1.5.2" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.5.2.tgz#36c5638cc6dba6ea46a86e5a0314637ca40a77ca" + integrity sha512-3MRYnYQFJyovANzSX2CToS6/5cfVjbLLqFsZTKcvF3abhQzxbqwwaMBlJtt620uBUOeMzhdfasKhCc40+RHiZw== + dependencies: + "@algolia/autocomplete-shared" "1.5.2" + +"@algolia/autocomplete-shared@1.5.2": + version "1.5.2" + resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.5.2.tgz#e157f9ad624ab8fd940ff28bd2094cdf199cdd79" + integrity sha512-ylQAYv5H0YKMfHgVWX0j0NmL8XBcAeeeVQUmppnnMtzDbDnca6CzhKj3Q8eF9cHCgcdTDdb5K+3aKyGWA0obug== + +"@algolia/cache-browser-local-storage@4.13.0": + version "4.13.0" + resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.13.0.tgz#f8aa4fe31104b19d616ea392f9ed5c2ea847d964" + integrity sha512-nj1vHRZauTqP/bluwkRIgEADEimqojJgoTRCel5f6q8WCa9Y8QeI4bpDQP28FoeKnDRYa3J5CauDlN466jqRhg== + dependencies: + "@algolia/cache-common" "4.13.0" + +"@algolia/cache-common@4.13.0": + version "4.13.0" + resolved "https://registry.yarnpkg.com/@algolia/cache-common/-/cache-common-4.13.0.tgz#27b83fd3939d08d72261b36a07eeafc4cb4d2113" + integrity sha512-f9mdZjskCui/dA/fA/5a+6hZ7xnHaaZI5tM/Rw9X8rRB39SUlF/+o3P47onZ33n/AwkpSbi5QOyhs16wHd55kA== + +"@algolia/cache-in-memory@4.13.0": + version "4.13.0" + resolved "https://registry.yarnpkg.com/@algolia/cache-in-memory/-/cache-in-memory-4.13.0.tgz#10801a74550cbabb64b59ff08c56bce9c278ff2d" + integrity sha512-hHdc+ahPiMM92CQMljmObE75laYzNFYLrNOu0Q3/eyvubZZRtY2SUsEEgyUEyzXruNdzrkcDxFYa7YpWBJYHAg== + dependencies: + "@algolia/cache-common" "4.13.0" + +"@algolia/client-account@4.13.0": + version "4.13.0" + resolved "https://registry.yarnpkg.com/@algolia/client-account/-/client-account-4.13.0.tgz#f8646dd40d1e9e3353e10abbd5d6c293ea92a8e2" + integrity sha512-FzFqFt9b0g/LKszBDoEsW+dVBuUe1K3scp2Yf7q6pgHWM1WqyqUlARwVpLxqyc+LoyJkTxQftOKjyFUqddnPKA== + dependencies: + "@algolia/client-common" "4.13.0" + "@algolia/client-search" "4.13.0" + "@algolia/transporter" "4.13.0" + +"@algolia/client-analytics@4.13.0": + version "4.13.0" + resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-4.13.0.tgz#a00bd02df45d71becb9dd4c5c993d805f2e1786d" + integrity sha512-klmnoq2FIiiMHImkzOm+cGxqRLLu9CMHqFhbgSy9wtXZrqb8BBUIUE2VyBe7azzv1wKcxZV2RUyNOMpFqmnRZA== + dependencies: + "@algolia/client-common" "4.13.0" + "@algolia/client-search" "4.13.0" + "@algolia/requester-common" "4.13.0" + "@algolia/transporter" "4.13.0" + +"@algolia/client-common@4.13.0": + version "4.13.0" + resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-4.13.0.tgz#8bc373d164dbdcce38b4586912bbe162492bcb86" + integrity sha512-GoXfTp0kVcbgfSXOjfrxx+slSipMqGO9WnNWgeMmru5Ra09MDjrcdunsiiuzF0wua6INbIpBQFTC2Mi5lUNqGA== + dependencies: + "@algolia/requester-common" "4.13.0" + "@algolia/transporter" "4.13.0" + +"@algolia/client-personalization@4.13.0": + version "4.13.0" + resolved "https://registry.yarnpkg.com/@algolia/client-personalization/-/client-personalization-4.13.0.tgz#10fb7af356422551f11a67222b39c52306f1512c" + integrity sha512-KneLz2WaehJmNfdr5yt2HQETpLaCYagRdWwIwkTqRVFCv4DxRQ2ChPVW9jeTj4YfAAhfzE6F8hn7wkQ/Jfj6ZA== + dependencies: + "@algolia/client-common" "4.13.0" + "@algolia/requester-common" "4.13.0" + "@algolia/transporter" "4.13.0" + +"@algolia/client-search@4.13.0": + version "4.13.0" + resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-4.13.0.tgz#2d8ff8e755c4a37ec89968f3f9b358eed005c7f0" + integrity sha512-blgCKYbZh1NgJWzeGf+caKE32mo3j54NprOf0LZVCubQb3Kx37tk1Hc8SDs9bCAE8hUvf3cazMPIg7wscSxspA== + dependencies: + "@algolia/client-common" "4.13.0" + "@algolia/requester-common" "4.13.0" + "@algolia/transporter" "4.13.0" + +"@algolia/logger-common@4.13.0": + version "4.13.0" + resolved "https://registry.yarnpkg.com/@algolia/logger-common/-/logger-common-4.13.0.tgz#be2606e71aae618a1ff1ea9a1b5f5a74284b35a8" + integrity sha512-8yqXk7rMtmQJ9wZiHOt/6d4/JDEg5VCk83gJ39I+X/pwUPzIsbKy9QiK4uJ3aJELKyoIiDT1hpYVt+5ia+94IA== + +"@algolia/logger-console@4.13.0": + version "4.13.0" + resolved "https://registry.yarnpkg.com/@algolia/logger-console/-/logger-console-4.13.0.tgz#f28028a760e3d9191e28a10b12925e48f6c9afde" + integrity sha512-YepRg7w2/87L0vSXRfMND6VJ5d6699sFJBRWzZPOlek2p5fLxxK7O0VncYuc/IbVHEgeApvgXx0WgCEa38GVuQ== + dependencies: + "@algolia/logger-common" "4.13.0" + +"@algolia/requester-browser-xhr@4.13.0": + version "4.13.0" + resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.13.0.tgz#e2483f4e8d7f09e27cd0daf6c77711d15c5a919f" + integrity sha512-Dj+bnoWR5MotrnjblzGKZ2kCdQi2cK/VzPURPnE616NU/il7Ypy6U6DLGZ/ZYz+tnwPa0yypNf21uqt84fOgrg== + dependencies: + "@algolia/requester-common" "4.13.0" + +"@algolia/requester-common@4.13.0": + version "4.13.0" + resolved "https://registry.yarnpkg.com/@algolia/requester-common/-/requester-common-4.13.0.tgz#47fb3464cfb26b55ba43676d13f295d812830596" + integrity sha512-BRTDj53ecK+gn7ugukDWOOcBRul59C4NblCHqj4Zm5msd5UnHFjd/sGX+RLOEoFMhetILAnmg6wMrRrQVac9vw== + +"@algolia/requester-node-http@4.13.0": + version "4.13.0" + resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-4.13.0.tgz#7d981bbd31492f51dd11820a665f9d8906793c37" + integrity sha512-9b+3O4QFU4azLhGMrZAr/uZPydvzOR4aEZfSL8ZrpLZ7fbbqTO0S/5EVko+QIgglRAtVwxvf8UJ1wzTD2jvKxQ== + dependencies: + "@algolia/requester-common" "4.13.0" + +"@algolia/transporter@4.13.0": + version "4.13.0" + resolved "https://registry.yarnpkg.com/@algolia/transporter/-/transporter-4.13.0.tgz#f6379e5329efa2127da68c914d1141f5f21dbd07" + integrity sha512-8tSQYE+ykQENAdeZdofvtkOr5uJ9VcQSWgRhQ9h01AehtBIPAczk/b2CLrMsw5yQZziLs5cZ3pJ3478yI+urhA== + dependencies: + "@algolia/cache-common" "4.13.0" + "@algolia/logger-common" "4.13.0" + "@algolia/requester-common" "4.13.0" + +"@babel/parser@^7.16.4": + version "7.17.8" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.8.tgz#2817fb9d885dd8132ea0f8eb615a6388cca1c240" + integrity sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ== + +"@docsearch/css@3.0.0", "@docsearch/css@^3.0.0-alpha.41": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-3.0.0.tgz#fe57b474802ffd706d3246eab25d52fac8aa3698" + integrity sha512-1kkV7tkAsiuEd0shunYRByKJe3xQDG2q7wYg24SOw1nV9/2lwEd4WrUYRJC/ukGTl2/kHeFxsaUvtiOy0y6fFA== + +"@docsearch/js@^3.0.0-alpha.41": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@docsearch/js/-/js-3.0.0.tgz#394a99f68895503d57faf523ecec0b25b02f638c" + integrity sha512-j3tUJWlgW3slYqzGB8fm7y05kh2qqrIK1dZOXHeMUm/5gdKE85fiz/ltfCPMDFb/MXF+bLZChJXSMzqY0Ck30Q== + dependencies: + "@docsearch/react" "3.0.0" + preact "^10.0.0" + +"@docsearch/react@3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-3.0.0.tgz#d02ebdc67573412185a6a4df13bc254c7c0da491" + integrity sha512-yhMacqS6TVQYoBh/o603zszIb5Bl8MIXuOc6Vy617I74pirisDzzcNh0NEaYQt50fVVR3khUbeEhUEWEWipESg== + dependencies: + "@algolia/autocomplete-core" "1.5.2" + "@algolia/autocomplete-preset-algolia" "1.5.2" + "@docsearch/css" "3.0.0" + algoliasearch "^4.0.0" + +"@vitejs/plugin-vue@^2.2.0": + version "2.2.4" + resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-2.2.4.tgz#ab8b199ca82496b05d2654c5f34ffcf9b947243d" + integrity sha512-ev9AOlp0ljCaDkFZF3JwC/pD2N4Hh+r5srl5JHM6BKg5+99jiiK0rE/XaRs3pVm1wzyKkjUy/StBSoXX5fFzcw== + +"@vue/compiler-core@3.2.31": + version "3.2.31" + resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.31.tgz#d38f06c2cf845742403b523ab4596a3fda152e89" + integrity sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ== + dependencies: + "@babel/parser" "^7.16.4" + "@vue/shared" "3.2.31" + estree-walker "^2.0.2" + source-map "^0.6.1" + +"@vue/compiler-dom@3.2.31": + version "3.2.31" + resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.31.tgz#b1b7dfad55c96c8cc2b919cd7eb5fd7e4ddbf00e" + integrity sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg== + dependencies: + "@vue/compiler-core" "3.2.31" + "@vue/shared" "3.2.31" + +"@vue/compiler-sfc@3.2.31": + version "3.2.31" + resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.31.tgz#d02b29c3fe34d599a52c5ae1c6937b4d69f11c2f" + integrity sha512-748adc9msSPGzXgibHiO6T7RWgfnDcVQD+VVwYgSsyyY8Ans64tALHZANrKtOzvkwznV/F4H7OAod/jIlp/dkQ== + dependencies: + "@babel/parser" "^7.16.4" + "@vue/compiler-core" "3.2.31" + "@vue/compiler-dom" "3.2.31" + "@vue/compiler-ssr" "3.2.31" + "@vue/reactivity-transform" "3.2.31" + "@vue/shared" "3.2.31" + estree-walker "^2.0.2" + magic-string "^0.25.7" + postcss "^8.1.10" + source-map "^0.6.1" + +"@vue/compiler-ssr@3.2.31": + version "3.2.31" + resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.31.tgz#4fa00f486c9c4580b40a4177871ebbd650ecb99c" + integrity sha512-mjN0rqig+A8TVDnsGPYJM5dpbjlXeHUm2oZHZwGyMYiGT/F4fhJf/cXy8QpjnLQK4Y9Et4GWzHn9PS8AHUnSkw== + dependencies: + "@vue/compiler-dom" "3.2.31" + "@vue/shared" "3.2.31" + +"@vue/reactivity-transform@3.2.31": + version "3.2.31" + resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.31.tgz#0f5b25c24e70edab2b613d5305c465b50fc00911" + integrity sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA== + dependencies: + "@babel/parser" "^7.16.4" + "@vue/compiler-core" "3.2.31" + "@vue/shared" "3.2.31" + estree-walker "^2.0.2" + magic-string "^0.25.7" + +"@vue/reactivity@3.2.31": + version "3.2.31" + resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.31.tgz#fc90aa2cdf695418b79e534783aca90d63a46bbd" + integrity sha512-HVr0l211gbhpEKYr2hYe7hRsV91uIVGFYNHj73njbARVGHQvIojkImKMaZNDdoDZOIkMsBc9a1sMqR+WZwfSCw== + dependencies: + "@vue/shared" "3.2.31" + +"@vue/runtime-core@3.2.31": + version "3.2.31" + resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.31.tgz#9d284c382f5f981b7a7b5971052a1dc4ef39ac7a" + integrity sha512-Kcog5XmSY7VHFEMuk4+Gap8gUssYMZ2+w+cmGI6OpZWYOEIcbE0TPzzPHi+8XTzAgx1w/ZxDFcXhZeXN5eKWsA== + dependencies: + "@vue/reactivity" "3.2.31" + "@vue/shared" "3.2.31" + +"@vue/runtime-dom@3.2.31": + version "3.2.31" + resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.31.tgz#79ce01817cb3caf2c9d923f669b738d2d7953eff" + integrity sha512-N+o0sICVLScUjfLG7u9u5XCjvmsexAiPt17GNnaWHJUfsKed5e85/A3SWgKxzlxx2SW/Hw7RQxzxbXez9PtY3g== + dependencies: + "@vue/runtime-core" "3.2.31" + "@vue/shared" "3.2.31" + csstype "^2.6.8" + +"@vue/server-renderer@3.2.31": + version "3.2.31" + resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.31.tgz#201e9d6ce735847d5989403af81ef80960da7141" + integrity sha512-8CN3Zj2HyR2LQQBHZ61HexF5NReqngLT3oahyiVRfSSvak+oAvVmu8iNLSu6XR77Ili2AOpnAt1y8ywjjqtmkg== + dependencies: + "@vue/compiler-ssr" "3.2.31" + "@vue/shared" "3.2.31" + +"@vue/shared@3.2.31": + version "3.2.31" + resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.31.tgz#c90de7126d833dcd3a4c7534d534be2fb41faa4e" + integrity sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ== + +algoliasearch@^4.0.0: + version "4.13.0" + resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.13.0.tgz#e36611fda82b1fc548c156ae7929a7f486e4b663" + integrity sha512-oHv4faI1Vl2s+YC0YquwkK/TsaJs79g2JFg5FDm2rKN12VItPTAeQ7hyJMHarOPPYuCnNC5kixbtcqvb21wchw== + dependencies: + "@algolia/cache-browser-local-storage" "4.13.0" + "@algolia/cache-common" "4.13.0" + "@algolia/cache-in-memory" "4.13.0" + "@algolia/client-account" "4.13.0" + "@algolia/client-analytics" "4.13.0" + "@algolia/client-common" "4.13.0" + "@algolia/client-personalization" "4.13.0" + "@algolia/client-search" "4.13.0" + "@algolia/logger-common" "4.13.0" + "@algolia/logger-console" "4.13.0" + "@algolia/requester-browser-xhr" "4.13.0" + "@algolia/requester-common" "4.13.0" + "@algolia/requester-node-http" "4.13.0" + "@algolia/transporter" "4.13.0" + +csstype@^2.6.8: + version "2.6.20" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda" + integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA== + +esbuild-android-64@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.27.tgz#b868bbd9955a92309c69df628d8dd1945478b45c" + integrity sha512-LuEd4uPuj/16Y8j6kqy3Z2E9vNY9logfq8Tq+oTE2PZVuNs3M1kj5Qd4O95ee66yDGb3isaOCV7sOLDwtMfGaQ== + +esbuild-android-arm64@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.27.tgz#e7d6430555e8e9c505fd87266bbc709f25f1825c" + integrity sha512-E8Ktwwa6vX8q7QeJmg8yepBYXaee50OdQS3BFtEHKrzbV45H4foMOeEE7uqdjGQZFBap5VAqo7pvjlyA92wznQ== + +esbuild-darwin-64@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.27.tgz#4dc7484127564e89b4445c0a560a3cb50b3d68e1" + integrity sha512-czw/kXl/1ZdenPWfw9jDc5iuIYxqUxgQ/Q+hRd4/3udyGGVI31r29LCViN2bAJgGvQkqyLGVcG03PJPEXQ5i2g== + +esbuild-darwin-arm64@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.27.tgz#469e59c665f84a8ed323166624c5e7b9b2d22ac1" + integrity sha512-BEsv2U2U4o672oV8+xpXNxN9bgqRCtddQC6WBh4YhXKDcSZcdNh7+6nS+DM2vu7qWIWNA4JbRG24LUUYXysimQ== + +esbuild-freebsd-64@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.27.tgz#895df03bf5f87094a56c9a5815bf92e591903d70" + integrity sha512-7FeiFPGBo+ga+kOkDxtPmdPZdayrSzsV9pmfHxcyLKxu+3oTcajeZlOO1y9HW+t5aFZPiv7czOHM4KNd0tNwCA== + +esbuild-freebsd-arm64@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.27.tgz#0b72a41a6b8655e9a8c5608f2ec1afdcf6958441" + integrity sha512-8CK3++foRZJluOWXpllG5zwAVlxtv36NpHfsbWS7TYlD8S+QruXltKlXToc/5ZNzBK++l6rvRKELu/puCLc7jA== + +esbuild-linux-32@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.27.tgz#43b8ba3803b0bbe7f051869c6a8bf6de1e95de28" + integrity sha512-qhNYIcT+EsYSBClZ5QhLzFzV5iVsP1YsITqblSaztr3+ZJUI+GoK8aXHyzKd7/CKKuK93cxEMJPpfi1dfsOfdw== + +esbuild-linux-64@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.27.tgz#dc8072097327ecfadba1735562824ce8c05dd0bd" + integrity sha512-ESjck9+EsHoTaKWlFKJpPZRN26uiav5gkI16RuI8WBxUdLrrAlYuYSndxxKgEn1csd968BX/8yQZATYf/9+/qg== + +esbuild-linux-arm64@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.27.tgz#c52b58cbe948426b1559910f521b0a3f396f10b8" + integrity sha512-no6Mi17eV2tHlJnqBHRLekpZ2/VYx+NfGxKcBE/2xOMYwctsanCaXxw4zapvNrGE9X38vefVXLz6YCF8b1EHiQ== + +esbuild-linux-arm@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.27.tgz#df869dbd67d4ee3a04b3c7273b6bd2b233e78a18" + integrity sha512-JnnmgUBdqLQO9hoNZQqNHFWlNpSX82vzB3rYuCJMhtkuaWQEmQz6Lec1UIxJdC38ifEghNTBsF9bbe8dFilnCw== + +esbuild-linux-mips64le@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.27.tgz#a2b646d9df368b01aa970a7b8968be6dd6b01d19" + integrity sha512-NolWP2uOvIJpbwpsDbwfeExZOY1bZNlWE/kVfkzLMsSgqeVcl5YMen/cedRe9mKnpfLli+i0uSp7N+fkKNU27A== + +esbuild-linux-ppc64le@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.27.tgz#9a21af766a0292578a3009c7408b8509cac7cefd" + integrity sha512-/7dTjDvXMdRKmsSxKXeWyonuGgblnYDn0MI1xDC7J1VQXny8k1qgNp6VmrlsawwnsymSUUiThhkJsI+rx0taNA== + +esbuild-linux-riscv64@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.27.tgz#344a27f91568056a5903ad5841b447e00e78d740" + integrity sha512-D+aFiUzOJG13RhrSmZgrcFaF4UUHpqj7XSKrIiCXIj1dkIkFqdrmqMSOtSs78dOtObWiOrFCDDzB24UyeEiNGg== + +esbuild-linux-s390x@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.27.tgz#73a7309bd648a07ef58f069658f989a5096130db" + integrity sha512-CD/D4tj0U4UQjELkdNlZhQ8nDHU5rBn6NGp47Hiz0Y7/akAY5i0oGadhEIg0WCY/HYVXFb3CsSPPwaKcTOW3bg== + +esbuild-netbsd-64@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.27.tgz#482a587cdbd18a6c264a05136596927deb46c30a" + integrity sha512-h3mAld69SrO1VoaMpYl3a5FNdGRE/Nqc+E8VtHOag4tyBwhCQXxtvDDOAKOUQexBGca0IuR6UayQ4ntSX5ij1Q== + +esbuild-openbsd-64@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.27.tgz#e99f8cdc63f1628747b63edd124d53cf7796468d" + integrity sha512-xwSje6qIZaDHXWoPpIgvL+7fC6WeubHHv18tusLYMwL+Z6bEa4Pbfs5IWDtQdHkArtfxEkIZz77944z8MgDxGw== + +esbuild-sunos-64@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.27.tgz#8611d825bcb8239c78d57452e83253a71942f45c" + integrity sha512-/nBVpWIDjYiyMhuqIqbXXsxBc58cBVH9uztAOIfWShStxq9BNBik92oPQPJ57nzWXRNKQUEFWr4Q98utDWz7jg== + +esbuild-windows-32@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.27.tgz#c06374206d4d92dd31d4fda299b09f51a35e82f6" + integrity sha512-Q9/zEjhZJ4trtWhFWIZvS/7RUzzi8rvkoaS9oiizkHTTKd8UxFwn/Mm2OywsAfYymgUYm8+y2b+BKTNEFxUekw== + +esbuild-windows-64@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.27.tgz#756631c1d301dfc0d1a887deed2459ce4079582f" + integrity sha512-b3y3vTSl5aEhWHK66ngtiS/c6byLf6y/ZBvODH1YkBM+MGtVL6jN38FdHUsZasCz9gFwYs/lJMVY9u7GL6wfYg== + +esbuild-windows-arm64@0.14.27: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.27.tgz#ad7e187193dcd18768b16065a950f4441d7173f4" + integrity sha512-I/reTxr6TFMcR5qbIkwRGvldMIaiBu2+MP0LlD7sOlNXrfqIl9uNjsuxFPGEG4IRomjfQ5q8WT+xlF/ySVkqKg== + +esbuild@^0.14.14: + version "0.14.27" + resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.27.tgz#41fe0f1b6b68b9f77cac025009bc54bb96e616f1" + integrity sha512-MZQt5SywZS3hA9fXnMhR22dv0oPGh6QtjJRIYbgL1AeqAoQZE+Qn5ppGYQAoHv/vq827flj4tIJ79Mrdiwk46Q== + optionalDependencies: + esbuild-android-64 "0.14.27" + esbuild-android-arm64 "0.14.27" + esbuild-darwin-64 "0.14.27" + esbuild-darwin-arm64 "0.14.27" + esbuild-freebsd-64 "0.14.27" + esbuild-freebsd-arm64 "0.14.27" + esbuild-linux-32 "0.14.27" + esbuild-linux-64 "0.14.27" + esbuild-linux-arm "0.14.27" + esbuild-linux-arm64 "0.14.27" + esbuild-linux-mips64le "0.14.27" + esbuild-linux-ppc64le "0.14.27" + esbuild-linux-riscv64 "0.14.27" + esbuild-linux-s390x "0.14.27" + esbuild-netbsd-64 "0.14.27" + esbuild-openbsd-64 "0.14.27" + esbuild-sunos-64 "0.14.27" + esbuild-windows-32 "0.14.27" + esbuild-windows-64 "0.14.27" + esbuild-windows-arm64 "0.14.27" + +estree-walker@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac" + integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w== + +fsevents@~2.3.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" + integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== + +function-bind@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" + integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== + +has@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796" + integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw== + dependencies: + function-bind "^1.1.1" + +is-core-module@^2.8.1: + version "2.8.1" + resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211" + integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA== + dependencies: + has "^1.0.3" + +magic-string@^0.25.7: + version "0.25.9" + resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c" + integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ== + dependencies: + sourcemap-codec "^1.4.8" + +nanoid@^3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35" + integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw== + +path-parse@^1.0.7: + version "1.0.7" + resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" + integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== + +picocolors@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" + integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== + +postcss@^8.1.10, postcss@^8.4.6: + version "8.4.12" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905" + integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg== + dependencies: + nanoid "^3.3.1" + picocolors "^1.0.0" + source-map-js "^1.0.2" + +preact@^10.0.0: + version "10.6.6" + resolved "https://registry.yarnpkg.com/preact/-/preact-10.6.6.tgz#f1899bc8dab7c0788b858481532cb3b5d764a520" + integrity sha512-dgxpTFV2vs4vizwKohYKkk7g7rmp1wOOcfd4Tz3IB3Wi+ivZzsn/SpeKJhRENSE+n8sUfsAl4S3HiCVT923ABw== + +prismjs@^1.25.0: + version "1.27.0" + resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057" + integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA== + +resolve@^1.22.0: + version "1.22.0" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198" + integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw== + dependencies: + is-core-module "^2.8.1" + path-parse "^1.0.7" + supports-preserve-symlinks-flag "^1.0.0" + +rollup@^2.59.0: + version "2.70.1" + resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.70.1.tgz#824b1f1f879ea396db30b0fc3ae8d2fead93523e" + integrity sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA== + optionalDependencies: + fsevents "~2.3.2" + +source-map-js@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" + integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== + +source-map@^0.6.1: + version "0.6.1" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" + integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== + +sourcemap-codec@^1.4.8: + version "1.4.8" + resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4" + integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA== + +supports-preserve-symlinks-flag@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" + integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== + +vite@^2.8.1: + version "2.8.6" + resolved "https://registry.yarnpkg.com/vite/-/vite-2.8.6.tgz#32d50e23c99ca31b26b8ccdc78b1d72d4d7323d3" + integrity sha512-e4H0QpludOVKkmOsRyqQ7LTcMUDF3mcgyNU4lmi0B5JUbe0ZxeBBl8VoZ8Y6Rfn9eFKYtdXNPcYK97ZwH+K2ug== + dependencies: + esbuild "^0.14.14" + postcss "^8.4.6" + resolve "^1.22.0" + rollup "^2.59.0" + optionalDependencies: + fsevents "~2.3.2" + +vitepress@^0.22.3: + version "0.22.3" + resolved "https://registry.yarnpkg.com/vitepress/-/vitepress-0.22.3.tgz#5d29741497fa4dd4d08e65d529310cf92897b52f" + integrity sha512-Yfvu/rent2vp/TXIDZMutS6ft2TJPn4xngS48PYFWDEbuFI2ccUAXM481lF1qVVnCKxfh4g8e/KPvevSJdg1Bw== + dependencies: + "@docsearch/css" "^3.0.0-alpha.41" + "@docsearch/js" "^3.0.0-alpha.41" + "@vitejs/plugin-vue" "^2.2.0" + prismjs "^1.25.0" + vite "^2.8.1" + vue "^3.2.31" + +vue@^3.2.31: + version "3.2.31" + resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.31.tgz#e0c49924335e9f188352816788a4cca10f817ce6" + integrity sha512-odT3W2tcffTiQCy57nOT93INw1auq5lYLLYtWpPYQQYQOOdHiqFct9Xhna6GJ+pJQaF67yZABraH47oywkJgFw== + dependencies: + "@vue/compiler-dom" "3.2.31" + "@vue/compiler-sfc" "3.2.31" + "@vue/runtime-dom" "3.2.31" + "@vue/server-renderer" "3.2.31" + "@vue/shared" "3.2.31"