larsonjj / generator-yeogurt Goto Github PK

Being kept in the dark about development efforts is no fun 👎
It also makes it harder to contribute to a project. So I think implementing a roadmap would be a good idea to give users and potential contributors a better understanding of project goals and potential development

I use data from Json for templates in my static Jade websites.

        jade:
            compile:
                options:
                    data:(dest,src)->
                        return require('./locals.json')

But in yeogurt there is other data

                data: {
                    debug: true
                }

How can I add both?

Running "less:server" (less) task

FileError: 'vendor/_font-awesome.less' wasn't found in dev/styles/main.less on line 16, column 1:
15 @import 'vendor/_lesshat';
16 @import 'vendor/_font-awesome';
17
Warning: Error compiling dev/styles/main.less Use --force to continue.

Aborted due to warnings.

This seems to be an issue with connect-livereload middleware. Need to investigate further.
Basically, the livereload script is not being correctly injected in static files (html), which is a problem.

default is a reserved word in IE8 even as an object property. Need to change this to main.

Grunt serve is unable to run. This is the output:

jit-grunt: Plugin for the "jade" task not found.
If you have installed the plugin already, please setting the static mapping.
See https://github.com/shootaroo/jit-grunt#static-mappings

I selected Jade templating, here's my yo-rc.json

{
  "generator-yeogurt": {
    "config": {
      "projectName": "Paleo Generator",
      "versionControl": "Git",
      "structure": "Single Page Application",
      "jsFramework": "Backbone",
      "jsTemplate": "Jade",
      "jsOption": "RequireJS",
      "testFramework": "Jasmine",
      "cssOption": "SASS",
      "useBourbon": false,
      "cssFramework": "Bootstrap",
      "ieSupport": true,
      "useGA": true,
      "useFTP": false,
      "jshint": true,
      "useDocker": true,
      "useKss": true,
      "extras": [
        "useBorderBox"
      ],
      "html5Addons": [
        "appleIcon"
      ]
    },
    "version": "0.8.2"
  }
}

I installed "grunt-contrib-jade": "0.11.0" in package.json and updated Gruntfile.js with this line jade: 'grunt-contrib-jade'.

The serve task compiles, but I'm unclear if this is a valid fix.

Underscore.string is an awesome string manipulation library that works with Lo-dash or as a standalone. Adding it to the generator would make many devs happy 😄

If unit testing is turned off based on as user's choice in the generator prompts, the test/ folder should never exist.

Ran into issues without having grunt separately installed - not through Yeoman. Installed it globally and ran again with the same configuration, without issue.

This is needed for simple console debugging, and IE8 doesn't support it without dev tools being open. To avoid the JS error mess, might as well define the console for just IE8.

JSX syntax is used by default for React projects as it is a bit more "friendly" to both designers and devs that are used to HTML. But there should be an option to use vanilla JS when working on a React project.

This file will store user choices from generator, which will help sub-generators create the correct files.

Adding this will allow the user to avoid having to download all npm and bower components right after the generator is finished.

The grunt-nsp plugin helps check for vulnerabilities in NPM modules, but since this generator will most likely not be run on an actual production server, this is a bit overkill. Also, the plugin tends to crash.

When invoking yeogurt and the dashboard option is enabled the bower.json file includes bootrap not bootstratp-sass

Supporting SVN 1.6 is a drag and its pretty old at this point. Removing the shell script that helps setup ignores is no longer needed for SVN 1.7+, so it should be removed

Congratulations on the new release. Looks like there is a lot happing with #0.10.0

Just had a few suggestions.

So...you broke backwards compatibility. Not quite sure what versioning scheme you're using. You might want to consider incrementing your major version number to 1.0.0 since you broke backwards compatibility.

You can read more about it here...
http://semver.org/

I'd love to start contributing to yeogurt. But I'm concerned by the recent Monolithic PR. It seems pretty big and would have caused merge conflicts with anyone else developing in parallel.

Would you consider issuing smaller PRs and using github issues and milestones rather than check boxes?

I have a few other ideas if you want to talk.

Use H5BP versions of these files as they are good boilerplate and really should be included in every site

see the screenshot

