merged with main

Author: Akshaybagai52

.eslintrc.js

@@ -2,58 +2,59 @@ module.exports = {
   env: {
     es2021: true,
     node: true,
-    browser: true
+    browser: true,
   },
   settings: {
     react: {
-      version: 'detect'
-    }
+      version: 'detect',
+    },
   },
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
     'plugin:@next/next/recommended',
-    'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
-      jsx: true
+      jsx: true,
     },
     ecmaVersion: 12,
-    sourceType: 'module'
+    sourceType: 'module',
   },
-  plugins: [
-    'react',
-    '@typescript-eslint',
-    'prettier'
-  ],
+  plugins: ['react', '@typescript-eslint', 'prettier'],
   rules: {
     'array-bracket-spacing': ['error', 'never'],
     'object-curly-spacing': ['error', 'always'],
-    'react/jsx-curly-spacing': ['error', { 'when': 'never', 'children': true }],
-    'indent': ['error', 2, { 'SwitchCase': 1 }],
+
+    'react/jsx-curly-spacing': ['error', { when: 'never', children: true }],
+    indent: ['error', 2, { SwitchCase: 1 }],
     'linebreak-style': ['error', 'unix'],
-    'quotes': ['error', 'single'],
+    quotes: ['error', 'single'],
+
     'jsx-quotes': ['error', 'prefer-single'],
     'no-eval': 'error',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
-    '@typescript-eslint/no-unused-vars': ['error', { 'ignoreRestSiblings': true }],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { ignoreRestSiblings: true },
+    ],
     '@typescript-eslint/type-annotation-spacing': ['error'],
     'react/no-unescaped-entities': 'off',
     'react/jsx-tag-spacing': 'error',
     'react-hooks/exhaustive-deps': 'off',
-    'keyword-spacing': ['error', { 'before': true, 'after': true }],
-    'comma-spacing': ['error', { 'before': false, 'after': true }],
-    'key-spacing': ['error', { 'beforeColon': false, 'afterColon': true }],
+    'keyword-spacing': ['error', { before: true, after: true }],
+    'comma-spacing': ['error', { before: false, after: true }],
+    'key-spacing': ['error', { beforeColon: false, afterColon: true }],
     '@next/next/no-img-element': 'off',
     'no-multi-spaces': 'error',
     'space-infix-ops': 'error',
     'space-before-blocks': 'error',
-    'arrow-spacing': 'error'
-  }
-}
+    'arrow-spacing': 'error',
+  },
+};

.github/workflows/welcome-first-time-contrib.yml

@@ -1,7 +1,16 @@
 name: Greeting the new contributor 
 
+<<<<<<< HEAD
 on: [pull_request, issues]
 
+=======
+on:
+  pull_request_target:
+    types: [opened] 
+  issues:
+    types: [opened]  
+    
+>>>>>>> 7b97d3088cb76b3a9155bb0e180727d5bb625af5
 jobs:
   greeting:
     runs-on: ubuntu-latest

components/Code.tsx

