I have a simple document like this:
---
title: My First Post
subtitle: My First Post
author: dan
tags: [fruit veggies]
---
My body content
My _config.yml has a typical:
defaults:
# _docs
- scope:
path: ""
type: docs
values:
layout: doc
which outputs the correct HTML files etc.
I want to build a secondary HTML file (for a modal) using that same original document markdown file.
I made a new modal.html layout with my custom html etc and then added:
defaults:
# _docs
- scope:
path: ""
type: docs
values:
layout: doc
# _modal - partials for help modals
- scope:
path: "modals"
type: docs
values:
layout: modal
This works butShould this not work? In my case it doesn't. If I reverse the order I get the modal files but they are written in the docs folder. Perhaps a precedence problem but I am at a loss to figure this out.
Related
I have html files located on different paths in src folder. I can read them at once with gulp.src(['path/to/file1','path/to/file2']) and output them such as gulp.dest('dist/') and it works fine. But what if I want to output the input files in different paths in the same gulp task?
project structure
src
- index.html
- pages
- about.html
// how I want to output
dist
- index.html
- pages
- about.html
My gulpfile.js for html task looks like
const filePath = {
input: 'src/',
output: 'dist/',
markup: {
index: 'src/index.html',
pages: 'src/pages/**/*.html',
outputIndex: 'dist/',
outputPages: 'dist/pages/'
}
}
function markup(done) {
src([filePath.markup.index, filePath.markup.pages])
// including src/layouts markup into index and pages markup files
.pipe(fileInclude({
prefix: '##',
basepath: '#file'
}))
// change references to files for build
.pipe(useref({noAssets: true}))
// minify on production
.pipe(mode.production(htmlmin(
{ collapseWhitespace: true, removeComments: true }
)))
.pipe(dest(filePath.output));
return done();
}
So far I have tried
.pipe(dest(filePath.markup.outputIndex));
.pipe(dest(filePath.markup.outputPages));
but it outputs both files in root dist as well as pages folder.
And with gulp-if
.pipe(gulpIf(filePath.markup.pages), dest(filePath.markup.outputPages))
.pipe(dest(filePath.markup.outputIndex));
but this also doesn't seem to work also this throws an error Error: gulp-if: child action is required.
I can do this by creating different tasks for index and pages but is there a way I can do it in a single gulp task?
I have markdown files that look like this
---
name: Some Name
date: '2013-09-09'
isCool: true
---
really cool text
I want to have a gulp task that only lets markdown through that has a particular property, for example isCool = true.
So I would imagine something like this
gulp.src('source/content/*/*.md')
.pipe(mdPrune({
isCool: true
}))
.pipe(gulp.dest('build/content/cool'));
then only the markdown that had an isCool attribute in the header would end up the build/content/cool folder.
gulp-filter would work.
const filter = require('gulp-filter');
gulp.task('default', function () {
// return true if want the file in the stream
const myFilter = filter(function (file) {
let contents = file.contents.toString();
return contents.match('isCool: true');
});
return gulp.src(['./src/*.md'])
.pipe(myFilter)
.pipe(gulp.dest('md'));
});
That will allow the file through if isCool: true is anywhere in the file. If that is a problem, just work on the regex to restrict it to the line after the date entry for example.
[The filter could also be defined outside of any task if it might be reused elsewhere or you just prefer it that way.
I'm trying to render an html document using the rmdformat readthedown theme from the script. However, it doesn't get recognized in the .Rmd file and now I'm trying to add it to the render() function.
The following works but the readthedown theme isn't generated when specified in the rmd file.
rmarkdown::render('myReport.Rmd',output_format = "html_document")
I tried the following but I get an error:
rmarkdown::render('myReport.Rmd',output_format = html_document(theme = readthedown(self_contained = T, thumbnails=F,lightbox = T,gallery = T,highlight= "tango",toc_depth= 4,css="style.css")))
Any ideas on how to call the readthedown from the render() (i.e. from script)?
You can specify the options of readthedown theme in the Rmarkdown document (which you will be editing anyway) and then render it with the render() function just like in the documentation of readthedown theme.
This is the rmarkdown file:
---
title: "myReport"
output:
rmdformats::readthedown:
self_contained: true
thumbnails: true
lightbox: true
gallery: true
highlight: tango
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{r ,results="asis" }
library(xtable)
xtable(summary(iris))
```
```{r}
head(iris)
```
According to the documentation you simply have to call render() to the rmarkdown file. The html_document it's not needed anymore.
Calling: rmarkdown::render('myReport.Rmd') will render the file with the readthedown theme.
When running an application that is built using webpack 2, sourcemaps are detected in chrome but original source is not loaded.
I'm using webpack beta21.
These files used to be detected automatically, ie when a breakpoint was put in the the output from webpack js file, the source view would jump to the original source input to webpack. But now I am stuck with this screen:
config:
var path = require("path");
var webpack = require("webpack");
var WebpackBuildNotifierPlugin = require('webpack-build-notifier');
const PATHS = {
app: path.join(__dirname, '../client'),
build: path.join(__dirname, '../public')
};
module.exports = {
entry: {
app: PATHS.app + '/app.js'
},
output: {
path: PATHS.build,
filename: '[name].js'
},
devtool: "source-map",
module: {
loaders: [
{
test: /\.js?$/,
loader: 'babel-loader',
include: [
path.resolve(__dirname, 'client'),
],
exclude: /node_modules/
},
{
test: /\.css/,
loader: "style!css"
}
]
},
resolve: {
// you can now require('file') instead of require('file.js')
extensions: ['', '.js', '.json']
} ,
plugins: [
new WebpackBuildNotifierPlugin()
]
};
Generated files with source maps won't automatically redirect to their original files, because there's potentially a 1-to-many relationship.
If you see the message Source Map Detected, the original file should already appear on the side file tree or the file explorer via Crl + P. If you don't know the original file name, you can open the source map file itself.
The source map path can be identified by a //# sourceMappingURL= comment or the X-SourceMap header:
Open up the source map via url and look for the sources property for the original file name:
The original file should be visible in the sources panel:
If you don't see the message Source Map Detected
You can manually add an external source map by right clicking and selecting Add Source Map:
Additional Resources
If that still doesn't work, you can try a Source Map Validator
For webpack specifically, you can configure the devtool property
If you're mapping to a workspace, that means you already have the source code. Including the source code in your source map is creating an unnecessary redundancy.
Use nosources-source-map instead.
The issue with external source maps was fixed in Chrome 52 but it looks like you've got your devtool set differently from mine, I use:
devtool: '#source-maps'
How are you building your source? If you're running with -d it will switch to inline source maps
I'm working on adding some simple Markdown processing to my Gulp process, but I can't quite get the pieces to work together. I seem to be missing the step between getting the front matter content, and determining which Nunjuck template to apply.
Here's the section in my Gulp file:
gulp.task('pages:md', function() {
gulp.src('./content/**/*.md')
.pipe(frontMatter({ // optional configuration
property: 'frontMatter', // property added to file object
remove: true // should we remove front-matter header?
}))
.pipe(marked({
// optional : marked options
}))
.pipe(nunjucks({
// ?? Feels like I need to specify which template applies based on the front matter "layout" property?
}))
.pipe(gulp.dest('build/'))
});
The markdown file looks like this:
---
title: Title
layout: layout.html
nav_active: home
---
...markdown content...
I feel like it's going the right direction but being able to visualise where that front matter data has gone, and how to expose it to the Nunjucks rendering, is not clear. Any help?
You need gulp-wrap and original nunjucks.
gulp-nunjucks is a tool for compiling the stream of nunjucks templates, but what you need to do is to wrap your contents in a nunjucks template and that is what gulp-wrap is for.
Try npm install gulp-wrap nunjucks in addition to other settings and then the following should work.
gulpfile
var gulp = require('gulp')
var wrap = require('gulp-wrap')
var frontMatter = require('gulp-front-matter')
var marked = require('gulp-marked')
var fs = require('fs')
gulp.task('pages:md', function() {
gulp.src('./content/**/*.md')
.pipe(frontMatter())
.pipe(marked())
.pipe(wrap(function (data) {
return fs.readFileSync('path/to/layout/' + data.file.frontMatter.layout).toString()
}, null, {engine: 'nunjucks'}))
.pipe(gulp.dest('build/'))
});
markdown
---
title: Title
layout: layout.nunjucks
nav_active: home
---
...markdown content...
layout.nunjucks
<h1>{{ file.frontMatter.title }}</h1>
<p>{{ contents }}</p>
You might want to have a look a the plugin gulp-ssg. I don't know what it's worth, but it was mentionned in this issue for someone who had the same problem as you.
Not exactly what you're looking, but for this kind of work, I've had success using metalsmith. You can even mix it with gulp if, like me, you have more complex processing for your javascripts resources for example.