Adapting layout and headlines components to ShadCN + issues resolved (#1771)

* adapting the layout for shadcn and adjusting creating a test file

* adding hover effects for the blog cards

* adapts the headlines to shadcn

* adjusting coloring and tets for headlines component

* format adjustments

* format adjustments

Author: idanidan29

components/Headlines.tsx

@@ -1,5 +1,6 @@
+/* eslint-disable linebreak-style */
 import React, { useState, useEffect } from 'react';
-import classnames from 'classnames';
+import { cn } from '~/lib/utils';
 import slugifyMarkdownHeadline from '~/lib/slugifyMarkdownHeadline';
 import { useRouter } from 'next/router';
 import { HOST } from '~/lib/config';
@@ -64,9 +65,9 @@ const Headline = ({
   const attributes = {
     ...propAttributes,
     id: propAttributes?.slug || slug,
-    className: classnames(
+    className: cn(
       'group cursor-pointer hover:underline',
-      { 'text-startBlue dark:text-endBlue': isActive },
+      isActive && 'text-startBlue',
       propAttributes?.className,
     ),
     onClick: handleHeadingClick,
@@ -77,9 +78,7 @@ const Headline = ({
     <Tag attributes={attributes}>
       {childredWithoutFragment}
       {isActive && (
-        <span className={'text-startBlue dark:text-endBlue inline-block ml-2'}>
-          ¶
-        </span>
+        <span className={'text-startBlue inline-block ml-2'}>¶</span>
       )}
     </Tag>
   );
@@ -97,9 +96,9 @@ type TagProps = { children: React.ReactNode; attributes: Record<string, any> };
 const Headline1Tag = ({ children, attributes }: TagProps) => (
   <h1
     {...attributes}
-    className={classnames(
-      attributes?.className,
+    className={cn(
       'text-h1mobile md:text-h1 dark:text-slate-200  font-bold pt-10 mb-6',
+      attributes?.className,
     )}
   >
     {children}
@@ -108,9 +107,9 @@ const Headline1Tag = ({ children, attributes }: TagProps) => (
 const Headline2Tag = ({ children, attributes }: TagProps) => (
   <h2
     {...attributes}
-    className={classnames(
-      attributes?.className,
+    className={cn(
       'text-h2mobile md:text-h2 dark:text-slate-200 font-semibold mt-10 mb-4',
+      attributes?.className,
     )}
   >
     {children}
@@ -119,9 +118,9 @@ const Headline2Tag = ({ children, attributes }: TagProps) => (
 const Headline3Tag = ({ children, attributes }: TagProps) => (
   <h3
     {...attributes}
-    className={classnames(
-      attributes?.className,
+    className={cn(
       'text-h3mobile dark:text-slate-200 md:text-h3 font-semibold mt-6 mb-3',
+      attributes?.className,
     )}
   >
     {children}
@@ -130,9 +129,9 @@ const Headline3Tag = ({ children, attributes }: TagProps) => (
 const Headline4Tag = ({ children, attributes }: TagProps) => (
   <h4
     {...attributes}
-    className={classnames(
-      attributes?.className,
+    className={cn(
       'text-h4mobile dark:text-slate-200 md:text-h4 font-semibold mt-4 mb-2',
+      attributes?.className,
     )}
   >
     {children}

components/Layout.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable linebreak-style */
+/* istanbul ignore file */
 import React, { useContext, useEffect, useState, useRef } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -10,7 +12,8 @@ import { useTheme } from 'next-themes';
 import DarkModeToggle from './DarkModeToggle';
 import ScrollButton from './ScrollButton';
 import Image from 'next/image';
-/* istanbul ignore file */
+import { Button } from '@/components/ui/button';
+
 type Props = {
   children: React.ReactNode;
   mainClassName?: string;
@@ -262,28 +265,32 @@ const MainNavigation = () => {
         )}
       </div>
       <div className='flex items-center justify-end mr-8'>
-        <a
+        <Button
+          asChild
           data-testid='Button-link'
-          target='_blank'
-          rel='noopener noreferrer'
           className='cursor-pointer hidden lg:flex bg-primary hover:bg-blue-700 text-white transition-all duration-500 ease-in-out rounded-md px-3 text-sm font-medium tracking-heading py-2.5 ml-2'
-          href='https://github.com/json-schema-org/json-schema-spec'
         >
-          <span className='inline-block mr-2'>
-            <svg
-              className='inline-block -mt-1 w-6 h-6'
-              fill='currentColor'
-              viewBox='0 0 24 24'
-            >
-              <path
-                fillRule='evenodd'
-                d='M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z'
-                clipRule='evenodd'
-              ></path>
-            </svg>
-          </span>
-          <span className='inline-block'>Star on GitHub</span>
-        </a>
+          <a
+            target='_blank'
+            rel='noopener noreferrer'
+            href='https://github.com/json-schema-org/json-schema-spec'
+          >
+            <span className='inline-block mr-1'>
+              <svg
+                className='inline-block -mt-1 w-6 h-6 size-7'
+                fill='currentColor'
+                viewBox='0 0 24 24'
+              >
+                <path
+                  fillRule='evenodd'
+                  d='M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z'
+                  clipRule='evenodd'
+                ></path>
+              </svg>
+            </span>
+            <span className='inline-block'>Star on GitHub</span>
+          </a>
+        </Button>
       </div>
     </div>
   );

cypress/components/Headlines.cy.tsx

@@ -83,10 +83,7 @@ describe('Headlines Component', () => {
     mockRouter.push('/#what-is-json-schema');
 
     // Check if the headline is active
-    cy.get('span').should(
-      'have.class',
-      'text-startBlue dark:text-endBlue inline-block ml-2',
-    );
+    cy.get('span').should('have.class', 'text-startBlue inline-block ml-2');
     cy.get('span').should('have.text', '¶');
   });
 
@@ -99,10 +96,7 @@ describe('Headlines Component', () => {
 
     // Check if Correct headline is active
     cy.mount(<Headline1>What is JSON Schema?</Headline1>);
-    cy.get('span').should(
-      'have.class',
-      'text-startBlue dark:text-endBlue inline-block ml-2',
-    );
+    cy.get('span').should('have.class', 'text-startBlue inline-block ml-2');
     cy.get('span').should('have.text', '¶');
   });
 });