Add support for defaultPlatform frontmatter

TODO: add 'all' to frontmatter schema enum?

Author: Simran-B

includes/article.html

@@ -29,7 +29,8 @@ <h1 class="border-bottom-0">{{ page.title }}</h1>
       {% endif %}
 
       {% if page.includesPlatformSpecificContent %}
-        <nav class="UnderlineNav my-3">
+        <nav class="UnderlineNav my-3"
+        {%- if page.defaultPlatform %} data-default-platform="{{ page.defaultPlatform }}"{% endif %}>
           <div class="UnderlineNav-body">
             <a href="#" class="UnderlineNav-item platform-switcher" data-platform="mac">Mac</a>
             <a href="#" class="UnderlineNav-item platform-switcher" data-platform="windows">Windows</a>

javascripts/display-platform-specific-content.js

@@ -5,7 +5,7 @@ const detectedPlatforms = new Set()
 // Emphasize content for the visitor's OS (inferred from user agent string)
 
 export default function displayPlatformSpecificContent () {
-  let platform = getPlatformFromUserAgent()
+  let platform = getDefaultPlatform() || getPlatformFromUserAgent()
 
   // adjust platform names to fit existing mac/windows/linux scheme
   if (!platform) platform = 'mac' // default to 'mac' on mobile
@@ -78,6 +78,11 @@ function detectPlatforms (el) {
   })
 }
 
+function getDefaultPlatform () {
+  const el = document.querySelector("[data-default-platform]")
+  if (el) return el.dataset.defaultPlatform
+}
+
 function switcherLinks () {
   return Array.from(document.querySelectorAll('a.platform-switcher'))
 }

lib/frontmatter.js

@@ -95,6 +95,11 @@ const schema = {
     },
     interactive: {
       type: 'boolean'
+    },
+    // Platform-specific content preference
+    defaultPlatform: {
+      type: 'string',
+      enum: [ 'mac', 'windows', 'linux' ] // TODO: add 'all'?
     }
   }
 }