Merge branch 'main' into enum

Author: techmannih

.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.2
+        uses: codecov/codecov-action@v5.3.1
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           name: ${{ env.CODECOV_UNIQUE_NAME }}

_includes/community

@@ -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/Card.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import React from 'react';
+import Image from 'next/image';
 
 function ListItem({
   children,
@@ -34,6 +35,7 @@ export default function DarkModeToggle() {
   const [activeThemeIcon, setActiveThemeIcon] = useState(
     '/icons/theme-switch.svg',
   );
+
   useEffect(() => {
     switch (theme) {
       case 'system':
@@ -45,14 +47,36 @@ export default function DarkModeToggle() {
     }
   }, [theme, resolvedTheme]);
 
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setShowSelect(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
   return (
-    <div className='relative w-10 h-10 dark-mode-toggle-container'>
+    <div
+      ref={dropdownRef}
+      className='relative w-10 h-10 dark-mode-toggle-container'
+    >
       <button
         onClick={() => setShowSelect(!showSelect)}
         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}
@@ -65,19 +89,18 @@ export default function DarkModeToggle() {
         />
       </button>
       <div
-        className='absolute right-0 p-2 bg-white dark:bg-gray-800 rounded-lg border dark:border-gray-700 z-10 w-max'
-        style={{ display: showSelect ? 'block' : 'none' }}
-        onMouseLeave={() => {
-          setShowSelect(false);
-        }}
+        onMouseLeave={() => setShowSelect(false)}
+        className={`absolute right-0 p-2 bg-white dark:bg-gray-800 rounded-lg border dark:border-gray-700 z-10 w-max ${
+          showSelect ? 'block' : 'hidden'
+        }`}
         tabIndex={0}
         data-test='theme-dropdown'
       >
         <ListItem
           onClick={() => setTheme('system')}
           data-test='select-system-theme'
         >
-          <img
+          <Image
             src={'/icons/theme-switch.svg'}
             alt='System theme'
             width={18}
@@ -90,9 +113,9 @@ export default function DarkModeToggle() {
           onClick={() => setTheme('light')}
           data-test='select-light-theme'
         >
-          <img
+          <Image
             src={'/icons/sun.svg'}
-            alt='System theme'
+            alt='Light theme'
             width={18}
             height={18}
             style={{ filter: isDarkMode ? 'invert(1)' : 'invert(0)' }}
@@ -103,9 +126,9 @@ export default function DarkModeToggle() {
           onClick={() => setTheme('dark')}
           data-test='select-dark-theme'
         >
-          <img
+          <Image
             src={'/icons/moon.svg'}
-            alt='System theme'
+            alt='Dark theme'
             width={18}
             height={18}
             style={{ filter: isDarkMode ? 'invert(1)' : 'invert(0)' }}

components/DarkModeToggle.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/DocsHelp.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>

components/GettingStarted.tsx

@@ -6,6 +6,7 @@ import getPartsOfJson, { SyntaxPart } from '~/lib/getPartsOfJson';
 import jsonSchemaReferences from './jsonSchemaLinks';
 import { useRouter } from 'next/router';
 import { FullMarkdownContext } from '~/context';
+import Image from 'next/image';
 import getScopesOfParsedJsonSchema, {
   JsonSchemaPathWithScope,
   JsonSchemaScope,
@@ -294,31 +295,45 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
             }}
             data-test='copy-clipboard-button'
           >
-            <img
+            <Image
               src='/icons/copy.svg'
+              alt='Copy icon'
               title='Copy to clipboard'
+              width={20}
+              height={20}
               className={`opacity-50 hover:opacity-90 duration-150 ${copied ? 'hidden' : ''}`}
-            ></img>
-            <img
+            />
+            <Image
               src='/icons/copied.svg'
+              alt='Copied icon'
+              width={20}
+              height={20}
               title='Copied!'
               className={copied ? '' : 'hidden'}
-            ></img>
+            />
           </div>
           <div
             className='flex flex-row items-center text-white h-6 font-sans bg-white/20 text-xs px-3 rounded-bl-lg font-semibold'
             data-test='check-json-schema'
           >
             {isJsonSchema ? (
               <>
-                <img src='/logo-white.svg' className='h-4 mr-1.5' /> schema
+                <Image
+                  src='/logo-white.svg'
+                  alt=' logo-white'
+                  width={16}
+                  height={16}
+                  className=' mr-1.5'
+                />{' '}
+                schema
               </>
             ) : (
               <>data</>
             )}
           </div>
         </div>
         <Editable
+          className='overflow-x-auto'
           data-test='json-editor'
           onCopy={(e) => {
             e.preventDefault();
@@ -363,7 +378,6 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
                     (jsonPathsWithJsonScope) => jsonPathsWithJsonScope.jsonPath,
                   )
                   .includes(leaf.syntaxPart?.parentJsonPath);
-                // console.log('jsonPathsWithJsonScope', jsonPathsWithJsonScope, leaf, leaf.syntaxPart?.parentJsonPath)
                 if (
                   isJsonScope &&
                   jsonSchemaReferences.objectProperty[leaf.text]
@@ -410,7 +424,7 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
                   if (!link) return;
                   router.push(link);
                 }}
-                className={classnames('pb-2', textStyles)}
+                className={classnames('pb-2', textStyles, 'whitespace-pre')}
                 title={leaf.syntaxPart?.type}
                 {...attributes}
               >
@@ -451,7 +465,13 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
             className='text-white px-4 py-3 font-sans flex flex-row justify-end items-center bg-red-500/30 text-sm'
             data-test='not-compliant-to-schema'
           >
-            <img src='/icons/x-mark.svg' className='h-4 w-4 mr-2' />
+            <Image
+              src='/icons/x-mark.svg'
+              alt='Error icon'
+              width={16}
+              height={16}
+              className=' mr-2'
+            />
             not compliant to schema
           </div>
         )}
@@ -460,7 +480,13 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
             className='text-white px-4 py-3 font-sans flex flex-row justify-end items-center bg-slate-500/30 text-sm'
             data-test='compliant-to-schema'
           >
-            <img src='/icons/checkmark.svg' className='h-5 w-5 mr-2' />
+            <Image
+              src='/icons/checkmark.svg'
+              alt='Checkmark icon'
+              width={20}
+              height={20}
+              className='mr-2'
+            />
             compliant to schema
           </div>
         )}