To use the NgPrime Editor component devo install quill
https://www.primefaces.org/primeng/#/editor
The problem that I do not know in which files to put the css and the scripts, since according to the documentation I put them in the file "angular-cli.json", it does not work.
I tried to put the css in vendor.scss
#import '~quill/dist/quill.core.css';
#import '~quill/dist/quill.snow.css';
But it does not work either. He paints it but partially, as if he lacked styles and functionality.
I do not know where I should locate the css and ts. And if I also have to execute a specific command.
Can somebody help me.
Thank you very much.
Related
I've got an Astro project using markdown content collections for blog posts. In these posts I have svg images referenced as so:
This shows the SVG inside of an <img> tag but I want to inline the SVG in these scenarios. This is where the rehype-inline-svg plugin is supposed to help me. But when I add the plugin into my Astro config, I get an error ENOENT: no such file or directory, open '/assets/images/image-1.svg'
I have tried several paths to reference this image, but none work. I figure at the very least, the path should stay the same. I am not sure what else to do to get this to work. My Astro config is as follows:
import { defineConfig } from 'astro/config';
import inlineSVG from '#jsdevtools/rehype-inline-svg';
export default defineConfig({
markdown: {
rehypePlugins: [inlineSVG]
},
});
My original goal was to display Excalidraw SVGs with the font. Fonts need to be embedded if contained within an <img> tag so I am trying this inline approach. I would be happy to know if you have a good automated technique for achieving this too.
In your case, is /assets/images/image-1.svg in your public/ directory? Looking at rehype-inline-svg’s code it looks like it tries to resolve SVG paths relative to the root of the project, so you might need to include public/ in your Markdown somewhat unusually:
Colleagues, I'm trying Parcel as an alternative to webpack project builder and I like it, but there are two BUTs that I still can't beat (here are links to starting builds - build on Parcel
and build on webpack):
1) In the assembly under the webpack, I used svg-sprite-loader to create svg sprites, which adds immediately after opening body svg with symbols like this:
there is no such plugin in the parcel assembly, I tried to install parcel-plugin-svg-sprite, but it does not compile a separate sprite (at least I did not find such a solution in the documentation).
As a result, for now, I am inserting svg in the way described in the parcel documentation (I use a pug in the project):
svg
use (href = "../../ icons / facebook.svg")
but in this case, I only get an empty space ((
2) When building a project, i get one folder with a lot of files, which is not very convenient, in the documentation I found that i can use the -d flag to set a name for the folder in which building the project, but did not find how to separate html/css/js/imgs by folders.
Thanks in advance for any help.
I don't think that there is yet a plugin for parcel2 that will allow you to easily create svg sprites. The parcel-plugin-svg-sprite package you mentioned is for parcel 1, so it is not expected to work. (In general, you can expect parcel 2 plugins to conform to this naming scheme - packages that start with parcel-plugin are probably for parcel 1).
As a workaround, the easiest way to use svgs in a pug template built with parcel would be to use an <img> or an <object> tag with a src property, e.g:
img(src="../../icons/facebook.svg")
or
object(data="../../icons/facebook.svg")
Doing it this way, where the svg file is "external" has a few limitations(discussed in the docs), notably there will be an extra round trip to download each svg (this would be good for caching, but bad if there were hundreds of svgs on your site). Also, you can't style the svg with css from the surrounding document.
You can avoid the first limitation (extra server round trip) by using css background-image/background property with a data URL (see docs)
.pug file
.icon-test
.(s)css file
.icon-test {
background-image: url('data-url:../../icons/facebook.svg');
}
(In react-based projects there is a way to avoid both these limitations and get parcel to inject the SVG as inline JSX through the #parcel/transformer-react-svg plugin (see docs), but I'm not aware of a similar plugin (yet) for pug templates.)
You can control the structure of the output files in parcel's dist folder by writing a custom namer plugin. I explained how to do this in this answer.
The plugin developer for the first parcel made the build for the parcel v2, and I say thank you! Here is the plugin, tested it with html and pug, everything works! https://github.com/Epimodev/parcel-plugin-svg-sprite
I am using the application layout control from the extension library. In my application banner links I would like to include icons from font-awesome but I do not manage to achieve this.
Someone to the rescue?
Balassaitis says everything I was going say only better and with pictures: https://xcellerant.net/2014/04/07/implementing-font-awesome-4-0-3-in-xpages/
NOTE: the FA classes don't work with the img tag. Use the i tag in your source instead.
Is it possible to theme jquery-ui via npm?
Or do we still have to go through the download builder?
The jquery-ui package has the default theme included at:
./node_modules/jquery-ui/themes/base/*.css.
If we require('jquery-ui') that won't load any css styling as well, right?
Do we need to require('./jquery-ui/themes/base/all.css')?
Or is there a better way?
Is it possible to theme jquery-ui via npm?
Yes, you can use jquery theme package (link).
npm i jquery-ui-themeroller.
And import it
require('./jquery-ui-themes/themes/dot-luv/theme.css');
dot-luv is the name of theme.
Here is official document, not only theme list also tool for customize theme.
Remember to import jquery css file first require('./jquery-ui/themes/base/all.css')
If we require('jquery-ui') that won't load any css styling as well, right?
Yes, you should import require('./jquery-ui/themes/base/all.css'); to get the style file.
Do we need to require('./jquery-ui/themes/base/all.css')?
It is the simplest way to get all widgets style. But in most case we only need several widget.
That say we want datepicker only, we should import css file by
require('./jquery-ui/themes/base/core.css');
require('./jquery-ui/themes/base/datepicker.css');
And now you can use your own theme in the end.
I'm using Node / React / Webpack with leaflet. I installed leaflet using npm and in my map component I import 'leaflet'; which works fine for the js.
However, the map does not look correct due to the css not working correctly, however images stored in the leaflet/dist/images seem to work fine. In order to get the css to work I have to also import 'leaflet/dist/leaflet.css' but it feels to me like I shouldn't have to and that it should be included with the first import statement?
Yes, you have to have, see this link might be useful:
leaflet-css webpack require
I omitted its CSS in an ionic project but copied a few necessary lines to avoid a broken map UI.