Pronto Install

README.md

@@ -48,10 +48,13 @@ Next, `cd` to the theme folder and run the following:
 ```bash
 % composer install
 % npm install
+% npm run pronto-install
 % npm run build
 ```
 
-This will install the dependencies and compile the assets. The primary dependency is [Millyard](https://github.com/imarc/millyard), which provides most ofthis theme's core functionality.
+This will install the dependencies, bring Pronto's components into the theme, and compile the assets.
+
+The primary PHP dependency is [Millyard](https://github.com/imarc/millyard), which provides most of this theme's core functionality.
 
 Finally, you'll want to activate the theme in the WordPress admin.
 

package.json

@@ -1,7 +1,8 @@
 {
   "scripts": {
     "dev": "vite",
-    "build": "vite build"
+    "build": "vite build",
+    "pronto-install": "npx @imarc/pronto@latest --non-interactive y ./resources y n y ./resources/images"
   },
   "devDependencies": {
     "dotenv": "^16.4.7",
@@ -11,7 +12,7 @@
     "vite-plugin-restart": "^0.4.2"
   },
   "dependencies": {
-    "@imarc/pronto": "^2.0.0-rc.12",
+    "@imarc/pronto": "^2.0.3",
     "@vitejs/plugin-vue": "^5.2.3",
     "vue": "^3.5.13"
   },

resources/js/components/PTabs.vue

@@ -46,6 +46,7 @@
     <div class="tabs__tablist" role="tablist" aria-label="Sample Tabs">
       <button class="tabs__prev button -circle" @click="prev">
         <span class="srOnly">previous</span>
+        <svg class="button__icon"><use href="/main-icons-sprite.svg#chevron-left" /></svg>
       </button>
       <button
         class="tabs__button"
@@ -61,6 +62,7 @@
       ></button>
       <button class="tabs__next button -circle" @click="next">
         <span class="srOnly">next</span>
+        <svg class="button__icon"><use href="/main-icons-sprite.svg#chevron-right" /></svg>
       </button>
     </div>
 

resources/js/index.js

@@ -1,6 +1,10 @@
 import { createApp, defineAsyncComponent } from 'vue'
 import directionals from './directives/vDirectionals.js'
 import scrolllock from './directives/vScrolllock.js'
+
+/**
+ * Vite heavily recommends importing your CSS from your JS.
+ */
 import '../styles/index.scss'
 
 createApp({