brunch/brunch.github.io

The website

Brunch.io site

This is a source code repository for http://brunch.io.

If you want to edit source files then you should switch to source branch and work with app directory. All files in the public dir are generated by Brunch and deployed automatically with Travis.

Run

• git clone https://github.com/brunch/brunch.github.io && cd brunch.github.io
• git checkout source
• npm install
• npm start

License

Brunch site is licensed under the MIT license.

brunch.github.io's Issues

How to use brunch deal with image?

like base64, any plugin?

Is this codebase dead?

I want to use brunch but it hasn’t had any code merged in over a year while there are active prs. Have the creators given up on it?

"Getting started" screencast

thx to @bmaeser for the hint

Undocumented npm.compilers

I was getting 'import' or "'export' should appear at the top level" error and struggled to solve it until I found some github issue that explained to use npm.compilers options... which are undocumented and unexplained.

Duplicated 'Examples' menu item

Here some screenshot

Move docs to our website

probably

Typo

From the home page: "First of all, Brunch is order-a-magnitude simpler."

It's "order-a-milkshake," but "order-OF-magnitude."

Just sayin'.

Create page for brunch with IDE

Hi. I propose to create new page for site with list of packages for different IDE's.
E.g I've build some for atom
I future someone from brunch community can build for other ide's which he/she uses and we can put the on this site page.
Is it worth?

style code examples

github ribbon

Shouldn't this have the standard angled "Fork me on GitHub" ribbon? Or was that omitted deliberately?

Move on https

It would be awesome if site can move on https.
It also will get possibility to use service workers.
I found this article which might help to resolve this issue.

Github links to stable aren't working

There are several links on your homepage pointing to Github that are returning 404s (like this one https://github.com/brunch/brunch/blob/stable/docs/README.md). I'm not sure if you want them pointing to master or a specific release, but I just wanted to let you that the links with "stable" in them aren't working.

Typo on the Plugins page

There is a typo in the copy for the HMR-brunch plugin on http://brunch.io/plugins as seen below:

screenshot of todo example and link to live version

"module.exports" vs "exports" in brunch-config.js examples

Some of the brunch-config.js examples on the site use module.exports at the top level, but the default dead-simple skeleton uses plain exports.

For example, the concepts page shows this as the simplest possible config:

module.exports = {
  files: {
    javascripts: {joinTo: 'app.js'},
    stylesheets: {joinTo: 'app.css'}
  }
}

but if you run brunch new projectname (v2.10.9), you actually get:

exports.files = {
  javascripts: {joinTo: 'app.js'},
  stylesheets: {joinTo: 'app.css'}
};

Should the examples on the site be brought up to date with the current output of brunch new? I looked through a random sample of skeletons and some of them do use module.exports, and both ways currently work. But exports at the top level seems to be the default.

I'm happy to submit a PR with changes to the relevant examples.

Typo in intro text

Brunch's goal, in contast, is to provide you with simplest and fastest possible way of managing and building your HTML5 app.

...in cont_R_ast....

A Quick Demo section on index page is blank

"A Quick Demo" section - which should show a video - is empty because it tries to load the video through http instead of https

Mixed Content: The page at 'https://brunch.io/' was loaded over HTTPS, but requested an insecure resource 'http://player.vimeo.com/video/75702540'. This request has been blocked; the content must be served over HTTPS.

in brunch.github.io/app/assets/index.jade

<div class="defer-iframe" data-src="http://player.vimeo.com/video/75702540" data-style="width: 100%; height: 388px"></div>

should be

<div class="defer-iframe" data-src="https://player.vimeo.com/video/75702540" data-style="width: 100%; height: 388px"></div>

typo in the _docs/using-modules.md ?

Hello.

// brunch-config
module.exports = {
  modules: {
    autoRequire: {
      // outputFileName : [ entryModule ]
      'javascripts/app.js': ['initialize']
    }
 }
};

With 'simple' skeleton is not worked. Must be a

// brunch-config
module.exports = {
  modules: {
    autoRequire: {
      // outputFileName : [ entryModule ]
      'app.js': ['initialize']
    }
 }
};

?

add changelog

Add brunch colors to examples

Lodash with typescript and brunch no bueno

I'm getting this error

lodash.js:4Uncaught Error: Cannot find module 'buffer' from 'lodash/lodash.js'

I've been fighting it for like 5 hours. Tried everything I can think of. different plugins, removing adding babel, removing babel. blowing away node_modules and reinstalling. ordering plugins in package.json
Installed buffer directly. Going insane.

Importing lodash like this:

import * as _ from "lodash";

or 

import _  = require("lodash");

both failed.

brunch-config

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"

      // To use a separate vendor.js bundle, specify two files path
      // http://brunch.io/docs/config#-files-
      // joinTo: {
      //  "js/app.js": /^(web\/static\/js)/,
      //  "js/vendor.js": /^(web\/static\/vendor)|(deps)/
      // }
      //
      // To change the order of concatenation of files, explicitly mention here
      // order: {
      //   before: [
      //     "web/static/vendor/js/jquery-2.1.1.js",
      //     "web/static/vendor/js/bootstrap.min.js"
      //   ]
      // }
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["web/static/css/app.scss"] // concat app.css last
      }
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/web/static/assets". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
      assets: /^(web\/static\/assets)/,
      ignored: [
              /[\\/]_/,
              /vendor[\\/]node[\\/]/,
              /vendor[\\/](j?ruby-.*|bundle)[\\/]/,
              /css\/(?!app\.scss)/
      ]
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: [
      "web/static",
      "test/static"
    ],

    // Where to compile files to
    public: "priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/web\/static\/vendor/]
    },
    sass: {
        mode: "native",
        // minimum precision required by bootstrap-sass
        precision: 8,
        options: {
            // tell sass-brunch where to look for files to @import
            includePaths: ["node_modules"]
        }
    },
      copycat: {
          "fonts": ["node_modules/bootstrap-sass/assets/fonts/bootstrap"] // copy node_modules/bootstrap-sass/assets/fonts/bootstrap/* to priv/static/fonts/
      }
  },


  modules: {
    autoRequire: {
        "js/app.js": [
            "web/static/js/app"
            // "bootstrap-sass"
        ]
    }
  },

  npm: {
      enabled: true,
      globals: {
          $: 'jquery',
          jQuery: 'jquery'
      }
  }
};

