Add interactive roadmap setup

lib/renderer/constants.ts

@@ -0,0 +1,18 @@
+export const FONT_SIZE = '13px';
+export const BORDER_WIDTH = 2.7;
+export const ARROW_WIDTH = 4;
+export const RECT_RADIUS = 2;
+
+export const DEFAULT_COLORS: Record<string, any> = {
+  black: ['#000'],
+  gray: ['#000', '#333', '#666', '#999', '#ccc', '#ddd', '#eee'],
+  white: ['#fff'],
+  red: ['#cf2a27', '#ea9999', '#eo6666', '#cc0000', '#990000', '#660000'],
+  orange: ['#ff9900', '#f9cb9c', '#f6b26b', '#e69138', '#b45f06', '#783f04'],
+  yellow: ['#ffff00', '#ffe599', '#ffd966', '#f1c232', '#bf9000', '#7f6000'],
+  green: ['#009e0f', '#b6d7a8', '#93c47d', '#6aa84f', '#38761d', '#274e13'],
+  cyan: ['#00ffff', '#a2c4c9', '#76a5af', '#45818e', '#134f5c', '#0c343d'],
+  blue: ['#2b78e4', '#9fc5f8', '#6fa8dc', '#597eaa', '#085394', '#073763'],
+  purple: ['#9900ff', '#b4a7d6', '#8e7cc3', '#674ea7', '#351c75', '#20124d'],
+  pink: ['#ff00ff', '#d5a6bd', '#c27ba0', '#a64d79', '#741b47', '#4c1130'],
+};

lib/renderer/index.ts

@@ -0,0 +1,54 @@
+import { Renderer } from './renderer';
+import { makeSVGElement } from './utils';
+
+/**
+ * @param {Object} wireframe - Wireframe JSON
+ * @param {Object} options - Config object
+ * @param {number} [options.padding=5] - Padding for the SVG element
+ * @param {string} [options.fontFamily=balsamiq]
+ * @param {string} [options.fontURL=https://fonts.gstatic.com/s/balsamiqsans/v3/P5sEzZiAbNrN8SB3lQQX7Pncwd4XIA.woff2]
+ * @returns {Promise} Resolves SVG element
+ */
+export async function wireframeJSONToSVG(
+  wireframe: any,
+  options: { padding?: number; fontFamily?: string; fontURL?: string } = {}
+) {
+  options = {
+    padding: 5,
+    fontFamily: 'balsamiq',
+    fontURL: '/fonts/balsamiq.woff2',
+    ...options,
+  };
+
+  if (options.fontURL) {
+    let font = new FontFace(options.fontFamily!, `url(${options.fontURL})`);
+    await font.load();
+    document.fonts.add(font);
+  }
+
+  let mockup = wireframe.mockup;
+
+  let x = mockup.measuredW - mockup.mockupW - options.padding!;
+  let y = mockup.measuredH - mockup.mockupH - options.padding!;
+  let width = parseInt(mockup.mockupW) + options.padding! * 2;
+  let height = parseInt(mockup.mockupH) + options.padding! * 2;
+
+  let svgRoot = makeSVGElement('svg', {
+    xmlns: 'http://www.w3.org/2000/svg',
+    'xmlns:xlink': 'http://www.w3.org/1999/xlink',
+    viewBox: `${x} ${y} ${width} ${height}`,
+    style: 'font-family: balsamiq',
+  });
+
+  let renderer = new Renderer(svgRoot, options.fontFamily!);
+
+  mockup.controls.control
+    .sort((a: any, b: any) => {
+      return a.zOrder - b.zOrder;
+    })
+    .forEach((control: any) => {
+      renderer.render(control, svgRoot);
+    });
+
+  return svgRoot;
+}

lib/renderer/renderer.ts

