kittn/generator-kittn

The Yeoman Kittn Generator

generator-kittn's Issues

[Feature / Vue] Add option for Vue SSR

User should be able to select if he needs SSR in combination with Vue.

TBD

Two more options for a simple and more advanced option.

• A simple boilerplate without vue-router if your App is on one page for example.
• More advanced, full flavoured with vue-router, Vuex etc. like the official Hackernews Example

Delivery of content builders via DB import

Also adding an automated Import with Node

Documentation

For easier and more professional usage of this generator, you need to provide a full-grown documentation over available functions (gulp, sass...).

1. Fill the GitHub-Wiki
2. Transport them to kittn.de

Contentbuilder as seperate Module

Exclude the contentbuilder from the main generator. Both contentbuilders (Craft and WP) are then attached as sub-generators.

Should move to the mem-fs system

Hey, I see you're still using the older file commands. You might want to consider updating your generator to use the newer mem-fs based file commands (this.copy -> this.fs.copy).

See http://yeoman.io/authoring/file-system.html

Changes on main.js wont trigger Webpack

Tested on Craft and HTML Projecttype.

Any changes to the main.js file will not result in a recompilation of the JS file. A path problem can be excluded because Webpack compiles the JS file at startup, in case of an error it displays this.

The error can be corrected in the runtime, which leads to the Webpack compiled again, but not more.

CSS Filename is not set correctly in prototype mode

The CSS filename is always style.css and not the value setted in the yeoman config process.

Can't run with default settings

Getting the following errors when I run yo kittn and choose all default settings.

I have tried reinstalling node.

SyntaxError: Unexpected token else in /Users/joshy/.nvm/versions/node/v10.0.0/lib/node_modules/generator-kittn/generators/app/templates/gulpfile/tasks/build.js while compiling ejs

If the above error is not helpful, you may want to try EJS-Lint:
https://github.com/RyanZim/EJS-Lint
at new Function ()
at Template.compile (/Users/joshy/.nvm/versions/node/v10.0.0/lib/node_modules/generator-kittn/node_modules/ejs/lib/ejs.js:592:12)
at Object.compile (/Users/joshy/.nvm/versions/node/v10.0.0/lib/node_modules/generator-kittn/node_modules/ejs/lib/ejs.js:388:16)
at handleCache (/Users/joshy/.nvm/versions/node/v10.0.0/lib/node_modules/generator-kittn/node_modules/ejs/lib/ejs.js:212:18)
at Object.exports.render (/Users/joshy/.nvm/versions/node/v10.0.0/lib/node_modules/generator-kittn/node_modules/ejs/lib/ejs.js:414:10)
at render (/Users/joshy/.nvm/versions/node/v10.0.0/lib/node_modules/generator-kittn/node_modules/mem-fs-editor/lib/actions/copy-tpl.js:12:16)
at process (/Users/joshy/.nvm/versions/node/v10.0.0/lib/node_modules/generator-kittn/node_modules/mem-fs-editor/lib/actions/copy-tpl.js:26:14)
at applyProcessingFunc (/Users/joshy/.nvm/versions/node/v10.0.0/lib/node_modules/generator-kittn/node_modules/mem-fs-editor/lib/actions/copy.js:13:16)
at EditionInterface.exports._copySingle (/Users/joshy/.nvm/versions/node/v10.0.0/lib/node_modules/generator-kittn/node_modules/mem-fs-editor/lib/actions/copy.js:63:16)
at files.forEach.file (/Users/joshy/.nvm/versions/node/v10.0.0/lib/node_modules/generator-kittn/node_modules/mem-fs-editor/lib/actions/copy.js:50:10)

And then afterward if I do npm run init I get:

[02:14:57] Requiring external module @babel/register
/Users/joshy/projects/kittn-5/gulpfile/tasks/browsersync.js:5
import kc from '../../config.json';
^^

