chore: Pull assest into webpack and add card demos

knapsack/data/demos/demo.A9D1jtU7DH.json

@@ -0,0 +1,8 @@
+{
+  "id": "A9D1jtU7DH",
+  "type": "template",
+  "templateInfo": {
+    "path": "../../src/components/card/examples/demo/simpleCard.vue"
+  },
+  "title": "Card Full Demo"
+}

knapsack/data/demos/demo.QI_7r-lMZ1.json

@@ -0,0 +1,10 @@
+{
+  "id": "QI_7r-lMZ1",
+  "type": "template",
+  "templateInfo": {
+    "path": "../../src/components/card/examples/demo/complexCard.vue"
+  },
+  "title": "Complex Card",
+  "height": 586,
+  "width": 652
+}

knapsack/data/knapsack.asset-sets.json

@@ -1,16 +1,15 @@
 {
-  "globalAssetSetIds": ["example"],
+  "globalAssetSetIds": ["cedar"],
   "allAssetSets": {
-    "example": {
-      "id": "example",
-      "title": "Example",
+    "cedar": {
+      "id": "cedar",
+      "title": "Cedar",
       "inlineCss": "",
       "inlineJs": "",
       "assets": [
         {
-          "src": "../../dist/cedar-compiled.css"
+          "src": "../../dist/style.css"
         }
-
       ]
     }
   }

knapsack/data/knapsack.pattern.card.json

@@ -10,9 +10,24 @@
       "path": "../../dist/src/components/card/CdrCard.vue.mjs",
       "templateLanguageId": "vue",
       "spec": {
-        "isInferred": "../../src/components/card/CdrCard.vue"
+        "slots": {
+          "default": {
+            "title": "default"
+          }
+        },
+        "props": {
+          "$schema": "http://json-schema.org/draft-07/schema",
+          "description": "Related, interactive containers linking to a single subject or destination",
+          "type": "object",
+          "required": [],
+          "properties": {
+            "tag": {
+              "type": "string"
+            }
+          }
+        }
       },
-      "demoIds": ["aXX4u1NXJC"],
+      "demoIds": ["aXX4u1NXJC", "A9D1jtU7DH", "QI_7r-lMZ1"],
       "blockIds": []
     }
   ],

knapsack/knapsack.config.js

@@ -1,19 +1,47 @@
-const { KnapsackVueRenderer } = require('@knapsack/renderer-vue');
-const { configureKnapsack } = require('@knapsack/app');
-const { join } = require('path');
-const { version } = require('../package.json');
+const { KnapsackVueRenderer } = require("@knapsack/renderer-vue");
+const { configureKnapsack } = require("@knapsack/app");
+const { join } = require("path");
+const { version } = require("../package.json");
 
 module.exports = configureKnapsack({
-  data: join(__dirname, './data'),
-  dist: join(__dirname, './dist'),
-  public: join(__dirname, './public'),
+  data: join(__dirname, "./data"),
+  dist: join(__dirname, "./dist"),
+  public: join(__dirname, "./public"),
   version,
-  templateRenderers: [new KnapsackVueRenderer({
-
-  })],
+  templateRenderers: [
+    new KnapsackVueRenderer({
+      webpackConfig: {
+        module: {
+          rules: [
+            {
+              test: /\.s[ac]ss$/i,
+              use: [
+                // Creates `style` nodes from JS strings
+                "style-loader",
+                // Translates CSS into CommonJS
+                "css-loader",
+                // Compiles Sass to CSS
+                "sass-loader",
+              ],
+            },
+          ],
+        },
+        resolve: {
+          alias: {
+            srcdir: join(__dirname, "../src"),
+            cssdir: join(__dirname, "../src/css"),
+            componentsdir: join(__dirname, "../src/components"),
+            mixinsdir: join(__dirname, "../src/mixins"),
+            "~": join(__dirname, "../node_modules"),
+            // "@": join(__dirname, "../"),
+          },
+        },
+      },
+    }),
+  ],
   plugins: [],
   cloud: {
-    siteId: 'rei-cedar',
-    repoRoot: join(__dirname, '..'),
+    siteId: "rei-cedar",
+    repoRoot: join(__dirname, ".."),
   },
 });