I have an app with React with LESS.
I have a "mixins" LESS file like this:
#STATICS: "https://should-be-set-on-env";
#STATICS_KEY: "key-should-be-set-on-env";
.completePath(#property, #path) when (#property = 'background-image'){
background-image: url("#{STATICS}/#{path}#{STATICS_KEY}") !important;
}
Currently I'm overwriting the #STATIC and #STATIC_KEY with some method that has customize-cra but now I can't use them (for X reason).
I need a way to read directly from the process.env values in order to have something like this:
#STATICS: readFromProcesEn(REACT_APP_STATICS);
#STATICS_KEY: readFromProcesEn(REACT_APP_STATICS_KEY);
How can I co it? is there a way with Less to read from an external file or some sort of JavaScript function, to get those values from process.env ?
This works for me:
#STATICS: `(function(){return process.env.REACT_APP_STATICS;})()`;
#STATICS_KEY: `(function(){return process.env.REACT_APP_STATICS_KEY;})()`;
Didn't know that Less could use javascript inside batticks.
I'm using this babel plugin https://github.com/gilbsgilbs/babel-plugin-i18next-extract. Haven't configured it much beyond the basics.
it generates an extractedTranslations folder but I just end up with keys and no values. Is that the correct behavior? I would figure that it would reconcile the values from the translations files that i already have.. I'm kind of confused on how this is useful?
Creator of the plugin here. By default, babel-plugin-i18next-extract indeed extracts the keys to extractedTranslations/{{locale}}/{{ns}}.json. If you want to change this, you must set the outputPath configuration option to something else. For instance:
{
"plugins": [
[
"i18next-extract",
{
"outputPath": "locales/{{locale}}/{{ns}}.json"
}
]
]
}
If the outputPath you set already exists for a given locale and namespace, the plugin should only add new keys and leave the values of existing keys untouched.
You may want to look at the other configuration options to make the plugin match to your workflow.
Is it possible to use template parameters in the content of a post with Hugo? E.g. if I have the following parameters:
[params.company]
name = "My Company"
Can I then do something like this in the content of a post?
This site, {{ .Site.BaseURL }} is operated by {{ params.company.name }}
I've tried, but it's literally printing the above instead of interpolating the variables.
1. Front matter way
As far as I'm aware, it's not possible* to put variables within the markdown file's content because MD parser would strip them, but it's possible to do it using custom variables on the front matter of each .md content file. The Hugo engine can target any fields you set in front matter. Front matter fields can be unique as well.
In your case, the template which is called to show the rendered .MD file has access to front matter parameters and you can change template's behaviour (like add classes of extra <div>'s) or even pull the content right from the parameter.
For example, on my .md files I have:
---
title: "Post about the front matter"
<more key pairs>
nointro: false
---
The key nointro: true would make my first paragraph to be normal size. Otherwise, if key is absent or false, first paragraph would be shown at larger font size. Technically, it's adding a custom class on a <div>.
In the template, I tap into the custom parameter nointro this way:
parent template which shows your markdown file, which has front matter parameters:
<div class="article-body {{ if .Params.nointro }} no_intro {{ end }}">
{{ .Content }}
</div><!-- .article-body -->
Notice I can't put variables within {{ .Content }}, but I can outside of it.
For posterity, that's piece of the content from a file hugo/themes/highlighter/layouts/partials/blog-single-content.html, it's a partial for single post content. You can arrange your partials any way you like.
Obviously, that's Boolean parameter flag, but equally it could be content which you could use directly:
MD file's top:
---
title: "One of our clients"
<more key pairs>
companyname: "Code and Send Ltd"
---
Text content is put here.
Then, reference it like this (extra insurance against blank value using IF):
Anywhere in Hugo template files:
{{ if .Params.companyname }}{{ .Params.companyname }}{{ end }}
2. Using config.(toml/yaml/json)
Now, looking at your example, "This site is operated by " would almost warrant a custom field in more global location, for example, hugo/config.toml. If I wanted to add a companyname into my config, I'd do it this way:
hugo/config.toml:
BaseURL = "_%%WWWPATH%%_"
languageCode = "en-uk"
title = "Code and Send"
pygmentsUseClasses = true
author = "Roy Reveltas"
theme = "Highlighter"
[params]
companyname = ""
Then I'd use it anywhere via {{ .Site.Params.headercommentblock }}.
I guess if you want your client pages to be static pages then single location might not be the best and you might want to tap into front-matter. Otherwise, if it's a site's footer, this way is better. Alternatively, you could even put this data even on data files.
3. Using custom placeholders and replacing via Gulp/npm scripts
I said not possible*, but it's possible, although unconventional and more risky.
I had such setup when I needed two builds for my website: 1) Prod and 2) Dev. Prod URL's were coming from two places: CDN and my server. Dev had to come from a single place in a static folder because I wanted to see images and was often working offline on a train.
To solve that, I used two custom variables in all my templates (including markdown content): _%%WWWPATH%%_ and _%%CDNPATH%%_. I came up with this unique pattern myself by the way, feel free to adapt it. Then, I put it also on hugo/config.toml as:
hugo/config.toml:
BaseURL = "_%%WWWPATH%%_"
After Hugo happily generated the website with those placeholders, I finished off the HTML's using a Grunt task:
grunt file:
replace: {
dev: {
options: {
patterns: [{
match: /_%%CDNPATH%%_+/g,
replacement: function () {
return 'http://127.0.0.1:1313/'
}
}, {
match: /_%%WWWPATH%%_+/g,
replacement: function () {
return 'http://127.0.0.1:1313/'
}
}...
For posterity, I recommend Gulp and/or npm scripts, I'd avoid Grunt. This is my older code example above from the days when Grunt was the best.
If you go this route, it's riskier than Hugo params because Hugo won't error-out when your placeholder values are missing or anything else wrong happens and placeholders might spill into the production code.
Going this route you should add multiple layers of catch-nets, ranging from simple following Gulp/Grunt/npm scripts step which searches for your placeholder pattern to pre-commit hooks ran via Husky on npm scripts that prevent from committing any code that has certain patterns (for example, %%_). For example, at a very basic level, you would instruct Husky to search for anything before allowing committing this way:
package.json of your repo:
"scripts": {
"no-spilled-placeholders": "echo \"\n\\033[0;93m* Checking for spilled placeholders:\\033[0m\"; grep -q -r \"%%_\" dist/ && echo \"Placeholders found! Stopping.\n\" && exit 1 || echo \"All OK.\n\"",
"precommit": "npm run no-spilled-placeholders"
},
Basically, grep for pattern %%_ and exit with error code if found. Don't forget to escape the code because it's JSON. I use similar (more advanced) setup in production and nothing slips through. In proper setup you should creatively look for anything mis-typed, including: %_, _%, %__, __% and so on.
Normal Go template is not supported in the markdown file, but shortcodes are:
{{< param "company.name" >}}
To access arbitrary other Go template values, create a custom shortcode for it and call that from your markdown file.
For your example, you need the site's baseUrl, so save this as layouts/shortcodes/base_url.html:
{{ .Site.BaseURL }}
And write this in your markdown file:
+++
[company]
name = "My Company"
+++
This site, {{< base_url >}} is operated by {{< param "company.name" >}}
There is also the shortcode param : {{< param "companyName" >}} : https://gohugo.io/content-management/shortcodes/#param
When creating a language package for atom, it's possible to define a /snippets folder. Any files in here are automatically loaded when the package is active and the context (eg: ".source.js") is opened in the editor.
Now I'd like to contribute to the language-arma-atom package, where there's currently 3 snippet files: I want to add a checkbox option in the package settings to NOT load one of these files.
ie: I know how to add the option, but not how to exclude one of these snippet files.
The way I solved this was create a snippetsAvailable folder, put the files in there (and remove the snippets folder)*.
In your main package file, add to your config schema:
config:
optionalSnippets:
title: "My optional snippets"
description: "Adds optional snippets to autosuggestions"
type: "boolean"
default: true
And in your package's activation do something like this:
activate: ->
#subscriptions = new CompositeDisposable
# etc..
atom.config.observe 'my-package.optionalSnippets', (checked) ->
# For copyNewer, see note below *
copyNewer "my-snippets", "#{__dirname}/snippets", {
cwd: "#{__dirname}/snippetsAvailable"
}
* Note: I used the copyNewer package, because it allows me to remove the /snippets folder, ie: it will automatically create it again. More importantly, it won't overwrite the snippets file on each package activation; Except if you updated your package with new snippets.
Obviously you'll have to write copyNewer = require 'copy-newer' at the top of your main file.
Also, if you choose this method, don't forget to put /settings in .gitignore
When trying to generate our application with the variant "qx.debug" set to "on" in the config.json I get a lot of errors like this:
Error: Variantoptimizer: No default case found for (qx.debug:off) at (qx.core.Property:1004)
I could fix those by adding the "default" cases, but I was wondering, if I was doing something wrong in the first place or if this these are actual issues in the qooxdoo SDK.
For one thing, qx.debug is set to "on" in the source version by default, so you don't have to do anything for that.
For the build version, you need to configure this in your config.json, e.g. in the "jobs" section add
"build" : {
"variants" : {
"=qx.debug" : [ "on" ]
}
}
Is this what your config looks like? The error message you gave is weird, which qooxdoo version are you using? You shouldn't need to provide any "default" cases for this variant in the framework code.