reduce duplication by importing readme into demo site

janosh · Jan 17, 2022 · 8410fe0 · 8410fe0
1 parent 9fa2b0c
commit 8410fe0
Show file tree

Hide file tree

Showing 13 changed files with 208 additions and 217 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,3 @@ package
 
 # deploy config
 .netlify
-
-# auto-generated
-src/docs.svx
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -38,6 +38,7 @@ repos:
       - id: eslint
         types: [file]
         files: \.(svelte|js)$
+        args: [--plugin, eslint-plugin-svelte3]
         additional_dependencies:
           - eslint
           - svelte

diff --git a/package.json b/package.json
@@ -13,29 +13,27 @@
     "dev": "svelte-kit dev",
     "build": "svelte-kit build",
     "preview": "svelte-kit preview",
-    "predev": "yarn prebuild",
-    "prebuild": "cp readme.md src/docs.svx && sed -i.bak '1,/^<!-- remove above in docs -->$/d' src/docs.svx && rm src/docs.svx.bak",
     "package": "svelte-kit package",
     "serve": "yarn build && yarn preview",
     "check": "svelte-check --ignore package"
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "^1.0.0-next.24",
-    "@sveltejs/kit": "^1.0.0-next.218",
-    "@typescript-eslint/eslint-plugin": "^5.9.0",
-    "@typescript-eslint/parser": "^5.9.0",
-    "eslint": "^8.6.0",
-    "eslint-plugin-svelte3": "^3.3.0",
+    "@sveltejs/adapter-static": "^1.0.0-next.26",
+    "@sveltejs/kit": "^1.0.0-next.232",
+    "@typescript-eslint/eslint-plugin": "^5.9.1",
+    "@typescript-eslint/parser": "^5.9.1",
+    "eslint": "^8.7.0",
+    "eslint-plugin-svelte3": "^3.4.0",
     "mdsvex": "^0.9.8",
     "prettier": "^2.5.1",
-    "prettier-plugin-svelte": "^2.5.1",
-    "svelte": "^3.45.0",
-    "svelte-check": "^2.2.11",
+    "prettier-plugin-svelte": "^2.6.0",
+    "svelte": "^3.46.2",
+    "svelte-check": "^2.3.0",
     "svelte-github-corner": "^0.1.0",
     "svelte-preprocess": "^4.10.1",
-    "svelte2tsx": "^0.4.12",
+    "svelte2tsx": "^0.4.14",
     "typescript": "^4.5.4",
