From 4c981aab8e46dfb07aa8626546a8e1741a784141 Mon Sep 17 00:00:00 2001 From: mashirozx Date: Tue, 13 Jul 2021 16:15:03 +0800 Subject: [PATCH] Add admin dashboard --- .vscode/snippets.json | 4 +- app/functions.php | 3 +- app/helpers/admin-page-helper.php | 86 +++++++++++++++++++ ...ite-require-helper.php => vite-helper.php} | 40 ++++++--- app/routers/admin-router.php | 21 +++++ app/views/helpers/admin-page-helper.twig | 5 ++ package.json | 1 + src/admin/App.vue | 24 +++++- src/admin/Layout.vue | 26 ++++++ src/components/image/Image.vue | 14 ++- vite.config.ts | 4 + yarn.lock | 31 +++++++ 12 files changed, 237 insertions(+), 22 deletions(-) create mode 100644 app/helpers/admin-page-helper.php rename app/helpers/{vite-require-helper.php => vite-helper.php} (63%) create mode 100644 app/routers/admin-router.php create mode 100644 app/views/helpers/admin-page-helper.twig create mode 100644 src/admin/Layout.vue diff --git a/.vscode/snippets.json b/.vscode/snippets.json index 41fa806..8a07f31 100644 --- a/.vscode/snippets.json +++ b/.vscode/snippets.json @@ -2,10 +2,10 @@ "html": { "snippets": { "divc": "div[class=${1}]", - "icon": "icon[name=${1}]", "view": "div[class=${1}]", "text": "span[class=\"text\"]", - "image": "Image[src=${1} placeholder=${2} :avatar=\"false\" alt=${2} :draggable=\"false\"]" + "image": "Image[src=${1} placeholder=${2} :avatar=\"false\" alt=${2} :draggable=\"false\"]", + "icon": "UiIcon[name=${1} :width=\"100%\" :height=\"100%\"]" } } } diff --git a/app/functions.php b/app/functions.php index 4de91dd..5883e78 100644 --- a/app/functions.php +++ b/app/functions.php @@ -10,7 +10,8 @@ require_once(__DIR__ . '/loader.php'); new \Sakura\Helpers\SetupHelper(); new \Sakura\Helpers\WhoopsHelper(); -new \Sakura\Helpers\ViteRequireHelper(); +new \Sakura\Helpers\ViteHelper(); +new \Sakura\Helpers\AdminPageHelper(); new \Sakura\Helpers\CustomMenuMetaFieldsHelper(); new \Sakura\Helpers\CommentHelper(); new \Sakura\Helpers\PostQueryHelper('post'); diff --git a/app/helpers/admin-page-helper.php b/app/helpers/admin-page-helper.php new file mode 100644 index 0000000..c6eb100 --- /dev/null +++ b/app/helpers/admin-page-helper.php @@ -0,0 +1,86 @@ +page_title = __('Sakura theme options', self::$text_domain); + $this->menu_title = __('Sakura Options', self::$text_domain); + $this->menu_slug = __('sakura_options', self::$text_domain); + add_action('admin_menu', [$this, 'add_theme_page']); + add_action('admin_enqueue_scripts', [$this, 'enqueue_scripts']); + } + + public function add_theme_page() + { + add_theme_page($this->page_title, $this->menu_title, 'edit_theme_options', $this->menu_slug, function () { + $template = new TemplateHelper(); + echo $template->load('admin-page-helper.twig')->renderBlock('admin_app', []); + }); + } + + public function enqueue_scripts($hook) + { + if ("appearance_page_{$this->menu_slug}" === $hook) { + $this->enqueue_common_scripts(); + // $this->enqueue_development_scripts(); + $this->enqueue_production_scripts(); + } + } + + public function enqueue_development_scripts() + { + wp_enqueue_script('[type:module]vite-client', ViteHelper::$development_host . '/@vite/client', array(), null, false); + + wp_enqueue_script('[type:module]dev-main', ViteHelper::$development_host . '/src/admin/main.ts', array(), null, true); + + wp_localize_script('[type:module]dev-main', 'InitState', (new InitStateController())->get_initial_state()); + } + + public function enqueue_production_scripts() + { + $entry_key = 'src/admin/main.ts'; + $assets_base_path = get_template_directory_uri() . '/assets/dist/'; + $manifest = ViteHelper::get_manifest_file(); + + // + wp_enqueue_script('[type:module]chunk-vendors.js', $assets_base_path . $manifest[$entry_key]['file'], array(), null, false); + + wp_localize_script('[type:module]chunk-vendors.js', 'InitState', (new InitStateController())->get_initial_state()); + + // + foreach ($manifest[$entry_key]['imports'] as $index => $import) { + wp_enqueue_style("[ref:modulepreload]chunk-vendors{$import}", $assets_base_path . $manifest[$import]['file']); + if (empty($manifest[$import]['css'])) { + continue; + } + foreach ($manifest[$import]['css'] as $css_index => $css_path) { + wp_enqueue_style("sakura-chunk-{$import}-{$css_index}.css", $assets_base_path . $css_path); + } + } + + // + foreach ($manifest[$entry_key]['css'] as $index => $path) { + wp_enqueue_style("sakura-chunk-{$index}.css", $assets_base_path . $path); + } + } + + public function enqueue_common_scripts() + { + wp_enqueue_style('style.css', get_template_directory_uri() . '/style.css'); + + wp_enqueue_style('fontawesome-free', 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css'); + } +} diff --git a/app/helpers/vite-require-helper.php b/app/helpers/vite-helper.php similarity index 63% rename from app/helpers/vite-require-helper.php rename to app/helpers/vite-helper.php index 8375abc..b161396 100644 --- a/app/helpers/vite-require-helper.php +++ b/app/helpers/vite-helper.php @@ -2,13 +2,13 @@ namespace Sakura\Helpers; -use Sakura\Controllers; +use Sakura\Controllers\InitStateController; -class ViteRequireHelper +class ViteHelper { // TODO: use a common .env file // public $development_host = 'http://192.168.28.26:9000'; - public $development_host = 'http://127.0.0.1:9000'; + public static $development_host = 'http://127.0.0.1:9000'; function __construct() { @@ -22,25 +22,37 @@ class ViteRequireHelper public function enqueue_development_scripts() { - wp_enqueue_script('[type:module]vite-client', $this->development_host . '/@vite/client', array(), null, false); - wp_enqueue_script('[type:module]dev-main', $this->development_host . '/src/main.ts', array(), null, true); + wp_enqueue_script('[type:module]vite-client', self::$development_host . '/@vite/client', array(), null, false); + + wp_enqueue_script('[type:module]dev-main', self::$development_host . '/src/main.ts', array(), null, true); + + wp_localize_script('[type:module]dev-main', 'InitState', (new InitStateController())->get_initial_state()); } public function enqueue_production_scripts() { + $entry_key = 'src/main.ts'; $assets_base_path = get_template_directory_uri() . '/assets/dist/'; $manifest = $this->get_manifest_file(); // - wp_enqueue_script('[type:module]chunk-vendors.js', $assets_base_path . $manifest['src/main.ts']['file'], array(), null, false); + wp_enqueue_script('[type:module]chunk-entrance.js', $assets_base_path . $manifest[$entry_key]['file'], array(), null, false); + + wp_localize_script('[type:module]chunk-entrance.js', 'InitState', (new InitStateController())->get_initial_state()); // - foreach ($manifest['src/main.ts']['imports'] as $index => $import) { - wp_enqueue_style("[ref:modulepreload]chunk-vendors-{$index}.js", $assets_base_path . $manifest[$import]['file']); + foreach ($manifest[$entry_key]['imports'] as $index => $import) { + wp_enqueue_style("[ref:modulepreload]chunk-vendors{$import}", $assets_base_path . $manifest[$import]['file']); + if (empty($manifest[$import]['css'])) { + continue; + } + foreach ($manifest[$import]['css'] as $css_index => $css_path) { + wp_enqueue_style("sakura-chunk-{$import}-{$css_index}.css", $assets_base_path . $css_path); + } } // - foreach ($manifest['src/main.ts']['css'] as $index => $path) { + foreach ($manifest[$entry_key]['css'] as $index => $path) { wp_enqueue_style("sakura-chunk-{$index}.css", $assets_base_path . $path); } } @@ -52,14 +64,14 @@ class ViteRequireHelper wp_enqueue_style('fontawesome-free', 'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css'); // TODO: don't use vue.js as handler - wp_enqueue_script('vue.js', 'https://unpkg.com/vue@next', array(), false, false); + // wp_enqueue_script('vue.js', 'https://unpkg.com/vue@next', array(), false, false); - wp_localize_script('vue.js', 'InitState', (new Controllers\InitStateController())->get_initial_state()); + // wp_localize_script('vue.js', 'InitState', (new InitStateController())->get_initial_state()); wp_enqueue_script('recaptcha', 'https://www.recaptcha.net/recaptcha/api.js?render=6LdKhX8bAAAAAF5HJprXtKvg3nfBJMfgd2o007PN', array(), false, true); } - public function script_tag_filter($tag, $handle, $src) + public static function script_tag_filter($tag, $handle, $src) { if (preg_match('/^\[([^:]*)\:([^\]]*)\]/', $handle)) { preg_match('/^\[([^:]*)\:([^\]]*)\]/', $handle, $matches, PREG_OFFSET_CAPTURE); @@ -69,7 +81,7 @@ class ViteRequireHelper return $tag; } - public function style_tag_filter($tag, $handle, $src) + public static function style_tag_filter($tag, $handle, $src) { if (preg_match('/^\[([^:]*)\:([^\]]*)\]/', $handle)) { preg_match('/^\[([^:]*)\:([^\]]*)\]/', $handle, $matches, PREG_OFFSET_CAPTURE); @@ -79,7 +91,7 @@ class ViteRequireHelper return $tag; } - public function get_manifest_file() + public static function get_manifest_file() { $manifest = file_get_contents(__DIR__ . '/../assets/dist/manifest.json'); return json_decode($manifest, true); diff --git a/app/routers/admin-router.php b/app/routers/admin-router.php new file mode 100644 index 0000000..10f3100 --- /dev/null +++ b/app/routers/admin-router.php @@ -0,0 +1,21 @@ +load('admin-rouer.twig')->renderBlock('admin_app', []); + }); + } +} diff --git a/app/views/helpers/admin-page-helper.twig b/app/views/helpers/admin-page-helper.twig new file mode 100644 index 0000000..8cd3b65 --- /dev/null +++ b/app/views/helpers/admin-page-helper.twig @@ -0,0 +1,5 @@ +{% block admin_app %} +
+ Loading +
+{% endblock %} diff --git a/package.json b/package.json index 231d474..55b3f95 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.28.3", "@typescript-eslint/parser": "^4.28.3", + "@vitejs/plugin-legacy": "^1.4.4", "@vitejs/plugin-vue": "^1.2.5", "@vue/compiler-sfc": "^3.1.4", "@vue/eslint-config-prettier": "^6.0.0", diff --git a/src/admin/App.vue b/src/admin/App.vue index dee38f4..940606b 100644 --- a/src/admin/App.vue +++ b/src/admin/App.vue @@ -1,4 +1,24 @@ + + + + diff --git a/src/admin/Layout.vue b/src/admin/Layout.vue new file mode 100644 index 0000000..4b68b59 --- /dev/null +++ b/src/admin/Layout.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/components/image/Image.vue b/src/components/image/Image.vue index 9169f75..2e67d58 100644 --- a/src/components/image/Image.vue +++ b/src/components/image/Image.vue @@ -1,5 +1,5 @@