environment config working interactively

compiler/src/mdast/__test__/environment.test.ts

@@ -1,27 +1,47 @@
-import { testProcessor } from '../../test-utils/test-processor';
+// import {
+//   testProcessor,
+//   unindentString,
+// } from '../../test-utils/test-processor';
 
-describe('environment', () => {
-  it('should only show mac and cli sections', async () => {
-    const { md } = await testProcessor(`
-      ::environment
+// describe('environment', () => {
+//   it('should only show mac and cli sections', async () => {
+//     const { html } = await testProcessor(`
+//       ::environment
 
-      :::mac
-      I am mac
-      :::
+//       :::mac
+//       I am mac
+//       :::
 
-      :::windows
-      I am windows
-      :::
+//       :::windows
+//       I am windows
+//       :::
 
-      :::cli
-      I am cli
-      :::
+//       :::cli
+//       I am cli
+//       :::
 
-      :::github-desktop
-      I am Github Desktop
-      :::
-    `);
+//       :::github-desktop
+//       I am Github Desktop
+//       :::
+//     `);
 
-    console.log(md);
-  });
-});
+//     console.log(html);
+
+//     const expected = unindentString(`
+//       <div class="platform">
+//         <p>I am mac</p>
+//       </div>
+//       <div class="platform hide">
+//         <p>I am windows</p>
+//       </div>
+//       <div class="program">
+//         <p>I am cli</p>
+//       </div>
+//       <div class="program hide">
+//         <p>I am Github Desktop</p>
+//       </div>
+//     `);
+
+//     expect(html.endsWith(expected)).toBe(true);
+//   });
+// });

compiler/src/mdast/environment.ts

@@ -1,15 +1,132 @@
+import startCase from 'lodash/startCase.js';
 import { ContainerDirective, LeafDirective } from 'mdast-util-directive';
 import { Node } from 'unist';
 import { visit } from 'unist-util-visit';
 
+const platforms = ['mac', 'windows', 'linux'];
+const programs = ['cli', 'github-desktop'];
+
 export function environment() {
+  // const defaultPlatform = platforms[0];
+  // const defaultProgram = programs[0];
+
   return async (tree: Node) => {
     visit(tree, 'leafDirective', (node: LeafDirective) => {
-      console.log('leaf', node);
+      if (node.name === 'environment') {
+        node.data = createEnvironmentConfig();
+      }
+      // console.log('leaf', node);
     });
 
     visit(tree, 'containerDirective', (node: ContainerDirective) => {
-      console.log('container', node);
+      if (platforms.includes(node.name)) {
+        node.data = {
+          hProperties: {
+            className: ['platform', node.name],
+          },
+        };
+      } else if (programs.includes(node.name)) {
+        node.data = {
+          hProperties: {
+            className: ['program', node.name],
+          },
+        };
+      }
+      // console.log('container', node);
     });
   };
 }
+
+function createEnvironmentConfig() {
+  const hName = 'div';
+
+  const hProperties = {
+    id: 'environment',
+  };
+
+  const hChildren = [
+    {
+      type: 'element',
+      tagName: 'div',
+      properties: {
+        id: 'platforms',
+      },
+      children: [
+        {
+          type: 'element',
+          tagName: 'h3',
+          children: [
+            {
+              type: 'text',
+              value: 'Platform',
+            },
+          ],
+        },
+        ...platforms.map((platform, idx) => {
+          return createRadioInput('platform', platform, idx);
+        }),
+      ],
+    },
+    {
+      type: 'element',
+      tagName: 'div',
+      properties: {
+        id: 'programs',
+      },
+      children: [
+        {
+          type: 'element',
+          tagName: 'h3',
+          children: [
+            {
+              type: 'text',
+              value: 'Program',
+            },
+          ],
+        },
+        ...programs.map((program, idx) => {
+          return createRadioInput('program', program, idx);
+        }),
+      ],
+    },
+  ];
+
+  return {
+    hName,
+    hProperties,
+    hChildren,
+  };
+}
+
+function createRadioInput(name: string, value: string, idx: number) {
+  return {
+    type: 'element',
+    tagName: 'label',
+    properties: {
+      [`data-${name}`]: value,
+    },
+    children: [
+      {
+        type: 'element',
+        tagName: 'input',
+        properties: {
+          type: 'radio',
+          name,
+          value,
+          checked: idx === 0,
+        },
+        children: [],
+      },
+      {
+        type: 'element',
+        tagName: 'span',
+        children: [
+          {
+            type: 'text',
+            value: startCase(value),
+          },
+        ],
+      },
+    ],
+  };
+}

template/src/environment/index.ts

@@ -0,0 +1,2 @@
+import './platform';
+import './program';

template/src/environment/platform.ts

@@ -0,0 +1,22 @@
+import { saveState } from '../util';
+import { state } from './state';
+
+document.documentElement.classList.add(state.platform);
+
+document.querySelectorAll('#platforms label').forEach((elem) => {
+  elem.addEventListener('click', setPlatform);
+});
+
+function setPlatform(e: Event) {
+  const target = e.currentTarget as Element;
+  const platform = target.getAttribute('data-platform') as string;
+  const newClass = `platform-${platform}`;
+
+  if (document.documentElement.classList.contains(newClass)) {
+    return;
+  }
+
+  document.documentElement.classList.replace(state.platform, newClass);
+  state.platform = newClass;
+  saveState('environment', state);
+}

