Update docs.

haltu · Sep 14, 2022 · 219e008 · 219e008
1 parent 9551104
commit 219e008
Show file tree

Hide file tree

Showing 17 changed files with 287 additions and 267 deletions.
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -1,19 +1,18 @@
 import { version } from '../../package.json';
 
 export default {
-  lang: 'en-US',
-  title: 'Muuri',
-  description: 'Build all kinds of layouts',
+  title: 'Muuri Docs',
+  description: 'Documentation for Muuri JavaScript library.',
 
-  head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]],
+  head: [['link', { rel: 'icon', type: 'image/svg+xml', href: '/muuri-icon.svg' }]],
 
   lastUpdated: true,
 
   // Experimental Feature - it is giving 404 when reloading the page in the docs
   // cleanUrls: 'without-subfolders',
 
   themeConfig: {
-    logo: '/logo.svg',
+    logo: '/muuri-icon.svg',
 
     nav: nav(),
 
@@ -22,17 +21,12 @@ export default {
     },
 
     editLink: {
-      pattern: 'https://github.com/haltu/muuri/edit/main/docs/:path',
+      pattern: 'https://github.com/haltu/muuri/edit/master/docs/:path',
       text: 'Edit this page on GitHub',
     },
 
     socialLinks: [{ icon: 'github', link: 'https://github.com/haltu/muuri' }],
 
-    footer: {
-      message: 'Released under the MIT License.',
-      copyright: 'Copyright © 2017-present Niklas Rämö',
-    },
-
     algolia: {
       appId: 'xxxxx',
       apiKey: 'xxxxx',
@@ -48,12 +42,6 @@ export default {
 
 function nav() {
   return [
-    { text: 'Docs', link: '/what-is-muuri', activeMatch: '/' },
-    {
-      text: 'Examples',
-      link: '/examples',
-      activeMatch: '/examples',
-    },
     {
       text: version,
       items: [
@@ -73,18 +61,16 @@ function nav() {
 function sidebarGuide() {
   return [
     {
-      text: 'Introduction',
-      collapsible: true,
+      collapsible: false,
       items: [
-        { text: 'What is Muuri?', link: '/' },
+        { text: 'Introduction', link: '/' },
         { text: 'Getting Started', link: '/getting-started' },
-        { text: 'Motivation', link: '/motivation' },
-        { text: 'Credits', link: '/credits' },
+        { text: 'Examples', link: '/examples' },
       ],
     },
     {
       text: 'API',
-      collapsible: true,
+      collapsible: false,
       items: [
         { text: 'Grid Constructor', link: '/grid-constructor' },
         { text: 'Grid Options', link: '/grid-options' },
@@ -93,10 +79,5 @@ function sidebarGuide() {
         { text: 'Item Methods', link: '/item-methods' },
       ],
     },
-    {
-      text: 'Examples',
-      collapsible: true,
-      items: [{ text: 'Demos', link: '/examples' }],
-    },
   ];
 }
diff --git a/docs/credits.md b/docs/credits.md
diff --git a/docs/examples.md b/docs/examples.md
@@ -2,111 +2,111 @@
 
 ## Barebones Grid
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: barebones grid" src="https://codepen.io/niklasramo/embed/preview/wpwNjK?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: barebones grid" src="https://codepen.io/niklasramo/embed/preview/wpwNjK?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/wpwNjK">
   Muuri: barebones grid</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
 </iframe>
 
 ## Basic Sorting
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: basic sorting" src="https://codepen.io/niklasramo/embed/preview/EvXoOG?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: basic sorting" src="https://codepen.io/niklasramo/embed/preview/EvXoOG?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/EvXoOG">
   Muuri: basic sorting</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
 </iframe>
 
 ## Basic Vertical Grid With Dragging
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: basic vertical grid with dragging" src="https://codepen.io/niklasramo/embed/preview/jyJLGM?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: basic vertical grid with dragging" src="https://codepen.io/niklasramo/embed/preview/jyJLGM?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/jyJLGM">
   Muuri: basic vertical grid with dragging</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
 </iframe>
 
 ## Basic Horizontal Grid With Dragging
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: basic horizontal grid with dragging" src="https://codepen.io/niklasramo/embed/preview/xPoVPe?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: basic horizontal grid with dragging" src="https://codepen.io/niklasramo/embed/preview/xPoVPe?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/xPoVPe">
   Muuri: basic horizontal grid with dragging</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
 </iframe>
 
 ## Multiple Instances
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri demo: multiple instances" src="https://codepen.io/niklasramo/embed/preview/wJKMQz?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri demo: multiple instances" src="https://codepen.io/niklasramo/embed/preview/wJKMQz?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/wJKMQz">
   Muuri demo: multiple instances</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
 </iframe>
 
 ## Links As Grid Items
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: links as grid items" src="https://codepen.io/niklasramo/embed/preview/ZvzVpg?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: links as grid items" src="https://codepen.io/niklasramo/embed/preview/ZvzVpg?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/ZvzVpg">
   Muuri: links as grid items</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
 </iframe>
 
 ## Prevent Dragging For Specific Items
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: prevent dragging for specific items" src="https://codepen.io/niklasramo/embed/preview/LOzZPo?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: prevent dragging for specific items" src="https://codepen.io/niklasramo/embed/preview/LOzZPo?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/LOzZPo">
   Muuri: prevent dragging for specific items</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
 </iframe>
 
 ## Custom Layout Algorithm
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: custom layout algorithm" src="https://codepen.io/niklasramo/embed/preview/LLbLLd?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: custom layout algorithm" src="https://codepen.io/niklasramo/embed/preview/LLbLLd?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/LLbLLd">
   Muuri: custom layout algorithm</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
 </iframe>
 
 ## Simple Kanban (With Scrolling Containers)
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: simple kanban (with scrolling containers)" src="https://codepen.io/niklasramo/embed/preview/BrYaOp?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: simple kanban (with scrolling containers)" src="https://codepen.io/niklasramo/embed/preview/BrYaOp?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/BrYaOp">
   Muuri: simple kanban (with scrolling containers)</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
 </iframe>
 
 ## Images Inside Grid Items
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: images inside grid items" src="https://codepen.io/niklasramo/embed/preview/xWYdmp?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: images inside grid items" src="https://codepen.io/niklasramo/embed/preview/xWYdmp?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/xWYdmp">
   Muuri: images inside grid items</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
 </iframe>
 
 ## Saving And Loading Layout
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: saving and loading layout" src="https://codepen.io/niklasramo/embed/preview/YveqNN?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: saving and loading layout" src="https://codepen.io/niklasramo/embed/preview/YveqNN?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/YveqNN">
   Muuri: saving and loading layout</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
 </iframe>
 
 ## Clone Item Back To Original Grid When Dropping To Another Grid
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri demo: clone item back to original grid when dropping to another grid" src="https://codepen.io/niklasramo/embed/preview/zPVBLq?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri demo: clone item back to original grid when dropping to another grid" src="https://codepen.io/niklasramo/embed/preview/zPVBLq?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/zPVBLq">
   Muuri demo: clone item back to original grid when dropping to another grid</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
 </iframe>
 
 ## Blocked First Item
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: blocked first item" src="https://codepen.io/niklasramo/embed/preview/EEdmJr?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: blocked first item" src="https://codepen.io/niklasramo/embed/preview/EEdmJr?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/EEdmJr">
   Muuri: blocked first item</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.
 </iframe>
 
 ## Drag Start Delay On Touch
 
-<iframe height="300" style="width: 100%;" scrolling="no" title="Muuri: drag start delay on touch" src="https://codepen.io/niklasramo/embed/preview/WNRLwEV?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+<iframe height="400" style="width: 100%;" scrolling="no" title="Muuri: drag start delay on touch" src="https://codepen.io/niklasramo/embed/preview/WNRLwEV?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href="https://codepen.io/niklasramo/pen/WNRLwEV">
   Muuri: drag start delay on touch</a> by Niklas Rämö (<a href="https://codepen.io/niklasramo">@niklasramo</a>)
   on <a href="https://codepen.io">CodePen</a>.

diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -58,9 +58,7 @@ Or link directly:
   <div class="item">
     <div class="item-content">
       <!-- Safe zone, enter your custom markup -->
-      <div class="my-custom-content">
-        Yippee!
-      </div>
+      <div class="my-custom-content">Yippee!</div>
       <!-- Safe zone ends -->
     </div>
   </div>
@@ -113,4 +111,4 @@ The bare minimum configuration is demonstrated below. You must always provide th
 var grid = new Muuri('.grid');
 ```
 
-You can view this little tutorial demo [here](https://codepen.io/niklasramo/pen/wpwNjK). After that you might want to check some [other demos](https://codepen.io/collection/AWopag/) as well.
+You can view this little tutorial demo [here](https://codepen.io/niklasramo/pen/wpwNjK). After that you might want to check some [examples](/examples.html) as well.
diff --git a/docs/grid-constructor.md b/docs/grid-constructor.md
@@ -1,4 +1,4 @@
-# Grid constructor
+# Grid Constructor
 
 `Muuri` is a constructor function and should be always instantiated with the `new` keyword. For the sake of clarity, we refer to a Muuri instance as _grid_ throughout the documentation.