docs: banner.md (#53)

* Updated netlify.toml so that images will only load from same-origin to same bandwidth
* Added fullscreen for mock browser
* Completed banner recipes

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

docs/assets/img/index.ts

@@ -0,0 +1,95 @@
+export interface Item {
+  id: string;
+  title: string;
+  subtitle?: string;
+  description?: string;
+  img: string;
+  credit: {
+    name: string;
+    url: string;
+  };
+}
+
+export interface Collection {
+  name: string;
+  description?: string;
+  items: Item[]
+}
+
+export const singapore: Collection = {
+  name: "Singapore",
+  items: [
+    {
+      id: "singapore-1",
+      title: "Marina Bay Sands",
+      img: "/img/singapore/hu-chen-__cBlRzLSTg-unsplash.jpg",
+      credit: {
+        name: "Hu Chen",
+        url: "https://unsplash.com/@huchenme"
+      }
+    },
+    {
+      id: "singapore-2",
+      title: "Gardens by the Bay",
+      img: "/img/singapore/sergio-sala-VbB6HYunm04-unsplash.jpg",
+      credit: {
+        name: "Sergio Sala",
+        url: "https://unsplash.com/@sergiosala"
+      }
+    },
+    {
+      id: "singapore-3",
+      title: "Fireworks",
+      img: "/img/singapore/k8-KqkSoXWabJ8-unsplash.jpg",
+      credit: {
+        name: "K8",
+        url: "https://unsplash.com/@k8_iv"
+      }
+    },
+    {
+      id: "singapore-4",
+      title: "Cloud Forest",
+      img: "/img/singapore/yuiizaa-september-BvG0I_bv4BI-unsplash.jpg",
+      credit: {
+        name: "Yuiizaa September",
+        url: "https://unsplash.com/@yuiizaa"
+      }
+    },
+    {
+      id: "singapore-5",
+      title: "Jewel",
+      img: "/img/singapore/joe-green-9yoPzIns9G4-unsplash.jpg",
+      credit: {
+        name: "Joe Green",
+        url: "https://unsplash.com/@jg"
+      }
+    },
+    {
+      id: "singapore-6",
+      title: "Chinatown",
+      img: "/img/singapore/lily-banse-e1Rc28R4qoA-unsplash.jpg",
+      credit: {
+        name: "Lily Banse",
+        url: "https://unsplash.com/@lvnatikk"
+      }
+    },
+    {
+      id: "singapore-7",
+      title: "Urban",
+      img: "/img/singapore/hanson-lu-ShUDNP6EV-I-unsplash.jpg",
+      credit: {
+        name: "Hanson Lu",
+        url: "https://unsplash.com/@hansonluu"
+      }
+    },
+    {
+      id: "singapore-8",
+      title: "Town",
+      img: "/img/singapore/zhu-hongzhi-tzFVsg6nWtM-unsplash.jpg",
+      credit: {
+        name: "Zhu Hongzhi",
+        url: "https://unsplash.com/@zhuzhutrain"
+      }
+    }
+  ]
+}

docs/components/global/recipes-getting-started.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <alert type="warning">
+      Keep a look out on this space. Constantly adding more recipes over the next few months.
+      <a href="https://github.com/fuxingloh/vue-horizontal" target="_blank">Give this repo a star, it will help out greatly!</a>
+    </alert>
+
+    <ul>
+      <li>Vue Horizontal is required, and you need to
+        <n-link to="/installation"> install it</n-link>
+        .
+      </li>
+      <li>Recipes follow the design language defined in the
+        <n-link to="/design/principles">design principle</n-link>
+        .
+      </li>
+      <li>You should be able to extract the code snippet and use it as a single file component.</li>
+      <li>If you are consistently recycling a design pattern, you should abstract your SFC.</li>
+      <li>It might look different on your website due various parent CSS rules. Tailwind is used under the hood with
+        normalizing, that might be different from your default settings.
+      </li>
+    </ul>
+
+    <h4>Recipes are designed:</h4>
+
+    <ul>
+      <li>For the responsive web,
+        <n-link to="/design/responsive">using default breakpoints</n-link>
+        .
+      </li>
+      <li>For mobile first design,
+        <n-link to="/design/principles#peeking">peeking navigation</n-link>
+        will be used on the mobile.
+        Assumption is made that you have a padding of 24px on the left and right on the mobile viewport.
+        The 24px is then removed and added into the <code>&lt;vue-horizontal&gt;</code> as scroll padding.
+      </li>
+      <li>For broad usage pattern, you should take it and edit it your needs.</li>
+    </ul>
+
+    <h4>Why is it so complex? Why is it not shipped together with vue-horizontal?</h4>
+
+    <ul>
+      <li>You control how to structure your content with HTML</li>
+      <li>You control how it looks with CSS</li>
+      <li>
+        To give you greater control of your website and thus your code, vue-horizontal is merely a small component to
+        horizontally align your content while fixing all the nasty quirks related to horizontal control
+        (nav/scroll/touch).
+        It also contains a few methods and event emitter that are optimized to make your life easier.
+        It doesn't dictate how you structure your HTML or style your CSS.
+        This responsive design logic is merely a skeleton of logic that is merely useful in that context.
+        And every recipe may requires a different set of logic.
+      </li>
+    </ul>
+  </div>
+</template>

docs/components/global/snippet-mock-browser.vue

@@ -1,40 +1,77 @@
 <template>
-  <div class="mock-browser overflow-hidden rounded-md border border-pre-color">
-    <div class="bg-pre-color p-3">
-      <div class="flex items-center justify-between">
-        <div class="flex -m-1">
-          <div class="p-1">
-            <div class="bg-red-500 w-3 h-3 rounded-full"></div>
+  <div :class="{fullscreen}">
+    <div class="overlay" @click="fullscreen = false"></div>
+    <main class="mock-browser overflow-hidden rounded-md border border-pre-color">
+      <header class="bg-pre-color sticky">
+        <div class="flex items-center justify-between" @click="fullscreen = false">
+          <div class="dots">
+            <div>
+              <div class="bg-red-500"/>
+            </div>
+            <div>
+              <div class="bg-yellow-500"/>
+            </div>
+            <div>
+              <div class="bg-green-500"/>
+            </div>
           </div>
-          <div class="p-1">
-            <div class="bg-yellow-500 w-3 h-3 rounded-full"></div>
-          </div>
-          <div class="p-1">
-            <div class="bg-green-500 w-3 h-3 rounded-full"></div>
+
+          <div class="flex items-center text-white fill-current cursor-pointer px-2"
+               @click.stop="fullscreen = !fullscreen">
+            <div class="text-sm font-black" v-if="!fullscreen">
+              More accurate representation →
+            </div>
+            <svg v-if="fullscreen" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24">
+              <path
+                  d="M21.29,4.12l-4.59,4.59l1.59,1.59c0.63,0.63,0.18,1.71-0.71,1.71H13c-0.55,0-1-0.45-1-1V6.41c0-0.89,1.08-1.34,1.71-0.71 l1.59,1.59l4.59-4.59c0.39-0.39,1.02-0.39,1.41,0v0C21.68,3.1,21.68,3.73,21.29,4.12z M4.12,21.29l4.59-4.59l1.59,1.59 c0.63,0.63,1.71,0.18,1.71-0.71V13c0-0.55-0.45-1-1-1H6.41c-0.89,0-1.34,1.08-0.71,1.71l1.59,1.59l-4.59,4.59 c-0.39,0.39-0.39,1.02,0,1.41l0,0C3.1,21.68,3.73,21.68,4.12,21.29z"/>
+            </svg>
+
+            <svg v-else height="24" viewBox="0 0 24 24" width="24">
+              <path
+                  d="M6 14c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1h3c.55 0 1-.45 1-1s-.45-1-1-1H7v-2c0-.55-.45-1-1-1zm0-4c.55 0 1-.45 1-1V7h2c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1zm11 7h-2c-.55 0-1 .45-1 1s.45 1 1 1h3c.55 0 1-.45 1-1v-3c0-.55-.45-1-1-1s-1 .45-1 1v2zM14 6c0 .55.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1V6c0-.55-.45-1-1-1h-3c-.55 0-1 .45-1 1z"/>
+            </svg>
           </div>
         </div>
-      </div>
-    </div>
+      </header>
 
-    <div class="viewport bg-white">
-      <slot></slot>
-    </div>
+      <div>
+        <div class="viewport bg-white">
+          <slot></slot>
+        </div>
 
-    <div class="snippet">
-      <slot name="snippet"></slot>
-    </div>
+        <div class="snippet">
+          <slot name="snippet"></slot>
+        </div>
+      </div>
+    </main>
   </div>
 </template>
 
 <script>
 export default {
-  name: "mock-browser"
+  data() {
+    return {
+      fullscreen: false
+    }
+  }
 }
 </script>
 
 <style lang="less" scoped>
 @pre-color: #2d3748;
 
+.dots {
+@apply flex -m-1 p-3;
+
+  > div {
+  @apply p-1;
+
+    > div {
+    @apply w-3 h-3 rounded-full;
+    }
+  }
+}
+
 .snippet /deep/ pre {
   margin: 0 !important;
   border-top-left-radius: 0;
@@ -80,5 +117,39 @@ export default {
 
 .snippet /deep/ pre {
   padding-top: 1.25rem !important;
+  font-size: 0.9em;
+}
+
+.fullscreen {
+@apply fixed inset-0;
+  background: #33333344;
+  backdrop-filter: blur(2px);
+  z-index: 100;
+
+  .dots > div:first-child {
+  @apply cursor-pointer;
+  }
+
+  .overlay {
+  @apply absolute inset-0;
+  }
+
+  > main {
+  @apply mx-auto;
+    margin-top: 5vh;
+    height: 90vh;
+    width: 100vw;
+    max-width: 1600px;
+    background: white;
+
+    @media (min-width: 1280px) {
+      width: 96vw;
+    }
+
+    > div {
+      overflow-y: scroll;
+      height: calc(100% - 32px);
+    }
+  }
 }
 </style>

docs/content/en/index.md

@@ -10,6 +10,7 @@ features:
 - Snap to the nearest item when scrolling
 - Moves the responsibilities of the CSS to the user
 - Extensible for any use case with a collection of recipes.
+- End-to-end tested on all major browser at code merge with 240+ test cases.
 ---
 
 <alert type="info">

docs/content/en/recipes/banner.md

@@ -0,0 +1,25 @@
+---
+title: Banner
+description: 'Vue Horizontal recipes, over 100 crafted recipes of horizontal layout with various design choices and control mechanisms ready for your needs.'
+position: 501
+category: Recipes
+---
+
+### Getting Started
+
+<recipes-getting-started></recipes-getting-started>
+
+## Banner 1 - 3
+
+```vue[] import=recipes/banner/recipes-banner-1-3.vue padding=0
+```
+
+## Banner 1 - 5
+
+```vue[] import=recipes/banner/recipes-banner-1-5.vue padding=0
+```
+
+## Banner 2 - 8
+
+```vue[] import=recipes/banner/recipes-banner-2-8.vue padding=0
+```