AFP-229 Render code in markdown docs using the atlaskit code component

* Render code in markdown docs using the atlaskit code component

* Disable line numbers in code blocks

* Add changeset

Author: dpisani-atl

.changeset/38881e12/changes.json

@@ -0,0 +1,4 @@
+{
+  "releases": [{ "name": "@brisk-docs/website", "type": "patch" }],
+  "dependents": []
+}

.changeset/38881e12/changes.md

@@ -0,0 +1 @@
+- Display code blocks in markdown as syntax highlighted 

.eslintrc

@@ -25,30 +25,37 @@
       "never",
       { "css": "ignorePackages", "json": "always" }
     ],
-    "react/sort-comp": "off"
+    "react/sort-comp": "off",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": [
+          "**/*.test.js",
+          "**/*.spec.js",
+          "**/*.test.ts",
+          "**/*.spec.ts",
+          "**/*.test.tsx",
+          "**/*.spec.tsx"
+        ]
+      }
+    ]
   },
   "settings": {
     "import/resolver": {
-        "node": {
-          "extensions": [
-            ".js",
-            ".jsx",
-            ".ts",
-            ".tsx"
-          ]
-        }
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
       }
-    
+    }
   },
   "overrides": [
-        {
-            "files": ["**/**/*.ts", "**/**/*.tsx"],
-            "parser": "@typescript-eslint/parser",
-            "plugins": ["emotion", "@typescript-eslint"],
-            "rules": {
-                "no-unused-vars": "off",
-                "@typescript-eslint/no-unused-vars": "error"
-            }
-        }
-    ]
+    {
+      "files": ["**/**/*.ts", "**/**/*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["emotion", "@typescript-eslint"],
+      "rules": {
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": "error"
+      }
+    }
+  ]
 }

package.json

@@ -40,6 +40,7 @@
         "@atlaskit/avatar": "^14.1.8",
         "@atlaskit/banner": "^8.0.1",
         "@atlaskit/button": "^8.2.4",
+        "@atlaskit/code": "^9.0.0",
         "@atlaskit/css-reset": "^3.0.5",
         "@atlaskit/docs": "^6.0.2",
         "@atlaskit/drawer": "^2.7.1",

packages/website/README.md

@@ -7,13 +7,13 @@ docs alongside your code.
 
 Start by installing Brisk Docs in your project
 
-```sh
+```shell
 npm install @brisk-docs/website
 ```
 
 To start your docs website locally, simply run:
 
-```sh
+```shell
 npm run brisk
 ```
 

packages/website/bin/page-generator/index.js

@@ -84,14 +84,15 @@ function generatePackagePages(packageInfo, generatorConfig) {
 
       const rawPagesPath = path.join(homePath, 'examples/isolated', example.id);
       const isolatedPath = path.join('/', `${rawPagesPath}`);
+      const pageTitle = titleCase(example.id);
 
       generateExamplePage(
         `${pagePath}.js`,
         `${rawPagesPath}.js`,
         example.path,
-        { ...pageData, isolatedPath },
+        { ...pageData, isolatedPath, pageTitle },
         generatorConfig,
-        titleCase(example.id),
+        pageTitle,
       );
 
       return {

packages/website/components/mdx/code/block.test.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { AkCodeBlock } from '@atlaskit/code';
+
+import CodeBlock from './block';
+
+const sampleCode = 'const x = 1;';
+
+describe('Code block markdown component', () => {
+  it('renders a AkCodeBlock component', () => {
+    const wrapper = shallow(<CodeBlock>{sampleCode}</CodeBlock>);
+    const codeBlocks = wrapper.find(AkCodeBlock);
+    expect(codeBlocks).toHaveLength(1);
+    expect(codeBlocks.first().props()).toHaveProperty('text', sampleCode);
+  });
+
+  it('transforms the language classname to select the rendered language', () => {
+    const wrapper = shallow(
+      <CodeBlock className="language-js">{sampleCode}</CodeBlock>,
+    );
+
+    expect(
+      wrapper
+        .find(AkCodeBlock)
+        .first()
+        .props(),
+    ).toHaveProperty('language', 'js');
+  });
+});

packages/website/components/mdx/code/block.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { AkCodeBlock } from '@atlaskit/code';
+
+interface Props {
+  children: string;
+  className?: string;
+}
+
+const getLanguageName = (className: string) => {
+  return className.replace(/language-/, '');
+};
+
+export default ({ children, className }: Props) => (
+  <AkCodeBlock
+    text={children}
+    language={className && getLanguageName(className)}
+    showLineNumbers={false}
+  />
+);

packages/website/components/mdx/code/index.ts

@@ -0,0 +1,2 @@
+export { default as CodeBlock } from './block';
+export { default as InlineCode } from './inline';

packages/website/components/mdx/code/inline.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AkCode } from '@atlaskit/code';
+
+interface Props {
+  children: string;
+}
+
+export default ({ children }: Props) => <AkCode text={children} />;