Merge branch 'main' into feat/blog-card-enhancements

Author: MadhavDhatrak

.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

@@ -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

@@ -333,6 +333,7 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
           </div>
         </div>
         <Editable
+          className='overflow-x-auto'
           data-test='json-editor'
           onCopy={(e) => {
             e.preventDefault();
@@ -377,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]
@@ -424,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}
               >

components/JsonEditor.tsx

@@ -269,31 +269,59 @@ export const DocsNav = ({
   });
   useEffect(() => {
     const pathWtihoutFragment = extractPathWithoutFragment(router.asPath);
+    const newActive = {
+      getDocs: false,
+      getStarted: false,
+      getReference: false,
+      getSpecification: false,
+    };
     if (getDocsPath.includes(pathWtihoutFragment)) {
-      setActive({ ...active, getDocs: true });
+      newActive.getDocs = true;
     } else if (getStartedPath.includes(pathWtihoutFragment)) {
-      setActive({ ...active, getStarted: true });
+      newActive.getStarted = true;
     } else if (getReferencePath.includes(pathWtihoutFragment)) {
-      setActive({ ...active, getReference: true });
+      newActive.getReference = true;
     } else if (getSpecificationPath.includes(pathWtihoutFragment)) {
-      setActive({ ...active, getSpecification: true });
+      newActive.getSpecification = true;
     }
+
+    setActive(newActive);
   }, [router.asPath]);
 
   const handleClickDoc = () => {
-    setActive({ ...active, getDocs: !active.getDocs });
+    setActive({
+      getDocs: !active.getDocs,
+      getStarted: false,
+      getReference: false,
+      getSpecification: false,
+    });
   };
 
   const handleClickGet = () => {
-    setActive({ ...active, getStarted: !active.getStarted });
+    setActive({
+      getDocs: false,
+      getStarted: !active.getStarted,
+      getReference: false,
+      getSpecification: false,
+    });
   };
 
   const handleClickReference = () => {
-    setActive({ ...active, getReference: !active.getReference });
+    setActive({
+      getDocs: false,
+      getStarted: false,
+      getReference: !active.getReference,
+      getSpecification: false,
+    });
   };
 
   const handleClickSpec = () => {
-    setActive({ ...active, getSpecification: !active.getSpecification });
+    setActive({
+      getDocs: false,
+      getStarted: false,
+      getReference: false,
+      getSpecification: !active.getSpecification,
+    });
   };
 
   const rotate = active.getDocs ? 'rotate(180deg)' : 'rotate(0)';
@@ -392,7 +420,11 @@ export const DocsNav = ({
             setOpen={setOpen}
           />
           <DocLink uri='/overview/faq' label='FAQ' setOpen={setOpen} />
-          <DocLink uri='/pro-help' label='Pro Help' setOpen={setOpen} />
+          <DocLink
+            uri='/overview/pro-help'
+            label='Pro Help'
+            setOpen={setOpen}
+          />
           <DocLink
             uri='/overview/similar-technologies'
             label='Similar Technologies'
@@ -736,7 +768,7 @@ export const DocsNav = ({
             'transition-all duration-500 ease-in-out',
             {
               'max-h-0 opacity-0 overflow-hidden': !active.getSpecification,
-              'max-h-80 opacity-100': active.getSpecification,
+              'max-h-80 opacity-100 overflow-hidden': active.getSpecification,
             },
           )}
           id='specification'

components/Sidebar.tsx

@@ -166,6 +166,7 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
     <FullMarkdownContext.Provider value={markdown}>
       <Markdown
         options={{
+          forceBlock: true,
           overrides: {
             h1: { component: Headline1 },
             h2: { component: Headline2 },
@@ -307,34 +308,25 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
               }
 
               return (
-                <div className='overflow-x-auto flex-basis-0 max-w-full min-w-0 shrink lg:max-w-[800px] xl:max-w-[900px]'>
-                  {/* definitely not the best way to prevent overflowing. found no better way that worked */}
+                <div className='overflow-x-auto rounded-lg bg-gray-800 text-white'>
                   <Highlight
                     language={language}
-                    wrapLines={true}
-                    wrapLongLines={true}
-                    customStyle={{
-                      borderRadius: 10,
-                      paddingTop: 15,
-                      paddingBottom: 10,
-                      paddingLeft: 10,
-                      marginBottom: 20,
-                      maxWidth: '100%',
-                    }}
-                    lineNumberStyle={{
-                      marginRight: 10,
-                    }}
                     style={atomOneDark}
                     showLineNumbers
-                    startingLineNumber={1}
-                    lineProps={() => {
-                      const isHighlighted = false;
-                      return {
-                        className: `${isHighlighted ? 'bg-code-editor-dark-highlight block ml-10 w-full' : ''} pr-8`,
-                      };
+                    lineNumberStyle={{
+                      color: '#64748B',
+                      fontSize: '16px',
+                      paddingRight: '10px',
+                    }}
+                    customStyle={{
+                      padding: '12px',
+                      fontFamily: 'monospace',
+                      fontSize: '16px',
                     }}
                     codeTagProps={{
-                      className: 'mr-8',
+                      style: {
+                        fontFamily: 'monospace',
+                      },
                     }}
                   >
                     {code}