Closed laurencefass closed 5 years ago
Hi, the above link appears to be giving a 502
error. Providing only a link to a production site doesn't help us reproduce without any code. Without any additional details the most likely cause for next/link
to not work is https://github.com/zeit/next-plugins/issues/282
Thanks here is the entire code for the navbar you can see on the page. All part from the "drupal" page load fine. Im not using or importing any css here only inline
import Link from 'next/link';
export const Links = () => (
<div className="nav-menu">
<h1 className="navbar-brand">Syntapse Next</h1>
<Link href="/">
<a><h2>Home</h2></a>
</Link>
<Link href="/ssr">
<a><h2>SSR</h2></a>
</Link>
<Link href="/content">
<a><h2>Content</h2></a>
</Link>
<Link href="/drupal">
<a><h2>Drupal API</h2></a>
</Link>
<Link href="/flex">
<a><h2>flex</h2></a>
</Link>
<style jsx>{`
.nav-menu {
display:flex;
background:black;
align-items: center;
justify-content: space-around;
width:100%;
border:10px solid gray;
}
.nav-menu * {
color:white;
text-decoration:none;
}
.navbar-brand {
color:yellow !important;
padding:10px;
border:2px solid yellow;
}
`}</style>
</div>
);
export default Links;
The above code doesn't appear to be causing the issue, can you provide a link to a repo with a minimal reproduction?
thank you. this is the entire source code for the "drupal page" that isnt loading correctly. other pages load as expected and are not an issue.
import Link from 'next/link';
import fetch from 'isomorphic-unfetch';
import { LayoutCard, RandomImage } from "../components/myComponents"
import styles from '../static/flex.css'
import renderHTML from 'react-render-html';
import { Page } from "../components/custom"
import Head from '../components/head'
export default function Drupal(props) {
var random= Math.floor(Math.random() * 1000);
return (
<div>
<style jsx>{`
h1 {
min-height:15vh;
background:rgba(0,0,0,0.9);
border-radius:5px;
color:white;
background-size:cover;
padding:20px;
font-size:calc(2em + 1vw);
}
h1, h2, p {
display:flex;
align-items: center;
justify-content: center;
}
`}</style>
<style jsx global>{`
.layout {
width:80%;
margin:0 auto;
}
`}</style>
<Page>
<Head
title="Syntapse Drupal API demonstration"
description="Page demonstrates loading data from Drupal JSONAPI and rendering with Javascript"
url="https://next.syntapse.co.uk/drupal"
/>
<p style={{"padding":"40px"}}>This menu is constructed dynamically from data received from the Drupal server. Click on a link to scroll to an article, but be sure not to miss the layout options on the way.</p>
<Menu {...props}></Menu>
<Intro></Intro>
<div className="layout">
<p></p>
<LayoutDemo {...props}></LayoutDemo>
<h1>This section here is separate articles linked by id to the page menu</h1>
<Articles {...props}></Articles>
</div>
</Page>
</div>
);
}
function Intro() {
var title = "Drupal and Next.js";
var description = "Drupal and Next.js work brilliantly together! This page is populated with content from a live Drupal site.";
return (
<div>
<LayoutCard
centerTitle={title}
centerBody={description}
/>
</div>
)
}
function Menu(props) {
console.log(`Menu component called. `);
return (
<>
<div className="menu">
<a href="#">Top</a>
{props.articles.slice(0,5).map(article => (
<a href={`#${article.id}`}>{article.title}</a>
))}
</div>
<style jsx global>{`
html {
letter-spacing: 0.3em;
scroll-behavior: smooth;
}
}
`}</style>
<style jsx>{`
.menu {
background:rgba(0, 0, 0, 1);
position:sticky;
top:0px;
padding:20px;
display:flex;
z-index:200;
border:10px solid gray;
}
a {
text-decoration:none;
color:white;
flex-grow: 1 1;
padding:0 5%;
}
`}</style>
</>
);
}
export function LayoutDemo(props) {
return (
<div>
<style jsx>{styles}</style>
<style jsx>{`
h1 {
min-height:15vh;
background:rgba(0,0,0,0.9);
border-radius:5px;
color:white;
padding:20px;
}
.iframe {
width:100%;
height:100vh;
}
`}</style>
<h1>A view of the actual Drupal collection is embedded below and can be found <a href="https://latest.syntapse.co.uk/articles" target="_blank">here</a></h1>
<iframe className="iframe" src="https://latest.syntapse.co.uk/articles"/>
<h1>Here is a single article laid out with text overlayed</h1>
<LayoutCard
centerTitle={props.articles[0].title}
centerBody={renderHTML(props.articles[0].body.value.slice(0,400))}
image={props.articles[0].image}
/>
<h1>Here is the second article displayed as overlay</h1>
<LayoutCard
centerTitle={props.articles[1].title}
centerBody={renderHTML(props.articles[1].body.value.slice(0,400))}
image={props.articles[1].image}
/>
<h1>Here is a combination of flexboxes demonstrating layout possibilities</h1>
<div className="flexbox column">
<Teasers {...props} items="1" columns="1"></Teasers>
<Teasers {...props} items="2" columns="2"></Teasers>
<Teasers {...props} items="12" columns="4"></Teasers>
</div>
</div>
);
}
export function Teasers(props) {
console.log(`Teaser component called. `);
var flex_basis = `${80 * 1/props.columns}%`;
var direction = props.direction;
return (
<div className="teaser-view">
{props.articles.slice(0, props.items).map(article => (
<div>
<h1>{article.title}</h1>
<img className="image" src={article.image ? article.image : "https://picsum.photos/id/1033/600/400"}/>
</div>
))}
<style jsx global>{`
`}</style>
<style jsx>{`
h1 {
background:black;
border-radius:5px;
color:white;
padding:3vw;
text-align:center;
height:1em;
display:flex;
align-items:center;
justify-content:center;
font-size:0.8em;
}
.teaser-view {
display:flex;
flex-wrap:wrap;
flex-direction:${direction};
}
.teaser-view * {
flex:1 1 ${flex_basis};
margin:10px;
}
img {
border-radius:5px;
width:100%;
height:30vh;
object-fit:cover;
}
`}</style>
</div>
);
}
Teasers.defaultProps = {
columns:4,
items:4,
direction:"row"
};
export function Articles(props) {
console.log(`Drupal component called. `);
return (
<div>
<div className="container">
{props.articles.map(article => (
<div className="article" id={article.id}>
<h1>{article.title}</h1>
<div className="content">
<img className="image" src={article.image ? article.image : "https://picsum.photos/id/1033/600/400"}/>
<p>{article.body ? renderHTML(article.body.value.slice(200)) : "Register with syntapse.co.uk to add details for this article"}</p>
</div>
</div>
))}
</div>
<style jsx global>{`
body {
background-repeat: no-repeat;
background-size: cover;
background-attachment:fixed;
}
`}</style>
<style jsx>{`
.container {
display:flex;
flex-direction:column;
background:rgba(0,64,128,0.8);
}
.article {
padding-top:50px;
margin-top:-50px;
}
.content {
display:flex;
flex-direction:column;
}
.content * {
flex: 1 1 10%;
}
h1 {
text-shadow: 2px 2px 5px black;
-webkit-text-stroke: 1px black;
width:100%;
text-align:center;
padding:40px 0px;
}
.content img {
box-sizing:border-box;
width:100%;
object-fit:cover;
max-height:60vh;
}
p {
font-size:calc(1em + 0.5vw);
color:black;
background:rgba(255,255,255,0.7);
word-wrap: break-word;
}
`} </style>
</div>
);
}
/* modify attributes to include image url and element id */
Drupal.getInitialProps = async function() {
// single entity: 8bf5b0ca-e8ce-48f0-a50c-043dab3f71a9
console.log("Drupal.getInitialProps called");
var res = await fetch("https://latest.syntapse.co.uk/jsonapi/node/article/?page[limit]=10&include=field_image&fields[node--article]=title,body,field_image&sort=-created", {
method: 'GET',
headers: {
'accept': 'application/vnd.api+json'
}
});
var data = await res.json();
console.log(`data length: ${data.length}`);
console.log(`data fetched=${data}`);
var images = data.data.map(function (element) {
if (element.relationships.field_image != null)
return element.relationships.field_image.data.id;
else
return null;
});
var included = data.included.map(element => element);
var articles = data.data.map(function (element) {
var id = element.relationships.field_image.data.id;
var url = id ? included.find(image => image.id === id).attributes.uri.url : '/no-image';
url = "https://latest.syntapse.co.uk" + url;
/* include image url and element id */
element.attributes.id = element.id;
element.attributes.image = url;
return element.attributes ;
});
return {
articles
};
};
It does look like this is a duplicate of https://github.com/zeit/next-plugins/issues/282 since you are importing a CSS
file in that page
I'm going to close this since it is a duplicate, please see our CSS RFC for details on how this is planned to be addressed
the page loads fine when i remove the inline styles. does anything look obviously wrong with this?
this entire section:
<style jsx>{`
h1 {
min-height:15vh;
background:rgba(0,0,0,0.9);
border-radius:5px;
color:white;
background-size:cover;
padding:20px;
font-size:calc(2em + 1vw);
}
h1, h2, p {
display:flex;
align-items: center;
justify-content: center;
}
`}</style>
<style jsx global>{`
.layout {
width:80%;
margin:0 auto;
}
`}</style>
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
Bug report
page performing component.getInitialProps fails to load from link.
Describe the bug
I have a menu consisting of links link to pages e.g.
The link to the only page containing component.getInitialProps doesnt load. details below
To Reproduce
url: https://next.syntapse.co.uk/drupal
Click any link other than drupal at the top to load a different page and then return to URL above the address bar changes but the page doesnt load.
Expected behavior
the other pages dont try to fetch data and load fine using so im assuming at this stage the fetch is the cause of the issue
Screenshots
https://next.syntapse.co.uk/drupal
If applicable, add screenshots to help explain your problem.
System information
chrome and firefox
Additional context
Add any other context about the problem here.