Merge pull request #24 from hackerspace-ntnu/22-feat-create-individua…

…l-news-article-pages

22 feat create individual news article pages

.dockerignore

@@ -23,9 +23,6 @@ next-env.d.ts
 public/sitemap.xml
 public/robots.txt
 
-# prettier
-prettier.config.js
-
 # docker
 Dockerfile*
 .dockerignore

.eslintrc.cjs

@@ -9,10 +9,9 @@ const config = {
     'next/core-web-vitals',
     'plugin:@typescript-eslint/recommended-type-checked',
     'plugin:@typescript-eslint/stylistic-type-checked',
+    'plugin:prettier/recommended',
   ],
   rules: {
-    // These opinionated rules are enabled in stylistic-type-checked above.
-    // Feel free to reconfigure them to your own preference.
     '@typescript-eslint/array-type': 'off',
     '@typescript-eslint/consistent-type-definitions': 'off',
 

.github/workflows/lint-and-format.yml → .github/workflows/lint.yml

@@ -1,8 +1,8 @@
-name: Lint and Format
+name: Lint
 
 on: push
 jobs:
-  lint-and-format:
+  lint:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -11,4 +11,3 @@ jobs:
           bun-version: 1.0.24
       - run: bun install
       - run: bun lint
-      - run: bun format

.gitignore

@@ -1,5 +1,3 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
 # dependencies
 /node_modules
 

.vscode/extensions.json

@@ -1,6 +1,6 @@
 {
   "recommendations": [
-    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
     "bradlc.vscode-tailwindcss",
     "lokalise.i18n-ally",
     "vivaxy.vscode-conventional-commits",

.vscode/settings.json

@@ -7,6 +7,5 @@
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
   ],
   "i18n-ally.localesPaths": ["messages"],
-  "i18n-ally.keystyle": "nested",
-  "codeQL.githubDatabase.download": "never"
+  "i18n-ally.keystyle": "nested"
 }

Dockerfile

@@ -1,10 +1,10 @@
-FROM imbios/bun-node:20-alpine
+FROM imbios/bun-node:20-slim
 
 WORKDIR /app
 
 COPY package.json bun.lockb ./
 
-RUN bun install --frozen-lockfile --production
+RUN bun install --production
 
 COPY . .
 

README.md

@@ -63,26 +63,12 @@ Then to serve the build locally, run:
 bun run start
 ```
 
-## Check linting, formatting and types
+## Check linting and formatting
 
-To check linting, formatting or types you run the respective command:
-
-Linting:
-
-```bash
-bun run lint
-```
-
-Formatting:
-
-```bash
-bun run format
-```
-
-Types:
+To check linting and formatting you run the respective command:
 
 ```bash
-bun run type
+bun lint
 ```
 
 If you are using vscode and are experiencing issues with types, you can restart the typescript server by pressing `cmd + shift + p` and then type `TypeScript: Restart TS Server` (You need to have a typescript file open for this to work).

messages/en.json

@@ -8,7 +8,8 @@
     "goToPreviousPage": "Go to previous page",
     "next": "Next",
     "goToNextPage": "Go to next page",
-    "morePages": "More pages"
+    "morePages": "More pages",
+    "page": "page"
   },
   "layout": {
     "hackerspaceHome": "Hackerspace homepage",
@@ -42,8 +43,9 @@
   },
   "news": {
     "title": "News",
-    "page": "Page",
     "internalArticle": "This is an internal article",
-    "newArticle": "New article"
+    "newArticle": "New article",
+    "readTime": "{count, plural, =0 {less than a minute} one {# minute} other {# minutes}} read",
+    "views": "Views"
   }
 }

messages/no.json

@@ -8,7 +8,8 @@
     "goToPreviousPage": "Gå til forrige side",
     "next": "Neste",
     "goToNextPage": "Gå til neste side",
-    "morePages": "Flere sider"
+    "morePages": "Flere sider",
+    "page": "side"
   },
   "layout": {
     "hackerspaceHome": "Hackerspace hjemmeside",
@@ -42,8 +43,9 @@
   },
   "news": {
     "title": "Nyheter",
-    "page": "Side",
     "internalArticle": "Dette er en intern artikkel",
-    "newArticle": "Ny artikkel"
+    "newArticle": "Ny artikkel",
+    "readTime": "{count, plural, =0 {mindre enn ett minutt} one {# minutt} other {# minutter}} read",
+    "views": "Visninger"
   }
 }

package.json

@@ -9,17 +9,15 @@
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
-    "format": "prettier --check '**/*.{js,cjs,ts,tsx}'",
-    "type": "tsc --noEmit",
     "start": "next start"
   },
   "lint-staged": {
     "*.{js,cjs,ts,tsx}": [
-      "eslint --fix",
-      "prettier --write"
+      "eslint --fix"
     ]
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-separator": "^1.0.3",
@@ -30,6 +28,7 @@
     "clsx": "^2.1.0",
     "country-flag-icons": "^1.5.9",
     "cva": "^1.0.0-beta.1",
+    "husky": "^9.0.10",
     "lucide-react": "^0.312.0",
     "next": "^14.0.4",
     "next-intl": "^3.4.4",
@@ -38,9 +37,9 @@
     "nuqs": "^1.15.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "reading-time": "^1.5.0",
+    "sharp": "^0.33.2",
     "tailwind-merge": "^2.2.0",
-    "tailwind-scrollbar": "^3.0.5",
-    "tailwindcss-animate": "^1.0.7",
     "zod": "^3.22.4"
   },
   "devDependencies": {
@@ -53,12 +52,15 @@
     "@typescript-eslint/parser": "^6.11.0",
     "eslint": "^8.54.0",
     "eslint-config-next": "^14.0.4",
-    "husky": "^8.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "lint-staged": "^15.2.0",
     "postcss": "^8.4.31",
     "prettier": "^3.1.0",
     "prettier-plugin-tailwindcss": "^0.5.7",
+    "tailwind-scrollbar": "^3.0.5",
     "tailwindcss": "^3.3.5",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.1.6"
   },
   "packageManager": "[email protected]"

public/favicon/site.webmanifest

@@ -1,19 +1,19 @@
 {
-    "name": "",
-    "short_name": "",
-    "icons": [
-        {
-            "src": "/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#0c0a09",
-    "background_color": "#0c0a09",
-    "display": "standalone"
+  "name": "Hackerspace NTNU",
+  "short_name": "Hackerspace",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#0c0a09",
+  "background_color": "#0c0a09",
+  "display": "standalone"
 }

src/app/[locale]/(dashboard)/layout.tsx

@@ -1,17 +1,18 @@
 import { unstable_setRequestLocale } from 'next-intl/server';
-import { type ReactNode } from 'react';
 
 import { Footer } from '@/components/layout/Footer';
 import { Header } from '@/components/layout/Header';
 import { Main } from '@/components/layout/Main';
 
-export default function Dashboardlayout({
+type DashboardProps = {
+  children: React.ReactNode;
+  params: { locale: string };
+};
+
+export default function Dashboard({
   children,
   params: { locale },
-}: {
-  children: ReactNode;
-  params: { locale: string };
-}) {
+}: DashboardProps) {
   unstable_setRequestLocale(locale);
   return (
     <>

src/app/[locale]/(dashboard)/news/(header)/layout.tsx

@@ -0,0 +1,34 @@
+import { SquarePen } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { unstable_setRequestLocale } from 'next-intl/server';
+
+import { Link } from '@/lib/navigation';
+
+import { Button } from '@/components/ui/Button';
+
+type NewsHeaderProps = {
+  children: React.ReactNode;
+  params: { locale: string };
+};
+
+export default function NewsHeader({
+  children,
+  params: { locale },
+}: NewsHeaderProps) {
+  unstable_setRequestLocale(locale);
+  const t = useTranslations('news');
+  return (
+    <>
+      <div className='flex items-center justify-between'>
+        <h1 className='my-4'>{t('title')}</h1>
+        <Button asChild size='sm'>
+          <Link href='/news/new'>
+            <SquarePen className='mr-2 h-4 w-4' />
+            {t('newArticle')}
+          </Link>
+        </Button>
+      </div>
+      {children}
+    </>
+  );
+}

src/app/[locale]/(dashboard)/news/(header)/loading.tsx

@@ -0,0 +1,15 @@
+import { PaginationCarouselSkeleton } from '@/components/layout/PaginationCarouselSkeleton';
+import { CardGridSkeleton } from '@/components/news/CardGridSkeleton';
+import { ItemGridSkeleton } from '@/components/news/ItemGridSkeleton';
+import { Separator } from '@/components/ui/Separator';
+
+export default function NewsSkeleton() {
+  return (
+    <>
+      <CardGridSkeleton />
+      <Separator className='my-6' />
+      <ItemGridSkeleton />
+      <PaginationCarouselSkeleton className='my-6' />
+    </>
+  );
+}

src/app/[locale]/(dashboard)/news/(header)/page.tsx

@@ -0,0 +1,61 @@
+import { articleMockData as articleData } from '@/mock-data/article';
+import { useTranslations } from 'next-intl';
+import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { createSearchParamsCache, parseAsInteger } from 'nuqs/parsers';
+import { Suspense } from 'react';
+
+import { PaginationCarousel } from '@/components/layout/PaginationCarousel';
+import { CardGrid } from '@/components/news/CardGrid';
+import { ItemGrid } from '@/components/news/ItemGrid';
+import { ItemGridSkeleton } from '@/components/news/ItemGridSkeleton';
+import { Separator } from '@/components/ui/Separator';
+
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: 'layout' });
+
+  return {
+    title: t('news'),
+  };
+}
+
+export default function News({
+  params: { locale },
+  searchParams,
+}: {
+  params: { locale: string };
+  searchParams: Record<string, string | string[] | undefined>;
+}) {
+  unstable_setRequestLocale(locale);
+  const t = useTranslations('ui');
+  const searchParamsCache = createSearchParamsCache({
+    [t('page')]: parseAsInteger.withDefault(1),
+  });
+
+  const { [t('page')]: page = 1 } = searchParamsCache.parse(searchParams);
+  // TODO: Button to create new article should only be visible when logged in
+  return (
+    <>
+      <CardGrid topArticles={articleData.slice(0, 4)} />
+      <Separator className='my-6' />
+      <Suspense key={page} fallback={<ItemGridSkeleton />}>
+        <ItemGrid page={page} />
+      </Suspense>
+      <PaginationCarousel
+        className='my-6'
+        totalPages={Math.ceil(articleData.length / 6)}
+        t={{
+          goToPreviousPage: t('goToPreviousPage'),
+          previous: t('previous'),
+          morePages: t('morePages'),
+          goToNextPage: t('goToNextPage'),
+          next: t('next'),
+          page: t('page'),
+        }}
+      />
+    </>
+  );
+}