Skip to content

N
NextJs-Blog
Commit 290a1cd1 by Madhankumar
Options

single blog page title issue rsolved

parent 3fedfff8
Showing with 159 additions and 85 deletions
README.md
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
======styling for markdown file======
#-h1 ##-h2 ###-h3 ####-h4 #####-h5 ###### h6
[data](link)-data is wrapping in square bracket with link
**bold** or **bold**
\n\n is new line
--- three dash for horizontal line
_italic_ or _italic_
**_bold and italic _**
ordered list 1.space items
unordered list \_space items
> space blockquote
>
> > blockquote inside another blockquote
> > ![alt name](img path)
> > [![alt](imgpath)](url)--image with url
app/components/base/card/card.module.css
......@@ -9,7 +9,11 @@
.card {
background-color: var(--card-bg);
border-radius: 20px;
/* transition: transform 0.5s; */
}
/* .card:hover {
transform: scale(1.1);
} */
.cardbottom img {
border-radius: 50%;
max-width: 100%;
......
app/components/base/header/header.module.css
......@@ -21,3 +21,22 @@
text-decoration: none;
color: var(--title-color);
}
.mobilemenu {
display: block;
}
.themelight {
display: flex;
gap: 1rem;
}
.search {
display: none;
}
@media screen and (min-width: 991px) {
.mobilemenu {
display: none;
}
.search {
display: block;
}
}
app/components/base/header/page.js
......@@ -4,38 +4,42 @@ import Icon from "../icons/page";
import { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; // Correct
function Header({ onThemeChange }) {
function Header({ onThemeChange, onSearch, onClose }) {
const [theme, setTheme] = useState("light");
const handleTheme = () => {
theme == "light" ? setTheme("dark") : setTheme("light");
onThemeChange(theme);
};
const handleSearch = (value) => {
onSearch(value);
};
const handleClose = () => {
onClose("");
};
return (
<header className={styles.header}>
<div className={styles.container}>
<nav className={styles.navbar}>
<a className={styles["navbar-brand"]} href="/">
<FontAwesomeIcon
icon="fa-solid fa-newspaper"
{/* <FontAwesomeIcon
icon="fa fa-newspaper"
style={{ fontSize: "30px", color: "#5a67d8" }}
/>
/> */}
<Icon name="newspaper" />
<h2>NewsBlog</h2>
</a>
{/* <div className={styles["search-input"]}>
<span className={`${styles["search-icon"]} fa fa-search`}></span>
<input
className={styles.search}
type="text"
placeholder="Discover news, articles and more"
/>
</div> */}
<Search />
<span onClick={handleTheme} className={styles.themelight}>
<div className={styles.search}>
<Search onSearch={handleSearch} onClose={handleClose} />
</div>
<div onClick={handleTheme} className={styles.themelight}>
<Icon name={theme == "dark" ? "moon" : "sun"} />
<span className={styles.mobilemenu}>
<Icon name="hamburger" />
</span>
</div>
</nav>
</div>
</header>
......
app/components/base/icons/icons.module.css
.search svg,
.clock svg,
.close svg {
height: 20px;
width: 20px;
height: 18px;
width: 18px;
vertical-align: sub;
}
......@@ -10,5 +10,17 @@
.sun svg {
height: 35px;
width: 35px;
color: var(--font-color-900);
vertical-align: sub;
}
.hamburger svg {
background: #5a67d8;
color: white;
padding: 0.5rem 0.7rem;
border-radius: 5px;
}
.newspaper svg {
color: #5a67d8;
}
app/components/base/icons/page.js
......@@ -68,12 +68,43 @@ const Icons = ({ name }) => {
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
),
newspaper: (
<svg
xmlns="http://www.w3.org/2000/svg"
height="2em"
fill="currentColor"
viewBox="0 0 576 512"
stroke="currentColor"
>
<path d="M552 64H112c-20.858 0-38.643 13.377-45.248 32H24c-13.255 0-24 10.745-24 24v272c0 30.928 25.072 56 56 56h496c13.255 0 24-10.745 24-24V88c0-13.255-10.745-24-24-24zM48 392V144h16v248c0 4.411-3.589 8-8 8s-8-3.589-8-8zm480 8H111.422c.374-2.614.578-5.283.578-8V112h416v288zM172 280h136c6.627 0 12-5.373 12-12v-96c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v96c0 6.627 5.373 12 12 12zm28-80h80v40h-80v-40zm-40 140v-24c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H172c-6.627 0-12-5.373-12-12zm192 0v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-144v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0 72v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12z" />
</svg>
),
hamburger: (
<svg
xmlns="http://www.w3.org/2000/svg"
height="1.3em"
fill="currentColor"
viewBox="0 0 448 512"
stroke="currentColor"
>
<path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" />
</svg>
),
};
return <div className={`${styles[name]}`}>{icons[name]}</div>;
};
Icons.propTypes = {
name: PropTypes.oneOf(["sun", "moon", "close", "search", "clock"]),
name: PropTypes.oneOf([
"sun",
"moon",
"close",
"search",
"clock",
"hamburger",
"newspaper",
]),
};
export default Icons;
app/components/top-level/pagination/page.js
import React, { useState, useEffect } from "react";
import styles from "./pagination.module.css";
function Pagination({ totalPages, onCurrentPage }) {
function Pagination({ totalPages, currentPage, onPageChange }) {
//Set number of pages
const numberOfPages = [];
for (let i = 1; i <= totalPages; i++) {
numberOfPages.push(i);
......@@ -15,6 +14,7 @@ function Pagination({ totalPages, onCurrentPage }) {
// Array of buttons what we see on the page
const [arrOfCurrButtons, setArrOfCurrButtons] = useState([]);
useEffect(() => {
console.log("diyd", currentPage);
let tempNumberOfPages = [...arrOfCurrButtons];
let dotsInitial = "...";
......@@ -48,9 +48,16 @@ function Pagination({ totalPages, onCurrentPage }) {
setArrOfCurrButtons(tempNumberOfPages);
}, [totalPages, currentButton]);
//update currentButton value if currentPageNo changes
useEffect(() => {
setCurrentButton(currentPage);
}, [currentPage]);
//onClick function
const handleCurrentPage = (item) => {
setCurrentButton(item);
onCurrentPage(item);
onPageChange(item);
};
return (
......
app/components/top-level/single-blog/single-blog.module.css
......@@ -2,6 +2,7 @@
padding: 1rem;
border-radius: 15px;
margin-top: 2rem;
font-size: 18px;
background: var(--card-bg);
}
.blogimage {
......@@ -18,13 +19,16 @@
display: block;
}
blockquote p {
font-size: 20px;
}
.blog-list ul {
display: flex;
flex-wrap: wrap;
list-style: none;
line-height: 1em;
gap: 1em;
padding-inline: 1rem;
padding-inline: 0.1rem;
font-weight: 500;
color: var(--font-color-300);
}
......@@ -35,11 +39,15 @@
.blog-list ul li a:hover {
color: var(--font-color-700);
}
.blog-container {
/* .blog-container {
z-index: -1;
max-width: 1440px;
padding-inline: 0.5rem;
margin: 0 auto;
} */
.blog-container {
width: min(90%, 100% - 2rem);
margin: 0 auto;
}
.tag {
display: flex;
......@@ -67,11 +75,17 @@ blockquote p::before {
content: "\2014\00A0";
}
.head-container {
max-width: 1200px;
margin: 0 auto;
/* width: clamp(min(768px, 15rem), 1200px, 90%);
margin: 0 auto; */
/* width: clamp(min(768px, 15rem), 75rem, 90%);
margin: 0 auto; */
width: min(100% - 2rem, 90%);
margin-inline: auto;
}
.headtitle {
padding-inline: 1rem;
width: 100%;
/* padding-inline: 1rem; */
}
.title {
font-size: clamp(1rem, 1.3rem + 2.5vw, 3.4rem);
......@@ -90,16 +104,18 @@ h2 {
font-size: clamp(1rem, 1rem + 2vw, 2rem);
}
@media (min-width: 802px) {
.headtitle {
padding-inline: 3rem;
}
.blog-content {
padding: 3rem;
}
.blog-list ul {
padding-inline: 3rem;
}
.tag {
gap: 1rem;
}
}
@media screen and (min-width: 1440px) {
.headtitle,
.blog-list ul {
width: 70rem;
padding-inline: 6rem;
}
}
app/globals.css
......@@ -44,7 +44,9 @@ html {
h1,
h2,
h3,
h4 {
h4,
h5,
h6 {
font-family: "Libre Baskerville", serif;
}
......
stories/header.stories.js
......@@ -4,6 +4,8 @@ export default {
component: Header,
argTypes: {
onThemeChange: { actions: "onThemeChange" },
onSearch: { actions: "onSearch" },
onClose: { actions: "onClose" },
},
};
......
stories/icons.stories.js
......@@ -5,7 +5,15 @@ export default {
component: Icons,
argTypes: {},
};
const iconList = ["sun", "moon", "close", "search", "clock"];
const iconList = [
"close",
"search",
"clock",
"sun",
"moon",
"newspaper",
"hamburger",
];
export const icons = () => {
return (
<div className="icon-container">
......
stories/pagination.stories.js
......@@ -3,12 +3,13 @@ export default {
title: "Top-Level/Pagination",
component: Pagination,
argTypes: {
onCurrentPage: { actions: "onCurrentPage" },
onPageChange: { actions: "onPageChange" },
},
};
export const pagination = {
args: {
totalPages: 10,
currentPage: 1,
},
};
stories/single-blog.stories.js
......@@ -5,20 +5,7 @@ export default {
argTypes: {},
};
export const singleBlog = (args) => <SingleBlog {...args} />;
//styling for markdown file//
//#-h1 ##-h2 ###-h3 ####-h4 #####-h5 ###### h6
//[data](link)-data is wrapping in square bracket with link
//**bold** or __bold__
// \n\n is new line
// --- three dash for horizontal line
// *italic* or _italic_
//***bold and italic ***
//ordered list 1.space items
//unordered list _space items
// >space blockquote
// >> blockquote inside another blockquote
//![alt name](img path)
//[![alt](imgpath)](url)--image with url
singleBlog.args = {
subTitle: "Create an Art that shows the beauty in everyone ideas of flaws.",
postedOn: "July 11,2020",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment