feat: add keyword

Author: yanick

README.md

@@ -21,7 +21,7 @@ From the repo:
 
 ## Supported JSON Schema keywords
 
-- [ ] [\$comment](https://yanick.github.io/jsonschematic/#$comment)
+- [x] [\$comment](https://yanick.github.io/jsonschematic/#$comment)
 - [x] [\$id](https://yanick.github.io/jsonschematic/#$id)
 - [x] [\$ref](https://yanick.github.io/jsonschematic/#$ref)
 - [x] [\$schema](https://yanick.github.io/jsonschematic/#$schema)

package.json

@@ -123,6 +123,7 @@
       "build:docs": "webpack --config ./webpack.docs.config.js",
       "build:watch": "webpack --watch",
       "dev": "NODE_ENV=development webpack-dev-server",
+      "dev:docs": "NODE_ENV=development webpack-dev-server --config webpack.docs.config.js",
       "lint": "npm-run-all --parallel \"lint:prettier -- {@}\" \"lint:eslint -- {@}\" --",
       "lint:eslint": "./scripts/eslint",
       "lint:eslint:fix": "npm run lint:eslint -- --fix",

package.yaml

@@ -45,7 +45,7 @@ eslintConfig:
       modules: true
   plugins:
     - svelte3
-  rules: 
+  rules:
     "lodash/prefer-lodash-method": off
   overrides:
     - files: ["*.svelte"]
@@ -61,6 +61,7 @@ scripts:
   'build:watch': webpack --watch
   "build:docs": webpack --config ./webpack.docs.config.js
   dev: NODE_ENV=development webpack-dev-server
+  "dev:docs": NODE_ENV=development webpack-dev-server --config webpack.docs.config.js
   start: node ./bin/jsonschematic.js --local --schema_dir examples
   release: standard-version
   storybook: start-storybook
@@ -77,13 +78,13 @@ scripts:
   "lint:eslint:fix": npm run lint:eslint -- --fix
   "lint:fix": npm-run-all "lint:eslint:fix -- {@}" "lint:prettier:fix -- {@}" --
 
-publishConfig: { "registry": "https://npm.pkg.github.com/" } 
+publishConfig: { "registry": "https://npm.pkg.github.com/" }
 
 standard-version:
   skip:
-    tag: true 
+    tag: true
   types:
-    - type: bug 
+    - type: bug
       section: Bug Fixes
     - {"type": "feat", "section": "Features"}
     - {"type": "fix", "section": "Bug Fixes"}

src/components/Examples/Example.svelte

@@ -65,10 +65,12 @@
   .example > * {
     flex: 1;
     height: min-content;
+    min-width: 50%;
   }
 
   pre {
     background-color: #f0f0f0;
+    overflow: scroll;
   }
 
   .edit_me {

src/components/Examples/examples.js

@@ -1,4 +1,9 @@
 export default [
+  {
+    title: "with a $comment",
+    description: "this is the description",
+    $comment: "and this is the comment",
+  },
   { title: "'true' as the schema", type: "array", items: true },
   { title: "'false' as the schema", type: "array", items: false },
   {

src/components/Instance/index.svelte

@@ -27,6 +27,10 @@
       <div class="description">{description}</div>
     {/if}
 
+    {#if comment}
+      <blockquote class="comment">{comment}</blockquote>
+    {/if}
+
     {#if expanded_def.writeOnly}
       <div class="writeOnly">write-only</div>
     {/if}
@@ -117,6 +121,7 @@
   import Not from "./Not.svelte";
 
   let schema,
+    comment,
     types,
     items,
     ref,
@@ -150,6 +155,7 @@
       enum: enumeration,
       const: constant,
       properties,
+      $comment: comment,
     } = expanded_def);
 
     // always pass an array, to make it easier
@@ -228,10 +234,15 @@
     grid-column: span 2;
   }
 
-  .description {
+  .description,
+  .comment {
     grid-column: span 2;
   }
 
+  .comment {
+    font-style: italic;
+  }
+
   .title {
     grid-column: span 2;
     color: var(--color-blue);

src/components/Instance/test.js

@@ -19,3 +19,11 @@ tap.test("default", async (t) => {
 
   t.ok(getByText('"potato"'));
 });
+
+tap.test("$comment", async (t) => {
+  const { getByText } = render(Instance, {
+    definition: { $comment: "we have comments" },
+  });
+
+  t.ok(getByText("we have comments"));
+});

webpack.docs.config.js

@@ -52,4 +52,10 @@ module.exports = {
     }),
   ],
   devtool: prod ? false : "source-map",
+  devServer: {
+    contentBase: "./docs",
+    publicPath: "/build",
+    hot: false,
+    liveReload: true,
+  },
 };