package.json looks like:

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "brunch build --production",
    "watch": "brunch watch --stdin"
  },
  "dependencies": {
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.0",
    "lodash": "^4.15.0",
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html"
  },
  "devDependencies": {
    "babel-brunch": "~6.0.0",
    "brunch": "2.7.4",
    "brunch-typescript": "^1.8.4",
    "clean-css-brunch": "~2.0.0",
    "copycat-brunch": "^1.1.0",
    "css-brunch": "~2.0.0",
    "javascript-brunch": "~2.0.0",
    "sass-brunch": "^2.6.3",
    "typings": "^1.3.2",
    "uglify-js-brunch": "~2.0.1"
  }
}

tsconfig

{
  "compilerOptions": {
    "target": "ES6", // tried it with ES6 then using babel to go down to ES5. Tried with no babel.
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "noImplicitAny": false,
    "rootDir": "web/static/js",
    "sourceRoot": "web/static/js",
    "outDir": "priv/static/js"
  },
  "exclude": [
    "node_modules",
    "priv"
  ]
}

Docco-brunch is mentioned twice in plugins

There is a typo in plugins page. Namely, Docco-brunch is mentioned twice inside plugins.html.

Config docs contain deprecated content: notifications

Config docs contain deprecated content: specifically, notifications and notificationsTitle parts.
Deprecations and defaults are specified around this lines:

https://github.com/brunch/brunch/blob/master/lib/utils/config.js#L201
https://github.com/brunch/brunch/blob/master/lib/utils/config-validate.js#L85

Add contributing instructions to the master readme

Use better social buttons

I've started this in 93fafd1.

1. We need to show followers / watchers count. People will see it and assume brunch is well-known.
2. But currently it doesn't show stuff on mobiles.

Perhaps we should bring back "shadow" buttons and add nice counters there?

@meleyal any ideas?

navbar full white

Hello friends, how are you?

I think very nice and very good navbar be white complete without opacity, like following:

The best User Experience!

background: rgba(255, 255, 255, 255);

Broken routing

