Merge pull request #28 from victorg1991/code-tabs

Add a way to add labels different than the code language in code tabs

content/onboarding/one.md

@@ -6,9 +6,12 @@ stepNumber: 1
 
 #### Github
 Clone the project running
-```sh
+```bash http
 git clone https://github.com/diegonvs/gatsby-boilerplate.git
 ```
+```bash ssh
+git clone [email protected]:diegonvs/gatsby-boilerplate.git
+```
 and after access `gatsby-boilerplate/` folder and run `yarn`.
 
 #### Gatsby CLI

gatsby-config.js

@@ -31,6 +31,9 @@ module.exports = {
 			options: {
 				extensions: ['.mdx', '.md'],
 				gatsbyRemarkPlugins: [
+					{
+						resolve: path.resolve(__dirname, './plugins/gatsby-remark-code-label-extractor'),
+					},
 					{
 						resolve: path.resolve(__dirname, './plugins/gatsby-remark-foreach-icons'),
 					},

plugins/gatsby-remark-code-label-extractor/index.js

@@ -0,0 +1,14 @@
+const visit = require("unist-util-visit");
+
+module.exports = ({ markdownAST }) => {
+    visit(markdownAST, "code", node => {
+        if (node.lang) {
+            const [lang, label] = node.lang.split(" ");
+
+            node.lang = lang;
+            node.label = label || lang;
+        }
+
+        return node;
+    });
+};

plugins/gatsby-remark-code-label-extractor/package.json

@@ -0,0 +1,4 @@
+{
+	"name": "gatsby-remark-code-label-extractor",
+	"version": "0.0.1"
+  }

plugins/gatsby-remark-use-clipboard/index.js

@@ -6,7 +6,7 @@ module.exports = ({markdownAST}) => {
             return;
         }
 
-        node.value = `<div class="code-container">
+        node.value = `<div class="code-container" data-label="${node.label}">
             <button class="btn btn-sm btn-copy" title="Copy"><svg class="lexicon-icon"><use xlink:href="/images/icons/icons.svg#paste"></use></svg></button>
             ${node.value}
         </div>`;

src/components/CodeTabs/CodeTabs.js

@@ -23,7 +23,7 @@ class CodeTabs {
 	}
 
 	_getTabLabelFromElement(element) {
-		return element.querySelector('.gatsby-highlight').getAttribute('data-language');
+		return element.getAttribute('data-label');
 	}
 
 	_hide(element) {

src/styles/_code.scss

@@ -85,15 +85,3 @@
 		color: rgba($brand-dark, 0.6);
 	}
 }
-
-.nav.nav-tabs.nav-code-tabs {
-	li:nth-last-child(3) + li > button {
-		font-size: 0;
-
-		&:before {
-			content: 'WEB COMPONENTS';
-			display: inline-block;
-			font-size: 13px;
-		}
-	}
-}