SyntaxError: Unexpected identifier
at new Script (vm.js:74:7)
at createScript (vm.js:246:10)
at Object.runInThisContext (vm.js:298:10)
at Module._compile (internal/modules/cjs/loader.js:646:28)
at Module._compile (/Users/joshy/projects/kittn-5/node_modules/pirates/lib/index.js:91:24)
at Module._extensions..js (internal/modules/cjs/loader.js:689:10)
at Object.newLoader [as .js] (/Users/joshy/projects/kittn-5/node_modules/pirates/lib/index.js:96:7)
at Module.load (internal/modules/cjs/loader.js:589:32)
at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
at Function.Module._load (internal/modules/cjs/loader.js:520:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] init: cross-env NODE_ENV=production gulp init --env=init && cross-env NODE_ENV=production npm run subtask:bundlewebpack
npm ERR! Exit status 1

[Generator] Adding Email and Name

Vue-CLI have this Feature. When the Prompt ask for Name and Email, the CLI read the local Git User as default Value.

Stylelint breaks init task

If there is no sass or scss file in the js-directory, the init tasks breaks by the webpack stylelintplugin due to this issue: webpack-contrib/stylelint-webpack-plugin#82

Rework Wordpress Contentbuilder

CriticalCSS not perfectly generated

When generating criticalCSS, Gulp generates only a part of it, due to problems with CSSNano.
The options to deactivate would be minifySelectors and uniqueSelectors.

Wait for more users to occur the same error.

[Feature/PWA] Serviceworker Plugin

Integration des Serviceworker Plugins - wäre vielleicht ganz Sinnvoll
https://github.com/oliviertassinari/serviceworker-webpack-plugin

error Couldn't find match for "pull/6/head" for command-exists on npm install

On npm install -g generator-kittn I get:
npm ERR! code 1 npm ERR! Command failed: /usr/bin/git checkout pull/6/head npm ERR! error: pathspec 'pull/6/head' did not match any file(s) known to git. npm ERR! npm ERR! A complete log of this run can be found in: npm ERR! /Users/m.rabelero.campos/.npm/_logs/2017-06-08T12_46_17_856Z-debug.log

The error log shows this error message:
35 silly fetchPackageMetaData error for command-exists@github:mathisonian/command-exists#pull/6/head Command failed: /usr/bin/git checkout pull/6/head 35 silly fetchPackageMetaData error: pathspec 'pull/6/head' did not match any file(s) known to git. 36 verbose stack Error: Command failed: /usr/bin/git checkout pull/6/head 36 verbose stack error: pathspec 'pull/6/head' did not match any file(s) known to git. 36 verbose stack 36 verbose stack at ChildProcess.exithandler (child_process.js:252:12) 36 verbose stack at emitTwo (events.js:125:13) 36 verbose stack at ChildProcess.emit (events.js:213:7) 36 verbose stack at maybeClose (internal/child_process.js:887:16) 36 verbose stack at Socket.stream.socket.on (internal/child_process.js:340:11) 36 verbose stack at emitOne (events.js:115:13) 36 verbose stack at Socket.emit (events.js:210:7) 36 verbose stack at Pipe._handle.close [as _onclose] (net.js:546:12) 37 verbose cwd /Users/m.rabelero.campos/Sites 38 verbose Darwin 15.6.0 39 verbose argv "/usr/local/Cellar/node/8.0.0_1/bin/node" "/usr/local/bin/npm" "install" "-g" "generator-kittn" 40 verbose node v8.0.0 41 verbose npm v5.0.3 42 error code 1 43 error Command failed: /usr/bin/git checkout pull/6/head 43 error error: pathspec 'pull/6/head' did not match any file(s) known to git. 44 verbose exit [ 1, true ]

On yarn add generator-kittn I get:
yarn add v0.24.6 info No lockfile found. [1/4] 🔍 Resolving packages... error Couldn't find match for "pull/6/head" in "laggingreflex-sync,master,10/head,11/head,2/head,3/head,4/head,5/head,6/head,8/head,v0.1.0,v1.0.0,v1.0.1,v1.0.2,v1.1.0,v1.2.0,v1.2.1,v1.2.2" for "https://github.com/mathisonian/command-exists.git". info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

WGet and WP-CLI

Users who have neither wget nor wp-cli installed (and probably also no git-cli) get the installation with the generator Promise error.

Rework Main.js

Either put together from several parts to a Main.js specific to the project.

Or create multiple Main.js files for Vue, Craft, Wordpress.

Fix images in `src/.system`

Default-Images in src/.system are broken and not usable.

[Feature|Browsersync] Without Snippet

After some attempts, maybe someone else has an idea how to get browsersync without a snippet to run when the proxy is used.

