Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 28, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 13 additions & 14 deletions components/Headlines.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
Expand All @@ -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>
);
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand Down
47 changes: 27 additions & 20 deletions components/Layout.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -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>
);
Expand Down
10 changes: 2 additions & 8 deletions cypress/components/Headlines.cy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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', '¶');
});

Expand All @@ -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', '¶');
});
});
Loading