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 bc9ee4801..0755e5166 100644 --- a/README.md +++ b/README.md @@ -1,577 +1,35 @@ -# Alpaca - components & theme for Magento 2.4 -## Migration guide for Alpaca theme >= 2.26.0 -`2.26.0` version includes a lot of changes and has different files structure, please go to [Migration Guide](./MIGRATION_GUIDE.md) for more informations -## Description -Alpaca Theme for Magento 2 is part of a `alpaca-packages` -To make it work with all features, we use following modules: +
+Alpaca Logo -Open source -* [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) +[![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) -Alpaca supports also following OS modules: -* paradoxlabs/authnetcim -* paradoxlabs/tokenbase -* authorizenet/magento-module-creditcard -* [snowdog/module-alpaca-acm](https://github.com/SnowdogApps/magento2-alpaca-acm) - alpaca customisation for paid `blackbird/contentmanager` extension +📚 [Documentation](https://alpaca-docs.vercel.app/) | 📝 [Changelog](./CHANGELOG.md) | 🔺 [Migration Guide](https://alpaca-docs.vercel.app/guide/migration-guide.html) -Additional, non-opensource modules the theme works with to cover additional features: -* 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 -Install whole package using composer: -`composer require snowdog/module-alpaca-packages` - -Install [snowdog/frontools](https://github.com/SnowdogApps/magento2-frontools): -`composer require snowdog/frontools` - -Node.js [LTS version](https://nodejs.org/en/about/releases/). We recommend using [Volta](https://volta.sh/). - -### Theme -1. Create child theme composer repository: - * default Magento 2 theme files: `theme.xml`, `registration.php`, `preview.jpg`, `.gitignore`, `composer.json` - * `composer.json` example file: - ```json - { - "name": "vendor/theme-frontend-child-theme", - "description": "Child frontend theme", - "type": "magento2-theme", - "require": { - "snowdog/theme-frontend-alpaca": "", - "vendor/module-child-theme-frontools": "" - }, - "autoload": { - "files": [ - "registration.php" - ] - } - } - ``` - * in `theme.xml` set Alpaca theme as a parent: `Snowdog/alpaca` - * add following files: - * `styles/styles.scss` - ```scss - // Component variables - @import '../Snowdog_Components/components/Atoms/variables/variables'; - @import '../Snowdog_Components/components/Atoms/variables/-variables'; - - // Components - @import '../Snowdog_Components/components/styles'; - - // Theme styles - @import 'theme'; - ``` - * `Snowdog_Components/components/Atoms/variables/_-variables.scss` - to overwrite globals variables which you need -2. Create separate module with frontools configuration (it should be required in theme composer dependencies). -Example: `vendor/module-child-theme-frontools`. - * File structure: - - ``` - +--config - | +--browser-sync.json - | +--themes.json - +--composer.json - ``` - * `config/browser-sync.json`: - - Basic configuration for browsersync (set path for project's local url): - ```json - { - "proxy": "child-theme.test", - "rewriteRules": [ - { - "match": ".child-theme.test", - "replace": "" - } - ] - } - ``` - * `config/themes.json` - - Themes configuration: - - ```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/**" - ] - }, - "child-theme": { - "parent": "alpaca", - "src": "vendor/theme-frontend-child-theme", - "dest": "pub/static/frontend/Vendor/child-theme", - "locale": ["en_US"], - "ignore": [ - "**/node_modules/**", - "**/Snowdog_Components/docs/**", - "**/Snowdog_Components/build/**" - ] - } - } - ``` - * `composer.json`: - - add `snowdog/frontools` as a dependency, - it is recommended to use latest version but you can choose the frontools version you need. - ```json - { - "name": "vendor/module-child-theme-frontools", - "type": "magento2-component", - "require": { - "snowdog/frontools": "^1.8.0" - }, - "extra": { - "map": [ - [ - "config", - "dev/tools/frontools/config" - ] - ] - } - } - ``` -3. Install theme with frontools dependencies using composer: - -`composer require vendor/theme-frontend-child-theme` - -### Components -`theme-frontend-alpaca/Snowdog_Components` it's separate [fractal.build](https://fractal.build/guide/) project integrated with Magento 2 Theme. 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. - -#### To build custom components based on Alpaca components: - -1. Copy-paste `package.json`, `gulpfile.js`, `.eslintignore`, `.eslintrc`, `.sass-lint.yml`, `.stylelintrc` files into `theme-frontend-/Snowdog_Components`: - -2. Update project names 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. -Your `styles.scss`: - -```scss -// Variables -@import '../../components/Atoms/variables/variables'; -@import '../../components/Atoms/variables/-variables'; - -// Components -@import '../../components/styles'; - -// Styles necessary only for Fractal purposes -@import 'fractal'; -``` - -Your `checkout.scss`: -```scss -// Variables -@import '../../components/Atoms/variables/variables'; -@import '../../components/Atoms/variables/-variables'; - -// Components -@import '../../components/checkout'; - -// Styles necessary only for Fractal purposes -@import 'fractal'; - -``` - -4. Create `modules.json` 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 it will look like this: - ```json - [ - "../../../snowdog/theme-frontend-alpaca/Snowdog_Components" - ] - ``` -5. Customize or add new files following the same structure as in Alpaca components - -6. Run `yarn` and `yarn dev` to run components in fractal :tada: - -If you don't work with Magento and want to use only components for some other project, you can create separate repository or/and composer/npm package from `theme-frontend-alpaca/Snowdog_Components` and set dependence to Alpaca components (`theme-frontend-alpaca/Snowdog_Components`) inside it. - -## Working with components & theme - customisation guide - -### Customising components with variables - -* Overwrite any variable in child theme global variable files (`Snowdog_Components/components/Atoms/variables/_-variables.scss`). -* Overwrite component's variable file: - -Almost every component has its own `_component-variables.scss` file. -You can overwrite single variable and add it to the global file or copy particular file to the same structure inside `theme-frontend-child-name/Snowdog_Components` folder and change variables there. -* Create custom file with overwritten variables and import it in the main styles file - -### Customising components - -* Overwrite the same file in Snowdog_Components files structure (`.hbs`, `.config.js`, `.scss`) -* Creating new components and import styles for it - -More about working with Alpaca Components directly in components' [README.md](Snowdog_Components/README.md) - -### Customising theme files -* Follow standard Magento way to work with [Theme inheritance](https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/themes/theme-inherit.html) -Remember: -* Layout XML file extends the one from parent theme, so there is no need to copy file, just add particular Layout XML file and add/remove/customize what you need. -* Template has to be overwritten in the child theme - -### styles - -Styles in Alpaca are separated: -* Components styles inside `theme-frontend-alpaca/Snowdog_Components` to work with components directly. - Components are divided into Atomic groups (Atoms, Molecules, Organisms, Templates) and imported in [main styles file](Snowdog_Components/docs/styles/styles.scss) - - Those styles are also imported inside the theme in [main styles file](styles/styles.scss) - Additionally, inside components, we have separated styles for [checkout](Snowdog_Components/docs/styles/checkout.scss). - -* To add new component and import style for it, copy-paste the file for import styles inside group (ex. [Molecules styles import](Snowdog_Components/components/Molecules/_components.scss), and add your import there. -* 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](#theme-configuration) as ignores files -* Inside theme, we have main styles file and separate styles for [gallery](styles/gallery-styles.scss) and for [checkout](Magento_Checkout/styles/checkout.scss) - - -### 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, you should use babel support, just add `.babel` in file name before `.js` extension, ex: [script for tabs](Magento_Theme/web/js/tab.babel.js) - -### Sliders -Used lib: [slick slider](https://kenwheeler.github.io/slick/) -Magento Theme: One template for all sliders (theme-frontend-alpaca/Magento_Theme/templates/html/slider.phtml) -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`. - -## Alpaca Content - Set up your store, admin / db changes for alpaca theme - -### Menu - to display menu use [Snowdog's magento2-menu](https://github.com/SnowdogApps/magento2-menu) module -1. Desktop menu: - * identifier: main-desktop - * Menu Main CSS Class: mega-menu -2. Mobile menu: - * identifier: main-mobile - * Menu Main CSS Class: dropdown-list -3. Footer links menu - * identifier: main-footer - * Menu Main Class: dropdown-list - - -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 - -### Header & Footer CMS blocks - -We use CMS blocks to display some customizable content in header and footer. Check `vendor/snowdog/theme-frontend-alpaca/Magento_Theme/layout/default.xml` to see which CMS blocks are displayed by default. When creating these CMS blocks, you can use templates from `vendor/snowdog/theme-frontend-alpaca/Snowodg_Components` as a base for the HTML structure. - -### Homepage blocks - -Homepage content is built using static blocks. Check `vendor/snowdog/theme-frontend-alapca/Magento_Cms/layout/cms_index_index.xml` to see which CMS blocks are displayed by default. When creating these CMS blocks, you can use templates from `vendor/snowdog/theme-frontend-alpaca/Snowodg_Components` as a base for the HTML structure. - -### SVG icons in cms block: - -* {{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 - -### 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> +🔹 [Component Library](https://magento2-alpaca-theme.vercel.app/)
+🔹 [Magento OS Demo](https://alpaca-community.snowdog.dev/)
+🔹 [Adobe Commerce Demo](https://alpaca-commerce.snowdog.dev/)
-``` -* 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. - -### Blog -* we use Blackbird Content Manager (paid extension) for blog - -### Shipping latency - snowdog/module-shipping-latency - -* is an extension to display additional information 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 -* check [Shipping latency extension details](https://github.com/SnowdogApps/magento2-shipping-latency) and theme implementation in: `vendor/snowdog/theme-frontend-alpaca/Magento_Catalog/templates/product/list.phtml` (for catalog) and `vendor/snowdog/theme-frontend-alpaca/Magento_Catalog/templates/product/view/shipping-latency.phtml` (for product detail page) - -### Bullet points - snowdog/module-bullet-points -* Extension is used to display product attributes listed on product list item on catalog page -* check [Bullet points extension details](https://github.com/SnowdogApps/magento2-bullet-points) - -### Category attributes - snowdog/module-category-attributes -* it add a field for additional content on the bottom of catalog page -* check [Category attributes extension details](https://github.com/SnowdogApps/magento2-category-attributes) - -### Product attribute description - snowdog/module-product-attribute-description -* Extension allow to add additional description for attribute, implemented from admin level -* check [Product attribute description extension details](https://github.com/SnowdogApps/magento2-product-attribute-description) -* in theme is implemented on catalog level as an additional tooltip, check implementation: - * `vendor/snowdog/theme-frontend-alpaca/Smile_ElasticsuiteCatalog/templates/layer/filter/attribute.phtml` - * `vendor/snowdog/theme-frontend-alpaca/Magento_Swatches/templates/product/layered/renderer.phtml` (swatches) - * `vendor/snowdog/theme-frontend-alpaca/Smile_ElasticsuiteCatalog/templates/layer/filter/slider.phtml` (range filter) - -### Wishlist unlocker - snowdog/module-wishlist-unlocker -* This extension allow 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 -* check [Wishlist unlocker extension details](https://github.com/SnowdogApps/magento2-wishlist-unlocker) - -## 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) +# Magento 2 Alpaca Theme +📝 **Component-based** +* Built on top of a collection of reusable components - guided by clear rules to ensure design consistency. -### 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. +🎨 **Themable** +* Gives a lot of flexibility to customize the look of the store. -With commited magepack config, during deployment, after assets compilation, run magepack bundling: -``` -yarn magepackBundle --config -``` +📚 **Feature-rich** +* Comes in a package with a set of modules. +* Compatible with the majority of Magento Open Source and Adobe Commerce features. -### 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. +💅 **Polished** +* We've put a lot of work into the little things. -* 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` +♿️ **Accessible** +* WCAG AA level compliant -### Test magepack locally +⚡️ **Fast Child Theme Setup** +* Create Alpaca Child Theme in your Magento project by running one command. -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 +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 eeffec0f9..000000000 --- a/Snowdog_Components/README.md +++ /dev/null @@ -1,133 +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 >=12.13.0 <13.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` from `theme-frontend-alpaca/Snowdog_Components/docs/styles/` and add child project variables import there. -The file should look like this: - -```scss -// Variables -@import '../../components/Atoms/variables/variables'; -@import '../../components/Atoms/variables/-variables'; - -// Components -@import '../../components/styles'; - -// Styles necessary only for Fractal purposes -@import 'fractal'; -``` - -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. 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/guide/getting-started/alpaca-setup-guide.md b/docs/guide/getting-started/alpaca-setup-guide.md new file mode 100644 index 000000000..0e8aef1b7 --- /dev/null +++ b/docs/guide/getting-started/alpaca-setup-guide.md @@ -0,0 +1,358 @@ +# 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 + // Child theme variables (imported after alpaca variables) + @import "../../components/Atoms/variables/CHILD_THEME_NAME-variables"; + + // Variables + @import '../../components/Atoms/variables/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 + // Child theme variables + @import "../../components/Atoms/variables/CHILD_THEME_NAME-variables"; + + // Variables + @import '../../components/Atoms/variables/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 + // Child theme variables + @import "../Snowdog_Components/components/Atoms/variables/CHILD_THEME_NAME-variables"; + + // Variables + @import '../Snowdog_Components/components/Atoms/variables/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 + // Child theme variables + @import "../Snowdog_Components/components/Atoms/variables/CHILD_THEME_NAME-variables"; + + // Variables + @import '../Snowdog_Components/components/Atoms/variables/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 + // Child theme variables + @import "../Snowdog_Components/components/Atoms/variables/CHILD_THEME_NAME-variables"; + + // Variables + @import '../Snowdog_Components/components/Atoms/variables/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'; + + // Child theme variables + @import "../../Snowdog_Components/components/Atoms/variables/CHILD_THEME_NAME-variables"; + + // Component variables + @import '../../Snowdog_Components/components/Atoms/variables/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/guide/getting-started/magento-setup-guide.md b/docs/guide/getting-started/magento-setup-guide.md new file mode 100644 index 000000000..ee773b340 --- /dev/null +++ b/docs/guide/getting-started/magento-setup-guide.md @@ -0,0 +1,403 @@ +# Magento 2 Setup Guide +If you have Magento already set up, you can skip this guide. + +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 +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 + +## 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 + ``` + Change `` to name of folder in which you wish to install your Magento project. + +2. Create database + * [See Magento docs](https://devdocs.magento.com/guides/v2.4/install-gde/install/cli/install-cli-subcommands-db.html) of creating the database schema. + * Run command bellow to create new database: + ``` + valet db create + ``` + * See Valet Plus [database documentation.](https://github.com/weprovide/valet-plus/wiki/Database) +3. Configure database for Magento. Go to main directory of your project and run: +(adjust `project-name`) + ````sh + bin/magento setup:install --db-host="127.0.0.1" \ + --db-name="db-name" \ + --db-user="db-user" \ + --db-password="db-password" \ + --base-url="http://project-name.test/" \ + --admin-user="admin" \ + --admin-password="Password123" \ + --admin-email="name@example.com" \ + --admin-firstname="Your First Name" \ + --admin-lastname="Your Last Name" + ```` + Adjust options: + * `db` fields - name, password and root + * Your project local URL and your admin credentials +4. Go to `app/etc/env.php` to check that all fields are properly set. + * Set `frontName` to `admin`. + * Example - `'frontName' => 'admin'` will result in `project-name.test/admin` as your admin panel URL. + * Make sure that database fields are the same as you set in step 2. + * Adjust rest of the fields according to your own needs. + * See example `env.php` file below: + ```php + [ + 'frontName' => 'admin' + ], + 'db' => [ + 'connection' => [ + 'indexer' => [ + 'host' => '127.0.0.1', + 'dbname' => 'magento', + 'username' => 'root', + 'password' => 'root', + 'active' => '1', + 'persistent' => null, + 'model' => 'mysql4', + 'engine' => 'innodb', + 'initStatements' => 'SET NAMES utf8;' + ], + 'default' => [ + 'host' => '127.0.0.1', + 'dbname' => 'magento', + 'username' => 'root', + 'password' => 'root', + 'active' => '1', + 'model' => 'mysql4', + 'engine' => 'innodb', + 'initStatements' => 'SET NAMES utf8;' + ] + ], + 'table_prefix' => '' + ], + 'crypt' => [ + 'key' => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' + ], + 'session' => [ + 'save' => 'redis', + 'redis' => [ + 'host' => '/tmp/redis.sock', + 'port' => '6379', + 'password' => '', + 'timeout' => '2.5', + 'persistent_identifier' => '', + 'database' => '0', + 'compression_threshold' => '2048', + 'compression_library' => 'gzip', + 'log_level' => '1', + 'max_concurrency' => '6', + 'break_after_frontend' => '5', + 'break_after_adminhtml' => '30', + 'first_lifetime' => '600', + 'bot_first_lifetime' => '60', + 'bot_lifetime' => '7200', + 'disable_locking' => '0', + 'min_lifetime' => '60', + 'max_lifetime' => '2592000' + ] + ], + 'cache' => [ + 'frontend' => [ + 'default' => [ + 'backend' => 'Cm_Cache_Backend_Redis', + 'backend_options' => [ + 'server' => '/tmp/redis.sock', + 'port' => '6379', + 'database' => '2' + ] + ], + 'page_cache' => [ + 'backend' => 'Cm_Cache_Backend_Redis', + 'backend_options' => [ + 'server' => '/tmp/redis.sock', + 'port' => '6379', + 'database' => '1', + 'compress_data' => '0' + ] + ] + ] + ], + 'resource' => [ + 'default_setup' => [ + 'connection' => 'default' + ] + ], + 'x-frame-options' => 'SAMEORIGIN', + 'MAGE_MODE' => 'developer', + 'cache_types' => [ + 'config' => 1, + 'layout' => 1, + 'block_html' => 0, + 'collections' => 1, + 'reflection' => 1, + 'db_ddl' => 1, + 'eav' => 1, + 'full_page' => 0, + 'config_integration' => 1, + 'config_integration_api' => 1, + 'target_rule' => 1, + 'translate' => 1, + 'config_webservice' => 1, + 'compiled_config' => 0, + 'customer_notification' => 1 + ], + 'install' => [ + 'date' => 'Wed, 19 Jul 2017 00:00:00 +0000' + ], + 'queue' => [ + 'amqp' => [ + 'host' => '', + 'port' => '', + 'user' => '', + 'password' => '', + 'virtualhost' => '/', + 'ssl' => '' + ] + ] + ]; + ``` +5. Set up SSL (optional) + * Run command bellow to enable secure URLs in both the customer-facing and admin-only areas of your store (adjust url value): + ``` + bin/magento setup:store-config:set --use-secure=1 --base-url="https://project-name.test/" + ``` + * Run command below for to Valet to serve the site over encrypted TLS using HTTP/2: + ``` + valet secure + ``` + +### Warden +1. Install Magento 2 + ``` + composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition + ``` + Change `` to name of folder in which you wish to install your Magento project. +2. Inside project directory run (adjust project-name): + ``` + warden env-init project-name magento2 + ``` + It'll create project-specific .env file with configuration used by Warden & Docker. +3. Custmise `env` file according to your needs.
+ * You can change the used versions of services like **Composer**, **PHP**, **MariaDB**, etc. Here you can also toggle services: **Elasticsearch**, **Varnish**, **Redis**, **RabbitMQ** and disable those you don't need. + * See example `env` file below: + ```php + [ + 'frontName' => 'admin' + ], + 'remote_storage' => [ + 'driver' => 'file' + ], + 'system' => [ + 'default' => [ + 'smile_elasticsuite_core_base_settings' => [ + 'es_client' => [ + 'servers' => 'elasticsearch:9200', + 'enable_https_mode' => 0, + 'enable_http_auth' => 0 + ] + ], + 'dev' => [ + 'js' => [ + 'merge_files' => 0, + 'enable_js_bundling' => 0, + 'minify_files' => 0 + ], + 'css' => [ + 'merge_css_files' => 0, + 'minify_files' => 0 + ], + 'static' => [ + 'sign' => '0' + ] + ], + 'web' => [ + 'cookie' => [ + 'cookie_domain' => 'project-name.test' + ], + 'unsecure' => [ + 'base_url' => 'https://project-name.test/', + 'base_link_url' => 'https://project-name.test/', + 'base_static_url' => 'https://project-name.test/static/', + 'base_media_url' => 'https://project-name.test/media/' + ], + 'secure' => [ + 'base_url' => 'https://project-name.test/', + 'base_link_url' => 'https://project-name.test/', + 'base_static_url' => 'https://project-name.test/static/', + 'base_media_url' => 'https://project-name.test/media/' + ], + 'seo' => [ + 'use_rewrites' => '1' + ] + ] + ] + ], + 'crypt' => [ + 'key' => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx' + ], + 'db' => [ + 'table_prefix' => '', + 'connection' => [ + 'default' => [ + 'host' => 'db', + 'dbname' => 'magento', + 'username' => 'magento', + 'password' => 'magento', + 'model' => 'mysql4', + 'engine' => 'innodb', + 'initStatements' => 'SET NAMES utf8;', + 'active' => '1', + 'driver_options' => [ + 1014 => false + ] + ] + ] + ], + 'resource' => [ + 'default_setup' => [ + 'connection' => 'default' + ] + ], + 'session' => [ + 'save' => 'redis', + 'redis' => [ + 'host' => 'redis', + 'port' => '6379', + 'password' => '', + 'timeout' => '2.5', + 'persistent_identifier' => '', + 'database' => '2', + 'compression_threshold' => '2048', + 'compression_library' => 'gzip', + 'log_level' => '1', + 'max_concurrency' => '20', + 'break_after_frontend' => '5', + 'break_after_adminhtml' => '30', + 'first_lifetime' => '600', + 'bot_first_lifetime' => '60', + 'bot_lifetime' => '7200', + 'disable_locking' => '0', + 'min_lifetime' => '60', + 'max_lifetime' => '2592000', + 'sentinel_master' => '', + 'sentinel_servers' => '', + 'sentinel_connect_retries' => '5', + 'sentinel_verify_master' => '0' + ] + ], + 'cache' => [ + 'frontend' => [ + 'default' => [ + 'id_prefix' => '69d_', + 'backend' => 'Magento\\Framework\\Cache\\Backend\\Redis', + 'backend_options' => [ + 'server' => 'redis', + 'database' => '0', + 'port' => '6379', + 'password' => '', + 'compress_data' => '1', + 'compression_lib' => '' + ] + ], + 'page_cache' => [ + 'id_prefix' => '69d_', + 'backend' => 'Magento\\Framework\\Cache\\Backend\\Redis', + 'backend_options' => [ + 'server' => 'redis', + 'database' => '1', + 'port' => '6379', + 'password' => '', + 'compress_data' => '0', + 'compression_lib' => '' + ] + ] + ], + 'allow_parallel_generation' => false + ], + 'lock' => [ + 'provider' => 'db', + 'config' => [ + 'prefix' => null + ] + ], + 'install' => [ + 'date' => 'Wed, 18 Aug 2021 13:00:26 +0000' + ] + ]; + ``` +4. Override mutagen config (Mac OS only)
+ By default for performance reasons Warden ignores sync (opens new window) for some paths like `pub/static`. To change that behavior override the mutagen config by adding in project's root `.warden/mutagen.yml` file with the following content: + ```sh + sync: + defaults: + mode: two-way-resolved + symlink: + mode: ignore + watch: + pollingInterval: 10 + ignore: + vcs: false + paths: + # System files + - ".DS_Store" + - "._*" + + # Vim files + - "*~" + - "*.sw[a-p]" + + # Magento files + - "/pub/media" + + # Frontend dependecies + - "node_modules" + + permissions: + defaultFileMode: "0644" + defaultDirectoryMode: "0755" + ``` +5. Set up SSL and start project environment (adjust url): + ``` + warden sign-certificate project-name.test + warden env up + ``` +6. Create databse + * [See Magento docs](https://devdocs.magento.com/guides/v2.4/install-gde/install/cli/install-cli-subcommands-db.html) of creating the database schema. + * 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 +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 + ``` +2. Run command bellow to rewrite SEO and make user friendly URLs: + ``` + bin/magento config:set --lock-env web/seo/use_rewrites 1 + ``` +3. Disable CSS and JS bundling + ``` + bin/magento config:set --lock-env dev/js/merge_files 0 + bin/magento config:set --lock-env dev/js/minify_files 0 + bin/magento config:set --lock-env dev/css/minify_files 0 + bin/magento config:set --lock-env dev/css/merge_css_files 0 + bin/magento config:set --lock-env dev/static/sign 0 + ``` 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/MIGRATION_GUIDE.md b/docs/guide/migration-guide.md similarity index 75% rename from MIGRATION_GUIDE.md rename to docs/guide/migration-guide.md index bfec6665b..03b5e8f05 100644 --- a/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..b4880b48c --- /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 before 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/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" diff --git a/now.json b/vercel.json similarity index 87% rename from now.json rename to vercel.json index 85335afb2..f2bf5bf86 100644 --- a/now.json +++ b/vercel.json @@ -4,7 +4,7 @@ "builds": [ { "src": "Snowdog_Components/package.json", - "use": "@now/static-build", + "use": "@vercel/static-build", "config": { "distDir": "dest" } } ],