Fix sidebar nav when in PR & Responsive ui in production build (#965)

2022-09-02 17:26:11 -04:00 · 2022-09-02 17:26:11 -04:00 · e11440f0b4
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@ -91,6 +91,7 @@ specifiers:
  react-is: ~18.1.0
  rimraf: ~3.0.2
  rollup: ~2.70.1
+  rollup-plugin-visualizer: ~5.8.0
  source-map-support: ~0.5.19
  strip-json-comments: ~4.0.0
  styled-components: ~5.3.5
@ -197,6 +198,7 @@ dependencies:
  react-is: 18.1.0
  rimraf: 3.0.2
  rollup: 2.70.2
+  rollup-plugin-visualizer: 5.8.0_rollup@2.70.2
  source-map-support: 0.5.21
  strip-json-comments: 4.0.0
  styled-components: 5.3.5_cc3123a60c632166f817f0cb3bc8228c
@ -7213,7 +7215,7 @@ packages:
    dev: false

  file:projects/website.tgz:
-    resolution: {integrity: sha512-GDMzjqA98wV698dtkIAQxHJGYofWT1cIqp8RDioZqDucZjJZfgNeipAyYw3TjgtKHJ1XA+x50R5zaocaEJAO0A==, tarball: file:projects/website.tgz}
+    resolution: {integrity: sha512-mAywL0lFvLeHOEjLaz+ZYzimrSV7SGU7Q0peCmov6GZgmOncs5kJE6OIloj7IHBhfSYgoDH/cJX/pVflhfraaw==, tarball: file:projects/website.tgz}
    name: '@rush-temp/website'
    version: 0.0.0
    dependencies:
@ -7221,8 +7223,10 @@ packages:
      '@11ty/eleventy-navigation': 0.3.5
      '@11ty/eleventy-plugin-syntaxhighlight': 4.1.0
      '@types/node': 16.0.3
+      eslint: 8.21.0
      feather-icons: 4.29.0
      prism-themes: 1.9.0
+      rimraf: 3.0.2
    transitivePeerDependencies:
      - bufferutil
      - supports-color
--- a/packages/website/.eleventy.js
+++ b/packages/website/.eleventy.js
@ -6,6 +6,7 @@ const feather = require("feather-icons");
 const prNumber = process.env["SYSTEM_PULLREQUEST_PULLREQUESTNUMBER"];

 module.exports = (eleventyConfig) => {
+  eleventyConfig.addPassthroughCopy("js");
  eleventyConfig.addPassthroughCopy("css");
  eleventyConfig.addPassthroughCopy({
    "node_modules/prism-themes/themes/prism-one-light.css": "css/themes/prism-one-light.css",
--- a/packages/website/.eslintrc.cjs
+++ b/packages/website/.eslintrc.cjs
@ -0,0 +1,9 @@
+require("@cadl-lang/eslint-config-cadl/patch/modern-module-resolution");
+
+module.exports = {
+  extends: ["@cadl-lang/eslint-config-cadl"],
+  parserOptions: { tsconfigRootDir: __dirname },
+  env: {
+    browser: true,
+  },
+};
--- a/packages/website/package.json
+++ b/packages/website/package.json
@ -5,7 +5,10 @@
  "main": "index.js",
  "scripts": {
    "start": "npx @11ty/eleventy --serve --formats=md,css,njk,js",
-    "build": "npx @11ty/eleventy"
+    "build": "npx @11ty/eleventy",
+    "clean": "rimraf ./dist ./temp",
+    "lint": "eslint . --ext .ts,.js --max-warnings=0",
+    "lint:fix": "eslint . --fix --ext .ts,.js"
  },
  "keywords": [],
  "author": "",
@ -15,6 +18,11 @@
    "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
    "@types/node": "~16.0.3",
    "prism-themes": "~1.9.0",
-    "feather-icons": "~4.29.0"
+    "feather-icons": "~4.29.0",
+    "@cadl-lang/eslint-config-cadl": "~0.4.0",
+    "eslint": "^8.12.0"
+  },
+  "dependencies": {
+    "rimraf": "~3.0.2"
  }
 }
--- a/packages/website/src/_includes/layouts/base.njk
+++ b/packages/website/src/_includes/layouts/base.njk
@ -6,7 +6,7 @@
    <title>{{ title or metadata.title }}</title>
    <link rel="stylesheet" href="{{ '/css/style.css' | url }}">
    <link rel="stylesheet" href="{{ '/css/themes/prism-one-light.css' | url }}">
-    <script src="{{ '/js/sidebar.js' | url }}"></script>
+    <script type="module" src="{{ '/js/sidebar.js' | url }}"></script>
  </head>
  <body>
    <div class="root-container">
--- a/packages/website/src/_includes/layouts/docs.njk
+++ b/packages/website/src/_includes/layouts/docs.njk
@ -16,7 +16,7 @@ isDocs: true
          <ul class="cadl-list">
            {%- for entry in category.pages %}
              <li {% if entry.url == page.url %} class="cadl-toc-active" {% endif %}>
-                <a href="{{ entry.url }}">{{ entry.title }}</a>
+                <a href="{{ entry.url | url }}">{{ entry.title }}</a>
              </li>
            {%- endfor %}
          </ul>
--- a/packages/website/src/js/sidebar.js
+++ b/packages/website/src/js/sidebar.js
@ -9,8 +9,7 @@ document.addEventListener("DOMContentLoaded", () => {
        const target = document.getElementById(targetId);
        if (target) {
          if (target.style.display === "block") {
-            // @ts-ignore
-            target.style.display = null;
+            target.style.display = "";
          } else {
            target.style.display = "block";
          }
--- a/packages/website/tsconfig.json
+++ b/packages/website/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["DOM"]
+  },
+  "include": ["**/*.js"]
+}