diff --git a/README.md b/README.md index 11fbb20..682d61f 100644 --- a/README.md +++ b/README.md @@ -9,8 +9,7 @@ Here is a list of documentation to help you get started: - [Next-intl](https://next-intl-docs.vercel.app/) - Internationalization library - [nuqs](https://nuqs.47ng.com/docs/installation) - Easy to use query params - [BlockNote](https://www.blocknotejs.org/docs) - Tool for markdown textboxes -- [Tanstack Form](https://tanstack.com/form/latest/docs/overview) - When we need to handle form validation (shadcn/ui uses react-hook-form. but I think this is better, we will figure it out) -- [Tanstack Query](https://tanstack.com/query/latest/docs/framework/react/overview) - TRPC wraps Tanstack Query which is how we fetch data from the backend +- [React Hook Form](https://react-hook-form.com/get-started) - When we need to handle form validation #### Styling @@ -24,7 +23,8 @@ Here is a list of documentation to help you get started: ### Backend -- [TRPC](https://trpc.io/docs) - Tool for creating API endpoints as functions +- [TRPC](https://trpc.io/docs/client/react/server-components) - Tool for creating API endpoints as functions + - [Tanstack Query](https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#streaming-with-server-components) - TRPC wraps Tanstack Query which is how we fetch data from the backend on the client - [Lucia](https://lucia-auth.com) - Authentication library - [Drizzle](https://orm.drizzle.team/docs/overview) - ORM for interacting with the database (Postgres under the hood) - [s3-client](https://github.com/aws/aws-sdk-js-v3/tree/main/clients/client-s3) - AWS S3 client for uploading files @@ -116,3 +116,5 @@ We are using [Conventional Commits](https://www.conventionalcommits.org/en/v1.0. - All layout components should end with Layout. For example: `DefaultLayout`. - All page components should end with Page to make it clear it is a whole page. For example: `AboutPage`. +- All icons should end with Icon. For example: `HomeIcon`. +- React components should be named with PascalCase. For example: `Button`. The filename should match the component name. diff --git a/messages/en.json b/messages/en.json index 316e4ba..9acbcb2 100644 --- a/messages/en.json +++ b/messages/en.json @@ -39,7 +39,8 @@ "visitInstagram": "Visit our Instagram", "NTNUIDI": "NTNU Department of Computer Science", "NTNUIDIURL": "https://www.ntnu.edu/idi", - "NTNUKiD": "The working life network KID", + "NTNUNexus": "The working life network Nexus", + "feideInlogin": "Login with Feide", "copyright": "Copyright", "allRightsReserved": "All rights reserved" }, diff --git a/messages/no.json b/messages/no.json index 79286cb..5c18342 100644 --- a/messages/no.json +++ b/messages/no.json @@ -39,7 +39,8 @@ "visitInstagram": "Besøk Instagram", "NTNUIDI": "NTNU Institutt for datateknologi og informatikk", "NTNUIDIURL": "https://www.ntnu.no/idi", - "NTNUKiD": "Arbeidslivsnettverket KID", + "NTNUNexus": "Arbeidslivsnettverket Nexus", + "feideLogin": "Logg in med Feide", "copyright": "Opphavsrett", "allRightsReserved": "Alle rettigheter reservert" }, diff --git a/src/app/[locale]/(default)/news/(header)/page.tsx b/src/app/[locale]/(default)/news/(header)/page.tsx index 30444ab..26bdf53 100644 --- a/src/app/[locale]/(default)/news/(header)/page.tsx +++ b/src/app/[locale]/(default)/news/(header)/page.tsx @@ -1,14 +1,13 @@ -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/server'; -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'; +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/server'; +import { Suspense } from 'react'; export async function generateMetadata({ params: { locale }, diff --git a/src/components/assets/logos/FeideLogo.tsx b/src/components/assets/logos/FeideLogo.tsx new file mode 100644 index 0000000..0baa22a --- /dev/null +++ b/src/components/assets/logos/FeideLogo.tsx @@ -0,0 +1,60 @@ +import { cx } from '@/lib/utils'; + +function FeideLogo({ + className, + title, + ...rest +}: { + className?: string; + title: string; +}) { + return ( + + + + + + + + + + + + + + ); +} + +export { FeideLogo }; diff --git a/src/components/assets/Logo.tsx b/src/components/assets/logos/HackerspaceLogo.tsx similarity index 97% rename from src/components/assets/Logo.tsx rename to src/components/assets/logos/HackerspaceLogo.tsx index a8a9f09..665bcb4 100644 --- a/src/components/assets/Logo.tsx +++ b/src/components/assets/logos/HackerspaceLogo.tsx @@ -1,4 +1,4 @@ -function Logo({ className, ...rest }: { className?: string }) { +function HackerspaceLogo({ className, ...rest }: { className?: string }) { return ( - + diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index c81eba8..d54c66a 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -48,6 +48,7 @@ function Header() { t={{ profile: t('profile'), signIn: t('signIn'), + feideLogin: t('feideLogin'), }} /> diff --git a/src/components/layout/LogoLink.tsx b/src/components/layout/LogoLink.tsx index 23018e8..2610952 100644 --- a/src/components/layout/LogoLink.tsx +++ b/src/components/layout/LogoLink.tsx @@ -1,4 +1,4 @@ -import { Logo } from '@/components/assets/Logo'; +import { HackerspaceLogo } from '@/components/assets/logos'; import { Button } from '@/components/ui/Button'; import { Link } from '@/lib/locale/navigation'; import { cx } from '@/lib/utils'; @@ -20,7 +20,7 @@ function LogoLink({ size='none' > - + HACKERSPACE diff --git a/src/components/news/CardGrid.tsx b/src/components/news/CardGrid.tsx index 46156cd..c56adf3 100644 --- a/src/components/news/CardGrid.tsx +++ b/src/components/news/CardGrid.tsx @@ -1,4 +1,5 @@ import { ArticleCard } from '@/components/news/ArticleCard'; +import { api } from '@/lib/api/server'; import { cx } from '@/lib/utils'; type CardGridProps = { topArticles: { @@ -10,7 +11,8 @@ type CardGridProps = { }[]; }; -function CardGrid({ topArticles }: CardGridProps) { +async function CardGrid({ topArticles }: CardGridProps) { + const hello = await api.test.helloWorld(); return (
{topArticles.map((data, index) => ( diff --git a/src/components/news/ItemGrid.tsx b/src/components/news/ItemGrid.tsx index 6a610f6..25430db 100644 --- a/src/components/news/ItemGrid.tsx +++ b/src/components/news/ItemGrid.tsx @@ -1,13 +1,15 @@ import { ArticleItem } from '@/components/news/ArticleItem'; +import { api } from '@/lib/api/server'; import { articleMockData as articleData } from '@/mock-data/article'; type ItemGridProps = { page: number; }; -function ItemGrid({ page }: ItemGridProps) { +async function ItemGrid({ page }: ItemGridProps) { const itemsDisplayedAsCards = 4; const itemsPerPage = 6; + const hello = await api.test.helloWorld(); const start = (page - 1) * itemsPerPage + itemsDisplayedAsCards; const end = start + itemsPerPage; diff --git a/src/components/settings/ProfileMenu.tsx b/src/components/settings/ProfileMenu.tsx index 446f65e..13c9b86 100644 --- a/src/components/settings/ProfileMenu.tsx +++ b/src/components/settings/ProfileMenu.tsx @@ -11,7 +11,6 @@ import { UserIcon } from 'lucide-react'; import * as React from 'react'; function ProfileMenu({ t }: { t: { profile: string; signIn: string } }) { - // TODO: User Icon Color should only have the primary color when logged in return (