It would be nice to be able to choose which CSS Reset rules to use when setting up a yeogurt project, instead of having to manually change the _reset.scss file. For example, present the option to choose Eric Meyer's Reset or one of the other CSS Resets.

I'm not sure how this might affect things like the dashboard or the styleguide. Maybe those would need a separate CSS file than the rest of the site.

Many projects need to use custom web fonts and static site generator needs to support this feature.

Now I use webfonts to generate them (and just copy to /fonts) and think that we can use grunt-shell to embed it into Grunt and grunt-fontface to generate stylesheets.

Why webfonts and not grunt-fontgen? Because grunt-fontgen requires installation of homebrew modules that maybe hard to novices and windows users. webfonts uses compiled binaries to generate fonts. I have not tested it in windows but think that it would work.

We need these formats:

• eot for IE
• woff for WebKit
• ttf as a standard
• svg for some old browsers such as old MobileSafari

There is also few generators per format as Grunt tasks:

• grunt-ttf2woff
• grunt-ttf2eot
• but no for ttf2svg. newermind, we do not need them I think

I love to write on preprocessors 😆 so I love Coffee. and I love a coffee! 😂

React is awesome, but it really only handles the View layer of your application. With Flux, you can complete your application architecture and make working with React even more awesome 👍

Things that should happen:

• Adding prompt that, when enabled, creates a Flux boilerplate
• New sub-generators that handle creating all the components of Flux (actions, stores, dispatchers, etc)

Based on angularjs usage, karma seems to be the better test runner as it actually lets you test in real browsers. Should also make the switch to Jasmine as it seems more devs are familiar with it when compared to mocha

I noticed that if you are running the server task and modify a component, it will update within a page, but it won't update if you are looking directly at the component file.
For instance:
If you are looking at a page that holds a list component while running grunt server:
http://0.0.0.0:9000/.server/markup/pages/index.html
It will update upon changing the list.jade file. If you are looking at:
http://0.0.0.0:9000/.server/markup/components/list-component.html
It won't update when changing the list.jade file.

Not sure if this is expected, or just a bug. The component file will only get updated upon running grunt build.

The current implementation of sub-gens isn't super useful.
Should revamp to separate file creation concerns, need generators for:

markup/
scripts/
styles/

Saw these on H5BP and though I might as well add some Yeogurt icons.

I see that if I have chosen Sass I need to write in scss syntax into all styles/ directory. I do not want to use scss and want to use indented sass.

So I need sass start styles pack like in styles/ or views/jade/.

But I cannot PR now because of #48.

As a walkthrough I use @import 'indented/index.sass'; with all other imports inside but I feel like I am using it wrong.

Grunt build does copy font files and I was able to fix the issue by copying and the line: 'styles/fonts/*.{woff,otf,ttf,eot,svg}'

Initially created model that was singular 'meal' using the :model sub generator. Then created a collection named 'meals' and without looking at the documentation noticed a model 'meals' was also created.

I thought it would be nice to have an --uninstall flag that could delete files created with the sub generator. Alternatively the :component sub generator could include a flag to create the Backbone model and spec files if you want models and collections to share the same file name.

How about add grunt-slim to yeogurt to implement Slim. It has super-effective syntax:

doctype html
html
  head
    title Slim Examples
    meta name="keywords" content="template language"
    meta name="author" content=author
    javascript:
      alert('Slim supports embedded javascript!')
…
    div id="footer"
      = render 'footer'
      | Copyright © #{year} #{author}

Like Jade but better.

I am not sure because Slim is from Ruby world and Grunt is Node.js.

This will for IOS devices that can add websites to their 'home screen'

Just installed and have an error on grunt serve:

Fatal error: source string:6: error: file to import not found or unreadable: 'base/_variables'

It's like #32 but dev/styles/base/_variables.scss exist.

I tried to comment them out and grunt serve was launched without errors.

Then I tried to create dev/styles/my.scss and import it in dev/styles/main.scss with @import "my"; but with no luck: same error.

So I cannot @import anything now.

If you update yeogurt, how can I update my installed copy of it?

It have .yo-rc file but if I run yo yeogurt it tries to install it instead.

