Nuxt.js Prismic.io Integration Issue - javascript

Following this simple tutorial as an intro to Nuxt with a hosted headless CMS.
I got to the end, put my API key into the required file, but I get the error:
Cannot read property 'data' of undefined
at line 21, ie:
const header = PrismicDom.RichText.asText(blog_post.data.blog_post_title);
It's a basic scaffolded Nuxt.js project from scratch, so pretty clean, not much going on here.
No one in the comments seems to have encountered this issue. Any ideas?
(left most of default nuxt.js CSS and combined with the tutorial's, that really shouldn't be the issue though.)
<template>
<section class="blog-post">
<h1 class="title">{{ header }}</h1>
<p class="paragraph">{{ content }}</p>
</section>
</template>
<script>
import Prismic from "prismic-javascript";
import PrismicDom from "prismic-dom" //importing the Dom
import PrismicConfig from "./../prismic.config.js";
export default {
async asyncData() {
const api = await Prismic.getApi(PrismicConfig.apiEndpoint);
let blog_post = {};
const results = await api.query(
Prismic.Predicates.at("document.type", "blog_post"),
{ lang: "en-gb" } //This is a Prismic query option
);
blog_post = results.results[0];
const header = PrismicDom.RichText.asText(blog_post.data.blog_post_title);
const content = PrismicDom.RichText.asText(blog_post.data.blog_post_content);
return {
blog_post,
header,
content
};
}
};
</script>
<style>
.container {
margin: 0 auto;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.blog-post {
margin: 25px 0;
padding: 0 100px;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.title {
font-family:
'Quicksand',
'Source Sans Pro',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
sans-serif;
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
margin: 50px 0;
}
.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
p {
color: #000;
margin: 15px 0 5px;
max-width: 450px;
line-height: 1.44;
}
</style>

Related

How to remove underline from li elements using CSS

I am using NextJs framework for a frontend development I am new to frontend I am trying to create navbar in which I am getting underline below menu items. I tried few CSS property but they didn't work out.
Below is my code:
Navbar.js
import Link from 'next/link';
const Navbar = () => {
return(
<nav className='navigation'>
<div className="logo">
<h1>My logo</h1>
</div>
<div className="menu">
<ul>
<li className="menu-items"><Link href="/">Home</Link></li>
<li className="menu-items"><Link href="/about">About</Link></li>
<li className="menu-items"><Link href="/contact">Contact</Link></li>
</ul>
</div>
</nav>
);
}
export default Navbar;
global.css
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
.navigation {
display: flex;
justify-content: space-between;
}
.menu-items {
list-style-type: none;
display: inline;
margin-right: 20px;
background-color: coral;
color: white;
padding: 10px;
border-radius: 3px;
}
How can I achieve my desired results?
try using "Text Decoration".
.menu-items {
list-style-type: none;
display: inline;
margin-right: 20px;
background-color: coral;
color: white;
padding: 10px;
border-radius: 3px;
text-decoration: none; /* <=== add this */
}
if not work, try this.
.menu-items > a {
text-decoration: none;
}

I'm making a button using the state, but it doesn't work

I'm trying to make a button now. If I keep clicking the button using onClick function and state, I want to see the two buttons alternately. But it's applied at first, but the button isn't applied after second. Button's code is the same, but I don't know why it works only once. I'd appreciate it if you give an advice Thanks!!
import React, { useEffect, useState } from 'react'
import styled from 'styled-components';
const Body3LeftStart = styled.div`
flex-basis: 66.66666667% !important;
max-width: 66.66666667%;
box-sizing: border-box;
flex: 0 0 auto;
padding-left: 8px;
padding-right: 8px;
`
const Body3LeftSection = styled.div`
margin-bottom: 8px;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #000a12;
box-sizing: border-box;
font-family: Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,sans-serif;
#Body3Section1 {
display: flex;
align-items: flex-end;
margin-bottom: 8px;
}
`
const Body3LeftSection2 = styled.div`
display: flex;
margin-bottom: 20px;
align-items: flex-end;
#Body3LeftSection2Text {
font-weight: 400;
line-height: 1.47;
letter-spacing: -.3px;
font-size: 15px;
margin-right: 12px;
color: #495057;
word-break: keep-all;
}
#Body3LeftSection2Button {
border-color: #d5dbe2;
color: #495057;
background-color: #fff;
flex-shrink: 0;
margin-left: auto;
border: 1px solid;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
font-weight: 500;
cursor: pointer;
-webkit-appearance: none;
padding: 0 12px;
height: 40px;
line-height: 1.43;
font-size: 14px;
letter-spacing: -.3px;
}
`
function Body3Left() {
const [isCheckAll, setCheckAll] = useState(true)
function handleState (e) {
setCheckAll(isCheckAll===false)
}
function noHandleState (e) {
setCheckAll(isCheckAll===true)
}
return (
<Body3LeftStart>
<Body3LeftSection>
<Body3LeftSection2>
<span id='Body3LeftSection2Text'>
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
</span>
<button onClick={handleState} style={{display:isCheckAll===false?'none':'block'}} id='Body3LeftSection2Button'>
모두 접기
</button>
<button onClick={noHandleState} style={{display:isCheckAll===true?'none':'block'}} id='Body3LeftSection2Button'>
모두 펼치기
</button>
</Body3LeftSection2>
</Body3LeftSection>
</Body3LeftStart>
)
}
export default Body3Left;
you update state function in wrong way
you should update is as this way:
setCheckAll(pre => !pre)

Unwanted gap on absolute positioned content on top of relative positioned content

I'm playing around with Chris Coyiers brilliant approach to full page video with content scrolling over the video, but I'm getting an unwanted gap to the right in Windows browsers. The weird thing is that it's not happening in Mac browsers (currently testing in Safari, Firefox and Chrome). In Windows browsers this happens in all the browsers I'm testing with.
The css for the white main content area looks like this:
main {
background: white;
position: relative;
padding: 1rem;
margin-top: 100vh;
}
main::before {
content: "";
width: 100vw;
height: 100vh;
position: absolute;
left: 0;
top: -100vh;
}
Could it be scrollbar related? Has anyone found a solution to this or can explain to me why this happens in Windows?
Please see this Fiddle: https://jsfiddle.net/8y2v79nj/
Chris' article: https://css-tricks.com/full-page-background-video-styles/
Chris' example that I'm using: https://codepen.io/chriscoyier/pen/BRvdgK
Mac screenshot with no gap:
Windows screenshot with the unwanted gap:
The problem is from the reserved width for the y-scroller, and you only hide the x-scroller by overflow-x: hidden; on body.
You can add this to your styles that will help you to get rid of the reserved width of the scroller on body.
body::-webkit-scrollbar {
display: none;
}
Full code
var viewportHeader = document.querySelector(".viewport-header");
document.body.addEventListener("scroll", function(event) {
var opacity = (document.body.offsetHeight - document.body.scrollTop) / document.body.offsetHeight;
var scale = (document.body.offsetHeight - document.body.scrollTop) / document.body.offsetHeight;
document.documentElement.style.setProperty('--headerOpacity', opacity);
document.documentElement.style.setProperty('--headerScale', scale);
});
:root {
--headerOpacity: 1;
--headerScale: 1;
}
.video-header {
position: absolute;
text-align: center;
width: 100vw;
height: 100vh;
}
.video-header,
.video-header video,
.video-header .viewport-header {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
.video-header video {
background: brown;
object-fit: cover;
}
.video-header .viewport-header {
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
opacity: var(--headerOpacity);
transform: scale(var(--headerScale));
}
html,
body {
height: 100vh;
overflow-x: hidden;
}
body::-webkit-scrollbar {
display: none;
}
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 150%;
line-height: 1.4;
}
body {
margin: 0;
}
h1 {
font-family: "Syncopate", sans-serif;
color: white;
text-transform: uppercase;
letter-spacing: 3vw;
line-height: 1.2;
font-size: 3vw;
text-align: center;
}
h1 span {
display: block;
font-size: 10vw;
letter-spacing: -1.3vw;
}
main {
background: white;
position: relative;
padding: 1rem;
margin-top: 100vh;
}
main::before {
content: "";
width: 100vw;
height: 100vh;
position: absolute;
left: 0;
top: -100vh;
}
main p {
max-width: 600px;
margin: 1rem auto;
}
<header class="video-header">
<video src="https://css-tricks-post-videos.s3.us-east-1.amazonaws.com/Island%20-%204141.mp4" autoplay loop playsinline muted></video>
<div class="viewport-header">
<h1>
Explore
<span>Montana</span>
</h1>
</div>
</header>
<main>
<p>
test
</p>
<p>
test
</p>
<p>
test
</p>
<p>
test
</p>
<p>
test
</p>
<p>
test
</p>
</main>

Circular progress bar position

There is a circular progress bar. This bar prints the number of days remaining, taking the day difference. But I'm having trouble adjusting the position of this bar.
I am trying to do;
What I've been able to do so far;
html
<div className={'circularremainingtime__container only-desktop' + circularColor}>
<div className="remainingday">
<p>{endDate.getDate()}</p>
<p>{endDateMonth}</p>
</div>
<AS.CircularProgress
className="circularprogress"
style={style}
variant="determinate"
value={persentage}
thickness={3}
/>
<p>{circularText}</p>
</div>
css
.circularremainingtime__container.only-desktop {
width: 110px;
display: flex;
flex-direction: column;
align-items: center;
padding-left: 1.5em;
& > p {
margin: 0;
font-weight: 600;
margin-top: 0.5em;
font-size: 1.2rem;
font-weight: 500;
color: var(--palette-red-300);
}
& > div {
padding: var(--padding);
}
.circularprogress {
color: var(--palette-red-300);
}
.remainingday {
//position: absolute;
color: #004dcf !important;
padding-top: 5px;
p{
margin: 0;
text-align: center;
color: #004dcf !important;
font-size: 8px;
font-weight: bolder;
}
p:first-child{
font-size: 13px;
text-align: center;
}
}
}
When I set the remainingday class to absolute, I can get the image I want. But when I swipe the screen, the dates don't change at all. That's why I commented that line.
You need to use position: absolute; top:0px; for . circularprogress in your style because what you are doing is rendering the element next to the div, that's why it is showing below that.
Cheers.

CSS Data not changing according to value (Beginner)

Hey so right now I'm learning Mainly JS but that also comes with HTML and CSS so I guess that too. I followed a great tutorial from Web Dev Simplified on how to make a snake game (https://www.youtube.com/watch?v=QTcIXok9wNY&t=1781s). so now I wanted to expand my knowledge and start adding features to the game. So I wanted to add a Score feature. The only thing is that when I change the the text-align or the font-size bigger then it already is, nothing changes, is there anything externally locking this data?
Index.html:
<style>
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: black;
}
#game-board {
background-color: white;
width: 100vmin;
height: 100vmin;
display: grid;
grid-template-rows: repeat(21, 1fr);
grid-template-columns: repeat(21, 1fr);
}
.snake {
background-color: hsl(216, 100%, 50%);
border: .25vmin solid black;
}
.food {
background-color: hsl(0, 100%, 50%);
border: .25vmin solid black;
}
#score {
color: white;
font-family: 'Source Sans Pro', sans-serif;
font-size: 60;
text-align: center;
text-align: top;
}
Main JS File:
import { update as updateSnake, draw as drawSnake, SNAKE_SPEED, getSnakeHead, snakeIntersection, scorefunc} from './snake.js'
import { update as updateFood, draw as drawFood } from './food.js'
import { outsideGrid } from './grid.js'
let lastRenderTime = 0
let gameOver = false
const gameBoard = document.getElementById('game-board')
function main(currentTime) {
if (gameOver) {
if (confirm('You lost. Press ok to restart.')) {
window.location = '/'
}
return
}
window.requestAnimationFrame(main)
const secondsSinceLastRender = (currentTime - lastRenderTime) / 1000
if (secondsSinceLastRender < 1 / SNAKE_SPEED) return
lastRenderTime = currentTime
update()
draw()
}
window.requestAnimationFrame(main)
function update() {
updateSnake()
updateFood()
checkDeath()
scorefunc()
}
function draw() {
gameBoard.innerHTML = ''
drawSnake(gameBoard)
drawFood(gameBoard)
}
function checkDeath() {
gameOver = outsideGrid(getSnakeHead()) || snakeIntersection()
}
All other files will be on my GitHub: https://github.com/CarsCanadian/snake-tutorial/
You forgot to add your HTML. Your javascript is unnecessary to show. Anyway, by following your link, I could locate where things went wrong. You need to add a unit to your font-size.
Your code.
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: black;
}
#score {
color: white;
font-family: 'Source Sans Pro', sans-serif;
font-size: 60;
text-align: center;
text-align: top;
}
<body>
<div id="game-board"></div>
<em id="score">123123</em>
</body>
Corrected code, using font-size: 60px.
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: black;
}
#score {
color: white;
font-family: 'Source Sans Pro', sans-serif;
font-size: 60px;
text-align: center;
text-align: top;
}
<body>
<div id="game-board"></div>
<em id="score">123123</em>
</body>

Categories

Resources