Skip to content
Permalink
Browse files

Merge pull request #173 from Pageworks/wip/papertrain-0.2.0

Papertrain v0.2.0
  • Loading branch information...
codewithkyle committed Jun 10, 2019
2 parents 817588e + c825334 commit 95f6fad1215b11b5e427b3321791e54dce446e90
Showing with 1,531 additions and 2,822 deletions.
  1. +3 −0 .env.example
  2. +10 −3 .gitignore
  3. +22 −1 CHANGELOG.md
  4. +114 −18 README.md
  5. +0 −16 build-tools/cc-installer.sh
  6. +10 −0 build-tools/compile.config.js
  7. +0 −7 build-tools/generator/base/component/component.scss
  8. +0 −4 build-tools/generator/base/component/component.twig
  9. +0 −7 build-tools/generator/base/global/global.scss
  10. +0 −7 build-tools/generator/base/object/object.scss
  11. +0 −3 build-tools/generator/base/object/object.twig
  12. +0 −11 build-tools/generator/base/single/single.twig
  13. +5 −0 build-tools/generator/files/includable
  14. +8 −2 build-tools/generator/{base/component/component.ts → files/script.js}
  15. +6 −0 build-tools/generator/{base/single/single.ts → files/script.ts}
  16. +1 −1 build-tools/generator/{base/single/single.scss → files/style}
  17. +12 −0 build-tools/generator/files/template
  18. +321 −370 build-tools/generator/generate.js
  19. +0 −1 build-tools/generator/lib/files.js
  20. +97 −16 build-tools/generator/lib/questions.js
  21. +63 −43 build-tools/sass.config.js
  22. +11 −0 build-tools/setup/questions.js
  23. +4 −2 build-tools/setup/setup.js
  24. +8 −7 composer.json
  25. +107 −60 composer.lock
  26. +10 −8 config/app.php
  27. +14 −8 config/general.php
  28. +6 −0 config/imager.php
  29. +12 −0 config/papertrain/example.automation.php
  30. +7 −3 config/project.yaml
  31. +1 −0 modules/papertrainmodule/.craftplugin
  32. +32 −0 modules/papertrainmodule/.gitignore
  33. +131 −0 modules/papertrainmodule/src/PapertrainModule.php
  34. +48 −0 modules/papertrainmodule/src/assetbundles/papertrainmodule/PapertrainModuleAsset.php
  35. +11 −0 modules/papertrainmodule/src/assetbundles/papertrainmodule/dist/css/PapertrainModule.css
  36. +52 −0 modules/papertrainmodule/src/assetbundles/papertrainmodule/dist/img/PapertrainModule-icon.svg
  37. +11 −0 modules/papertrainmodule/src/assetbundles/papertrainmodule/dist/js/PapertrainModule.js
  38. +47 −0 modules/papertrainmodule/src/services/PapertrainModuleService.php
  39. +18 −0 modules/papertrainmodule/src/translations/en/papertrain-module.php
  40. +31 −0 modules/papertrainmodule/src/variables/PapertrainModuleVariable.php
  41. +118 −93 package-lock.json
  42. +23 −24 package.json
  43. +0 −1 public/assets/scripts/application.98165515.js
  44. +0 −1 public/assets/scripts/env.98165515.js
  45. +0 −118 public/assets/scripts/globals.98165515.js
  46. +0 −54 public/assets/scripts/module.98165515.js
  47. +0 −1,599 public/assets/scripts/npm.pageworks.98165515.js
  48. +0 −109 public/assets/scripts/npm.uuid.98165515.js
  49. +0 −153 public/assets/scripts/runtime.98165515.js
  50. +0 −1 public/assets/styles/button.98166328.css
  51. +0 −1 public/assets/styles/container.98166328.css
  52. +0 −1 public/assets/styles/fonts.98166328.css
  53. +0 −1 public/assets/styles/grid.98166328.css
  54. +0 −1 public/assets/styles/heading.98166328.css
  55. +0 −1 public/assets/styles/homepage.98166328.css
  56. +0 −1 public/assets/styles/main.98166328.css
  57. +0 −1 public/assets/styles/ratio.98166328.css
  58. +0 −1 public/assets/styles/spacing.98166328.css
  59. +0 −1 public/assets/styles/utility.98166328.css
  60. +0 −1 public/assets/styles/widths.98166328.css
  61. +0 −1 public/assets/styles/wrapper.98166328.css
  62. +4 −2 templates/_layouts/base.twig
  63. +12 −9 templates/_layouts/global-css.twig
  64. +6 −4 templates/_layouts/global-javascript.twig
  65. +2 −2 templates/homepage/index.twig
  66. +3 −1 utils/scripts/Application.ts
  67. +17 −2 utils/scripts/Env.ts
  68. +7 −0 utils/scripts/global.d.ts
  69. +7 −4 utils/styles/base/_normalize.scss
  70. +9 −1 utils/styles/base/_page.scss
  71. +6 −4 utils/styles/settings/_colors.scss
  72. +84 −31 webpack.config.js
