We overrode javax.faces.application.ResourceHandlerWrapper and javax.faces.application.ResourceWrapper to load static resources, for instance css files, from the file system. How can we achieve that this resource loading mechanism also takes place for resources that are referenced in the newly loaded css file from the file system?
Thanks for any help.
Use the EL expression #{resource} in the CSS file to reference them dynamically instead of using a hardcoded path like /context/resources/someLibrary/somePath/someFile.ext or something.
E.g.
.foo {
background-image: url(#{resource['someLibrary:somePath/foo.ext']})
}
.bar {
background-image: url(#{resource['someLibrary:bar.ext']})
}
.baz {
background-image: url(#{resource['somePath/baz.ext']})
}
.moo {
background-image: url(#{resource['moo.ext']})
}
which would reference
WebContent
|-- resources
| |-- someLibrary
| | |-- somePath
| | | `-- foo.ext
| | `-- bar.ext
| |-- somePath
| | `-- baz.ext
| `-- moo.ext
:
This way the JSF default resource handler will substitute them with the right /javax.faces.resource URLs which will in turn go through the resource handler as well.
Related
I'm having these options to configure my marked object but the tables are not getting rendered with proper css.
{
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
xhtml: false,
smartypants: true,
langPrefix: 'hljs language-',
highlight(code) {
return hljs.highlightAuto(code, ['html', 'javascript', 'java']).value;
},
}
Is there anything that I'm missing?
Is there a min.css file that I need to include in index.html to make this work and have proper css for tables?
The table is getting rendered as follows:
The corresponding markdown is:
| ID | Name| email |
|:----:|:----:|:----:|
| ... | ... | ... |
| ... | ... | ... |
| ... | ... | ... |
Including the below CSS will resolve the issue.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pixelbrackets/gfm-stylesheet/dist/gfm.min.css" />
But it may not be the best option for most of us as it has global styles which will affect your whole website.
To overcome this issue, consider using the appropriate CSS from here:
https://github.com/sindresorhus/github-markdown-css
https://cdnjs.com/libraries/github-markdown-css
It will allow you to apply styles only to the elements with the markdown-body class instead of affecting the whole website.
The problem got solved after including gfm.min.css
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pixelbrackets/gfm-stylesheet/dist/gfm.min.css" />
I'm new in gulp and I have a problem with managing hosted fonts in my website.
Does anyone know how I should write gulp task, which creates #fontface in my style.css file? (I tried to use this npm package (https://www.npmjs.com/package/postcss-font-magician#hosted) but it didn't work!)
here is my gulp task (styles.js):
var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import'),
mixins = require('postcss-mixins'),
hexrgba = require('postcss-hexrgba'),
colorFunctions = require('postcss-color-function'),
fontMagician = require('postcss-font-magician')({
hosted: ['../../app/assets/fonts']
});
gulp.task('styles', function() {
return gulp.src('./app/assets/styles/styles.css')
.pipe(postcss([cssImport, mixins, cssvars, nested, hexrgba, colorFunctions,
fontMagician, autoprefixer]))
.on('error', function(errorInfo) {
console.log(errorInfo.toString());
this.emit('end');
})
.pipe(gulp.dest('./app/temp/styles'));
});
here is my css code:
body {
font-family: 'parastoo';
}
and this is my source tree:
|--app
| |-- assets
| | |-- fonts
| | | |-- parastoo.woff
| | | |-- parastoo.woff2
| |-- index.html
|-- gulp
| |-- tasks
| | |-- styles.js
|-- gulpfile.js
|-- package.json
|-- webpack.config.js
Thank you very much.
after running gulp sass files are not compiled into CSS. I have checked directories and all looks fine.There is no error, gulp is running as if there is no .SASS file in the src/styles directory. Nothing is produced in dist/css folder. Any help would be appreciated. Thanks
Here is the gulpfile.js
var gulp = require('gulp'),
compass = require('gulp-compass');
gulp.task('compass', function () {
return gulp.src('src/styles/main.sass')
.pipe(compass({
sass: 'src/styles',
image: 'src/images',
css: 'dist/css',
generated_images_path: 'dist/images',
sourcemap: true,
style: 'compressed'
}))
.on('error', function(err) {
console.log(err);
});
});
gulp.task('default', function () {
gulp.watch('./src/styles/**/*.sass', ['compass']);
gulp.watch('./src/images/**/*', ['compass']);
});
my directory structure
root
|
|
+-- src
| |
| +-- styles/sass
| +-- images
|
+-- dist
|
+-- css
+-- images
This problem was solved by installing compass and sass as ruby gems and adding ruby path to the environment variables.
The current project structure is somewhat like this:
-index.html
|
-bower.json
|
+-bower_components
The proposed project structure will add a few more static html files in the project root. Till now I have been managing all the frontend dependencies in bower.json and had it automatically included in index.html using the grunt-wiredep task. But with new files getting added, each file will have different set of dependencies.
-index.html
|
-file-with-some-other-bower-dependency.html
|
-bower.json
|
+bower_components
What would be an efficient way of managing these files with different bower dependencies?
You can do two different task, each with their own dependencies (bowerJson) :
grunt.initConfig({
wiredep: {
app: {
src: 'index.html',
"bowerJson":{
"dependencies": {
"jquery":"=2.1.3",
...
}
}
},
app2: {
src: 'file-with-some-other-bower-dependency.html',
"bowerJson": {
"dependencies": {
"bootstrap": "~3.0.0",
...
}
}
}}
Seems this is not solved besides being a recurrent question.
This is my folder structure:
project/
|
|--src/
| |--images/
| +--styles/
| +--style.css
|
+--build/
|--images/
+--style.min.css
Note how src/styles/style.css will reference url(../images/image.png) while the minified version build/style.min.css should reference url(images/image.png)
What combination of options for cssmin or clean-css can achieve this?
My current configuration:
cssmin: {
target: {
files: {
'build/style.min.css': 'src/styles/style.css'
}
}
}