New Questionare

First, only the idea how to rebuild the prompts to shorten the set of questions. Some questions like repository URL may even be superfluous. The respective answer could therefore also note later in the package.json.

01. (string)  Projectname
02. (list)    Projecttype [
                html, 
                craft,                         // Set $cmsInstall Var 
                wordpress,                     // Set $cmsInstall Var
                craft with contentbuilder,     // Set $cmsInstall Var Set $cmsContentbuilder Var
                wordpress with contentbuilder  // Set $cmsInstall Var Set $cmsContentbuilder Var
              ]


// ------ if $cmsInstall and $cmsContentbuilder is true --------

03. (bool)    Craft / Wordpress Install
04. (bool)    Craft / Wordpress Environment Credentials
  -> 04.01.   (list)   Credentials HTTP or HTTPS (needed?)
  -> 04.02.   (string) Credentials Domain
  -> 04.04.   (string) Credentials DB Host (needed? Normaly localhost)
  -> 04.05.   (string) Credentials DB User
  -> 04.06.   (string) Credentials DB Pass
  -> 04.07.   (string) Credentials DB Name
  -> 04.08.   (bool)   Credentials Create DB
  -> 04.09.   (bool)   Credentials Use Mamp Socket


// ------ if $cmsInstall is true --------

03. (list)    Normalize [custom, regular, no]
04. (bool)    Container Queries
05. (list)    CSS Methodologies [own, atomic, itcss]
06. (bool)    Craft / Wordpress Install
07. (bool)    Craft / Wordpress Environment Credentials
  -> 07.01.   (list)   Credentials HTTP or HTTPS (needed?)
  -> 07.02.   (string) Credentials Domain
  -> 07.04.   (string) Credentials DB Host (needed? Normaly localhost)
  -> 07.05.   (string) Credentials DB User
  -> 07.06.   (string) Credentials DB Pass
  -> 07.07.   (string) Credentials DB Name
  -> 07.08.   (bool)   Credentials Create DB
  -> 07.09.   (bool)   Credentials Use Mamp Socket


// ------ if Projecttype is html --------

03. (list)    Normalize [custom, regular, no]
04. (bool)    Container Queries
05. (list)    CSS Methodologies [own, atomic, itcss]

     
// ------ Last General Questions  --------

01. (string)  CSS Filename
02. (list)    Media Query Unit  [em, px]           
03. (string)  Theme Color
04. (bool)    Activate Stylelint
05. (bool)    CriticalCSS 
06. (list)    jQuery [nope, slim, fullpackage]
07. (list)    JS Reactive Frameworks [none, vue, react]
08. (check)   Documentation [
                Astrum Pattern Lib,
                SassDoc
              ]

09. (string) Description (needed?)
10. (string) Project Version
11. (string) Project Author
12. (string) Project Mail
13. (string) Project Repository URL (needed?)

Check active node-version on preinstall

Maybe this would be a good way: https://medium.com/@adambisek/how-to-check-minimum-required-node-js-version-4a78a8855a0f

[Feature / Vue] Dropping Vue-Resource

Based on this Article https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4#.ehxb3xc23

We are dropping Vue-Resource and integrate Axios as HTTP Client Lib.

Integrate np for better npm publish

https://github.com/sindresorhus/np

Generator stop after Step - Project Repo-URL

With Installing WP-CLI manually it works.

