From e1b9ff78699b5566b141cb5017f58af77a854a82 Mon Sep 17 00:00:00 2001 From: SahanHeshan Date: Mon, 3 Feb 2025 16:13:40 +0530 Subject: [PATCH 1/2] improved blog structure --- src/app/(pages)/blog/ArticleGroup.module.css | 171 ++++++------- src/app/(pages)/blog/ArticleGroup.tsx | 73 +++--- .../blog/[articleTitle]/AboutAuthor.tsx | 26 +- .../blog/[articleTitle]/BlockQuote.tsx | 2 +- .../blog/[articleTitle]/Explonotory.tsx | 10 +- .../(pages)/blog/[articleTitle]/Heading2.tsx | 2 +- .../(pages)/blog/[articleTitle]/Heading3.tsx | 2 +- .../(pages)/blog/[articleTitle]/OrderList.tsx | 2 +- .../(pages)/blog/[articleTitle]/Paragraph.tsx | 2 +- .../blog/[articleTitle]/page.module.css | 4 +- src/app/(pages)/blog/[articleTitle]/page.tsx | 207 +++++++++------- src/app/(pages)/blog/page.module.css | 110 ++++----- src/app/(pages)/blog/page.tsx | 22 +- src/content/blogs/Article1.ts | 179 ++++++++++++++ src/content/blogs/Article2.ts | 179 ++++++++++++++ src/content/blogs/index.tsx | 6 + src/content/blogs/words-as-vectors.mdx | 80 ------ src/data/ArticleData.ts | 229 ------------------ src/data/ArticleGroup.ts | 18 +- src/data/ArticleProps.ts | 50 ++++ 20 files changed, 748 insertions(+), 626 deletions(-) create mode 100644 src/content/blogs/Article1.ts create mode 100644 src/content/blogs/Article2.ts create mode 100644 src/content/blogs/index.tsx delete mode 100644 src/content/blogs/words-as-vectors.mdx delete mode 100644 src/data/ArticleData.ts create mode 100644 src/data/ArticleProps.ts diff --git a/src/app/(pages)/blog/ArticleGroup.module.css b/src/app/(pages)/blog/ArticleGroup.module.css index 97040e6..a6e354f 100644 --- a/src/app/(pages)/blog/ArticleGroup.module.css +++ b/src/app/(pages)/blog/ArticleGroup.module.css @@ -1,128 +1,95 @@ -.group { - border-radius: 0.5rem; - border: light-dark(1px, 0) solid; - box-shadow: light-dark(0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), none); - border-color: light-dark( - var(--mantine-color-gray-3), - var(--mantine-color-gray-7) - ); - background-color: light-dark( - var(--mantine-color-gray-1), - var(--mantine-color-gray-8) - ); -} - .link { - position: relative; - display: block; - overflow: hidden; - border-radius: 0.5rem; - border: 1px solid var(--mantine-color-gray-1); - padding: 1rem; - text-decoration: none; - - @media (min-width: $mantine-breakpoint-sm) { - padding: 1.5rem; - } - - @media (min-width: $mantine-breakpoint-lg) { - padding: 2rem; - } -} - -.span { - position: absolute; - left: 0; - right: 0; - bottom: 0; - height: 0.5rem; - background-image: linear-gradient( - to right, - var(--mantine-color-green-3), - var(--mantine-color-blue-5), - var(--mantine-color-grape-6) - ); -} - -.header { - @media (min-width: $mantine-breakpoint-sm) { - display: flex; - justify-content: space-between; - gap: 0.5rem; - } + overflow: hidden; + text-decoration: none; } .title { - margin: 0; - font-size: 0.5rem; - font-weight: 900; - line-height: 1.75rem; - color: light-dark( - var(--mantine-color-gray-9), - var(--mantine-color-white) - ); - - @media (min-width: $mantine-breakpoint-sm) { - font-size: 1.125rem; - line-height: 2rem; - } -} - -.author { - margin-top: 0.25rem; - font-size: 0.75rem; - font-weight: 600; - line-height: 1rem; - color: light-dark( - var(--mantine-color-gray-7), - var(--mantine-color-gray-3) - ); + margin: 0; + font-size: 24px; + font-weight: 600; + line-height: 1.75rem; + color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-white)); + + @media (min-width: $mantine-breakpoint-sm) { + font-size: 24px; + line-height: 2rem; + } } .hidden { - display: none; + display: none; } @media (min-width: $mantine-breakpoint-sm) { - .hidden { - display: block; - flex-shrink: 0; - } + .hidden { + display: block; + flex-shrink: 0; + } } .image { - width: 4rem; - max-height: 100%; - border-radius: 0.5rem; - object-fit: cover; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + border-radius: var(--mantine-radius-xl); + object-fit: cover; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .publish { - margin-top: 1.5rem; - display: flex; - gap: 1rem; + margin-top: 1.5rem; + display: flex; + gap: 1rem; - @media (min-width: $mantine-breakpoint-sm) { - gap: 1.5rem; - } + @media (min-width: $mantine-breakpoint-sm) { + gap: 1.5rem; + } } .reverse { - display: flex; - flex-direction: column-reverse; + display: flex; + flex-direction: column-reverse; } .event { - font-size: 0.875rem; - line-height: 1.125rem; - font-weight: 600; - color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-3)); + font-size: 0.875rem; + line-height: 1.125rem; + font-weight: 600; + color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-3)); } .held { - margin: 0; - font-size: 0.75rem; - line-height: 1rem; - color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-gray-4)); -} \ No newline at end of file + margin: 0; + font-size: 0.75rem; + line-height: 1rem; + color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-gray-4)); +} + +.card { + position: relative; + cursor: pointer; + overflow: hidden; + transition: transform 150ms ease, box-shadow 100ms ease; + padding: var(--mantine-spacing-xl); + padding-left: calc(var(--mantine-spacing-xl) * 2); + + @media (max-width: $mantine-breakpoint-sm) { + padding-left: calc(var(--mantine-spacing-xl)); + } + + @mixin hover { + box-shadow: var(--mantine-shadow-md); + transform: scale(1.02); + } + + &::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 6px; + background-image: linear-gradient( + 0, + var(--mantine-color-violet-5), + var(--mantine-color-teal-5) + ); + } +} diff --git a/src/app/(pages)/blog/ArticleGroup.tsx b/src/app/(pages)/blog/ArticleGroup.tsx index a7b7529..9b38df5 100644 --- a/src/app/(pages)/blog/ArticleGroup.tsx +++ b/src/app/(pages)/blog/ArticleGroup.tsx @@ -1,8 +1,11 @@ import Link from "next/link"; import Image from "next/image"; import React from "react"; +import { Box, Group, Card, Badge } from "@mantine/core"; import { ArticleGroupProps } from "@/data/ArticleGroup"; import classes from "./ArticleGroup.module.css"; +import { IconColorSwatch } from "@tabler/icons-react"; +import { Paper, Text, ThemeIcon } from "@mantine/core"; function titleCase(str: String) { return str @@ -13,7 +16,12 @@ function titleCase(str: String) { } function timeAgo(date: Date): String { - const now: Date = new Date(2025, 5, 5); + const today = new Date(); + const formattedDate = `${today.getFullYear()}, ${String( + today.getMonth() + 1 + ).padStart(2, "0")}, ${String(today.getDate()).padStart(2, "0")}`; + + const now: Date = new Date(formattedDate); const currentYear: number = now.getFullYear(); const dateYear: number = date.getFullYear(); @@ -24,7 +32,7 @@ function timeAgo(date: Date): String { if (yearDiff === 1) return "a year ago"; if (yearDiff > 1) return `${yearDiff} years ago`; - const monthDiff: number = currentMonth - dateMonth - 1; + const monthDiff: number = currentMonth - dateMonth; if (monthDiff === 1) return "a month ago"; if (monthDiff === 0) return "this month"; return `${monthDiff} months ago`; @@ -43,35 +51,36 @@ export function ArticleGroup({ url, }: ArticleGroupProps) { return ( -
- - -
-
-

{article}

-

By {titleCase(author)}

-
-
- {titleCase(author.toString())} -
-
-
-
-
Published
-
- -
-
-
- -
+ + + + + {" "} + + + + + + {article} + + {/* + Form context management, Switch, Grid and Indicator components + improvements, new hook and 10+ other changes + */} + + + {titleCase(author.toString())}{" "} +
By {titleCase(author)}
+ + + ); } diff --git a/src/app/(pages)/blog/[articleTitle]/AboutAuthor.tsx b/src/app/(pages)/blog/[articleTitle]/AboutAuthor.tsx index db83fb3..548bf08 100644 --- a/src/app/(pages)/blog/[articleTitle]/AboutAuthor.tsx +++ b/src/app/(pages)/blog/[articleTitle]/AboutAuthor.tsx @@ -1,4 +1,4 @@ -import { About } from "@/data/ArticleData"; +import { About } from "@/data/ArticleProps"; import classes from "./styles.module.css"; import Image from "next/image"; import Link from "next/link"; @@ -19,17 +19,19 @@ export function AboutAuthor({ author, profile, description, links }: About) {