feat: Nowy layout (#196)

Zmiany wprowadzają odświeżony wygląd dla całego serwisu. Layout został
zaproponowany w issue #140. Większość styli napisanych w CSS Modules
zastała zastąpiona Tailwindem. W kilku miejscach logika z komponentów
została wydzielona do hooków. Zostały również wprowadzone kosmetyczne
zmiany w panelu administracyjnym.

BREAKING CHANGE: Nowy Layout

Resolves #140, #183, #111

---------

Co-authored-by: Grzegorz Pokorski <[email protected]>
Co-authored-by: Michał Miszczyszyn <[email protected]>

Author: 3 people

.eslintrc

@@ -19,6 +19,7 @@
     "react/jsx-curly-brace-presence": ["error", "never"],
     "jsx-a11y/anchor-is-valid": "off",
     "jsx-a11y/no-onchange": "off",
+    "jsx-a11y/no-redundant-roles": "off",
     "import/no-extraneous-dependencies": [
       "error",
       {

.gitattributes

@@ -42,11 +42,6 @@ test-results.xml
 key
 key.pub
 
-icomoon-v1.0/*
-!icomoon-v1.0/fonts
-!icomoon-v1.0/style.css
-!icomoon-v1.0/selection.json
-
 .vercel
 
 # Supabase

.gitignore

@@ -2,5 +2,6 @@
   "semi": true,
   "singleQuote": true,
   "trailingComma": "all",
-  "printWidth": 100
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

.prettierrc

@@ -3,18 +3,16 @@ import Boom from '@hapi/boom';
 import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs';
 import { object } from 'yup';
 
+import { logger } from './logger';
+import { openConnection } from './prisma/db';
+import { handlePrismaError, isPrismaError } from './prisma/prisma-helper';
+
 import type { Member, PrismaClient, UserRole } from '@prisma/client';
 import type { User } from '@supabase/auth-helpers-nextjs';
 import type { IncomingMessage } from 'http';
 import type { NextApiResponse, NextApiRequest } from 'next';
-
-import { logger } from './logger';
-
 import type { AnySchema, ObjectSchema, InferType } from 'yup';
 
-import { closeConnection, openConnection } from './prisma/db';
-import { handlePrismaError, isPrismaError } from './prisma/prisma-helper';
-
 type SomeSchema = Record<string, AnySchema<any, any, any>>;
 type AllAllowedFields = 'body' | 'query';
 
@@ -119,7 +117,7 @@ export const withDb =
       res: NextApiResponse,
     ) => Promise<unknown> | unknown,
   ) =>
-  async (req: R, res: NextApiResponse) => {
+  (req: R, res: NextApiResponse) => {
     try {
       const prisma = openConnection();
       return handler(unsafe__set(req, 'db', prisma), res);
@@ -129,8 +127,6 @@ export const withDb =
       } else {
         throw err;
       }
-    } finally {
-      await closeConnection();
     }
   };
 

api-helpers/api-hofs.ts

@@ -8,7 +8,7 @@ import {
 
 import { HTTPNotFound } from './errors';
 
-import type { Blog, PrismaClient } from '@prisma/client';
+import type { PrismaClient } from '@prisma/client';
 
 // https://res.cloudinary.com/polskifrontend/image/fetch
 
@@ -21,12 +21,24 @@ export const getArticlesForGrid = async (prisma: PrismaClient, page: number) =>
     orderBy: {
       lastArticlePublishedAt: 'desc',
     },
-    include: {
+    select: {
+      id: true,
+      name: true,
+      href: true,
+      favicon: true,
       articles: {
         take: TILES_ARTICLES_PER_BLOG,
         orderBy: {
           publishedAt: 'desc',
         },
+        select: {
+          id: true,
+          title: true,
+          description: true,
+          publishedAt: true,
+          href: true,
+          slug: true,
+        },
       },
     },
   });
@@ -69,8 +81,20 @@ export const getArticlesForList = async (prisma: PrismaClient, page: number) =>
     orderBy: {
       publishedAt: 'desc',
     },
-    include: {
-      blog: true,
+    select: {
+      id: true,
+      title: true,
+      description: true,
+      publishedAt: true,
+      href: true,
+      slug: true,
+      blog: {
+        select: {
+          name: true,
+          href: true,
+          favicon: true,
+        },
+      },
     },
   });
 
@@ -111,8 +135,19 @@ export const getArticleBySlug = async (prisma: PrismaClient, slug: string) => {
       slug,
       blog: { isPublic: true },
     },
-    include: {
-      blog: true,
+    select: {
+      id: true,
+      description: true,
+      title: true,
+      publishedAt: true,
+      href: true,
+      blog: {
+        select: {
+          href: true,
+          name: true,
+          favicon: true,
+        },
+      },
     },
   });
 
@@ -126,7 +161,7 @@ export const getArticleBySlug = async (prisma: PrismaClient, slug: string) => {
   };
 };
 
-const replaceFaviconWithCdn = <T extends Blog>(blog: T): T => {
+const replaceFaviconWithCdn = <T extends { readonly favicon: string | null }>(blog: T): T => {
   return {
     ...blog,
     favicon: blog.favicon ? imageUrlToCdn(blog.favicon) : blog.favicon,

api-helpers/articles.ts

@@ -8,8 +8,6 @@ import { EMPTY, firstValueFrom, from, of } from 'rxjs';
 import { catchError, map, mergeMap, groupBy, last, timeout, filter } from 'rxjs/operators';
 import Slugify from 'slugify';
 
-import type { Blog, Prisma, PrismaClient } from '@prisma/client';
-
 import {
   getBlogName,
   getFavicon,
@@ -20,6 +18,8 @@ import { getYouTubeChannelFavicon } from './external-services/youtube';
 import { logger } from './logger';
 import { streamToRx } from './rxjs-utils';
 
+import type { Blog, Prisma, PrismaClient } from '@prisma/client';
+
 const MAX_CONCURRENCY = 5;
 const MAX_FETCHING_TIME = Ms('6 s');
 

api-helpers/feedFunctions.ts

@@ -15,8 +15,18 @@ export async function getGeneralFeed(prisma: PrismaClient) {
     orderBy: {
       updatedAt: 'desc',
     },
-    include: {
-      blog: true,
+    select: {
+      title: true,
+      description: true,
+      href: true,
+      publishedAt: true,
+      updatedAt: true,
+      blog: {
+        select: {
+          name: true,
+          href: true,
+        },
+      },
     },
   });
 

api-helpers/general-feed.ts

@@ -3,10 +3,9 @@
 import { Observable } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
 
-import type { Subscription } from 'rxjs';
-
 import { logger } from './logger';
 
+import type { Subscription } from 'rxjs';
 import type { Duplex } from 'stream';
 
 export function streamToRx<S extends Duplex = Duplex, T = ReturnType<S['read']>>(

api-helpers/rxjs-utils.ts

@@ -1,25 +1,26 @@
 import { getLastArticlePage, getLastBlogPage } from '../../../../api-helpers/articles';
-import { closeConnection, openConnection } from '../../../../api-helpers/prisma/db';
+import { openConnection } from '../../../../api-helpers/prisma/db';
 import { BlogsGrid } from '../../../../components/BlogsGrid/BlogsGrid';
 import { BlogsList } from '../../../../components/BlogsList/BlogsList';
-import { MAX_PAGES, REVALIDATION_TIME } from '../../../../constants';
 import { getPagesArray } from '../../../../utils/array-utils';
 
 import type { DisplayStyle } from '../../../../types';
 
-type HomePageProps = {
+const MAX_PAGES = 5;
+
+export type HomePageProps = {
   readonly params: {
     readonly displayStyle: DisplayStyle;
     readonly page: string;
   };
 };
 
-export const revalidate = REVALIDATION_TIME;
+export const revalidate = 900; // 15 minutes
 
 export default function HomePage({ params }: HomePageProps) {
   const { displayStyle, page } = params;
 
-  if (displayStyle === 'grid') {
+  if (displayStyle !== 'list') {
     // @ts-expect-error Server Component
     return <BlogsGrid page={page} />;
   }
@@ -29,24 +30,20 @@ export default function HomePage({ params }: HomePageProps) {
 }
 
 export const generateStaticParams = async () => {
-  try {
-    const prisma = openConnection();
+  const prisma = openConnection();
 
-    const [gridLastPage, listLastPage] = await Promise.all([
-      await getLastBlogPage(prisma),
-      await getLastArticlePage(prisma),
-    ]);
+  const [gridLastPage, listLastPage] = await Promise.all([
+    await getLastBlogPage(prisma),
+    await getLastArticlePage(prisma),
+  ]);
 
-    const gridPages = getPagesArray(gridLastPage, MAX_PAGES);
-    const listPages = getPagesArray(listLastPage, MAX_PAGES);
+  const gridPages = getPagesArray(gridLastPage, MAX_PAGES);
+  const listPages = getPagesArray(listLastPage, MAX_PAGES);
 
-    const paths = [
-      ...gridPages.map((page) => ({ displayStyle: 'grid', page })),
-      ...listPages.map((page) => ({ displayStyle: 'list', page })),
-    ];
+  const paths = [
+    ...gridPages.map((page) => ({ displayStyle: 'grid' as const, page })),
+    ...listPages.map((page) => ({ displayStyle: 'list' as const, page })),
+  ] satisfies readonly HomePageProps['params'][];
 
-    return paths;
-  } finally {
-    await closeConnection();
-  }
+  return paths;
 };