From 4e37a05c26e1cb5613bb95741d71ef54df2b7f59 Mon Sep 17 00:00:00 2001 From: Muhammad-Saad12 Date: Tue, 21 Feb 2023 19:38:55 +0500 Subject: [PATCH 1/3] Fix fonts and added MUI --- package.json | 3 + src/components/CodeEditor/index.js | 1 + src/css/custom.css | 23 +-- src/pages/index.js | 118 +++++++++++-- src/pages/index.module.css | 6 + yarn.lock | 262 ++++++++++++++++++++++++++++- 6 files changed, 378 insertions(+), 35 deletions(-) diff --git a/package.json b/package.json index ae204cd..e407139 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,10 @@ "@codemirror/lang-python": "^6.1.1", "@docusaurus/core": "2.2.0", "@docusaurus/preset-classic": "2.2.0", + "@emotion/react": "^11.10.6", + "@emotion/styled": "^11.10.6", "@mdx-js/react": "^1.6.22", + "@mui/material": "^5.11.10", "@uiw/codemirror-extensions-langs": "^4.19.4", "@uiw/codemirror-themes": "^4.19.4", "@uiw/react-codemirror": "^4.19.4", diff --git a/src/components/CodeEditor/index.js b/src/components/CodeEditor/index.js index c3114d4..a30995b 100644 --- a/src/components/CodeEditor/index.js +++ b/src/components/CodeEditor/index.js @@ -37,6 +37,7 @@ class CodeEditor extends React.PureComponent { const { value } = this.state; return ( + { } function HomepageHeader() { + const {siteConfig} = useDocusaurusContext(); return (
@@ -148,7 +155,7 @@ function HomepageHeader() { const initialCodes = [ { id: "hello_world", - name: "Simple Hello World", + name: " Simple Hello World", en: `print("Hello world!")` }, { @@ -327,15 +334,54 @@ export default function Home() { }}> */} + {/* ***************************************** + ********DIV FOR THE TOP SECTION************** + *********************************************** + *********************************************** */}
- { @@ -357,16 +403,38 @@ export default function Home() { }) } - + */}
- + */}
+ {/* IDE convertor button */}
+ + + { + console.log("e.target.value:", e.target.value); + console.log(`languages.find(l => l.id === e.target.value)`, languages.find(l => l.id === e.target.value)) + setTargetLanguage(languages.find(l => l.id === e.target.value)); + setIsDetected(false); + }} + value={targetLanguage?.id} + > + { + languages.map((l, idx) => { + return ( + {l.name} {targetLanguage?.id === l.id ? isDetected ? " - detected" : "" : ""} + ) + }) + } + + - */} Date: Tue, 21 Feb 2023 20:39:45 +0500 Subject: [PATCH 2/3] Fix font on all languages and removed unnecessary code --- src/css/custom.css | 6 +- src/pages/index.js | 134 +++++++------------------------------ src/pages/index.module.css | 2 +- 3 files changed, 28 insertions(+), 114 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index aeb3b0b..7d3e0a6 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -7,13 +7,11 @@ + @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400&display=swap'); - @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap'); /* You can override the default Infima variables here. */ :root { - /* --ifm-font-family-base: "Roboto Mono"; */ - /* --ifm-font-family-mono: "Robot Mono"; */ - /* --ifm-font-family-mono: "Roboto Mono"; */ + --ifm-color-primary: #2e8555; --ifm-color-primary-dark: #29784c; --ifm-color-primary-darker: #277148; diff --git a/src/pages/index.js b/src/pages/index.js index 97eab93..0fc452a 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -7,21 +7,10 @@ import Layout from '@theme/Layout'; import HomepageFeatures from '@site/src/components/HomepageFeatures'; import CodeEditor from '@site/src/components/CodeEditor2'; import { Box,TextField,MenuItem } from '@mui/material'; -import Select, { SelectChangeEvent } from '@mui/material/Select' - - - - - import useGeoLocation from "react-ipgeolocation"; - import { useColorMode } from '@docusaurus/theme-common'; - - -import { EditorView } from '@codemirror/view'; - +import { EditorView } from '@codemirror/view'; import { Blocks } from 'react-loader-spinner' - import useIsBrowser from '@docusaurus/useIsBrowser'; @@ -43,7 +32,7 @@ export const defaultLightThemeOption = EditorView.theme( import styles from './index.module.css'; import { height } from '@mui/system'; - +//Array of Languages on right side of code editor const languages = [ { @@ -55,8 +44,9 @@ const languages = [ direction: "rtl", fontFamily: "'Roboto Mono'", toEnglishDict: "'languages/ur/ur_native.lang.yaml'", + fontWeights: "bold", style: { - fontWeight: "bold", + direction: "rtl" } }, @@ -67,17 +57,18 @@ const languages = [ code2: "hi", name: "Hindi", i18nName: "Hindi", - fontFamily: "'Hack', 'Courier New', monospaced", + fontFamily: "'Roboto Mono'", + toEnglishDict: "'languages/hi/hi_native.lang.yaml'", }, { id: "EN", - // default: true, code3: "eng", code2: "en", name: "English", i18nName: "English", - fontFamily: "'Hack', 'Courier New', monospaced", + fontFamily: "'Roboto Mono'", + } ] @@ -339,15 +330,15 @@ export default function Home() { *********************************************** *********************************************** */} -
+
- { + { console.log("e.target.value:", e.target.value); console.log(`languages.find(l => l.id === e.target.value)`, initialCodes.find(l => l.id === e.target.value)) setCode(initialCodes.find(l => l.id === e.target.value).en); @@ -367,54 +358,24 @@ export default function Home() { } Custom - - + {/* ***************************************** + ********DIV FOR THE LANGUAGE SECTION********** + *********************************************** + ************************************************/} - {/* */} -
-
+
- {/* **************************Language*********************************** */} { console.log("e.target.value:", e.target.value); @@ -434,28 +395,6 @@ export default function Home() { - {/* */} -
- { + { languages.map((l, idx) => { return ( {l.name} {targetLanguage?.id === l.id ? isDetected ? " - detected" : "" : ""} @@ -522,29 +461,6 @@ export default function Home() { -{/* */} Date: Tue, 28 Feb 2023 00:37:36 +0500 Subject: [PATCH 3/3] fix: material ui dark mode --- src/pages/index.js | 47 +++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 44 insertions(+), 3 deletions(-) diff --git a/src/pages/index.js b/src/pages/index.js index 0fc452a..80951e2 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -12,6 +12,8 @@ import { useColorMode } from '@docusaurus/theme-common'; import { EditorView } from '@codemirror/view'; import { Blocks } from 'react-loader-spinner' import useIsBrowser from '@docusaurus/useIsBrowser'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; export const defaultLightThemeOption = EditorView.theme( @@ -183,6 +185,9 @@ with open("chad.txt", "r") as f: export default function Home() { + + + const {siteConfig} = useDocusaurusContext(); const [editorCode, setEditorCode] = useState(initialCodes[0].en); @@ -314,6 +319,9 @@ export default function Home() { + + +
{/*