I tried to yo update and yo yeogurt:update but with no luck.

It would be cool to reload watch task when I change some grunt configurations (like grunt/config/*.js) or install/update something with bower.

I think it will be good to put handlebars/jade/less/sass/swig/ into grunt/config/languages folder and so on.

Ideally will be:

• grunt
  • config
    • languages
      • handlebars
      • jade
      • less
      • sass
      • swig
      • …
    • optimize
      • htmlmin
      • imagemin
      • pngmin
      • …
    • doc
      • jsdoc
      • kss
      • …
    • …

This can describe all possibilities of yeogurt for newbies like me and make work with it better of course.

Changes made to the component and template pages are not reflected in the watch task on Serve. Requires server to be restarted to show changes.

Related to newer?

Would be good to setup guidelines for others who would like to contribute to this project

Implement GA within base template and make it optional through generator prompt.

node-sass is faster than Ruby implementation but much younger. With Ruby Sass I can use custom Ruby code as an extension. Convert any string into base64 for example:

source/styles/extensions/base64.rb

require 'sass'
require 'base64'

module Sass::Script::Functions
    def base64Encode(string)
        assert_type string, :String
        Sass::Script::String.new(Base64.encode64(string.value))
    end
    declare :base64Encode, :args => [:string]
end

gruntfile.coffee

module.exports=(grunt) ->
    grunt.initConfig
        pkg:grunt.file.readJSON 'package.json'
        sass:
            dev:
                options:
                    sourcemap:true
                    require:[
                        './source/styles/extensions/base64-encode'

style.sass

@function inline-svg($content,$base64: true)
    $prefix: ''
    $output: ''
    @if $base64==true
        $prefix: ';base64,'
        $output: base64Encode($content)
    @else
        $prefix: ','
        $output: $content
    @return unquote('url("data:image/svg+xml'+$prefix+$output+'")')

So I convert generated SVG string into background-image: url("data:image/svg+xml;base64,<…>").

With node-sass this is harder. ruly I don't know how to do it with node-sass.

Also look at Sache, Sass extensions library with a lot of Ruby code in them.

I do not talking about Compass because I do not use it because of speed.

Need to have a system of branching to make contributing to this project much easier. Git-Flow seems to be quite popular and should provide much needed structure

Based on this thread:
yeoman/yeoman#1183

Stylus is an incredibly popular CSS preprocessor. As such, I think should be included in the generator.

Enhancement Suggestion:
Include "grunt deploy" as an available task within "grunt serve".

1. "grunt deploy" copies files to /dist folder. These files are then ready to FTP.

2. "grunt deploy" is required to run in a separate command window which also requires shutting down "grunt serve".

Benefit:
Reduce the steps required for FTP-ready files.

Current steps:

• edit files
• run grunt serve
• stop grunt serve
• open new terminal/command window
• run grunt deploy
• files are now in /dist ready to use as html locally, upload or zip and share

ps - Hi Jake. This is Caroline B. :)

Hey Jake!

I'd love to have the option of choosing underscore vs lodash.

Then to have the option to add underscore.string.

If we want to add some non-CSS based style preprocessors such as Stylus we need to prepare a structure before.

Now all Yeogurt' SCSS based on Less and I think they converts from less to scss and the hell inside.

We need to put them into a separate folder like styles/css-based or just separate them into styles/less/ and styles/scss.

.jsx files are reloading and running correct tasks, but regular .js components are not.

Keep in mind that IE8 support must use the media="print" and media="screen" link attributes since it doesnt support the CSS3 media print yet.

Use the CSS3 media print if IE8 support is not chosen

By default, the Scss syntax is used when using Sass. This is a proposal for being able to use the "white-space" dependent syntax variant of Sass is desired.

Proposed

// Sass Syntax

body
  font: 100% Helvetica, sans-serif
  background-color: #efefef

Default

// Scss Syntax

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

It would be beneficial to allow a user to choose what type of Sass syntax they would like.

Changes needed:

• Change file comment from JSDoc format to simple double slashes //
• File extension becomes .sass

The compress task, app/templates/grunt/config/compress.js src property starts off with "/", shouldn't this be "/"?