How to disable chunkhash in neutrino.js? - neutrino

I'm looking for a way to disable chunkhash in neutrino.js when building, but didn't find any documentation about it, anyone could help?
Updated:
As in webpack, I can customize the output.filename, in neutrino.js, it seems the string "[name].[hash].bundle.js" is baked in, and there's no way to remove [hash] as far as I can see.

In your .neutrinorc.js file, you can add an additional override function to change the output filename to not include the chunk hash (using neutrino-preset-react as an example:
module.exports = {
use: [
'neutrino-preset-react',
(neutrino) => {
// the original value of filename is "[name].[chunkhash].js"
neutrino.config.output.filename('[name].js');
}
]
};
If you want to change build targets based on an environment variable:
module.exports = {
use: ['neutrino-preset-react'],
env: {
NEUTRINO_TARGET: {
desktop: {
use: [
(neutrino) => neutrino.config.output.filename('[name].js');
]
},
mobile: {
use: [
(neutrino) => neutrino.config.entry('mobile').add('index.mobile.js');
]
}
}
}
};
Then you can run Neutrino twice with differing environments:
NEUTRINO_TARGET=desktop neutrino build
NEUTRINO_TARGET=mobile neutrino build

Related

Image Text Wrapping in Markdown with Gatsby Transform Remark

I'm trying to figure out a solution to wrap text around images within a markdown document using Gatsby. I have tried the wrapperStyle option but not entirely sure how to get it to work. I've seen on Gatsby's website using the following code:
wrapperStyle: fluidResult => `flex:${_.round(fluidResult.aspectRatio, 2)};`,
But I am very novice to coding and am unsure how to read this (I'm a technical writer by trade). Also, adding this makes my images disappear when I build the repo.
Here is a condensed snippet from my gatsby-config.js file in case someone is unsure of where I'm talking about in gatsby-config.js.
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 800,
},
I think you are looking for showCaptions or markdownCaptions option of gatsby-remark-images plugin. Use it like:
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-images',
options: {
showCaptions: true
}
}
]
}
}
Or customize the element of the caption like:
{
resolve: 'gatsby-remark-images',
options: {
showCaptions: ['title', 'alt']
}
}
}
Note: with this configuration, if you set the title, it will be used as the caption. Otherwise, if you set the alt attribute, it will be used instead
You can find the result of the configuration in this GitHub thread:
Related articles:
https://medium.com/#sgpropguide/customising-image-display-in-gatsby-3b027d783dce
https://codeconcisely.com/posts/how-to-add-markdown-image-captions-in-gatsby/

Cypress configuration interpolation

Is there a way to let configuration variables in 'cypress.json' point to another variable?
A little example:
{
"baseUrl": "https://example.org"
"env": {
"apiUrl": "${baseUrl}/api/v1"
}
}
I didn't found something about this in the documentation, but it would be very usefull to me.
There is no way to make interpolation inside cypress.json because it is simple JSON file. But, you can achieve it during runtime, like this (put this code inside your cypress/plugins/index.js):
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
config.baseUrl = `${config.baseUrl}${config.env.apiUrl}`
console.log(config.baseUrl) // https://example.org/api/v1
return config;
}
And your cypress.json:
{
"baseUrl": "https://example.org"
"env": {
"apiUrl": "/api/v1"
}
}

How to load csv files into a nuxt vue component

I am currently trying to load a csv file into a Nuxt page. The folder structure is below and produces the error "Failed to load resource: the server responded with a status of 404 (Not Found)":
Project
|
+--pages
|
+--lesson
|
+--index.vue
+--file.csv
import * as d3 from 'd3';
export default{
data(){
return{
dataset1:[]
}
mounted(){
d3.csv('file.csv', (myData) => {
console.log('Mydta', myData);
this.dataset1 = myData;
})
}
}
I have added the following to the web pack config in the nuxt-folder:
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
config = {
module: {
rules: [
{
test: /\.csv$/,
loader: 'csv-loader',
options: {
dynamicTyping: true,
header: true,
skipEmptyLines: true
}
}
]
}
}
}
}
Thanks in advance
I recently had the same question and ended up using the #nuxt/content module – worked like a charm, didn't even need to include d3 (which is usually my go-to for parsing CSV files).
I believe the issue is you cannot access the csv file the way you are attempting to, the way to do that would be storing the file in the '/assets' directory which you can then access as shown in the docs I linked ~/assets/file.csv I think this is also a more correct location for storing such files to avoid having lingering files throughout the project
This worked for me:
async mounted() {
const d = await d3.csv("/data.csv");
console.log(d);
}
With data.csv placed in public folder.

