basic code switcher implementation. Needs love but worx

assets/stylesheets/lesson/index.css

@@ -20,3 +20,47 @@
     margin-bottom: 0;
   }
 }
+
+@block lesson-module-code {
+  @element header {}
+  @element code-area {
+    background: var(--code-bg);
+  }
+
+  @element trigger {
+    display: inline-block;
+
+    padding: 0 1em;
+    margin-right: 1em;
+
+    background: var(--code-trigger-bg);
+
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+
+    font-family: var(--font-medium);
+    font-size: 0.7em;
+    color: var(--code-trigger-color);
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    @modifier active {
+      background: var(--code-trigger-bg-active);
+      color: var(--code-trigger-color-active);
+    }
+  }
+
+  @element code {
+    display: none;
+
+    @modifier active {
+      display: block;
+    }
+
+    & pre {
+      margin: 0;
+    }
+  }
+}

assets/stylesheets/variables.css

@@ -57,4 +57,10 @@
   --cta-bg: var(--color-palette-blue);
   --cta-bg-hover: var(--color-palette-blue-medium);
   --cta-radius: 3px;
+
+  --code-bg: var(--color-bg-grey);
+  --code-trigger-bg: color(var(--color-bg-grey) shade(20%));
+  --code-trigger-bg-active: var(--code-bg);
+  --code-trigger-color: #fff;
+  --code-trigger-color-active: var(--color-text-dark-bg-grey);
 }

public/scripts/index.js

@@ -0,0 +1,36 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // init highlight.js
+  hljs.initHighlightingOnLoad()
+
+  // Lesson code switcher logic
+  const modules = Array.from(document.getElementsByClassName('lesson-module-code'))
+
+  modules.forEach((module) => {
+    const triggers = Array.from(module.getElementsByClassName('lesson-module-code__trigger'))
+    const codes = Array.from(module.getElementsByClassName('lesson-module-code__code'))
+
+    const handleTriggerClick = (e) => {
+      const target = e.target.getAttribute('data-target')
+
+      // Mark correct trigger as active
+      triggers.forEach((trigger) => {
+        trigger.classList.remove('lesson-module-code__trigger--active')
+      })
+      e.target.classList.add('lesson-module-code__trigger--active')
+
+      // Show correct code fields
+      codes.forEach((code) => {
+        code.classList.remove('lesson-module-code__code--active')
+        if (code.id === target) {
+          code.classList.add('lesson-module-code__code--active')
+        }
+      })
+    }
+
+    // Attach click handler to triggers
+    triggers.forEach((trigger) => {
+      trigger.onclick = handleTriggerClick
+    })
+  })
+})
+

public/stylesheets/style.css

@@ -2003,3 +2003,48 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .lesson__cta {
     margin-bottom: 0;
 }
+
+.lesson-module-code {}
+
+.lesson-module-code__header {}
+
+.lesson-module-code__code-area {
+    background: #f7f9fa;
+}
+
+.lesson-module-code__trigger {
+    display: inline-block;
+
+    padding: 0 1em;
+    margin-right: 1em;
+
+    background: rgb(198, 199, 200);
+
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+
+    font-family: 'robotomedium', Helvetica, sans-serif;
+    font-size: 0.7em;
+    color: #fff;
+}
+
+.lesson-module-code__trigger:last-child {
+  margin-right: 0;
+}
+
+.lesson-module-code__trigger--active {
+      background: #f7f9fa;
+      color: #a9b9c0;
+}
+
+.lesson-module-code__code {
+    display: none;
+}
+
+.lesson-module-code__code pre {
+  margin: 0;
+}
+
+.lesson-module-code__code--active {
+      display: block;
+}

views/layout.pug

@@ -86,4 +86,4 @@ html
                   a(href='https://twitter.com/contentful' target='_blank' rel='noopener')
                     img(src='/images/icon-twitter.svg' alt='Our Twitter profile')
   script(src='/scripts/highlight.pack.js')
