Merge from develop

.circleci/config.yml

@@ -25,29 +25,6 @@ install_save_cache: &install_save_cache
 
 jobs:
 
-  test:
-    <<: *vm_settings
-    steps:
-      - checkout
-
-      # Install dependencies
-      - restore_cache: *install_restore_cache
-      - run: *install_run
-      - save_cache: *install_save_cache
-
-      - run:
-          name: Run tests
-          # Install libgconf, needed by Cypress' Electron, then run tests
-          command: sudo apt-get install libgconf-2-4 && yarn test:ci
-
-      # Store test artifacts
-      - store_artifacts:
-          path: tests/unit/coverage
-      - store_artifacts:
-          path: tests/e2e/videos
-      - store_artifacts:
-          path: tests/e2e/screenshots
-
   build:
     <<: *vm_settings
     steps:
@@ -66,31 +43,35 @@ jobs:
       - store_artifacts:
           path: dist
 
-  # deploy:
-  #   <<: *vm_settings
-  #   steps:
-  #     # Install dependencies
-  #     - restore_cache: *install_restore_cache
-  #     - run: *install_run
-  #     - save_cache: *install_save_cache
-
-  #     # Build the app for production
-  #     - run: yarn build
-
-  #     ADD YOUR DEPLOYMENT PROCESS HERE
-  #     https://circleci.com/docs/2.0/deployment-integrations/
+  deploy_develop:
+    <<: *vm_settings
+    steps:
+      - run: ./node_modules/.bin/firebase use develop --token $FIREBASE_TOKEN
+      - run: ./node_modules/.bin/firebase deploy --token $FIREBASE_TOKEN
+
+  deploy_master:
+    <<: *vm_settings
+    steps:
+      - run: ./node_modules/.bin/firebase use default --token $FIREBASE_TOKEN
+      - run: ./node_modules/.bin/firebase deploy --token $FIREBASE_TOKEN
 
 workflows:
   version: 2
-  test_and_deploy:
+  deploy_develop:
+    jobs:
+      - build
+      - deploy_develop:
+          requires:
+            - build
+          filters:
+            branches:
+              only: develop
+  deploy_master:
     jobs:
-      - test
       - build
-      # - deploy:
-      #     # Only deploy if tests pass
-      #     requires:
-      #       - test
-      #     # Only deploy the master branch
-      #     filters:
-      #       branches:
-      #         only: master
+      - deploy_master:
+          requires:
+            - build
+          filters:
+            branches:
+              only: master

.eslintrc.js

