chore(examples): add routify set-up

examples/routify/.gitignore

@@ -0,0 +1,6 @@
+/node_modules
+/dist
+.DS_Store
+.routify
+yarn-debug.log*
+yarn-error.log*

examples/routify/README.md

@@ -0,0 +1,23 @@
+# webpack
+
+> Example set-up using [Routify](https://github.com/roxiness/routify).
+
+## Getting started
+
+Quickly scaffold a new project using [degit](https://github.com/Rich-Harris/degit):
+
+```sh
+npx degit ibm/carbon-components-svelte/examples/routify svelte-app
+cd svelte-app
+yarn install
+```
+
+## Available scripts
+
+### `yarn dev`
+
+Starts the app in development mode.
+
+### `yarn build`
+
+Builds the app for production.

examples/routify/package.json

@@ -0,0 +1,39 @@
+{
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "run-p dev:*",
+    "dev:rollup": "rollup -cw",
+    "dev:routify": "routify",
+    "build": "routify -b && rollup -c && routify export"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^13.0.0",
+    "@rollup/plugin-node-resolve": "^8.1.0",
+    "@rollup/plugin-replace": "^2.3.3",
+    "@sveltech/routify": "^1.9.1",
+    "carbon-components-svelte": "^0.11.0",
+    "marked": "^1.1.1",
+    "mdsvex": "^0.8.2",
+    "npm-run-all": "^4.1.5",
+    "remark-slug": "^6.0.0",
+    "rollup": "^2.18.1",
+    "rollup-plugin-copy": "^3.3.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^5.2.3",
+    "rollup-plugin-svelte-hot": "^0.9.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "routify-plugin-frontmatter": "^1.0.1",
+    "spassr": "^1.1.2",
+    "svelte": "^3.23.2",
+    "svelte-preprocess": "^4.2.1"
+  },
+  "routify": {
+    "extensions": "svelte,md",
+    "routifyDir": ".routify",
+    "dynamicImports": true,
+    "plugins": {
+      "routify-plugin-frontmatter": {}
+    }
+  }
+}

examples/routify/rollup.config.js

@@ -0,0 +1,28 @@
+import { createRollupConfigs } from "./scripts/base.config.js";
+import slug from "remark-slug";
+import { mdsvex } from "mdsvex";
+import autoPreprocess from "svelte-preprocess";
+
+const production = !process.env.ROLLUP_WATCH;
+
+export const config = {
+  staticDir: "static",
+  distDir: "dist",
+  buildDir: "dist/build",
+  serve: !production,
+  production,
+  rollupWrapper: (cfg) => cfg,
+  svelteWrapper: (svelte) => {
+    svelte.preprocess = [
+      autoPreprocess(),
+      mdsvex({ remarkPlugins: [slug], extension: "md" }),
+    ];
+    svelte.extensions = [".svelte", ".md"];
+    return svelte;
+  },
+  swWrapper: (cfg) => cfg,
+};
+
+const configs = createRollupConfigs(config);
+
+export default configs;

examples/routify/scripts/base.config.js

@@ -0,0 +1,93 @@
+import svelte from "rollup-plugin-svelte-hot";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import livereload from "rollup-plugin-livereload";
+import { terser } from "rollup-plugin-terser";
+import copy from "rollup-plugin-copy";
+import fs from "fs";
+import replace from "@rollup/plugin-replace";
+import { spassr } from "spassr";
+import { version } from "../package.json";
+
+export function createRollupConfigs(config) {
+  const { production, serve, distDir } = config;
+  const useDynamicImports = process.env.BUNDLING === "dynamic" || !!production;
+
+  fs.rmdirSync(distDir, { recursive: true });
+
+  if (serve) spassr({ serveSpa: true, serveSsr: true, silent: false });
+
+  return [
+    baseConfig(config, { dynamicImports: false }),
+    useDynamicImports && baseConfig(config, { dynamicImports: true }),
+  ].filter(Boolean);
+}
+
+function baseConfig(config, ctx) {
+  const { dynamicImports } = ctx;
+  const {
+    staticDir,
+    distDir,
+    production,
+    buildDir,
+    svelteWrapper,
+    rollupWrapper,
+  } = config;
+
+  const outputConfig = !!dynamicImports
+    ? { format: "esm", dir: buildDir }
+    : { format: "iife", file: `${buildDir}/bundle.js` };
+
+  const svelteConfig = {
+    dev: !production,
+    css: (css) => css.write(`${buildDir}/bundle.css`, !production),
+    hot: false,
+  };
+
+  const rollupConfig = {
+    inlineDynamicImports: !dynamicImports,
+    input: "src/main.js",
+    output: { name: "routify_app", sourcemap: !production, ...outputConfig },
+    plugins: [
+      copy({
+        targets: [
+          { src: [`${staticDir}/*`, "!*/(__index.html)"], dest: distDir },
+          {
+            src: [`${staticDir}/__index.html`],
+            dest: distDir,
+            rename: "__app.html",
+            transform,
+          },
+        ],
+        copyOnce: true,
+        flatten: false,
+      }),
+      replace({ "process.env.VERSION": JSON.stringify(version) }),
+      svelte(svelteWrapper(svelteConfig, ctx)),
+      resolve({
+        browser: true,
+        dedupe: (importee) => !!importee.match(/svelte(\/|$)/),
+      }),
+      commonjs(),
+      production && terser(),
+      !production && livereload(distDir),
+    ],
+    watch: {
+      clearScreen: false,
+      buildDelay: 100,
+    },
+  };
+
+  return rollupWrapper(rollupConfig, ctx);
+
+  function transform(contents) {
+    const scriptTag =
+      typeof config.scriptTag != "undefined"
+        ? config.scriptTag
+        : '<script type="module" defer src="/build/main.js"></script>';
+    const bundleTag = '<script defer src="/build/bundle.js"></script>';
+    return contents
+      .toString()
+      .replace("__SCRIPT__", dynamicImports ? scriptTag : bundleTag);
+  }
+}

examples/routify/src/App.svelte

@@ -0,0 +1,6 @@
+<script>
+  import { Router } from "@sveltech/routify";
+  import { routes } from "../.routify/routes";
+</script>
+
+<Router routes="{routes}" />

examples/routify/src/components/Theme.svelte

@@ -0,0 +1,65 @@
+<script>
+  export let persist = false;
+  export let persistKey = "theme";
+  export let theme = "white";
+  export const themes = ["white", "g10", "g90", "g100"];
+
+  import { onMount, afterUpdate, setContext } from "svelte";
+  import { writable, derived } from "svelte/store";
+
+  const isValidTheme = (value) => themes.includes(value);
+  const isDark = (value) =>
+    isValidTheme(value) && (value === "g90" || value === "g100");
+
+  const carbon_theme = writable(theme);
+  const dark = writable(isDark(theme));
+  const light = derived(dark, (_) => !_);
+
+  const unsubscribe = carbon_theme.subscribe((value) => {
+    theme = value;
+  });
+
+  setContext("Theme", {
+    updateVar: (name, value) => {
+      document.documentElement.style.setProperty(name, value);
+    },
+    carbon_theme,
+    dark,
+    light,
+  });
+
+  onMount(() => {
+    try {
+      const persisted_theme = localStorage.getItem(persistKey);
+
+      if (isValidTheme(persisted_theme)) {
+        carbon_theme.set(persisted_theme);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+
+    return () => {
+      unsubscribe();
+    };
+  });
+
+  afterUpdate(() => {
+    if (isValidTheme(theme)) {
+      document.documentElement.setAttribute("theme", theme);
+      if (persist) {
+        localStorage.setItem(persistKey, theme);
+      }
+    } else {
+      console.warn(
+        `"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
+          themes
+        )}`
+      );
+    }
+  });
+
+  $: dark.set(isDark(theme));
+</script>
+
+<slot />

examples/routify/src/main.js

@@ -0,0 +1,6 @@
+import HMR from "@sveltech/routify/hmr";
+import App from "./App.svelte";
+
+const app = HMR(App, { target: document.body }, "routify-app");
+
+export default app;

examples/routify/src/pages/_fallback.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { url } from "@sveltech/routify";
+  import { Row, Column, Link } from "carbon-components-svelte";
+</script>
+
+<Row>
+  <Column lg="{16}">
+    <h1>404</h1>
+    <div>
+      Page not found.
+      <Link inline href="{$url('..')}">Return home</Link>
+    </div>
+  </Column>
+</Row>

examples/routify/src/pages/_layout.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { metatags, page } from "@sveltech/routify";
+  import { Content, Grid } from "carbon-components-svelte";
+  import Navigation from "./_navigation.svelte";
+  import Theme from "../components/Theme.svelte";
+</script>
+
+<style lang="scss" global>
+  @import "carbon-components-svelte/css/all";
+</style>
+
+<Theme persist theme="g10">
+  <Navigation />
+  <Content style="background: none; padding: 1rem">
+    <Grid>
+      <slot />
+    </Grid>
+  </Content>
+</Theme>

examples/routify/src/pages/_navigation.svelte

@@ -0,0 +1,35 @@
+<script>
+  import {
+    SkipToContent,
+    Header,
+    HeaderUtilities,
+    HeaderGlobalAction,
+  } from "carbon-components-svelte";
+  import Notification20 from "carbon-icons-svelte/lib/Notification20";
+  import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
+  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
+  import { getContext } from "svelte";
+
+  const ctx = getContext("Theme");
+
+  $: if (ctx) {
+    ctx.dark.subscribe((value) => {
+      console.log("dark mode?", value);
+    });
+    ctx.light.subscribe((value) => {
+      console.log("light mode?", value);
+    });
+    ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
+  }
+</script>
+
+<Header company="IBM" platformName="Carbon Components Svelte" href="/">
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+  <HeaderUtilities>
+    <HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
+    <HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
+    <HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
+  </HeaderUtilities>
+</Header>

examples/routify/src/pages/index.svelte

@@ -0,0 +1,83 @@
+<script>
+  import {
+    Breadcrumb,
+    BreadcrumbItem,
+    Grid,
+    Row,
+    Column,
+    Tabs,
+    TabContent,
+    Tab,
+    Select,
+    SelectItem,
+  } from "carbon-components-svelte";
+
+  import { getContext } from "svelte";
+
+  const { carbon_theme } = getContext("Theme");
+</script>
+
+<Row>
+  <Column lg="{16}">
+    <Breadcrumb noTrailingSlash aria-label="Page navigation">
+      <BreadcrumbItem href="/">Getting started</BreadcrumbItem>
+    </Breadcrumb>
+    <h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
+  </Column>
+</Row>
+
+<Row>
+  <Column noGutter>
+    <Tabs aria-label="Tab navigation">
+      <Tab label="About" />
+      <Tab label="Design" />
+      <Tab label="Develop" />
+      <div slot="content" class="tabbed-content">
+        <Grid as fullWidth let:props>
+          <TabContent {...props}>
+            <Row>
+              <Column md="{4}" lg="{7}">
+                <Select
+                  labelText="Carbon theme"
+                  bind:selected="{$carbon_theme}"
+                  style="margin-bottom: 1rem">
+                  <SelectItem value="white" text="White" />
+                  <SelectItem value="g10" text="Gray 10" />
+                  <SelectItem value="g90" text="Gray 90" />
+                  <SelectItem value="g100" text="Gray 100" />
+                </Select>
+                <p>
+                  Carbon is IBM’s open-source design system for digital products
+                  and experiences. With the IBM Design Language as its
+                  foundation, the system consists of working code, design tools
+                  and resources, human interface guidelines, and a vibrant
+                  community of contributors.
+                </p>
+              </Column>
+            </Row>
+          </TabContent>
+          <TabContent {...props}>
+            <Row>
+              <Column md="{4}" lg="{7}">
+                <p>
+                  Rapidly build beautiful and accessible experiences. The Carbon
+                  kit contains all resources you need to get started.
+                </p>
+              </Column>
+            </Row>
+          </TabContent>
+          <TabContent {...props}>
+            <Row>
+              <Column md="{4}" lg="{7}">
+                <p>
+                  Carbon provides styles and components in Vanilla, React,
+                  Angular, Vue and Svelte for anyone building on the web.
+                </p>
+              </Column>
+            </Row>
+          </TabContent>
+        </Grid>
+      </div>
+    </Tabs>
+  </Column>
+</Row>

examples/routify/static/__index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <title>routify</title>
+    <link rel="stylesheet" href="/build/bundle.css" />
+    __SCRIPT__
+  </head>
+  <body></body>
+</html>

examples/routify/static/robots.txt

@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *