framework/sage
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(assets): Change default CSS framework to Tailwind

Browse Source 
* enhance(view): Add light default styling for Tailwind
* chore(view): Clean up unnecessary selectors and spacing
* feat(acorn): Update Acorn for Laravel 8.x
* chore(acorn): Create default `bootstrap/` project directory for Laravel 8.x
* refactor(acorn): Split the Acorn bootloader between `functions.php` and `bootstrap/app.php` to coincide with Laravel
* refactor(assets): Lighten the out of the box CSS boilerplate
* refactor(assets): Rename `dist/` to `public/` to coincide with Laravel
* refactor(assets): Flatten the `assets/` directory into `resources/` to coincide with Laravel
* refactor(assets): Rename `scripts/` to `js/` to coincide with Laravel
* refactor(assets): Rename `styles/` to `css/` to coincide with Laravel
* feat(deps): Update to Laravel Mix ^6.0
* chore(deps): Change Mix-related package.json `scripts` to the new `mix` binary
* chore(deps): Remove PurgeCSS in favor of Tailwind's built in purge
* chore(deps): Remove deprecated/unnecessary/unused dependencies
* chore(deps): Bump minimum PHP version to 7.3 to coincide with Laravel 8.x
This commit is contained in:
Brandon
2021-01-14 13:06:51 -06:00
parent 33005e59b4
commit 5518ea165a
42 changed files with 3707 additions and 4151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -1,5 +1,5 @@
/node_modules
/vendor
/dist
/public
npm-debug.log
yarn-error.log

13
README.md
View File

@@ -98,6 +98,8 @@ themes/your-theme-name/ # → Root of your Sage based theme
│ ├── filters.php # → Theme filters
│ ├── helpers.php # → Helper functions
│ └── setup.php # → Theme setup
├── bootstrap/ # → Acorn bootstrap
│ ├── cache/ # → Acorn cache location (never edit)
├── config/ # → Config files
│ ├── app.php # → Application configuration
│ ├── assets.php # → Asset configuration
@@ -106,17 +108,16 @@ themes/your-theme-name/ # → Root of your Sage based theme
│ └── view.php # → View configuration
├── composer.json # → Autoloading for `app/` files
├── composer.lock # → Composer lock file (never edit)
├── dist/ # → Built theme assets (never edit)
├── public/ # → Built theme assets (never 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 javascript
│ │ └── styles/ # → Theme stylesheets
│ ├── fonts/ # → Theme fonts
│ ├── images/ # → Theme images
│ ├── js/ # → Theme javascript
│ ├── css/ # → Theme stylesheets
│ └── views/ # → Theme templates
│ ├── components/ # → Component templates
│ ├── form/ # → Form templates

16
app/View/Components/Alert.php
View File

@@ -20,6 +20,18 @@ class Alert extends Component
*/
public $message;
/**
* The alert types.
*
* @var array
*/
public $types = [
'default' => 'text-indigo-50 bg-indigo-400',
'success' => 'text-green-50 bg-green-400',
'caution' => 'text-yellow-50 bg-yellow-400',
'warning' => 'text-red-50 bg-red-400',
];
/**
* Create the component instance.
*
@@ -27,9 +39,9 @@ class Alert extends Component
* @param string $message
* @return void
*/
public function __construct($type = 'primary', $message = null)
public function __construct($type = 'default', $message = null)
{
$this->type = $type;
$this->type = $this->types[$type] ?? $this->types['default'];
$this->message = $message;
}

2
app/admin.php
View File

