This is not an issue involving getting Material Icons to display on web but rather an issue getting Material Icons & fonts to display on mobile web.
I have included the following in my pubspec.yaml file
uses-material-design: true
fonts:
- family: Roboto
fonts:
- asset: assets/fonts/Roboto-Medium.ttf
In addition, I have dropped the ttf files for both fonts in the project's assets/fonts folder. When I run this using chrome, it works fine! However, when running this on an iPad pro in either Safari or Chrome, I get Times New Roman font and strange emojis in place of where the Material Icons should be.
I have verified that my fontmanifest.json file includes:
{
"family": "Roboto",
"fonts": [
{
"asset": "assets/fonts/Roboto-Medium.ttf"
}
]
},
{
"family": "MaterialIcons",
"fonts": [
{
"asset": "assets/fonts/MaterialIcons-Regular.ttf"
}
]
}
I am stumped. What is going on here?
Related
I deployed my React App on AWS Amplify. The problem is it doesn't access the sources in Public folder(e.g. images, models). I heard I can add rules to Rewrite and Redirect on AWS Amplify, but I have no idea how to make the rule.
This is my folder layout:
The rules in AWS Amplify:
How do I make the rules? Could someone help me out?
Sorry, this is sort of a 'shotgun' answer, but I suspect one of these should move you forward.
This issue may have more to do with your build tools than Amplify.
In my vite spa, I put my favicon.svg, logo.svg in my /src directory. The only thing in my public dir is an image referenced in an email html - and for that it seems I hardcoded a fully qualified path.
I have an old CRA SPA, and I see things like this:
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
And you may need to expose files via manifest.json
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Rewrites/redirects probably aren't the reason images aren't working. But if everything appears to work as long as you nav from your homepage, but breaks if you reload or deep link - that's where the rewrite rules will help.
The doc is on this page. From the doc:
Redirects for single page web apps (SPA)
Most SPA frameworks support HTML5 history.pushState() to change
browser location without triggering a server request. This works for
users who begin their journey from the root (or /index.html), but
fails for users who navigate directly to any other page. Using regular
expressions, the following example sets up a 200 rewrite for all files
to index.html, except for the specific file extensions specified in
the regular expression.
Source address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>
Target address:
/index.html
Type:
200 (Rewrite)
I'm working on a React component library and I'm trying to figure out what would be the best way to make it configurable.
I'd want to achieve something similar to TailwindCSS, where you can run an npx script:
npx my-library init
which creates a configuration file in the project dir. The developer would then be able to change up that configuration, include design tokens for their brand, etc.
E.g.:
// config.js
module.exports = {
tokens: {
"Teal/800": {
"value": "#34a99a",
"type": "color"
},
"Cyan/400": {
"value": "#1f4e61",
"type": "color"
},
"Cyan/500": {
"value": "#246277",
"type": "color"
}
},
footerCompanyUrl: "https://example.com",
brandFontStack: ['Nunito Sans', 'Inter'],
openLinksInNewTab: true
}
Once the developer has decided on their configuration, they would run npm run build, which would run a script that rebuilds the components and/or their styles, taking into account the values defined in the configuration file.
How could I achieve something like this?
I am using Firebase for the first time and I deployed a react app I know to be working and have hosted on github pages. I followed the instructions provided by Firebase docs and deployed the app to their website. On loading the website I am greeted with a blank page.
the link: https://monsterpwa.web.app/
the firebase.json file:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
The previous posts on here are all bout the public sections being changed to build. Other then that I could not find anyone else with a similar question.
The console logs and error that there is an unexpected token '<' in line one column 1, but I also cannot see that.
The manifest file:
{
"short_name": "Monster App",
"name": "Monster App D&D Spells and Items",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "/public/media/800x800.png",
"type": "image/png",
"sizes": "800x800"
}
],
"start_url": "./index.html",
"display": "standalone",
"background_color": "#2d4059;",
"theme_color": "#2d4059",
"orientation": "portrait-primary"
}
build
Build
--> Media -- > *empty*
--> static -- > css / js --> each contains two files. main.7bf83f0f & the map version & main.3267ab84 and the map version.
asset-manifest.json
favicon.ico
index.html
manifest.json
service-worker.js
worker.js
Kind regards,
Snow
The issue is that you've configured your app to look for assets in a /MonsterPWA directory but that doesn't appear to exist.
For example, your index.html file has
<script type="text/javascript" src="/MonsterPWA/static/js/main.3267ab84.js"></script>
but the file is actually available at /static/js/main.3267ab84.js.
Your rewrite rule is catching all non-existent file requests and returning index.html, hence the warnings about <.
Check your homepage configuration in package.json and / or your PUBLIC_URL environment variable.
If you check the JavaScript console of your browser it shows there's a problem loading the CSS.
Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css".
Uncaught SyntaxError: Unexpected token '<'
From looking at the Network tab, we can see that it is loading this URL https://monsterpwa.web.app/MonsterPWA/static/css/main.7bf83f0f.css, but that is returning HTML (due to your rewrite rule).
Make sure that your CSS is generated to build/MonsterPWA/static/css/main.7bf83f0f.css, since that's where Firebase Hosting looks for it.
Edit: a quick check shows that the CSS actually exists at https://monsterpwa.web.app/static/css/main.7bf83f0f.css so at build/static/css/main.7bf83f0f.css.
Do the following:
run the command: npm run build
check firebase.json file to ensure it says "public":"build".. if not make the change
run the command: firebase deploy
Go grab a coffee!
I am following the Working with images in markdown posts and pages tutorial for gatsby and installed the following plugins
gatsby-image
gatsby-transformer-sharp
gatsby-plugin-sharp
My images are in the same directory as my Markdown files in src/content. But my posts are still without images. I suspect I have to change something in my src/templates/blog-post.js to show the images but am unsure of the next step. Can someone tell me what changes I need to make?
Github
In order to embed images in markdown you also need gatsby-remark-images. Run yarn add gatsby-remark-images or npm install --save gatsby-remark-images.
Add this to your gatsby-config.js:
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 590,
},
},
],
},
},
I added this to the production config:
babelQuery: {
plugins: [["import", { libraryName: "antd", style: true }]],
},
but I'm still getting errors like ReferenceError: Menu is not defined. Am I missing something? Everything works fine locally when I add the same to the dev config so I'm a little confused.
I'm currently having the exact same problem. So I'll add the extra info here.
I too the information from the following page to setup the ant-design kit:
https://ant.design/docs/react/use-with-create-react-app
The webpack.dev.babel contains the following babelQuery and is working fine:
babelQuery: {
presets: ['babel-preset-react-hmre'].map(require.resolve),
plugins: [['import', { libraryName: 'antd', style: true }]],
},
The development environment runs fine.
But, when adding the same plugins configuration to the webpack.prod.babel like this:
babelQuery: {
plugins: [['import', { libraryName: 'antd', style: true }]],
},
I'm getting the error like #userinev when loading the page after running the production build.
Uncaught ReferenceError: Menu is not defined
It's having issues with loading the first component that gets loaded from the antd library.
When removing the plugins configuration from the prod-config, the app is loading, but the styling is missing.
UPDATE:
The dot (.) in Menu.Item is the problem in the production-build.
The workaround is to create an 'alias', like
const Item = Menu.Item;
See: https://github.com/ant-design/ant-design/issues/5060#issuecomment-283339199
Alternatively, you can remove the boilerplate's including on package.json of the babel plugin that causes error:
Delete this:
"plugins": [
"transform-react-inline-elements"
]