I installed clean-jsdoc-theme with npm install clean-jsdoc-theme --save-dev. It works great except the home button defaults to
/path/to/folder/containing/docs/
which displays the folder's contents but does not display the index.html home page for the doc. I tried adding
"opts": {
"encoding": "utf8",
"readme": "./README.md",
"destination": "docs/",
"recurse": true,
"verbose": true,
"template": "./node_modules/clean-jsdoc-theme",
"theme_opts": {
"base_url": "../../../public/index.html"
}
},
to reset the base URL to the right folder, but this just goes to /public/index.html instead of the relative path. Does anyone know how to fix this?
Related
My folder structure is as follows
I am using 'live sass compiler' in vscode to watch files. But every time I update other scss files like _globals.scss I have to manually save style.scss for the changes to reflect. Is there a work-around to auto save style.scss instead of having to save it manually.
my settings.json for live sass compiler are as follows:
{
"editor.tabSize": 2,
"editor.fontSize": 18,
"editor.wordWrap": "on",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"terminal.integrated.defaultProfile.windows": "Git Bash",
"liveServer.settings.donotShowInfoMsg": true,
"files.autoSave": "afterDelay",
"workbench.editorAssociations": {
"*.ipynb": "jupyter.notebook.ipynb"
},
"editor.renderWhitespace": "none",
"liveSassCompile.settings.autoprefix": [],
"liveSassCompile.settings.excludeList": ["**/node_modules/**", ".vscode/**"]
}
This seems bizare. Anything with a leading underscore should compile all files. Do you still have the issue on my active fork?
I came across the extjs class on GitHub that I would like to use in my application.
Where should I put that file?
I know that file structure in extjs follows some patterns, so for example if the name of my application is MyApp, then I put classes in corresponding folders, like MyApp.view.myfolder.MyClass.
However, in this case the usage of class is given as
GLC.tip.toast(title, message, options)
so I doubt that I should put it in some view folder. On the other hand I tried to copy those two files (glc_tip.js and tip.scss) in the root folder of my application and include in index.html the following line:
<script type="text/javascript" src="glc_tip.js"/>
but it also doesn't work. I got an error that it is not defined.
UPDATE
I created folder /ux/tip/ in the application root directory and put files toast.js (renamed glc_tip.js) and tip.scss into it.
After that I modified app.json, so the section with "js" and "css" looks like:
"js": [{
"path": "app.js",
"bundle": true
},{
"path": "/ux/tip/toast.js",
"bundle": true
}],
"css": [{
// This entry uses an ant variable that is the calculated value of the generated
// output css file for the app, defined in .sencha/app/defaults.properties
"path": "${build.out.css.path}",
"bundle": true,
"exclude": ["fashion"]
},{
"path": "/ux/tip/tip.scss"
}],
After that I did sencha app refresh and sencha app build development, but it still doesn't work. i am getting an error:
Uncaught ReferenceError: GLC is not defined
at constructor.handler
It is better to register the third party libs in 'app.json' file. There must be js and css sections. You can put it in '/ux/tip/toast.js' file (create dirs if they do not exist).
Js files in
"js": [
{
"path": "${framework.dir}/build/ext-all-rtl-debug.js"
},
{
"path": "app.js",
"bundle": true
}
],
CSS files will be registered in
"css": [
{
// this entry uses an ant variable that is the calculated
// value of the generated output css file for the app,
// defined in .sencha/app/defaults.properties
"path": "${build.out.css.path}",
"bundle": true,
"exclude": ["fashion"]
}
],
And do not forget to rebuild and refresh your project to apply changes.
I want to generate multiple pages which will have content on different languages from one common template. How can I do it with webpack?
I tried to use different webpack plugins like webpack-static-i18n-html, i18n-webpack-plugin but nothing works for me. The best thing I found is a webpack-static-i18n-html, but it has bad support and this plugin can't watch changes in JSON files with translated text. Below is what I have for now.
This is my code from webpack.common.js.
const Path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const StaticI18nHtmlPlugin = require("webpack-static-i18n-html");
//...
module.exports = {
//...
plugins: [
//...
new StaticI18nHtmlPlugin({
locale: 'en',
locales: ['en', 'ua', 'ru'],
baseDir: Path.posix.join(__dirname, ".."),
outputDir: 'src/localized-pages',
outputDefault: '__lng__/__file__',
localesPath: 'src/locales',
files: 'src/templates/index.html'
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: Path.resolve(__dirname, '../src/templates/index.html')
}),
new HtmlWebpackPlugin({
filename: 'ua/index.html',
template: Path.resolve(__dirname, '../src/localized-pages/ua/src/templates/index.html')
}),
new HtmlWebpackPlugin({
filename: 'ru/index.html',
template: Path.resolve(__dirname, '../src/localized-pages/ru/src/templates/index.html')
}),
//...
],
//...
};
I also have webpack.dev.js and webpack.prod.js which I merge with webpack.common.js via webpack-merge plugin. As you can see, after generating pages, I have to use HtmlWebpackPlugin to serve them. It's awkward to use.
locales folder:
locales
|-en.json
|-ua.json
|-ru.json
en.json file:
{
"key": {
"innerKey" : "value"
}
}
Then plugin generates from:
<p data-t>key.innerKay</p>
this
<p>value</p>
But as I said, If I change en.json nothing will regenerate. I will not use this way to generate multiple pages for different languages.
So, I would like to generate several pages from one template. Is there any way to do this with webpack?
I was working on a multi language admin dashboard with Webpack and was wondering how could I tackle this problem until I found a way to make everything automatic with a multiple language web template.
First of all, webpack-static-i18n-html isn't a good solution because most of its packages are deprecated. But actually the mentioned package is based on a good npm package called node-static-i18n. So, the first thing you need to do is installing this npm package using this command
npm install -g static-i18n
Next, you need to make your translation file as *.json files and in json format and put them in a folder which I named "locales" and I put it in my "src" folder of my project. I need two languages for my website. One of them is English and another is Farsi or Persian. Therefore I made two file namely fa.json and en.json. So, I have folder and file structure like the picture below:
My file and folder structure in my Webpack project
This is part of my en.json file as an example:
{
"menu": {
"items": {
"dashboard": "Dashboard",
"posts": "Posts",
"media": "Media"
},
"sub": {
"items": {
"all-posts": "All Posts",
"add-new-post": "Add New",
"categories": "Categories"
}
}
}
}
This is part of my fa.json file as an example:
{
"menu": {
"items": {
"dashboard": "پیشخوان",
"posts": "نوشته ها",
"media": "رسانه"
},
"sub": {
"items": {
"all-posts": "نوشته ها",
"add-new-post": "افزودن نوشته",
"categories": "دسته ها"
}
}
}
}
and you can use them in your html tags like this:
<span class="className" data-t>menu.items.dashboard</span>
Please notice that for using translation you should use the attribute data-t in your tags like span then you can use key and values saved in your related json file to use translations between your tags. for more information about data-t and its usage please go to the plugin's Github page that I mentioned it earlier in this text on the plugin name.
Next, you should write needed command in the script section of your package.json file to run node-static-i18n to translate your template based on your html template file and save them in i18n folder in root of your project as below:
"scripts": {
"i18n": "static-i18n -l en -i fa -i en src --localesPath src/locales/",
}
in the above command:
-l: The default locale.
-i: the list of locales to be generated.
--localesPath: The directory of the translations, where each file should be named LOCALE_NAME.json
Now if you run npm run i18n this command should make a folder in root path of your project called i18n containing html files in two languages in this case. it will be like the picture below:
i18n folder and translated html files in it
Next you should config your Html Webpack Plugin in your Webpack config file to show these pages in your browser like this:
plugins: [
.
.
.
new HtmlWebpackPlugin({
//inject: false,
chunks: ['main'],
template: 'i18n/index.html',
filename: 'index.html'
}),
new HtmlWebpackPlugin({
//inject: false,
chunks: ['main-rtl'],
template: 'i18n/fa/index.html',
filename: 'fa/index.html'
})
]
because you need to see changes on your browser automatically you need another package called npm-watch to install through this command:
npm install -D npm-watch
Then, you should change script section of your package.json like this:
"scripts": {
"i18n-watch": "watch 'npm run i18n' src",
"i18n": "static-i18n -l en -i fa -i en src --localesPath src/locales/",
}
By using the command npm run i18n-watch whenever you make any changes in your locale files or your original html template in src folder it's gonna re-translate your html file based on new information and if you're running your webpack dev server you can see the result right after you save changes.
After that, to run i18n-watch command and your Webpack dev server at the same time it would be great installing another npm package for this purpose called npm-run-all by using the command below:
npm i -D npm-run-all
Finally, you can change the script section of your package.json like this to run i18n-watch and your Webpack dev server at the same time and after that if you make any changes you can see the result in the browser right after saving changes.
"scripts": {
"i18n-watch": "watch 'npm run i18n' src",
"i18n": "static-i18n -l en -i fa -i en src --localesPath src/locales/",
"webpack-dev": "webpack-dev-server --open --config=config/webpack.dev.js",
"start": "npm-run-all --parallel webpack-dev i18n-watch"
}
Now, if you use npm start in your terminal you will see your Webpack dev server and i18n-watch are running at the same time watching for any changes.
Hopefully this makes sense.
I installed SublimeLinter for linting JavaScript in Sublime. It works, but i want to change it's settings so it'll always detect unused variables. I managed to do it by adding // jshint unused:true to top of the .js file itself, but i want to make it default so it'll always work.
I tried adding the setting to the SublimeLinter user settings in SublimeText, but it didn't work:
"user": {
"debug": false,
"delay": 0.25,
"error_color": "D02000",
"gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
"gutter_theme_excludes": [],
"lint_mode": "background",
"linters": {
"jshint": {
"#disable": false,
"args": [],
"excludes": [],
"unused": true, <-------- THIS
"ignore_match": ["Missing semicolon"]
}
},
I managed to create the .jshintsrc file under windows thanks to the tip from Alexander Nied. That is: Name the file ".jshintsrc.", windows explorer will drop the last dot when you hit enter. I created the file in C:\ but probably can be put in other paths.
The settings i used for my .jshintsrc file, for NodeJS development:
{
"undef": true,
"unused": true,
"node": true,
"globals": {
"MY_GLOBAL": true
}
}
i'm packaging my application using electron-packager but isn't changing its name, and still display "Electron".
it's supposed to use the productName in my package.json but it doesn't change.
even if i made an installer, the name of the app installed, shortcut and process still is Electron
i've read that maybe the problem is electron-prebuilt but i didn't have it as a dependency on my project.
Any idea what is wrong?
Edit:
reading more on the documentation of electron-packager there's an options especially to windows. but when i use them throws me an error:
Fatal error: Unable to commit changes
undefined
the first time i used them was "working" good packaging my app, but still displaying wrong the appname
electron-packager ./ --platform=win32 --arch=ia32 --overwrite=true --appname="TierraDesktop" --version-string.ProductName="TierraDesktop" --version-string=InternalName="TierraDesktop" --version-string.CompanyName="Cosmica" --version-string.FileDescription="Sistema de gestion comercial" --version-string.OriginalFilename="TierraDesktop"
before was working with --version-string.ProductName but now even with it still throws that error.
here i'll leave you my packager.json that's on the root of my project
{
"name": "TierraDesktop",
"productName": "TierraDesktop",
"version": "2.0.5",
"description": "Aplicacion de escritorio tierra de colores",
"main": "main.js",
"scripts": {
"start": "electron main.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/xxxx/xxxxx.git"
},
"author": "xxxxx",
"devDependencies": {
"debug-menu": "^0.4.0",
"electron-winstaller": "^2.3.3"
},
"dependencies": {
"electron-json-storage": "^2.0.0"
}
}
Ok after trying and researching i've decided to package my application via programmatic API
with this script i can achieve all what i want. hope this help someone with the same problem.
var packager = require('electron-packager');
var options = {
'arch': 'ia32',
'platform': 'win32',
'dir': './',
'app-copyright': 'Paulo Galdo',
'app-version': '2.0.5',
'asar': true,
'icon': './app.ico',
'name': 'TierraDesktop',
'ignore': ['./releases', './.git'],
'out': './releases',
'overwrite': true,
'prune': true,
'version': '1.3.2',
'version-string':{
'CompanyName': 'Paulo Galdo',
'FileDescription': 'Tierra de colores', /*This is what display windows on task manager, shortcut and process*/
'OriginalFilename': 'TierraDesktop',
'ProductName': 'Tierra de colores',
'InternalName': 'TierraDesktop'
}
};
packager(options, function done_callback(err, appPaths) {
console.log(err);
console.log(appPaths);
});
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
If appname is omitted, this will use the name specified by
"productName" or "name" in the nearest package.json.
Have you tried to set the 'name' property in package.json?
#Paulo Galdo Sandoval's answer is correct for electron-packager, but as of version 9.0.0 of the package, it automatically grabs information for those fields (version-string is now win32metadata). See the release notes for that package
electron-packager checks the output directory for an existing package based on the version name. If you did not change the version name when you tried to re-package with a different product name, electron-packager probably told you in the console that it was skipping the packaging process because a package already exists.