docs: cleanup

TheComputerM · Sep 1, 2020 · 845cd0c · 845cd0c · vercel · Sep 1, 2020
1 parent 6c19455
commit 845cd0c
Show file tree

Hide file tree

Showing 42 changed files with 340 additions and 222 deletions.
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -32,6 +32,7 @@
     "@babel/plugin-transform-runtime": "^7.11.0",
     "@babel/preset-env": "^7.11.0",
     "@babel/runtime": "^7.11.2",
+    "@rollup/plugin-alias": "^3.1.1",
     "@rollup/plugin-babel": "^5.1.0",
     "@rollup/plugin-commonjs": "^13.0.2",
     "@rollup/plugin-node-resolve": "^9.0.0",

diff --git a/packages/docs/rollup.config.js b/packages/docs/rollup.config.js
@@ -1,76 +1,79 @@
-import resolve from '@rollup/plugin-node-resolve';
-import replace from '@rollup/plugin-replace';
-import commonjs from '@rollup/plugin-commonjs';
-import svelte from 'rollup-plugin-svelte';
-import babel from '@rollup/plugin-babel';
-import { terser } from 'rollup-plugin-terser';
-import config from 'sapper/config/rollup';
-import sveltePreprocess from 'svelte-preprocess';
-import { mdsvex } from 'mdsvex';
-import Prism from 'prismjs';
-import loadLanguages from 'prismjs/components/';
-import pkg from './package.json';
+import alias from "@rollup/plugin-alias";
+import resolve from "@rollup/plugin-node-resolve";
+import replace from "@rollup/plugin-replace";
+import commonjs from "@rollup/plugin-commonjs";
+import svelte from "rollup-plugin-svelte";
+import babel from "@rollup/plugin-babel";
+import { terser } from "rollup-plugin-terser";
+import config from "sapper/config/rollup";
+import sveltePreprocess from "svelte-preprocess";
+import { mdsvex } from "mdsvex";
+import Prism from "prismjs";
+import loadLanguages from "prismjs/components/";
+import pkg from "./package.json";
 
-const tinydate = require('tinydate');
+const tinydate = require("tinydate");
 
 const mode = process.env.NODE_ENV;
-const dev = mode === 'development';
+const dev = mode === "development";
 const legacy = !!process.env.SAPPER_LEGACY_BUILD;
 
-const onwarn = (warning, onwarn) => (warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message))
-  || (warning.code === 'CIRCULAR_DEPENDENCY'
-    && /[/\\]@sapper[/\\]/.test(warning.message))
-  || onwarn(warning);
+const onwarn = (warning, onwarn) =>
+  (warning.code === "MISSING_EXPORT" && /'preload'/.test(warning.message)) ||
+  (warning.code === "CIRCULAR_DEPENDENCY" &&
+    /[/\\]@sapper[/\\]/.test(warning.message)) ||
+  onwarn(warning);
 
-loadLanguages(['bash', 'scss', 'typescript']);
+loadLanguages(["bash", "scss", "typescript"]);
 const preprocess = [
   mdsvex({
-    extension: '.svx',
-    layout: './src/helpers/Markdown/MDXLayout.svelte',
+    extension: ".svx",
+    layout: "./src/helpers/Markdown/MDXLayout.svelte",
     remarkPlugins: [
       [
-        require('remark-bookmarks'),
+        require("remark-bookmarks"),
         {
           bookmarks: {
-            'repl playground': 'https://svelte.dev/repl/2c55788d8ffd4458bfe9bcb5f58956db'
-          }
-        }
+            "repl playground":
+              "https://svelte.dev/repl/2c55788d8ffd4458bfe9bcb5f58956db",
+          },
+        },
       ],
-      require('remark-sectionize'),
+      require("remark-sectionize"),
       [
-        require('remark-class-names'),
+        require("remark-class-names"),
         {
           classMap: {
-            'heading[depth=1]': 'heading text-h3 mb-4',
-            'heading[depth=2]': 'heading text-h4 mb-3',
-            'heading[depth=3]': 'heading text-h5 mb-2',
-            'heading[depth=4]': 'heading text-h6 mb-2',
-            link: 'app-link',
+            "heading[depth=1]": "heading text-h3 mb-4",
+            "heading[depth=2]": "heading text-h4 mb-3",
+            "heading[depth=3]": "heading text-h5 mb-2",
+            "heading[depth=4]": "heading text-h6 mb-2",
+            link: "app-link",
           },
         },
       ],
       [
-        require('remark-external-links'),
+        require("remark-external-links"),
         {
-          rel: ['noopener', 'noreferrer'],
+          rel: ["noopener", "noreferrer"],
         },
       ],
-      require('remark-slug'),
+      require("remark-slug"),
       [
-        require('remark-autolink-headings'),
+        require("remark-autolink-headings"),
         {
           content: {
-            type: 'element',
-            tagName: 'i',
-            properties: { className: ['mdi', 'mdi-pound'] },
+            type: "element",
+            tagName: "i",
+            properties: { className: ["mdi", "mdi-pound"] },
           },
         },
       ],
     ],
     highlight: {
       highlighter: (code, lang) => {
         function escape(text) {
-          return `{@html \`${text.replace(/`/g, '&#96;')}\`}`;
+          return `{@html \`${text.replace(/`/g, "&#96;")}\`}`;
         }
 
         if (lang && Prism.languages[lang]) {
@@ -89,17 +92,17 @@ const preprocess = [
   }),
   sveltePreprocess({
     scss: {
-      includePaths: ['theme'],
+      includePaths: ["theme"],
     },
     postcss: {
-      plugins: [require('autoprefixer')],
+      plugins: [require("autoprefixer")],
     },
   }),
 ];
