I'm trying to use Google Material Icons in my react-styleguidist documentation.
In my styleguide.config.js file, I've tried
module.exports = {
template: './template.html'
}
and then added <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> to the <head> tag of the template.html file but react-styleguidist doesn't recognize this format anymore, it seems.
I've tried to use a template and theme as follows:
template: {
head: {
links: [
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Material+Icons'
}
]
}
},
theme: {
fontFamily: {
base: "Material+Icons"
}
}
This just displays the icon name in words rather than the actual icon. I think this method only works for actual fonts like Roboto etc. Any help would be appreciated.
I've found a solution that works for me. May not be the ideal way to do it, but it works.
In my styleguide.config.js I've added:
require: [
path.join(__dirname, '/fonts/material-icons.css'),
]
Inside /fonts/material-icons.css, I've pasted the css from here -
https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp
And that's it. Now I can use something like <span class="material-cions-rounded">group</span> in any of my code files.
Related
I'm using TailwindCSS to create a portfolio website. Not using anything fancy, just a static website using Tailwind.
Recently, my font that is "Inter" from Google Fonts is not rendering on mobile browsers. It was working before suddenly stopped worked when I extended a few colors.
The weird thing is, everything works fine on desktop browsers with mobile screen sizes using dev tools in Chrome and Safari.
Does anyone know what seems to be the problem or experienced the same issue?
Thanks in advance!
Here is my code:
My src css file:
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap');
#tailwind base;
#tailwind components;
#tailwind utilities;
My tailwind.config.js file:
module.exports = {
purge: {
mode:'layers',
content:['./public/**/*.html/']
},
darkMode: 'media', // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
'body': ['Inter'],
},
colors: {
cwc: {
red:'#FF0000',
},
black: {
900:'#000000',
800:'#0D0D0D',
700:'#191919',
600:'#333333',
},
bg: {
white:'#F6F9FC',
},
text: {
primary:'#0b0014',
paragraph:'#61656b',
secondary:'#61656b',
tertiary:'#90959D',
highlight:'#1f66ff',
},
button: {
neutral:'#676B71',
hover: '#0b0014',
},
},
},
},
variants: {
extend: {},
},
plugins: [],
}
My postcss.config.js file
const cssnano = require(cssnano);
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
cssnano({
preset:'default',
}),
]
}
Setup Google Fonts
First of all, head over to Google Fonts and find a cool font you want to use.
Open up the font and click the "Select this style" button for each style you like.
Select Google Font styles
With it selected, you'll get a sidebar on the right showing the <link> attribute for it. Copy this link method.
Now head back to your project and open the index.html file. We'll place this import above our styles.css file.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- other stuff -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
</html>
Add to Tailwind
Now let's extend our Tailwind theme to have it know about this font.
Open the tailwind.config.js file and extend the theme's fontFamily option.
module.exports = {
theme: {
extend: {
fontFamily: {
'press-start': ['"Press Start 2P"', 'cursive']
}
}
}
};
If your font like this example uses spaces, it's best to use the double escape '""' it will make sure it's used in the right way.
Our font will now be available as font-press-start we can add this to our heading on the homepage like this:
<h1 class="text-6xl font-press-start">Welcome</h1>
I am new to Emmet. Trying to create a custom abbreviation that expands to:
<link rel="stylesheet" href="http://www.domain.com/path/CSstyles.css">
<link rel="stylesheet" href="http://www.domain.com/path/CDstyle2.css">
<link rel="stylesheet" href="http://www.domain.com/path/DEstyle.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
so I can easily insert a set of styles and script for a site I work on a lot.
I am working in Sublime Text 3 and went to Sublime > Preferences > Package Settings > Emmet > Settings - User and added the following as a starting point:
{
"snippets": {
"html": {
"abbreviations": {
"lclinks": "<link rel=\"stylesheet\" href=\"http://www.domain.com/path/CSstyles.css\" />+<link rel=\"stylesheet\" href=\"http://www.domain.com/path/CDstyles.css\" />"
}
}
}
}
Which worked, but did not expand past the first style reference. I tried replacing the + with an n\t\ with the same results. I found an example online and plugged that in instead to see if that worked, but it still does not expand past the first element. What am I doing wrong? The documentation here doesn't really address multiple line snippets.
{
"snippets": {
"html": {
"abbreviations": {
"lclinks": "<div class=\"block\">\n\t<div class=\"text\">\n\t\t<h3>|</h3>\n\t\t<p></p>\n\t</div>\n</div>"
}
}
}
}
In your example, you are using abbreviations section which is actually parses provided single element HTML tag to use it as a reference for building output. And what you are trying to do is to create a regular text snippet. E.g. a chunk of arbitrary code.
If you read closer snippets.json section, you’ll see that given file contains abbreviations and snippets sections that has different meanings, described here.
In your example, you have to use either snippets section or use aliases in your abbreviations section:
{
"snippets": {
"html": {
"abbreviations": {
"lclinks": "link[href=http://www.domain.com/path/CSstyles.css]+link[href=http://www.domain.com/path/CDstyle2.css]"
}
}
}
}
I have come across a tool called princexml that can convert html+css into pdf beautifully (see this video). With this it's even possible to write a PhD thesis using entirely html+css and get a nice pdf output in the end. But it seems it does not handle mathjax well. I guess this is because the mathjax part much be rendered in a browser first.
So I have a simple html file like this:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test math</title>
<style type="text/css">
</style>
<script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>
MathJax.Hub.Config({
HTML: ["input/TeX","output/HTML-CSS"],
TeX: { extensions: ["AMSmath.js","AMSsymbols.js"],
equationNumbers: { autoNumber: "AMS" } },
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true },
"HTML-CSS": { availableFonts: ["TeX"],
linebreaks: { automatic: true } }
});
</script>
</head>
<body>
$x^2 + y^2 = 1$
</body>
</html>
After conversion using princexml:
prince --javascript x.html -o x.pdf
the equation is rendered verbatim in the pdf.
Is there a way to make this work?
This is because princexml doesn't yet support setTimeout method which Mathjax uses for its asynchronous functions. There are two workarounds:
Render your html in the browser such as Chrome first. Get the entire document (not the source but actual rendered document) saved into html file and then use it as input to prince. You can get entire rendered document from browser javascript console.
Second method is to use a headless browser like phantomjs. See also
https://web.archive.org/web/20150503191319/http://www.lelesys.com/en/media/technology/phantomjs-as-screen-capture-to-generate-image-pdf-files.html
I am following this small tutorial:
http://docs.sencha.com/extjs/4.2.1/#/guide/application_architecture
I have used the exact same file structure, but when I add the controller section of the tutorial (to my app.js), where the code says:
`Ext.application({
...
controllers: [
'Users'
],
...
});
I get the error shown on the attached image. The system is looking for the controller folder the wrong place. Instead of looking for the file in the following path:
accountmanager/app/controller/Users.js
it looks in:
accountmanager/app/ext-4/app/controller/Users.js
So looking at the tutorial I'm following, the place that causes the trouble, is the section "Defining a controller"
I'm not sure what I have done wrong, I've starred myself blind for an hour now. Here is the index.html file:
<html>
<head>
<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
Note the slight difference in the html. Fx. I have only changed the js src reference, since the one in the tutorial causes a 404
Can anyone help out. I'd be grateful.
Thanks in advance
In case you wanna see the app.js code as well:
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
controllers: [
'Users'
],
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
Your app.'s and index.html files is located in the wrong place.
Put it in the root account manager directory
Wierd.
This is part of my manifest:
"permissions" : [
"http://site.com/"
,"http://site.com/*"
,"http://www.site.com/*"
,"http://www.site.com/"
]
,"web_accessible_resources": [
"css/tweaks.css"
]
,"content_scripts" : [{
"matches" : [
"http://*.site.com/",
"http://*.site.com/*",
"http://site.com/*",
"http://www.site.com/*"
],
"css" : [
"css/tweaks.css"
],
"js" : [
"js/jquery162.js",
"js/tweaks.js"
]
,"run_at": "document_end"
}]
Here's tweaks.css:
*{
color: red !important;
font-weight: bold;
}
And finally the background.html (which is not important here)
<html>
<head>
<title></title>
<script src="js/jquery162.js"></script>
<script src="js/js_extend/extend.js"></script>
<!--<script src="js/main.js"></script>-->
</head>
<body>
</body>
</html>
And, when i reload an extension (unpacked), then reload page, which must be customized by injected CSS, I see nothing. When I open developer console in google.chrome I can't see any custom styles applied to any element. After that I'm closing the console and SUDDENLY see all text gone red and bold, open the console and, guess what, see the "user stylesheet" with my injected rules.
I can't understand what's wrong. Before google had changed their manifest to version 2 i had one middle-sized extension with A LOT OF content CSS, which was working perfectly, now I can't inject even *{color:red} rule. Please, help me.
Chrome is 24.0.1312.14 beta-m
UPDATE: tweaks.js is empty
UPDATE: tested with 24.0.1312.14 m - same sh...
MORE UPDATE: Fixed it in some way. But i'm not fully confident about it.
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
var isSite = ( tab.url && tab.url.indexOf('site.com') >= 0);
if ( isSite ){
chrome.tabs.executeScript(tabId, {
file: Paths.add_element //filepath
});
chrome.tabs.insertCSS(tabId, {
file: Paths.my_css_path //filepath
});
}
});
The trick is that you need to do it after all site.com rules applied.
It's a known bug in Chrome: See http://crbug.com/154905 and http://crbug.com/158012