When I build backend and frontend with the same language, JavaScript, I find it very hard to distinguish between both. Is there any way to have different themes for each project in the workspace? for example change the file association for the frontend to show React logo instead of the default JavaScript logo (I use Material Icon Theme)
"material-icon-theme.files.associations": {
"*.js": "react"
// HOW CAN I MAKE THIS APPLY FOR THE FRONTEND PROJECT ONLY?
},
using the .jsx for frontend is not a good option as it will require extra work when importing things, also not all of my frontend files uses React.js. And I will lose a lot of snippets.
I have written the extension When File that allows you to change workbench colors based on the file path.
Read the extension page for the possible use cases.
An example if you have one folder open in VSC
"whenFile.change": {
"/server/": {
"workbenchColor": {
"activityBar.background": "#509050"
}
},
"/client/": {
"workbenchColor": {
"activityBar.background": "#905080"
}
}
}
Give a try to Peacock theme. It gives different color to each vscode instance.
https://github.com/johnpapa/vscode-peacock
You could Try Using VS Code Color Themes.
https://code.visualstudio.com/docs/getstarted/themes
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 would like apply on a laravel 5.4 project some basic theme switching ability.
I made under config folder a site.php config file where I added the following
return [
'theme' => realpath(base_path('my_theme/views'))
];
than in controller I call it like
Config::get('site.theme')
but when I try to pass to my controller I get View not found however the showed path is correct
How do I implement in case of laravel some basic theming functionality?
I got it between
config/views.php
'paths' => [
//resource_path('views'),
realpath(base_path('themes/my_theme/views'))
],
but still interested how would I apply a multi theme templating system in case of laravel
You probably want to use the theme as a layout. See the documentation here: https://laravel.com/docs/5.4/blade#defining-a-layout
This will allow you to build out a structured layout and then in your application you can switch which one you want to use between views. Typically all my views have an #extends('layouts.app') directive at the top. You could easily replace 'layouts.app' with whatever value you store in a config and a user chooses.
We have found that visual composer is creating custom css class and css code is placed in:
<head>...</head>
We have shortcodes which generate some css code. we also want to make a custom css class and add the css code with the custom css class name.
We just want to make like this.
http://prntscr.com/ckw1pb
I can't find any develop documentation about it. can you please give us little details?
It's pretty easy to figure it out, just use
print_r($this)
on the vc_row.php template file of Visual Composer and it will reveal you everything.
The simplest way is to add this to your vc_row.php file:
// Add this to your vc_row.php for separate custom css output
// Custom CSS
if(is_single() or is_archive() or is_404()) {
if($css) {
echo "<style>$css</style>";
}
}
Screen capture of Material styled screen
I need help configuring Material with my Swift project.
As you can see I am able import Material into my project, however the buttons (except for the switchControl) are not appearing. The assets can be seen in the project's Media Library.
I don't know how to test my integration. I'm looking at the MaterialIcon.swift file because I don't think that the path to resources is correct.
I've compared my build to the examples provided by CM and I need help.
Thanks.
If you are using CocoaPods to setup your project, which I think you are based on your issue. You have two options:
Clean the build folder and delete the UserDerived directory, as well, ensure you are using 1.0* of CocoaPods.
Copy the Assets catalog into your application.
All the best :)
Make sure that you are giving the elements a size also.
Let Button = FabButton()
Button.setButtonTitle(title: "Button", forState: .Noarmal)
view.addSubview(Button)
View.Layout(Button).top(0).left(0).width(80).height(80)