update document

VisionYi · Mar 1, 2021 · b6a5f08 · b6a5f08
1 parent ad5da76
commit b6a5f08
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,28 @@
 # Video Platform
+- 模仿 Youtube 網站影音平台的作品，支援 RWD
+- [Dome Page](https://video-platform.netlify.app)
+- [Storybook Page](https://video-platform.netlify.app/_storybook)
+- [Design WireFrame](https://whimsical.com/wireframe-M17zBx8n7wSd2vDqi9yCXU)
+
+## Tech Stack
+- Nuxt.js v2
+- Tailwind CSS v2
+- Storybook
+- Youtube Data API ([Document](https://developers.google.com/youtube/v3/docs))
+- Analysis Tool - GA tag, Hotjar, Sentry
+- Deploy on Netlify
+
+## Start Development
+create a '.env' files for environment variable, default content:
+```
+NUXT_ENV_PUBLIC_PATH = /
+NUXT_ENV_YOUTUBE_KEY =
+NUXT_ENV_GOOGLE_ANALYTICS_ID =
+NUXT_ENV_HOTJAR_ID =
+
+SENTRY_DSN =
+SENTRY_DISABLED = false
+```
 
 ## Build Setup
 
@@ -15,4 +39,12 @@ $ npm run start
 
 # generate static project
 $ npm run generate
+
+# storybook
+$ npm run storybook
+$ npm run build-storybook
 ```
+
+## Next step
+- [ ] research Vercel, then use server side render for this project.
+- [ ] hidden header-bar when trigger window scroll event
diff --git a/components/FavoriteCard.vue b/components/FavoriteCard.vue
@@ -1,26 +1,24 @@
 <template>
   <div class="card">
-    <div class="g-row">
+    <div class="g-row items-center">
       <div class="g-col">
         <figure class="card__figure">
           <v-image class="card__image" :src="image" background-image />
           <span class="card__time">{{ time }}</span>
         </figure>
       </div>
       <div class="g-col-flexible">
-        <div class="card__content">
-          <div class="g-row items-center">
-            <div class="g-col-flexible mr-1">
-              <h2>{{ title }}</h2>
-            </div>
-            <div class="g-col">
-              <heart v-model="isFavoriteInner" @click.native.stop />
-            </div>
+        <div class="g-row items-center px-2 md:px-3">
+          <div class="g-col-flexible mr-1">
+            <h2>{{ title }}</h2>
+          </div>
+          <div class="g-col">
+            <heart v-model="isFavoriteInner" @click.native.stop />
           </div>
-          <p>
-            {{ content }}
-          </p>
         </div>
+        <p>
+          {{ content }}
+        </p>
       </div>
     </div>
   </div>
@@ -123,14 +121,6 @@ export default {
     }
   }
 
-  &__content {
-    padding: 0 8px;
-
-    @include media-area('md') {
-      padding: 0 12px;
-    }
-  }
-
   h2 {
     font-size: 16px;
     font-weight: bold;

diff --git a/components/VideoCard.vue b/components/VideoCard.vue
@@ -4,7 +4,7 @@
       <v-image class="card__image" :src="image" background-image />
       <span class="card__time">{{ time }}</span>
     </figure>
-    <div class="card__content">
+    <div class="py-2 px-1">
       <div class="g-row items-center">
         <div class="g-col-flexible mr-1">
           <h2>{{ title }}</h2>
@@ -104,10 +104,6 @@ export default {
     background-color: rgba($color: $gray-100, $alpha: 0.6);
   }
 
-  &__content {
-    padding: 8px 4px;
-  }
-
   h2 {
     font-size: 18px;
     font-weight: bold;

diff --git a/pages/index.vue b/pages/index.vue
@@ -135,7 +135,7 @@ export default {
       // render card UI
       this.isRenderingList = true
       await this.$nextTick()
-      await new Promise(resolve => setTimeout(() => resolve(), 0)) // for finishing special UI render, like `CSS float` element
+      await new Promise(resolve => setTimeout(resolve, 0)) // for finishing special UI render, like `CSS float` element
       this.isRenderingList = false
 
       await this.fectData(