Merge pull request #1 from ChavaSobreyra/chava

i18n Hookup, Homepage, Component Doc Component

packages/vuetifyjs.com/assets/app.js

@@ -5,7 +5,7 @@ import Vuetify from 'vuetify'
 // Bootstrap
 import { createStore } from 'store/index'
 import { createRouter } from 'router/index'
-import { createLanguage } from 'i18n/index'
+import { createI18n } from 'i18n/index'
 import { sync } from 'vuex-router-sync'
 
 // Application
@@ -24,7 +24,7 @@ export function createApp (ssrContext) {
  // create store and router instances
  const store = createStore()
  const router = createRouter()
- const language = createLanguage()
+ const i18n = createI18n()
 
  // sync the router with the vuex store.
  // this registers `store.state.route`
@@ -37,7 +37,7 @@ export function createApp (ssrContext) {
  router,
  store,
  ssrContext,
- language,
+ i18n,
  render: h => h(App)
  })
 

packages/vuetifyjs.com/assets/stylus/main.styl

@@ -5,7 +5,7 @@
 @import '../../node_modules/vuetify/src/stylus/settings/_colors'
 
 $theme = {
- primary: #0862C4
+ primary: #0862c4
  secondary: #5CBBF6
  accent: #1697F6
  info: $blue.base

packages/vuetifyjs.com/components/AppDrawer.vue

@@ -1,28 +1,44 @@
+<style lang="stylus" scoped>
+ img.logo
+ margin 40px 0 25px
+ .diamondSponsorLabel
+ color #676767
+ margin: 3em 0 .5em
+ font-size 13px
+ .diamondSponsor
+ // todo trim down actual image file dimensions
+ height: 40px
+ margin-bottom 1.25em
+
+ aside.navigation-drawer
+ ul
+ li
+ font-size 14px
+ color: #373737
+</style>
+
+
 <template lang="pug">
  v-navigation-drawer(
  app
+ permanent
+ clipped
+ v-if="$route.fullPath !== '/'"
  v-model="appDrawer"
  :disable-route-watcher="!routeWatcher"
  )
- div.pa-5.text-xs-center
- v-avatar(size="68" tile).mb-5
- img(src="/static/v.png" alt="Logo")
- img(
+ div.text-xs-center
+ div.diamondSponsorLabel Diamond Sponsor
+ img.diamondSponsor(
  src="https://vuetifyjs.com/static/doc-images/backers/lmax-exchange.png"
  alt="Sponsor"
- width="80%"
  )
  v-container(fluid)
- v-select(
- :items="['pre-release 0.16.0']"
- value="pre-release 0.16.0"
- solo
- ).mb-4
  v-select(
  autocomplete
  solo
  append-icon="search"
- ).mb-5
+ ).mb-4
  v-list(dense)
  template(v-for="item in items")
  v-list-group(v-if="item.items" v-bind:group="item.group" no-action)

packages/vuetifyjs.com/components/AppToolbar.vue

@@ -1,8 +1,45 @@
+<style lang="stylus" scoped>
+ .toolbar__title
+ margin-left .5em
+ font-weight 400
+ font-size 21px
+ position relative
+ top 1px
+ .toolbar__items
+ margin-right 0 !important
+ .btn
+ text-transform capitalize
+ font-size 18px
+ margin 0
+ padding: 0 .125em
+ font-weight 300
+</style>
+
+
+
 <template lang="pug">
  v-toolbar(
  app
+ clipped
  ref="toolbar"
- ).accent
+ dark
+ class="primary"
+ )
+ img(
+ src="/static/v-alt.svg"
+ height="38px"
+ )
+ <v-toolbar-title>Vuetify</v-toolbar-title>
+ <v-spacer></v-spacer>
+ <v-toolbar-items>
+ v-btn(flat)
+ span.hidden-md-and-up Docs
+ span.hidden-sm-and-down Documentation
+ v-btn(flat) Blog
+ v-btn(flat).hidden-sm-and-down Vueticasts
+ v-btn(flat).hidden-sm-and-down Shop
+ v-btn(flat).hidden-sm-and-down Donate
+ </v-toolbar-items>
 </template>
 
 <script>

packages/vuetifyjs.com/components/HomeFooter.vue

@@ -1,24 +1,98 @@
+<style lang="stylus" scoped>
+ footer
+ display: block // todo: default of display flex causing issues
+ a
+ text-decoration none
+ color #cfd8dc
+ &:hover
+ color white
+ cursor pointer
+ background #37424b
+ color white
+ .flex
+ padding 2.5em 3em
+ &.vuetify
+ background #303c42
+ h5
+ font-size 21px
+ img
+ height 32px
+ margin-right 10px
+ vertical-align middle
+ span
+ position relative
+ top 3px
+ h5
+ color white
+ font-size 16px
+ ul
+ list-style none
+ margin 0
+ padding 0
+ li
+ a
+ font-size 16px
+ display block
+ padding: 0 0 .66em
+ .icon.fa
+ font-size 18px
+ width 25px
+</style>
+
+
 <template lang="pug">
  v-footer.white--text
  v-layout(row wrap).ma-0
