I have a wordpress website, and I want to migrate it to Gatsby. I have found a lot of documentation and I now have a working site in Gatsby. But there is something I haven't been able to do: Import the meta tags generated by yoast into Gatsby.
I add yoast_head to the graphql query and I have access to the meta tags and the title in a string, but I don't know how to put it into the header of the page
I tried:
<Helmet dangerouslySetInnerHTML={{ __html: yoastHead }} />
But that did not work
If I do
<div dangerouslySetInnerHTML={{ __html: yoastHead }} />
I can render all the meta tags on the body of the page, but I want them to be added inside <head></head>
I found the way:
https://www.npmjs.com/package/react-html-parser
import ReactHtmlParser from 'react-html-parser'
...
<Helmet>
{ ReactHtmlParser(yoastHead) }
</Helmet
...
Related
I have a project made with React/Next.js.
This is the file directories.
What I am trying to do is have the user GET - /api/grademate/pay and return the success page.
Fetching /api/grademate/pay works without a problem.
The problem is, while testing, the success page does not load when I try to visit it manually.
This is what my index.js file looks like inside the success folder:
import Head from 'next/head'
import Image from 'next/image'
import styles from '../../../../styles/Home.module.css'
export default function Success() {
return (
<div className={styles.container}>
<Head>
<title>Payment Success</title>
<meta name="description" content="Your payment was successful!" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Payment Successful!
</h1>
</main>
</div>
)
}
When I try to visit /api/grademate/pay/success, nothing happens and the page just loads and this error is printed:
API resolved without sending a response for /api/grademate/success,
this may result in stalled requests.
Keep in mind I am new to the world of React and Next.js
In Next.js, the api folder is used for API routes only.
Your normal page components should not be inside the api folder, they should live under the pages folder directly.
For instance, your pages folder structure could look like the following.
pages/
api/
grademate/
pay.js
grademate/
pay/
success/
index.js
_app.js
index.js
Your Success page can then be accessed at /grademate/pay/success.
I have a website that I developed using HTML, CSS it's a static website, but now I created a blog project using NEXT.js Integrated with Strapi API. My question is how I can link my static website with my Next.js project?
I tried using Link tags but it didn't work
import Link from "next/link";
function Home({ posts }) {
return (
<>
<HomeHeader />
<Link href="./index.html">
<a>Static Page</a>
</Link>
<HomeLatestPosts Posts={posts} />
</>
);
}
Don't use the router or the "Link" component. Just use the standard html a tag with a href attribute.
I have been trying to add facebook feed to a gatsby website that I'm working on and it doesn't seem to work!
I've tried to add the scripts in gatsby-ssr.js
const React = require("react")
exports.onRenderBody = ({ setPostBodyComponents }) => {
setPostBodyComponents([
<div id="fb-root"></div>,
<script
async={true}
defer={true}
crossOrigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1"
></script>,
])
}
then in component
<div
className="fb-page"
data-href="https://www.facebook.com/TechnoBondCo/"
data-tabs="timeline"
data-width="400"
data-height="400"
data-small-header="true"
data-adapt-container-width="true"
data-hide-cover="true"
data-show-facepile="false"
>
<blockquote
cite="https://www.facebook.com/TechnoBondCo/"
class="fb-xfbml-parse-ignore"
>
<a href="https://www.facebook.com/TechnoBondCo/">
تكنوبوند - صناع الكلادينج Techno Bond
</a>
</blockquote>
</div>
but it didn't work, I also tried to use react-facebook but I cant seem to change the width or height of the iframe
any idea how to do this?
ERRORS USING REACT HELMET
I get this console error:
- warn "export 'default' (imported as 'Helmet') was not found in 'react-helmet'
and get this browser error:
You need to use <Helmet> tag, like this:
<Helmet>
<script async={true} defer={true} crossOrigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1" />
</Helmet>
You can check for further information about Gatsby's Helmet, and React Helmet, but basically, <Helmet> component allows you to insert a few code that will be placed after compilation inside the <head> tag.
You can use it in any component, for example, in IndexPage component it would be:
import { Helmet } from 'react-helmet';
const IndexPage = () => (
<Layout>
<SEO title="Live" />
<Helmet>
<script async={true} defer={true} crossOrigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=2186738638294469&autoLogAppEvents=1" />
</Helmet>
I've tested in my local machine it loads perfectly as it shows the following screenshot:
I'm still learning React.js. Recently I've built a site using React.js. I was trying to add a demo page (pure html and javascript) to the react site. The demo page consists of an index.html, a bundle.js and a css stylesheet. I created a demo folder at the root of the react site and put the demo files inside that folder. My question is how I can get access to the demo page by going to http://reactsite/demo/
Do I have to use react router and wrap the demo page into a react component?
Thanks in advance!
To render pure html in with react yes you would need to use react-router to render a component at that url and then use dangerouslySetInnerHTML to read the html file as real html and not escape characters in the file
your route would be something like this
<Route path="demo" component={TemplateHTMLComponent} />
then your component would be something like this
const htmlFile = require('../some/path/to/html/file');
class TemplateHTMLComponent extends React.Component {
render() {
return <div dangerouslySetInnerHTML={{ __html: htmlFile}};
}
}
I am making a static website and using Gulp to process all the files.
Static HTML
Firstly I had a bunch of static HTML files each with the content for the page. Example index.html:
<p>Home</p>
Then I had a layout.html file with HTML that is the same for each page. It looked like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="assets/styles.min.css">
</head>
<body>
<div id="contents">
<%= contents %>
</div>
<script src="assets/scripts.min.js"></script>
</body>
</html>
Then, in the gulpfile, I would process the pages using the gulp-wrap plugin like this:
gulp.task("html", () => {
return gulp.src(["html/**/*.html", "!html/layout.html"])
.pipe(wrap({ src: project.layout }))
.pipe(gulp.dest(project.build));
});
And this, as expected, created all the HTML files as required.
Using React
Now I want to use React. So in my main script that gets included into every page I wrote this:
import React from "react";
import { render } from "react-dom";
render((
<p>This would be some Page component...</p>
), document.body);
This, of course, replaces the body content of every page, so I turned to the react-router:
import React from "react";
import { render } from "react-dom";
import { Router, Route, browserHistory } from "react-router";
render((
<Router history={ browserHistory }>
</Router>
), document.body);
I guess this would work (after putting some routes into the router, of course), but what are the HTML files for?
Questions
How do I use the HTML files? Will I just leave them empty so that Gulp generates the same HTML file layout.html everywhere it's needed? (Or something equal to copy the file...) I need some files there so that routes like site.me/about work. This would leave everything up to the router.
Do I render a page-specific component in every page HTML file? This means having something like this in the index.html file:
<script>render(<Index />, document.body);</script>
Some other react-router wizardry?
How would you do this?
What I've done in this case is to have just one single HTML file that has the application in it. I then set this file up on the server to always be loaded irrespective of what the actual request path is.
Once that's done, reading the path on React Router and showing the correct components happens as usual. The key is that all routes load the same HTML page and the routing (deciding which component to show where and which props to load into it) happens inside React Router.