@@ -32,5 +32,5 @@ add_action('customize_register', function (WP_Customize_Manager $wp_customize) {
* @return void
*/
add_action('customize_preview_init', function () {
wp_enqueue_script('sage/customizer.js', asset('scripts/customizer.js')->uri(), ['customize-preview'], null, true);
wp_enqueue_script('sage/customizer.js', asset('js/customizer.js')->uri(), ['customize-preview'], null, true);
});

2
app/filters.php
View File

@@ -12,5 +12,5 @@ namespace App;
* @return string
*/
add_filter('excerpt_more', function () {
return ' &hellip; <a href="' . get_permalink() . '">' . __('Continued', 'sage') . '</a>';
return sprintf(' &hellip; <a href="%s">%s</a>', get_permalink(), __('Continued', 'sage'));
});

22
app/setup.php
View File

@@ -14,16 +14,16 @@ use function Roots\asset;
* @return void
*/
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script('sage/vendor.js', asset('scripts/vendor.js')->uri(), ['jquery'], null, true);
wp_enqueue_script('sage/app.js', asset('scripts/app.js')->uri(), ['sage/vendor.js', 'jquery'], null, true);
wp_enqueue_script('sage/vendor.js', asset('js/vendor.js')->uri(), ['jquery'], null, true);
wp_enqueue_script('sage/app.js', asset('js/app.js')->uri(), ['sage/vendor.js'], null, true);
wp_add_inline_script('sage/vendor.js', asset('scripts/manifest.js')->contents(), 'before');
wp_add_inline_script('sage/vendor.js', asset('js/manifest.js')->contents(), 'before');
if (is_single() && comments_open() && get_option('thread_comments')) {
wp_enqueue_script('comment-reply');
}
wp_enqueue_style('sage/app.css', asset('styles/app.css')->uri(), false, null);
wp_enqueue_style('sage/app.css', asset('css/app.css')->uri(), false, null);
}, 100);
/**
@@ -32,14 +32,14 @@ add_action('wp_enqueue_scripts', function () {
* @return void
*/
add_action('enqueue_block_editor_assets', function () {
if ($manifest = asset('scripts/manifest.asset.php')->get()) {
wp_enqueue_script('sage/vendor.js', asset('scripts/vendor.js')->uri(), $manifest['dependencies'], null, true);
wp_enqueue_script('sage/editor.js', asset('scripts/editor.js')->uri(), ['sage/vendor.js'], null, true);
if ($manifest = asset('js/manifest.asset.php')->get()) {
wp_enqueue_script('sage/vendor.js', asset('js/vendor.js')->uri(), ...array_values($manifest));
wp_enqueue_script('sage/editor.js', asset('js/editor.js')->uri(), ['sage/vendor.js'], null, true);
wp_add_inline_script('sage/vendor.js', asset('scripts/manifest.js')->contents(), 'before');
wp_add_inline_script('sage/vendor.js', asset('js/manifest.js')->contents(), 'before');
}
wp_enqueue_style('sage/editor.css', asset('styles/editor.css')->uri(), false, null);
wp_enqueue_style('sage/editor.css', asset('css/editor.css')->uri(), false, null);
}, 100);
/**
@@ -117,8 +117,8 @@ add_action('after_setup_theme', function () {
*/
add_theme_support('editor-color-palette', [
[
'name' => __('Primary', 'sage'),
'slug' => 'primary',
'name' => __('Brand', 'sage'),
'slug' => 'brand',
'color' => '#525ddc',
]
]);

62
bootstrap/app.php Normal file
View File

@@ -0,0 +1,62 @@
<?php
/*
|--------------------------------------------------------------------------
| Create The Application
|--------------------------------------------------------------------------
|
| The first thing we will do is create a new Acorn application instance
| which serves as the "glue" for all the components of Laravel, and is
| the IoC container for the system binding all of the various parts.
|
*/
$app = new Roots\Acorn\Bootloader();
/*
|--------------------------------------------------------------------------
| Register Sage Theme Files
|--------------------------------------------------------------------------
|
| Out of the box, Sage ships with categorically named theme files
| containing common functionality and setup to be bootstrapped with your
| theme. Simply add (or remove) files from the array below to change what
| is registered alongside Sage.
|
*/
collect(['helpers', 'setup', 'filters', 'admin'])
->each(function ($file) {
if (! locate_template($file = "app/{$file}.php", true, true)) {
wp_die(
sprintf(__('Error locating <code>%s</code> for inclusion.', 'sage'), $file)
);
}
});
/*
|--------------------------------------------------------------------------
| Enable Sage Theme Support
|--------------------------------------------------------------------------
|
| Once our theme files are registered and available for use, we are almost
| ready to boot our application. But first, we need to signal to Acorn
| that we will need to initialize the necessary service providers built in
| for Sage when booting.
|
*/
add_theme_support('sage');
/*
|--------------------------------------------------------------------------
| Return The Application
|--------------------------------------------------------------------------
|
| This script returns the application instance. The instance is given to
| the calling script so we can separate the building of the instances
| from the actual running of the application and sending responses.
|
*/
return $app;

2
bootstrap/cache/.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
*
!.gitignore

8
composer.json
View File

@@ -39,11 +39,11 @@
}
},
"require": {
"php": "^7.2.5",
"roots/acorn": "^1.1"
"php": "^7.3|^8.0",
"roots/acorn": "dev-laravel-85"
},
"require-dev": {
"filp/whoops": "^2.7",
"filp/whoops": "^2.9",
"squizlabs/php_codesniffer": "^3.5"
},
"suggest": {
@@ -59,7 +59,7 @@
"prefer-stable": true,
"scripts": {
"lint": [
"phpcs --ignore=index.php,vendor,resources,storage,dist --extensions=php --standard=PSR12 ."
"phpcs --ignore=index.php,bootstrap,public,resources,storage,vendor,node_modules --extensions=php --standard=PSR12 ."
],
"post-autoload-dump": [
"Roots\\Acorn\\ComposerScripts::postAutoloadDump"

1206
composer.lock generated
View File

File diff suppressed because it is too large Load Diff

120
config/app.php
View File

@@ -24,7 +24,7 @@ return [
|
| This value determines the "environment" your application is currently
| running in. This may determine how you prefer to configure various
| services your application utilizes. Set this in your ".env" file.
| services the application utilizes. Set this in your ".env" file.
|
*/
@@ -56,19 +56,6 @@ return [
'timezone' => get_option('timezone_string', 'UTC'),
/*
|--------------------------------------------------------------------------
| Preflight Checks
|--------------------------------------------------------------------------
|
| This value allows service providers to execute preflight tasks after
| booting. These tasks include creating directories, databases, and files,
| or doing any other checks to ensure the service is functional.
|
*/
'preflight' => env('WP_ENV', 'production') !== 'production',
/*
|--------------------------------------------------------------------------
| Global Helpers
@@ -108,6 +95,21 @@ return [
'fallback_locale' => 'en',
/*
|--------------------------------------------------------------------------
| Encryption Key
|--------------------------------------------------------------------------
|
| This key is used by the Illuminate encrypter service and should be set
| to a random, 32 character string, otherwise these encrypted strings
| will not be safe. Please do this before deploying an application!
|
*/
'key' => env('APP_KEY'),
'cipher' => 'AES-256-CBC',
/*
|--------------------------------------------------------------------------
| Autoloaded Service Providers
@@ -120,15 +122,42 @@ return [
*/
'providers' => [
/**
* Package Service Providers
*/
// ExamplePackage\Providers\ExamplePackageServiceProvider::class,
/**
* Application Service Providers
/*
* Laravel Framework Service Providers...
*/
// Illuminate\Auth\AuthServiceProvider::class,
// Illuminate\Broadcasting\BroadcastServiceProvider::class,
Illuminate\Bus\BusServiceProvider::class,
Illuminate\Cache\CacheServiceProvider::class,
// Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
// Illuminate\Cookie\CookieServiceProvider::class,
// Illuminate\Database\DatabaseServiceProvider::class,
// Illuminate\Encryption\EncryptionServiceProvider::class,
Illuminate\Filesystem\FilesystemServiceProvider::class,
// Illuminate\Foundation\Providers\FoundationServiceProvider::class,
// Illuminate\Hashing\HashServiceProvider::class,
// Illuminate\Mail\MailServiceProvider::class,
// Illuminate\Notifications\NotificationServiceProvider::class,
// Illuminate\Pagination\PaginationServiceProvider::class,
// Illuminate\Pipeline\PipelineServiceProvider::class,
// Illuminate\Queue\QueueServiceProvider::class,
// Illuminate\Redis\RedisServiceProvider::class,
// Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
// Illuminate\Session\SessionServiceProvider::class,
// Illuminate\Translation\TranslationServiceProvider::class,
// Illuminate\Validation\ValidationServiceProvider::class,
Illuminate\View\ViewServiceProvider::class,
/*
* Package Service Providers...
*/
/*
* Application Service Providers...
*/
App\Providers\ThemeServiceProvider::class,
],
/*
@@ -143,41 +172,44 @@ return [
*/
'aliases' => [
'App' => Illuminate\Support\Facades\App::class,
'Arr' => Illuminate\Support\Arr::class,
'Artisan' => Illuminate\Support\Facades\Artisan::class,
'Auth' => Illuminate\Support\Facades\Auth::class,
// 'Artisan' => Illuminate\Support\Facades\Artisan::class,
// 'Auth' => Illuminate\Support\Facades\Auth::class,
'Blade' => Illuminate\Support\Facades\Blade::class,
'Broadcast' => Illuminate\Support\Facades\Broadcast::class,
// 'Broadcast' => Illuminate\Support\Facades\Broadcast::class,
'Bus' => Illuminate\Support\Facades\Bus::class,
'Cache' => Illuminate\Support\Facades\Cache::class,
'Config' => Illuminate\Support\Facades\Config::class,
'Cookie' => Illuminate\Support\Facades\Cookie::class,
'Crypt' => Illuminate\Support\Facades\Crypt::class,
'DB' => Illuminate\Support\Facades\DB::class,
'Eloquent' => Illuminate\Database\Eloquent\Model::class,
// 'Cookie' => Illuminate\Support\Facades\Cookie::class,
// 'Crypt' => Illuminate\Support\Facades\Crypt::class,
// 'DB' => Illuminate\Support\Facades\DB::class,
// 'Eloquent' => Illuminate\Database\Eloquent\Model::class,
'Event' => Illuminate\Support\Facades\Event::class,
'File' => Illuminate\Support\Facades\File::class,
'Gate' => Illuminate\Support\Facades\Gate::class,
'Hash' => Illuminate\Support\Facades\Hash::class,
'Http' => Illuminate\Support\Facades\Http::class,
'Lang' => Illuminate\Support\Facades\Lang::class,
// 'Gate' => Illuminate\Support\Facades\Gate::class,
// 'Hash' => Illuminate\Support\Facades\Hash::class,
// 'Http' => Illuminate\Support\Facades\Http::class,
// 'Lang' => Illuminate\Support\Facades\Lang::class,
'Log' => Illuminate\Support\Facades\Log::class,
'Mail' => Illuminate\Support\Facades\Mail::class,
'Notification' => Illuminate\Support\Facades\Notification::class,
'Password' => Illuminate\Support\Facades\Password::class,
'Queue' => Illuminate\Support\Facades\Queue::class,
'Redirect' => Illuminate\Support\Facades\Redirect::class,
'Redis' => Illuminate\Support\Facades\Redis::class,
'Request' => Illuminate\Support\Facades\Request::class,
'Response' => Illuminate\Support\Facades\Response::class,
'Route' => Illuminate\Support\Facades\Route::class,
'Schema' => Illuminate\Support\Facades\Schema::class,
'Session' => Illuminate\Support\Facades\Session::class,
// 'Mail' => Illuminate\Support\Facades\Mail::class,
// 'Notification' => Illuminate\Support\Facades\Notification::class,
// 'Password' => Illuminate\Support\Facades\Password::class,
// 'Queue' => Illuminate\Support\Facades\Queue::class,
// 'Redirect' => Illuminate\Support\Facades\Redirect::class,
// 'Redis' => Illuminate\Support\Facades\Redis::class,
// 'Request' => Illuminate\Support\Facades\Request::class,
// 'Response' => Illuminate\Support\Facades\Response::class,
// 'Route' => Illuminate\Support\Facades\Route::class,
// 'Schema' => Illuminate\Support\Facades\Schema::class,
// 'Session' => Illuminate\Support\Facades\Session::class,
'Storage' => Illuminate\Support\Facades\Storage::class,
'Str' => Illuminate\Support\Str::class,
'URL' => Illuminate\Support\Facades\URL::class,
'Validator' => Illuminate\Support\Facades\Validator::class,
// 'URL' => Illuminate\Support\Facades\URL::class,
// 'Validator' => Illuminate\Support\Facades\Validator::class,
'View' => Illuminate\Support\Facades\View::class,
],
];

6
config/assets.php
View File

@@ -34,9 +34,9 @@ return [
'manifests' => [
'theme' => [
'strategy' => 'relative',
'path' => get_theme_file_path('/dist'),
'uri' => get_theme_file_uri('/dist'),
'manifest' => get_theme_file_path('/dist/mix-manifest.json'),
'path' => get_theme_file_path('/public'),
'uri' => get_theme_file_uri('/public'),
'manifest' => get_theme_file_path('/public/mix-manifest.json'),
]
]
];

21
config/filesystems.php
View File

@@ -17,19 +17,6 @@ return [
'default' => env('FILESYSTEM_DRIVER', 'local'),
/*
|--------------------------------------------------------------------------
| Default Cloud Filesystem Disk
|--------------------------------------------------------------------------
|
| Many applications store files both locally and in the cloud. For this
| reason, you may specify a default "cloud" driver here. This driver
| will be bound as the Cloud disk implementation in the container.
|
*/
'cloud' => env('FILESYSTEM_CLOUD', 's3'),
/*
|--------------------------------------------------------------------------
| Filesystem Disks
@@ -44,11 +31,10 @@ return [
*/
'disks' => [
'local' => [
'driver' => 'local',
'root' => WP_CONTENT_DIR,
'url' => content_url(),
'visibility' => 'public',
],
'wordpress' => [
@@ -58,7 +44,7 @@ return [
'visibility' => 'public',
],
'sage' => [
'theme' => [
'driver' => 'local',
'root' => get_theme_file_path(),
'url' => get_theme_file_uri(),
@@ -72,6 +58,9 @@ return [
'region' => env('AWS_DEFAULT_REGION'),
'bucket' => env('AWS_BUCKET'),
'url' => env('AWS_URL'),
'endpoint' => env('AWS_ENDPOINT'),
],
],
];

21
config/logging.php
View File

@@ -46,28 +46,28 @@ return [
'single' => [
'driver' => 'single',
'path' => storage_path('logs/sage.log'),
'level' => 'debug',
'path' => storage_path('logs/acorn.log'),
'level' => env('LOG_LEVEL', 'debug'),
],
'daily' => [
'driver' => 'daily',
'path' => storage_path('logs/sage.log'),
'level' => 'debug',
'path' => storage_path('logs/acorn.log'),
'level' => env('LOG_LEVEL', 'debug'),
'days' => 14,
],
'slack' => [
'driver' => 'slack',
'url' => env('LOG_SLACK_WEBHOOK_URL'),
'username' => 'App Log',
'username' => 'Acorn Log',
'emoji' => ':boom:',
'level' => 'critical',
'level' => env('LOG_LEVEL', 'critical'),
],
'papertrail' => [
'driver' => 'monolog',
'level' => 'debug',
'level' => env('LOG_LEVEL', 'debug'),
'handler' => SyslogUdpHandler::class,
'handler_with' => [
'host' => env('PAPERTRAIL_URL'),
@@ -86,12 +86,12 @@ return [
'syslog' => [
'driver' => 'syslog',
'level' => 'debug',
'level' => env('LOG_LEVEL', 'debug'),
],
'errorlog' => [
'driver' => 'errorlog',
'level' => 'debug',
'level' => env('LOG_LEVEL', 'debug'),
],
'null' => [
@@ -100,7 +100,8 @@ return [
],
'emergency' => [
'path' => storage_path('logs/sage.log'),
'path' => storage_path('logs/acorn.log'),
],
],
];

47
functions.php
View File

@@ -19,50 +19,13 @@ require $composer;
/*
|--------------------------------------------------------------------------
| Register Sage Theme Files
| Run The Theme
|--------------------------------------------------------------------------
|
| Out of the box, Sage ships with categorically named theme files
| containing common functionality and setup to be bootstrapped with your
| theme. Simply add (or remove) files from the array below to change what
| is registered alongside Sage.
| Once we have the theme booted, we can handle the incoming request using
| the application's HTTP kernel. Then, we will send the response back
| to this client's browser, allowing them to enjoy our application.
|
*/
collect(['helpers', 'setup', 'filters', 'admin'])
->each(function ($file) {
$file = "app/{$file}.php";
if (! locate_template($file, true, true)) {
wp_die(
sprintf(__('Error locating <code>%s</code> for inclusion.', 'sage'), $file)
);
}
});
/*
|--------------------------------------------------------------------------
| Enable Sage Theme Support
|--------------------------------------------------------------------------
|
| Once our theme files are registered and available for use, we are almost
| ready to boot our application. But first, we need to signal to Acorn
| that we will need to initialize the necessary service providers built in
| for Sage when booting.
|
*/
add_theme_support('sage');
/*
|--------------------------------------------------------------------------
| Turn On The Lights
|--------------------------------------------------------------------------
|
| We are ready to bootstrap the Acorn framework and get it ready for use.
| Acorn will provide us support for Blade templating as well as the ability
| to utilize the Laravel framework and its beautifully written packages.
|
*/
new Roots\Acorn\Bootloader();
require_once __DIR__ . '/bootstrap/app.php';

67
package.json
View File

@@ -3,54 +3,43 @@
"browserslist": [
"extends @wordpress/browserslist-config"
],
"engines" : {
"node" : ">=12.0.0"
"engines": {
"node": ">=12.14.0"
},
"scripts": {
"build": "cross-env NODE_ENV=development run-s mix",
"build:production": "cross-env NODE_ENV=production run-s clean mix",
"start": "cross-env NODE_ENV=development run-s \"mix -- --watch\"",
"hot": "cross-env NODE_ENV=development run-s build mix:hot",
"mix": "webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"mix:hot": "webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"clean": "run-p clean:*",
"clean:dist": "rimraf dist",
"clean:cache": "rimraf storage/framework/cache/*.php storage/framework/cache/data/*.php",
"clean:views": "rimraf storage/framework/views/*.php",
"lint": "run-s -c lint:*",
"lint:scripts": "eslint resources/assets/scripts",
"lint:styles": "stylelint \"resources/assets/**/*.{vue,css,sass,scss,less}\"",
"test": "run-s -c lint",
"translate": "run-s -c translate:*",
"translate:pot": "wp i18n make-pot . ./resources/languages/sage.pot --ignore-domain --include=\"app,resources/assets,resources/views\"",
"translate:js": "wp i18n make-json ./resources/languages --no-purge --pretty-print"
"build": "mix",
"build:production": "mix --production",
"start": "mix watch",
"hot": "mix watch --hot",
"clean": "wp acorn optimize:clean",
"lint": "npm run lint:js && npm run lint:css",
"lint:js": "eslint resources/js",
"lint:css": "stylelint \"resources/**/*.{css,scss,vue}\"",
"translate": "npm run translate:pot && npm run translate:js",
"translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --ignore-domain --include=\"app,resources\"",
"translate:js": "wp i18n make-json ./resources/lang --pretty-print"
},
"devDependencies": {
"@tailwindcss/typography": "^0.3.1",
"@tinypixelco/laravel-mix-wp-blocks": "^1.1.0",
"@wordpress/babel-preset-default": "^4.17.0",
"@wordpress/babel-preset-default": "^4.20.0",
"@wordpress/browserslist-config": "^2.7.0",
"@wordpress/dependency-extraction-webpack-plugin": "^2.8.0",
"@wordpress/dependency-extraction-webpack-plugin": "^2.9.0",
"babel-eslint": "^10.1.0",
"browser-sync": "^2.26.12",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^7.0.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",
"npm-run-all": "^4.1",
"purgecss-with-wordpress": "^2.3.0",
"rimraf": "^3.0.2",
"sass": "^1.26.10",
"sass-loader": "^9.0.3",
"stylelint": "^13.6.1",
"browser-sync": "^2.26.13",
"browser-sync-webpack-plugin": "^2.3.0",
"cross-env": "^7.0.3",
"eslint": "^7.17.0",
"eslint-plugin-import": "^2.22.1",
"laravel-mix": "^6.0.9",
"postcss": "^8.1",
"sass": "^1.32.4",
"sass-loader": "10.1.1",
"stylelint": "^13.8.0",
"stylelint-config-standard": "^20.0.0",
"vue-template-compiler": "^2.6.11"
"tailwindcss": "^2.0.2"
},
"dependencies": {
"bootstrap": "^4.5.3",
"jquery": "^3.5.1",
"popper.js": "^1.16.1"
"jquery": "^3.5.1"
}
}

12
resources/assets/styles/app.scss
View File

@@ -1,12 +0,0 @@
/** Config */
@import 'config/variables';
@import 'config/external';
/** Common */
@import 'common/global';
/** Components */
@import 'components';
/** Partials */
@import 'partials/header';

22
resources/assets/styles/common/global.scss
View File

@@ -1,22 +0,0 @@
/**
* Global
*/
a {
color: map-get($theme-colors, 'primary');
}
/**
* Block editor color palette utilities
* @see https://git.io/JeyD6
*/
@each $color-name, $color-value in $theme-colors {
.has-#{$color-name}-color {
color: $color-value;
}
.has-#{$color-name}-background-color {
background-color: $color-value;
}
}

36
resources/assets/styles/components/button.scss
View File

@@ -1,36 +0,0 @@
/**
* Button
*/
.wp-block-button {
&__link {
font-size: $btn-font-size;
line-height: $btn-line-height;
padding-bottom: $btn-padding-y;
padding-left: $btn-padding-x;
padding-right: $btn-padding-x;
padding-top: $btn-padding-y;
&:hover {
text-decoration: none;
}
}
&.is-style-outline {
.wp-block-button__link {
@include button-outline-variant(
map-get($theme-colors, 'primary'),
map-get($theme-colors, 'light')
);
}
}
&.is-style-solid {
.wp-block-button__link {
@include button-variant(
map-get($theme-colors, 'primary'),
map-get($theme-colors, 'light')
);
}
}
}

5
resources/assets/styles/components/index.scss
View File

@@ -1,5 +0,0 @@
/**
* Components
*/
@import 'button';

5
resources/assets/styles/config/external.scss
View File

@@ -1,5 +0,0 @@
/**
* External
*/
@import '~bootstrap/scss/bootstrap';

7
resources/assets/styles/config/variables.scss
View File

@@ -1,7 +0,0 @@
/**
* Variables
*/
$theme-colors: (
primary: #525ddc,
);

16
resources/assets/styles/editor.scss
View File

@@ -1,16 +0,0 @@
/**
* Editor
*/
@import 'config/variables';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
.editor-styles-wrapper > * {
@import 'common/global';
@import 'components';
font-family: $font-family-base;
}

7
resources/assets/styles/partials/header.scss
View File

@@ -1,7 +0,0 @@
/**
* Header
*/
.brand {
font-weight: bold;
}

6
resources/css/app.scss Normal file
View File

@@ -0,0 +1,6 @@
@import 'tailwindcss/base';
@import 'common/global';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

7
resources/css/common/global.scss Normal file
View File

@@ -0,0 +1,7 @@
body {
@apply font-sans;
}
.brand {
@apply text-3xl font-medium text-indigo-500;
}

11
resources/css/editor.scss Normal file
View File

@@ -0,0 +1,11 @@
.block-editor-block-list__layout {
@apply font-sans;
}
.wp-block {
@apply max-w-screen-md;
&.editor-post-title__block .editor-post-title__input {
@apply font-sans #{!important};
}
}

0
resources/assets/fonts/.gitkeep → resources/fonts/.gitkeep
View File

0
resources/assets/images/.gitkeep → resources/images/.gitkeep
View File

1
resources/assets/scripts/app.js → resources/js/app.js
View File

@@ -2,7 +2,6 @@
* External Dependencies
*/
import 'jquery';
import 'bootstrap';
$(document).ready(() => {
// console.log('Hello world');

0
resources/assets/scripts/customizer.js → resources/js/customizer.js
View File

0
resources/assets/scripts/editor.js → resources/js/editor.js
View File

4
resources/views/components/alert.blade.php
View File

@@ -1,3 +1,5 @@
<div class="alert alert-{{ $type }}">
<div {{ $attributes->merge(['class' => $type]) }}>
<div class="px-4 py-3">
{!! $message ?? $slot !!}
</div>
</div>

10
resources/views/forms/search.blade.php
View File

@@ -1,17 +1,21 @@
<form role="search" method="get" class="search-form" action="{{ home_url('/') }}">
<label>
<span class="screen-reader-text">
<span class="sr-only">
{{ _x('Search for:', 'label', 'sage') }}
</span>
<input
type="search"
class="search-field"
class="px-3 py-1 border"
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') }}">
<input
type="submit"
class="px-3 py-1 text-white bg-indigo-500 cursor-pointer"
value="{{ esc_attr_x('Search', 'submit button', 'sage') }}"
>
</form>

10
resources/views/layouts/app.blade.php
View File

@@ -1,7 +1,7 @@
@include('partials.header')
<div class="max-w-3xl mx-auto">
@include('partials.header')
<div class="container">
<main class="main">
<main class="py-8 prose main">
@yield('content')
</main>
@@ -10,6 +10,6 @@
@yield('sidebar')
</aside>
@endif
</div>
@include('partials.footer')
@include('partials.footer')
</div>

1
resources/views/partials/content-page.blade.php
View File

@@ -1,2 +1,3 @@
@php(the_content())
{!! wp_link_pages(['echo' => 0, 'before' => '<nav class="page-nav"><p>' . __('Pages:', 'sage'), 'after' => '</p></nav>']) !!}

2
resources/views/partials/footer.blade.php
View File

@@ -1,5 +1,3 @@
<footer class="content-info">
<div class="container">
@php(dynamic_sidebar('sidebar-footer'))
</div>
</footer>

2
resources/views/partials/header.blade.php
View File

@@ -1,5 +1,5 @@
<header class="banner">
<div class="container">
<div class="max-w-3xl mx-auto">
<a class="brand" href="{{ home_url('/') }}">
{{ $siteName }}
</a>

2
style.css
View File

@@ -8,6 +8,6 @@ Author URI: https://roots.io/
Text Domain: sage
License: MIT License
License URI: https://opensource.org/licenses/MIT
Requires PHP: 7.2.5
Requires PHP: 7.3
Requires at least: 5.4
*/

20
tailwind.config.js Normal file
View File

@@ -0,0 +1,20 @@
module.exports = {
purge: {
content: [
'./**/*.php',
'./resources/**/*.vue',
'./resources/**/*.js',
'./resources/**/*.json',
],
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {},
},
},
variants: {
extend: {},
},
plugins: [require('@tailwindcss/typography')],
};

30
webpack.mix.js
View File

@@ -1,7 +1,5 @@
const mix = require('laravel-mix');
require('@tinypixelco/laravel-mix-wp-blocks');
require('laravel-mix-purgecss');
require('laravel-mix-copy-watched');
/*
|--------------------------------------------------------------------------
@@ -15,30 +13,28 @@ require('laravel-mix-copy-watched');
*/
mix
.setPublicPath('./dist')
.setPublicPath('./public')
.browserSync('sage.test');
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,
.sass('resources/css/app.scss', 'css')
.sass('resources/css/editor.scss', 'css')
.options({
processCssUrls: false,
postCss: [require('tailwindcss')('./tailwind.config.js')],
});
mix
.js('resources/assets/scripts/app.js', 'scripts')
.js('resources/assets/scripts/customizer.js', 'scripts')
.blocks('resources/assets/scripts/editor.js', 'scripts')
.extract();
.js('resources/js/app.js', 'js')
.js('resources/js/customizer.js', 'js')
.blocks('resources/js/editor.js', 'js');
mix
.copyWatched('resources/assets/images/**', 'dist/images')
.copyWatched('resources/assets/fonts/**', 'dist/fonts');
.copyDirectory('resources/images/**', 'public/images')
.copyDirectory('resources/fonts/**', 'public/fonts');
mix
.autoload({ jquery: ['$', 'window.jQuery'] })
.options({ processCssUrls: false })
.sourceMaps(false, 'source-map')
.extract()
.sourceMaps()
.version();

6007
yarn.lock
View File

File diff suppressed because it is too large Load Diff