I am writing a Server Side Rendered app with Svelte/Sapper and I am having trouble using Font Awesome fonts.
I am using the following to load the font:
<script>
import Icon from "svelte-awesome";
import { faTimes } from "#fortawesome/free-solid-svg-icons/faTimes";
</script>
<Icon data={faTimes} />
The error I am seeing is:
" is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules"
Is there a solution to this?
I landed on this page looking for ways to import just the FontAwesome CSS into Svelte without any additional components or dependencies. Turns out that with Svelte this is just as simple as with plain HTML: Get the FontAwesome CSS (e.g. via package manager, CDN, or download) and add it to the HTML <head> section.
I like to install it via npm to maintain its version together with all other depencies:
npm install --save #fortawesome/fontawesome-free
After installing, just add the stylesheet (from the #fortawesome directory inside node_modules) to the <head> section of app.html.
<head>
...
<link href="./../node_modules/#fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
...
</head>
Use FontAwesome icons in your Svelte components, e.g. <i class="fa-regular fa-lightbulb">
For svelete-aweome, the import should look as follows in Sapper:
import Icon from 'svelte-awesome/components/Icon';
Related
Rationale
I'm making a small website using svelte and sveltekit, and a library (roslibjs) that seems to be only usable within <head>.
It worked only in those 2 types of scenarios for me:
put everything in <head> and output to the console
import the library in <head>, but only by using <script src='https link here'></script>.
Everything else goes into onMount, outside of <head>.
1 is not acceptable, and while 2 is a temporary fix, I really don't want to rely on external links. (the site might be used in an offline environment)
What I tried
Since if I have all the code relying on the library inside <head> it works just fine, I tried to do so. But so long I couldn't find a way to export variables from <head>.
Example:
<svelte:head>
<script>
let a = 10
</script>
</svelte:head>
<p>{a}</p>
This throws an error saying 'a' is not defined.
Change the import line to <script src="node_modules/roslib/build/roslib.js"></script>, directly from the node_modules folder.
While this works in npm run dev, it doesn't once after npm run build.
What I expect
To be able to use the library with svelte3, but by using it from npm, not an external link.
One way to tackle this might be to export variables from <head>, but I couldn't find a way to do so.
i'm building my first gatsby site and i've run into a few css issues during deployment.
first off, when i load the site, none of the css loads - but when i click on latest promotions/hktaxi (completed pages) and then epayment services (links back to index.js - same as homepage), the css loads. i initially thought this was a netlify issue, which is why i decided to deploy it to github pages too - but the page looks exactly the same on both platforms.
the page is responsive on web, but not on mobile. i've read solutions online that the meta tag for the viewport should be put in my html file - however, i don't have one. should i be creating a html.js file and inserting the meta tag there?
put the repo here for reproducibility: github.com/claudiahleung/gatsby-learnings
thanks!
There's a lack of implementation but a few cents and a bunch of plausible causes:
It seems, according to the described behavior that you have some hydration issues. At the initial render point, none of your styles are being loaded or applied but when you move back and forwards (where rehydration occurs) it loads. This issue normally appears when you block that hydration by pointing directly to the DOM instead of React's virtual DOM (vDOM), for instance, when asking for window or document outside React's scope (without hooks).
That said, this is an implementation issue, not a Netlify's or GitHub issue. This should (and must) happen when building your project locally, since, in the end, what Netlify's does is to build your project on their server and you should be able to reproduce it locally by gatsby build && gatsby serve. If locally things work as expected, you may start thinking in a Netlify issue (normally related with mismatching Node versions between environments).
In your case, I'm pretty sure that your issue comes because you are using styled-components but you haven't read the implementation details in Gatsby's docs because you are missing the required plugins and details in your gatsby-config.js such as:
module.exports = {
plugins: [`gatsby-plugin-styled-components`],
}
That's not true at all, you can customize the HTML output (because Gatsby allows you to do it) and manipulate it as you wish, adding the needed meta tags (which is not the solution to your issues). Simply run:
cp .cache/default-html.js src/html.js
Or manually copy the default-html.js from .cache folder to /src and rename it to html.js. If Gatsby, when compiling your project, finds that file under /src folder, will use it as a "template" for your compiled code. It will look like:
import React from "react"
import PropTypes from "prop-types"
export default function HTML(props) {
return (
<html {...props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{props.headComponents}
</head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: props.body }}
/>
{props.postBodyComponents}
</body>
</html>
)
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
}
Outside the scope of the question. I would recommend ignoring the .cache and the public folders by adding them in the .gitignore file. They are autogenerated in each project compilation and it may lead you to some Git conflicts (unless you are the only contributor) but it's a good practice to don't push it to avoid noise in the repository.
I am currently new to Tornado and I am trying to render my HTML page using Tornado. The issue i am having is getting Tornado to allow the css file to be applied on my html page. When i run the html alone without a web server the css file is automatically incorporated and applied. Using Tornado, the html content is fine, but the css simply refuses to apply.
I've tried using the full path of both my files through the href and tornado, also I've tried placing them outside of the .py script running tornado but i get the same errors
Python Tornado code
import tornado.web
import tornado.ioloop
port = 8080
class basicRequestHandler(tornado.web.RequestHandler):
def get(self):
self.write("Hello world!")
class staticRequestHandler(tornado.web.RequestHandler):
def get(self):
self.render("C:/Users/user/Desktop/html/Project 1/index.html")
if __name__ == "__main__":
app = tornado.web.Application([
(r"/", basicRequestHandler),
(r"/site", staticRequestHandler)
])
app.listen(port)
print(f"Listening on {port}")
tornado.ioloop.IOLoop.current().start()
This is the link inside my html code. I've tried full and relative paths(same folder) but none seem to make a difference
<link rel="stylesheet" href="C:\Users\user\Desktop\html\Project
1\styles.css" type="text/css">
<link rel="stylesheet" href="styles.css" type="text/css">
The error that appears on my chrome console is:
(1) Not allowed to load local resource:
file:///C:/Users/user/Desktop/html/Project%201/styles.css
C:\Users\user\Desktop\html\Project 1\styles.css is a file path on your system. This will not work because browsers and servers communicate through HTTP URLS.
To load the CSS file, you'll need to use its URL.
Try <link rel="stylesheet" href="/site/styles.css">. Please read the documentation of using StaticFileHandler to learn more about its usage.
I am not finding any docs for what to do next, I installed into my project via npm,
$ npm install --save #fortawesome/fontawesome-free-webfonts
But now what? Can anyone point me to how to actually import or use it now?
Thank you.
First install it using NPM :
npm install #fortawesome/fontawesome-free --save-dev
Now you have two ways, one way is to embed the absolute URL within your HEAD section or if you working with something like SASS(SCSS), You can import it in your custom.scss file like this :
1- first set an absolute path for webfonts (It has to be set before the fontawesome.scss) :
$fa-font-path: "node_modules/#fortawesome/fontawesome-free/WebFonts" !default;
2- Then import fontawesome.scss :
#import "node_modules/#fortawesome/fontawesome-free/scss/fontawesome";
3- Finally import regular, solid or light(pro version) of icon types :
#import "node_modules/#fortawesome/fontawesome-free/scss/regular";
After all you can assign font-family to these classes to work :
.fa,.fas,.far,.fal,.fab {
font-family: "Font Awesome 5 Free";
}
by Gulp
in a SCSS file
#import "../../../node_modules/#fortawesome/fontawesome-free/scss/fontawesome";
#import "../../../node_modules/#fortawesome/fontawesome-free/scss/brands";
#import "../../../node_modules/#fortawesome/fontawesome-free/scss/regular";
#import "../../../node_modules/#fortawesome/fontawesome-free/scss/solid";
#import "../../../node_modules/#fortawesome/fontawesome-free/scss/v4-shims";
in gulpfile.js
gulp.task('icons', function() {
return gulp.src('node_modules/#fortawesome/fontawesome-free/webfonts/*')
.pipe(gulp.dest(dist+'/assets/webfonts/'));
});
Something like this
// ------------ FONT-AWESOME --------------------//
$fa-font-path: $fonts_path + 'font-awesome';
#import
'../../node_modules/#fortawesome/fontawesome-free-webfonts/scss/fontawesome';
#import
'../../node_modules/#fortawesome/fontawesome-free-webfonts/scss/fa-brands';
#import
'../../node_modules/#fortawesome/fontawesome-free-webfonts/scss/fa-regular';
#import
'../../node_modules/#fortawesome/fontawesome-free-webfonts/scss/fa-solid';
To use an npm module on your front-end you'll need to be doing some sort of transpiling with webpack, gulp, or grunt most likely.
Then at the entry point of your application before you write html/jsx/some other html-esque code you'll need to require or import the css file from the font-awesome npm module.
// es6/babel import
import 'font-awesome/css/font-awesome.min.css';
// browserify require statement if not using babel/es6
require('font-awesome/css/font-awesome.min.css');
For example heres a react app I made with webpack/babel and on the entry point file I import the css file from font-awesome: https://github.com/AkyunaAkish/akyuna_akish/blob/master/client/index.js
FYI:
I used
npm install --save font-awesome
Instead of the command you used. You may need to adjust the import/require statement file path to point to the main css file in your font-awesome node_module package if we have slightly different packages.
I followed The Bower installation method to install the Polymer library as recommended on the Polymer Project website. Specifically, I ran these commands from the root of my project's live web folder. The OS is Amazon Linux:
bower init
bower install --save Polymer/polymer#^1.2.0
bower update
This generated the following files/folders:
/bower.json
/bower_components/*
/bower_components/polymer/*
/bower_components/webcomponentsjs/*
To test whether the libraries were successfully installed, I went ahead and grabbed one of the examples from the tutorial and tried it out. Only the first line of this code comes into question, but I'm including all of it to dispel concerns that the code here is at fault:
elements/proto-element.html
// THIS is the line that doesn't work. The file exists, it was
// installed in the correct location. However, the polymer.html file
// itself appears to be broken
<link rel="import" href="../bower_components/polymer/polymer.html">
// HOWEVER, if I change it to link the library in from the web, everything
// works perfectly. As in this example:
<!--<link rel="import" href="http://www.polymer-project.org/1.0/components/polymer/polymer.html">-->
<polymer-element name="proto-element">
<template>
<span>Hello World.</span>
</template>
<script>
Polymer({
ready: function() {
}
});
</script>
</polymer-element>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/proto-element.html">
</head>
<body>
<proto-element></proto-element>
</body>
</html>
I examined the polymer.html file in question. The file that bower installed is completely different from the one available on the web. I guess my question is - is the bower install of Polymer just broken? Why is Bower installing a version other than the active stable release? Am I missing something?
If you open the web version's code, it is clearly marked as version 0.5.5, even though it is being pulled from the /1.0/ pool.
The bower version has no version markers in the code so I'm not sure which one it is, though I have to assume it is the latest 1.2.x stable release because that was specified in the install command. I'll note that I did try it without specifying any version as well (supposed to just install the very latest then) but that still didn't work.
Conclusion
The libraries Bower installed were working files after all. The problem was that the examples I had pulled from the "Getting Started" tutorial on the Polymer-Project.org website were outdated. Be very careful to select v. 1.0 from the top right hand corner.
It's not going to work as you're using the old way of declaring elements (pre v0.8).
Here's how you declare new elements:
<dom-module id="my-element"> <!-- ID must be the same as that of the name of the element you declared. -->
<template> <!-- Styles used to be declared outside the template v0.8 to v1.0. At v1.1 it is now declared inside the template (the outside declaration still works, it's just slow and discouraged). -->
<style>
:host {
display: block;
}
</style>
<div>Hello {{name}}.</div>
</template>
</dom-module>
<script>
Polymer({
is: 'my-element', // you must declare the name of your element
properties: { // declare your element's properties here
name: {
type: String,
value: 'Neil'
}
}
});
</script>
Also, the official hub/CDN for the library is at http://polygit.org, not at the official website.