As @denar90 noticed, we have broken routing with development mode. I suppose this issue is related to problems with navigation using iframe. Gonna try to fix that.

Step to reproduce:

1. git clone https://github.com/brunch/brunch.github.io && cd brunch.github.io
2. git checkout source
3. npm install
4. npm start
5. Go to http://localhost:3333 and then click any internal link. You'll stay at the home page anyway.

If you really need to go the specific route, please add .html extension after each of route, e.g: http://localhost:3333/docs/getting-started → http://localhost:3333/docs/getting-started.html and here you go.

Forum link is invalid

The forum link on https://brunch.io/support page leads to a dead website ( ost.io/@brunch/brunch ).

Typo on first page of docs

http://brunch.io/docs/getting-started

"Becoming professional cook", at the bottom of the page, is missing an article.

Should read, "Becoming a professional cook".

Invalid SSL certificate

https://brunch.io is served with github SSL certificate.

this will result in a browser warning about insecure connection.

I stumbled into this because duckduckgo generates https url for brunch.io:

https://duckduckgo.com/?q=brunch+config&t=ffsb&ia=web

I think it would be good to resolve this using cloudflare for example.

Runtime problem with _node_module_register symbol under OSX (10.1x)

I have similar issue under OSX 10.11 and brunch (checked Node 0.10, 0.12, 4.1, 4.2).

I did standard npm install -g brunch which worked just fine, but in runtime it's crashing basically every time with:

dyld: lazy symbol binding failed: Symbol not found: _node_module_register Referenced from: /Projects/test2/node_modules/brunch/node_modules/chokidar/node_modules/fsevents/build/Release/fse.node Expected in: dynamic lookup

This happens basically on all my boxes with osx.. I'm building Node from source in similar fasion like from brew, http://ół.pl/d066a4e2af3c3296a26155cf8f6f0662.png it works fine except that

I tried all available "solutions" that can be found online. Basically nothing helps, and Node static build isn't possible under OSX.

Add avatars to support page

http://brunch.io/support.html

Redesign the site

would be great if we had a designer

Layout optimizations

Compare page layout is awkward currently. Either drop the tweets from that page, or allow the grid to fit to the left of them on wide viewports.

Edit: Other needed modifications discussed in comments below

zepto

how to replace jquery with zepto

Add link to brunch twitter

add irc channel to website

conventions.ignored does not respect node_modules

Hi,
Sorry about the double post - not sure where you want it. I have also posted this question on stack-o so feel free to remove this one if needed:
http://stackoverflow.com/questions/43438375/brunch-io-conventions-ignored-does-not-respect-node-modules

I'm building out an app that has multiple entry points. It's a plugin/sideloading react architecture.

I have a base react app compiling into app.js and vendor.js just fine. The issue originates with the secondary project, the theme, being bundled with some of the same dependencies. Most notably react and react-dom. I would like to be able to use conventions.ignored to instruct brunch to ignore specific node_modules and their dependencies. Regardless of regex I put in conventions.ignored I still get react and react-dom in the theme_vendor.js bundle. See config below:

const {theme_name} = require('./package.json');
module.exports = {
    sourceMaps: 'inline',
    files: {
        javascripts: {
            joinTo: {
                "theme.js": [
                    /^theme/,
                ],
                "theme_vendor.js": [
                    /^(?!theme)/,
                ],
            }
        },
        stylesheets: {
            joinTo: {
                'theme.css': ["theme/config/styles/index.scss"],
                'theme_ie11.css': ["theme/config/styles/ie.scss"],
            }
        }
    },
    conventions: {
        ignored: [
            /\/_/,
            "node_modules\/react",
            "node_modules\/react-dom",
        ],
    },
    plugins: {
        babel: {
            presets: ['es2015', 'stage-0', 'react'],
            plugins: [
                ['transform-runtime', {
                    polyfill: false,
                    regenerator: true
                }]
            ],
        },
        sass: {
            options: {
                includePaths: [],
                precision: 15
            },
            mode: 'native',
            sourceMapEmbed: true,
            debug: 'comments'
        },
        copycat: {
            "fonts/slick-carousel": ["node_modules/slick-carousel/slick/fonts"],
            "img/slick-carousel": ["node_modules/slick-carousel/slick/ajax-loader.gif"],
            "": ["theme/theme_header.tmpl", "theme/theme_body.tmpl", "theme/theme_footer.tmpl"],
        }
    },
    modules: {
        nameCleaner: path => path.replace('', theme_name + '/')
    },
    notifications: false,
    hot: false,
    paths: {
        public: '../',
        watched: [
            'theme',
            'initialize.js',
        ]
    },
    overrides: {
        production: {
            optimize: true,
            sourceMaps: false,
            plugins: {
                autoReload: {
                    enabled: false
                }
            },
            paths: {
                // public: "dist/"
            }
        }
    }
};

