grid

.vuepress/components/Valine.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="theme-default-content content__default">
-    <!-- <div style="padding: 10px;">
-      <span :id="$page.path" class="leancloud_visitors" :data-flag-title="$page.title">
-          <em class="post-meta-item-text">阅读量 </em>
-          <i class="leancloud-visitors-count">1000000</i>
-      </span>
-    </div> -->
-    <div id="vcomments"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Valine',
-  mounted: function(){
-    // require window 
-    const Valine = require('valine');
-    if (typeof window !== 'undefined') {
-      this.window = window
-      window.AV = require('leancloud-storage')
-      
-    }
-     
-    new Valine({
-      el: '#vcomments' ,
-      appId: 'eeNL5WuKTfzNbO0wVvYNn1hB-gzGzoHsz',// your appId
-      appKey: 'jVhBid22mLeLr3ilPIcfWBBw', // your appKey
-      notify:false, 
-      verify:false, 
-      avatar:'identicon', 
-      visitor: false,
-      placeholder: '说说我对这篇文档的看法' 
-    });
-  },
-}
-</script>

.vuepress/enhanceApp.js

@@ -2,8 +2,20 @@
 import 'element-ui/lib/theme-chalk/index.css'
 
 import Element from 'element-ui'
-import VueFractionGrid from 'vue-fraction-grid'
 
