From 7225b4b69228c0f2738b3fa2026655e05a74418d Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Wed, 1 Mar 2023 23:01:26 +0100 Subject: [PATCH 01/14] feat(codeBox): introduce switching Co-Authored-By: Claudio Wunder --- .../__snapshots__/index.test.tsx.snap | 22 +++++-- .../Codebox/index.module.scss | 9 +-- .../ArticleComponents/Codebox/index.tsx | 57 ++++++++++++------- 3 files changed, 60 insertions(+), 28 deletions(-) diff --git a/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap b/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap index 069bec5298..222540a05c 100644 --- a/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap +++ b/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap @@ -8,10 +8,14 @@ exports[`Codebox component renders correctly 1`] = `
- - HTML - +
diff --git a/src/components/ArticleComponents/Codebox/index.module.scss b/src/components/ArticleComponents/Codebox/index.module.scss index 0cd2be98a0..f415cfeb1c 100644 --- a/src/components/ArticleComponents/Codebox/index.module.scss +++ b/src/components/ArticleComponents/Codebox/index.module.scss @@ -41,8 +41,8 @@ flex-direction: row; justify-content: space-between; - span, - button { + .lang, + .copy { align-items: center; display: inherit; font-size: var(--font-size-code); @@ -51,13 +51,14 @@ width: 86px; } - span { + .lang { background-color: var(--black4); border-radius: 0 0 0.3rem 0; + border-width: 0; color: var(--black9); } - button { + .copy { background-color: var(--black9); border-radius: 0 0 0 0.3rem; border-width: 0; diff --git a/src/components/ArticleComponents/Codebox/index.tsx b/src/components/ArticleComponents/Codebox/index.tsx index 442cb626d6..94da18b94f 100644 --- a/src/components/ArticleComponents/Codebox/index.tsx +++ b/src/components/ArticleComponents/Codebox/index.tsx @@ -20,27 +20,43 @@ const replaceLanguages = (language: string) => .replace(/mjs|cjs|javascript/i, 'js') .replace(/console|shell/i, 'bash'); -const replaceLabelLanguages = (language: string) => - language - .replace(/javascript/i, 'cjs') - .replace(/console|shell/i, 'bash') - .toUpperCase(); - const Codebox = ({ children: { props } }: Props): JSX.Element => { const [parsedCode, setParsedCode] = useState(''); const [copied, copyText] = useCopyToClipboard(); + const [langIndex, setLangIndex] = useState(0); + const [labelLang, setLabelLang] = useState('LANG'); + const [stringCode, setStringCode] = useState(''); // eslint-disable-next-line react/prop-types - const className = props.className || 'text'; - + const className = props.className || 'LANG'; // Language Matches in class const matches = className.match(/language-(?.*)/); - // Language name from classname const language = matches?.groups?.lang || 'text'; + const LabelArray = language.split('|') || ['LANG']; + const codeArray = props.children + ? props.children.toString().split('------\n') + : ['']; - // Actual Code into a stringified format - const stringCode = props.children?.toString() || ''; + const setLabel = () => { + setLabelLang(LabelArray[langIndex]); + }; + + const setCode = () => { + setStringCode(codeArray[langIndex]); + setParsedCode( + sanitize( + highlight(codeArray[langIndex], languages.javascript, 'javascript') + ) + ); + }; + + const handleLangChange = (event: React.MouseEvent) => { + event.preventDefault(); + setLangIndex((langIndex + 1) % LabelArray.length); + setLabel(); + setCode(); + }; const handleCopyCode = async (event: React.MouseEvent) => { event.preventDefault(); @@ -48,21 +64,22 @@ const Codebox = ({ children: { props } }: Props): JSX.Element => { }; useEffect(() => { - const parsedLanguage = replaceLanguages(language); - - const prismLanguage = languages[parsedLanguage] || languages.text; - - setParsedCode( - sanitize(highlight(stringCode, prismLanguage, parsedLanguage)) - ); + setLabel(); + setCode(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( 
       

-        {replaceLabelLanguages(language)}
-        
+        
       


From 7f3d2c92726057d159d5ddafd673b7ef4aa4643a Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Sat, 4 Mar 2023 21:58:49 +0100
Subject: [PATCH 02/14] chore(about): change lang in codebox

---
 content/about/about.en.md | 2 +-
 content/about/about.ja.md | 2 +-
 content/about/about.pt.md | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/about/about.en.md b/content/about/about.en.md
index 656e3ce025..691a6ac730 100644
--- a/content/about/about.en.md
+++ b/content/about/about.en.md
@@ -11,7 +11,7 @@ scalable network applications. In the following "hello world" example, many
 connections can be handled concurrently. Upon each connection, the callback is
 fired, but if there is no work to be done, Node.js will sleep.
 
-```javascript
+```js
 const http = require('http');
 
 const hostname = '127.0.0.1';
diff --git a/content/about/about.ja.md b/content/about/about.ja.md
index 48deb2b26d..8794d90980 100644
--- a/content/about/about.ja.md
+++ b/content/about/about.ja.md
@@ -8,7 +8,7 @@ category: about
 
 Node.js は、非同期のイベントドリブン JavaScript ランタイムとして、スケーラブルなネットワークアプリケーションを構築するために設計されています。次の "hello world" の例では、多くの接続を同時に処理できます。接続を並列に処理することができます。各接続の際に、コールバックが呼び出されます。しかし、何もすることがない場合は、Node.js はスリープします。
 
-```javascript
+```js
 const http = require('http');
 
 const hostname = '127.0.0.1';
diff --git a/content/about/about.pt.md b/content/about/about.pt.md
index 0e739f85bc..1c887439e5 100644
--- a/content/about/about.pt.md
+++ b/content/about/about.pt.md
@@ -8,7 +8,7 @@ category: about
 
 Como executor de JavaScript orientado a eventos assíncronos, a Node está desenhada para construir aplicações de rede escaláveis. No seguinte exemplo "hello world" ou "olá mundo" em Português, várias conexões podem ser manipuladas simultaneamente. Sobre cada conexão, uma função de resposta é disparada, mas se não existe nada a ser feito, a Node.js adormecerá.
 
-```javascript
+```js
 const http = require('http');
 
 const hostname = '127.0.0.1';

From 3d9c3c0e5c8fd276a99431ef0e2ed860f5f2ca77 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Sat, 4 Mar 2023 21:00:41 +0100
Subject: [PATCH 03/14] feat(codebox): update

---
 .../Codebox/index.module.scss                 | 16 +++-
 .../ArticleComponents/Codebox/index.tsx       | 73 ++++++++-----------
 2 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/src/components/ArticleComponents/Codebox/index.module.scss b/src/components/ArticleComponents/Codebox/index.module.scss
index f415cfeb1c..ee03fe3e90 100644
--- a/src/components/ArticleComponents/Codebox/index.module.scss
+++ b/src/components/ArticleComponents/Codebox/index.module.scss
@@ -50,12 +50,20 @@
       justify-content: center;
       width: 86px;
     }
-
-    .lang {
+    .langBox {
       background-color: var(--black4);
       border-radius: 0 0 0.3rem 0;
-      border-width: 0;
-      color: var(--black9);
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      width: 86px;
+
+      .lang {
+        background-color: var(--black4);
+        border-width: 0;
+        color: var(--black9);
+        width: max-content;
+      }
     }
 
     .copy {
diff --git a/src/components/ArticleComponents/Codebox/index.tsx b/src/components/ArticleComponents/Codebox/index.tsx
index 94da18b94f..c4050a5a25 100644
--- a/src/components/ArticleComponents/Codebox/index.tsx
+++ b/src/components/ArticleComponents/Codebox/index.tsx
@@ -24,61 +24,47 @@ const Codebox = ({ children: { props } }: Props): JSX.Element => {
   const [parsedCode, setParsedCode] = useState('');
   const [copied, copyText] = useCopyToClipboard();
   const [langIndex, setLangIndex] = useState(0);
-  const [labelLang, setLabelLang] = useState('LANG');
   const [stringCode, setStringCode] = useState('');
-
   // eslint-disable-next-line react/prop-types
-  const className = props.className || 'LANG';
+  const className = props.className || 'text';
   // Language Matches in class
   const matches = className.match(/language-(?.*)/);
-  // Language name from classname
-  const language = matches?.groups?.lang || 'text';
-  const LabelArray = language.split('|') || ['LANG'];
-  const codeArray = props.children
-    ? props.children.toString().split('------\n')
-    : [''];
-
-  const setLabel = () => {
-    setLabelLang(LabelArray[langIndex]);
-  };
+  const languageOptions = (matches?.groups?.lang || 'text').split('|');
+  const language = languageOptions[langIndex];
+  const codeArray = props.children?props.children.toString().split('-------\n'): [''];
 
-  const setCode = () => {
-    setStringCode(codeArray[langIndex]);
-    setParsedCode(
-      sanitize(
-        highlight(codeArray[langIndex], languages.javascript, 'javascript')
-      )
-    );
-  };
-
-  const handleLangChange = (event: React.MouseEvent) => {
-    event.preventDefault();
-    setLangIndex((langIndex + 1) % LabelArray.length);
-    setLabel();
-    setCode();
-  };
-
-  const handleCopyCode = async (event: React.MouseEvent) => {
+  const handleCopyCode = async (event: React.MouseEvent): Promise => {
     event.preventDefault();
     copyText(stringCode);
   };
+  
+  useEffect(():void => {
+    setStringCode(codeArray[langIndex]);
+
+    const parsedLanguage = replaceLanguages(language);
+    const prismLanguage = languages[parsedLanguage] || languages.text;
 
-  useEffect(() => {
-    setLabel();
-    setCode();
+    setParsedCode(
+      highlight(stringCode, prismLanguage, parsedLanguage)
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [langIndex]);
 
   return (
     
       

-        
+        

+          {languageOptions.map((lang, index) => (
+            
+          ))}
+        

         
@@ -88,6 +74,11 @@ const Codebox = ({ children: { props } }: Props): JSX.Element => {
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{ __html: parsedCode }}
       />
+      

+      language: {language}

+      index: {langIndex}

+      string code:{stringCode}

+      

     

   );
 };

From c1201677d6213595f4bbf62f17f0ab1500353c1a Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Sun, 5 Mar 2023 11:40:52 +0100
Subject: [PATCH 04/14] Feat(codeBox): Fix everything

---
 .../__snapshots__/index.test.tsx.snap         | 29 +++++++++----------
 .../ArticleComponents/Codebox/index.tsx       | 24 +++++++--------
 2 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap b/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap
index 222540a05c..156d58b336 100644
--- a/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap
@@ -8,12 +8,16 @@ exports[`Codebox component renders correctly 1`] = `
     

