I am just getting started learning DocPad and hope to use it on a few sites that will serve some fairly javascript heavy pages. I am also hoping to be able to keep the javascript as modular as possible using nodes export and require conventions because much of the code I want to use has already been written that way.
I’ve install the babel and browserifydocs plugins, but I am getting errors every time I try use import or require. If I follow the directions on the babel plugin site and add
---
browserify: true
---
to the js.babel files, I get an Invalid left-hand side expression in prefix operation error.
Is it possible to use javascript I have or do I need to add all of the javascript files in the #getBlock(“scripts”) line of the layout file.
Can you upload the full docpad log file somewhere, generated via running docpad with the -d flag.
Looking at this, it seems the issue may be the space before browserify: true
Perhaps cc the babel plugin author in on this.
If you want to do a proper modular js do it with webpack (https://blog.madewithlove.be/post/webpack-your-bags/) that is specially designed for it. Then just combine it with DocPad in the way that at the end of the generation you trigger a webpack compilation. DocPad sends proper events where you can hook in.
Also there is a plugin for that but I never used it and I'm not sure how good it is https://github.com/RobLoach/docpad-plugin-webpack
Related
The Problem
So I'm working on moving a Laravel project from Mix to Vite. Overall, it's been fairly straightforward, but there's been one issue. A lot of my Javascript is built into Blade files and relies on jQuery. jQuery cannot be accessed in <script> tags unless they have type="module" (this has its problems, see below).
What I've Tried
Modifying the script tags that require jQuery with type="module". This works for most cases, except any HTML elements that use functions in these script tags as event handlers break. There are ways around this, but it would require some code changes.
Load two copies of jQuery, one for Vite and one for outside Vite. This works, but feels sloppy and increases load times.
What I Want
It'd be great if Vite could be told to expose its copy of jQuery to the other non-module script tags. There might be an easy way to do this, but I'm not seeing it.
Thanks in advance!
I am searching for a solution to modularize static html files and to add multilanguage support. I want to generate static html files with gulp which are then served through an apache server.
I am now thinking about using the template engine marko to modularize html files and to prerender html files (handlebars would also be an option; jade is no option cause i don't like the syntax).
For multilanguage support i am thinking about to add an i18n plugin (for example https://www.npmjs.com/package/i18n). But this plugin needs an express server; also for multilanguage i want to prerender the files. Has anybody a hint for me which i18n plugin would best fit for me? Maybe also which one would best work together with marko and gulp?
The result should be html files generated inside /de and /en.
The following sample app might help: https://github.com/marko-js-samples/marko-koa-i18n
It is a server-based app that uses Koa and koa-i18n, but you can directly use i18n-2 to accomplish the same thing.
Disclaimer: I have not used i18n-2 or koa-i18n
A few things to note:
A custom tag is used to introduce a local variable that can be used to access the i18n bundle: (see: src/components/app-hello/template.marko and src/taglib/i18n-var-tag.js)
The i18n bundle is pulled out of out.global.i18n. See: Marko > Global Properties
The following Gulp plugin is currently out-of-date, but it might serve as a good starting point or you can submit a PR to improve it: https://github.com/viviangledhill/gulp-marko
In your case, you will want to prerender each template multiple times, each time with a different i18n bundle instance passed in as a global property.
If you would like more details please ask here or in the Gitter chat room: https://gitter.im/marko-js/marko
Hope that helps.
Here is my situation:
I have this modernizr js file that reads
Build: http://www.modernizr.com/download/#-cssanimations-iepp-cssclasses-testprop-testallprops-domprefixes-load
To redownload this build (i thought i could just paste the url, but it didnt work.
When i went to the site, it lets you compose your build but you have use human readable features /components/names, but after you build it, the file has these abbreviations.
Is there a way to know what the abbreviations of the listed components on the site?
There is a server issue on the modernizr site (sorry about that!). It is redirecting any http traffic to the https homepage. In the mean time, just throw an s on it - like so
I want to change the look and feel(ui customization) of Jenkins. Also I would like to add new views(say like new html pages or web pages) with navigation to the required jenkins pages etc.
Please let me know if any single plugins will help me to do so.Any relevant information(how ever generic) will be very helpful.
Any suggestions or links or tutorials is also appreciated.
PS:- Pretty new to jenkins.The inputs from here will help me to add more details to the questions.
I am looking for documents or tutorials that specify Skinning Jenkins using plugins like :-
https://wiki.jenkins-ci.org/display/JENKINS/Simple+Theme+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/jQuery+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/jQuery+UI+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/JSWidgets+Plugin
The plugin page is providing very little information on how to use these and the benefits and the extend to which the UI can be changed.
Any doc or link is appreciated.
Assuming you don't want to write a Jenkins plugin, for adding pages, the best suggestion I can make is to use an HTTP proxy such as NginX, and configure it so that the pages you want to add are plain html files, and Jenkins is proxied for the rest of them. To a visitor, they will look like they are all part of the same site; you could copy code from the head and body sections of Jenkins-served pages to include some of the navigation.
The Simple Theme Plugin, which you found, will let you do basic customization of the look and feel of Jenkins. I do that for my build server and proxy it using this configuration fragment for NginX. The relevant CSS is in this CSS file - toward the end, look for the // JENKINS CUSTOMIZATION comment.
We use the Simple theme plugin - pointed at a css file for the simple styling, and a JS file to fix a couple of DOM oddities (some of the tables in the new look and feel have mismatching column counts).
Those two files need only be hosted either a handy http server, or you can place them in usercontent.
You need only refresh the page in the browser to see the changes. Both files can then happily reference other files served up too.
Handy things to note:
Jenkins has jquery, parts of YUI loaded and prototype loaded - so you can use them in your scripts.
If while debugging, the refresh gets in the way then use the console to enter the following to temporarily stop it without pausing JS: refreshPart = function() {}
When making DOM tree changes to content that is refreshed - attach it to the layout updates with:
layoutUpdatecallback.add(my_function) - that way your changes are applied to new incoming content.
I need an easy way to generate static web pages so that I can serve them up with Apache or Nginx. Currently I am using SproutCore's build tool (Abbot) to generate static pages but that is a little bit cumbersome as it is designed for building SproutCore apps, not non-SproutCore HTML pages.
Here are my requirements:
Javascript must be combined and minified
CSS files must be combined
Each image / CSS / Javascript asset must have unique URL for better caching (query string isn't enough)
Asset URL should be different only when it really changes
Localization support thorough HTML, CSS, Javascript and image files
Nice template engine with layouts, partials etc.
Here are possible solutions I have found:
Create the site using Ruby on Rails, then get all resources using wget like http://usefulfor.com/ruby/2009/03/23/use-rails-to-create-a-static-site-rake-and-subversion/
Use Middleman: http://middlemanapp.com
Any thoughts on this?
After a longish evaluation process I have decided to use Middleman. It does the trick and I love its simplicity and the fact that I can use existing Rack components with it.
Best Regards,
Pekka Mattila
I'm the creator of Middleman and would be eager to help you get comfortable using Middleman. My main goal is to give users the power of Rails, but focused on static development. Some of the actual code of Middleman is simplified versions of Ab
Here's what I do:
Ruby on Rails 3 with the High Voltage Gem, which makes it easy
to serve a static page body using the common templates. It requires a
simple entry in the routes (and you can use namespaces to create a
hierarchy).
Apache reverse proxy to stand-alone Passenger (which uses nginx I
believe) to run the Rails app. This article describes how to
configure it.
Stand-alone passenger will read the URL, see if there is a corresponding file in /public with the .html on it, and serve that. If not found, it will invoke Rails and generate the page. In essence, page caching, with the option of publishing your URLs with or without the .html. There is a section in the Passenger docs about page caching specifically.
As far as combining and minifying js and css, here's a good stackoverflow thread.
Rails has excellent i18n/l10n support.
Rails template engine is very nice to work with. And you can use HAML if you prefer.
For your 3rd and 4th points, I'm a little confused. You want css and js combined, but then you want each to have it's own URL. In Rails, the "cache => true" directive on asset tags takes care of adding a query string parameter that changes when the content does, which is a fairly traditional scheme. I'm not sure what context you are working in where that would not work. Any CDN I've ever used works fine with that, as does an web server implementing the HTTP spec correctly. Anyway, changing the actual path or file in the URL would require changing all references to it. Maybe I'm misunderstanding?
Monkeyman has the template engine you need, I think. Think of it as Middleman's little Scala brother. Nowhere as mature or feature rich yet, but we'll get there eventually. The current incarnation supports HAML, Jade, SSP for layouts, Markdown for content and a couple of other things.
Without any special order
jekyll - quite simple
middleman - a lot of funcionalities
nanoc - a lot of funcionalities
stasis - use controllers
staticmatic
frank
gumdrop
ruby on rails + wget
ruby on rails + high voltage + apache reverse proxy
You should probably also checkout mod_pagespeed. It will at least give you this:
Javascript must be combined and minified
CSS files must be combined
Each image / CSS / Javascript asset must have unique URL for better caching (query string isn't enough)
Asset URL should be different only when it really changes
It won't give you this:
Localization support thorough HTML, CSS, Javascript and image files
Nice template engine with layouts, partials etc.
You can have a look at docpad. It's written in coffeescript and runs on Nodejs. It is document based, where you write some documents and layouts, it will compile them and write them in the out directory. You can write documents in a lot of languages via plugins
It also supports multiple level of file compilation. For example from eco to markdown to html.
Another great feature of it is that you can query on other documents being generated in a document. For example in the first page, you have something like this to get all blog posts:
database.findAll({url : /posts/})
Which will return all documents having posts in their url.