add environment state to localstorage

compiler/src/mdast/environment.ts

@@ -1,6 +1,7 @@
 import startCase from 'lodash/startCase.js';
-import { ContainerDirective, LeafDirective } from 'mdast-util-directive';
-import { Node } from 'unist';
+import { ContainerDirective } from 'mdast-util-directive';
+import { toHast } from 'mdast-util-to-hast';
+import { Node, Parent } from 'unist';
 import { visit } from 'unist-util-visit';
 
 const platforms = ['mac', 'windows', 'linux'];
@@ -11,15 +12,10 @@ export function environment() {
   // const defaultProgram = programs[0];
 
   return async (tree: Node) => {
-    visit(tree, 'leafDirective', (node: LeafDirective) => {
-      if (node.name === 'environment') {
-        node.data = createEnvironmentConfig();
-      }
-      // console.log('leaf', node);
-    });
-
     visit(tree, 'containerDirective', (node: ContainerDirective) => {
-      if (platforms.includes(node.name)) {
+      if (node.name === 'environment') {
+        node.data = createEnvironmentConfig(node);
+      } else if (platforms.includes(node.name)) {
         node.data = {
           hProperties: {
             className: ['platform', node.name],
@@ -32,19 +28,33 @@ export function environment() {
           },
         };
       }
-      // console.log('container', node);
     });
   };
 }
 
-function createEnvironmentConfig() {
+function createEnvironmentConfig(node: Parent) {
   const hName = 'div';
 
   const hProperties = {
     id: 'environment',
+    className: 'boxout',
   };
 
   const hChildren = [
+    {
+      type: 'element',
+      tagName: 'span',
+      properties: {
+        className: ['type'],
+      },
+      children: [
+        {
+          type: 'text',
+          value: 'Environment',
+        },
+      ],
+    },
+    ...node.children.map((node) => toHast(node as any)),
     {
       type: 'element',
       tagName: 'div',

template/src/environment/platform.ts

@@ -1,7 +1,14 @@
 import { saveState } from '../util';
 import { state } from './state';
 
-document.documentElement.classList.add(state.platform);
+const current = `platform-${state.platform}`;
+
+document.documentElement.classList.add(current);
+
+document.querySelectorAll('#platforms input').forEach((elem) => {
+  const input = elem as HTMLInputElement;
+  input.checked = input.value === state.platform;
+});
 
 document.querySelectorAll('#platforms label').forEach((elem) => {
   elem.addEventListener('click', setPlatform);
@@ -12,11 +19,13 @@ function setPlatform(e: Event) {
   const platform = target.getAttribute('data-platform') as string;
   const newClass = `platform-${platform}`;
 
+  console.log({ platform, newClass });
+
   if (document.documentElement.classList.contains(newClass)) {
     return;
   }
 
-  document.documentElement.classList.replace(state.platform, newClass);
-  state.platform = newClass;
+  document.documentElement.classList.replace(current, newClass);
+  state.platform = platform;
   saveState('environment', state);
 }

template/src/environment/program.ts

@@ -1,7 +1,14 @@
 import { saveState } from '../util';
 import { state } from './state';
 
-document.documentElement.classList.add(state.program);
+const current = `program-${state.program}`;
+
+document.documentElement.classList.add(current);
+
+document.querySelectorAll('#programs input').forEach((elem) => {
+  const input = elem as HTMLInputElement;
+  input.checked = input.value === state.program;
+});
 
 document.querySelectorAll('#programs label').forEach((elem) => {
   elem.addEventListener('click', setProgram);
@@ -16,7 +23,7 @@ function setProgram(e: Event) {
     return;
   }
 
-  document.documentElement.classList.replace(state.program, newClass);
-  state.program = newClass;
+  document.documentElement.classList.replace(current, newClass);
+  state.program = program;
   saveState('environment', state);
 }

template/src/environment/state.ts

@@ -6,8 +6,8 @@ export type State = {
 };
 
 export const defaultState: State = Object.freeze({
-  platform: 'platform-mac',
-  program: 'program-cli',
+  platform: 'mac',
+  program: 'cli',
 });
 
 export const state = getSavedState('environment', defaultState);

template/src/styles/environment.scss

@@ -1,3 +1,7 @@
+#environment label span {
+  padding: 0 1em 0 0.25em;
+}
+
 .platform {
   display: none;
 }