Started to develop Stop Coronavirus in the Bay Area website deriving …

…from Tokyo COVID-19 Task Force website.

Dockerfile

@@ -0,0 +1,14 @@
+FROM node:10.19-alpine
+
+WORKDIR /app
+
+COPY package.json yarn.lock ./
+
+RUN yarn install
+
+COPY . ./app
+
+EXPOSE 3000
+ENV HOST 0.0.0.0
+
+CMD ["yarn", "dev"]

LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Team Stop Coronavirus. All Rights Reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,49 @@
+# Stop Coronavirus in the Bay Area website
+
+[![Stop Coronavirus in the Bay Area website]]()
+
+This site was derived from Tokyo COVID-19 Task Force website https://github.com/tokyo-metropolitan-gov/covid19) for stopping Coronavirus for the Bay Area communities.
+
+## How to Contribute
+
+All contributions are welcome!
+Please check [How to contribute](./.github/CONTRIBUTING_EN.md) for details.
+
+## Code of Conduct
+
+Please check [Code of conduct for developers](./.github/CODE_OF_CONDUCT_EN.md) for details.
+
+## License
+This software is released under [the MIT License](./LICENSE.txt).
+
+## For Developers
+
+### How to Set Up Environments
+
+- Required Node.js version: 10.19.0 or higher
+
+**Use yarn**
+``` bash
+# install dependencies
+$ yarn install
+
+# serve with hot reload at localhost:3000
+$ yarn dev
+```
+
+**Use docker**
+```bash
+# serve with hot reload at localhost:3000
+$ docker-compose up --build
+```
+
+### Deployment to Staging & Production Environments
+
+When `master` branch is updated, the HTML files will be automatically built onto `production` branch,
+and then the production site (https://stopcovid19.TBD/) will be also updated.
+
+When `staging` branch is updated, the HTML files will be automatically built onto `gh-pages` branch,
+and then the staging site (https://stg-covid19-sfbayarea.netlify.com/) will be also updated.
+
+When `development` branch is updated, the HTML files will be automatically built onto `dev-pages` branch,
+and then the development site (https://dev-covid19-sfbayarea.netlify.com/) will be also updated.

assets/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

assets/global.scss

@@ -0,0 +1,13 @@
+:root {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: $gray-5;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: bottom;
+}

assets/variables.scss

@@ -0,0 +1,114 @@
+// ==================
+// color
+$green-1: #00A040;
+$green-2: #00B849;
+$green-3: #00D154;
+$green-4: #00EB5E;
+$gray-1: #333333;
+$gray-2: #4D4D4D;
+$gray-3: #808080;
+$gray-4: #D9D9D9;
+$gray-5: #F8F9FA;
+$white: #FFFFFF;
+$link: #006CA8;
+
+// ==================
+// shadow
+$shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
+
+// ==================
+// break-points
+$huge: 1440;
+$large: 1170;
+$medium: 768;
+$small: 600;
+
+// ==================
+// z-index
+$z-index-map: (
+  opened-side-navigation: 101,
+  sp-navigation: 100,
+);
+@function z-index-of($key) {
+  @return map-get($z-index-map, $key);
+}
+
+// ==================
+// media-query
+@mixin largerThan($width) {
+	@media screen and (min-width: $width + 1 + px) {
+		@content;
+	}
+}
+
+@mixin lessThan($width) {
+	@media screen and (max-width: $width + px) {
+		@content;
+	}
+}
+
+
+// ==================
+// font-size
+@mixin font-size($size, $base: 16) {
+  font-size: $size + px;
+  font-size: ($size / $base) + rem;
+}
+@mixin card-h1 {
+  @include font-size(24);
+  color: $gray-2;
+  font-weight: bold;
+}
+@mixin card-h2 {
+  @include font-size(19);
+  color: $gray-2;
+  font-weight: bold;
+}
+@mixin body-text {
+  @include font-size(16);
+  color: $gray-1;
+  line-height: 160%;
+  font-weight: normal;
+}
+
+// ===================
+// button
+@mixin text-link {
+  @include font-size(14);
+  color: $link !important;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+@mixin button-text($size: 'md') {
+  @if ($size == 'sm') {
+    padding: 4px 8px;
+  } @else {
+    padding: 24px 36px;
+  }
+  @include font-size(14);
+  display: inline-block;
+  border-radius: 4px;
+  background-color: $white;
+  border: 1px solid $green-1;
+  color:$green-1;
+  cursor: pointer;
+  &:hover {
+    background-color: $green-1;
+    color: $white;
+    > i {
+      color: $white !important;
+    }
+  }
+}
+
+// ===================
+// card
+@mixin card-container {
+  background-color: $white;
+  box-shadow: $shadow;
+  border: 0.5px solid $gray-4 !important;
+  border-radius: 4px;
+}

components/CasesSummary.vue

@@ -0,0 +1,95 @@
+<template>
+  <data-view :title="title" :title-id="titleId" :date="date">
+    <div class="summary" Hello> 
+        <div class="total-positive">
+            <h1>Confirmed Cases:</h1>
+            <div class="total-positive-number"> {{ confirmedCases.ConfirmedCases }} </div>
+        </div>
+        <div class="deaths">
+            <h1>Deaths:</h1>
+            <div class="deaths-number"> {{ confirmedCases.Deaths }}  </div>
+        </div>
+        <div class="total-recovered">
+            <h1>Recovered:</h1>
+            <div class="total-recovered-number"> {{ confirmedCases.Discharged }} </div>
+        </div>
+    </div>
+  </data-view>
+</template>
+
+<style lang="scss" scoped>
+.summary {
+  text-align: center;
+  .total-positive {
+      .total-positive-number {
+      margin-top: 20px;
+      font-size: 36px;
+      color:#AAA;
+    }
+  }
+  .deaths {
+    margin-top: 40px;
+      .deaths-number {
+      margin-top: 20px;
+      font-size: 36px;
+      color:#3D5170;
+    }
+  }
+  .total-recovered {
+    margin-top: 40px;
+    .total-recovered-number {
+      margin-top: 20px;
+      font-size: 36px;
+      color:#8ACA2B;
+    }
+  }
+}
+</style>
+
+<script>
+import DataView from '@/components/DataView.vue'
+import Data from '@/data/data.json'
+import formatConfirmedCases from '@/utils/formatConfirmedCases'
+
+export default {
+  components: { DataView },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    titleId: {
+      type: String,
+      default: ''
+    },
+    chartData: {
+      type: Object,
+      default: () => {}
+    },
+    date: {
+      type: String,
+      default: ''
+    },
+    info: {
+      type: Object,
+      required: false,
+      default: () => {}
+    },
+    url: {
+      type: String,
+      required: false,
+      default: ''
+    },
+  },
+
+  data() {
+    const confirmedCases = formatConfirmedCases(Data.main_summary)
+
+    const data = {
+      Data,
+      confirmedCases
+    }
+    return data
+  }
+};
+</script>

components/DataSelector.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-btn-toggle
+    :value="value"
+    class="DataSelector"
+    mandatory
+    @change="$emit('input', $event)"
+  >
+    <v-btn v-ripple="false" value="transition" class="DataSelector-Button">
+      Daily Cases
+    </v-btn>
+    <v-btn v-ripple="false" value="cumulative" class="DataSelector-Button">
+      Total
+    </v-btn>
+  </v-btn-toggle>
+</template>
+
+<style lang="scss">
+.DataSelector {
+  margin-top: 2px;
+  border: 1px solid $gray-4;
+  background-color: $white;
+  &-Button {
+    border: none !important;
+    margin: 2px;
+    border-radius: 4px !important;
+    height: 24px !important;
+    font-size: 12px !important;
+    color: $gray-1 !important;
+    background-color: $white !important;
+    &::before {
+      background-color: inherit;
+    }
+  }
+
+  & .v-btn--active {
+    background-color: $gray-2 !important;
+    color: $white !important;
+  }
+}
+</style>
+
+<script>
+export default {
+  name: 'DataSelector',
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  }
+}
+</script>