GithubHelp home page GithubHelp logo

jus / jus Goto Github PK

View Code? Open in Web Editor NEW
110.0 110.0 13.0 5.2 MB

:watermelon: An opinionated tool for making static websites with browserify

Home Page: http://jus.js.org

JavaScript 65.81% HTML 34.19%
browserify convention css js livereload preprocessor static-site watch

jus's Introduction

jus Build Status

jus is a development server and build tool for making static websites with no configuration and no boilerplate code. It has built-in support for browserify, ES6 and ES2015 with Babel, React JSX, GitHub Flavored markdown, syntax highlighting, Sass, Less, Stylus, Myth, Handlebars, browsersync and more.

Learn all about it at jus.js.org

TLDR

npm i -g jus && jus

Dependencies

  • async: Higher-order functions and common patterns for asynchronous code
  • babel-preset-es2015: Babel preset for all es2015 plugins.
  • babel-preset-react: Babel preset for all React plugins.
  • babelify: Babel browserify transform
  • browser-sync: Live CSS Reload & Browser Syncing
  • browserify: browser-side require() the node way
  • chalk: Terminal string styling done right. Much color.
  • cheerio: Tiny, fast, and elegant implementation of core jQuery designed specifically for the server
  • chokidar: A neat wrapper around node.js fs.watch / fs.watchFile / fsevents.
  • concat-stream: writable stream that concatenates strings or binary data and calls a callback with the result
  • connect-browser-sync: Connect middleware for BrowserSync.
  • cors: middleware for dynamically or statically enabling CORS in express/connect applications
  • event-emitter: Environment agnostic event emitter
  • exif-parser: A javascript library to extract Exif metadata from images, in node and in the browser.
  • express: Fast, unopinionated, minimalist web framework
  • fs-extra: fs-extra contains methods that aren't included in the vanilla Node.js fs package. Such as mkdir -p, cp -r, and rm -rf.
  • get-image-colors: Extract colors from images. Supports GIF, JPG, PNG, and even SVG!
  • handlebars: Handlebars provides the power necessary to let you build semantic templates effectively with no frustration
  • handlebars-helpers: More than 180 handlebars helpers in ~20 categories. Can be used with Assemble, Ghost, YUI, express.js, etc.
  • html-frontmatter: Extract key-value metadata from HTML comments
  • identicon: A Ruby library that generates GitHub-like identicons
  • image-size: get dimensions of any image file
  • inflection: A port of inflection-js to node.js module
  • js-yaml: YAML 1.2 parser and serializer
  • less: Leaner CSS
  • lil-env-thing: A tiny convenience module for managing process.env.NODE_ENV
  • lobars: lodash functions as handlebars helpers
  • lodash: Lodash modular utilities.
  • minimist: parse argument options
  • morgan: HTTP request logger middleware for node.js
  • myth: A CSS preprocessor that acts like a polyfill for future versions of the spec.
  • node-sass: Wrapper around libsass
  • open: open a file or url in the user's preferred application
  • remark: a markdown processor powered by plug-ins
  • remark-highlight.js: Highlight code blocks in Markdown files with highlight.js.
  • remark-html: Compile markdown to HTML with remark
  • remark-slug: Add slugs to headings in remark
  • require-dir: Helper to require() directories.
  • stylus: Robust, expressive, and feature-rich CSS superset
  • tmp: Temporary file and directory creator
  • upath: A proxy to path, replacing \ with / for all results & methods to add, change, default, trim file extensions.

Dev Dependencies

  • chai: BDD/TDD assertion library for node.js and the browser. Test framework agnostic.
  • cross-env: Run scripts that set and use environment variables across platforms
  • mocha: simple, flexible, fun test framework
  • nixt: Simple and powerful testing for command-line apps
  • path-exists: Check if a path exists
  • travis-deploy-once: Test multiple node versions on Travis. Deploy once. If all of them pass
  • semantic-release: Fully automated version management and package publishing

Build Status

jus's People

Contributors

billiegoose avatar djfdev avatar elingerojo avatar jdormit avatar payofdz avatar zeke avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

jus's Issues

Overwriting /api

I have a little problem. I started using jus (awesome project btw) to generate some docs for the upcoming SweetAlert release.

I want to have a /api route that explains the library's API. However, it seems like that URL is occupied in order to show some internal stuff. :)

screen shot 2017-04-25 at 17 44 39

Would you consider changing that URL, or at least making it overwriteable? I think having an /api route is a pretty common use case for library documentation (which seems to be the primary usage of jus)!

