feat: color, open graph 추가 (#40)

.github/workflows/google-sheet.yml

@@ -20,8 +20,10 @@ jobs:
         env:
           GSHEET_CLIENT_EMAIL: ${{ secrets.GSHEET_CLIENT_EMAIL }}
           GSHEET_PRIVATE_KEY: ${{ secrets.GSHEET_PRIVATE_KEY }}.replace(/\\n/g, "\n")
-      - name: checkout
-        uses: actions/checkout@v2
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "14"
       - name: make env.json
         env:
           _env: ${{ steps.env.outputs.results }}
@@ -127,11 +129,8 @@ jobs:
           GSHEET_CLIENT_EMAIL: ${{ secrets.GSHEET_CLIENT_EMAIL }}
           GSHEET_PRIVATE_KEY: ${{ secrets.GSHEET_PRIVATE_KEY }}.replace(/\\n/g, "\n")
       - name: make color.json
-        env:
-          color: ${{ steps.color.outputs.results }}
         run: |
-          echo "$PWD"
-          echo "$color" > ./_content/color.json
+          echo ${{ toJson(steps.color.outputs.results) }} > ./content/color.json
       - name: python setup
         uses: actions/setup-python@v1
         with:
@@ -141,6 +140,7 @@ jobs:
           python .script/make_projects.py
           python .script/make_main.py
           python .script/make_about.py
+          python .script/make_color.py
       - name: commit with push
         run: |
           git config --local user.email "action@github.com"

.script/make_color.py

@@ -0,0 +1,14 @@
+#!/bin/python3.9
+import json
+
+if __name__ == "__main__":
+    with open("./_content/color.json", mode="r") as f:
+        google_results = f.read()
+
+    _color = json.loads(google_results)
+    rows = _color["results"][0]["result"]["rawData"]
+    with open("./assets/css/setting.scss", mode="w") as f:
+        for row in rows[1:]:
+            name, value = row
+            f.write(f"${name}: {value};\n")
+

assets/css/setting.scss

@@ -6,3 +6,5 @@ $grey01: #F6F6F6;
 $grey02: #DDDDDD;
 $grey03: #777777;
 $grey04: #3B3B3B;
+$accent-hover: #5653C6;
+$accent-pressed: #45429E;

components/footer.vue

@@ -66,7 +66,7 @@ export default defineComponent({
           : require("~/assets/img/github_black.svg"),
         instagram: props.isWhite
           ? require("~/assets/img/instagram.png")
-          : require("~/assets/img/instagram_black.png"),
+          : require("~/assets/img/instagram_black.svg"),
       },
       arrowIcon: props.isWhite
         ? require("~/assets/img/arrow_right.svg")

content/color.json

@@ -1,36 +1 @@
-{
-  "results": [
-    {
-      "command": {
-        "func": "getData",
-        "kwargs": [{ "minCol": 1, "worksheetTitle": "color-palette" }, null]
-      },
-      "result": {
-        "rawData": [
-          ["color name", "color"],
-          ["accent", "#FF4853"],
-          ["primary", "#6B68F7"],
-          ["black", "#000000"],
-          ["white", "#FFFFFF"],
-          ["grey01", "#F6F6F6"],
-          ["grey02", "#DDDDDD"],
-          ["grey03", "#777777"],
-          ["grey04", "#3B3B3B"]
-        ],
-        "formatted": [
-          { "(A)": "color name", "(B)": "color" },
-          { "(A)": "accent", "(B)": "#FF4853" },
-          { "(A)": "primary", "(B)": "#6B68F7" },
-          { "(A)": "black", "(B)": "#000000" },
-          { "(A)": "white", "(B)": "#FFFFFF" },
-          { "(A)": "grey01", "(B)": "#F6F6F6" },
-          { "(A)": "grey02", "(B)": "#DDDDDD" },
-          { "(A)": "grey03", "(B)": "#777777" },
-          { "(A)": "grey04", "(B)": "#3B3B3B" }
-        ],
-        "header": ["(A)", "(B)"],
-        "range": "'color-palette'!A1:Z1000"
-      }
-    }
-  ]
-}
+{"results":[{"command":{"func":"getData","kwargs":[{"minCol":1,"worksheetTitle":"color-palette"},null]},"result":{"rawData":[["color name","color"],["accent","#FF4853"],["primary","#6B68F7"],["black","#000000"],["white","#FFFFFF"],["grey01","#F6F6F6"],["grey02","#DDDDDD"],["grey03","#777777"],["grey04","#3B3B3B"],["accent-hover","#5653C6"],["accent-pressed","#45429E"]],"formatted":[{"(A)":"color name","(B)":"color"},{"(A)":"accent","(B)":"#FF4853"},{"(A)":"primary","(B)":"#6B68F7"},{"(A)":"black","(B)":"#000000"},{"(A)":"white","(B)":"#FFFFFF"},{"(A)":"grey01","(B)":"#F6F6F6"},{"(A)":"grey02","(B)":"#DDDDDD"},{"(A)":"grey03","(B)":"#777777"},{"(A)":"grey04","(B)":"#3B3B3B"},{"(A)":"accent-hover","(B)":"#5653C6"},{"(A)":"accent-pressed","(B)":"#45429E"}],"header":["(A)","(B)"],"range":"'color-palette'!A1:Z1000"}}]}

nuxt.config.ts

@@ -1,12 +1,43 @@
 import type { NuxtConfig } from "@nuxt/types";
 
 const config: NuxtConfig = {
+  publicRuntimeConfig: { baseURL: process.env.NUXT_BASE_URL },
   target: "static",
   ssr: false,
   head: {
     meta: [
       { charset: "utf-8" },
       { name: "viewport", content: "width=device-width, initial-scale=1" },
+      {
+        hid: "description",
+        name: "description",
+        content:
+          "IT 연합동아리 넥스터즈(NEXTERS)는 IT 생태계의 주인공인 개발자와 디자이너들을 위한 모임입니다. 재능있는 디자이너와 개발자들이 함께 모여 자유로운 분위기에서 어울리고 도움을 주고받으며 협업을 통해 원하는 애플리케이션을 만드는 모임입니다.",
+      },
+      {
+        hid: "title",
+        name: "title",
+        content: "NEXTERS | 개발자와 디자이너를 위한 IT 연합동아리",
+      },
+      {
+        hid: "og-image",
+        property: "og:image",
+        name: "og:image",
+        content: "http://teamnexters.com/img/20th/09_Homepage_favicon.ico",
+      },
+      {
+        hid: "og-title",
+        property: "og:title",
+        name: "og:title",
+        content: "NEXTERS | Network for Experts",
+      },
+      {
+        hid: "og-description",
+        property: "og:description",
+        name: "og:description",
+        content:
+          "IT 연합동아리 넥스터즈(NEXTERS)는 IT 생태계의 주인공인 개발자와 디자이너들을 위한 모임입니다. 재능있는 디자이너와 개발자들이 함께 모여 자유로운 분위기에서 어울리고 도움을 주고받으며 협업을 통해 원하는 애플리케이션을 만드는 모임입니다.",
+      },
     ],
   },
   modules: ["@nuxt/content", "@nuxtjs/composition-api/module"],

pages/about.vue

@@ -51,8 +51,8 @@
                 :href="item.href"
               />
             </div>
-            <div class="more">
-              <div v-show="isRemain" class="lead-more" @click="onClickMore">
+            <div v-show="isRemain" class="more">
+              <div class="lead-more" @click="onClickMore">
                 <p>Lead more</p>
                 <img src="~/assets/img/ic_down.svg" alt="" />
               </div>

pages/project.vue

@@ -19,8 +19,8 @@
               :project="_project"
             />
           </div>
-          <div class="more">
-            <div v-show="isRemain" class="lead-more" @click="onClickMore">
+          <div v-show="isRemain" class="more">
+            <div class="lead-more" @click="onClickMore">
               <p>Lead more</p>
               <img src="~/assets/img/ic_down.svg" alt="" />
             </div>