The only way I have been able to achieve anything close is to use a negation in the joinTo. See Below:

  javascripts: {
            joinTo: {
                "theme.js": [
                    /^theme/,
                ],
                "theme_vendor.js": [
                    /^(?!theme|node_modules\/react|node_modules\/react-dom)/,
                ],
            }
        },

Thanks in advanced for your help.
Other info:

"dependencies": {
   "react-click-outside": "^2.2.0",
   "react-image-gallery": "^0.7.15",
   "react-slick": "^0.14.7",
   "slick-carousel": "^1.6.0"
 },
 "devDependencies": {
   "auto-reload-brunch": "^2",
   "babel-brunch": "~6.0.0",
   "babel-plugin-transform-runtime": "^6.23.0",
   "babel-preset-es2015": "^6.24.0",
   "babel-preset-react": "~6.22",
   "babel-preset-stage-0": "^6.22.0",
   "brunch": "^2",
   "clean-css-brunch": "^2",
   "copycat-brunch": "^1.1.0",
   "hmr-brunch": "^0.1",
   "redux-devtools": "^3.3.2",
   "redux-devtools-dock-monitor": "^1.1.1",
   "redux-devtools-log-monitor": "^1.2.0",
   "sass-brunch": "^2.10.4",
   "uglify-js-brunch": "^2",
   "isomorphic-fetch": "^2.2.1",
   "react": "^15.4",
   "react-addons-css-transition-group": "^15.4.2",
   "react-dom": "^15.4",
   "react-redux": "~4.3.0",
   "react-router": "^3.0.2",
   "react-router-redux": "^4.0.8",
   "redux": "~3.2.1",
   "redux-form": "^6.6.2",
   "redux-logger": "^3.0.0",
   "redux-saga": "^0.14.3"
 }

Broken link "Place yourself here!"

Link "Place yourself here!" on http://brunch.io/support page is broken.

'echo' command on Windows produces unusable js file.

When I followed quickstart and used 'echo' in Powershell:
echo "console.log('Hello, world')" > app/logger.js

This new logger.js file cannot be used by brunch:

18:05:26 - error: Compiling of app/logger.js failed. Error: SyntaxError: app/logger.js: 
Unexpected character '�' (1:0)

   > 1 | ��c o n s o l e . l o g ( ' H e l l o ,   w o r l d ' )
       | ^
     2 |
     3 |
Stack trace was suppressed. Run with `LOGGY_STACKS=1` to see the trace.

Looks like a UTF-16 file with Byte Order Mark.
http://i.imgur.com/9fF1i1b.png

JSON.parse error on plugins page

On http://brunch.io/plugins, I've got this:

SyntaxError: JSON.parse: unexpected character at line 554 column 3 of the JSON data

Maybe, the comma ?
https://github.com/brunch/brunch.github.io/blob/master/plugins.json#L553

Problem with nav bar CSS

User details

OS:	macOS 10.14.2 (18C54)
Browser:	Safari 12.0.2 (14606.3.4)

Problem

The nav bar at the top of the docs displays incorrectly, with each page link displayed as a vertical unordered list with bullets:

Expected behaviour

That the page links display in a single horizontal row, with the default <ul> styles overridden, and the text immediately below the nav bar visible.

add info about csrf & csrf-json-hijacking prevention (security)

npm styles order

Hi,

I'm trying to import some CSS from my npm

npm: {
    styles: {
      uikit: [
        'dist/css/uikit.almost-flat.css', 
        'dist/css/components/datepicker.almost-flat.css',
        'dist/css/components/form-select.almost-flat.css',         
      ]
    }
  }

Order is important ... but it don't load CSS in the array order way ... instead it to an alphabetic order ...