How to get deviceName value from Multicapabilities definition in protractor config

This might be repeated question for you guys but really I didn't get answer yet.
Here is my multi-capabilities definition in protractor config file.
I want to access the deviceName parameter value. How can I do it?
exports.config = {
directConnect:true,
multiCapabilities: [
{
browserName: 'chrome',
'chromeOptions': {
'mobileEmulation': {
'deviceName': 'iPad'
}
}
}
],
Tried under onPrepare but not giving multi-capabilities values
browser.getCapabilities().then(function(c) {
console.log(c.get('deviceName'));
});
Not sure about solving with getCapabilities(), but you should be able to solve this with getProcessedConfig().
getProcessedConfig will return a promise of your entire configuration settings (and a few protractor defaults). So taking your example:
browser.getProcessedConfig().then((c) => {
console.log(c.capabilities.chromeOptions.mobileEmulation.deviceName);
});
You could make console.log(process.env) in the onPrepare block and find what you want.
Try getProcessedConfig()
http://www.protractortest.org/#/api?view=ProtractorBrowser.prototype.getProcessedConfig
Or just plain old stupid:
let device_name = 'iPad'
exports.config = {
directConnect: true,
multiCapabilities: [{
browserName: 'chrome',
chromeOptions: {
mobileEmulation: {
deviceName: device_name
}
}
}],
onPrepare: function () {
console.log('Device name will be', device_name);
}
Fetching device name worked as advised by Gunderson but now I am running into different issue I am unable to access the variable value outside the code block while in onPrepare.
onPrepare: function () {
browser.getProcessedConfig().then(function (c) {
return global.deviceName
c.capabilities.chromeOptions.mobileEmulation.deviceName;
}).then(function () {
console.log("Device Name is:" + global.deviceName);
customDevice = global.deviceName;
}
);
};
customDevice not printing any value.....which is define as global variable on top of the configuration file.
I know might be doing silly mistake in accessing it...:)

Configurable redirect URL in DocPad

I'm using DocPad to generate system documentation. I am including release notes in the format
http://example.com/releases/1.0
http://example.com/releases/1.1
http://example.com/releases/1.2
http://example.com/releases/1.3
I want to include a link which will redirect to the most recent release.
http://example.com/releases/latest
My question: how do I make a link that will redirect to a relative URL based on configuration? I want this to be easily changeable by a non-programmer.
Update: I've added cleanurls into my docpad.js, similar to example below. (see code below). But using "grunt docpad:generate" seems to skip making the redirect (is this an HTML page?). I've a static site. I also confirmed I'm using the latest cleanurls (2.8.1) in my package.json.
Here's my docpad.js
'use strict';
var releases = require('./releases.json'); // list them as a list, backwards: ["1.3", "1.2", "1.1", "1.0"]
var latestRelease = releases.slice(1,2)[0];
module.exports = {
outPath: 'epicenter/docs/',
templateData: {
site: {
swiftype: {
apiKey: 'XXXX',
resultsUrl: '/epicenter/docs/search.html'
},
ga: 'XXXX'
},
},
collections: {
public: function () {
return this.getCollection('documents').findAll({
relativeOutDirPath: /public.*/, isPage: true
});
}
},
plugins: {
cleanurls: {
simpleRedirects: {'/public/releases/latest': '/public/releases/' + latestRelease}
},
lunr: {
resultsTemplate: 'src/partials/teaser.html.eco',
indexes: {
myIndex: {
collection: 'public',
indexFields: [{
name: 'title',
boost: 10
}, {
name: 'body',
boost: 1
}]
}
}
}
}
};
When I run grunt docpad:generate, my pages get generated, but there is an error near the end:
/data/jenkins/workspace/stage-epicenter-docs/docs/docpad/node_modules/docpad-plugin-cleanurls/node_modules/taskgroup/node_modules/ambi/es6/lib/ambi.js:5
export default function ambi (method, ...args) {
^^^^^^
I can't tell if that's the issue preventing this from running but it seems suspicious.
Providing that your configuration is available to the DocPad Configuration File, you can use the redirect abilities of the cleanurls plugin to accomplish this for both dynamic and static environments.
With a docpad.coffee configuration file, it would look something like this:
releases = require('./releases.json') # ['1.0', '1.1', '1.2', '1.3']
latestRelease = releases.slice(-1)[0]
docpadConfig =
plugins:
cleanurls:
simpleRedirects:
'/releases/latest': '/releases/' + latestRelease
module.exports = docpadConfig

Resources