#80366 create docs in Vitepress

.gitignore

@@ -6,6 +6,8 @@
 
 # Dependencies
 Snowdog_Components/node_modules
+docs/node_modules
+
 
 # Build
 Snowdog_Components/build

Magento_Theme/web/js/select.babel.js

@@ -1,6 +1,6 @@
 define([
   'jquery',
-  'select2',
+  // 'select2',
   'domReady!'
 ], function ($) {
   'use strict'
@@ -48,6 +48,6 @@ define([
     }
 
     config.options = Object.assign(defaultOptions, config.options);
-    $(`#${selectId}`).select2(config.options);
+    // $(`#${selectId}`).select2(config.options);
   }
 })

README.md

@@ -1,76 +1,35 @@
 <div align="center">
 <img src="./web/images/icons/logo.svg" alt="Alpaca Logo" width="400"/>
 
-[![Latest Stable Version](http://poser.pugx.org/snowdog/theme-frontend-alpaca/v)](https://packagist.org/packages/snowdog/theme-frontend-alpaca) [![Total Downloads](http://poser.pugx.org/snowdog/theme-frontend-alpaca/downloads)](https://packagist.org/packages/snowdog/theme-frontend-alpaca)<br>
-📚 [Docs](./docs) | 📝 [Changelog](./CHANGELOG.md)<br>
+[![Latest Stable Version](http://poser.pugx.org/snowdog/theme-frontend-alpaca/v)](https://packagist.org/packages/snowdog/theme-frontend-alpaca) <img src="https://img.shields.io/badge/Magento-2.4.3-blue.svg" alt="Magento 2.4.3"/> [![Total Downloads](http://poser.pugx.org/snowdog/theme-frontend-alpaca/downloads)](https://packagist.org/packages/snowdog/theme-frontend-alpaca)
 
+📚 [Documentation](https://alpaca-docs.vercel.app/) | 📝 [Changelog](./CHANGELOG.md) | 🔺 [Migration Guide](https://alpaca-docs.vercel.app/guide/migration-guide.html)
+
+🔹 [Component Library](https://magento2-alpaca-theme.vercel.app/)<br>
 🔹 [Magento OS Demo](https://alpaca-community.snowdog.dev/)<br>
 🔹 [Adobe Commerce Demo](https://alpaca-commerce.snowdog.dev/)<br>
-🔹 [Components Preview](https://magento2-alpaca-theme-git-master-snowdog1.vercel.app/)<br>
 </div>
 
-# Magento 2 Theme Frontend Alpaca
-> `2.26.0` includes a lot of changes and has different file structure, please go to [Migration Guide](.doc/MIGRATION_GUIDE.md) for more information.
+# Magento 2 Alpaca Theme
+📝 **Component-based**
+* Built on top of a collection of reusable components - guided by clear rules to ensure design consistency.
 
-✅ Compatible with Magento 2.4.3<br>
-📝 Component-based<br>
-📚 Feature-rich<br>
-🎨 Themable<br>
-💅 Polished<br>
-♿️ Accessible<br>
-⚡️ Easy to set up<br>
+🎨 **Themable**
+* Gives a lot of flexibility to customize the look of the store.
 
-## Key features
-* Polished component system, built with [Sass](https://sass-lang.com/) and [Fractal](https://fractal.build/), on which you can work on outside of Magento to speed up development process.
-* It makes it easy to customize design.
-* Advanced menu built with [Snowdog Module Menu](https://github.com/SnowdogApps/magento2-menu)
-* Optimised images - responsive images, lazyloading, webp, and aspect ratio
-* SVG icons that can be used in CMS content
-* Customisable content with banners
-* Customizable slider built with [slick](https://kenwheeler.github.io/slick/)
-* Content types built with [Blackbird Content Manager](https://www.advancedcontentmanager.com/) for slider and blog articles
+📚 **Feature-rich**
+* Comes in a package with a set of modules.
+* Compatible with the majority of Magento Open Source and Adobe Commerce features.
 
-And much more. Check how to work with different features in [Working with Alpaca guide](./docs/working-with-alpaca.md)
+💅 **Polished**
+* We've put a lot of work into the little things.
 
-## Alpaca Packages
-Alpaca Theme is a part of [Alpaca Packages](https://github.com/SnowdogApps/magento2-alpaca-packages) - a set of open source modules that cover Alpaca base features.
-It includes:
-* [magepal/magento2-gmailsmtpapp](https://github.com/magepal/magento2-gmail-smtp-app)
-* [magepal/magento2-googletagmanager](https://github.com/magepal/magento2-google-tag-manager)
-* [mailchimp/mc-magento2](https://github.com/mailchimp/mc-magento2)
-* [smile/elasticsuite](https://github.com/Smile-SA/elasticsuite)
-* [snowdog/module-alpaca-general](https://github.com/SnowdogApps/magento2-alpaca-general)
-* [snowdog/module-bullet-points](https://github.com/SnowdogApps/magento2-bullet-points)
-* [snowdog/module-csp](https://github.com/SnowdogApps/magento2-module-csp)
-* [snowdog/module-category-attributes](https://github.com/SnowdogApps/magento2-category-attributes)
-* [snowdog/module-menu](https://github.com/SnowdogApps/magento2-menu)
-* [snowdog/module-product-attribute-description](https://github.com/SnowdogApps/magento2-product-attribute-description)
-* [snowdog/module-shipping-latency](https://github.com/SnowdogApps/magento2-shipping-latency)
-* [snowdog/module-wishlist-unlocker](https://github.com/SnowdogApps/magento2-wishlist-unlocker)
-* [webshopapps/module-matrixrate](https://github.com/webshopapps/module-matrixrate)
+♿️ **Accessible**
+* WCAG AA level compliant
 
-## Third-party module compatibility
-Besides modules included in [Alpaca Packages](#alpaca-packages), Alpaca supports the following modules:
-* Open source:
-    * paradoxlabs/authnetcim
-    * paradoxlabs/tokenbase
-    * authorizenet/magento-module-creditcard
-    * [snowdog/module-alpaca-acm](https://github.com/SnowdogApps/magento2-alpaca-acm) - Alpaca customisations for paid `blackbird/contentmanager` extension
+⚡️ **Fast Child Theme Setup**
+* Create Alpaca Child Theme in your Magento project by running one command.
 
-* Paid:
-    * amasty/adminactionslog
-    * amasty/module-gdpr
-    * amasty/module-gift-card
-    * amasty/module-google-rich-snippets
-    * amasty/module-product-feed
-    * amasty/module-shipping-rules
-    * amasty/module-special-promo
-    * amasty/module-store-locator
-    * amasty/payrestriction
-    * amasty/shiprestriction
-    * apptrian/facebook-pixel
-    * blackbird/contentmanager
-    * vladimirpopov/webforms
+---
 
-## Installation
-Check [Alpaca installation step by step guide](./docs/alpaca-step-by-step.md)
+To learn more about Alpaca, check [documentation](https://alpaca-docs.vercel.app/).

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'
+        }
+      ]
+    }
+  }
+}

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);
+}

docs/.vitepress/theme/index.js

@@ -0,0 +1,4 @@
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+
+export default DefaultTheme