Feature: docs and landing page restyle (#2143)

* fix(MdRadio): internal radio not being checked (#2063)

* fix(MdMenu): unexpected close on item click (#2062)

* docs: add funding

* test: add a "testURL" field to jest config (#2082)

fixes the " SecurityError: localStorage is not available for opaque
origins"  error message that everyone seems to get on their PRs.

Using the solution provided here jestjs/jest#3630

* Docs/restyle (#2139)

* Changed 'roboto mono' to 'roboto'

* Changed code fund position to bottom right

* updates

Added ‘supported by Creative Tim’ in About page
Added open collective

* added links to header

* Removed disclaimer, added sponsors, changed footer

* Add premium-themes page and link to it from the footer

* Added products to premium themes page

* Finished premium page

* Finished installation/usage/premium-themes section

* Installed vue-github-buttons

* Added GitHub star button

* Added license, download and chat buttons

* Changed order in gh star button

* Changed page transition

* Added vue-toc

* Style modified for toc

* Added ids on getting started for vue-toc

* Added ids on themes-congifuration for vue-toc

* Added ids on layouts for vue-toc

* Added ids on typography

* Added ids on components->app for vue-toc

* Added ids on buttomBar for vue-toc

* Added ids on Button for vue-toc

* Added ids on Card for vue-toc

* Added ids on datepicker for vue-toc

* Added ids on Dialog for vue-toc

* Added ids on Drawer for vue-toc

* Added ids on autocomplete for vue-toc

* Added ids on Chips for vue-toc

* Added ids on Input for vue-toc

* Added ids on Icon for vue-toc

* Added ids on List for vue-toc

* Added ids on Menu for vue-toc

* Added ids on speedDial for vue-toc

* Added ids on steppers for vue-toc

* Added ids on table for vue-toc

* Added ids on Tabs for vue-toc

* Added ids on toolbar for vue-toc

* Added ids on Tooltip for vue-toc

* Updated license

* Added key to vue-toc

* Small change

* Changed codeinwp logo

* updates

* Css changes for logo and gh-button

* Added more space between buttons

* Removed arrow down & nabber buttons hidden on mobile

* style changes, added premium themes in navbar, centered premium themes

* Cards change

* toc style

* Changed style for code-fund

* restyle codefund

* Restyled home premium section

* Commented contribuitors section

* Changed Patreon text to Open Collective

* Changed home premium background color

* Removed open collective

* Added link to premium-themes from themes image

* Added target blank

* Restyled vue-toc

* added refs

* Responsive changes

* Changed margin on title

* Added custom development link

* Added links from sponsors

* lint fix

* add margin left

FUNDING.yml

@@ -0,0 +1,2 @@
+patreon: marcosmoura
+custom: http://bit.ly/VueMaterialPaypal

docs/app/App.vue

@@ -3,7 +3,7 @@
     <main-header />
 
     <div class="container-wrapper md-layout-row" :class="containerClass">
-      <main-nav />
+      <main-nav/>
 
       <div class="main-container" v-if="loading">
         <code-loading>Loading page...</code-loading>
@@ -93,7 +93,6 @@
     padding-top: 64px;
     display: flex;
     flex-direction: column;
-    font-family: "Roboto Mono", monospace;
     transition: $md-transition-default;
     transition-property: padding-top;
 

docs/app/components/AdManager.vue

@@ -36,17 +36,23 @@
   $ad-responsive-small: 768px;
 
   .ad-manager {
-    width: calc(100% + 32px);
-    margin: 0 -16px -16px;
+    right: 0;
+    bottom: 0;
+    border-top-left-radius: 4px;
+    z-index: 2000;
+    margin-bottom: 150px;
 
     @media (max-width: $ad-responsive-small) {
       display: flex;
     }
   }
 
+  .home-page .ad-manager{
+    background: #303030;
+  }
+
   .code-fund {
     max-width: 175px;
-    margin: 0 16px 24px 16px;
     padding: 8px;
     display: flex;
     flex-direction: column;
@@ -74,7 +80,7 @@
       @media (max-width: $ad-responsive-big) {
         max-width: 530px;
         min-height: 100px;
-        margin: 60px auto 8px;
+        margin: 0px auto 8px;
         float: none;
         background: none !important;
       }

docs/app/components/PageContainer.vue

@@ -48,6 +48,15 @@
     margin: 0 auto;
     padding: 16px;
     transition: .4s $md-transition-default-timing;
+    transition-property: width;
+  }
+
+  @media(min-width:981px){
+    .page-container.centered{
+
+      margin-right: 280px;
+    }
+
   }
 
   .page-container-leave-active {
@@ -98,4 +107,20 @@
       }
     }
   }
+
+  .ad-manager{
+    margin-bottom: 0 !important;
+    position: fixed;
+  }
+
+  @media(max-width: 960px){
+    .ad-manager{
+      position: relative;
+      >>>.code-fund{
+        float: none;
+        margin: 0;
+
+      }
+    }
+  }
 </style>

docs/app/i18n/en-US/pages.js

@@ -10,11 +10,12 @@ export default {
     featuredContent: 'Complete with dynamic themes, on-demand components and all with an easy-to-use API.',
     ecosystem: 'Ecosystem',
     premium: 'Premium Themes',
+    custom: 'Custom Development',
     viewProject: 'View project',
     sponsors: 'Sponsors',
     backers: 'Backers',
     sponsorsDescription: 'Vue Material does not run under the umbrella of any company or anything like that. It is an independent project created by {0} in his spare time, which has become one of the most used UI Libraries for Vue.js. The development is active and we are working hard to release great things for you.',
-    beAPatron: 'If you think that this project helped you or your company in any way, you can consider becoming a backer/sponsor on Patreon'
+    beACollective: 'If you think that this project helped you or your company in any way, you can consider becoming a backer/sponsor on Open Collective'
   },
   about: {
     title: 'About'

docs/app/index.js

@@ -4,6 +4,12 @@ import Vue from 'vue'
 import ga from 'vue-ga'
 import { sync } from 'vuex-router-sync'
 import VueMaterial from 'vue-material'
+import VueGitHubButtons from 'vue-github-buttons'
+import VueToc from 'vue-toc'
+
+Vue.component('vue-toc', VueToc)
+
+import 'vue-github-buttons/dist/vue-github-buttons.css';
 
 /* App */
 import App from './App'
@@ -14,6 +20,7 @@ import './components'
 
 Vue.config.productionTip = false
 Vue.use(VueMaterial)
+Vue.use(VueGitHubButtons)
 
 ga(router, 'UA-85823257-1')
 sync(store, router)

docs/app/pages/About.vue

@@ -32,14 +32,13 @@
       <p>This project started as a side project and became the library as it is today, one of the most used UI Libraries for Vue.js!</p>
     </section>
 
-    <section class="page-container-section">
+    <!-- <section class="page-container-section">
       <h2 class="md-title">Want to pay me a coffee?</h2>
 
-      <p>I don't drink coffee, but I can easily turn this into a strong and bold IPA beer... Or a burger... Or a Redbull! If you think that this project helped you or your company in any way, you can consider become a backer/sponsor on Patreon.</p>
-      <a href="https://www.patreon.com/bePatron?u=4832202" target="_blank" class="about-patreon">
-        <img src="/assets/sponsors/patreon.png">
+      <a href="" target="_blank" class="about-collective">
+        <img src="/assets/sponsors/opencollective.png">
       </a>
-    </section>
+    </section> -->
 
     <section class="page-container-section">
       <h2 class="md-title">Want to contribute with the Project?</h2>
@@ -69,6 +68,7 @@
       <ul>
         <li><a href="https://github.com/elviskang" target="_blank">elviskang</a> for donating the npm package name!</li>
         <li><a href="https://github.com/brunocastro" target="_blank">Bruno Castro</a> for the awesome Vue Material Logo. <logo-vue-material animated /></li>
+        <li>Supported by <a href="https://www.creative-tim.com/?ref=vuematerial.io" target="_blank">Creative Tim</a></li>
       </ul>
     </section>
   </page-container>
@@ -122,7 +122,7 @@
     vertical-align: middle;
   }
 
-  .about-patreon {
+  .about-collective {
     max-width: 180px;
     display: inline-block;
   }

docs/app/pages/Components/App/App.vue

@@ -25,7 +25,7 @@
     </div>
 
     <div class="page-container-section">
-      <h2>{{ $t('pages.app.regular.title') }}</h2>
+      <h2 id="regular">{{ $t('pages.app.regular.title') }}</h2>
 
       <p>{{ $t('pages.app.regular.desc1') }}</p>
       <i18n tag="note-block" tip path="pages.app.regular.desc2">
@@ -35,35 +35,35 @@
     </div>
 
     <div class="page-container-section">
-      <h2>{{ $t('pages.app.fixed.title') }}</h2>
+      <h2 id="fixed">{{ $t('pages.app.fixed.title') }}</h2>
 
       <p>{{ $t('pages.app.fixed.desc') }}</p>
       <code-example :title="$t('pages.app.fixed.fixedWaterfall')" :component="examples['waterfall']" />
     </div>
 
     <div class="page-container-section">
-      <h2>{{ $t('pages.app.reveal.title') }}</h2>
+      <h2 id="reveal">{{ $t('pages.app.reveal.title') }}</h2>
 
       <p>{{ $t('pages.app.reveal.desc') }}</p>
       <code-example :title="$t('pages.app.reveal.reveal')" :component="examples['reveal']" />
     </div>
 
     <div class="page-container-section">
-      <h2>{{ $t('pages.app.flexible.title') }}</h2>
+      <h2 id="flexible">{{ $t('pages.app.flexible.title') }}</h2>
 
       <p>{{ $t('pages.app.flexible.desc') }}</p>
       <code-example :title="$t('pages.app.flexible.flexible')" :component="examples['flexible']" />
     </div>
 
     <div class="page-container-section">
-      <h2>{{ $t('pages.app.lastRow.title') }}</h2>
+      <h2 id="lastRow">{{ $t('pages.app.lastRow.title') }}</h2>
 
       <p>{{ $t('pages.app.lastRow.desc') }}</p>
       <code-example :title="$t('pages.app.lastRow.fixed')" :component="examples['last-row-fixed']" />
     </div>
 
     <div class="page-container-section">
-      <h2>{{ $t('pages.app.overlap.title') }}</h2>
+      <h2 id="overlap">{{ $t('pages.app.overlap.title') }}</h2>
 
       <p>{{ $t('pages.app.overlap.desc') }}</p>
       <code-example :title="$t('pages.app.overlap.content')" :component="examples['overlap']" />

docs/app/pages/Components/Autocomplete/Autocomplete.vue

@@ -14,28 +14,28 @@
     </div>
 
     <div class="page-container-section">
-      <h2>Static Data</h2>
+      <h2 id="staticData">Static Data</h2>
 
       <p>If you have a small amount of data or if it's static, you can pass the options to <code>md-autocomplete</code> in a simple and intuitive way:</p>
       <code-example title="Normal and Dense" :component="examples['autocomplete-static']" />
     </div>
 
     <div class="page-container-section">
-      <h2>Trigger</h2>
+      <h2 id="trigger">Trigger</h2>
 
       <p>By default the suggestions will appear along with a focus trigger. If you want something less intrusive, you can disable this behaviour by canceling the focus event. If this, the suggestions will appear right after a keystroke:</p>
       <code-example title="Focus vs Input" :component="examples['autocomplete-trigger']" />
     </div>
 
     <div class="page-container-section">
-      <h2>Box Layout</h2>
+      <h2 id="boxLayout">Box Layout</h2>
 
       <p>Autocomplete have types two layouts: Default with floating labels and a boxed layout with inline labels. The box layout will apply a boxed layout with a small elevation, that also works really great as search bar inside a toolbar. Gorgeous:</p>
       <code-example title="Works with dense variant too!" :component="examples['autocomplete-box']" />
     </div>
 
     <div class="page-container-section">
-      <h2>Custom Template</h2>
+      <h2 id="customTemplate">Custom Template</h2>
 
       <note-block alert>This section will assume that you have knowledge of <a href="https://vuejs.org/v2/guide/components.html#Scoped-Slots" target="_blank">Vue Scoped Slots</a>. This will allow you to customize the option list.</note-block>
       <p>Autocomplete also accepts a custom template, flexible to accept any HTML element and with an 'empty state' built in. You can also highlight the search term inside the matches, to give a feedback on why that item has been in the results. Awesome:</p>
@@ -44,7 +44,7 @@
     </div>
 
     <div class="page-container-section search-algorithms">
-      <h2>Search Algorithms</h2>
+      <h2 id="search-algorithms">Search Algorithms</h2>
 
       <p>Vue Material autocomplete comes with 2 ways of search: <a href="https://en.wikipedia.org/wiki/Approximate_string_matching" target="_blank">Fuzzy search</a> and search by whole term. The fuzzy search tries to match the results by approximation, finding patterns inside the available options. This will help with accidental type errors and improve the results. If you think that this may be confusing, you can disable this. Example:</p>
       <div class="md-layout md-gutter">
@@ -85,7 +85,7 @@
     </div>
 
     <div class="page-container-section">
-      <h2>Async Options</h2>
+      <h2 id="async-options">Async Options</h2>
 
       <p>Sometimes the options are inside a database in a remote server. Instead of giving a static data, we can provide a <code>Promise</code> that will resolve with the data from a backend servide, for example. This is great to save Bandwidth on the initial load and to improve the performance. Look at this example:</p>
       <code-example title="Spinner Loading" :component="examples['autocomplete-async']" />

docs/app/pages/Components/Avatar/Avatar.vue

@@ -9,7 +9,7 @@
     </div>
 
     <div class="page-container-section">
-      <h2>Avatar</h2>
+      <h2 id="avatar">Avatar</h2>
 
       <p>Avatars can show a single image by default but can also display an icon (using the <code>md-icon</code> component):</p>
       <code-example title="Default" :component="examples['regular']" />
@@ -21,14 +21,14 @@
     </div>
 
     <div class="page-container-section">
-      <h2>Initial letter as a placeholder</h2>
+      <h2 id="initial">Initial letter as a placeholder</h2>
 
       <p>Let's assume that you want to show a list of contacts, but some of them do not have a picture in your database. You can use the initial letter of the contact name as a placeholder. It can even show 2 letters (for compound names) without problems:</p>
       <code-example title="Placeholder" :component="examples['placeholder']" />
     </div>
 
     <div class="page-container-section">
-      <h2>Multiple sizes</h2>
+      <h2 id="multipleSizes">Multiple sizes</h2>
 
       <p>You can specify three different sizes, if you want: Regular, Small or Large. By default the avatar have a regular size.</p>
       <code-example title="Sizes" :component="examples['sizes']" />

docs/app/pages/Components/BottomBar/BottomBar.vue

@@ -10,29 +10,29 @@
     </div>
 
     <div class="page-container-section">
-      <h2>Seamless integration with Vue Router</h2>
+      <h2 id="seamless">Seamless integration with Vue Router</h2>
 
       <p>The bottom bar is compatible with all Vue Router options. Just pass the values as parameters on <code>md-bottom-bar-item</code> component:</p>
       <code-example title="With default fixed style" :component="examples['bar-router']" />
       <note-block tip>Note: Try to change the url manually to see the component selecting the correct item.</note-block>
     </div>
 
     <div class="page-container-section">
-      <h2>Shift effect</h2>
+      <h2 id="shift">Shift effect</h2>
 
       <p>You can also use the awesome shift effect on your bars. It is great to keep the focus of the active item and you can show up to 6 items at once:</p>
       <code-example title="With Primary and Accent colors" :component="examples['shift']" />
     </div>
 
     <div class="page-container-section">
-      <h2>Dynamic Themes</h2>
+      <h2 id="dynamic">Dynamic Themes</h2>
 
       <p>Sometimes each part of your application have it's own color theme, like in a social media app. You can change the theme dynamically to morph states creating an immersive experience:</p>
       <code-example title="Morphing States" :component="examples['changing-themes']" />
     </div>
 
     <div class="page-container-section">
-      <h2>Custom Template</h2>
+      <h2 id="custom">Custom Template</h2>
 
       <p>Maybe you want to show more informations inside a bottom bar item. With a simple and flexible default slot, you can make anything you want. Look at this unread notification example:</p>
       <note-block>If you pass anything inside the <code>&lt;md-bottom-bar-item&gt;</code>, the component will ignore the <code>md-label</code> and <code>md-icon</code>. Only use the content slot if you want to create a custom template.</note-block>

docs/app/pages/Components/Button/Button.vue

@@ -11,7 +11,7 @@
     </div>
 
     <div class="page-container-section">
-      <h2>Flat and Raised</h2>
+      <h2 id="flat">Flat and Raised</h2>
       <p>The flat button is the default one. No classes or properties needs to be attached to it to make it flat. The raised button can be achieved with the <code>md-raised</code> class.</p>
 
       <code-example title="Regular Button" :component="examples['regular-buttons']" />
@@ -26,7 +26,7 @@
     </div>
 
     <div class="page-container-section">
-      <h2>Icons</h2>
+      <h2 id="icons">Icons</h2>
       <p>To display icons inside buttons you only need to add a class and you're good to go. And you can also combine it with the raised class.</p>
 
       <code-example title="Buttons with Icons" :component="examples['icon-buttons']" />
@@ -39,7 +39,7 @@
     </div>
 
     <div class="page-container-section">
-      <h2>Floating Action Buttons</h2>
+      <h2 id="floating">Floating Action Buttons</h2>
       <p>A Floating Action Button represents the primary action in an application and is used for a promoted action. FAB buttons can be regular sized or mini, with an accent color by default. This type of buttons can only have icons, so it should be used along with <code>&lt;md-icon&gt;</code>.</p>
       <note-block tip>Use only one FAB per page and only if the purpose of the button is to fire the main action of the screen. Otherwise use <code>md-icon-button</code>.</note-block>
 
@@ -53,14 +53,14 @@
     </div>
 
     <div class="page-container-section">
-      <h2>Link Vs Buttons</h2>
+      <h2 id="linkVSButtons">Link Vs Buttons</h2>
       <p>All buttons by default will output a <code>button</code> tag. If you want to change it to a <code>a</code> tag, just pass it a href:</p>
 
       <code-example title="Links and Buttons" :component="examples['button-vs-link']" />
     </div>
 
     <div class="page-container-section">
-      <h2>Vue Router</h2>
+      <h2 id="vueRouter">Vue Router</h2>
       <p><code>md-button</code> also supports Vue Router by default. All <a href="https://router.vuejs.org/en/api/router-link.html" target="_blank">options</a> of <code>router-link</code> could be simply used here.</p>
 
       <code-example title="router-link" :component="examples['button-router']" />