@@ -48,3 +48,6 @@ SYSTEM_EMAIL_NAME="REPLACE_ME"

# Testing Email Adress
TEST_EMAIL_ADDRESS="REPLACE_ME"

# Your name
DEV_NAME="REPLACE_ME"
@@ -1,7 +1,16 @@
/vendor

# NPM
# -------
/node_modules

# Assets
/public/assets/
!/public/assets/fonts
!/public/assets/images
!/public/assets/polyfills
!/public/assets/videos

# Craft CMS
# -------
.env
@@ -22,13 +31,11 @@ license.key
error_log
logs/


# Other
# -------
/.sass-cache
.DS_Store
.stylelintcache
_compiled
.editorconfig

/vendor
/config/papertrain/automation.php
@@ -1,4 +1,25 @@
## 0.1.5 - Unreleased
## 0.2.0 - 2019-06-10

### Added

- Adds: Developers name input to the startup questionnaire [#167](https://github.com/Pageworks/papertrain/issues/167)
- Adds: [Preparse](https://github.com/aelvan/Preparse-Field-Craft) plugin to the boilerplate[#169](https://github.com/Pageworks/papertrain/issues/169)
- Adds: basic Imager config to the `/config` directory [#168](https://github.com/Pageworks/papertrain/issues/168)
- Adds: Papertrain module and `craft.papertrain.getAssetPaths()` variable [#170](https://github.com/Pageworks/papertrain/issues/170)
- Adds: server-side compiling [#171](https://github.com/Pageworks/papertrain/issues/171)
- Adds: Moves Env class instantiation to the Application class
- Adds: Added a public static `Env.startLoading()` and `Env.stopLoading()` class to triggering the loading animation
- Adds: new generator script [#172](https://github.com/Pageworks/papertrain/issues/172)
- Adds: updates the readme [#166](https://github.com/Pageworks/papertrain/issues/166)

### Fixed

- Fixes: `.gitignore` file wasn't remove the leading `/` from the vendor directory line
- Fixes: removes the Pjax class instantiation due incomplete Application class methods

### Removed

- Removes: `cc-installer.sh` script

## 0.1.4 - 2019-06-05

132 README.md
@@ -1,38 +1,59 @@
<p align="center">
<a href="http://papertrain.io"><img alt="Papertrain" src="_papertrain/papertrain-logo.png"/></a><br/>
<img style="display:inline-block;" src="https://img.shields.io/badge/CMS-Craft%203.1-ff69b4.svg?style=flat-square"/>
<img style="display:inline-block;" src="https://img.shields.io/badge/templating%20engine-Twig-orange.svg?style=flat-square"/>
<img style="display:inline-block;" src="https://img.shields.io/badge/style-SASS-blue.svg?style=flat-square"/>
<img style="display:inline-block;" src="https://img.shields.io/badge/typescript-3.4-yellow.svg?style=flat-square"/>
<img style="display:inline-block;" src="https://img.shields.io/badge/bundler-webpack-5299c8.svg?style=flat-square"/>
<a style="display:inline-block;" href="https://github.com/AndrewK9/papertrain/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-lightgray.svg?style=flat-square"/></a>
<a href="http://papertrain.io"><img alt="Papertrain" src="_papertrain/papertrain-logo.png"/></a><br/>
<img style="display:inline-block;" src="https://img.shields.io/badge/CMS-Craft%203.1-ff69b4.svg?style=flat-square"/>
<img style="display:inline-block;" src="https://img.shields.io/badge/templating%20engine-Twig-orange.svg?style=flat-square"/>
<img style="display:inline-block;" src="https://img.shields.io/badge/style-SASS-blue.svg?style=flat-square"/>
<img style="display:inline-block;" src="https://img.shields.io/badge/typescript-3.4-yellow.svg?style=flat-square"/>
<img style="display:inline-block;" src="https://img.shields.io/badge/bundler-webpack-5299c8.svg?style=flat-square"/>
<a style="display:inline-block;" href="https://github.com/AndrewK9/papertrain/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-lightgray.svg?style=flat-square"/></a>
</p>
# Papertrain
Papertrain is a framework designed to bring custom utilities and features to Craft CMS. Papertrain is built upon a [Modular Design Pattern](https://github.com/Pageworks/modular-design-pattern). Checkout this [example](https://github.com/codewithkyle/modular-design-pattern-javascript-example) to see how the modules work.
1. [Getting Started](#getting-started)
- [New Project](#starting-a-new-project)
- [Existing Project](#joining-an-existing-project)
1. [Creating Elements](#creating-elements)
- [Globals](#globals)
- [Objects](#objects)
- [Components](#components)
- [Templates](#templates)
- [Loading Styles and Scripts](#loading-styles-and-scripts)
1. [CSS Namespaces](#css-namespaces)
- [Namespace Format](#namespace-format)
- [Prefixes](#prefixes)
- [Example](#example)
1. [Deploying to Production](#deploying-to-production)
1. [Feedback](#feedback)
1. [License](#license)
# Getting Started
Start by downloading the [latest release](https://github.com/Pageworks/papertrain/releases) of Papertrain and extracting the files into your projects root directory.
When getting started you have two possible options. If you are starting a new project follow the [New Project](#starting-a-new-project) guide. If you're working with a project that has already been established follow the [Existing Project](#joining-an-existing-project) guide.
## Starting a New Project
Install the NPM dependencies by running the following command in your terminal: (requires [Node.js](https://nodejs.org/en/))
1: Start by downloading the [latest release](https://github.com/Pageworks/papertrain/releases) of Papertrain and extracting the files into your projects root directory.
2: Install the NPM dependencies by running the following command in your terminal: (requires [Node.js](https://nodejs.org/en/))
```script
npm install
```
Then install Craft CMS by running the following command in your terminal: (requires [composer](https://getcomposer.org/download/))
3: Install Craft CMS by running the following command in your terminal: (requires [composer](https://getcomposer.org/download/))
```script
composer install
```
Set your Apache server to point to the projects `/public` directory.
4: Set your Apache server to point to the projects `/public` directory.
Create a new empty database for the project.
5: Create a new empty database for the project.
Run the setup script by running the following command in your terminal:
6: Run the setup script by running the following command in your terminal:
```script
npm run setup
@@ -68,6 +89,32 @@ Then push your commit and master branch:
git push -u origin master
```
## Joining an Existing Project
1: Start by cloning the project
```script
git clone <URL>
```
2: Install the NPM dependencies by running the following command in your terminal: (requires [Node.js](https://nodejs.org/en/))
```script
npm ci
```
3: Set your Apache server to point to the projects `/public` directory.
4: Create a new empty database for the project.
5: Run the setup script by running the following command in your terminal:
```script
npm run setup
```
To finish follow the Craft CMS installation in the browser. If the browser doesn't automatically open navigate to the `/webmaster` route.
# Creating Elements
New elements can easily be created by using the CLI based element generator. To run the generation tool enter the following command into your terminal:
@@ -135,18 +182,30 @@ Components are defined as a combination of following files:
- Style
- Script
## Singles
## Templates
Singles are single template pages within Craft. They usually have a unique style, custom fields, or unique layout compared to the standard pages.
Templates are single template pages within Craft. They usually have a unique style, custom fields, or unique layout compared to the standard pages.
Singles can be composed of Globals, Objects, and Components.
Templates can be composed of Globals, Objects, and Components.
Singles are defined as a combination of the following files:
Templates are defined as a combination of the following files:
- HTML
- Style
- Style (optional)
- Script (optional)
## Loading Styles and Scripts
To load custom scripts and styles use the `getAssetPaths` method avilable via the Papertrain module. Pass in the kebab-case filenames of any module, css, or package that you need. Then use Crafts `view.registerCssFile` or `view.registerJsFile` to have the files automagically included for you.
```twig
{% set assetPaths = craft.papertrain.getAssetPaths(['asset-file-name', 'npm-package-name']) %}
{% do view.registerCssFile(assetPaths['asset-file-name'].css) %}
{% do view.registerJsFile(assetPaths['asset-file-name'].module) %}
{% do view.registerJsFile(assetPaths['npm-package-name'].package) %}
```
# CSS Namespaces
Papertrain follows a simplified version of the [BEM](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) naming methodology.
@@ -171,6 +230,7 @@ Classes will use a prefix to declare what type of element is being used.
- `g-` will be used for globals
- `o-` will be used for objects
- `c-` will be used for components
- `t-` will be used for templates
- `u-` will be used for utility classes
- `js-` will be used as a selector hook for JavaScript query selectors
- `is-` when something is in a specific state such as `is-open`
@@ -228,6 +288,42 @@ Some elements may contain other elements, in the example below the card will con
}
```
# Deploying to Production
Papertrain uses server-side compiling via [Nodejs](https://nodejs.org/en/) for the CSS and JavaScript modules/packages. Follow these steps to setup the server-side compiling. If you don't want server side compiling update the `.gitignore` file by removing the `/public/assets` line. This guide will assume you're server is running Ubuntu Server.
1: Install cwebp
```script
sudo apt-get install webp
```
2: Install Nodejs
```script
sudo apt-get install nodejs
```
3: Install or Update [NVM](https://github.com/nvm-sh/nvm)
```script
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
```
4: Install version 10.13.0 of node
```script
nvm install 10.13.0
```
5: Setup post-deployment commands
```script
<path to npm-cli.js> ci
<path to npm-cli.js> run production
```
# Feedback
Feel free to [open an issue](https://github.com/Pageworks/papertrain/issues) and report any bugs or request additional features.

This file was deleted.

@@ -1,6 +1,16 @@
const rimraf = require("rimraf");
const fs = require('fs');

/** Prevents stale scripts from being bundled */
if(fs.existsSync('./_compiled')){
rimraf.sync('./_compiled');
}

/** Cache busting timestamp logic */
if(!fs.existsSync(`config/papertrain/automation.php`)){
fs.copyFile(`config/papertrain/example.automation.php`, `config/papertrain/automation.php`, (err) => {
if (err){
throw err;
}
});
}

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

@@ -0,0 +1,5 @@
{% set REPLACE_WITH_CLASSAssets = craft.papertrain.getAssetPaths(['REPLACE_WITH_KEBAB']) %}
{% do view.registerCssFile(REPLACE_WITH_CLASSAssets['REPLACE_WITH_KEBAB'].css) %}
SCRIPT_PLACEHOLDER

<div class="REPLACE_WITH_SCSS_CLASS" MODULE_PLACEHOLDER></div>
@@ -1,11 +1,17 @@
/**
* @class REPLACE_ME
* @description A module for the REPLACE_NAME REPLACE_TYPE
* @author AUTHOR_NAME
*/

import { Module } from 'Module';
import { Application } from 'Application';
import { Env } from 'Env';

export class REPLACE_ME extends Module{
public static index:string = 'REPLACE_ME';
static index = 'REPLACE_ME';

constructor(view:HTMLElement, uuid:string){
constructor(view, uuid){
super(view, uuid);
if(Env.isDebug){
console.log('%c[Module Manager] '+`%ccreated new %c${ REPLACE_ME.index } %cmodule with an ID of %c${ uuid }`,'color:#4882fd','color:#eee','color:#48eefd','color:#eee','color:#48eefd');
@@ -1,3 +1,9 @@
/**
* @class REPLACE_ME
* @description A module for the REPLACE_NAME REPLACE_TYPE
* @author AUTHOR_NAME
*/

import { Module } from 'Module';
import { Application } from 'Application';
import { Env } from 'Env';
@@ -1,7 +1,7 @@
@import 'settings';
@import 'mixins';

#REPLACE_ME{
.REPLACE_ME{
position: relative;
display: inline-block;
}
@@ -0,0 +1,12 @@
{% set REPLACE_WITH_CLASSAssets = craft.papertrain.getAssetPaths(['REPLACE_WITH_KEBAB']) %}
{% do view.registerCssFile(REPLACE_WITH_CLASSAssets['REPLACE_WITH_KEBAB'].css) %}
SCRIPT_PLACEHOLDER

{% extends "_layouts/base" %}

{% block content %}
<article class="REPLACE_WITH_SCSS_CLASS g-container -full" data-template="REPLACE_WITH_KEBAB" MODULE_PLACEHOLDER>
<section class="g-container">
</section>
</article>
{% endblock %}

0 comments on commit 95f6fad

Please sign in to comment.
You can’t perform that action at this time.