Merge pull request #21 from csalmeida/v2.0.0

V2.0.0

.gitignore

@@ -13,6 +13,9 @@ wp-content/plugins/advanced-custom-fields-pro
 wp-content/ai1wm-backups/
 wp-content/plugins/all-in-one-wp-migration/storage/
 
+### Docker ###
+wp-content/themes/*/docker/volumes
+
 ### Linux ###
 *~
 

README.md

@@ -144,6 +144,42 @@ Create an `.env` file in the [theme folder directory](wp-content/themes/hozokit)
 
 [Hot Reloading can be enabled](/docs/hot_reload.md) once the steps above have been followed.
 
+## Setup with Docker 🐋
+
+1. Make sure you have Docker installed and running on your machine.
+1. Using the terminal `cd` into the theme folder directory (e.g `wp-content/themes/hozokit`) where `docker-compose.yml` is located.
+1. Run `docker compose up --detach` in order to get the project running.
+1. Export the production database into an SQL dump with a method of your choice. (This requires access to the server and cPanel) (optional)
+1. Import database using a software of your choice (e.g MySQL Workbench or Table Plus), use the credentials below to connect to the database container. (optional)
+1. Once imported add any plugins to `docker/volumes/wordpress/plugins`. These can be downloaded from the cPanel file manager. (optional)
+1. Add the uploads folder to `docker/volumes/wordpress/uploads`. Can also be downloaded from the cPanel file manager. (optional)
+1. Access `localhost:8080` via the browser and sign in with one of the users available in the production version of the site.
+1. Make changes in the files and develop your theme.
+
+#### Database container credentials
+
+```
+IP: 127.0.0.1
+PORT: 3307
+
+DATABASE NAME: wordpress
+USER: wordpress
+PASSWORD: password
+ROOT PASSWORD: password
+```
+
+> ⚠️ These credentials are generated when the container is created and are meant to be used in development only.
+
+#### Using Docker day to day
+
+1. Run `docker compose up --detach`.
+1. Access the project in the browser via `localhost:8080`.
+1. Make any changes in the files.
+1. Run `docker compose down` to stop the containers.
+
+> **Why don't I have to run `npm run watch` or install Node dependencies?**
+> That's because one of the Docker containers has taken care of that for you. See `wp-content/themes/hozokit/docker/node.dockerfile` to learn more.
+
 # Customizing the theme
 
 A starting point is to [set the theme name and other information](https://codex.wordpress.org/File_Header) at `hozokit/styles/base.scss`. A custom `screenshot.png` can also be added later on to better identify the theme.

wp-content/themes/hozokit/.dockerignore

@@ -0,0 +1,40 @@
+# Application Files
+node_modules
+.nvmrc
+.git
+.github
+.gitignore
+.gitattributes
+.nojekyll
+LICENSE
+README.md
+
+# Docker
+docker
+docker-compose.yml
+.dockerignore
+
+# =========================
+# Operating System Files
+# =========================
+
+# OSX
+# =========================
+
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Thumbnails
+._*
+
+# Files that might appear on external disk
+.Spotlight-V100
+.Trashes
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk

wp-content/themes/hozokit/.env.example

@@ -1,6 +1,7 @@
 APP_ENVIRONMENT='development'
 
 # Add your development URL here to make use of hot reloading.
+# Use your local ip when using the Docker setup e.g '192.168.0.15:8080'
 # APP_URL='http://localhost:3000'
 
 # Additional environment variables of your choice here can go here.

wp-content/themes/hozokit/.nvmrc

@@ -1 +1 @@
-v14.15.1
+lts/fermium

wp-content/themes/hozokit/assets/css/block_styles.css

@@ -1 +1,129 @@
-@charset "UTF-8";@font-face{font-family:Offside;src:url(../fonts/offside/Offside-Regular.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Karla;src:url(../fonts/karla/Karla-Regular.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Karla;src:url(../fonts/karla/Karla-Italic.ttf) format("truetype");font-style:italic;font-weight:400}@font-face{font-family:Karla;src:url(../fonts/karla/Karla-Bold.ttf) format("truetype");font-style:bold;font-weight:700}.acf-block-component html{font-size:10px}.acf-block-component body,.acf-block-component html{width:100%;height:100%}.acf-block-component h1,.acf-block-component h2,.acf-block-component h3,.acf-block-component h4,.acf-block-component h5,.acf-block-component h6{text-transform:none;font-family:Offside,sans-serif;font-size:2.6rem;color:#0d0d0d;margin:3rem 0}.acf-block-component h3{font-size:2.4rem}.acf-block-component h3{font-size:2.2rem}.acf-block-component h4{font-size:2rem}.acf-block-component h5{font-size:1.8rem}.acf-block-component h6{font-size:1.6rem}.acf-block-component a,.acf-block-component li,.acf-block-component ol,.acf-block-component p{font-family:Karla,sans-serif;font-size:1.6rem}.acf-block-component .example h1{font-family:Karla,sans-serif}.acf-block-component .example p{font-family:Offside,sans-serif}.acf-block-component .footer{font-family:Karla,sans-serif}.acf-block-component .header h2 a{font-family:Offside,sans-serif;font-size:2rem}body.wp-admin{padding-top:0}.wp-toolbar{font-size:10px}#post-title-0{font-family:Karla,sans-serif}.wp-block-heading h1,.wp-block-heading h2,.wp-block-heading h3,.wp-block-heading h4,.wp-block-heading h5,.wp-block-heading h6{text-transform:none;font-family:Offside,sans-serif;font-size:2.6rem;color:#0d0d0d;margin:3rem 0}.wp-block-heading h3{font-size:2.4rem}.wp-block-heading h3{font-size:2.2rem}.wp-block-heading h4{font-size:2rem}.wp-block-heading h5{font-size:1.8rem}.wp-block-heading h6{font-size:1.6rem}.editor-block-list__block,.wp-block-paragraph{font-family:Offside,sans-serif;font-size:2rem}
+@charset "UTF-8";
+/* Fonts 
+ * The font names being used in the theme.
+*/
+/* Include a font file into theme style. */
+/* Sets post text defaults to be used on admin and post stylesheets. */
+/* Makes component and block styles available
+ * to the Gutenberg Editor without leaking into the admin page.
+ * This second mixin is required in order for SASS to parse all styles correctly.
+*/
+/* 
+ * Define any fonts that are being used locally here.
+ * 1. Do not define variables that are used in style blocks, please use _variables.scss for that purpose.
+ * 2. The contents of this file can be removed if an alternative method of requiring fonts is being used, e.g Google Fonts, Adobe Fonts 
+*/
+@font-face {
+  font-family: "Offside";
+  src: url("../fonts/offside/Offside-Regular.ttf") format("truetype");
+  font-style: normal;
+  font-weight: 400;
+}
+@font-face {
+  font-family: "Karla";
+  src: url("../fonts/karla/Karla-Regular.ttf") format("truetype");
+  font-style: normal;
+  font-weight: 400;
+}
+@font-face {
+  font-family: "Karla";
+  src: url("../fonts/karla/Karla-Italic.ttf") format("truetype");
+  font-style: italic;
+  font-weight: 400;
+}
+@font-face {
+  font-family: "Karla";
+  src: url("../fonts/karla/Karla-Bold.ttf") format("truetype");
+  font-style: bold;
+  font-weight: 700;
+}
+/* Colors used in the theme. */
+/*
+A set of mixings to aid the use of media queries.
+Enmanuel Durán's approach as seen at:
+https://dev.to/duranenmanuel/another-approach-to-media-queries-with-the-power-of-sass-3ghf
+*/
+/* Apply to devices with a higher screen than a phone */
+/* Apply to devices with screen sizes smaller than a phone */
+/* Apply to only phone devices */
+/* Apply to devices in a range, in this case, between a phone and a tablet */
+/*
+ * Abstract partials are added here.
+ * Feel free to extend this is needed (e.g helpers, variables, functions)
+ */
+/* Gutenberg blocks require their CSS 
+   to be on a separate stylesheet to
+   avoid conflicts on the admin panel. */
+/* 
+ * These styles apply to the admin panel of Wordpress.
+ * It merges with block styles on compilation.
+ * It can also style related plugins.
+*/
+/* This stylesheet can also be used
+ * to override unwanted theme styles that might 
+ * be applied to elements on the admin panel. 
+*/
+.acf-block-component {
+  /* Fonts 
+   * The font names being used in the theme.
+  */
+}
+.acf-block-component p {
+  color: red;
+}
+.acf-block-component .hozo-button {
+  color: pink;
+}
+.acf-block-component .example h1 {
+  font-family: "Karla", sans-serif;
+  background: blueviolet;
+  color: white;
+}
+.acf-block-component .example p {
+  font-family: "Offside", sans-serif;
+}
+.acf-block-component .footer {
+  font-family: "Karla", sans-serif;
+}
+.acf-block-component .header h2 a {
+  font-family: "Offside", sans-serif;
+  font-size: 2rem;
+}
+.acf-block-component .example-block {
+  color: yellow;
+}
+
+body.wp-admin {
+  padding-top: 0;
+}
+
+#post-title-0 {
+  font-family: "Karla", sans-serif;
+}
+
+.wp-block-heading h1, .wp-block-heading h2, .wp-block-heading h3, .wp-block-heading h4, .wp-block-heading h5, .wp-block-heading h6 {
+  text-transform: none;
+  font-family: "Offside", sans-serif;
+  font-size: 2.6rem;
+  color: "#c1c1c1";
+  margin: 3rem 0;
+}
+.wp-block-heading h3 {
+  font-size: 2.4rem;
+}
+.wp-block-heading h3 {
+  font-size: 2.2rem;
+}
+.wp-block-heading h4 {
+  font-size: 2rem;
+}
+.wp-block-heading h5 {
+  font-size: 1.8rem;
+}
+.wp-block-heading h6 {
+  font-size: 1.6rem;
+}
+
+.block-editor__typewriter {
+  font-family: "Offside", sans-serif;
+}

