Housekeeping (#2520)

* enhance(project): Add .prettierrc to project * chore(deps): Bump dependencies * chore(view): Improve readability of the search form view * chore(admin): Improve language used in the customize_register filter docblock * chore(lint): Lint project assets * chore(change-log): Improve/prepare the changelog for actual release * chore(readme): Improve README feature list * chore(readme): Update README theme directory structure * chore(readme): Add GitHub sponsors badge * chore(readme): Clean up various wording * fix(ci): Fix failing tests * fix(mix): Add index.php to purgecss scope (Supersedes #2423) (Credit @oxyc)
2020-08-20 13:35:15 -05:00
parent 5535ea6184
commit 24ac51d510
14 changed files with 2890 additions and 2559 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -14,10 +14,10 @@ workflows:
            - run: yarn run build:production
          matrix:
            parameters:
-              version: ["10.21", "12.18", "14.4"]
+              version: ['12.18', '14.4']
      - php/test:
          name: php-<< matrix.version >>
          test-command: lint
          matrix:
            parameters:
-              version: ["7.2", "7.3", "7.4"]
+              version: ['7.2', '7.3', '7.4']
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": true
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@
 </p>

 <p align="center">
-  <a href="https://roots.io">Official Website</a> | <a href="https://roots.io/docs/sage/9.x/installation/">Documentation</a> | <a href="CHANGELOG.md">Change Log</a>
+  <a href="https://roots.io">Official Website</a> | <a href="https://roots.io/docs/sage/">Documentation</a> | <a href="CHANGELOG.md">Change Log</a>
 </p>

 ## Supporting
@@ -40,25 +40,25 @@ However, the amount of effort needed to maintain and develop new features and pr

 <div align="center">

-[![Donate via Patreon](https://img.shields.io/badge/donate-patreon-orange.svg?style=flat-square&logo=patreon")](https://www.patreon.com/rootsdev)
+[![Sponsor on GitHub](https://img.shields.io/static/v1?label=sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/roots)
+[![Sponsor on Patreon](https://img.shields.io/badge/sponsor-patreon-orange.svg?style=flat-square&logo=patreon")](https://www.patreon.com/rootsdev)
 [![Donate via PayPal](https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square&logo=paypal)](https://www.paypal.me/rootsdev)

 </div>

-## Overview
+## About Sage

-Sage is a WordPress starter theme with a modern development workflow.
+Sage is a productivity-driven WordPress starter theme with a modern development workflow.

-**Sage 10 is in active development and is currently in alpha. The `master` branch tracks Sage 10 development. If you want a stable version, use the [latest Sage 9 release](https://github.com/roots/sage/releases/latest).**
+**The `master` branch currently tracks Sage 10 which is in active development. Looking for Sage 9? [See releases](https://github.com/roots/sage/releases).**

 ## Features

-* Sass for stylesheets
-* Modern JavaScript
-* [Laravel Mix](https://github.com/JeffreyWay/laravel-mix) for compiling assets and concatenating and minifying files
-* [Browsersync](http://www.browsersync.io/) for synchronized browser testing
-* [Blade](https://laravel.com/docs/5.8/blade) as a templating engine
-* [Bootstrap 4](https://getbootstrap.com/) (optional)
+- Harness the power of [Laravel](https://laravel.com) and its available packages thanks to [Acorn](https://github.com/roots/acorn).
+- Clean, efficient theme templating utilizing [Laravel Blade](https://laravel.com/docs/latest/blade).
+- Easy [Browsersync](http://www.browsersync.io/) support alongside asset compilation, concatenating, and minification powered by [Laravel Mix](https://github.com/JeffreyWay/laravel-mix).
+- Out of the box support for [Bootstrap 5](https://getbootstrap.com/) and [jQuery](https://jquery.com).
+- A clean starting point for theme styles using [Sass](https://sass-lang.com/).

 See a working example at [roots-example-project.com](https://roots-example-project.com/).

@@ -66,11 +66,11 @@ See a working example at [roots-example-project.com](https://roots-example-proje

 Make sure all dependencies have been installed before moving on:

-* [WordPress](https://wordpress.org/) >= 5.4
-* [PHP](https://secure.php.net/manual/en/install.php) >= 7.2.0 (with [`php-mbstring`](https://secure.php.net/manual/en/book.mbstring.php) enabled)
-* [Composer](https://getcomposer.org/download/)
-* [Node.js](http://nodejs.org/) >= 8.0.0
-* [Yarn](https://yarnpkg.com/en/docs/install)
+- [WordPress](https://wordpress.org/) >= 5.4
+- [PHP](https://secure.php.net/manual/en/install.php) >= 7.2.5 (with [`php-mbstring`](https://secure.php.net/manual/en/book.mbstring.php) enabled)
+- [Composer](https://getcomposer.org/download/)
+- [Node.js](http://nodejs.org/) >= 12.0.0
+- [Yarn](https://yarnpkg.com/en/docs/install)

 ## Theme installation

@@ -83,18 +83,16 @@ $ composer create-project roots/sage your-theme-name

 To install the latest development version of Sage, add `dev-master` to the end of the command:

-```shell
+```sh
 $ composer create-project roots/sage your-theme-name dev-master
 ```

-During theme installation you will have options to update `style.css` theme headers, select a CSS framework, and configure Browsersync.
-
 ## Theme structure

 ```sh
 themes/your-theme-name/   # → Root of your Sage based theme
 ├── app/                  # → Theme PHP
-│   ├── Composers/        # → View composers
+│   ├── View/             # → View models
 │   ├── Providers/        # → Service providers
 │   ├── admin.php         # → Theme customizer setup
 │   ├── filters.php       # → Theme filters
@@ -104,22 +102,24 @@ themes/your-theme-name/   # → Root of your Sage based theme
 │   ├── app.php           # → Application configuration
 │   ├── assets.php        # → Asset configuration
 │   ├── filesystems.php   # → Filesystems configuration
+│   ├── logging.php       # → Logging configuration
 │   └── view.php          # → View configuration
 ├── composer.json         # → Autoloading for `app/` files
 ├── composer.lock         # → Composer lock file (never edit)
 ├── dist/                 # → Built theme assets (never edit)
-├── functions.php         # → Composer autoloader, Acorn bootloader
-├── index.php             # → Never manually edit
+├── functions.php         # → Theme bootloader
+├── index.php             # → Theme template wrapper
 ├── node_modules/         # → Node.js packages (never edit)
 ├── package.json          # → Node.js dependencies and scripts
 ├── resources/            # → Theme assets and templates
 │   ├── assets/           # → Front-end assets
 │   │   ├── fonts/        # → Theme fonts
 │   │   ├── images/       # → Theme images
-│   │   ├── scripts/      # → Theme JS
+│   │   ├── scripts/      # → Theme javascript
 │   │   └── styles/       # → Theme stylesheets
 │   └── views/            # → Theme templates
 │       ├── components/   # → Component templates
+│       ├── form/         # → Form templates
 │       ├── layouts/      # → Base templates
 │       └── partials/     # → Partial templates
 ├── screenshot.png        # → Theme screenshot for WP admin
@@ -135,18 +135,18 @@ Edit `app/setup.php` to enable or disable theme features, setup navigation menus

 ## Theme development

-* Run `yarn` from the theme directory to install dependencies
-* Update `webpack.mix.js` with your local dev URL
+- Run `yarn` from the theme directory to install dependencies
+- Update `webpack.mix.js` with your local dev URL

 ### Build commands

-* `yarn start` — Compile assets when file changes are made, start Browsersync session
-* `yarn build` — Compile and optimize the files in your assets directory
-* `yarn build:production` — Compile assets for production
+- `yarn start` — Compile assets when file changes are made, start Browsersync session
+- `yarn build` — Compile and optimize the files in your assets directory
+- `yarn build:production` — Compile assets for production

 ## Documentation

-* [Sage documentation](https://roots.io/sage/docs/)
+- [Sage documentation](https://roots.io/sage/docs/)

 ## Contributing

@@ -154,7 +154,7 @@ Contributions are welcome from everyone. We have [contributing guidelines](https

 ## Sage sponsors

-Help support our open-source development efforts by [becoming a patron](https://www.patreon.com/rootsdev).
+Help support our open-source development efforts by [becoming a sponsor](https://github.com/sponsors/roots).

 <a href="https://kinsta.com/?kaid=OFDHAJIXUDIV"><img src="https://cdn.roots.io/app/uploads/kinsta.svg" alt="Kinsta" width="200" height="150"></a> <a href="https://k-m.com/"><img src="https://cdn.roots.io/app/uploads/km-digital.svg" alt="KM Digital" width="200" height="150"></a> <a href="https://carrot.com/"><img src="https://cdn.roots.io/app/uploads/carrot.svg" alt="Carrot" width="200" height="150"></a>

@@ -162,8 +162,8 @@ Help support our open-source development efforts by [becoming a patron](https://

 Keep track of development and community news.

-* Participate on the [Roots Discourse](https://discourse.roots.io/)
-* Follow [@rootswp on Twitter](https://twitter.com/rootswp)
-* Read and subscribe to the [Roots Blog](https://roots.io/blog/)
-* Subscribe to the [Roots Newsletter](https://roots.io/subscribe/)
-* Listen to the [Roots Radio podcast](https://roots.io/podcast/)
+- Participate on the [Roots Discourse](https://discourse.roots.io/)
+- Follow [@rootswp on Twitter](https://twitter.com/rootswp)
+- Read and subscribe to the [Roots Blog](https://roots.io/blog/)
+- Subscribe to the [Roots Newsletter](https://roots.io/subscribe/)
+- Listen to the [Roots Radio podcast](https://roots.io/podcast/)
--- a/app/admin.php
+++ b/app/admin.php
@@ -11,7 +11,7 @@ use WP_Customize_Manager;
 use function Roots\asset;

 /**
- * Register the `.brand` selector as the blogname.
+ * Register the `.brand` selector to the blogname.
 *
 * @param  \WP_Customize_Manager $wp_customize
 * @return void
--- a/app/setup.php
+++ b/app/setup.php
@@ -93,7 +93,15 @@ add_action('after_setup_theme', function () {
     * Enable HTML5 markup support
     * @link https://developer.wordpress.org/reference/functions/add_theme_support/#html5
     */
-    add_theme_support('html5', ['caption', 'comment-form', 'comment-list', 'gallery', 'search-form', 'script', 'style']);
+    add_theme_support('html5', [
+        'caption',
+        'comment-form',
+        'comment-list',
+        'gallery',
+        'search-form',
+        'script',
+        'style'
+    ]);

    /**
     * Enable selective refresh for widgets in customizer
@@ -107,8 +115,8 @@ add_action('after_setup_theme', function () {
     */
    add_theme_support('editor-color-palette', [
        [
-            'name'  => __('Primary', 'sage'),
-            'slug'  => 'primary',
+            'name' => __('Primary', 'sage'),
+            'slug' => 'primary',
            'color' => '#525ddc',
        ]
    ]);
--- a/composer.json
+++ b/composer.json
@@ -40,7 +40,7 @@
  },
  "require": {
    "php": "^7.2.5",
-    "roots/acorn": "^1.0.1"
+    "roots/acorn": "^1.1"
  },
  "require-dev": {
    "filp/whoops": "^2.7",
--- a/composer.lock
+++ b/composer.lock
--- a/config/filesystems.php
+++ b/config/filesystems.php
@@ -58,6 +58,13 @@ return [
            'visibility' => 'public',
        ],

+        'sage' => [
+            'driver' => 'local',
+            'root' => get_theme_file_path(),
+            'url' => get_theme_file_uri(),
+            'visibility' => 'public',
+        ],
+
        's3' => [
            'driver' => 's3',
            'key' => env('AWS_ACCESS_KEY_ID'),
--- a/package.json
+++ b/package.json
@@ -23,31 +23,31 @@
    "translate:js": "wp i18n make-json ./resources/languages --no-purge --pretty-print"
  },
  "devDependencies": {
-    "@tinypixelco/laravel-mix-wp-blocks": "^1.0.0",
-    "@wordpress/babel-preset-default": "^4.13.0",
-    "@wordpress/browserslist-config": "^2.6.0",
-    "@wordpress/dependency-extraction-webpack-plugin": "^2.5.0",
+    "@tinypixelco/laravel-mix-wp-blocks": "^1.1.0",
+    "@wordpress/babel-preset-default": "^4.17.0",
+    "@wordpress/browserslist-config": "^2.7.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^2.8.0",
    "babel-eslint": "^10.1.0",
-    "browser-sync": "^2.26.7",
+    "browser-sync": "^2.26.12",
    "browser-sync-webpack-plugin": "^2.0.1",
    "cross-env": "^7.0.2",
-    "eslint": "^6.8.0",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint": "^7.7.0",
+    "eslint-plugin-import": "^2.22.0",
    "laravel-mix": "^5.0.4",
    "laravel-mix-copy-watched": "^2.2.4",
-    "laravel-mix-purgecss": "^5.0.0-rc.1",
+    "laravel-mix-purgecss": "^5.0.0",
    "npm-run-all": "^4.1",
-    "purgecss-with-wordpress": "^2.1.0",
+    "purgecss-with-wordpress": "^2.3.0",
    "rimraf": "^3.0.2",
-    "sass": "^1.26.3",
-    "sass-loader": "^8.0.2",
-    "stylelint": "^13.3.3",
+    "sass": "^1.26.10",
+    "sass-loader": "^9.0.3",
+    "stylelint": "^13.6.1",
    "stylelint-config-standard": "^20.0.0",
    "vue-template-compiler": "^2.6.11"
  },
  "dependencies": {
-    "bootstrap": "^4.5.0",
-    "jquery": "^3.5.0",
+    "bootstrap": "^4.5.2",
+    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  }
 }
--- a/resources/assets/scripts/editor.js
+++ b/resources/assets/scripts/editor.js
@@ -1,9 +1,6 @@
 import '@wordpress/edit-post';
 import domReady from '@wordpress/dom-ready';
-import {
-  unregisterBlockStyle,
-  registerBlockStyle,
-} from '@wordpress/blocks';
+import { unregisterBlockStyle, registerBlockStyle } from '@wordpress/blocks';

 domReady(() => {
  unregisterBlockStyle('core/button', 'outline');
--- a/resources/views/forms/search.blade.php
+++ b/resources/views/forms/search.blade.php
@@ -1,7 +1,16 @@
 <form role="search" method="get" class="search-form" action="{{ home_url('/') }}">
  <label>
-    <span class="screen-reader-text">{{ _x('Search for:', 'label', 'sage') }}</span>
-    <input type="search" class="search-field" placeholder="{!! esc_attr_x('Search &hellip;', 'placeholder', 'sage') !!}" value="{{ get_search_query() }}" name="s">
+    <span class="screen-reader-text">
+      {{ _x('Search for:', 'label', 'sage') }}
+    </span>
+
+    <input
+      type="search"
+      class="search-field"
+      placeholder="{!! esc_attr_x('Search &hellip;', 'placeholder', 'sage') !!}"
+      value="{{ get_search_query() }}"
+      name="s"
+    >
  </label>

  <input type="submit" class="button" value="{{ esc_attr_x('Search', 'submit button', 'sage') }}">
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -14,31 +14,31 @@ require('laravel-mix-copy-watched');
 |
 */

-mix.setPublicPath('./dist')
-   .browserSync('sage.test');
+mix
+  .setPublicPath('./dist')
+  .browserSync('sage.test');

-mix.sass('resources/assets/styles/app.scss', 'styles')
-   .sass('resources/assets/styles/editor.scss', 'styles')
-   .purgeCss({
-     whitelist: require('purgecss-with-wordpress').whitelist,
-     whitelistPatterns: require('purgecss-with-wordpress').whitelistPatterns,
-   });
+mix
+  .sass('resources/assets/styles/app.scss', 'styles')
+  .sass('resources/assets/styles/editor.scss', 'styles')
+  .purgeCss({
+    extend: { content: [path.join(__dirname, 'index.php')] },
+    whitelist: require('purgecss-with-wordpress').whitelist,
+    whitelistPatterns: require('purgecss-with-wordpress').whitelistPatterns,
+  });

-mix.js('resources/assets/scripts/app.js', 'scripts')
-   .js('resources/assets/scripts/customizer.js', 'scripts')
-   .blocks('resources/assets/scripts/editor.js', 'scripts')
-   .extract();
+mix
+  .js('resources/assets/scripts/app.js', 'scripts')
+  .js('resources/assets/scripts/customizer.js', 'scripts')
+  .blocks('resources/assets/scripts/editor.js', 'scripts')
+  .extract();

-mix.copyWatched('resources/assets/images/**', 'dist/images')
-   .copyWatched('resources/assets/fonts/**', 'dist/fonts');
+mix
+  .copyWatched('resources/assets/images/**', 'dist/images')
+  .copyWatched('resources/assets/fonts/**', 'dist/fonts');

-mix.autoload({
-  jquery: ['$', 'window.jQuery'],
-});
-
-mix.options({
-  processCssUrls: false,
-});
-
-mix.sourceMaps(false, 'source-map')
-   .version();
+mix
+  .autoload({ jquery: ['$', 'window.jQuery'] })
+  .options({ processCssUrls: false })
+  .sourceMaps(false, 'source-map')
+  .version();
--- a/yarn.lock
+++ b/yarn.lock