URL to the Git-Repo error connecting: Error: connect ECONNREFUSED 127.0.0.1:3306 at Object.exports._errnoException (util.js:949:11) at exports._exceptionWithHostPort (util.js:972:20) at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1080:14) -------------------- at Protocol._enqueue (/Users/deadpool/node_modules/mysql/lib/protocol/Protocol.js:141:48) at Protocol.handshake (/Users/deadpool/node_modules/mysql/lib/protocol/Protocol.js:52:41) at Connection.connect (/Users/deadpool/node_modules/mysql/lib/Connection.js:130:18) at yeoman.Base.extend.app (/Users/deadpool/node_modules/generator-kittn/app/index.js:624:18) at Object.<anonymous> (/Users/deadpool/node_modules/yeoman-generator/lib/base.js:439:23) at /Users/deadpool/node_modules/run-async/index.js:25:25 at /Users/deadpool/node_modules/run-async/index.js:24:19 at /Users/deadpool/node_modules/yeoman-generator/lib/base.js:440:9 at tryOnImmediate (timers.js:543:15) at processImmediate [as _immediateCallback/Users/deadpool/node_modules/generator-kittn/app/index.js:632 if (error) throw error; ^ Error: connect ECONNREFUSED 127.0.0.1:3306 at Object.exports._errnoException (util.js:949:11) at exports._exceptionWithHostPort (util.js:972:20) at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1080:14) -------------------- at Protocol._enqueue (/Users/deadpool/node_modules/mysql/lib/protocol/Protocol.js:141:48) at Protocol.handshake (/Users/deadpool/node_modules/mysql/lib/protocol/Protocol.js:52:41) at Connection.connect (/Users/deadpool/node_modules/mysql/lib/Connection.js:130:18) at yeoman.Base.extend.app (/Users/deadpool/node_modules/generator-kittn/app/index.js:624:18) at Object.<anonymous> (/Users/deadpool/node_modules/yeoman-generator/lib/base.js:439:23) at /Users/deadpool/node_modules/run-async/index.js:25:25 at /Users/deadpool/node_modules/run-async/index.js:24:19 at /Users/deadpool/node_modules/yeoman-generator/lib/b%

[Feature|Webpack] HMR Browsersync Proxy

Currently, HMR does not work if you run a browsersync proxy (own domain). Is then problematic if you want to build a page with a PHP CMS, which should run with Vue, React or Angular (HMR active). A refresh of the page is not enough, you have to compile the javascript manually.

The biggest drawback is the missing javascript hot reload, which could be annoying at SPAs.

[Webpack] Works not Nicely

Webpack Experts needed. The current Webpack Workflow have several Issues.

Webpack with Custom URL and HMR
In combination with a custom URL, HMR didn't trigger. Any Change on a JS File didn't trigger HMR in the Browser

Webpack with Custom URL without HMR
Any Change on a JS File have to Bundle manually, otherwise you get no Updates.

Overall Webpack Config
Its Ugly, not smart enough.

File Generator

Idea would be a generator or subgenerator that generates new components, the corresponding Sass/ SCSS, JS and HTML / Twig / PHP files, assigning them to the directories. Basic info and headers are written into the files.

The generator is semi-dynamic. Basic information about project type, ITCSS / Atomic etc. should refer to the config.json or a .kittnrc file. The user should only be queried by name and type (object, component, element, whatever).

[Feature / Webpack] Option for Fully Featured Webpack Build

Now i have included a Webpack Config with a Middleware for BrowserSync. Perfect for building Themes for a CMS.

But I think for the app development, it is better to use Webpack to the full extent. So as a bundler and a builder. Its also better for SSR with Vue.

TODO

• Polish the actual Webpack Bundle Config
• Adding a second Option to use Webpack as Bundler and Builder

[Feature / PostCSS] Adding `rs` as unit

Add a rs-Unit for Spacer in rem:

    function(css) { 
      // Spacer Function
      css.walkDecls(function (decl) {
        const BASE = parseInt(kc.css.baseFontSize, 10)
        if (decl.value.match(/spacer/)) {
          const SPACER = parseInt(kc.css.spacer, 10)
          decl.value = SPACER * parseFloat(decl.value) + 'px'
        }
        if (decl.value.match(/rs/)) {
          const SPACER = parseInt(kc.css.spacer, 10)
          decl.value = SPACER * parseFloat(decl.value) / BASE  + 'rem'
        }
        if (decl.value.match(/pxrem/)) {
          decl.value = parseFloat(decl.value) / BASE + 'rem'
        }
      })
    }

Define different CriticalCSS Configs

For

• Wordpress
• Craft
• Static Pages

[bug] naming breakpoints as string fails compiler

Naming the breakpoints in the $kittn-breakpoint-map as string will crash the compiler.

Example:

$kittn-breakpoint-map: (
  small: (
    size: 480px,
    visibility: true,
    step: true,
    fontsize: false
  )
}

Error:

Function bp did not return a value
        on line 68 of src/framework/core/mixins/_break.scss
>>     $size:
unit-check(bp($target,$list));
   ----------------------^

    messageOriginal:
Function bp did not return a value
    relativePath:
src/framework/core/mixins/_break.scss

