score:2
Accepted answer
first of all, fix all the messy indentations, this will help to to see the structure better (in addition there are some wrong closed elements and unnecessary quotes):
import react from 'react';
import {
link,
graphql,
} from 'gatsby';
import image from 'gatsby-image';
import blockcontent from '@sanity/block-content-to-react';
import layout from '../components/layout';
import seo from '../components/seo';
const blogposttemplate = ({ data, location }) => {
const post = data.sanitypost;
const sitetitle = data.site.sitemetadata ? title || `title`;
const { previous, next } = data;
return <layout location={location} title={sitetitle}>
<seo title={post.title} description={post.title} />
<article classname="log-post" itemscope itemtype="ttp://schema.org/article">
<header>
<h1 itemprop='headline'>{post.title}</h1>
<p> {post.publisheddate}</p>
</header>
<div>
<blockcontent blocks={post._rawbody} projectid='9vps5pu' dataset='production' />
</div>
<div style={{ margin: '2rem 0' }}> {
post.postimage && <image fluid={post.postimage.asset.fluid} alt={post.title} />}
</div>
<hr />
</article>
<nav classname='blog-post-nav'>
<ul
style={{ display: `flex`, flexwrap: `wrap`, justifycontent: `space-between`, liststyle: `none`, padding: 0 }}>
<li> {previous && (<link to={`${previous.slug.current}`} rel='prev'> ←{previous.title} </link>)} </li>
<li> {next && (<link to={`/${next.slug.current}`} rel='next'> {next.title}→ </link>)} </li>
</ul>
</nav>
</layout>;
};
export default blogposttemplate;
export const pagequery = graphql`
query newspostbyslug(
$id: string!
$previouspostid: string
$nextpostid: string
) {
site {
sitemetadata {
title
}
}
sanitypost(_id: {eq: $id}) {
_id
title
publisheddate(formatstring: 'mmmm dd, yyyy')
_rawbody
postimage {
asset {
fluid {
...gatsbysanityimagefluid
}
}
}
}
previous: sanitypost(_id: {eq: $previouspostid}) {
slug {
current
}
title
}
next: sanitypost(_id: {eq: $nextpostid}) {
slug {
current
}
title
}
}
`;
if your wrappers (<layout>
, <article>
and <div>
parent of <blockcontent>
) has set a defined limited max-width
(or a width
), the child will never span horizontally unless they are absolute
positioned, which by default, it won't. a css rules like this should work:
.parent-wrapper {
max-width: 1000px;
width: 100%;
margin: 0 auto;
position: relative;
}
.children {
position: relative;
display: inherit; // or inline-block
}
in that case, the .children
will never span more than 1000px
.
Source: stackoverflow.com
Related Query
- Problem with rich text that I get from Sanity
- How to get the full text format from mongodb database that inserted with input from reactjs
- i have the problem in i18next that the text not show from json data
- get only that object from array of which which has the property true in react with typescript
- How to get data from an object with arrays/strings and then pass that data to a React component
- How to get id from document.elementFromPoint with same x coordinates in javascript? I want all div id's like that
- react-router-dom get id from route with custom components and extra path
- How to get data from JSON with Axios?
- Apollo useQuery hook doesn't get update from cache with writeQuery() method. No errors seen
- How to get the DOM node from a Class Component ref with the React.createRef() API
- How to get the selected text from text area in react?
- How to get values from react FieldArray in formik form with other fields?
- Get data from express with fetch
- React get props from Router with React Hooks
- How to implement a rich text editor such as Quill or Draft.js with Next.js?
- Get value of input text with react-bootstrap
- Get text content from node in React
- How to fetch data in getInitialProps with redux-saga.Then get the response from redux store while in the getInitialProps method?
- ES6/React "this" keyword with ajax to get data from server (tutorial)
- Can't get headers from Http POST request with Axios
- Expect toContain text from a set of values in jest,enzyme with React
- Unable to center the `Dialog/Modal` from `@headlessui/react` that uses React Portal with Tailwind CSS?
- react-geocode - get address from lat/lng with referrer restricted API?
- React get values from dynamically added inputs text fields
- Get code coverage from Cypress with babel, nyc and istanbul plugin?
- Problem when I try to get collection from Firestore
- How to call and use embedded assets from Contentful Rich Text fields using Gatsby?
- Get clicked ID from parent to child element with ReactJs
- Get text from textbox react js
- Problem with request from Subcollection in Firestore
More Query from same tag
- How to redirect React app to non-www HTTPS?
- Touch Events Broken with ReactJS Upgrade in Chrome Mobile Emulator
- How to sort UniqueValues in a filter dropdown in ascending order in React
- Map React JS : Displaying data with column
- queryFn must be return promise using react-query?
- Navigation arrows for Stock Tools
- Material Ui TextField remove bottom border
- onMouse event with nested React components
- Start React server container without Nginx
- Update array object by specific index
- React hooks: Can't update state inside function component
- Update multiple objects using the Javascript map() function
- How to import maps module dependencies for react-svg-map?
- React Multiple Fetch Requests
- I'm having trouble passing React props to image background
- How to know an asynchronous call has finished with redux-saga?
- Change input values bases on other input onChange
- How to setup multistage builds for a ReactJS App with server side rendering
- React JS - How to rerender Independed component?
- React: Add user inputted form data to current state
- MapStateToProps not being called after changing STATE in reducer
- React Navigation 5 route.params undefined even though I provide a prop
- Problem with redux middleware - Error: Actions must be plain objects. Use custom middleware for async actions
- React Redux Store setup: Error: Could not find "store"
- How to fix problem: TypeError: self.env.emit is not a function?
- How to deploy React on IIS?
- How to use axios in Effect Hook?
- How to delay data from useContext
- react modal image doesn't show large size image when being clicked
- Migrate a React class component to a Function component (React-google-maps)