-      
+        
+
diff --git a/src/components/ArticleComponents/Codebox/index.tsx b/src/components/ArticleComponents/Codebox/index.tsx index c4050a5a25..bf1b451766 100644 --- a/src/components/ArticleComponents/Codebox/index.tsx +++ b/src/components/ArticleComponents/Codebox/index.tsx @@ -24,28 +24,29 @@ const Codebox = ({ children: { props } }: Props): JSX.Element => { const [parsedCode, setParsedCode] = useState(''); const [copied, copyText] = useCopyToClipboard(); const [langIndex, setLangIndex] = useState(0); - const [stringCode, setStringCode] = useState(''); // eslint-disable-next-line react/prop-types const className = props.className || 'text'; // Language Matches in class const matches = className.match(/language-(?.*)/); const languageOptions = (matches?.groups?.lang || 'text').split('|'); const language = languageOptions[langIndex]; - const codeArray = props.children?props.children.toString().split('-------\n'): ['']; + const codeArray = props.children + ? props.children.toString().split('-------\n') + : ['']; - const handleCopyCode = async (event: React.MouseEvent): Promise => { + const handleCopyCode = async ( + event: React.MouseEvent + ): Promise => { event.preventDefault(); - copyText(stringCode); + copyText(codeArray[langIndex]); }; - - useEffect(():void => { - setStringCode(codeArray[langIndex]); + useEffect((): void => { const parsedLanguage = replaceLanguages(language); const prismLanguage = languages[parsedLanguage] || languages.text; setParsedCode( - highlight(stringCode, prismLanguage, parsedLanguage) + sanitize(highlight(codeArray[langIndex], prismLanguage, parsedLanguage)) ); // eslint-disable-next-line react-hooks/exhaustive-deps }, [langIndex]); @@ -61,7 +62,7 @@ const Codebox = ({ children: { props } }: Props): JSX.Element => { className={styles.lang} onClick={() => setLangIndex(index)} > - {lang} + {lang.toLowerCase()} ))} @@ -74,11 +75,6 @@ const Codebox = ({ children: { props } }: Props): JSX.Element => { // eslint-disable-next-line react/no-danger dangerouslySetInnerHTML={{ __html: parsedCode }} /> -
- language: {language}
- index: {langIndex}
- string code:{stringCode}
-
); }; From 75747a03deb46da703357a55d6d071251ae4c94f Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Sun, 5 Mar 2023 12:10:06 +0100 Subject: [PATCH 05/14] Feat(codeBox): update unit test --- .../__snapshots__/index.test.tsx.snap | 271 +++++++++++++++++- .../Codebox/__tests__/index.test.tsx | 54 +++- 2 files changed, 313 insertions(+), 12 deletions(-) diff --git a/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap b/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap index 156d58b336..b79dbc1da9 100644 --- a/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap +++ b/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Codebox component renders correctly 1`] = ` +exports[`Codebox component (multiple langs) renders correctly 1`] = ` 
     

-          html
+          js
+        
+
+ + +`; + +exports[`Codebox component (one lang) renders correctly 1`] = ` +
+ 
+    

+      

+        
+      

+      
     

-    

-      [object Object]
+    

+      
+        <
+      
+      span 
+      
+        class
+      
+      
+        =
+      
+      
+        "token keyword"
+      
+      
+        >
+      
+      
+        const
+      
+      
+        <
+      
+      
+        /
+      
+      span
+      
+        >
+      
+       a 
+      
+        <
+      
+      span 
+      
+        class
+      
+      
+        =
+      
+      
+        "token operator"
+      
+      
+        >=
+      
+      
+        <
+      
+      
+        /
+      
+      span
+      
+        >
+      
+       
+      
+        <
+      
+      span 
+      
+        class
+      
+      
+        =
+      
+      
+        "token number"
+      
+      
+        >
+      
+      
+        1
+      
+      
+        <
+      
+      
+        /
+      
+      span
+      
+        >
+      
+      
+        <
+      
+      span 
+      
+        class
+      
+      
+        =
+      
+      
+        "token punctuation"
+      
+      
+        >
+      
+      
+        ;
+      
+      
+        <
+      
+      
+        /
+      
+      span
+      
+        >
+
diff --git a/src/components/ArticleComponents/Codebox/__tests__/index.test.tsx b/src/components/ArticleComponents/Codebox/__tests__/index.test.tsx index e467286d77..762bccc28d 100644 --- a/src/components/ArticleComponents/Codebox/__tests__/index.test.tsx +++ b/src/components/ArticleComponents/Codebox/__tests__/index.test.tsx @@ -1,6 +1,8 @@ import React from 'react'; import userEvent from '@testing-library/user-event'; import { render, screen } from '@testing-library/react'; +import { highlight, languages } from 'prismjs'; +import { sanitize } from 'isomorphic-dompurify'; import Codebox from '../index'; @@ -16,14 +18,16 @@ afterEach(() => { jest.clearAllMocks(); }); -describe('Codebox component', (): void => { +describe('Codebox component (one lang)', (): void => { + const code = 'const a = 1;'; + const textToCopy = sanitize(highlight(code, languages.js, 'js')); + it('renders correctly', (): void => { - const textToCopy =

text to be copy

; const { container } = render( {{ props: { - className: 'language-html', + className: 'language-js', children: textToCopy, }, }} @@ -33,13 +37,11 @@ describe('Codebox component', (): void => { }); it('renders correctly', async () => { - const textToCopy =

text to be copy

; - render( {{ props: { - className: 'language-html', + className: 'language-js', children: textToCopy, }, }} @@ -57,3 +59,43 @@ describe('Codebox component', (): void => { expect(navigatorClipboardSpy).toHaveBeenCalledWith(textToCopy.toString()); }); }); + +describe('Codebox component (multiple langs)', (): void => { + const code = `const http = require('http'); + ------- + import http from 'http';`; + + it('renders correctly', (): void => { + const { container } = render( + + {{ + props: { + className: 'language-js|language-js', + children: code, + }, + }} + + ); + expect(container).toMatchSnapshot(); + }); + + it('switch between languages', async () => { + render( + + {{ + props: { + className: 'language-js|language-js', + children: code, + }, + }} + + ); + + const buttonElement = screen.getByText('js'); + userEvent.click(buttonElement); + + await screen.findByText('js'); + + expect(screen.getByText('js')).toBeInTheDocument(); + }); +}); From 6fdca4d76cb0a303e45f56a2b104e7a7b9872369 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Tue, 7 Mar 2023 21:53:11 +0100 Subject: [PATCH 06/14] Remove useless type Co-authored-by: Shanmughapriyan S Signed-off-by: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> --- src/components/ArticleComponents/Codebox/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ArticleComponents/Codebox/index.tsx b/src/components/ArticleComponents/Codebox/index.tsx index bf1b451766..64b2c943e2 100644 --- a/src/components/ArticleComponents/Codebox/index.tsx +++ b/src/components/ArticleComponents/Codebox/index.tsx @@ -41,7 +41,7 @@ const Codebox = ({ children: { props } }: Props): JSX.Element => { copyText(codeArray[langIndex]); }; - useEffect((): void => { + useEffect(() => { const parsedLanguage = replaceLanguages(language); const prismLanguage = languages[parsedLanguage] || languages.text; From 4cb36adfe51a14bda571387068507efc62969d4e Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Tue, 7 Mar 2023 22:19:55 +0100 Subject: [PATCH 07/14] feat(codeBox): re-implement replace label --- src/components/ArticleComponents/Codebox/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/ArticleComponents/Codebox/index.tsx b/src/components/ArticleComponents/Codebox/index.tsx index bf1b451766..99b53a8b2d 100644 --- a/src/components/ArticleComponents/Codebox/index.tsx +++ b/src/components/ArticleComponents/Codebox/index.tsx @@ -15,6 +15,9 @@ interface Props { }; } +const replaceLabelLanguages = (language: string) => + language.replace(/console/i, 'bash') + const replaceLanguages = (language: string) => language .replace(/mjs|cjs|javascript/i, 'js') @@ -36,7 +39,7 @@ const Codebox = ({ children: { props } }: Props): JSX.Element => { const handleCopyCode = async ( event: React.MouseEvent - ): Promise => { + ) => { event.preventDefault(); copyText(codeArray[langIndex]); }; @@ -62,7 +65,7 @@ const Codebox = ({ children: { props } }: Props): JSX.Element => { className={styles.lang} onClick={() => setLangIndex(index)} > - {lang.toLowerCase()} + {replaceLabelLanguages(lang.toLowerCase())} ))} From 28bf23bd9124de6806fdc5d957cb17ce61f87b25 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Tue, 7 Mar 2023 22:24:45 +0100 Subject: [PATCH 08/14] Chore(codebox): document codeBox component --- docs/writing-content.md | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 docs/writing-content.md diff --git a/docs/writing-content.md b/docs/writing-content.md new file mode 100644 index 0000000000..e2f43b11db --- /dev/null +++ b/docs/writing-content.md @@ -0,0 +1,41 @@ +# Writing content in Nodejs.dev + +We use Markdown to write content for nodejs.dev. We follow the [CommonMark](https://commonmark.org/) specification. And you can use MDX to write React components in Markdown. + +## Special syntax + +### Code blocks + +> **Note:** we use single cote in examples to avoid conflicts with Markdown syntax. + +To write simple code use this syntax: + +```md + '''js + const foo = 'bar'; + ''' +``` + +**Note:** + +* `js`: is use for simple javascript code. +* `bash`: is use from shell commands. +* `cjs`: is use for CommonJS code. +* `mjs`: is use for ES Modules code. +* `text`: is use for simple text. It will not be highlighted. +* `cpp`: is use for C++ code. +* `c`: is use for C code. +* `json`: is use for JSON code. + +You can have multiple languages in the same code block. For example: + +```md + '''cjs|mjs + const http = require('http'); + ------ + import http from 'http'; + ''' +``` + +You have to use `|` to separate the languages (the "lang" mustn't contains space). +And we use seven dashes (`------`) to separate the code blocks. From 4c205ce7a2d9ad78b61aa1a2316105e7b2bf1ae7 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Tue, 7 Mar 2023 22:31:42 +0100 Subject: [PATCH 09/14] feat(codeBox): suppor `sync|async` --- docs/writing-content.md | 11 +++++++++++ .../ArticleComponents/Codebox/index.module.scss | 2 +- src/components/ArticleComponents/Codebox/index.tsx | 2 +- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/docs/writing-content.md b/docs/writing-content.md index e2f43b11db..de60ae342b 100644 --- a/docs/writing-content.md +++ b/docs/writing-content.md @@ -39,3 +39,14 @@ You can have multiple languages in the same code block. For example: You have to use `|` to separate the languages (the "lang" mustn't contains space). And we use seven dashes (`------`) to separate the code blocks. + +You can switch between `sync` and `async` code blocks. For example: + +```md + '''js + const foo = 'bar'; + ''' + '''js async + const foo = await 'bar'; + ''' +``` diff --git a/src/components/ArticleComponents/Codebox/index.module.scss b/src/components/ArticleComponents/Codebox/index.module.scss index ee03fe3e90..bdbea3cb85 100644 --- a/src/components/ArticleComponents/Codebox/index.module.scss +++ b/src/components/ArticleComponents/Codebox/index.module.scss @@ -56,7 +56,7 @@ display: flex; flex-direction: row; justify-content: center; - width: 86px; + width: 100px; .lang { background-color: var(--black4); diff --git a/src/components/ArticleComponents/Codebox/index.tsx b/src/components/ArticleComponents/Codebox/index.tsx index 0ba247eff2..31872445cd 100644 --- a/src/components/ArticleComponents/Codebox/index.tsx +++ b/src/components/ArticleComponents/Codebox/index.tsx @@ -20,7 +20,7 @@ const replaceLabelLanguages = (language: string) => const replaceLanguages = (language: string) => language - .replace(/mjs|cjs|javascript/i, 'js') + .replace(/sync|async|mjs|cjs|javascript/i, 'js') .replace(/console|shell/i, 'bash'); const Codebox = ({ children: { props } }: Props): JSX.Element => { From b9c6a10bbc824a5c8e15f052e32155699ed6dd60 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Tue, 7 Mar 2023 23:01:42 +0100 Subject: [PATCH 10/14] feat(codeBox): improve unit test --- .../Codebox/__tests__/index.test.tsx | 46 +++++++++++++++++-- .../ArticleComponents/Codebox/index.tsx | 10 ++-- 2 files changed, 45 insertions(+), 11 deletions(-) diff --git a/src/components/ArticleComponents/Codebox/__tests__/index.test.tsx b/src/components/ArticleComponents/Codebox/__tests__/index.test.tsx index 762bccc28d..3cc258d6e0 100644 --- a/src/components/ArticleComponents/Codebox/__tests__/index.test.tsx +++ b/src/components/ArticleComponents/Codebox/__tests__/index.test.tsx @@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react'; import { highlight, languages } from 'prismjs'; import { sanitize } from 'isomorphic-dompurify'; -import Codebox from '../index'; +import Codebox, { replaceLabelLanguages, replaceLanguages } from '../index'; Object.assign(navigator, { clipboard: { @@ -18,6 +18,22 @@ afterEach(() => { jest.clearAllMocks(); }); +describe('Replacer tests', (): void => { + it('replaceLabelLanguages', (): void => { + expect(replaceLabelLanguages('language-console')).toBe('language-bash'); + }); + + it('replaceLanguages', (): void => { + expect(replaceLanguages('language-sync')).toBe('language-js'); + expect(replaceLanguages('language-async')).toBe('language-js'); + expect(replaceLanguages('language-mjs')).toBe('language-js'); + expect(replaceLanguages('language-cjs')).toBe('language-js'); + expect(replaceLanguages('language-javascript')).toBe('language-js'); + expect(replaceLanguages('language-console')).toBe('language-bash'); + expect(replaceLanguages('language-shell')).toBe('language-bash'); + }); +}); + describe('Codebox component (one lang)', (): void => { const code = 'const a = 1;'; const textToCopy = sanitize(highlight(code, languages.js, 'js')); @@ -84,18 +100,38 @@ describe('Codebox component (multiple langs)', (): void => { {{ props: { - className: 'language-js|language-js', + className: 'language-cjs|language-mjs', + children: code, + }, + }} + + ); + + const buttonElement = screen.getByText('cjs'); + userEvent.click(buttonElement); + + await screen.findByText('cjs'); + + expect(screen.getByText('cjs')).toBeInTheDocument(); + }); + + it('switch between sync and async', async () => { + render( + + {{ + props: { + className: 'language-async|language-sync', children: code, }, }} ); - const buttonElement = screen.getByText('js'); + const buttonElement = screen.getByText('async'); userEvent.click(buttonElement); - await screen.findByText('js'); + await screen.findByText('async'); - expect(screen.getByText('js')).toBeInTheDocument(); + expect(screen.getByText('async')).toBeInTheDocument(); }); }); diff --git a/src/components/ArticleComponents/Codebox/index.tsx b/src/components/ArticleComponents/Codebox/index.tsx index 31872445cd..21d562c287 100644 --- a/src/components/ArticleComponents/Codebox/index.tsx +++ b/src/components/ArticleComponents/Codebox/index.tsx @@ -15,10 +15,10 @@ interface Props { }; } -const replaceLabelLanguages = (language: string) => - language.replace(/console/i, 'bash') +export const replaceLabelLanguages = (language: string) => + language.replace(/console/i, 'bash'); -const replaceLanguages = (language: string) => +export const replaceLanguages = (language: string) => language .replace(/sync|async|mjs|cjs|javascript/i, 'js') .replace(/console|shell/i, 'bash'); @@ -37,9 +37,7 @@ const Codebox = ({ children: { props } }: Props): JSX.Element => { ? props.children.toString().split('-------\n') : ['']; - const handleCopyCode = async ( - event: React.MouseEvent - ) => { + const handleCopyCode = async (event: React.MouseEvent) => { event.preventDefault(); copyText(codeArray[langIndex]); }; From a71bc5ffef36a8d742f4b1c500a3f28ca542e076 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Wed, 8 Mar 2023 13:40:54 +0100 Subject: [PATCH 11/14] chore(writing Content) --- docs/writing-content.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/docs/writing-content.md b/docs/writing-content.md index de60ae342b..fd5e5984c1 100644 --- a/docs/writing-content.md +++ b/docs/writing-content.md @@ -30,11 +30,13 @@ To write simple code use this syntax: You can have multiple languages in the same code block. For example: ```md - '''cjs|mjs +```md + ```cjs|mjs const http = require('http'); ------ import http from 'http'; - ''' + + ``` ``` You have to use `|` to separate the languages (the "lang" mustn't contains space). @@ -43,10 +45,10 @@ And we use seven dashes (`------`) to separate the code blocks. You can switch between `sync` and `async` code blocks. For example: ```md - '''js - const foo = 'bar'; - ''' - '''js async - const foo = await 'bar'; - ''' -``` +```md + ```sync|async + const content = fs.readFileSync('file.txt', 'utf8'); + ------ + const content = await fs.readFile('file.txt', 'utf8'); + ``` +``` \ No newline at end of file From 606dbd05e0f29b82b258bf082bd9756c6caaafc6 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Wed, 8 Mar 2023 13:42:36 +0100 Subject: [PATCH 12/14] Delete writing-content.md --- docs/writing-content.md | 54 ----------------------------------------- 1 file changed, 54 deletions(-) delete mode 100644 docs/writing-content.md diff --git a/docs/writing-content.md b/docs/writing-content.md deleted file mode 100644 index fd5e5984c1..0000000000 --- a/docs/writing-content.md +++ /dev/null @@ -1,54 +0,0 @@ -# Writing content in Nodejs.dev - -We use Markdown to write content for nodejs.dev. We follow the [CommonMark](https://commonmark.org/) specification. And you can use MDX to write React components in Markdown. - -## Special syntax - -### Code blocks - -> **Note:** we use single cote in examples to avoid conflicts with Markdown syntax. - -To write simple code use this syntax: - -```md - '''js - const foo = 'bar'; - ''' -``` - -**Note:** - -* `js`: is use for simple javascript code. -* `bash`: is use from shell commands. -* `cjs`: is use for CommonJS code. -* `mjs`: is use for ES Modules code. -* `text`: is use for simple text. It will not be highlighted. -* `cpp`: is use for C++ code. -* `c`: is use for C code. -* `json`: is use for JSON code. - -You can have multiple languages in the same code block. For example: - -```md -```md - ```cjs|mjs - const http = require('http'); - ------ - import http from 'http'; - - ``` -``` - -You have to use `|` to separate the languages (the "lang" mustn't contains space). -And we use seven dashes (`------`) to separate the code blocks. - -You can switch between `sync` and `async` code blocks. For example: - -```md -```md - ```sync|async - const content = fs.readFileSync('file.txt', 'utf8'); - ------ - const content = await fs.readFile('file.txt', 'utf8'); - ``` -``` \ No newline at end of file From 06ff5f9297c9bb5eab6ba6332db213db18fa53df Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Wed, 8 Mar 2023 18:00:10 +0100 Subject: [PATCH 13/14] Feat(codeBox): accord separator with sync of api --- src/components/ArticleComponents/Codebox/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ArticleComponents/Codebox/index.tsx b/src/components/ArticleComponents/Codebox/index.tsx index 21d562c287..4fff987230 100644 --- a/src/components/ArticleComponents/Codebox/index.tsx +++ b/src/components/ArticleComponents/Codebox/index.tsx @@ -34,7 +34,7 @@ const Codebox = ({ children: { props } }: Props): JSX.Element => { const languageOptions = (matches?.groups?.lang || 'text').split('|'); const language = languageOptions[langIndex]; const codeArray = props.children - ? props.children.toString().split('-------\n') + ? props.children.toString().split('--------------\n') : ['']; const handleCopyCode = async (event: React.MouseEvent) => { From 12b855b1295f36e765675c895bcc3a11c7c6f70a Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Wed, 8 Mar 2023 18:15:33 +0100 Subject: [PATCH 14/14] feat(codeBox): updateSnapshots --- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 44 +++++++++++++++++++ .../Codebox/__tests__/index.test.tsx | 2 - .../ArticleComponents/Codebox/index.tsx | 2 +- .../__snapshots__/index.test.tsx.snap | 20 ++++----- .../__snapshots__/index.test.tsx.snap | 24 +++++----- .../__snapshots__/learn.test.tsx.snap | 8 ++-- 7 files changed, 72 insertions(+), 30 deletions(-) diff --git a/src/components/ApiComponents/Components/__tests__/__snapshots__/index.test.tsx.snap b/src/components/ApiComponents/Components/__tests__/__snapshots__/index.test.tsx.snap index 7d68783720..cdbdfc6f50 100644 --- a/src/components/ApiComponents/Components/__tests__/__snapshots__/index.test.tsx.snap +++ b/src/components/ApiComponents/Components/__tests__/__snapshots__/index.test.tsx.snap @@ -54,7 +54,7 @@ exports[`ApiComponents Components renders JsonLink component correctly 1`] = ` xmlns="http://www.w3.org/2000/svg" > diff --git a/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap b/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap index b79dbc1da9..7133d858bd 100644 --- a/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap +++ b/src/components/ArticleComponents/Codebox/__tests__/__snapshots__/index.test.tsx.snap @@ -73,6 +73,50 @@ exports[`Codebox component (multiple langs) renders correctly 1`] = ` + + -- + + + -- + + + -- + + + - + + + + + import + + http + + from + + + + 'http' + + + ; + diff --git a/src/components/ArticleComponents/Codebox/__tests__/index.test.tsx b/src/components/ArticleComponents/Codebox/__tests__/index.test.tsx index 3cc258d6e0..4f6e3a00bd 100644 --- a/src/components/ArticleComponents/Codebox/__tests__/index.test.tsx +++ b/src/components/ArticleComponents/Codebox/__tests__/index.test.tsx @@ -24,8 +24,6 @@ describe('Replacer tests', (): void => { }); it('replaceLanguages', (): void => { - expect(replaceLanguages('language-sync')).toBe('language-js'); - expect(replaceLanguages('language-async')).toBe('language-js'); expect(replaceLanguages('language-mjs')).toBe('language-js'); expect(replaceLanguages('language-cjs')).toBe('language-js'); expect(replaceLanguages('language-javascript')).toBe('language-js'); diff --git a/src/components/ArticleComponents/Codebox/index.tsx b/src/components/ArticleComponents/Codebox/index.tsx index 4fff987230..97a2492320 100644 --- a/src/components/ArticleComponents/Codebox/index.tsx +++ b/src/components/ArticleComponents/Codebox/index.tsx @@ -20,7 +20,7 @@ export const replaceLabelLanguages = (language: string) => export const replaceLanguages = (language: string) => language - .replace(/sync|async|mjs|cjs|javascript/i, 'js') + .replace(/mjs|cjs|javascript/i, 'js') .replace(/console|shell/i, 'bash'); const Codebox = ({ children: { props } }: Props): JSX.Element => { diff --git a/src/components/ArticleComponents/Pagination/__tests__/__snapshots__/index.test.tsx.snap b/src/components/ArticleComponents/Pagination/__tests__/__snapshots__/index.test.tsx.snap index dac2fcd52d..e1192b8da1 100644 --- a/src/components/ArticleComponents/Pagination/__tests__/__snapshots__/index.test.tsx.snap +++ b/src/components/ArticleComponents/Pagination/__tests__/__snapshots__/index.test.tsx.snap @@ -18,11 +18,11 @@ exports[`Pagination component only renders links to pages that has a title 1`] = focusable="false" role="img" style="margin-right: 5px;" - viewBox="0 0 512 512" + viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" > @@ -52,11 +52,11 @@ exports[`Pagination component renders correctly when there is no next page 1`] = focusable="false" role="img" style="margin-right: 5px;" - viewBox="0 0 512 512" + viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" > @@ -88,11 +88,11 @@ exports[`Pagination component renders correctly when there is no previous page 1 focusable="false" role="img" style="margin-left: 5px;" - viewBox="0 0 512 512" + viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" > @@ -120,11 +120,11 @@ exports[`Pagination component renders links to the next and previous page 1`] = focusable="false" role="img" style="margin-right: 5px;" - viewBox="0 0 512 512" + viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" > @@ -145,11 +145,11 @@ exports[`Pagination component renders links to the next and previous page 1`] = focusable="false" role="img" style="margin-left: 5px;" - viewBox="0 0 512 512" + viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" > diff --git a/src/sections/Article/__tests__/__snapshots__/index.test.tsx.snap b/src/sections/Article/__tests__/__snapshots__/index.test.tsx.snap index 58be604a74..dc23e96e5d 100644 --- a/src/sections/Article/__tests__/__snapshots__/index.test.tsx.snap +++ b/src/sections/Article/__tests__/__snapshots__/index.test.tsx.snap @@ -156,11 +156,11 @@ exports[`Article component renders correctly 1`] = ` focusable="false" role="img" style="margin-right: 5px;" - viewBox="0 0 512 512" + viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" > @@ -181,11 +181,11 @@ exports[`Article component renders correctly 1`] = ` focusable="false" role="img" style="margin-left: 5px;" - viewBox="0 0 512 512" + viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" > @@ -451,11 +451,11 @@ exports[`Article component renders correctly in case body ref is null 1`] = ` focusable="false" role="img" style="margin-right: 5px;" - viewBox="0 0 512 512" + viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" > @@ -476,11 +476,11 @@ exports[`Article component renders correctly in case body ref is null 1`] = ` focusable="false" role="img" style="margin-left: 5px;" - viewBox="0 0 512 512" + viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" > @@ -652,11 +652,11 @@ exports[`Article component should accept and render child components 1`] = ` focusable="false" role="img" style="margin-right: 5px;" - viewBox="0 0 512 512" + viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" > @@ -677,11 +677,11 @@ exports[`Article component should accept and render child components 1`] = ` focusable="false" role="img" style="margin-left: 5px;" - viewBox="0 0 512 512" + viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" > diff --git a/src/templates/__tests__/__snapshots__/learn.test.tsx.snap b/src/templates/__tests__/__snapshots__/learn.test.tsx.snap index 038b58bf68..cc465a49bc 100644 --- a/src/templates/__tests__/__snapshots__/learn.test.tsx.snap +++ b/src/templates/__tests__/__snapshots__/learn.test.tsx.snap @@ -518,11 +518,11 @@ exports[`Learn Template renders correctly 1`] = ` focusable="false" role="img" style="margin-right: 5px;" - viewBox="0 0 512 512" + viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" > @@ -543,11 +543,11 @@ exports[`Learn Template renders correctly 1`] = ` focusable="false" role="img" style="margin-left: 5px;" - viewBox="0 0 512 512" + viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" >