-const extensions = ['.svelte', '.svx'];
+const extensions = [".svelte", ".svx"];
 
 const replaced = {
-  'process.env.NODE_ENV': JSON.stringify(mode),
+  "process.env.NODE_ENV": JSON.stringify(mode),
   CURRENT_DATE: tinydate("{DD}/{MM}/{YYYY}")(),
 };
 
@@ -108,8 +111,14 @@ export default {
     input: config.client.input(),
     output: config.client.output(),
     plugins: [
+      alias({
+        entries: [
+          { find: "@examples", replacement: "../../examples" },
+          { find: "@shared", replacement: "../../shared" },
+        ],
+      }),
       replace({
-        'process.browser': true,
+        "process.browser": true,
         ...replaced,
       }),
       svelte({
@@ -121,36 +130,36 @@ export default {
       }),
       resolve({
         browser: true,
-        dedupe: ['svelte'],
+        dedupe: ["svelte"],
       }),
       commonjs(),
 
-      legacy
-        && babel({
-          extensions: ['.js', '.mjs', '.html', '.svelte'],
-          babelHelpers: 'runtime',
-          exclude: ['node_modules/@babel/**'],
+      legacy &&
+        babel({
+          extensions: [".js", ".mjs", ".html", ".svelte"],
+          babelHelpers: "runtime",
+          exclude: ["node_modules/@babel/**"],
           presets: [
             [
-              '@babel/preset-env',
+              "@babel/preset-env",
               {
-                targets: '> 0.25%, not dead',
+                targets: "> 0.25%, not dead",
               },
             ],
           ],
           plugins: [
-            '@babel/plugin-syntax-dynamic-import',
+            "@babel/plugin-syntax-dynamic-import",
             [
-              '@babel/plugin-transform-runtime',
+              "@babel/plugin-transform-runtime",
               {
                 useESModules: true,
               },
             ],
           ],
         }),
 
-      !dev
-        && terser({
+      !dev &&
+        terser({
           module: true,
         }),
     ],
@@ -163,26 +172,32 @@ export default {
     input: config.server.input(),
     output: config.server.output(),
     plugins: [
+      alias({
+        entries: [
+          { find: "@examples", replacement: "../../examples" },
+          { find: "@shared", replacement: "../../shared" },
+        ],
+      }),
       replace({
-        'process.browser': false,
+        "process.browser": false,
         ...replaced,
       }),
       svelte({
-        generate: 'ssr',
+        generate: "ssr",
         hydratable: true,
         dev,
         extensions,
         preprocess,
       }),
       resolve({
-        dedupe: ['svelte'],
+        dedupe: ["svelte"],
       }),
       commonjs(),
     ],
     external: Object.keys(pkg.dependencies).concat(
-      require('module').builtinModules,
+      require("module").builtinModules
     ),
-    preserveEntrySignatures: 'strict',
+    preserveEntrySignatures: "strict",
     onwarn,
   },
 
@@ -192,7 +207,7 @@ export default {
     plugins: [
       resolve(),
       replace({
-        'process.browser': true,
+        "process.browser": true,
         ...replaced,
       }),
       commonjs(),

diff --git a/packages/docs/src/components/Example.svelte b/packages/docs/src/components/Example.svelte
diff --git a/packages/docs/src/examples/styles/typography/alignment.svelte b/packages/docs/src/examples/styles/typography/alignment.svelte
@@ -0,0 +1,9 @@
+<div>
+  <p class="text-left">Left aligned text on all viewport sizes.</p>
+  <p class="text-center">Center aligned text on all viewport sizes.</p>
+  <p class="text-right">Right aligned text on all viewport sizes.</p>
+  <p class="text-sm-right">Right aligned text on viewports sized SM (small) or wider.</p>
+  <p class="text-md-right">Right aligned text on viewports sized MD (medium) or wider.</p>
+  <p class="text-lg-right">Right aligned text on viewports sized LG (large) or wider.</p>
+  <p class="text-xl-right">Right aligned text on viewports sized XL (extra-large) or wider.</p>
+</div>
diff --git a/packages/docs/src/examples/styles/typography/decoration.svelte b/packages/docs/src/examples/styles/typography/decoration.svelte
@@ -0,0 +1,8 @@
+<div>
+  <a
+    href="https://thecomputerm.github.io/"
+    class="text-decoration-none">Non-underlined link</a>
+  <div class="text-decoration-line-through">Line-through text</div>
+  <div class="text-decoration-overline">Overline text</div>
+  <div class="text-decoration-underline">Underline text</div>
+</div>
diff --git a/packages/docs/src/examples/styles/typography/index.js b/packages/docs/src/examples/styles/typography/index.js
@@ -0,0 +1,6 @@
+export { default as typography } from './typography.svelte';
+export { default as alignment } from './alignment.svelte';
+export { default as decoration } from './decoration.svelte';
+export { default as transform } from './transform.svelte';
+export { default as weight } from './weight.svelte';
+export { default as opacity } from './opacity.svelte';
diff --git a/packages/docs/src/examples/styles/typography/opacity.svelte b/packages/docs/src/examples/styles/typography/opacity.svelte
@@ -0,0 +1,5 @@
+<div>
+  <p class="text--primary">Primary Text</p>
+  <p class="text--secondary">Secondary Text</p>
+  <p class="text--disabled">Disabled Text</p>
+</div>
diff --git a/packages/docs/src/examples/styles/typography/transform.svelte b/packages/docs/src/examples/styles/typography/transform.svelte
@@ -0,0 +1,5 @@
+<div>
+  <p class="text-lowercase">Lowercased text.</p>
+  <p class="text-uppercase">Uppercased text.</p>
+  <p class="text-capitalize">cap ital ized text.</p>
+</div>
diff --git a/packages/docs/src/examples/styles/typography/typography.svelte b/packages/docs/src/examples/styles/typography/typography.svelte
@@ -0,0 +1,15 @@
+<div style="line-height:10px">
+  <h1 class="text-h1">Heading 1</h1>
+  <h2 class="text-h2">Heading 2</h2>
+  <h3 class="text-h3">Heading 3</h3>
+  <h4 class="text-h4">Heading 4</h4>
+  <h5 class="text-h5">Heading 5</h5>
+  <h6 class="text-h6">Heading 6</h6>
+  <div class="text-subtitle-1">Subtitle 1</div>
+  <div class="text-subtitle-2">Subtitle 2</div>
+  <div class="text-body-1">Body 1</div>
+  <div class="text-body-2">Body 2</div>
+  <div class="text-button">Button</div>
+  <div class="text-caption">Caption</div>
+  <div class="text-overline">Overline</div>
+</div>
diff --git a/packages/docs/src/examples/styles/typography/weight.svelte b/packages/docs/src/examples/styles/typography/weight.svelte
@@ -0,0 +1,9 @@
+<div>
+  <p class="font-weight-black">Black text.</p>
+  <p class="font-weight-bold">Bold text.</p>
+  <p class="font-weight-medium">Medium weight text.</p>
+  <p class="font-weight-regular">Normal weight text.</p>
+  <p class="font-weight-light">Light weight text.</p>
+  <p class="font-weight-thin">Thin weight text.</p>
+  <p class="font-italic">Italic text.</p>
+</div>