@@ -0,0 +1,282 @@
+import { getRGBFromDecimalColor, makeSVGElement } from './utils';
+import {
+  ARROW_WIDTH,
+  BORDER_WIDTH,
+  DEFAULT_COLORS,
+  RECT_RADIUS,
+} from './constants';
+
+export class Renderer {
+  private svgRoot: SVGElement;
+  private readonly fontFamily: string;
+  private canvasRenderingContext2D: CanvasRenderingContext2D;
+
+  constructor(svgRoot: SVGElement, fontFamily: string) {
+    this.svgRoot = svgRoot;
+    this.fontFamily = fontFamily;
+    this.canvasRenderingContext2D = document
+      .createElement('canvas')
+      .getContext('2d')!;
+  }
+
+  render(control: any, container: any) {
+    let typeID = control.typeID;
+    if (typeID in this) {
+      (this as any)[typeID](control, container);
+    } else {
+      console.log(`'${typeID}' control type not implemented`);
+    }
+  }
+
+  parseColor(color: any, defaultColor: any) {
+    return color === undefined
+      ? `rgb(${defaultColor})`
+      : getRGBFromDecimalColor(color);
+  }
+
+  parseFontProperties(control: any) {
+    return {
+      style: control.properties?.italic ? 'italic' : 'normal',
+      weight: control.properties?.bold ? 'bold' : 'normal',
+      size: control.properties?.size ? control.properties.size + 'px' : '13px',
+      family: this.fontFamily,
+    };
+  }
+
+  measureText(text: string, font: string) {
+    this.canvasRenderingContext2D.font = font;
+
+    return this.canvasRenderingContext2D.measureText(text);
+  }
+
+  drawRectangle(control: any, container: HTMLElement | undefined) {
+    makeSVGElement(
+      'rect',
+      {
+        x: parseInt(control.x) + BORDER_WIDTH / 2,
+        y: parseInt(control.y) + BORDER_WIDTH / 2,
+        width: parseInt(control.w ?? control.measuredW) - BORDER_WIDTH,
+        height: parseInt(control.h ?? control.measuredH) - BORDER_WIDTH,
+        rx: RECT_RADIUS,
+        fill: this.parseColor(control.properties?.color, '255,255,255'),
+        'fill-opacity': control.properties?.backgroundAlpha ?? 1,
+        stroke: this.parseColor(control.properties?.borderColor, '0,0,0'),
+        'stroke-width': BORDER_WIDTH,
+      },
+      container
+    );
+  }
+
+  addText(
+    control: {
+      properties: { text: string };
+      x: string;
+      y: string;
+      w: any;
+      measuredW: any;
+      measuredH: number;
+    },
+    container: HTMLElement | undefined,
+    textColor: string,
+    align: string
+  ) {
+    let text = control.properties.text ?? '';
+    let x = parseInt(control.x);
+    let y = parseInt(control.y);
+
+    let font = this.parseFontProperties(control);
+    let textMetrics = this.measureText(
+      text,
+      `${font.style} ${font.weight} ${font.size} ${font.family}`
+    );
+
+    let textX =
+      align === 'center'
+        ? x + (control.w ?? control.measuredW) / 2 - textMetrics.width / 2
+        : x;
+    let textY =
+      y + control.measuredH / 2 + textMetrics.actualBoundingBoxAscent / 2;
+
+    let textElement = makeSVGElement(
+      'text',
+      {
+        x: textX,
+        y: textY,
+        fill: textColor,
+        'font-style': font.style,
+        'font-weight': font.weight,
+        'font-size': font.size,
+      },
+      container
+    );
+
+    if (!text.includes('{color:')) {
+      let tspan = makeSVGElement('tspan', {}, textElement);
+      tspan.textContent = text;
+
+      return;
+    }
+
+    let split = text.split(/{color:|{color}/);
+    split.forEach((str) => {
+      if (str.includes('}')) {
+        let [color, textPart] = str.split('}');
+
+        if (!color.startsWith('#')) {
+          let index = parseInt(color.slice(-1));
+          color = isNaN(index)
+            ? DEFAULT_COLORS[color][0]
+            : DEFAULT_COLORS[color][index];
+        }
+
+        let tspan = makeSVGElement('tspan', { fill: color }, textElement);
+        tspan.textContent = textPart;
+      } else {
+        let tspan = makeSVGElement('tspan', {}, textElement);
+        tspan.textContent = str;
+      }
+    });
+  }
+
+  TextArea(control: any, container: HTMLElement | undefined) {
+    this.drawRectangle(control, container);
+  }
+
+  Canvas(control: any, container: HTMLElement | undefined) {
+    this.drawRectangle(control, container);
+  }
+
+  Label(control: any, container: HTMLElement | undefined) {
+    this.addText(
+      control,
+      container,
+      this.parseColor(control.properties?.color, '0,0,0'),
+      'left'
+    );
+  }
+
+  TextInput(control: any, container: any) {
+    this.drawRectangle(control, container);
+
+    this.addText(
+      control,
+      container,
+      this.parseColor(control.properties?.textColor, '0,0,0'),
+      'center'
+    );
+  }
+
+  Arrow(control: any, container: any) {
+    let x = parseInt(control.x);
+    let y = parseInt(control.y);
+    let { p0, p1, p2 } = control.properties;
+
+    let lineDash;
+    if (control.properties?.stroke === 'dotted') lineDash = '0.8 12';
+    else if (control.properties?.stroke === 'dashed') lineDash = '28 46';
+
+    let xVector = { x: (p2.x - p0.x) * p1.x, y: (p2.y - p0.y) * p1.x };
+
+    makeSVGElement(
+      'path',
+      {
+        d: `M${x + p0.x} ${y + p0.y}Q${
+          x + p0.x + xVector.x + xVector.y * p1.y * 3.6
+        } ${y + p0.y + xVector.y + -xVector.x * p1.y * 3.6} ${x + p2.x} ${
+          y + p2.y
+        }`,
+        fill: 'none',
+        stroke: this.parseColor(control.properties?.color, '0,0,0'),
+        'stroke-width': ARROW_WIDTH,
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-dasharray': lineDash,
+      },
+      container
+    );
+  }
+
+  Icon(control: any, container: any) {
+    let x = parseInt(control.x);
+    let y = parseInt(control.y);
+    let radius = 10;
+
+    makeSVGElement(
+      'circle',
+      {
+        cx: x + radius,
+        cy: y + radius,
+        r: radius,
+        fill: this.parseColor(control.properties?.color, '0,0,0'),
+      },
+      container
+    );
+
+    if (control.properties.icon.ID !== 'check-circle') {
+      return;
+    }
+
+    makeSVGElement(
+      'path',
+      {
+        d: `M${x + 4.5} ${y + radius}L${x + 8.5} ${y + radius + 4} ${x + 15} ${
+          y + radius - 2.5
+        }`,
+        fill: 'none',
+        stroke: '#fff',
+        'stroke-width': 3.5,
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+      },
+      container
+    );
+  }
+
+  HRule(control: any, container: any) {
+    let x = parseInt(control.x);
+    let y = parseInt(control.y);
+
+    let lineDash;
+    if (control.properties?.stroke === 'dotted') lineDash = '0.8, 8';
+    else if (control.properties?.stroke === 'dashed') lineDash = '18, 30';
+
+    makeSVGElement(
+      'path',
+      {
+        d: `M${x} ${y}L${x + parseInt(control.w ?? control.measuredW)} ${y}`,
+        fill: 'none',
+        stroke: this.parseColor(control.properties?.color, '0,0,0'),
+        'stroke-width': BORDER_WIDTH,
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'stroke-dasharray': lineDash,
+      },
+      container
+    );
+  }
+
+  __group__(control: any, container: any) {
+    const controlName = control?.properties?.controlName;
+
+    let group = makeSVGElement(
+      'g',
+      {
+        ...(controlName
+          ? { class: 'clickable-group', 'data-group-name': controlName }
+          : {}),
+      },
+      container
+    );
+
+    control.children.controls.control
+      .sort((a: any, b: any) => {
+        return a.zOrder - b.zOrder;
+      })
+      .forEach((childControl: any) => {
+        childControl.x = parseInt(childControl.x, 10) + parseInt(control.x, 10);
+        childControl.y = parseInt(childControl.y, 10) + parseInt(control.y, 10);
+
+        this.render(childControl, group);
+      });
+  }
+}

lib/renderer/utils.ts

@@ -0,0 +1,28 @@
+export function getRGBFromDecimalColor(color: number) {
+  let red = (color >> 16) & 0xff;
+  let green = (color >> 8) & 0xff;
+  let blue = color & 0xff;
+  return `rgb(${red},${green},${blue})`;
+}
+
+export function makeSVGElement(
+  type: string,
+  attributes: Record<string, any> = {},
+  parent?: any
+): SVGElement {
+  let element = document.createElementNS('http://www.w3.org/2000/svg', type);
+
+  for (let prop in attributes) {
+    if (!attributes.hasOwnProperty(prop)) {
+      continue;
+    }
+
+    element.setAttribute(prop, attributes[prop]);
+  }
+
+  if (parent) {
+    parent.appendChild(element);
+  }
+
+  return element;
+}

package.json

@@ -19,28 +19,29 @@
   "dependencies": {
     "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/react": "^1.7.2",
-    "@emotion/react": "^11.6.0",
+    "@emotion/react": "^11.7.0",
     "@emotion/styled": "^11.6.0",
     "@mapbox/rehype-prism": "^0.8.0",
     "@mdx-js/loader": "^1.6.22",
     "@next/mdx": "^12.0.4",
-    "@svgr/webpack": "^5.5.0",
+    "@svgr/webpack": "^6.0.0",
-    "date-fns": "^2.26.0",
+    "date-fns": "^2.27.0",
     "focus-visible": "^5.2.0",
-    "framer-motion": "^5.3.1",
+    "framer-motion": "^5.3.3",
     "next": "^12.0.4",
     "prism-themes": "^1.9.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.3",
+    "use-http": "^1.0.26"
   },
   "devDependencies": {
     "@types/eslint": "8.2.0",
     "@types/gh-pages": "^3.2.0",
     "@types/glob": "^7.2.0",
-    "@types/react": "17.0.35",
+    "@types/react": "17.0.37",
     "@types/react-dom": "17.0.11",
-    "@types/styled-components": "^5.1.15",
+    "@types/styled-components": "^5.1.16",
     "eslint-config-next": "12.0.4",
     "eslint-config-prettier": "^8.3.0",
     "gh-pages": "^3.2.3",

pages/[roadmap]/interactive.tsx

@@ -0,0 +1,172 @@
+import { Box, Button, Container, Link, Stack } from '@chakra-ui/react';
+import { ArrowBackIcon, AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
+import { GlobalHeader } from '../../components/global-header';
+import { OpensourceBanner } from '../../components/opensource-banner';
+import { UpdatesBanner } from '../../components/updates-banner';
+import { Footer } from '../../components/footer';
+import { PageHeader } from '../../components/page-header';
+import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
+import Helmet from '../../components/helmet';
+import { useEffect, useRef, useState } from 'react';
+import { wireframeJSONToSVG } from '../../lib/renderer';
+
+type RoadmapProps = {
+  roadmap: RoadmapType;
+  json: any;
+};
+
+function RoadmapRenderer(props: RoadmapProps) {
+  const { json, roadmap } = props;
+
+  const roadmapRef = useRef(null);
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    window.addEventListener('click', (event: MouseEvent) => {
+      const targetGroup = (event?.target as HTMLElement)?.closest('g');
+      const groupName = targetGroup?.dataset?.groupName;
+      if (!targetGroup || !groupName) {
+        return;
+      }
+
+      alert(groupName);
+    });
+  });
+
+  useEffect(() => {
+    wireframeJSONToSVG(json)
+      .then((svgElement) => {
+        const container: HTMLElement = roadmapRef.current!;
+        if (!container) {
+          return;
+        }
+
+        if (container.firstChild) {
+          container.removeChild(container.firstChild);
+        }
+
+        container.appendChild(svgElement);
+      })
+      .catch((err) => {
+        setHasError(true);
+      });
+  }, [json]);
+
+  return (
+    <Container maxW={'container.lg'} position="relative">
+      <div ref={roadmapRef} />
+    </Container>
+  );
+}
+
+export default function InteractiveRoadmap(props: RoadmapProps) {
+  const { roadmap, json } = props;
+
+  return (
+    <Box bg="white" minH="100vh">
+      <GlobalHeader />
+      <Helmet
+        title={roadmap?.seo?.title || roadmap.title}
+        description={roadmap?.seo?.description || roadmap.description}
+        keywords={roadmap?.seo.keywords || []}
+      />
+      <Box mb="60px">
+        <PageHeader title={roadmap.title} subtitle={roadmap.description}>
+          <Stack mt="20px" isInline>
+            <Button
+              d={['none', 'flex']}
+              as={Link}
+              href={'/roadmaps'}
+              size="xs"
+              py="14px"
+              px="10px"
+              leftIcon={<ArrowBackIcon />}
+              colorScheme="teal"
+              variant="solid"
+              _hover={{ textDecoration: 'none' }}
+            >
+              All Roadmaps
+            </Button>
+
+            {roadmap.pdfUrl && (
+              <Button
+                as={Link}
+                href={roadmap.pdfUrl}
+                target="_blank"
+                size="xs"
+                py="14px"
+                px="10px"
+                leftIcon={<DownloadIcon />}
+                colorScheme="yellow"
+                variant="solid"
+                _hover={{ textDecoration: 'none' }}
+              >
+                Download PDF
+              </Button>
+            )}
+            <Button
+              as={Link}
+              href={'/signup'}
+              size="xs"
+              py="14px"
+              px="10px"
+              leftIcon={<AtSignIcon />}
+              colorScheme="yellow"
+              variant="solid"
+              _hover={{ textDecoration: 'none' }}
+            >
+              Subscribe
+            </Button>
+          </Stack>
+        </PageHeader>
+
+        <RoadmapRenderer json={json} roadmap={roadmap} />
+      </Box>
+
+      <OpensourceBanner />
+      <UpdatesBanner />
+      <Footer />
+    </Box>
+  );
+}
+
+type StaticPathItem = {
+  params: {
+    roadmap: string;
+  };
+};
+
+export async function getStaticPaths() {
+  const roadmaps = getAllRoadmaps();
+  const paramsList: StaticPathItem[] = roadmaps.map((roadmap) => ({
+    params: { roadmap: roadmap.id },
+  }));
+
+  return {
+    paths: paramsList,
+    fallback: false,
+  };
+}
+
+type ContextType = {
+  params: {
+    roadmap: string;
+  };
+};
+
+export async function getStaticProps(context: ContextType) {
+  const roadmapId: string = context?.params?.roadmap;
+
+  let roadmapJson = {};
+  try {
+    roadmapJson = require(`../../public/project/${roadmapId}.json`);
+  } catch (e) {
+  }
+
+  return {
+    props: {
+      roadmap: getRoadmapById(roadmapId),
+      json: roadmapJson,
+    },
+  };
+}

pages/_app.tsx

@@ -19,6 +19,22 @@ const GlobalStyles = css`
     outline: none;
     box-shadow: none;
   }
+  
+  svg text tspan {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeSpeed;
+  }
+  
+  svg .clickable-group {
+    cursor: pointer;
+    
+    &:hover > [fill="rgb(65,53,214)"] { fill: #232381; stroke: #232381; }
+    &:hover > [fill="rgb(255,255,0)"] { fill: #d6d700; }
+    &:hover > [fill="rgb(255,229,153)"] { fill: #f3c950; }
+    &:hover > [fill="rgb(153,153,153)"] { fill: #646464; }
+    &:hover > [fill="rgb(255,255,255)"] { fill: #d7d7d7; }
+  }
 `;