feat: add themes example

examples/theme/README.md

@@ -39,7 +39,7 @@ the following features.
 5. Now log into your WordPress dashboard with:
    a. Username: `root`
    b. Password: `root`
-6. Activate `WPack.io Sample Plugin Development` plugin.
+6. Activate `WPackio Sample Theme` theme.
 7. Check the homepage and check your browser's console.
 
 > It is not a requirement to use docker for `@wpackio/scripts`. It is just
@@ -48,20 +48,4 @@ the following features.
 
 ## Checking some HMR
 
-Now go ahead and edit the contents in file `src/app/modules/logger.js`. Check it
-load live in your console.
-
-If you edit any of the entrypoints like `src/app/index.js`, then you will see
-full page reload.
-
-With the help of browsersync, we also watch for files inside `inc/**/*.php`. So
-go ahead and edit them. The page will reload.
-
-## Doing some react stuff
-
-We have created a simple shortcode `[wpackio-reactapp]`. Publish it in any page
-and this will create a todo app.
-
-Edit files under `src/reactapp/` and see them refresh live (without page reload).
-
-This is done with the help of [react-hot-loader](https://github.com/gaearon/react-hot-loader).
+Now go ahead and edit the content in main.js and main.scss.

examples/theme/composer.json

@@ -0,0 +1,5 @@
+{
+    "require": {
+        "wpackio/enqueue": "^1.0"
+    }
+}

examples/theme/functions.php

@@ -1,4 +1,9 @@
 <?php
+// Get composer stuff
+require_once __DIR__ . '/vendor/autoload.php';
+
+$wpackio_sample_theme_enqueue = new \WPackio\Enqueue( 'wpackiotheme', 'dist', '1.0.0', 'theme' );
+
 /**
  * wpackio-theme functions and definitions
  *
@@ -120,7 +125,8 @@ function wpackio_theme_widgets_init() {
  * Enqueue scripts and styles.
  */
 function wpackio_theme_scripts() {
-	wp_enqueue_style( 'wpackio-theme-style', get_stylesheet_uri() );
+	// We may not need to do it if using through wpackio/enqueue
+	// wp_enqueue_style( 'wpackio-theme-style', get_stylesheet_uri() );
 
 	wp_enqueue_script( 'wpackio-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
 
@@ -129,6 +135,13 @@ function wpackio_theme_scripts() {
 	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 		wp_enqueue_script( 'comment-reply' );
 	}
+
+	// Enqueue assets through wpackio/enqueue
+	/**
+	 * @var \WPackio\Enqueue
+	 */
+	global $wpackio_sample_theme_enqueue;
+	$wpackio_sample_theme_enqueue->enqueue( 'theme', 'main', [] );
 }
 add_action( 'wp_enqueue_scripts', 'wpackio_theme_scripts' );
 

examples/theme/postcss.config.js

@@ -0,0 +1,4 @@
+/* eslint-disable global-require, import/no-extraneous-dependencies */
+module.exports = {
+	plugins: [],
+};

examples/theme/src/theme/main.js

@@ -1 +1,3 @@
-console.log('Hello Theme');
+import './main.scss';
+
+console.log('Hello Theme!');