Inkscape-generated SVG error from `image-size` library

Running jus serve or jus build on a static site that includes this Inkscape-generated .svg file results in the following error:

TypeError: invalid svg
  at Object.calculate (/home/jeremy/spark/sparkeditor.github.io/node_modules/image-size/lib/types/svg.js:72:9)
  at lookup (/home/jeremy/spark/sparkeditor.github.io/node_modules/image-size/lib/index.js:26:31)
  at module.exports (/home/jeremy/spark/sparkeditor.github.io/node_modules/image-size/lib/index.js:100:12)
  at Image.setDimensions (/home/jeremy/spark/sparkeditor.github.io/node_modules/jus/lib/files/image.js:22:23)
  at Image.squeeze (/home/jeremy/spark/sparkeditor.github.io/node_modules/jus/lib/files/image.js:16:10)
  at Image.File (/home/jeremy/spark/sparkeditor.github.io/node_modules/jus/lib/file.js:13:10)
  at Image (/home/jeremy/spark/sparkeditor.github.io/node_modules/jus/lib/files/image.js:11:5)
  at createFile (/home/jeremy/spark/sparkeditor.github.io/node_modules/jus/lib/jus.js:30:12)
  at FSWatcher.chokidar.watch.on (/home/jeremy/spark/sparkeditor.github.io/node_modules/jus/lib/jus.js:54:30)
  at emitTwo (events.js:106:13)
  at FSWatcher.emit (events.js:191:7)
  at FSWatcher.<anonymous> (/home/jeremy/spark/sparkeditor.github.io/node_modules/chokidar/index.js:191:15)
  at FSWatcher._emit (/home/jeremy/spark/sparkeditor.github.io/node_modules/chokidar/index.js:233:5)
  at FSWatcher.NodeFsHandler._handleFile (/home/jeremy/spark/sparkeditor.github.io/node_modules/chokidar/lib/nodefs-handler.js:275:10)
  at FSWatcher.<anonymous> (/home/jeremy/spark/sparkeditor.github.io/node_modules/chokidar/lib/nodefs-handler.js:473:21)
  at FSReqWrap.oncomplete (fs.js:123:15)

At first I thought it was this image-size bug, but I upgraded the image-size library to the latest version in which the bug was fixed in my fork and the problem persisted. I'm filing an issue with the image-size repo as well, but I thought I'd put it here in case there's a downstream solution.

Support Windows

Some hard-coded forward-slash assumptions. Will try to figure them out and submit a pull request if I get a chance.

Remove default page opening.

Great tool so far! I would personally like to see the default opening of the URL removed. That being said, I want that removed because it's a nuisance to integrate with my live-reload tool of choice so it's possibly when you incorporate a live-reload solution that will resolve my issues all-together! See my comments on the live-reload topic for my preferred tool of choice!

Feature: Add YAML support for 'page' type files (not just for 'datafile' type)

It will be nice to have single markup files that include its own data objects like frontmatter but letting more complex objects by YAML syntax.

At present, for complex objects you need to use two files, one for the page and one for the data.

A simple approach is to enable html-frontmatter to accept YAML.

  1. Developers get the option to centralize or distribute their data at convenience.
  2. Developers could have markup and context in one autonomous file to move around.

There is a PR ready at html-frontmatter repository

PS:
I am sorry for posting the same issue on two repositories but now I understand that I should have started here not in html-frontmatter (... and after discussion, if needed, move the discussion there).

Add Facebook OpenGraph and Twitter Card meta tags

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="keywords" content="">

<meta property="fb:app_id" content="130164583741660" />
<meta name="twitter:site" content="@TheAVClub">

<meta property="og:title" content="Obama ends the Kendrick vs. Drake feud, declares Kendrick the better rapper" />
<meta property="og:url" content="http://www.avclub.com/article/obama-ends-kendrick-vs-drake-feud-declares-kendric-230839" />
<meta property="og:image" content="http://i.onionstatic.com/avclub/5681/68/16x9/1200.jpg" />
<meta property="og:description" content="2016 is President Obama’s last full year in office, and while he has many important issues to deal with in that year—global warming, curing cancer, fighting ISIS, growing the national economy—he did make time to answer one of the great questions of our era. Yes, seconds after answering what kind of "/>
<meta property="og:type" content="article" />
<meta property="article:publisher" content="https://www.facebook.com/theavclub" />
<meta property="article:published_time" content="2016-01-15T16:27:00-06:00" />

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Obama ends the Kendrick vs. Drake feud, declares Kendrick the better rapper">
<meta name="twitter:description" content="">
<meta property="twitter:image" content="http://i.onionstatic.com/avclub/5681/68/16x9/1200.jpg" />