Because of @include break(932px) is also possible in the mixin.

Generate Wordpress style.css from package.json

For easier Credential- and Version-Handling, create the style.css for Wordpress via https://www.npmjs.com/package/gulp-header

Starter Pack Craft Install Bugs

Following the Bugs:

• Generator wont add a Database
• No .htaccess files in the src/.system/ and src/.system/en folder (would be copied with npm run init task)
• Wrong filerights in craftscripts
• Smaller Webpack Error GET http://localhost:3000/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING
• On Deploy CSS wont be minified

vue setup with latest yo kittn version V.3.83.4

i've setup a project with yo kittn and vue (runtime only) - everything works great, i use twig and scss

commands i have run after yo kittn:
npm run init
npm run develop

no errors
twig and scss working but not vue - no output in div #app

default vue setup with app.js and app.vue is as its coming out from the yo kittn generator

what am i missing?

[Feature / Builder] Disable HMR

If you create Pagetemplates without an MVC framework (React, Vue, Angular and similar), then HMR is rather disturbing. Then it might be a good idea to add HMR as an option. If you have the option with Vue (or React, Angular) deactivated.

Optimize CraftCMS install dialog response

Optimize the confirmation of the CraftCMS terms with a break, or trigger it after yarn init.

[Webpack] Load Config from config.json

For easier maintenance, get the dist/src paths in webpack.config from global config.json.

[Bug] PostCSS Spacer Function doesn't work with multiple attributes

When writing style-definitions with multiple attributes, like border: 1spacer solid red, the postcss-function removes everything after 1spacer.

Yo-Check the name for illegal characters

When entering a name for the project, which is used in the package.json, yo should check for illegal characters like whitespaces, which prevent yarn or npm from installing dependencies.

[bug] BrowserSync not working with Wordpress

Version: 4.0.0-alpha.20

When installing for creating a wordpress theme, browsersync is not working. It's starting just fine, but doesn't open a window though, neither providing a frontend-URL, only a backend-URL (:3001).
In the backend, it says:
Place this snippet somewhere before the closing </body> tag in your website:

<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.17.1'><\/script>".replace("HOST", location.hostname));
//]]></script>

Even though I did that, still it isn't working.

Test with Node v10

The yo-install seems to work without any problems, but Gulp and Webpack are throwing ugly errors. Test and Fix!

Generator Improvements

Use vars for predefined settings:

E.g. yo kittn --px to automatically use px-media-queries (or other defaults...)

Does not install into current directory on Windows

Kittn does not recognize the correct path where the files should be created.
I did this in my console:

mkdir kittn
cd kittn
yo kittn

Then the installer says Please give the project a name (without Spaces) (xampphtdocs)
it seems to ignore the windows directory separator, because the folder or project name should be either xampp/htdocs/kittn or the kittn directory should be created automatically in xampp/htdocs/

Could you provide a fix for this? I am willing to test.

[Wordpress|Contentbuilder] Keine default-Klasse beim WP-CB

Kittn mit WordPress-CB:
Section hinzufügen und dort unter Option den Style auf default stehen haben, funktioniert nicht, da die default-Klasse nicht hinzugefügt wird.

Es wird also nicht:

<section class="c-section c-section--s-default">

gesetzt.

Stelle ich auf "Style 1", wird aber

<section class="c-section c-section--s-style1">

ausgegeben.

Logo

[Feature/Vue] Axios or Vue-Resource

Some seem to have problems with Axios, would not it be quite good if we would offer optional Vue-Resource as an alternative?

Add babel-preset-env for smaller polyfills

For smaller javascript, add https://github.com/babel/babel-preset-env and change the .babelrc to:

{
  "presets": [
    ["env",
      {
        "targets": {
          "browsers": ["> 5%", "ie >= 11"]
        },
        "useBuiltIns": true
      }
    ],
    "es2015",
    "stage-0"
  ]
}

[PostCSS] Custom Function

Search for a other Keyword, rs is to short. Otherwise it triggers with background-image: url("data:image/svg+xml;charset=utf-8,.

if (decl.value.match(/rs/)) {
  decl.value = SPACER * parseFloat(decl.value) / BASE  + 'rem'
}

Update Webpack to 2.0

To be future-proof, update Webpack and its config to >2.0.