-    "vite": "^2.7.10"
+    "vite": "^2.7.12"
   },
   "keywords": [
     "svelte",

diff --git a/readme.md b/readme.md
@@ -1,18 +1,23 @@
-<p align="center">
-  <img src="static/favicon.svg" alt="Svelte Bricks" height=150>
-</p>
+<div class="hide-in-docs">
 
-# Svelte Bricks
+<h1 align="center">
+  <img src="https://raw.githubusercontent.com/janosh/svelte-bricks/main/static/favicon.svg" alt="Svelte Bricks" height=60>
+  <br>&ensp;Svelte Bricks
+</h1>
+
+<h4 align="center">
 
 [![NPM version](https://img.shields.io/npm/v/svelte-bricks?color=blue&logo=NPM)](https://npmjs.com/package/svelte-bricks)
 [![Netlify Status](https://api.netlify.com/api/v1/badges/c3213069-e3cc-45ef-a446-b2358b9a35fb/deploy-status)](https://app.netlify.com/sites/svelte-bricks/deploys)
 [![pre-commit.ci status](https://results.pre-commit.ci/badge/github/janosh/svelte-bricks/main.svg)](https://results.pre-commit.ci/latest/github/janosh/svelte-bricks/main)
 
-This is a naive masonry implementation in Svelte without column balancing.
+</h4>
+
+Naive implementation in Svelte without column balancing.
 
 **[Live demo](https://svelte-bricks.netlify.app)**
 
-<!-- remove above in docs -->
+</div>
 
 ## Installation
 
@@ -53,6 +58,8 @@ h)
 
 **Note**: On non-primitive types, i.e. if `items` is an array of objects, this component requires that each object have a key named `'id'` that contains a unique primitive value. This value is used to identify each item in the keyed `{#each}` block that renders the masonry layout. Without this, Svelte could not avoid duplicates when new items are added nor maintain order when existing ones are rearranged. Read the [Svelte docs](https://svelte.dev/tutorial/keyed-each-blocks) for details.
 
+**Hint**: Balanced columns can be achieved even with this simple implementation if masonry items are allowed to stretch to the column height.
+
 ## Props
 
 `Masonry.svelte` expects an array of `items` as well as a `<slot />` component used to render each of the `items`. The array can contain whatever data (objects, strings, numbers) as long as the slot component knows how to handle it.

diff --git a/src/app.html b/src/app.html
@@ -19,6 +19,6 @@
   </head>
 
   <body>
-    %svelte.body%
+    <div id="svelte">%svelte.body%</div>
   </body>
 </html>
diff --git a/src/components/Collapsible.svelte b/src/components/Collapsible.svelte
@@ -15,27 +15,27 @@
   }
 </script>
 
-<h2 on:click={toggle}>
+<h3 on:click={toggle}>
   {#if Array.isArray(title)}{isOpen ? title[1] : title[0]}{:else}{title}{/if}
   <span style="display:inline-block; transform: rotate({$angle}deg);">👆</span>
-</h2>
+</h3>
 {#if isOpen}
   <div transition:slide={{ duration }}>
     <slot />
   </div>
 {/if}
 
 <style>
-  h2 {
+  h3 {
     cursor: pointer;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 4pt;
     width: max-content;
     padding: 4pt 1ex;
-    margin: 1em auto;
+    margin: 2em auto;
     transition: 0.3s;
   }
-  h2:hover {
+  h3:hover {
     transform: scale(1.01);
     background: rgba(255, 255, 255, 0.4);
   }

diff --git a/src/components/Example.svelte b/src/components/Example.svelte
@@ -22,8 +22,8 @@
 </div>
 
 <p>
-  Masonry size: <span>{masonryWidth}px</span> &times; <span>{masonryHeight}px</span> (w &times;
-  h)
+  Masonry size: <span>{masonryWidth}px</span> &times; <span>{masonryHeight}px</span>
+  (w &times; h)
 </p>
 
 <Masonry

diff --git a/src/components/Header.svx b/src/components/Header.svx
@@ -0,0 +1,15 @@
+
+<h1 align="center">
+  <img src="https://raw.githubusercontent.com/janosh/svelte-bricks/main/static/favicon.svg" alt="Svelte Bricks" height=60>
+  <br>&ensp;Svelte Bricks
+</h1>
+
+<h4 align="center">
+
+[![NPM version](https://img.shields.io/npm/v/svelte-bricks?color=blue&logo=NPM)](https://npmjs.com/package/svelte-bricks)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/c3213069-e3cc-45ef-a446-b2358b9a35fb/deploy-status)](https://app.netlify.com/sites/svelte-bricks/deploys)
+[![pre-commit.ci status](https://results.pre-commit.ci/badge/github/janosh/svelte-bricks/main.svg)](https://results.pre-commit.ci/latest/github/janosh/svelte-bricks/main)
+
+</h4>
+
+Naive implementation in Svelte without column balancing.
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import GitHubCorner from 'svelte-github-corner'
+  import Readme from '../../readme.md'
+  import Collapsible from '../components/Collapsible.svelte'
+  import Example from '../components/Example.svelte'
+  import Header from '../components/Header.svx'
+</script>
+
+<GitHubCorner
+  href="https://github.com/janosh/svelte-bricks"
+  --ghc-color="var(--bodyBg)"
+  --ghc-bg="white"
+/>
+
+<Header />
+
+<Collapsible title={[`Click for docs`, `Close docs`]}>
+  <Readme />
+</Collapsible>
+
+<Example />
+
+<style>
+  :global(h1) {
+    display: flex;
+    font-size: clamp(2rem, 2rem + 2vw, 3rem);
+    place-items: center;
+    place-content: center;
+    margin: 1.2em 0;
+  }
+  :global(h1 br) {
+    display: none;
+  }
+  @media (max-width: 600px) {
+    :global(h1) {
+      flex-direction: column;
+      gap: 1ex;
+      line-height: 1.1em;
+    }
+  }
+  :global(.hide-in-docs) {
+    display: none;
+  }
+</style>
diff --git a/src/routes/index.svx b/src/routes/index.svx
diff --git a/static/global.css b/static/global.css
@@ -4,17 +4,11 @@
 body {
   background: var(--bodyBg);
   padding: 2em;
-  font-family: -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
   color: white;
   text-align: center;
-  max-width: 65em;
-  margin: auto;
-}
-main {
-  max-width: 45em;
-  margin: auto;
-  margin-bottom: 3em;
+  max-width: 70em;
+  margin: 0 auto 3em;
 }
 a {
   color: cornflowerblue;

diff --git a/svelte.config.js b/svelte.config.js
@@ -3,14 +3,23 @@ import { mdsvex } from 'mdsvex'
 import preprocess from 'svelte-preprocess'
 
 export default {
-  extensions: [`.svelte`, `.svx`],
+  extensions: [`.svelte`, `.svx`, `.md`],
 
-  preprocess: [preprocess(), mdsvex()],
+  preprocess: [
+    preprocess(),
+    mdsvex({ extensions: [`.svelte`, `.svx`, `.md`] }),
+  ],
 
   kit: {
     adapter: adapter(),
 
-    // hydrate the <body> element in src/app.html
-    target: `body`,
+    // hydrate the <div/> with id 'svelte' in src/app.html
+    target: `#svelte`,
+
+    vite: {
+      server: {
+        fs: { allow: [`..`] }, // needed to import readme.md
+      },
+    },
   },
 }