Don't try to parse `svg` fonts as images

If you have an SVG font in your static site, Jus will try to pass it through image-size during the transpilation process. This throws an error, since SVG fonts don't have width, height, or viewbox attributes.

One solution could be parsing SVGs for the <font> tag, and not passing them through image-size if that's the case.

Serve a unique favicon.ico per project

Browser's tend to cache the favicon, and so whenever I start a new project and am serving on http://localhost:3000 it will use the icon from some other project I'm working on. What's more, Chrome will add 404 errors for favicon.ico to the network request log and the console, and my heart rate goes up whenever Chrome starts printing red text in the console. This is one of those little bitty irksome things that bothers me just enough over time that I am resolved that jus serve be able to invent a new favicon.ico on the fly and serve it for projects that don't have a favicon.

My plan is to use identicon to generate the favicons, and then make an express middleware that can plugged into jus. This page shows examples what identicons look like:
image

Modularizing jus

I had a thought today about a logical part of jus that could be extracted into a standalone thing.

That thing is the metadata finder.

Currently jus will traverse your site's tree in search of data files that can be glommed together into a big JSON context object that can be used by the templates. Those files can be YML or JSON.

In "development", when any of these files change, they should modify the context object and emit an event. Jus can watch for this event to trigger livereload-type refreshes when necessary.

Under the hood this should be powered by chokidar, which has great support for watching files, and it's very fast. (I tried a lot of watchers)

Also: A markdown file with YML frontmatter could be considered a data object, where the "prose" contents of the file just become another property of that datafile.

An example for foo/bar.md

---
title: I am frontmatter.
---

I am content.

becomes:

{
  foo: {
    bar: {
      title: 'I am frontmatter.',
      body: 'I am content.'
    }
  }
}

Here's how I would like to use this new imaginary module:

const ctx = require('contextualizer')(somePath)

ctx.on('context', context => {
     // `context` is all the YML, JSON, and Markdown in someDir!
})

SyntaxError: Unexpected token const

Hi,

I just installed jus as per the homepage instruction. When I run jus, I get

/usr/local/lib/node_modules/jus/cli.js:16
if (args._[1]) const sourceDir = path.resolve(process.cwd(), args._[1])
               ^^^^^
SyntaxError: Unexpected token const
    at Object.exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:513:28)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Function.Module.runMain (module.js:575:10)
    at startup (node.js:160:18)
    at node.js:449:3

That's on node v6.2.0.

I guess the problem is that const is used within an if-statement.

Jekyll to Jus

Hello,

Just start to "convert" this site to jus. How is the best way to generate a page with a list of links like this http://curitiboca.com/en/ ?

It is necessary to use a JSON file with the pages links and description?

Regards,

Marlon

Remove unneeded 'href-type' dependency

Continue with housekeeping toward starting #61

While running npm standard found that there is unnecessary code in page.js

Removing this code, enables to remove a dependency from package.json because is no longer needed.

any relation to gatsby?

This project seems to have similar goals to https://github.com/gatsbyjs/gatsby

Is it worth collaborating with those folks?

Nothing wrong with scratching your own itch, or trying out your own ideas, of course.

Just thought I'd mention it and start a conversation. :)

browsersync should be ignoring the .git directory

[BS] File changed: /Users/zeke/zeke/jus.js.org/.git/FETCH_HEAD
[BS] File changed: /Users/zeke/zeke/jus.js.org/.git/FETCH_HEAD
[BS] File changed: /Users/zeke/zeke/jus.js.org/.git/FETCH_HEAD
[BS] File changed: /Users/zeke/zeke/jus.js.org/.git/FETCH_HEAD
[BS] File changed: /Users/zeke/zeke/jus.js.org/.git/FETCH_HEAD
[BS] File changed: /Users/zeke/zeke/jus.js.org/.git/FETCH_HEAD
[BS] File changed: /Users/zeke/zeke/jus.js.org/.git/FETCH_HEAD

jus prints stack trace on Node 6.2

Hi,

After updating to the latest jus, I now get this:

(node) v8::ObjectTemplate::Set() with non-primitive values is deprecated
(node) and will stop working in the next major release.

==== JS stack trace =========================================