@@ -21,6 +21,10 @@ module.exports = {
       ? ['error', { allow: ['warn', 'error'] }]
       : 'off',
     'prettier/prettier': 'error',
+    'vue/multiline-html-element-content-newline': 'error',
+    'vue/singleline-html-element-content-newline': ['error', { ignores: ['v-icon']}],
+    'vue/no-spaces-around-equal-signs-in-attribute': 'error',
+    'vue/script-indent': ['error', 2, { baseIndent: 0 }],
     'vue/max-attributes-per-line': [
       2,
       {

.gitignore

@@ -28,5 +28,7 @@ yarn-error.log*
 *.njsproj
 *.sln
 .vscode/*
+.firebase
 
 lighthouse/
+jsconfig.json

README.md

@@ -1 +1,3 @@
 # GDG Bali Website
+
+[![CircleCI](https://circleci.com/gh/gdg-bali/webapp.svg?style=svg)](https://circleci.com/gh/gdg-bali/webapp)

_templates/new/view/view.ejs.t

@@ -8,7 +8,7 @@ to: "src/router/views/<%= h.inflection.dasherize(name) %>.vue"
 import Layout from '@layouts/main'
 
 export default {
-  page: {
+  metaInfo: {
     title: '<%= importName %>',
     meta: [{ name: 'description', content: '<%= importName %>' }],
   },

aliases.config.js

@@ -1,10 +1,9 @@
 const path = require('path');
-
-function resolveSrc(_path) {
-  return path.join(__dirname, _path);
-}
+const fs = require('fs');
+const prettier = require('prettier');
 
 const aliases = {
+  '@': '.',
   '@src': 'src',
   '@router': 'src/router',
   '@views': 'src/router/views',
@@ -14,15 +13,59 @@ const aliases = {
   '@utils': 'src/utils',
   '@state': 'src/state',
   '@design': 'src/design/index.scss',
+  '@api': 'src/api',
 };
 
 module.exports = {
   webpack: {},
   jest: {},
+  jsconfig: {},
 };
 
 for (const alias in aliases) {
-  module.exports.webpack[alias] = resolveSrc(aliases[alias]);
-  module.exports.jest['^' + alias + '/(.*)$'] =
-    '<rootDir>/' + aliases[alias] + '/$1';
+  const aliasTo = aliases[alias];
+  module.exports.webpack[alias] = resolveSrc(aliasTo);
+  module.exports.jest['^' + alias + '/(.*)$'] = '<rootDir>/' + aliasTo + '/$1';
+  module.exports.jsconfig[alias + '/*'] = [aliasTo + '/*'];
+  module.exports.jsconfig[alias] = aliasTo.includes('/index.')
+    ? [aliasTo]
+    : [
+        aliasTo + '/index.js',
+        aliasTo + '/index.json',
+        aliasTo + '/index.vue',
+        aliasTo + '/index.scss',
+        aliasTo + '/index.css',
+      ];
+}
+
+const jsconfigTemplate = require('./jsconfig.template') || {};
+const jsconfigPath = path.resolve(__dirname, 'jsconfig.json');
+
+fs.writeFile(
+  jsconfigPath,
+  prettier.format(
+    JSON.stringify({
+      ...jsconfigTemplate,
+      compilerOptions: {
+        ...(jsconfigTemplate.compilerOptions || {}),
+        paths: module.exports.jsconfig,
+      },
+    }),
+    {
+      ...require('./.prettierrc'),
+      parser: 'json',
+    }
+  ),
+  error => {
+    if (error) {
+      console.error(
+        'Error while creating jsconfig.json from aliases.config.js.'
+      );
+      throw error;
+    }
+  }
+);
+
+function resolveSrc(_path) {
+  return path.join(__dirname, _path);
 }

dev/service-worker.js

@@ -4,6 +4,19 @@ workbox.precaching.precacheAndRoute(self.__precacheManifest || []);
 
 workbox.routing.registerNavigationRoute('/index.html');
 
+workbox.routing.registerRoute(
+  /.*\.(?:png|gif|jpg|jpeg|svg|webp)((\?.*)$|$)/,
+  workbox.strategies.staleWhileRevalidate({
+    cacheName: 'images',
+    plugins: [
+      new workbox.expiration.Plugin({
+        maxEntries: 60,
+        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
+      }),
+    ],
+  })
+);
+
 self.addEventListener('message', event => {
   if (!event.data) return;
 

jest.config.js

@@ -1,8 +1,8 @@
-const _ = require('lodash')
+const _ = require('lodash');
 // Use a random port number for the mock API by default,
 // to support multiple instances of Jest running
 // simultaneously, like during pre-commit lint.
-process.env.MOCK_API_PORT = process.env.MOCK_API_PORT || _.random(9000, 9999)
+process.env.MOCK_API_PORT = process.env.MOCK_API_PORT || _.random(9000, 9999);
 
 module.exports = {
   setupFiles: ['<rootDir>/tests/unit/setup'],
@@ -15,7 +15,13 @@ module.exports = {
     '^.+\\.vue$': 'vue-jest',
     '^.+\\.js$': 'babel-jest',
   },
-  moduleNameMapper: require('./aliases.config').jest,
+  moduleNameMapper: {
+    // Transform any static assets to empty strings
+    '\\.(jpe?g|png|gif|webp|svg|mp4|webm|ogg|mp3|wav|flac|aac|woff2?|eot|ttf|otf)$':
+      '<rootDir>/tests/unit/fixtures/empty-string.js',
+    '.styl(|us)$': '<rootDir>/tests/unit/__mocks__/styleMock.js',
+    ...require('./aliases.config').jest,
+  },
   snapshotSerializers: ['jest-serializer-vue'],
   coverageDirectory: '<rootDir>/tests/unit/coverage',
   collectCoverageFrom: [
@@ -41,4 +47,4 @@ module.exports = {
       experimentalCSSCompile: false,
     },
   },
-}
+};

jsconfig.template.js

@@ -0,0 +1,14 @@
+// This is a template for a jsconfig.json file which will be
+// generated when starting the dev server or a build.
+module.exports = {
+  baseUrl: '.',
+  include: ['src/**/*', 'tests/**/*'],
+  compilerOptions: {
+    baseUrl: '.',
+    target: 'es6',
+    module: 'es6',
+    // ...
+    // `paths` will be automatically generated using aliases.config.js
+    // ...
+  },
+}