wp-content/themes/hozokit/assets/scripts/bundle.js

@@ -1 +1,3 @@
-"use strict";console.info("Hozokit");
+'use strict';
+
+console.info('Hozokit');

wp-content/themes/hozokit/docker-compose.yml

@@ -0,0 +1,54 @@
+services:
+  wordpress:
+    image: wordpress:latest
+    container_name: hozokit-wordpress
+    environment:
+      WORDPRESS_DB_HOST: hozokit-mysql
+      WORDPRESS_DB_USER: wordpress
+      WORDPRESS_DB_NAME: wordpress
+      WORDPRESS_DB_PASSWORD: password
+      WORDPRESS_TABLE_PREFIX: "wp_"
+      WORDPRESS_DEBUG: 1
+    ports:
+      - "8080:80"
+    depends_on:
+      - "database"
+    volumes:
+      # Allows changes made to project directory to be accessed by the container via a bind mount.
+      - ${PWD}:/var/www/html/wp-content/themes/hozokit
+  database:
+    image: mysql:latest
+    container_name: hozokit-mysql
+    # PHP mysqli connector does not support caching_sha2_password plugin so using mysql_native_password instead.
+    command: "--default-authentication-plugin=mysql_native_password"
+    environment:
+      MYSQL_DATABASE: wordpress
+      MYSQL_USER: wordpress
+      MYSQL_PASSWORD: password
+      MYSQL_ROOT_PASSWORD: password
+    # This allows for the database to be consulted via a software such as SQL Workbench or TablePlus
+    ports:
+      - 3307:3306
+    volumes:
+      - ./docker/volumes/mysql:/var/lib/mysql
+    # Used to compile styles and scripts.
+  node:
+    # Building a custom image described in a docker file.
+    build:
+      # Setting a context and dockerfile paths allows for Dockerfiles to be stored away in a sub-directory.
+      context: . # Context of build, this is where the project files are stored.
+      dockerfile: ./docker/node.dockerfile # The path to Dockerfile and name of the dockerfile to be built
+    # Setting an image name avoids the same image being built multiple times.
+    image: csalmeida/hozokit-node-tooling:latest
+    # Specified the name of the container, commented out to avoid name conflicts when running multiple instances of the image.
+    # container_name: protonmail_themes
+    ports:
+      - 2077:2077
+    depends_on:
+      - "wordpress"
+    restart: always
+    volumes:
+      # Allows changes made to project directory to be accessed by the container via a bind mount.
+      - ${PWD}:/var/www/html/wp-content/themes/hozokit
+      # Adds a volume to store node dependencies.
+      - /var/www/html/wp-content/themes/hozokit/node_modules

wp-content/themes/hozokit/docker/node.dockerfile

@@ -0,0 +1,26 @@
+# This image makes use of a Node image running on Linux Alpine (latest versions of both)
+# Using digest SHA256 increases security
+FROM node:lts-alpine@sha256:8d5d490d1e18c9069b34b4a57df1cb3b8cd1b756f2f63f7b8240f39d7c01c402
+
+# Adds a package to act as PID 1 so that Node doesn't take that place.
+# Node wasn't built to run as PID 1 and avoiding it prevents unexpected behaviour.
+RUN apk add dumb-init
+
+# A work directory is required to be used by npm install
+WORKDIR /var/www/html/wp-content/themes/hozokit
+
+# Copy all project files to the container
+# Files in the location of this file are copied to WORKDIR in the container
+# Scopes permissions to user node instead of root.
+COPY --chown=node:node ["scripts", "styles", "assets", "style.css", "gulpfile.js", "package*.json", "./"]
+
+# Install dependencies
+RUN npm ci
+
+EXPOSE 2077
+
+# Switches user from root to node.
+USER node
+
+# The process this container should run
+CMD ["dumb-init", "npm", "start"]