Security context: 0x26d3224c9e59 <JS Object>#0#
    1: .node [module.js:568] [pc=0x1502c6231b24] (this=0x239a2f0095b1 <an Object with map 0xd7637418161>#1#,module=0x3fd9494adeb9 <a Module with map 0xd7637418739>#2#
,filename=0x3fd9494ade49 <String[86]: /usr/local/lib/node_modules/jus/node_modules/oniguruma/build/Release/onig_scanner.node>)
    2: load [module.js:~449] [pc=0x1502c62f7b16] (this=0x3fd9494adeb9 <a Module with map 0xd7637418739>#2#,filename=0x3fd9494ade49 <String[86]: /usr/local/lib/node_mo
dules/jus/node_modules/oniguruma/build/Release/onig_scanner.node>)
    3: tryModuleLoad(aka tryModuleLoad) [module.js:417] [pc=0x1502c613921d] (this=0x26d322404189 <undefined>,module=0x3fd9494adeb9 <a Module with map 0xd7637418739>#2
#,filename=0x3fd9494ade49 <String[86]: /usr/local/lib/node_modules/jus/node_modules/oniguruma/build/Release/onig_scanner.node>)
    4: _load [module.js:~383] [pc=0x1502c623c898] (this=0x239a2f009631 <JS Function M
==== C stack trace ===============================

 1: v8::Template::Set(v8::Local<v8::Name>, v8::Local<v8::Data>, v8::PropertyAttribute)
 2: OnigScanner::Init(v8::Local<v8::Object>)
 3: node::DLOpen(v8::FunctionCallbackInfo<v8::Value> const&)
 4: v8::internal::FunctionCallbackArguments::Call(void (*)(v8::FunctionCallbackInfo<v8::Value> const&))
 5: v8::internal::MaybeHandle<v8::internal::Object> v8::internal::(anonymous namespace)::HandleApiCallHelper<false>(v8::internal::Isolate*, v8::internal::(anonymous n
amespace)::BuiltinArguments<(v8::internal::BuiltinExtraArguments)1>)
 6: v8::internal::Builtin_HandleApiCall(int, v8::internal::Object**, v8::internal::Isolate*)
 7: 0x1502c600961b
(node) v8::ObjectTemplate::Set() with non-primitive values is deprecated
(node) and will stop working in the next major release.

==== JS stack trace =========================================

Security context: 0x26d3224c9e59 <JS Object>#0#
    1: .node [module.js:568] [pc=0x1502c6231b24] (this=0x239a2f0095b1 <an Object with map 0xd7637418161>#1#,module=0x3fd9494adeb9 <a Module with map 0xd7637418739>#2#,filename=0x3fd9494ade49 <String[86]: /usr/local/lib/node_modules/jus/node_modules/oniguruma/build/Release/onig_scanner.node>)
    2: load [module.js:~449] [pc=0x1502c62f7b16] (this=0x3fd9494adeb9 <a Module with map 0xd7637418739>#2#,filename=0x3fd9494ade49 <String[86]: /usr/local/lib/node_modules/jus/node_modules/oniguruma/build/Release/onig_scanner.node>)
    3: tryModuleLoad(aka tryModuleLoad) [module.js:417] [pc=0x1502c613921d] (this=0x26d322404189 <undefined>,module=0x3fd9494adeb9 <a Module with map 0xd7637418739>#2#,filename=0x3fd9494ade49 <String[86]: /usr/local/lib/node_modules/jus/node_modules/oniguruma/build/Release/onig_scanner.node>)
    4: _load [module.js:~383] [pc=0x1502c623c898] (this=0x239a2f009631 <JS Function M 1: v8::Template::Set(v8::Local<v8::Name>, v8::Local<v8::Data>, v8::PropertyAttribute)
 2: OnigScanner::Init(v8::Local<v8::Object>)
 3: node::DLOpen(v8::FunctionCallbackInfo<v8::Value> const&)
 4: v8::internal::FunctionCallbackArguments::Call(void (*)(v8::FunctionCallbackInfo<v8::Value> const&))
 5: v8::internal::MaybeHandle<v8::internal::Object> v8::internal::(anonymous namespace)::HandleApiCallHelper<false>(v8::internal::Isolate*, v8::internal::(anonymous namespace)::BuiltinArguments<(v8::internal::BuiltinExtraArguments)1>)
 6: v8::internal::Builtin_HandleApiCall(int, v8::internal::Object**, v8::internal::Isolate*)
 7: 0x1502c600961b

  jus serve                         Serve the current directory
  jus serve <source>                Serve a specific directory
  jus serve <source> --port 1337    Use a custom port. Default is 3000
  jus compile <source> <target>     Compile source files to static assets
  jus help                          Open jus.js.org in your browser

  version 0.20.1

Add GitHub URL to page data

Extrapolate by looking for .git/config file.

If this is present, it will be easy to add View this page on GitHub links.

List of excluded files

Hi Zeke, great to see Jus doing what I was hoping Harp would be doing (ES6 etc.)

I was wondering if there's any way to exclude certain files from compiling? I.e. minimified JS libs.
It takes ages to build it's not needed, since these files will live on CDN anyway.

Thanks.

Add LiveReload middleware

https://github.com/mklabs/tiny-lr#middleware

var port = process.env.LR_PORT || process.env.PORT || 35729;

var path    = require('path');
var express = require('express');
var tinylr  = require('tiny-lr');
var body    = require('body-parser');

var app = express();

// This binds both express app and tinylr on the same port


app
  .use(body())
  .use(tinylr.middleware({ app: app }))
  .use(express.static(path.resolve('./')))
  .listen(port, function() {
    console.log('listening on %d', port);
  });

Remove old 404 ¯\_(ツ)_/¯ message

To start working on #61 Modularize jus, I think is a good idea to do some housekeeping first.

Will start removing unnecessary or unused code and later do some linting.

Will break the housekeeping in small PRs for easy review.

Automagically generate thumbnails

This is an idea I've been playing with since building an art portfolio site for my brother - some sort of automatic generation of image thumbnails. There are some good libraries that do this - the node-thumbnail package is asynchronous and supports multi-core processing, so it would be a performant option.

In terms of the API, I was thinking we could register a thumbnailFor handlebars helper. The syntax could be something like:

<img src="{{ thumbnailFor /path/to/image.jpg }}" />

The helper would simply rewrite the src path to a path pointing to a generated thumbnail instead. We could automatically generate thumbnails for every image that gets processed, or - if that turns out to take too long - we could do something clever to only generate thumbnails that were requested. I'm open to suggestions here.

Does this sound useful? Does this API make sense, or is there a better way to do it?

`jus deploy gh-pages` idea

I see in the documentation http://jus.js.org/#deployment-to-github-pages you've got:

Add the following to your package.json:

{
 "scripts": {
   "start": "jus serve",
   "deploy": "npm run build && npm run commit && npm run push && npm run open",
   "build": "jus build . dist",
   "commit": "git add dist && git commit -m 'update dist'",
   "push": "git subtree push --prefix dist origin gh-pages",
   "open": "open http://zeke.sikelianos.com"
 }
}

I cooked up something similar for my website, but tried to make it slightly more magical:

  "gh-pages": {
    "branch": "master",
    "url": "https://github.com/verifiedmodules/verifiedmodules.github.io"
  },
  "scripts": {
    "start": "jus serve",
    "build": "jus build . dist",
    "deploy": "bash .bin/deploy.sh"
  },
  "homepage": "https://verifiedmodules.github.io",
#!/usr/bin/env bash
# ./bin/deploy.sh
rm -rf dist .gh-pages
jus build . dist
git clone $npm_package_gh_pages_url .gh-pages --branch $npm_package_gh_pages_branch --bare --depth 1
git --git-dir=.gh-pages --work-tree=dist add -A
git --git-dir=.gh-pages --work-tree=dist commit -m deploy
git --git-dir=.gh-pages --work-tree=dist push $npm_package_gh_pages_url $npm_package_gh_pages_branch
opener $npm_package_homepage

It's magical because it a) uses package.json to hold the parameters, and b) manages to update the github pages branch without altering the current branch or copying any of the files in the project directory or the dist directory. (I may or may not have spent a few mythical man days of my life learning to bend git to my will while building a CI system...)

I was thinking, I could re-write the shell script in Node to remove the Bash dependency. And with some heuristics, I could probably automatically figure out which branch (gh-pages, master, or docs) and repo (either repository.url in package.json, or inferred from homepage in package.json if homepage contains 'github.io'?) to push to, so it could be zero configuration. Would you be interested in including this? I was thinking of just jus, but come to think of it I could make it a regular npm module. But the gist of it is, I'd like "deploy" to be as drop-dead simple as "serve" and "build". Everyone should be able to publish to gh-pages without complex configuring.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.