From 06036b531cc7ae834e7d59e1259883391e9f56cf Mon Sep 17 00:00:00 2001 From: Riccardo Date: Sun, 17 Dec 2023 11:30:52 +0100 Subject: [PATCH] style: flipping cards as background --- README.md | 6 ++ app/layout.tsx | 2 +- app/privacy/page.tsx | 2 +- .../custom/background/components/card.tsx | 10 +++- .../background/components/cardContent.tsx | 58 ++++++++++++++++++ .../custom/background/components/story.tsx | 59 ------------------- .../custom/background/components/tiles.tsx | 23 ++++++-- components/custom/card.tsx | 14 +++-- public/maintenance.html | 9 +-- 9 files changed, 105 insertions(+), 78 deletions(-) create mode 100644 components/custom/background/components/cardContent.tsx delete mode 100644 components/custom/background/components/story.tsx diff --git a/README.md b/README.md index 48a13b9..f57e907 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,11 @@ # Hackernews newsletter +## To do + +- Check breakpoint for background: on mobile there are white bars +- Email layout (must contain link to newsletter page) +- Ico file + ## Vercel basics Install vercel cli diff --git a/app/layout.tsx b/app/layout.tsx index db99d0b..76af9ff 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -6,7 +6,7 @@ import { cn } from '../utils/utils'; import './globals.css'; export const metadata: Metadata = { - title: 'Hacker News newsletter', + title: 'Hacker News newsletter by FromPixels', description: 'Newsletter delivering the best posts from Hacker News', keywords: 'newsletter, hackernews, technology, coding, programming, news' }; diff --git a/app/privacy/page.tsx b/app/privacy/page.tsx index 970fb08..f76da1e 100644 --- a/app/privacy/page.tsx +++ b/app/privacy/page.tsx @@ -434,7 +434,7 @@ export default function Privacy() { title='Privacy Policy' description='Last updated: December 03, 2023' content={body} - style='w-2/3 overflow-auto h-[90vh]' + style='w-2/3 h-[90vh]' /> ); } diff --git a/components/custom/background/components/card.tsx b/components/custom/background/components/card.tsx index 42e9de6..354e897 100644 --- a/components/custom/background/components/card.tsx +++ b/components/custom/background/components/card.tsx @@ -1,14 +1,16 @@ import { useEffect, useState } from 'react'; import { z } from 'zod'; import { NewsSchema } from '../../../../utils/types'; -import { Story } from './story'; +import { CardContent } from './cardContent'; type CardProps = { newsA?: z.infer; newsB?: z.infer; + width: number; + height: number; }; -export function Card({ newsA, newsB }: CardProps) { +export function Card({ newsA, newsB, width, height }: CardProps) { const [switched, setSwitched] = useState(false); const [active, setActive] = useState(Math.random() < 0.5); const [delayed, setDelayed] = useState(true); @@ -38,7 +40,9 @@ export function Card({ newsA, newsB }: CardProps) {
- {active ? Story(newsA, true) : Story(newsB, false)} + {active + ? CardContent({ story: newsA, width, height, side: true }) + : CardContent({ story: newsB, width, height, side: false })}
diff --git a/components/custom/background/components/cardContent.tsx b/components/custom/background/components/cardContent.tsx new file mode 100644 index 0000000..2a0f57b --- /dev/null +++ b/components/custom/background/components/cardContent.tsx @@ -0,0 +1,58 @@ +import { useState } from 'react'; +import { z } from 'zod'; +import { NewsSchema } from '../../../../utils/types'; + +type CardContentProps = { + story: z.infer; + side: boolean; + width: number; + height: number; +}; + +function getRandomColor() { + const letters = '456789ABCDEF'; + let color = '#'; + for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 12)]; + } + return color; +} + +export function CardContent({ story, width, height, side }: CardContentProps) { + const [firstColor, setFirstColor] = useState(getRandomColor()); + const [secondColor, setSecondColor] = useState(getRandomColor()); + const [switched, setSwitched] = useState(true); + + if (switched !== side) { + setFirstColor(getRandomColor()); + setSecondColor(getRandomColor()); + + setSwitched(side); + } + + const color = side ? firstColor : secondColor; + + return ( +
+

{story.title}

+

{story.by}

+
+
+ ); +} diff --git a/components/custom/background/components/story.tsx b/components/custom/background/components/story.tsx deleted file mode 100644 index 054f40e..0000000 --- a/components/custom/background/components/story.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { useState } from 'react'; -import { z } from 'zod'; -import { NewsSchema } from '../../../../utils/types'; - -export function Story(story: z.infer, side: boolean) { - const backgroundColors = [ - 'bg-red-300', - 'bg-blue-300', - 'bg-green-300', - 'bg-yellow-300', - 'bg-indigo-300', - 'bg-purple-300', - 'bg-pink-300', - 'bg-gray-300', - 'bg-teal-300', - 'bg-orange-300' - ]; - - const fadingColors = [ - 'to-red-300', - 'to-blue-300', - 'to-green-300', - 'to-yellow-300', - 'to-indigo-300', - 'to-purple-300', - 'to-pink-300', - 'to-gray-300', - 'to-teal-300', - 'to-orange-300' - ]; - - const firstRandom = Math.floor(Math.random() * backgroundColors?.length); - const secondRandom = Math.floor(Math.random() * backgroundColors?.length); - - const [firstColor, setFirstColor] = useState(firstRandom); - const [secondColor, setSecondColor] = useState(secondRandom); - const [switched, setSwitched] = useState(true); - - if (switched !== side) { - setFirstColor(firstRandom); - setSecondColor(secondRandom); - - setSwitched(side); - } - - const colorIndex = side ? firstColor : secondColor; - - return ( -
-

{story.title}

-

{story.by}

-
-
- ); -} diff --git a/components/custom/background/components/tiles.tsx b/components/custom/background/components/tiles.tsx index b31a4a0..eb0f6d8 100644 --- a/components/custom/background/components/tiles.tsx +++ b/components/custom/background/components/tiles.tsx @@ -21,6 +21,9 @@ export const Tiles = ({ children }: TilesProps) => { }); const [news, setNews] = useState[]>(); + const baseWidth = 40; + const baseHeight = 40; + useEffect(() => { async function getNews() { const news = await fetch('/api/news').then(res => res.json()); @@ -63,8 +66,20 @@ export const Tiles = ({ children }: TilesProps) => { ); return ( -
- +
+
); } @@ -78,8 +93,8 @@ export const Tiles = ({ children }: TilesProps) => { } function renderGrid() { - const columns = Math.ceil(windowSize.width / (40 * 4)); - const rows = Math.ceil(windowSize.height / (40 * 4)); + const columns = Math.ceil(windowSize.width / (baseWidth * 4)); + const rows = Math.ceil(windowSize.height / (baseHeight * 4)); return (
diff --git a/components/custom/card.tsx b/components/custom/card.tsx index 76ae130..33f72c4 100644 --- a/components/custom/card.tsx +++ b/components/custom/card.tsx @@ -5,7 +5,7 @@ import { CardDescription, CardFooter, CardHeader, - CardTitle, + CardTitle } from '../../components/ui/card'; import Footer from './footer'; @@ -22,17 +22,19 @@ export const CustomCard = ({ description, content, style, - footer = true, + footer = true }: CustomCardProps) => { return ( - - + + {title} {description} - {content} + {content} {footer && ( - +