I recently deployed a website from Netlify using a demo GitHub repo that I copied. Although it seems pretty straightforward at first, I know too little about JS, HTML and CSS to continue. I'm only looking to host three pages that contain only text and hyperlinks, but I cannot for the life of me figure out how to implement more than one page with this particular code base I started with. Here's the index.js script:
import Head from 'next/head'
import Header from '#components/Header'
import Footer from '#components/Footer'
export default function Home() {
return (
<div className="container">
<div className="container-1">
<Head>
<title>Cool Page Title</title>
<link rel="icon" href="/coolicon.ico" />
</Head>
<div className="box-1">
<h3>Links</h3>
<p>
Current page <br />
Page 2 <br />
Another Page
</p>
</div>
<div className="box-2">
<h3>My cool page</h3>
<p>
Site under construction. <br />
For all inquiries, please call 555-5555
</p>
</div>
</div>
<div className="container-2">
<Footer />
</div>
</div>
)
}
The syntax is the really tricky part for me. The Home() function seems to return the html for the home page, so then how would I implement a second page and have the links change them out? Would a switch/case statement work here?
Okay, so I figured out what I didn't previously understand. Turns out I was (unknowingly) using Next.JS. To handle multiple pages, I just created separate files, identical to the index.js file, but with a different file and function name, and then linked to them using:
<Link href="/">Home</Link> <br />
<Link href="/newpage">New Page</Link> <br />
Where the first link directs you to the index page and the second takes you to the page titled "newpage." Guess it really was that simple.
Oh, and I also had to include this import statement at the beginning of each file that used links:
import Link from 'next/link';
Related
The link to that repository is here.
After creating the next.js environment using "npx create-next-app#latest ./" and running "npm run dev".
The very basic commands to run, This error pops up:-
`
../../../#React Projects/My projects/causs/styles/global.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: ..\..\..\#React Projects\My projects\causs\pages\_app.js
The code in _app.js is default that comes while creating next.js
import '../styles/global.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
the code in index.js is same, which comes as default:
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to Next.js!
</h1>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation →</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn →</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/canary/examples"
className={styles.card}
>
<h2>Examples →</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
className={styles.card}
>
<h2>Deploy →</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
}
`
Anything else you can see by going through the repository.
The next.config.js file is also default one.
`
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
}
module.exports = nextConfig
I have installed latest version of node - v18.12.1 and npm - 8.19.2 Please help, I've no idea what to do. except adding and removing
import '../styles/global.css'
` in pages/_app.js file.
In conclusion, a newbie with next.js who has only created two projects, tried "npx create-next-app#latest ./"
and then when I ran the environment it resulted with `
../../../#React Projects/My projects/causs/styles/global.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: ..\..\..\#React Projects\My projects\causs\pages\_app.js
`
I haven't made any changes at all, the code and files in the project was by default.
Note: I tried running my previous project too on my pc, which resulted in same error while it seems to do just fine where I've published.
As it turns out the problem was in parent directory name;
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
The cause of this error is peculiar, which I can't fathom. The parent directory as over here -
/#React Projects/My projects/causs/styles/global.css;
"React Projects" has a special character in it which caused the error to pop up once I removed it, the problem was over and my new and old projects are working just fine now.
I am learning react and following a series of challenges to do so. One such challenge has me create a React component that takes in properties. One of these properties is the name of a png file. I was not able to do this correctly but the correct line does not seem to be working.
This is an Ubuntu distro on WSL on a windows laptop.
I have done research on the topic the last few days and most response say to turn off adblocker (did not fix it), change file permissions (also did not work), turn off JS and CSS source maps (also did not work).
I noticed that a manually coded url to an image in the same folder was changed to
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgA…Cxd82/eqNyzDUJ0ohc8k/PbelTLtHJFgAAAAASUVORK5CYII=
My component is
import React from "react";
import star from "../images/star.png";
export default function Card(props) {
return (
<div className="card">
<div className="card--image">
<h3 className="card--availability">SOLD OUT</h3>
<img src={`../images/${props.img}`} alt="not working"></img>
</div>
<div className="card--rating">
<img src={star}></img>
<p className="card--dark-text">{props.rating}</p>
<p className="card--light-text">
({props.reviewCount}) · {props.country}
</p>
</div>
<p className="card--desc">{props.title}</p>
<div className="card--price">
<h5>From ${props.price}</h5>
</div>
</div>
);
}
Which is used in
import React from "react";
import Navbar from "./components/navbar";
import Hero from "./components/hero";
import Card from "./components/card";
export default function App() {
return (
//<Hero />
<div>
<Navbar />
<Card
img="zeferes.png"
rating="5.0"
reviewCount={6}
country="USA"
title="Playing on the beach with me."
price={136}
/>
</div>
);
}
My file directory looks like
And every other property works.
The displayed screen right now is:
What is going wrong?
Thank you for any help.
import for the image file(zeferes.png) is missing in Card component.
importing image file in Card component should fix the issue.
Hi i'm facing the problem with printing using vue component called vue-html2pdf
The problem as follows:
the pagination does not break the page when content added. on print page becomes 3
the first page is printing as blank on click of download
Here is the setting i'm using for printing:
<vue-html2pdf
:show-layout="false"
:float-layout="true"
:enable-download="true"
:preview-modal="true"
:paginate-elements-by-height="1400"
filename="nightprogrammerpdf"
:pdf-quality="2"
:manual-pagination="false"
pdf-format="a4"
:pdf-margin="10"
pdf-orientation="portrait"
pdf-content-width="800px"
#progress="onProgress($event)"
ref="html2Pdf"
>
Here is a demo: https://codesandbox.io/s/vue-html-to-pdf-example-forked-3lijbr?file=/src/App.vue:95-532
After playing around with your codesandbox, I found solution:
remove section, then the first blank page gone.
<!--
<section slot="pdf-content">
<ContentToPrint />
</section>
-->
<ContentToPrint slot="pdf-content" />
but pagination of the new pdf still looks strange, to fix that remove the in ContentToPrint, than the pdf looks perfect to me.
<template>
<div style="margin: 12px 12px">
<img src="https://picsum.photos/500/300" />
<!-- <div> -->
<p>
<strong
><a href="https://www.nightprogrammer.com/" target="_blank"
>Nightprogrammer.com</a
></strong
I guess the library can't accept too much div.
Here is my modified codesandbox. pdf looks better if you open standalone page (https://1puw7d.csb.app)
https://codesandbox.io/s/vue-html-to-pdf-example-forked-1puw7d?file=/src/App.vue
Just replace the section element by a div and should fix it for you.
This picture that I am trying to import will not show up on my webpage with. I am new to react and very frustrated with this I have read the facebook documentation but I am still lost. Help, please.
https://jsfiddle.net/gexcoz1k/
I am trying to log the file path to the console but it is saying it is undefined
import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import computer from './computer.png';
class Home extends Component {
render() {
return (
<div className="main-content home">
<div>
<img src={compter} title='computer' />
</div>
<small className="description"> </small><br/>
<small className="description"> Miami,FL </small>
<p className="about">Hello, and thank you for visiting my website. I have always been a computer guy I remember inspecting elements in middle school and changing some text and thinking I hacked the school website. To then creating my own website with basic HTML and CSS in high school. </p>
<br/>
<p className="about">From there I decided to go to college for Computer Science where I studied languages like C++ and learned how to think like a programmer. The ability to create things you think of into a real space fascinates me. I love solving problems and being creative so programming is perfect for me it seems as it has always been a part of my life. Currently, I am learning more frameworks next I plan to learn back-end and in a few years delv into machine learning.</p>
{/* Add Email Button */}
<a href="https://mail.google.com/mail/?view=cm&fs=1&to=tyriquedaniel14#gmail.com,tyrique1.daniel#gmail.com&su=Programming-Inquiry&body=BODY" target="_blank"rel="noopener noreferrer" className="email">
Email Me
</a>
<a href="https://drive.google.com/file/d/1o5Fxe49MugM1b2Z6IW2lN6s1gXqmvcTf/view?usp=sharingn" target="_blank" rel="noopener noreferrer" className="email">
Resume
</a>
<ul>
<li>LinkedIn</li>
<li>Github</li>
<li>SoloLearn</li>
<li>SoloLearn</li>
</ul>
<hr />
<h3>What i am currently Using </h3>
<Link to="/teachers" >HTML</Link>
<Link to="/teachers" >Javascript</Link>
<Link to="/teachers" >React </Link>
<Link to="/teachers" >CSS</Link>
<Link to="/teachers" >BootStrap</Link>
<Link to="/teachers" >Docker</Link>
<Link to="/teachers" >NPM</Link>
<Link to="/teachers" >Accessibility/Mobile Responsive</Link>
</div>
);
}
}
export default Home;
I would like this picture to show up
The import statement is only meant for modules.
Try require('./computer.png')
You are using wrong spelling, it must be comp(U)ter not compter
<img src={computer} title='computer' />
Small Suggestion: If you don't have state then use stateless method
I'm still new to web development (coming from desktop development) and my new boss already gave me a project.
I have to surround our company logo with images that link to other products of ours.
While I think I can surround the image with the logos, I want to add some text to the logos, to make it less confusing. I can imagine it to be quite... weird, for lack of a better word, if it's just a product's logo and nothing to tell the user what it is.
I have basic knowledge of PHP (I know how functions, constructors, classes, variables, etc. work, but have no real experience in it), but I don't know if this will help me in any way.
Here's an example of what I want to do (pseudo):
func onMouseOver(object m_obj)
m_obj.showCaption();
m_obj.border = new Border(Effects.Glow, Colors.Blue);
end
I have no better way of demonstrating it, so sorry if it seems somewhat confusing.
If you're a Firefox user, open a new tab and hover over one of those images, I'm trying to achieve something similar to that.
The code:
<head>
<title>NetWork Team Vorschau</title>
<link rel="stylesheet" type="text/css" href="index_style.css" >
</head>
<body>
<div class="container" >
<input class="sites_overview" type="image" src="http://www.sites-login.de/images/logo_sites.gif" value="Übersicht: Sites" /> <!-- I want this to show text when hovered over -->
<img class="nwt_img" src="http://www.nwt.de/images/networkteam.png" />
</div>
</body>
</html>
Cheers in advance for any and all helpful answers or pointers in the right direction!
Simply in CSS:
.one:hover::after {
content:"Text when hovered";
position:absolute;
left:0;
}
<div class="container">
<div class="one">
<input class="sites_overview" type="image" src="http://www.sites-login.de/images/logo_sites.gif" value="Übersicht: Sites" />
</div>
</div>
JDFiddle
EDIT: + one with glowing effect perhaps
JSFiddle
I think that you can put
<title>Your text</title>
inside <img> tag.
You need to use JavaScript method (onmouseover) or a jQuery method (.mouseover()). jQuery is the most used JavaScript Framework, check in the official page. JavaScript run in the client side, in the browser.
Regards