[#1] BluePrint UI Part one of two (#10)

* [#1] adding an outline to the readme

* [#1] Trying to update the DDEV vite server

* [#1] Setting up basic npm install

* [#1] Adding color to theme.json

* [#1] Adding font sizes

* [#1] Updating file name

* [#1] Adjusting the btn styles

* [#1] Cleaning up files

Author: nathan-schmidt-viget

.ddev/.env

@@ -0,0 +1,6 @@
+# start vite
+VITE_PROJECT_DIR=wp-content/themes/wp-starter
+VITE_PRIMARY_PORT=5173
+VITE_SECONDARY_PORT=5273
+VITE_JS_PACKAGE_MGR=npm
+# end vite

.ddev/commands/web/vite-serve

@@ -0,0 +1,96 @@
+#! /usr/bin/env bash
+#ddev-generated
+
+CMD=$1
+VITE_DIR=${VITE_PROJECT_DIR:-frontend}
+VITE_PRIMARY_PORT=${VITE_PRIMARY_PORT:-5173}
+VITE_SECONDARY_PORT=${VITE_SECONDARY_PORT:-5273}
+
+pmMenu() {
+  PMS="npm yarn pnpm"
+
+  PS3="Choose the package manager to use: "
+  select pkgdefault in $PMS; do
+    if [ -n "$pkgdefault" ]; then
+      echo "$pkgdefault"
+      break
+    else
+      echo "'$REPLY' is not a legal entry"
+    fi
+  done
+}
+
+defaultPM() {
+
+  if [ -n "$VITE_JS_PACKAGE_MGR" ]; then
+    echo $VITE_JS_PACKAGE_MGR
+    return
+  fi
+
+  if [ -f $VITE_DIR/package-lock.json ]; then
+    echo npm
+  elif [ -f $VITE_DIR/yarn.lock ]; then
+    echo yarn
+  elif [ -f $VITE_DIR/pnpm-lock.yaml ]; then
+    echo pnpm
+  else
+    pmMenu
+  fi
+
+}
+
+CMD=${CMD:=start}
+
+if [ $CMD = start ]; then
+
+  # Make sure the project directory is actually there
+  if [ ! -d $VITE_DIR ]; then
+    echo "ERROR: js project directory $VITE_DIR was expected, not found"
+    exit 1
+  fi
+
+  VITE_JS_PACKAGE_MGR=$(defaultPM)
+  echo "'$VITE_JS_PACKAGE_MGR'"
+
+  if ! command -v $VITE_JS_PACKAGE_MGR >/dev/null; then
+    echo "ERROR: could not find package manager $VITE_JS_PACKAGE_MGR"
+    exit 1
+  fi
+
+  echo "Using package manager $VITE_JS_PACKAGE_MGR"
+
+  # make sure node_modules has linux and not mac code:
+  cd $VITE_DIR
+  $VITE_JS_PACKAGE_MGR install
+
+  # Is js project a Vite project?
+  if [ ! -d node_modules/vite ]; then
+    echo "ERROR: project in $VITE_DIR does not appear to be Vite-enabled"
+    exit 1
+  fi
+
+  # create a background tmux session and tell it to run
+  # our vite script
+  tmux kill-session -t vite-sess 2>/dev/null
+  tmux new -s vite-sess -d
+  tmux send "node node_modules/vite/bin/vite.js --port $VITE_PRIMARY_PORT --host" C-m
+  echo "Vite now serving $VITE_DIR"
+
+# stopping
+elif [ $CMD = stop ]; then
+  echo "stopping vite"
+  # kill the vite session
+  tmux kill-session -t vite-sess
+
+# show settings
+elif [ $CMD = status ]; then
+  echo "ViteServe Status"
+  echo "================"
+  echo "Project: $VITE_PROJECT_DIR"
+  echo "Vite Primary Port: $VITE_PRIMARY_PORT"
+  echo "Vite Secondary Port: $VITE_SECONDARY_PORT"
+
+# usage
+else
+  echo "$0 start|stop|status"
+fi

.ddev/config.yaml

@@ -3,16 +3,26 @@ type: wordpress
 docroot: ""
 php_version: "8.2"
 webserver_type: nginx-fpm
+router_http_port: "80"
+router_https_port: "443"
 xdebug_enabled: false
 additional_hostnames: []
 additional_fqdns: []
 database:
-    type: mariadb
-    version: "10.4"
+  type: mariadb
+  version: "10.4"
+nfs_mount_enabled: false
+mutagen_enabled: false
 use_dns_when_possible: true
 composer_version: "2"
+nodejs_version: "18"
+# TODO figure this out - turned off for now
+# hooks:
+#   post-start:
+#     - exec: .ddev/commands/web/vite-serve
 web_environment: []
 
+
 # Key features of DDEV's config.yaml:
 
 # name: <projectname> # Name of the project, automatically provides

.gitignore

@@ -3,7 +3,7 @@
 
 ### Composer ###
 composer.phar
-/vendor/
+vendor
 
 # Commit your application's lock file https://getcomposer.org/doc/01-basic-usage.md#commit-your-composer-lock-file-to-version-control
 # You may choose to ignore a library lock file http://getcomposer.org/doc/02-libraries.md#lock-file
@@ -18,6 +18,9 @@ composer.phar
 # Icon must end with two \r
 Icon
 
+# NPM and Vite
+node_modules
+dist
 
 # Thumbnails
 ._*

README.md

@@ -1 +1,27 @@
 # WordPress Site Starter
+To use this, clone the WordPress Site Starter into the new project repo. Update this to have info about things to note how to be successful using the starter. 
+
+## Requirements
+* [DDEV](https://ddev.readthedocs.io/en/stable/) - [Installation](https://ddev.readthedocs.io/en/stable/users/install/ddev-installation/)
+* [Docker](https://docs.docker.com/desktop/install/mac-install/) (or compatible container alternative)
+* For ACF Pro, create an `auth.json` file in `wp-content/mu-plugins/viget-base/` from the [ACF Website](https://www.advancedcustomfields.com/my-account/view-licenses/). (Credentials are in 1Password)
+
+## Setup and Running
+
+Download and install WordPress core files
+`ddev wp core download`
+
+Start local server
+`ddev start`
+
+TODO add more info here once we have the full setup completed. 
+
+*We may want to use our Viget plugin to have this be in the CLI*
+1. Open a browser and navigate to [local site](https://wpstarter.ddev.site).
+2. Select English as the language.
+3. Fill out the site information.
+4. Then click "Install WordPress"
+5. Once WordPress has been set up login with your user information.
+
+
+## Block Documentation

wp-content/themes/wp-starter/.prettierrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+	arrowParens: 'always',
+	bracketSameLine: false,
+	bracketSpacing: true,
+	htmlWhitespaceSensitivity: 'css',
+	printWidth: 80,
+	proseWrap: 'preserve',
+	semi: true,
+	singleQuote: true,
+	tabWidth: 4,
+	useTabs: true,
+	trailingComma: 'all',
+	overrides: [
+		{
+			files: ['*.yml', '*.json'],
+			options: {
+				useTabs: false,
+				tabWidth: 2,
+			},
+		},
+	],
+	plugins: ['prettier-plugin-tailwindcss'],
+	tailwindFunctions: ['clsx'],
+};

wp-content/themes/wp-starter/composer.json

@@ -0,0 +1,5 @@
+{
+    "require": {
+        "idleberg/wordpress-vite-assets": "^1.0"
+    }
+}