+import Container from './grid/Container'
+import Grid from './grid/Grid'
+import GridItem from './grid/GridItem'
+import defaults from './grid/utils/defaults'
+
+const VueFractionGrid = {
+  install (Vue, options) {
+    const config = Object.assign(defaults, options)
+    Vue.component(Container.name, { extends: Container, config })
+    Vue.component(Grid.name, { extends: Grid, config })
+    Vue.component(GridItem.name, { extends: GridItem, config })
+  }
+}
 
 export default ({
   Vue, // VuePress 正在使用的 Vue 构造函数

.vuepress/grid/Container.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="vfg-container" :style="styleObject">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import initConfig from './utils/init-config'
+
+export default {
+  name: 'container',
+  mixins: [initConfig],
+  props: {
+    width: String
+  },
+  computed: {
+    styleObject () {
+      return {
+        maxWidth: this.width || this.config.container,
+        paddingRight: this.config.gutter,
+        paddingLeft: this.config.gutter
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.vfg-container {
+  box-sizing: border-box;
+  margin: auto;
+}
+</style>

.vuepress/grid/Grid.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="vfg-grid" :class="classObject" :style="styleObject">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import reduceCSSCalc from 'reduce-css-calc'
+import isUndefined from './utils/is-undefined'
+import initConfig from './utils/init-config'
+import initRWD from './utils/init-rwd'
+
+export default {
+  name: 'grid',
+  mixins: [initConfig, initRWD],
+  props: {
+    horizontal: String,
+    vertical: String,
+    flat: String,
+    pair: String,
+    direction: {
+      type: String,
+      default: 'row'
+    },
+    wrap: {
+      type: String,
+      default: 'nowrap'
+    }
+  },
+  created () {
+    if (typeof window !== 'undefined') {
+      this.bindMediaQueries((mediaQuery, gridDirection) => {
+        if (mediaQuery.matches) {
+          this.gridDirection = gridDirection
+        }
+        mediaQuery.addListener(listener => {
+          if (listener.matches) {
+            this.gridDirection = gridDirection
+          } else {
+            this.gridDirection = this.direction
+          }
+        })
+      })
+    }
+  },
+  data () {
+    return {
+      flexDirection: this.reduceDirection(this.direction)
+    }
+  },
+  computed: {
+    classObject () {
+      return {
+        'vfg-grid-pair': !isUndefined(this.pair)
+      }
+    },
+    styleObject () {
+      return {
+        marginRight: this.horizontalMargin,
+        marginLeft: this.horizontalMargin,
+        justifyContent: this.gridHorizontal,
+        alignItems: this.gridVertical,
+        flexDirection: this.gridDirection,
+        flexWrap: this.wrap
+      }
+    },
+    horizontalMargin () {
+      return isUndefined(this.flat)
+        ? reduceCSSCalc(`calc(${this.config.gutter} / -2)`) : 0
+    },
+    gridHorizontal () {
+      return {
+        left: 'flex-start',
+        center: 'center',
+        right: 'flex-end',
+        between: 'space-between',
+        around: 'space-around'
+      }[this.horizontal]
+    },
+    gridVertical () {
+      return {
+        top: 'flex-start',
+        middle: 'center',
+        bottom: 'flex-end'
+      }[this.vertical]
+    },
+    gridDirection: {
+      get () {
+        return this.flexDirection
+      },
+      set (direction) {
+        this.flexDirection = this.reduceDirection(direction)
+      }
+    }
+  },
+  methods: {
+    reduceDirection (direction) {
+      return {
+        row: 'row',
+        reverse: 'row-reverse',
+        stack: 'column',
+        'stack-reverse': 'column-reverse'
+      }[direction]
+    }
+  }
+}
+</script>
+
+<style>
+.vfg-grid {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+}
+
+.vfg-grid-pair > .vfg-grid-item {
+  text-align: left;
+}
+
+.vfg-grid-pair > .vfg-grid-item + .vfg-grid-item {
+  text-align: right;
+}
+</style>

.vuepress/grid/GridItem.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="vfg-grid-item" :style="styleObject" v-show="!isSizeZero">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import reduceCSSCalc from 'reduce-css-calc'
+import isUndefined from './utils/is-undefined'
+import initConfig from './utils/init-config'
+import initRWD from './utils/init-rwd'
+
+export default {
+  name: 'grid-item',
+  mixins: [initConfig, initRWD],
+  props: {
+    size: {
+      type: String,
+      validator (value) {
+        const fraction = value.split('/')
+        const denominator = +fraction[1]
+        return fraction.length === 2 && denominator !== 0
+      }
+    },
+    grow: [String, Number],
+    shrink: [String, Number]
+  },
+  created () {
+    if (typeof window !== 'undefined') {
+      this.bindMediaQueries((mediaQuery, gridItemSize) => {
+        if (mediaQuery.matches) {
+          this.gridItemSize = gridItemSize
+        }
+        mediaQuery.addListener(listener => {
+          if (listener.matches) {
+            this.gridItemSize = gridItemSize
+          } else {
+            this.gridItemSize = this.size
+          }
+        })
+      })
+    }
+  },
+  data () {
+    return {
+      fraction: this.size
+    }
+  },
+  computed: {
+    isSizeZero () {
+      return this.gridItemSize === '0/1'
+    },
+    styleObject () {
+      const stylePadding = {
+        paddingRight: this.horizontalPadding,
+        paddingLeft: this.horizontalPadding
+      }
+
+      if (this.hasSize) {
+        return Object.assign(stylePadding, {
+          width: this.percentageWidth,
+          flexBasis: this.percentageWidth,
+          maxWidth: this.percentageWidth
+        })
+      }
+
+      if (this.hasGrow) {
+        return Object.assign(stylePadding, {
+          flexGrow: +this.grow
+        })
+      }
+
+      if (this.hasShrink) {
+        return Object.assign(stylePadding, {
+          flexShrink: +this.shrink
+        })
+      }
+
+      return stylePadding
+    },
+    hasSize () {
+      return !isUndefined(this.size) && isUndefined(this.grow) && isUndefined(this.shrink)
+    },
+    hasGrow () {
+      return isUndefined(this.size) && !isUndefined(this.grow) && isUndefined(this.shrink)
+    },
+    hasShrink () {
+      return isUndefined(this.size) && isUndefined(this.grow) && !isUndefined(this.shrink)
+    },
+    horizontalPadding () {
+      const notFlatGridChild = isUndefined(this.$parent) || isUndefined(this.$parent.flat)
+      return notFlatGridChild
+        ? reduceCSSCalc(`calc(${this.config.gutter} / 2)`) : 0
+    },
+    gridItemSize: {
+      get () {
+        return this.fraction
+      },
+      set (fraction) {
+        this.fraction = fraction
+      }
+    },
+    percentageWidth () {
+      const [numerator, denominator] = this.gridItemSize.split('/')
+      const value = (+numerator * 100 / +denominator).toFixed(4)
+      return `${value}%`
+    }
+  }
+}
+</script>
+
+<style>
+.vfg-grid-item {
+  box-sizing: border-box;
+}
+</style>

.vuepress/grid/utils/defaults.js

@@ -0,0 +1,8 @@
+export default {
+  container: '1020px',
+  gutter: '24px',
+  approach: 'mobile-first',
+  breakpoints: {
+    compact: '320px 414px'
+  }
+}

.vuepress/grid/utils/init-config.js

@@ -0,0 +1,5 @@
+export default {
+  created () {
+    this.config = this.$options.config
+  }
+}

.vuepress/grid/utils/init-rwd.js

@@ -0,0 +1,23 @@
+import mediaQueryString from './media-query-string'
+import isUndefined from './is-undefined'
+
+export default {
+  props: {
+    rwd: Object
+  },
+  methods: {
+    bindMediaQueries (callback) {
+      if (!isUndefined(this.rwd)) {
+        Object.keys(this.rwd).forEach(breakpoint => {
+            const mediaQuery = window.matchMedia(mediaQueryString({
+              approach: this.config.approach,
+              query: this.config.breakpoints[breakpoint]
+            }))
+            const property = this.rwd[breakpoint]
+  
+            callback(mediaQuery, property)
+        })
+      }
+    }
+  }
+}

.vuepress/grid/utils/is-undefined.js

@@ -0,0 +1,3 @@
+export default (value) => {
+  return value === undefined
+}

.vuepress/grid/utils/media-query-string.js

@@ -0,0 +1,12 @@
+import isUndefined from './is-undefined'
+
+export default ({ approach, query }) => {
+  const attr = { 'mobile-first': 'min-width', 'desktop-first': 'max-width' }[approach]
+  const [firstValue, secondValue] = query.split(' ')
+
+  if (isUndefined(secondValue)) {
+    return `(${attr}: ${firstValue})`
+  }
+
+  return `(min-width: ${firstValue}) and (max-width: ${secondValue})`
+}

package.json

@@ -10,9 +10,9 @@
     "@vuepress/plugin-google-analytics": "^1.1.0",
     "@vuepress/plugin-medium-zoom": "^1.1.0",
     "@vuepress/plugin-nprogress": "^1.1.0",
+    "@vuepress/plugin-active-header-links": "^1.0.0-rc.1",
     "babel-plugin-component": "^1.1.1",
     "date-fns": "^1.30.1",
-    "vuepress": "^v1.1.0",
     "vuepress-plugin-baidu-autopush": "^1.0.1",
     "vuepress-plugin-code-switcher": "^1.0.0",
     "vuepress-plugin-element-tabs": "^0.1.8",
@@ -21,13 +21,10 @@
     "vuepress-plugin-sitemap": "^2.1.2"
   },
   "dependencies": {
-    "@vuepress/plugin-active-header-links": "^1.0.0-rc.1",
     "element-ui": "^2.12.0",
     "esm": "^3.2.25",
-    "github3": "^1.2.0",
-    "leancloud-storage": "^3.15.0",
     "npm": "^6.11.3",
-    "valine": "^1.3.10",
+    "reduce-css-calc": "^2.1.6",
-    "vue-fraction-grid": "^1.1.0"
+    "vuepress": "^1.1.0"
   }
 }

support/index.md

@@ -5,6 +5,12 @@ description: Kubernetes教程_本文描述了如何获得Kuboard授权
 
 # Kuboard
 
+<div style="background-color: #0063dc;">
+  <div style="max-width: 363px; margin: auto;">
+    <img src="/images/logo-main.png" style="background-color: #0063dc; max-width: 100%;" alt="Kubernetes管理界面：Kuboard Logo"/>
+  </div>
+</div>
+
 ## Kuboard 授权声明
 
 * 许多网友在问，Kuboard收费么？