The 100% Original Theme for LezWatch.TV
Based on the Yikes! Starter Theme (circa 2018) and Underscores (circa 2016), the LezWatch.TV theme has been customized for custom post types (shows, characters, actors) and to be as queer as possible.
Usage documentation can be found at docs.lezwatchtv.com
- Uses Node to install and manage components, as well as to build final versions of Blocks.
- Uses Composer for adding project dependencies.
- Includes automated build and deploy pipelines to servers using Github actions
Server crontab is used to run CLI commands that generate and update complex content.
The command wp lwtv generate cron daily will run a different debugger each day, update the FacetWP cache, and so on.
It's recommended to use Homebrew on macOS or Chocolatey for Windows to install the project dependencies.
- Clone this repository:
git clone [email protected]:lezwatch/lwtv-underscores - Move into the project directory:
cd lwtv-underscores - Set NPM to the correct version:
nvm use - Install the project dependencies:
npm install - Update all the things (npm, composer, etc):
npm run updater - Run an initial build (generate CSS etc):
npm run build
All pull requests should be made to production.
- Using the
productionbranch as base, create a new branch with a descriptive name likefixing-chartsorfix/chartjs421orfeature/latest-posts. Commit your work to that branch until it's ready for full testing - Open a pull request from your feature branch to the
productionbranch. - If you are not a main developer, your pull request will be reviewed before it can be merged. If there are issues or changes needed, you may be asked to do so, or they may be done for you.
- When the code passes review, run
npm run merge-to-developto push it to development (no extra PR needed). - Once the code passes tests and is approved, the branch can be merged into
productionand the job is done!
To install and update:
$ npm install- Install all the things.$ npm run updater- Updates all the things.$ npm run build- Builds all the CSS and handles composer versions.
To run linting:
$ npm run lint- Lint everything$ npm run lint:css- Lint all SCSS files in all folders$ npm run lint:js- Lint all Block JS files only$ npm run lint:php- Lint all PHP files (excludes 3rd party plugins)
To fix lint issues automatically:
$ npm run fix- Fix everything$ npm run fix:css- Fix all SCSS files in all folders$ npm run fix:js- Fix all Block JS files only
If you're updating CSS you have a couple options, since it's all SCSS.
$ grunt watch- run grunt and leave open for ongoing changes.$ grunt build- run the build process once.
$ npm run build will build all the CSS and JS, as well as update all the libraries.
JS and PHP libraries are included via NPM and Composer. WordPress plugins that have been forked are now included in the main code and managed by us to prevent breakage.
The vendor and node_module files are not synced to Github anymore (as of 2023 August) to minimize the amount of files stored on the servers, and the following libraries have their required code moved via Composer and npm's post-install process:
NPM
Composer
In order to speed up the site, we make use of SVG sprites to generate our font-icons. The icons can be found in the private Symbolicons Repository. When a change is pushed to development and production branches, it will auto-deploy.
If the sprites are missing, the site falls back to Font Awesome.
Pushes to branches are automatically deployed via Github Actions as follows:
- Development: lezwatchtvcom.stage.site (password required - Ask Mika)
- Production: lezwatchtv.com
- Supports three front facing Custom Post Types and related taxonomies: Characters, Themes, Actors
- Supports one back end Custom Post Type: TV Maze Aliases
- Integrated with FacetWP and CMB2.
- Additional custom image sizes: Show (960x400), Character (225x300), Actor (225x300)
- Additional custom sidebars: Show, Character, and Actor Archives
- Widgets: Display latest custom post type posts (show and character) with image
- Internal plugins (
/plugins/)
The following plugins are forked from their original versions to support newer versions of WordPress and PHP. They are stored in the /plugins/ folder:
cmb-field-select2- Forked from MustardBeescmb2-attached-posts- Forked from WebDevStudioscmb2-grid- Forked from Oraggamifacetwp-cmb2- Forked from WebDevStudiosshadow-taxonomy- By PatelUtkarsh
Formerly hosted as it's own, separate, plugin, it has been combined with the theme since everything is interconnected. For the plugin, we use Namespaces and auto-loading in order to properly generate and call new content dynamically.
A component can be thought of as a sub-plugin. It is an atomic, independent module that stores business logic related to a specific feature. It may expose some template tags (functions) that can be called from within the theme.
All Components are stored in /plugins/lwtv-plugins/php/ and the details of their use in /plugins/lwtv-plugins/php/readme.md
Development is fully documented in /plugins/lwtv-plugins/php/blocks/README.md
There is a function for logging to the error log only if debug is active: lwtv_plugin()->error_log( $TYPE, $MESSAGE )
This will output [TYPE]: Message into the error log.
The following folders/files are for use by Developers. They are not pushed to the dev nor production servers.
/_build_scripts/- All of our build scripts and tools./.cursor/- Cursor specific settings./.github/- all Github specific files such as workflows, dependabot, and pull request templates/.husky/- all Husky commands/.vscode/- default VSCode settings/docs/- Structure files.editorconfig- Basic editor configuration.gitignore- Files and folders to be exempt from Git syncs.npmrc- NPM configuration requirements.nvmrc- NVM version controlcomposer.json- Composer settings, includes all libraries usedpackage-lock.json- Saved package.json datapackage.json- NPM configuration, commands, and libraries usedphpcs.xml.dist- PHPCS configuration