New information architecture

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
     es2021: true,
     node: true,
     browser: true,
-    "cypress/globals": true
+    'cypress/globals': true,
   },
   settings: {
     react: {
@@ -34,7 +34,10 @@ module.exports = {
 
     'react/jsx-curly-spacing': ['error', { when: 'never', children: true }],
     indent: ['error', 2, { SwitchCase: 1 }],
-    'linebreak-style': ['error', process.platform === 'win32' ? 'windows' : 'unix'],
+    'linebreak-style': [
+      'error',
+      process.platform === 'win32' ? 'windows' : 'unix',
+    ],
     quotes: ['error', 'single'],
 
     'jsx-quotes': ['error', 'prefer-single'],

.github/workflows/ci.yml

@@ -64,7 +64,7 @@ jobs:
         run: yarn run test:coverage:all
 
       - name: Upload coverage report to Codecov
-        uses: codecov/codecov-action@v5.1.1
+        uses: codecov/codecov-action@v5.3.1
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           name: ${{ env.CODECOV_UNIQUE_NAME }}

INSTALLATION.md

@@ -4,7 +4,7 @@ This guide provides step-by-step instructions for installing the JSON Schema Web
 
 ## Table of Contents
 
-1. [Setting Up the Project](#setting-up-the-project)
+1. [Setting Up the Project](#setting-up-project)
    - [Requirements](#requirements)
    - [Cloning the Repository](#cloning-the-repository)
    - [Setting Up Environment Variables](#setting-up-environment-variables)

components/AmbassadorsCard.tsx

@@ -55,11 +55,11 @@ const SocialIcon = ({ platform }: { platform: SocialIcons }) => {
     twitter: (
       <svg
         className='w-7 h-7 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-        viewBox='0 0 24 24'
+        viewBox='0 0 20 16'
         fill='currentColor'
         xmlns='http://www.w3.org/2000/svg'
       >
-        <path d='M23.954 4.569c-.885.389-1.83.654-2.825.775a4.932 4.932 0 0 0 2.163-2.723 9.85 9.85 0 0 1-3.127 1.195 4.916 4.916 0 0 0-8.374 4.482A13.936 13.936 0 0 1 1.64 3.161 4.916 4.916 0 0 0 3.195 9.86a4.897 4.897 0 0 1-2.229-.616v.061a4.919 4.919 0 0 0 3.946 4.827 4.897 4.897 0 0 1-2.224.085 4.923 4.923 0 0 0 4.604 3.42A9.869 9.869 0 0 1 .977 19.569a13.94 13.94 0 0 0 7.548 2.211c9.056 0 14.012-7.497 14.012-13.986 0-.213-.005-.425-.015-.636A9.936 9.936 0 0 0 24 4.59a9.94 9.94 0 0 1-2.046.561z' />
+        <path d='M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z' />
       </svg>
     ),
     linkedin: (
@@ -114,15 +114,15 @@ const AmbassadorCard = ({ ambassador }: { ambassador: Ambassador }) => {
     contributions = [],
   } = ambassador;
 
-  const SocialIconss: SocialIcons[] = [
+  const SocialIcons: SocialIcons[] = [
     'github',
     'twitter',
     'mastodon',
     'linkedin',
   ];
 
   return (
-    <div className='relative max-w-sm md:max-w-md lg:max-w-lg mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden my-4 transition-all duration-300 h-fit'>
+    <div className='relative flex flex-col max-w-sm md:max-w-md lg:max-w-lg mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden my-4 h-full'>
       <div className='absolute top-0 right-0 w-1 h-20 bg-black dark:bg-gray-400'></div>
       <div className='absolute bottom-100 right-0 w-20 h-1 bg-black dark:bg-gray-400'></div>
       <div className='absolute bottom-0 left-0 w-1 h-20 bg-black dark:bg-gray-400'></div>
@@ -137,7 +137,7 @@ const AmbassadorCard = ({ ambassador }: { ambassador: Ambassador }) => {
         onError={() => setImgSrc(`/img/ambassadors/${name}.jpg`)}
       />
 
-      <div className='p-6'>
+      <div className='flex flex-col flex-grow p-6'>
         <h3 className='text-xl font-semibold mb-2 text-gray-900 dark:text-white'>
           {name}
         </h3>
@@ -157,8 +157,8 @@ const AmbassadorCard = ({ ambassador }: { ambassador: Ambassador }) => {
           </p>
         )}
 
-        <div className='flex justify-center mb-4'>
-          {SocialIconss.map((platform) => {
+        <div className='flex justify-center mb-4 mt-auto'>
+          {SocialIcons.map((platform) => {
             const username = ambassador[platform];
             return username ? (
               <a

components/Card.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 import TextTruncate from 'react-text-truncate';
+import Image from 'next/image';
 export interface CardProps {
   title: string;
   body: string;
@@ -36,8 +37,11 @@ const CardBody = ({
     <div className='group relative h-full w-full rounded-lg border border-gray-200 bg-white p-6 px-12 shadow-3xl dark:shadow-2xl dark:shadow-slate-900 transition-colors ease-in-out hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30'>
       <div className='flex justify-center '>
         {image && (
-          <img
+          <Image
             src={image}
+            alt={title}
+            width={384}
+            height={128}
             className='h-32 p-2 object-contain'
             data-test='card-image'
           />
@@ -46,9 +50,11 @@ const CardBody = ({
       <div className='flex flex-row items-start mb-6'>
         {icon && (
           <span className='mr-6 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-lg border bg-blue-200 px-3 text-gray-900 dark:text-white'>
-            <img
+            <Image
               src={icon}
               alt={title}
+              width={56}
+              height={56}
               className='h-full w-full'
               data-test='card-icon'
             />

components/DarkModeToggle.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
 import React from 'react';
+import Image from 'next/image';
 
 function ListItem({
   children,
@@ -52,7 +53,7 @@ export default function DarkModeToggle() {
         className='dark-mode-toggle rounded-md dark:hover:bg-gray-700 p-1.5 hover:bg-gray-100 transition duration-150 '
         data-test='dark-mode-toggle'
       >
-        <img
+        <Image
           src={activeThemeIcon}
           alt='Dark Mode'
           width={25}
@@ -77,7 +78,7 @@ export default function DarkModeToggle() {
           onClick={() => setTheme('system')}
           data-test='select-system-theme'
         >
-          <img
+          <Image
             src={'/icons/theme-switch.svg'}
             alt='System theme'
             width={18}
@@ -90,7 +91,7 @@ export default function DarkModeToggle() {
           onClick={() => setTheme('light')}
           data-test='select-light-theme'
         >
-          <img
+          <Image
             src={'/icons/sun.svg'}
             alt='System theme'
             width={18}
@@ -103,7 +104,7 @@ export default function DarkModeToggle() {
           onClick={() => setTheme('dark')}
           data-test='select-dark-theme'
         >
-          <img
+          <Image
             src={'/icons/moon.svg'}
             alt='System theme'
             width={18}

components/DocTable.tsx

@@ -4,50 +4,53 @@ import Link from 'next/link';
 const DocTable = ({ frontmatter }: any) => {
   return (
     <>
-      <div className='max-w-full mx-auto overflow-auto'>
-        <table className='table-auto border-collapse w-full bg-slate-200 dark:bg-slate-900 text-slate-700 dark:text-slate-300'>
+      <div className='max-w-full mx-auto overflow-auto rounded-lg shadow-lg border-2 border-primary'>
+        <div className='h-14 bg-primary text-white flex items-center p-6 font-semibold text-xl'>
+          <h5>Specification Details</h5>
+        </div>
+        <table className='table-auto w-full bg-slate-200 dark:bg-slate-900 text-slate-700 dark:text-slate-300'>
           <tbody>
-            <tr className='dark:hover:bg-slate-950 hover:bg-slate-300'>
-              <td className='border border-slate-400 dark:border-slate-500 p-2 text-center font-semibold'>
-                Specification
+            <tr className='dark:hover:bg-slate-950 hover:bg-slate-300 border-b border-slate-300'>
+              <td className='p-4 text-start font-medium'>
+                <span className='font-semibold'>Specification</span>
               </td>
-              <td className='border border-slate-400 dark:border-slate-500 p-2'>
+              <td className='p-4'>
                 <Link
                   href={frontmatter.Specification}
-                  className='text-linkBlue'
+                  className='text-linkBlue hover:underline'
                   target='_blank'
                 >
-                  {' '}
                   {frontmatter.Specification}
                 </Link>
               </td>
             </tr>
-            <tr className='dark:hover:bg-slate-950 hover:bg-slate-300'>
-              <td className='border border-slate-400 dark:border-slate-500 p-2 text-center font-semibold'>
-                Published
-              </td>
-              <td className='border border-slate-400 dark:border-slate-500 p-2'>
-                {frontmatter.Published}
+            <tr className='dark:hover:bg-slate-950 hover:bg-slate-300 border-b border-slate-300'>
+              <td className='p-4 text-start font-medium'>
+                <span className='font-semibold'>Published</span>
               </td>
+              <td className='p-4'>{frontmatter.Published}</td>
             </tr>
-            <tr className='dark:hover:bg-slate-950 hover:bg-slate-300 '>
-              <td className='border border-slate-400 dark:border-slate-500 p-2 text-center font-semibold'>
-                Authors
+            <tr className='dark:hover:bg-slate-950 hover:bg-slate-300 border-b border-slate-300'>
+              <td className='p-4 text-start font-medium'>
+                <span className='font-semibold'>Authors</span>
               </td>
-              <td className='border border-slate-400 dark:border-slate-500 p-2'>
-                {frontmatter.authors.map((author: string, index: number) => {
-                  return <div key={index}>{author}</div>;
-                })}
+              <td className='p-4'>
+                {frontmatter.authors.map((author: string, index: number) => (
+                  <span key={index}>
+                    {author}
+                    {index < frontmatter.authors.length - 1 ? ', ' : ''}
+                  </span>
+                ))}
               </td>
             </tr>
             <tr className='dark:hover:bg-slate-950 hover:bg-slate-300'>
-              <td className='border border-slate-400 dark:border-slate-500 p-2 text-center font-semibold'>
-                Metaschema
+              <td className='p-4 text-start font-medium'>
+                <span className='font-semibold'>Metaschema</span>
               </td>
-              <td className='border border-slate-400 dark:border-slate-500 p-2 '>
+              <td className='p-4'>
                 <Link
                   href={frontmatter.Metaschema}
-                  className='text-linkBlue'
+                  className='text-linkBlue hover:underline'
                   target='_blank'
                 >
                   {frontmatter.Metaschema}

components/DocsHelp.tsx

@@ -3,18 +3,34 @@ import React, { FormEvent, useRef, useState } from 'react';
 import extractPathWithoutFragment from '~/lib/extractPathWithoutFragment';
 
 interface DocsHelpProps {
-  markdownFile?: string;
+  fileRenderType?: '_indexmd' | 'indexmd' | 'tsx' | '_md' | string;
+  showEditOption?: boolean;
 }
-
-export function DocsHelp({ markdownFile }: DocsHelpProps) {
+export function DocsHelp({
+  fileRenderType,
+  showEditOption = true,
+}: DocsHelpProps) {
   const router = useRouter();
-  const path = encodeURIComponent(router.pathname);
   const [isFormOpen, setIsFormOpen] = useState(false);
   const [feedbackStatus, setFeedbackStatus] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState('');
   const feedbackFormRef = useRef<HTMLFormElement>(null);
-
+  let gitredirect = '';
+  if (
+    typeof fileRenderType === 'string' &&
+    fileRenderType.startsWith('https://')
+  ) {
+    gitredirect = fileRenderType;
+  } else if (fileRenderType === 'tsx') {
+    gitredirect = `https://github.com/json-schema-org/website/blob/main/pages${extractPathWithoutFragment(router.asPath) + '/index.page.tsx'}`;
+  } else if (fileRenderType === '_indexmd') {
+    gitredirect = `https://github.com/json-schema-org/website/blob/main/pages${extractPathWithoutFragment(router.asPath) + '/_index.md'}`;
+  } else if (fileRenderType === 'indexmd') {
+    gitredirect = `https://github.com/json-schema-org/website/blob/main/pages${extractPathWithoutFragment(router.asPath) + '/index.md'}`;
+  } else {
+    gitredirect = `https://github.com/json-schema-org/website/blob/main/pages${extractPathWithoutFragment(router.asPath) + '.md'}`;
+  }
   async function createFeedbackHandler(event: FormEvent) {
     event.preventDefault();
     const formData = new FormData(feedbackFormRef.current!);
@@ -296,28 +312,30 @@ export function DocsHelp({ markdownFile }: DocsHelpProps) {
               type of contribution!
             </p>
           </div>
-          <div className='my-4 text-[14px]'>
-            <a
-              target='_blank'
-              rel='noreferrer'
-              className='px-[16px] py-[8px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md hover:bg-gray-200 dark:hover:bg-gray-600'
-              href={`https://github.com/json-schema-org/website/blob/main/pages${markdownFile ? (markdownFile === '_indexPage' ? extractPathWithoutFragment(router.asPath) + '/_index.md' : extractPathWithoutFragment(router.asPath) + '.md') : `/${path}/index.page.tsx`}`}
-              data-test='edit-on-github-link'
-            >
-              <svg
-                className='inline-block select-none align-text-bottom mr-1'
-                aria-hidden='true'
-                role='img'
-                viewBox='0 0 16 16'
-                width='16'
-                height='16'
-                fill='currentColor'
+          {showEditOption && (
+            <div className='my-4 text-[14px]'>
+              <a
+                target='_blank'
+                rel='noreferrer'
+                className='px-[16px] py-[8px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md hover:bg-gray-200 dark:hover:bg-gray-600'
+                href={gitredirect} // Ensure gitredirect is defined
+                data-test='edit-on-github-link'
               >
-                <path d='M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z' />
-              </svg>
-              Edit this page on Github
-            </a>
-          </div>
+                <svg
+                  className='inline-block select-none align-text-bottom mr-1'
+                  aria-hidden='true'
+                  role='img'
+                  viewBox='0 0 16 16'
+                  width='16'
+                  height='16'
+                  fill='currentColor'
+                >
+                  <path d='M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z' />
+                </svg>
+                Edit this page on Github
+              </a>
+            </div>
+          )}
           <div className='my-2 text-[14px]'>
             <a
               target='_blank'

components/GettingStarted.tsx

@@ -3,6 +3,7 @@ import { atomOneDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import Highlight from 'react-syntax-highlighter';
 import JSZip from 'jszip';
 import { saveAs } from 'file-saver';
+import Image from 'next/image';
 
 async function fetchData() {
   const response = await fetch('/data/getting-started-examples.json');
@@ -237,9 +238,19 @@ const GettingStarted = () => {
             <p>{details[0]}</p>
 
             {details[1] ? (
-              <img src='/icons/green-tick.svg' alt='green tick' />
+              <Image
+                src='/icons/green-tick.svg'
+                alt='green tick'
+                width={24}
+                height={24}
+              />
             ) : (
-              <img src='/icons/red-cross.svg' alt='red cross' />
+              <Image
+                src='/icons/red-cross.svg'
+                alt='red cross'
+                width={24}
+                height={24}
+              />
             )}
           </div>
         </div>