Modernize (ironically) with Vite, Tailwind 3, and Alpine (#21)

Author: jackmcdade

README.md

@@ -3,8 +3,6 @@
   Statamic Starter Kit: Doogie Browser
 </h1>
 
-![Statamic 3.2+](https://img.shields.io/badge/Statamic-3.2+-FF269E?style=for-the-badge&link=https://statamic.com)
-
 > View on the [Statamic Marketplace](https://statamic.com/starter-kits/statamic/doogie-browser)!
 <!-- /statamic:hide -->
 
@@ -16,35 +14,34 @@
 - Old school Doogie Howser/IBM word processor design
 - Automatic downsampling of all images for that cutting-edge VGA feel
 - "Typography" using [IBM VGA8](https://int10h.org/oldschool-pc-fonts/fontlist/#ibmvgamcga)
-- Responsive
+- Responsive (even that wasn't a thing in the DOS days)
 - Built with [TailwindCSS](https://tailwindcss.com)
-- [Vue.js](https://github.com/vuejs/vue) for keyboard navigation
-- [PurgeCSS](https://purgecss.com/) for that tiny `4kb` css file size
 - :100: Lighthouse score
 
 
 ## Quick Start
 
-### Install as a New Site
-You can spin up a new install of Statamic along with this Starter Kit all in one command by using the [Statamic CLI Tool](https://github.com/statamic/cli)
+### 1. Create a new site
+
+You can create a new site using the [Statamic CLI](https://github.com/statamic/cli):
 
 ```
-statamic new mysite statamic/starter-kit-doogie-browser
+statamic new your-site statamic/starter-kit-doogie-browser
 ```
 
-Follow the prompts and you'll be up and running shortly.
-
-### Install into an existing site
-You can alternatively install Starter Kits into an existing Statamic 3.2+ site by running the following command while inside that install's root directory:
+Or you can install manually into a fresh [Statamic installation](https://statamic.dev/installation) by running:
 
 ```
-php please starter-kit:install statamic/starter-kit-doogie-browser
+php please starter-kit:install statamic/starter-kit-doogie-browser --clear-site
 ```
 
+### 2. Make a new user
 
-### Customizing (optional)
+The above installers should prompt you to make a user, but you can also run `php please make:user`. You'll want it to be a `super` so you have access to everything.
 
-The [TailwindCSS](https://tailwindcss.com/) included in this kit is compiled with [PurgeCSS](https://purgecss.com/) to reduce filesize on any unused classes and selectors. If you want to modify anything you'll need to recompile it.
+### 3. Recompile the CSS and JS (optional)
+
+This starter kit comes with precompiled CSS and JS. If you want to modify anything, just recompile it.
 
 ```
 npm i && npm run dev
@@ -53,9 +50,13 @@ npm i && npm run dev
 To compile for production again:
 
 ```
-npm run production
+npm run build
 ```
 
+### 4. Do your thing!
+
+If you're using [Laravel Herd](https://herd.laravel.com/) (or similar), your site should be available at `http://your-site.test`. You can access the control panel at `http://your-site.test/cp` and login with your new user. Open up the source code, follow along with the [Statamic docs](https://statamic.dev), and enjoy!
+
 ## Contributing
 
 Contributions are always welcome, no matter how large or small. Before contributing, please read the [code of conduct](https://github.com/statamic/cms/wiki/Code-of-Conduct).

content/trees/.gitkeep

@@ -1,27 +1,16 @@
 {
     "private": true,
+    "type": "module",
     "scripts": {
-        "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "dev": "vite",
+        "build": "vite build"
     },
     "devDependencies": {
-        "autoprefixer": "^9.7.4",
-        "cross-env": "^5.1",
-        "laravel-mix": "^5.0",
-        "laravel-mix-purgecss": "^5.0.0",
-        "postcss-import": "^12.0.1",
-        "postcss-nested": "^4.1.2",
-        "postcss-preset-env": "^6.7.0",
-        "tailwindcss": "^1.1.2",
-        "vue-template-compiler": "^2.6.11"
-    },
-    "dependencies": {
-        "vue": "^2.6.11",
-        "vue-keypress": "^1.1.0"
+        "@vitejs/plugin-vue": "^5.1.4",
+        "autoprefixer": "^10.4.19",
+        "laravel-vite-plugin": "^1.0.2",
+        "postcss": "^8.4.38",
+        "tailwindcss": "^3.4.3",
+        "vite": "^5.2.8"
     }
 }

package.json

@@ -1,5 +1,7 @@
 data: {  }
 size: 317647
-last_modified: 1579281552
+last_modified: 1729225326
 width: 1344
 height: 896
+mime_type: image/jpeg
+duration: null

public/assets/content/.meta/lagoa.jpg.yaml

@@ -1,5 +1,7 @@
 data: {  }
-size: 87881
-last_modified: 1579214338
+size: 82743
+last_modified: 1729225326
 width: 940
 height: 611
+mime_type: image/jpeg
+duration: null

public/assets/content/.meta/reebok-pumps.jpg.yaml

@@ -1,5 +1,7 @@
 data: {  }
-size: 76240
-last_modified: 1579206544
+size: 66884
+last_modified: 1729225326
 width: 1500
 height: 750
+mime_type: image/jpeg
+duration: null