fix: restructure logos

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.

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"
   },

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"
   },

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 },

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 (
+    <svg
+      className={cx('text-black dark:text-white', className)}
+      width='100%'
+      height='100%'
+      viewBox='0 0 114 39'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-describedby='feielogo'
+      {...rest}
+    >
+      <title id='feidelogo'>{title}</title>
+      <rect x='27.99' y='20.34' width='4.24' height='10.18' fill='#1f4698' />
+      <path
+        d='M18.23,23.31l-4.24,0l0,11.45l-9.75,0l0,-14.42l-4.24,0l0,15.27l0.02,0l0,3.39l32.21,0l-0,-4.24l-14,0l-0,-11.45Z'
+        fill='#1f4698'
+      />
+      <circle cx='16.11' cy='16.53' r='2.54' fill='#1f4698' />
+      <path
+        d='M16.11,4.24c0.007,-0 0.013,-0 0.02,-0c6.508,-0 11.865,5.352 11.87,11.86l4.25,0c0,-8.846 -7.279,-16.125 -16.125,-16.125c-8.846,-0 -16.125,7.279 -16.125,16.125l4.25,0c0.005,-6.504 5.356,-11.855 11.86,-11.86Z'
+        fill='#1f4698'
+      />
+      <path
+        d='M53.32,21.59l-7.71,0l0,-6.11l10.09,0l0,-3.41l-13.72,0l-0,22.68l3.63,0l-0,-9.74l7.71,0l-0,-3.42Z'
+        fill='currentColor'
+      />
+      <path
+        d='M77.79,10.08c-1.371,0 -2.5,1.129 -2.5,2.5c0,1.371 1.129,2.5 2.5,2.5c1.371,0 2.5,-1.129 2.5,-2.5c0,-1.371 -1.129,-2.5 -2.5,-2.5Z'
+        fill='currentColor'
+      />
+      <path
+        d='M72.51,17.75l0,3.42l3.47,0l0,10.1l-4.31,-0l0,3.42l10.23,-0l0,-3.42l-2.29,-0l0,-13.52l-7.1,-0Z'
+        fill='currentColor'
+      />
+      <path
+        d='M97.52,34.69l0,-24.23l-3.63,0l0,8.83l-0.24,-0.29c-0.779,-1.041 -2.01,-1.651 -3.31,-1.64c-3.41,0 -5.89,2.74 -5.89,6.53l0,4.72c0,3.79 2.48,6.54 5.89,6.54c1.302,0.007 2.532,-0.606 3.31,-1.65l0.24,-0.32l0,1.54l3.63,-0.03Zm-3.65,-4.6c-0.607,1.002 -1.698,1.615 -2.87,1.61c-0.032,0.001 -0.063,0.002 -0.095,0.002c-1.553,-0 -2.83,-1.278 -2.83,-2.83c-0,-0.098 0.005,-0.195 0.015,-0.292l0,-4.72c-0.01,-0.097 -0.015,-0.194 -0.015,-0.292c-0,-1.552 1.277,-2.83 2.83,-2.83c0.032,0 0.063,0.001 0.095,0.002c1.183,0 2.281,0.629 2.88,1.65l0,7.64l-0.01,0.06Z'
+        fill='currentColor'
+      />
+      <path
+        d='M69.21,27.84l-0,-4.53c-0,-3.54 -2.74,-6.11 -6.53,-6.11c-3.79,0 -6.54,2.57 -6.54,6.11l-0,5.58c-0,3.48 2.84,6.1 6.61,6.1c2.59,0.082 4.994,-1.382 6.11,-3.72l-3.36,-1.44c-0.37,1.19 -1.505,1.986 -2.75,1.93c-0.053,0.003 -0.107,0.005 -0.16,0.005c-1.558,-0 -2.84,-1.282 -2.84,-2.84c-0,-0.012 -0,-0.023 -0,-0.035l-0,-1.05l9.46,0Zm-9.44,-4.53c0.09,-1.529 1.373,-2.739 2.905,-2.739c1.532,-0 2.815,1.21 2.905,2.739l-0,1.33l-5.81,0l-0,-1.33Z'
+        fill='currentColor'
+      />
+      <path
+        d='M113.71,27.84l-0,-4.53c-0,-3.54 -2.75,-6.11 -6.54,-6.11c-3.79,0 -6.53,2.57 -6.53,6.11l-0,5.58c-0,3.48 2.84,6.1 6.61,6.1c2.589,0.08 4.992,-1.384 6.11,-3.72l-3.36,-1.44c-0.373,1.188 -1.506,1.983 -2.75,1.93c-0.057,0.003 -0.114,0.005 -0.17,0.005c-1.553,0 -2.83,-1.277 -2.83,-2.83c-0,-0.015 -0,-0.03 0,-0.045l0,-1.05l9.46,0Zm-9.44,-4.53c0.09,-1.529 1.373,-2.739 2.905,-2.739c1.532,-0 2.815,1.21 2.905,2.739l-0,1.33l-5.81,0l-0,-1.33Z'
+        fill='currentColor'
+      />
+    </svg>
+  );
+}
+
+export { FeideLogo };

src/components/assets/Logo.tsx → src/components/assets/logos/HackerspaceLogo.tsx

@@ -1,4 +1,4 @@
-function Logo({ className, ...rest }: { className?: string }) {
+function HackerspaceLogo({ className, ...rest }: { className?: string }) {
   return (
     <svg
       className={className}
@@ -25,4 +25,4 @@ function Logo({ className, ...rest }: { className?: string }) {
   );
 }
 
-export { Logo };
+export { HackerspaceLogo };

src/components/assets/sponsors/index.tsx → src/components/assets/logos/index.tsx

@@ -1,2 +1,3 @@
+export * from './HackerspaceLogo';
 export * from './IDILogo';
 export * from './NexusLogo';

src/components/layout/Footer.tsx

@@ -4,7 +4,7 @@ import {
   InstagramIcon,
   SlackIcon,
 } from '@/components/assets/icons';
-import { IDILogo, NexusLogo } from '@/components/assets/sponsors';
+import { IDILogo, NexusLogo } from '@/components/assets/logos';
 import { LogoLink } from '@/components/layout/LogoLink';
 import { Nav } from '@/components/layout/Nav';
 import { Button } from '@/components/ui/Button';
@@ -197,7 +197,7 @@ function Footer() {
                 target='_blank'
                 rel='noopener noreferrer'
               >
-                <NexusLogo className='p-6' title={t('NTNUKiD')} />
+                <NexusLogo className='p-6' title={t('NTNUNexus')} />
               </ExternalLink>
             </Button>
           </li>

src/components/layout/Header.tsx

@@ -48,6 +48,7 @@ function Header() {
             t={{
               profile: t('profile'),
               signIn: t('signIn'),
+              feideLogin: t('feideLogin'),
             }}
           />
         </div>

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'
     >
       <Link href='/' aria-label={t('hackerspaceHome')} onClick={onClick}>
-        <Logo className='h-6 w-6 md:h-8 md:w-8 xl:h-10 xl:w-10' />
+        <HackerspaceLogo className='h-6 w-6 md:h-8 md:w-8 xl:h-10 xl:w-10' />
         <span className='font-bold font-montserrat text-md md:text-lg xl:text-2xl'>
           HACKERSPACE
         </span>

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 (
     <div className='grid h-192 xs:h-96 xs:grid-cols-3 grid-rows-4 xs:grid-rows-2 gap-4 md:grid-cols-4 lg:h-112'>
       {topArticles.map((data, index) => (

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;

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 (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>