Updating Meta Tag in GatsbyJS - reactjs

I want to use Material-UI with Gatsby. On the usage page, it says I have to add the following responsive meta tag:
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
Now, if I take a look at the meta tags that Gatsby starts off with, they are almost the same:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
So basically,, the only difference is that material-ui wants me to add minimum-scale=1.
My question is how can I update or replacethe meta viewport tag to include this value. I tried using react-helmelt in my base layout as follows:
<Helmet>
<meta
name='viewport'
content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no'
/>
</Helmet>
But what that does is give me two meta viewport tags -- the one that Gatsby starts out with and the one that I added via Helmet:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no' />
What I want is just one meta viewport tag -- the one that includes minimum-scale=1.
Any ideas on how to do this?
Thanks.

If you really need the viewport meta changed you will need to override the default html template Gatsby uses. Just copy .cache/default-html.js to src/html.js and customize it to your liking.
As a side note, I really doubt there will be any problem using Gatsby's default viewport meta with Material-UI.

Related

How to define language in site generated by ReactJS? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 days ago.
This post was edited and submitted for review 2 days ago.
Improve this question
I need to make corrections to someone else's React Project. In particular I need to explicitly define the language of the site it generates.
I couldn't find anything defining attributes of <html> anywhere in project. :(
‎There is no index.html in ./public:
screenshot of project structure
Supposely <html> is generated some other way.
The <head> with all its contents is generated from the src/pages/_app.tsx file. Obviously it's most relative to the problem I could find:
return (
<>
<Head>
<meta charSet="UTF-8" />
<meta lang="ru" />
<meta httpEquiv="content-language" content="ru" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=5"
/>
<meta name="description" key="description" content={DESCRIPTION} />
<title>{TITLE}</title>
</Head>
<ThemeProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</ThemeProvider>
</>
);
But an attempt to put <html lang="ru"> right there had no success. As well as an attempt to place index.html with <html lang="ru"> in ./public.
(Seeing no other options, I've added relevant lang and http-equiv attributes in meta as you see in code above. But meanwhile I don't know if these changes have the desired effect. -- The bug I'm trying to fix, I can't reproduce by myself, and haven't got feedback from the user yet).
If you need to define the language of the site generated by a React project, you can add the lang attribute to the html tag in your public/index.html file. This file is typically located in the public folder of your React project.
Here's an example of what the html tag might look like with the lang attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
In the example above, the lang attribute is set to "en" for English. You can replace this value with the appropriate language code for your site.
Note that any changes you make to the public/index.html file will be reflected in your React project's build output, so be sure to rebuild your project after making any changes.

How to embed videos in Discord

I'm working on a clips system that serves short video files. I'm trying to have these video's embedded inside Discord so people can just send the link inside a Discord chat and you can watch the video in an embedded video player.
As far as I gathered, this should be possible by using OpenGraph and serving an MP4 video (unless I need my own video player?)
I am currently providing the following OpenGraph tags, and I'm wondering if I'm doing something wrong:
<meta property="og:site_name" content="Outplays">
<meta property="og:url" content="https://outplays.eu/Q5THkfY3">
<meta property="og:type" content="video.other">
<meta property="og:title" content="Mini rengar xD">
<meta property="og:image" content="https://outplays.eu/Q5THkfY3/thumbnail.png">
<meta property="og:video" content="https://outplays.eu/Q5THkfY3/video">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:secure_url" content="https://outplays.eu/Q5THkfY3/video">
<meta property="og:video:height" content="720">
<meta property="og:video:width" content="1280">
<meta property="og:image:height" content="720">
<meta property="og:image:width" content="1280">
(this is for the following clip: https://outplays.eu/Q5THkfY3)
But once sent in Discord, it comes out like this, without an inline video player:
At the same time I just found out through Sentry that when I send this link in Discord, I get an java.io.IOException: Connection reset by peer exception thrown.
I've spent hours trying to figure this out and googling about it but I can't really seem to find why it doesn't work.

Meta tags in React-Helmet are not being read while sharing links

Basically what I want to achieve is to have main blog post image displayed on the link thumbnail while sharing it on social media like twitter, facebook, etc.
The meta tags that I have in <Helmet> are being added to the website, but they are not properly or as I would expect being read while sharing the link. I assume that is because the values are not yet populated at this moment. But how to fix it? Or what is the correct approach to achive this goal?
Here is how I try to inject meta tags inside of my components:
<Helmet>
<meta property="og:type" content="website"/>
<meta property="og:url" content={`https://blackh3art.dev/blog/${slug}`}/>
<meta property="og:title" content={title}/>
<meta property="og:description" content={short} />
<meta property="og:image" content={formatedimage}/>
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:url" content={`https://blackh3art.dev/blog/${slug}`}/>
<meta property="twitter:title" content={title}/>
<meta property="twitter:description" content={short} />
<meta property="twitter:image" content={formatedimage}/>
</Helmet>
But anywhere I will try to inject meta tags inside of my components it's not working. The only meta tags that are working are these that I have staticly declared in my index.html, and image is read to every link from my website.
Right now application is working in this way:
App context is fetching all the blog posts from my API connected with Sanity
Every component has access to the context
My <BlogPostPage/> component is getting all the data from the context
Website is already deployed so you can see if you want:
main page: https://blackh3art.dev/
blog post: https://blackh3art.dev/blog/25-most-common-questions-asked-on-web3-interview-by-vikram

ReactJS, How to keep viewport initial-scale=1.0 when build in create react app

I am working on a ReactJS project (create-react-app) and in my public folder I have the HTML file which contains
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This one always change to
<meta name="viewport" content="width=device-width,initial-scale=1">
when I build it. But I need to keep initial-scale=1.0 not 1.
Do you have any solution for this?
Probably it is issue with html minification. This should be webpack setting in create-react-app.
In order to turn it off you can reject CRA or use https://github.com/timarney/react-app-rewired
Here you can find more details in this reply

React application not running due to Content Security Policy

I have a build a React application and deployed it on Heroku. When I try to load my home page "/" I get no errors and the page loads perfectly. But when I try to navigate to a different page "/RegistrationList" I get the Content Security Policy errors:
I have already searched for a solution online and found that I need to specify a Meta tag in the index.html file inside the public folder of my application. So now this file looks as follows:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
http-equiv="Content-Security-Policy"
content="default-src * 'self' 'unsafe-inline' 'unsafe-eval'"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<link
href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght#0,400;0,700;1,400&display=swap"
rel="stylesheet"
/>
...
But at this point I still keep on getting the errors. The strange thing is that the main page ("/") loads perfectly and the second page gives these errors.
Your current CSP within the index.html is useless under a security point of view (you are allowing everything, so this is equivalent as not defining a CSP).
CSP can be defined either in your front-end (index.html) and back-end, and when there is a mismatch, you find all kinds of errors. If you try to remove the CSP meta tag from your index.html and you still get the error, it means the problem is in the server side.
In case of Apache server, this is located in file 'htaccess'. As for Heroku, I don't know exactly where it is. Perhaps this can work:
https://stackoverflow.com/a/57288001/10802411

Resources