-  script hljs.initHighlightingOnLoad();
+  script(src='/scripts/index.js')

views/mixins/_lessonModuleCodeSnippet.pug

@@ -1,30 +1,60 @@
 mixin lessonModuleCodeSnippet(module)
   .lesson-module.lesson-module-code
-    if module.fields.curl
+    .lesson-module-code__header
-      pre.lesson-module-code__curl
+      if module.fields.curl
-        code.shell= module.fields.curl
+        a.lesson-module-code__trigger(data-target=`${module.sys.id}-curl`) curl
-    if module.fields.dot-net
+      if module.fields.dot-net
-      pre.lesson-module-code__dotnet
+        a.lesson-module-code__trigger(data-target=`${module.sys.id}-dotnet`) .NET
-        code.csharp= module.fields.dot-net
+      if module.fields.javascript
-    if module.fields.javascript
+        a.lesson-module-code__trigger.lesson-module-code__trigger--active(data-target=`${module.sys.id}-javascript`) Javascript
-      pre.lesson-module-code__javascript
+      if module.fields.java
-        code.javascript= module.fields.javascript
+        a.lesson-module-code__trigger(data-target=`${module.sys.id}-java`) Java
-    if module.fields.java
+      if module.fields.javaAndroid
-      pre.lesson-module-code__java
+        a.lesson-module-code__trigger(data-target=`${module.sys.id}-android`) Android
-        code.java= module.fields.java
+      if module.fields.php
-    if module.fields.javaAndroid
+        a.lesson-module-code__trigger(data-target=`${module.sys.id}-php`) PHP
-      pre.lesson-module-code__java-android
+      if module.fields.python
-        code.java= module.fields.javaAndroid
+        a.lesson-module-code__trigger(data-target=`${module.sys.id}-python`) Python
-    if module.fields.php
+      if module.fields.ruby
-      pre.lesson-module-code__php
+        a.lesson-module-code__trigger(data-target=`${module.sys.id}-ruby`) Ruby
-        code.php= module.fields.php
+      if module.fields.swift
-    if module.fields.python
+        a.lesson-module-code__trigger(data-target=`${module.sys.id}-swift`) Swift
-      pre.lesson-module-code__python
+
-        code.python= module.fields.python
+    .lesson-module-code__code-area
-    if module.fields.ruby
+      if module.fields.curl
-      pre.lesson-module-code__ruby
+        .lesson-module-code__code(id=`${module.sys.id}-curl`)
-        code.ruby= module.fields.ruby
+          pre
-    if module.fields.swift
+            code.shell= module.fields.curl
-      pre.lesson-module-code__swift
+      if module.fields.dot-net
-        code.swift= module.fields.swift
+        .lesson-module-code__code(id=`${module.sys.id}-dotnet`)
+          pre
+            code.csharp= module.fields.dot-net
+      if module.fields.javascript
+        .lesson-module-code__code.lesson-module-code__code--active(id=`${module.sys.id}-javascript`)
+          pre
+            code.javascript= module.fields.javascript
+      if module.fields.java
+        .lesson-module-code__code(id=`${module.sys.id}-java`)
+          pre
+            code.java= module.fields.java
+      if module.fields.javaAndroid
+        .lesson-module-code__code(id=`${module.sys.id}-android`)
+          pre
+            code.java= module.fields.javaAndroid
+      if module.fields.php
+        .lesson-module-code__code(id=`${module.sys.id}-php`)
+          pre
+            code.php= module.fields.php
+      if module.fields.python
+        .lesson-module-code__code(id=`${module.sys.id}-python`)
+          pre
+            code.python= module.fields.python
+      if module.fields.ruby
+        .lesson-module-code__code(id=`${module.sys.id}-ruby`)
+          pre
+            code.ruby= module.fields.ruby
+      if module.fields.swift
+        .lesson-module-code__code(id=`${module.sys.id}-swift`)
+          pre
+            code.swift= module.fields.swift