From 1b8be1e7a8804e771c498a82c5328e7b63587144 Mon Sep 17 00:00:00 2001 From: Sh Raj Date: Mon, 18 Mar 2024 03:15:06 +0000 Subject: [PATCH] articles in article --- next.config.mjs | 17 +++++- src/app/[...slug]/page.js | 110 ++++++++++++-------------------------- src/app/page.js | 9 +++- 3 files changed, 58 insertions(+), 78 deletions(-) diff --git a/next.config.mjs b/next.config.mjs index 4678774..ba7a1c6 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,4 +1,19 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + async headers() { + return [ + { + source: '/:path*', + headers: [ + { + key: 'X-Robots-Tag', + value: 'index, follow', + } + ], + }, + ] + }, + +}; export default nextConfig; diff --git a/src/app/[...slug]/page.js b/src/app/[...slug]/page.js index 035507c..8285e00 100644 --- a/src/app/[...slug]/page.js +++ b/src/app/[...slug]/page.js @@ -1,6 +1,7 @@ import Head from "next/head"; import Footer from "../components/Footer"; import Nav from "../components/Nav" +import Link from "next/link"; // import { metadata } from "../layout"; let metadata2 = { @@ -67,7 +68,12 @@ let metadata2 = { ], }; - + export function generateRandomNumber(min, max) { + // Math.random() generates a random number between 0 and 1 + // We multiply it by (max - min + 1) to include the max value, + // then add min to ensure the number falls within the desired range. + return Math.floor(Math.random() * (max - min + 1)) + min; + } @@ -90,6 +96,15 @@ export default async ({params}) => { metadata2.description = description; metadata2.description = description; + + const response = await fetch( + `https://dev.to/api/articles/latest/?per_page=11&page=${generateRandomNumber(1,1000)}` + ); + + const data2 = await response.json(); + let filteredArticles = await data2; + console.log(data) + @@ -105,80 +120,10 @@ export default async ({params}) => {
-
-

Table of contents

-
    -
  • Practices that contribute to unused CSS
    • -
  • Frameworks and libraries
    • -
  • Continuous changes
    • -
  • How to manually remove unused CSS
    • -
  • PurifyCSS
    • -
  • UnCSS
    • -
  • CleanCSS
    • -
  • Tabifier
    • -
  • PurgeCSS
    • -
  • Conclusion
    • -
  • LogRocket Galileo logo
    • -
  • Introducing Galileo AI
    • -
  • - LogRocket’s Galileo AI watches every session, surfacing impactful - user struggle and key behavior patterns. -
    • -
  • READ THEBLOG POST
    • -
-
-
- - Image -
- Sample POST 1 - Title of the post from BlogX -
- -
-
- - Image -
- Sample POST 2 - Title of the post from BlogX -
- -
-
- - Image -
- Sample POST 3 - Title of the post from BlogX -
- -
-
- - Image -
- Sample POST 4 - Title of the post from BlogX -
- -
-
- - Image -
- Sample POST 5 - Title of the post from BlogX -
- -
-
- - Image -
- Sample POST 6 - Title of the post from BlogX -
- -
+ {await filteredArticles.map((article) => ( + + ))} + @@ -188,4 +133,17 @@ export default async ({params}) => { ) } let metadata = metadata2; -export {metadata}; \ No newline at end of file +export {metadata}; + +function ArticleCard({ article }) { + return ( +
+ + Image +
{article.title}
+
+

{article.tag_list.join(", ")}

+ {" "} +
+ ); +} \ No newline at end of file diff --git a/src/app/page.js b/src/app/page.js index 703c973..e015f6c 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -4,6 +4,13 @@ import Link from "next/link"; import Nav from "./components/Nav"; import Footer from "./components/Footer"; +export function generateRandomNumber(min, max) { + // Math.random() generates a random number between 0 and 1 + // We multiply it by (max - min + 1) to include the max value, + // then add min to ensure the number falls within the desired range. + return Math.floor(Math.random() * (max - min + 1)) + min; +} + export default function ArticlesPage() { const [articles, setArticles] = useState([]); const [page, setPage] = useState(1); @@ -88,7 +95,7 @@ function ArticleCard({ article }) { return (
- Image + Image
{article.title}

{article.tag_list.join(", ")}