Merge pull request #35 from brownsugar/dev

Added RSL KartRider 15th anniversary league pages

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "ikappas.phpcs",
+    "stylelint.vscode-stylelint",
+    "octref.vetur"
+  ]
+}

README.md

@@ -3,7 +3,7 @@
 A web app for RSL official site.
 
 
-## RE:START KartRider League Season 2
+## RE:START KartRider League
 
 https://rsl.tw
 

vetur.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  projects: [
+    './web'
+  ]
+}

web/.eslintrc.js

@@ -5,7 +5,8 @@ module.exports = {
     node: true
   },
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@babel/eslint-parser',
+    requireConfigFile: false
   },
   extends: [
     '@nuxtjs',
@@ -14,6 +15,7 @@ module.exports = {
   // add your custom rules here
   rules: {
     'nuxt/no-cjs-in-config': 'off',
+    'vue/multi-word-component-names': 'off',
     'vue/no-v-html': 'off',
     'vue/valid-v-slot': ['error', {
       allowModifiers: true

web/.stylelintrc.js

@@ -1,12 +1,19 @@
 module.exports = {
   extends: [
-    'stylelint-config-sass-guidelines',
+    'stylelint-config-standard-scss',
+    'stylelint-config-recommended-vue/scss',
     'stylelint-config-recess-order'
   ],
   rules: {
     'order/properties-alphabetical-order': null,
+    'scss/at-mixin-argumentless-call-parentheses': null,
+    "scss/double-slash-comment-empty-line-before": null,
+    "scss/no-global-function-names": null,
+    'at-rule-empty-line-before': null,
     'color-hex-case': 'upper',
     'max-nesting-depth': null,
+    "no-descending-specificity": null,
+    "no-empty-source": null,
     'number-leading-zero': 'never',
     'rule-empty-line-before': [
       'always',
@@ -22,6 +29,13 @@ module.exports = {
       {
         ignorePseudoElements: ['v-deep']
       }
+    ],
+    "string-quotes": "single",
+    "value-no-vendor-prefix": [
+      true,
+      {
+        ignoreValues: ['optimize-contrast']
+      }
     ]
   }
 }

web/client/assets/mixins/navigation.js

@@ -0,0 +1,37 @@
+import overallSeasons from '~/data/overall-seasons'
+
+export default {
+  props: {
+    rootPath: {
+      type: String,
+      default: '/'
+    },
+    items: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    sortedItems () {
+      const seasonsMenuItem = {
+        label: '歷屆聯賽',
+        children: overallSeasons
+          .map(season => ({
+            label: season.name,
+            to: '/' + season.code,
+            blank: true
+          }))
+          .filter(child => child.to !== this.rootPath)
+      }
+      return this.items.concat(seasonsMenuItem)
+    }
+  },
+  methods: {
+    isChildActive (item) {
+      if (item.children && Array.isArray(item.children)) {
+        return item.children.some(item => this.$route.path.startsWith(item.to))
+      }
+      return false
+    }
+  }
+}

web/client/assets/styles/rsl/_mixins.scss

@@ -14,6 +14,7 @@
 
     .v-parallax__image-container::before {
       @include fit-parent();
+
       z-index: 2;
       content: '';
       background-repeat: repeat;
@@ -27,6 +28,7 @@
 
     .v-image__image::before {
       @include fit-parent();
+
       content: '';
       background-repeat: repeat;
       @content;
@@ -38,7 +40,7 @@
     $type: if($max, max-width, min-width);
     $offset: if($max, 1px, 0);
     $width: map-get($grid-breakpoints, $size);
-    @media ($type: $width - $offset) {
+    @media ($type: ($width - $offset)) {
       @content;
     }
   } @else {

web/client/assets/styles/rsl/_variables.scss

@@ -12,3 +12,8 @@ $s2-tertiary: #FFCD00;
 $s2-grey-dark: #333;
 $s2-lsb: #FFC600;
 $s2-lsb-deep: #E6AA2D;
+
+/**
+ * Kart 15th
+ */
+// None

web/client/assets/styles/rsl/kart15th.scss

@@ -0,0 +1,16 @@
+/**
+ * Theme for Kart 15th
+ */
+.kart-15th {
+  font-family: Roboto, 'Noto Sans TC', 'Microsoft JhengHei', PingFang, sans-serif;
+
+  ::selection {
+    background: var(--v-primary-base);
+  }
+  .v-btn:not(.v-btn--outlined).primary {
+
+    .v-btn__content {
+      color: var(--v-secondary-base);
+    }
+  }
+}

web/client/assets/styles/rsl/season1.scss

@@ -2,7 +2,7 @@
  * Theme for season 1
  */
 .season-1 {
-  font-family: 'Roboto', STHeiti, 'Microsoft JhengHei', sans-serif;
+  font-family: Roboto, STHeiti, 'Microsoft JhengHei', sans-serif;
 
   // Remove some used element's border radius, was originally set with $border-radius-root in variable.scss
   // Buttons

web/client/assets/styles/rsl/theme.scss

@@ -1,5 +1,6 @@
 @import '~assets/styles/rsl/season1';
 @import '~assets/styles/rsl/season2';
+@import '~assets/styles/rsl/kart15th';
 
 /**
  * Custom helper class

web/client/assets/styles/vuetify/variables.scss

@@ -1,4 +1,4 @@
 // Ref: https://github.com/nuxt-community/vuetify-module#customvariables
 // Src: https://github.com/vuetifyjs/vuetify/tree/master/packages/vuetify/src/styles
 
-@import '~vuetify/src/styles/styles.sass';
+@import '~vuetify/src/styles/styles';

web/client/assets/theme/kart15th.js

@@ -0,0 +1,14 @@
+export default {
+  dark: true,
+  themes: {
+    dark: {
+      primary: '#F4C00D',
+      secondary: '#0A0026',
+      anchor: '#F4C00D',
+      facebook: '#1877F2',
+      youtube: '#FF0000',
+      twitch: '#9146FF',
+      discord: '#5865F2'
+    }
+  }
+}

web/client/assets/utils/meta.js → web/client/assets/utils/create-meta.js

@@ -1,38 +1,46 @@
-const genarateMetaInfo = ({ vm, staticPages, themeColor, ogImage, defaultTitle }) => {
+export default ({
+  // config, site, route need to defined in head() to trigger changes
+  // TODO: Fetch from Nuxt context
+  config,
+  site,
+  route,
+  staticPages,
+  themeColor,
+  ogImage,
+  defaultTitle
+} = {}) => {
   // Content is not pulled from server
-  const isSingle = !staticPages.includes(vm.$route.name)
+  const isSingle = !staticPages.includes(route.name)
 
-  const title = vm.site.name
-  const url = vm.site.url + vm.$route.path
+  const title = site.name
+  const url = site.url + route.path
   const ogType = isSingle ? 'article' : 'website'
   const titleWithChunk = (chunk = defaultTitle) => chunk ? `${chunk} - ${title}` : title
 
   const metaInfo = {
     title: defaultTitle,
     titleTemplate: titleWithChunk,
     link: [
-      { rel: 'alternate', type: 'application/rss+xml', title: vm.$config.rsl.name, href: vm.site.rss2_url }
+      { rel: 'alternate', type: 'application/rss+xml', title: config.rsl.name, href: site.rss2_url }
     ],
     meta: [
       { name: 'theme-color', content: themeColor },
       { name: 'apple-mobile-web-app-status-bar-style', content: themeColor },
-      { name: 'author', content: vm.$config.rsl.name },
-      { name: 'description', content: vm.site.description, hid: 'description' },
-      { property: 'publisher', content: vm.$config.rsl.facebook.url },
+      { name: 'author', content: config.rsl.name },
+      { name: 'description', content: site.description, hid: 'description' },
+      { property: 'publisher', content: config.rsl.facebook.url },
       { property: 'og:site_name', content: title },
       { property: 'og:title', template: titleWithChunk, hid: 'og:title' },
       { property: 'og:type', content: ogType, hid: 'og:type' },
       { property: 'og:url', content: url, hid: 'og:url' },
-      { property: 'og:description', content: vm.site.description, hid: 'og:description' },
+      { property: 'og:description', content: site.description, hid: 'og:description' },
       { property: 'og:image', content: ogImage, hid: 'og:image' }
     ]
   }
   if (isSingle) {
-    metaInfo.meta.push({ property: 'article:author', content: vm.$config.rsl.facebook.url })
-    metaInfo.meta.push({ property: 'article:publisher', content: vm.$config.rsl.facebook.url })
+    metaInfo.meta.push({ property: 'article:author', content: config.rsl.facebook.url })
+    metaInfo.meta.push({ property: 'article:publisher', content: config.rsl.facebook.url })
   }
 
   return metaInfo
 }
-
-export default genarateMetaInfo

web/client/components/season1/about/meet-rsl.vue → web/client/components/common/about/meet-rsl.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="meet-rsl">
     <post-layout
-      banner="common/background/drift.png"
+      :banner="banner"
       :title="title"
       :content="content"
     >
@@ -17,8 +17,8 @@
           {{ nav.label }}
         </v-btn>
       </template>
-      <template v-if="$slots.content" #content>
-        <slot name="content" />
+      <template v-if="$slots.default" #content>
+        <slot />
       </template>
     </post-layout>
   </div>
@@ -33,31 +33,41 @@ export default {
     PostLayout
   },
   props: {
+    rootPath: {
+      type: String,
+      default: ''
+    },
+    banner: {
+      type: String,
+      default: ''
+    },
     content: {
       type: String,
       default: ''
     }
   },
   data: () => ({
-    title: '認識 RSL 賽事聯盟',
-    navs: [
-      {
-        label: '關於我們',
-        to: '/season1/about'
-      },
-      {
-        label: '聯絡我們',
-        to: '/season1/contact'
-      }
-    ]
+    title: '認識 RSL 賽事聯盟'
   }),
   head: self => ({
     title: self.activedTitle
   }),
   computed: {
     activedTitle () {
       const nav = this.navs.find(nav => nav.to === this.$route.path)
-      return nav.label
+      return nav ? nav.label : ''
+    },
+    navs () {
+      return [
+        {
+          label: '關於我們',
+          to: this.rootPath + '/about'
+        },
+        {
+          label: '聯絡我們',
+          to: this.rootPath + '/contact'
+        }
+      ]
     }
   }
 }

web/client/components/season2/common/link-tabs.vue → web/client/components/common/link-tabs.vue

@@ -3,7 +3,7 @@
     centered
     show-arrows
   >
-    <v-tabs-slider color="secondary" />
+    <v-tabs-slider :color="color" />
     <v-tab
       v-for="item in items"
       :key="item.slug"
@@ -25,6 +25,10 @@ export default {
       type: Array,
       default: () => []
     },
+    color: {
+      type: String,
+      default: 'secondary'
+    },
     basePath: {
       type: String,
       default: ''

web/client/components/kart15th/common/section-title.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="section-title">
+    <span>{{ text }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SectionTitle',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.section-title {
+
+  span {
+    display: inline-block;
+    font-size: 6rem !important;
+    font-weight: bold;
+    transform: skew(-10deg);
+    -webkit-text-stroke: 2px #FFF;
+    -webkit-text-fill-color: transparent;
+
+    @include breakpoint(sm) {
+      font-size: 4.5rem !important;
+    }
+  }
+}
+</style>