feat: set up Vite HMR

Author: kdotamoh

.gitignore

@@ -0,0 +1,5 @@
+/composer.lock
+/vendor/
+/wordpress/
+node_modules/
+dist/

404.php

@@ -0,0 +1,13 @@
+<?php
+/**
+ * The template for displaying 404 pages (Not Found)
+ *
+ * Methods for TimberHelper can be found in the /functions sub-directory
+ *
+ * @package  WordPress
+ * @subpackage  Timber
+ * @since    Timber 0.1
+ */
+
+$context = Timber::context();
+Timber::render( '404.twig', $context );

LICENSE

@@ -0,0 +1,7 @@
+Copyright (c) 2012-2013 Jared Novack
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,38 @@
+# The Timber Starter Theme
+
+[![Build Status](https://travis-ci.com/timber/starter-theme.svg?branch=master)](https://travis-ci.com/github/timber/starter-theme)
+[![Packagist Version](https://img.shields.io/packagist/v/upstatement/timber-starter-theme?include_prereleases)](https://packagist.org/packages/upstatement/timber-starter-theme)
+
+The "_s" for Timber: a dead-simple theme that you can build from. The primary purpose of this theme is to provide a file structure rather than a framework for markup or styles. Configure your SASS files, scripts, and task runners however you would like!
+
+## Installing the theme
+
+Follow the guide on [how to Install Timber using the Starter Theme](https://timber.github.io/docs/v2/installation/installation/#use-the-starter-theme).
+
+Then,
+
+1. Rename the theme folder to something that makes sense for your website. You could keep the name `timber-starter-theme` but the point of a starter theme is to make it your own!
+2. Activate the theme in the WordPress Dashboard under **Appearance → Themes**.
+3. Do your thing! And read [the docs](https://timber.github.io/docs/).
+
+## The `StarterSite` class
+
+In **functions.php**, we call `new StarterSite();`. The `StarterSite` class sits in the **src** folder. You can update this class to add functionality to your theme. This approach is just one example for how you could do it.
+
+The **src** folder would be the right place to put your classes that [extend Timber’s functionality](https://timber.github.io/docs/v2/guides/extending-timber/).
+
+Small tip: You can make use of Composer’s [autoloading functionality](https://getcomposer.org/doc/04-schema.md#psr-4) to automatically load your PHP classes when they are requested instead of requiring one by one in **functions.php**.
+
+## What else is there?
+
+- `static/` is where you can keep your static front-end scripts, styles, or images. In other words, your Sass files, JS files, fonts, and SVGs would live here.
+- `views/` contains all of your Twig templates. These pretty much correspond 1 to 1 with the PHP files that respond to the WordPress template hierarchy. At the end of each PHP template, you’ll notice a `Timber::render()` function whose first parameter is the Twig file where that data (or `$context`) will be used. Just an FYI.
+- `tests/` ... basically don’t worry about (or remove) this unless you know what it is and want to.
+
+## Other Resources
+
+* [This branch](https://github.com/laras126/timber-starter-theme/tree/tackle-box) of the starter theme has some more example code with ACF and a slightly different set up.
+* [Twig for Timber Cheatsheet](http://notlaura.com/the-twig-for-timber-cheatsheet/)
+* [Timber and Twig Reignited My Love for WordPress](https://css-tricks.com/timber-and-twig-reignited-my-love-for-wordpress/) on CSS-Tricks
+* [A real live Timber theme](https://github.com/laras126/yuling-theme).
+* [Timber Video Tutorials](http://timber.github.io/timber/#video-tutorials) and [an incomplete set of screencasts](https://www.youtube.com/playlist?list=PLuIlodXmVQ6pkqWyR6mtQ5gQZ6BrnuFx-) for building a Timber theme from scratch.

archive.php

@@ -0,0 +1,40 @@
+<?php
+/**
+ * The template for displaying Archive pages.
+ *
+ * Used to display archive-type pages if nothing more specific matches a query.
+ * For example, puts together date-based pages if no date.php file exists.
+ *
+ * Learn more: http://codex.wordpress.org/Template_Hierarchy
+ *
+ * Methods for TimberHelper can be found in the /lib sub-directory
+ *
+ * @package  WordPress
+ * @subpackage  Timber
+ * @since   Timber 0.2
+ */
+
+$templates = array( 'archive.twig', 'index.twig' );
+
+$context = Timber::context();
+
+$context['title'] = 'Archive';
+if ( is_day() ) {
+	$context['title'] = 'Archive: ' . get_the_date( 'D M Y' );
+} elseif ( is_month() ) {
+	$context['title'] = 'Archive: ' . get_the_date( 'M Y' );
+} elseif ( is_year() ) {
+	$context['title'] = 'Archive: ' . get_the_date( 'Y' );
+} elseif ( is_tag() ) {
+	$context['title'] = single_tag_title( '', false );
+} elseif ( is_category() ) {
+	$context['title'] = single_cat_title( '', false );
+	array_unshift( $templates, 'archive-' . get_query_var( 'cat' ) . '.twig' );
+} elseif ( is_post_type_archive() ) {
+	$context['title'] = post_type_archive_title( '', false );
+	array_unshift( $templates, 'archive-' . get_post_type() . '.twig' );
+}
+
+$context['posts'] = Timber::get_posts();
+
+Timber::render( $templates, $context );

author.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * The template for displaying Author Archive pages
+ *
+ * Methods for TimberHelper can be found in the /lib sub-directory
+ *
+ * @package  WordPress
+ * @subpackage  Timber
+ * @since    Timber 0.1
+ */
+
+global $wp_query;
+
+$context          = Timber::context();
+$context['posts'] = Timber::get_posts();
+if ( isset( $wp_query->query_vars['author'] ) ) {
+	$author            = Timber::get_user( $wp_query->query_vars['author'] );
+	$context['author'] = $author;
+	$context['title']  = 'Author Archives: ' . $author->name();
+}
+Timber::render( array( 'author.twig', 'archive.twig' ), $context );

composer.json

@@ -0,0 +1,42 @@
+{
+  "name": "upstatement/timber-starter-theme",
+  "description": "Starter theme to build a Timber theme",
+  "type":"wordpress-theme",
+  "license": "MIT",
+  "authors": [
+    {
+      "email": "jared@upstatement.com",
+      "name": "jarednova"
+    }
+  ],
+  "repositories": [
+    {
+      "type": "composer",
+      "url": "https://wpackagist.org"
+    }
+  ],
+  "require": {
+    "timber/timber": "2.x-dev"
+  },
+  "require-dev": {
+    "automattic/wordbless": "^0.4.2",
+    "yoast/wp-test-utils": "^1.0"
+  },
+  "extra": {
+    "installer-paths": {
+      "vendor/automattic/wordbless/": [
+        "automattic/wordbless"
+      ]
+    },
+    "wordpress-install-dir": "wordpress"
+  },
+  "config": {
+    "allow-plugins": {
+      "roots/wordpress-core-installer": true,
+      "composer/installers": true
+    }
+  },
+  "scripts": {
+    "test": "phpunit"
+  }
+}

footer.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * Third party plugins that hijack the theme will call wp_footer() to get the footer template.
+ * We use this to end our output buffer (started in header.php) and render into the view/page-plugin.twig template.
+ *
+ * If you're not using a plugin that requries this behavior (ones that do include Events Calendar Pro and
+ * WooCommerce) you can delete this file and header.php
+ *
+ * @package  WordPress
+ * @subpackage  Timber
+ * @since   Timber 0.1
+ */
+
+$timberContext = $GLOBALS['timberContext']; // @codingStandardsIgnoreFile
+if ( ! isset( $timberContext ) ) {
+	throw new \Exception( 'Timber context not set in footer.' );
+}
+$timberContext['content'] = ob_get_contents();
+ob_end_clean();
+$templates = array( 'page-plugin.twig' );
+Timber::render( $templates, $timberContext );

functions.php

@@ -0,0 +1,21 @@
+<?php
+
+/**
+ * Timber starter-theme
+ * https://github.com/timber/starter-theme
+ */
+
+// Load Composer dependencies.
+require_once __DIR__ . '/vendor/autoload.php';
+
+require_once __DIR__ . '/src/StarterSite.php';
+
+require_once(__DIR__ . '/inc/Vite.php');
+require_once(__DIR__ . '/inc/Theme.php');
+
+Timber\Timber::init();
+
+// Sets the directories (inside your theme) to find .twig files.
+Timber::$dirname = ['templates', 'views'];
+
+new StarterSite();

header.php

@@ -0,0 +1,15 @@
+<?php
+/**
+ * Third party plugins that hijack the theme will call wp_head() to get the header template.
+ * We use this to start our output buffer and render into the view/page-plugin.twig template in footer.php
+ *
+ * If you're not using a plugin that requries this behavior (ones that do include Events Calendar Pro and
+ * WooCommerce) you can delete this file and footer.php
+ *
+ * @package  WordPress
+ * @subpackage  Timber
+ * @since   Timber 0.1
+ */
+
+$GLOBALS['timberContext'] = Timber::context();
+ob_start();

humans.txt

@@ -0,0 +1,10 @@
+## Team
+
+Your name or company
+https://yoursite.example
+@your_twitter_handle
+
+
+## Site
+
+Software: Built with [Timber](https://upstatement.com/timber/) by Upstatement

inc/Theme.php

@@ -0,0 +1,40 @@
+<?php
+
+class Theme
+{
+
+  public function __construct()
+  {
+
+    // enqueue admin styles scripts
+    add_action('wp_enqueue_scripts', [$this, 'enqueue_styles_scripts'], 20);
+  }
+
+  /**
+   * @return void
+   * @throws Exception
+   */
+  public function enqueue_styles_scripts(): void
+  {
+
+    // enqueue the Vite module
+    Vite::enqueue_module();
+
+    // register theme-style-css
+    $filename = Vite::asset('resources/styles/styles.scss');
+
+    // enqueue theme-style-css into our head
+    wp_enqueue_style('theme-style', $filename, [], null, 'screen');
+
+    // register theme-script-js
+    $filename = Vite::asset('resources/scripts/scripts.js');
+
+    // enqueue theme-script-js into our head (change false to true for footer)
+    wp_enqueue_script('theme-script', $filename, [], null, false);
+
+    // update html script type to module wp hack
+    Vite::script_type_module('theme-script');
+  }
+}
+
+new Theme();