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.
Related
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
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
I was using the CDN release of office-js, but had to change to a local version. After this change, it seems Office.initialize is not being run, which means the add-in doesn't work correctly. On the console, I see the following error:
SCRIPT5022: MicrosoftAjax.js is not loaded successfully.
office.js (18,26767)
The only references to MicrosoftAjax.js that I can find are ASP.NET related, but my project is Typescript/React. Here's how office.js is being loaded in the html:
<!doctype html>
<html lang="en" data-framework="typescript">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>wincross-formatter</title>
</head>
<body class="ms-font-m">
<script src="/assets/office.js"></script>
<div id="container"></div>
</body>
</html>
How can I fix this error?
EDIT:
As per this page, I added the following line just above the office-js script:
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
Adding it after the office-js script gives me this error instead of the previous one, and Office.initialize still isn't being called:
SCRIPT5022: Neither the locale, en-us, provided by the host app nor the fallback locale en-us are supported.
FINAL EDIT: That was completely my fault. I didn't copy the contents of office-js/dist recursively.
I've generated angular(2) project and it generated the following index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FirstAngular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
As you can see no "script" tag to include any JS bundler. I know this project use webpack but I don't see any reference to it in the index.html file.
After running the project everything works fine. I'll love if someone could tell me how this "magic" happens.
Thanks!
This index.html just acts as a template for webpack. Once you do ng serve or ng build the actual index.html will be generated and saved. If you look into the page source code in the browser, you will see the script tags are there.
Let's say I load jQuery from a separate domain and host. Can this other host some how detect from which page it was requested from?
For example:
Can www.page-b.com somehow know that the link was requested from page www.page-a.com/subpage?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>this page is www.page-A.com/subpage</title>
<meta charset="utf-8">
</head>
<body>
<script src="http://page-B.com/js/jquery.min.js"></script>
</body>
</html>
You have to check the HTTP Referrer field of the request. How this is done depends highly on the used programming language.
The referer field contains the URL of provenience of the request, which is exactly what you need.
More information at https://en.wikipedia.org/wiki/HTTP_referrer