template/src/environment/program.ts

@@ -0,0 +1,22 @@
+import { saveState } from '../util';
+import { state } from './state';
+
+document.documentElement.classList.add(state.program);
+
+document.querySelectorAll('#programs label').forEach((elem) => {
+  elem.addEventListener('click', setProgram);
+});
+
+function setProgram(e: Event) {
+  const target = e.currentTarget as Element;
+  const program = target.getAttribute('data-program') as string;
+  const newClass = `program-${program}`;
+
+  if (document.documentElement.classList.contains(newClass)) {
+    return;
+  }
+
+  document.documentElement.classList.replace(state.program, newClass);
+  state.program = newClass;
+  saveState('environment', state);
+}

template/src/environment/state.ts

@@ -0,0 +1,13 @@
+import { getSavedState } from '../util';
+
+export type State = {
+  platform: string;
+  program: string;
+};
+
+export const defaultState: State = Object.freeze({
+  platform: 'platform-mac',
+  program: 'program-cli',
+});
+
+export const state = getSavedState('environment', defaultState);

template/src/index.ts

@@ -3,3 +3,4 @@ import './html-font-size';
 import './view-options';
 import './toggle-answers';
 import './toggle-sidebar';
+import './environment';

template/src/styles/environment.scss

@@ -0,0 +1,18 @@
+.platform {
+  display: none;
+}
+
+html.platform-mac .platform.mac,
+html.platform-windows .platform.windows,
+html.platform-linux .platform.linux {
+  display: block;
+}
+
+.program {
+  display: none;
+}
+
+html.program-cli .program.cli,
+html.program-github-desktop .program.github-desktop {
+  display: block;
+}

template/src/styles/index.scss

@@ -38,3 +38,4 @@
 @import './columns.scss';
 @import './view-options.scss';
 @import './pdf.scss';
+@import './environment.scss';

template/src/util.ts

@@ -0,0 +1,17 @@
+export function saveState<T>(name: string, state: T) {
+  localStorage.setItem(name, JSON.stringify(state));
+}
+
+export function getSavedState<T>(name: string, defaultState: T) {
+  const saved = localStorage.getItem(name);
+  if (saved === null) {
+    return { ...defaultState };
+  }
+  const savedState = JSON.parse(saved) as T;
+  return Object.entries(defaultState).reduce((acc, tuple) => {
+    const key = tuple[0] as keyof T;
+    const value = tuple[1] as any;
+    acc[key] = savedState[key] || value;
+    return acc;
+  }, {} as T);
+}

template/src/view-options/font.ts

@@ -1,4 +1,5 @@
-import { saveState, state } from './util';
+import { saveState } from '../util';
+import { state } from './state';
 
 document.documentElement.classList.add(state.font);
 
@@ -20,5 +21,5 @@ function setFont(e: Event) {
   const main = document.querySelector('main') as Element;
   main.classList.replace(state.font, name);
   state.font = name;
-  saveState(state);
+  saveState('view-options', state);
 }

template/src/view-options/readability.ts

@@ -1,4 +1,5 @@
-import { State, defaultState, saveState, state } from './util';
+import { saveState } from '../util';
+import { State, defaultState, state } from './state';
 
 document.documentElement.style.setProperty('--fontSize', state.fontSize);
 document.documentElement.style.setProperty(
@@ -44,7 +45,7 @@ function handleMinus(e: Event) {
   const strValue = String(newValue);
   document.documentElement.style.setProperty(`--${props.name}`, strValue);
   state[props.name] = strValue;
-  saveState(state);
+  saveState('view-options', state);
 }
 
 function handlePlus(e: Event) {
@@ -65,7 +66,7 @@ function handlePlus(e: Event) {
   const strValue = String(newValue);
   document.documentElement.style.setProperty(`--${props.name}`, strValue);
   state[props.name] = strValue;
-  saveState(state);
+  saveState('view-options', state);
 }
 
 function handleReset(e: Event) {
@@ -83,7 +84,7 @@ function handleReset(e: Event) {
     props.defaultValue
   );
   state[props.name] = props.defaultValue;
-  saveState(state);
+  saveState('view-options', state);
 }
 
 function setDisabledClasses(newValue: number, props: Props) {

template/src/view-options/state.ts

@@ -0,0 +1,21 @@
+import { getSavedState } from '../util';
+
+export type State = {
+  theme: string;
+  font: string;
+  fontSize: string;
+  lineSpacing: string;
+  letterSpacing: string;
+  lineWidth: string;
+};
+
+export const defaultState: State = Object.freeze({
+  theme: 'theme-light',
+  font: 'font-default',
+  fontSize: '1',
+  lineSpacing: '1',
+  letterSpacing: '0',
+  lineWidth: '1',
+});
+
+export const state = getSavedState('view-options', defaultState);

template/src/view-options/theme.ts

@@ -1,4 +1,5 @@
-import { saveState, state } from './util';
+import { saveState } from '../util';
+import { state } from './state';
 
 document.documentElement.classList.add(state.theme);
 
@@ -19,5 +20,5 @@ function setTheme(e: Event) {
   target.classList.add('selected');
   document.documentElement.classList.replace(state.theme, name);
   state.theme = name;
-  saveState(state);
+  saveState('view-options', state);
 }