- v-flex(xs12 sm4).pa-5.blue-grey.darken-2
- v-flex(xs12 sm8).blue-grey.darken-3
- v-layout
- v-flex(
- xs12 sm4
- v-for="(column, i) in columns"
- :key="i"
- )
+ v-flex(xs6 md3).pa-5.blue-grey.darken-2.vuetify
+ h5
+ img(src="/static/doc-images/logo.svg")
+ span Vuetify
+ ul
+ li
+ a(href="https://vuetifyjs.com/vuetify/quick-start")
+ span.hidden-sm-only Documentation
+ span.hidden-md-and-up.hidden-xs-only Docs
+ li
+ a(href="https:/vuetifyjs/vuetify" target="_blank") <v-icon dark class="hidden-sm-only">fa-github</v-icon> GitHub
+ li
+ a(href="https://twitter.com/vuetifyjs" target="_blank") <v-icon dark class="hidden-sm-only">fa-twitter</v-icon> Twitter
+ li
+ a(href="https://www.facebook.com/vuetifyjs" target="_blank") <v-icon dark class="hidden-sm-only">fa-facebook</v-icon> Facebook
+
+ v-flex(xs6 md3).blue-grey.darken-3
+ h5 Donate
+ ul
+ li
+ a(href="https://www.patreon.com/vuetify" target="_blank") Patreon
+ li
+ a(href="https://www.paypal.me/vuetify" target="_blank") PayPal
+
+ v-flex(xs6 md3).blue-grey.darken-3
+ h5 Sponsors
+ ul
+ li
+ a(href="https://www.browserstack.com/" target="_blank") BrowserStack
+ li
+ a(href="https://www.cloudflare.com/" target="_blank") CloudFlare
+
+ v-flex(xs6 md3).blue-grey.darken-3
+ h5 Links
+ ul
+ li
+ a( href="https://vuejs.org/" target="_blank") Vue.js
+ li
+ a( href="https://material.io/guidelines/" target="_blank") Material Design
+
  v-flex(xs12).blue-grey.darken-4.text-xs-center.pa-3
- span &copy; {{ new Date().getFullYear() }}
+ span &copy; {{ new Date().getFullYear() }} Vuetify LLC. Distributed under the
+ a(
+ href="https://opensource.org/licenses/MIT"
+ target="_blank"
+ ) MIT License.
 </template>
 
 <script>
  export default {
- name: 'home-footer',
-
- data: () => ({
- columns: []
- })
+ name: 'home-footer'
  }
 </script>

packages/vuetifyjs.com/i18n/en.json

@@ -1 +1,54 @@
-{}
+{
+ "home": {
+ "announcementBanner": "Aww yisss, this is an exciting announcement! Or maybe its an advertisement!",
+ "heading1": "Supercharge your development with",
+ "heading1cont": "Vuetify Material Component Framework",
+ "getStarted": "Get Started",
+ "features": [
+ {
+ "img": "/static/doc-images/feature1.svg",
+ "title": "Ready-Made Project Scaffolding",
+ "text": "Vuetify comes ready to go with 5 pre-made vue-cli templates. From simple html to full-blown SSR you are ready to go in minutes."
+ },
+ {
+ "img": "/static/doc-images/feature2.svg",
+ "title": "Semantic Material Components",
+ "text": "Be prepared for an armada of specialized components at your disposal. With over 80 in total, there is a solution for any application."
+ },
+ {
+ "img": "/static/doc-images/feature3.svg",
+ "title": "Vibrant Community",
+ "text": "When you run into a roadblock, you need assistance right away. Vuetify offers chat support in our growing community on Discord server."
+ }
+ ],
+ "checkFeaturesTitle": "All the Tools You Need",
+ "checkFeaturesTitleCtd": "To Build Incredible User Interfaces",
+ "checkFeatures": [
+ "Semantic Helper Components",
+ "SSR and PWA Support",
+ "8 Vue-CLI Templates",
+ "Community Chat Support"
+ ],
+ "checkFeaturesCtd": [
+ "80+ Material Design Components",
+ "Transition System Component",
+ "Blazing Fast",
+ "A La Carte Components"
+ ],
+ "letterFromAuthor": [
+ "Hey there,",
+ "I know choosing a UI framework can be a daunting task -- there are so many options to choose from and every one of them claims that they are the best. So you have to decide for yourself: what are the metrics for success?",
+ "This was me almost a year ago. There were plenty of UI toolkits to choose from, but none of them had everything that I needed, and that is why I started working on Vuetify.",
+ "I am extremely humbled that you have considered using Vuetify as your next UI Framework. A lot of care has went into crafting the perfect setup for taking any idea from conception to production. I look forward to you joining the Vuetify community and am excited to see what incredible interfaces you create!"
+ ],
+ "authorOfVuetify": "Author of Vuetify",
+ "support": {
+ "hasVuetifyHelped": "Has Vuetify helped you create an amazing application?",
+ "showYourSupport": "Show your support for Vuetify by",
+ "becomingAPatron": "becoming a patron"
+ },
+ "becomeSponsor": "Become a Sponsor",
+ "proudlySponsoredBy": "Proudly sponsored by",
+ "callout": "Supercharge your development with the power of Vue and Material Design"
+ }
+}

packages/vuetifyjs.com/i18n/index.js

@@ -1,8 +1,14 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
+import en from'./en.json'
 
 Vue.use(VueI18n)
 
-export function createLanguage () {
- return {}
-}
+export function createI18n () {
+ return new VueI18n({
+ locale: 'en-US',
+ messages: {
+ 'en-US': en
+ }
+ })
+}