add custom codebox

Author: gdams

babel.config.json

@@ -2,5 +2,15 @@
     "presets": [
       [ "@babel/preset-env", { "targets": { "node": true } } ],
       [ "@babel/preset-react" ]
+    ],
+    "plugins": [
+      [
+        "prismjs",
+        {
+          "languages": ["js", "css", "yaml", "bash", "batch", "markup", "json", "powershell"],
+          "plugins": [],
+          "css": false
+        }
+      ]
     ]
   }

content/blog/gpg-signed-releases/index.md

@@ -88,7 +88,7 @@ signatures.  You can then run the following command to check the signature by su
 
 If you do not currently have the Adoptium project's public signing key you will get a message such as this:
 
-```output
+```text
 gpg: directory '/home/sxa/.gnupg' created
 gpg: keybox '/home/sxa/.gnupg/pubring.kbx' created
 gpg: Signature made Mon Jul  4 18:20:31 2022 UTC
@@ -104,7 +104,7 @@ example to use the Ubuntu key servers run this command:
 
 If you then run the verify command you will get a message indicating that the newly imported key has not been trusted:
 
-```output
+```text
 gpg: Good signature from "Adoptium GPG Key (DEB/RPM Signing Key)
 <[email protected]>" [unknown] gpg: WARNING: This key is not certified
 with a trusted signature!  gpg: There is no indication that the signature
@@ -122,7 +122,7 @@ gpg --edit-key 3B04D753C9050D9A5D343F39843C48A565F8F04B trust
 
 The verification should then succeed as follows:
 
-```output
+```text
 gpg: Signature made Mon Jul  4 18:20:31 2022 UTC
 gpg:                using RSA key 3B04D753C9050D9A5D343F39843C48A565F8F04B
 gpg: checking the trustdb

content/blog/jlink-to-produce-own-runtime/index.md

@@ -62,7 +62,7 @@ the ones which your runtime supports with `java --list-modules`. At the time
 of writing, using the `jdk-17+35` release, the list of extra modules is as
 follows:
 
-```output
+```text
  jdk.attach
  jdk.compiler
  jdk.editpad

content/mdx-docs/installation/linux/index.md

@@ -14,14 +14,14 @@ Eclipse Temurin RPM and DEB packages are now available for installing on your fa
 
 The following name schema is being used:
 
-```output
+```text
 temurin-<version>-jdk
 e.g temurin-17-jdk or temurin-8-jdk
 ```
 
 ## Deb installation on Debian or Ubuntu
 
-. Ensure the necessary packages are present:
+Ensure the necessary packages are present:
 
 ```bash
 apt install -y wget apt-transport-https

gatsby-config.js

@@ -140,7 +140,7 @@ module.exports = {
             }
           },
           'gatsby-remark-autolink-headers',
-          'gatsby-remark-prismjs',
+          // 'gatsby-remark-prismjs',
           'gatsby-remark-copy-linked-files',
           'gatsby-remark-smartypants'
         ]

package-lock.json

@@ -39,7 +39,6 @@
     "gatsby-remark-smartypants": "^6.4.0",
     "gatsby-source-filesystem": "^5.4.0",
     "gatsby-transformer-sharp": "^5.4.0",
-    "highlight.js": "^11.6.0",
     "html-to-text": "^9.0.3",
     "i18next": "^22.4.9",
     "iso-639-1": "^2.1.15",
@@ -70,13 +69,15 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/gatsbyjs__reach-router": "^1.3.0",
+    "@types/prismjs": "^1.26.0",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@types/react-test-renderer": "^18.0.0",
     "@types/react-world-flags": "^1.4.2",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@vitejs/plugin-react": "^3.0.1",
     "@vitest/coverage-c8": "^0.27.2",
+    "babel-plugin-prismjs": "^2.1.0",
     "babel-preset-gatsby": "^3.4.0",
     "cross-fetch": "^3.1.5",
     "gatsby-cli": "^5.4.0",

package.json

@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './index.module.scss';
+
+const InlineCode = ({ children }: React.PropsWithChildren): JSX.Element => (
+  <code className={styles.code}>{children}</code>
+);
+
+export default InlineCode;

src/components/CodeBox/InlineCode.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
+
+import CodeBox from '../index';
+
+Object.assign(navigator, {
+  clipboard: {
+    writeText: vi.fn(),
+  },
+});
+
+const navigatorClipboardSpy = vi.spyOn(navigator.clipboard, 'writeText');
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('Codebox component', (): void => {
+  it('renders correctly', (): void => {
+    const textToCopy = <p>text to be copy</p>;
+    const { container } = render(
+      <CodeBox>
+        {{
+          props: {
+            className: 'language-html',
+            children: textToCopy,
+          },
+        }}
+      </CodeBox>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders correctly', async () => {
+    const textToCopy = <p>text to be copy</p>;
+
+    render(
+      <CodeBox>
+        {{
+          props: {
+            className: 'language-html',
+            children: textToCopy,
+          },
+        }}
+      </CodeBox>
+    );
+
+    navigatorClipboardSpy.mockImplementationOnce(() => Promise.resolve());
+
+    const buttonElement = screen.getByText('copy');
+    userEvent.click(buttonElement);
+
+    await screen.findByText('copied');
+
+    expect(navigatorClipboardSpy).toHaveBeenCalledTimes(1);
+    expect(navigatorClipboardSpy).toHaveBeenCalledWith(textToCopy.toString());
+  });
+});

src/components/CodeBox/__tests__/CodeBox.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+
+import InlineCode from '../InlineCode';
+
+describe('InlineCode component', (): void => {
+  it('renders correctly', (): void => {
+    const { container } = render(
+      <InlineCode>
+        This is some sample code
+      </InlineCode>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/CodeBox/__tests__/InlineCode.test.tsx

@@ -0,0 +1,27 @@
+// Vitest Snapshot v1
+
+exports[`Codebox component > renders correctly 1`] = `
+<div>
+  <pre
+    class="_pre_4cf629 language-html"
+  >
+    <div
+      class="_top_4cf629"
+    >
+      <span>
+        HTML
+      </span>
+      <button
+        type="button"
+      >
+        copy
+      </button>
+    </div>
+    <div
+      class="_content_4cf629"
+    >
+      [object Object]
+    </div>
+  </pre>
+</div>
+`;

src/components/CodeBox/__tests__/__snapshots__/CodeBox.test.tsx.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1
+
+exports[`InlineCode component > renders correctly 1`] = `
+<div>
+  <code
+    class="_code_4cf629"
+  >
+    This is some sample code
+  </code>
+</div>
+`;