@@ -8,8 +8,8 @@ export default function Code({ children }: { children: any }) {
   return (
     <code
       className={classnames('font-mono rounded px-1.5 py-0.5', {
-        'bg-slate-100': blockContext === null,
-        'bg-amber-200': blockContext === BlockContextValue.Information,
+        'bg-slate-100 dark:bg-slate-900': blockContext === null,
+        'bg-amber-200': blockContext === BlockContextValue.Infobox,
         'text-white': blockContext === BlockContextValue.CodeBlock,
       })}
     >

components/DarkModeToggle.tsx

@@ -0,0 +1,42 @@
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+import React from 'react';
+
+const DarkModeToggle = () => {
+  const { theme, setTheme } = useTheme();
+  const [isDarkMode, setIsDarkMode] = useState(theme === 'dark');
+  const [isClickable, setIsClickable] = useState(true);
+  const [img, setImg] = useState('/icons/moon.svg');
+
+  const toggleDarkMode = () => {
+    if (!isClickable) return;
+
+    setIsClickable(false);
+    const newTheme = isDarkMode ? 'light' : 'dark';
+    setTheme(newTheme);
+    setIsDarkMode(!isDarkMode);
+
+    setTimeout(() => {
+      setIsClickable(true);
+    }, 500);
+  };
+
+  useEffect(() => {
+    if (!theme) setTheme('light');
+
+    const img = theme === 'dark' ? '/icons/sun.svg' : '/icons/moon.svg';
+    setImg(img);
+  }, [theme, setTheme]);
+
+  return (
+    <button
+      onClick={toggleDarkMode}
+      className='dark-mode-toggle rounded-md dark:hover:bg-gray-700 p-1.5 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition duration-150'
+      disabled={!isClickable}
+    >
+      <img src={img} alt='Dark Mode' width={25} height={25} />
+    </button>
+  );
+};
+
+export default DarkModeToggle;

components/DocsHelp.tsx

@@ -65,7 +65,7 @@ export function DocsHelp() {
   };
 
   return (
-    <section className='mt-10 mb-4 text-gray-600'>
+    <section className='mt-10 mb-4 text-gray-600 dark:text-white'>
       <h2 className='text-[24px] font-semibold'>Need Help?</h2>
       <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 pt-10 border-t border-gray-600'>
         <div>
@@ -90,7 +90,7 @@ export function DocsHelp() {
                     value='Y'
                   ></input>
                   <label
-                    className='px-[16px] py-[8px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md peer-checked/feedback-survery-yes:bg-[#1f6feb] peer-checked/feedback-survery-yes:text-white hover:bg-gray-200'
+                    className='px-[16px] py-[8px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md peer-checked/feedback-survery-yes:bg-[#1f6feb] peer-checked/feedback-survery-yes:text-white hover:bg-gray-200 dark:hover:bg-gray-600'
                     htmlFor='feedback-survey-yes'
                     onClick={() => {
                       setIsFormOpen(true);
@@ -118,7 +118,7 @@ export function DocsHelp() {
                     value='N'
                   ></input>
                   <label
-                    className='px-[16px] py-[8px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md mx-2 peer-checked/feedback-survery-no:bg-[#da3633] peer-checked/feedback-survery-no:text-white hover:bg-gray-200'
+                    className='px-[16px] py-[8px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md mx-2 peer-checked/feedback-survery-no:bg-[#da3633] peer-checked/feedback-survery-no:text-white hover:bg-gray-200 dark:hover:bg-gray-600'
                     htmlFor='feedback-survey-no'
                     onClick={() => {
                       setIsFormOpen(true);
@@ -165,7 +165,7 @@ export function DocsHelp() {
                     <div className='flex justify-start items-center mt-1 text-[14px]'>
                       <button
                         type='submit'
-                        className={`px-[16px] py-[7px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md ${isSubmitting ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-200'}`}
+                        className={`px-[16px] py-[7px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md ${isSubmitting ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-200 dark:hover:bg-gray-600'}`}
                         disabled={isSubmitting}
                       >
                         <svg
@@ -187,7 +187,7 @@ export function DocsHelp() {
                     <div className='flex justify-start items-center mt-1 text-[14px]'>
                       <button
                         type='button'
-                        className={`px-[16px] py-[7px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md ${isSubmitting ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-200'}`}
+                        className={`px-[16px] py-[7px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md ${isSubmitting ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-200 dark:hover:bg-gray-600'}`}
                         disabled={isSubmitting}
                         onClick={createGitHubIssueHandler}
                       >
@@ -249,7 +249,7 @@ export function DocsHelp() {
             <a
               target='_blank'
               rel='noreferrer'
-              className='px-[16px] py-[8px] cursor-pointer border-solid border-[#aaaaaa] border rounded-md hover:bg-gray-200'
+              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/orgs/json-schema-org/projects/16'
             >
               <svg

components/Headlines.tsx

@@ -85,7 +85,7 @@ const Headline1Tag = ({ children, attributes }: TagProps) => (
     {...attributes}
     className={classnames(
       attributes?.className,
-      'text-h1mobile md:text-h1  font-bold pt-10 mb-6',
+      'text-h1mobile md:text-h1 dark:text-slate-200  font-bold pt-10 mb-6',
     )}
   >
     {children}
@@ -96,7 +96,7 @@ const Headline2Tag = ({ children, attributes }: TagProps) => (
     {...attributes}
     className={classnames(
       attributes?.className,
-      'text-h2mobile md:text-h2 font-semibold mt-10 mb-4',
+      'text-h2mobile md:text-h2 dark:text-slate-200 font-semibold mt-10 mb-4',
     )}
   >
     {children}
@@ -107,7 +107,7 @@ const Headline3Tag = ({ children, attributes }: TagProps) => (
     {...attributes}
     className={classnames(
       attributes?.className,
-      'text-h3mobile md:text-h3 font-semibold mt-6 mb-3',
+      'text-h3mobile dark:text-slate-200 md:text-h3 font-semibold mt-6 mb-3',
     )}
   >
     {children}
@@ -118,7 +118,7 @@ const Headline4Tag = ({ children, attributes }: TagProps) => (
     {...attributes}
     className={classnames(
       attributes?.className,
-      'text-h4mobile md:text-h4 font-semibold mt-4 mb-2',
+      'text-h4mobile dark:text-slate-200 md:text-h4 font-semibold mt-4 mb-2',
     )}
   >
     {children}