From ef17794eb5e34ac3d3e9306587b787424b820041 Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Thu, 6 May 2021 05:19:41 +0900
Subject: [PATCH 01/15] Update patch for @chakra-ui/nuxt (apply option to
 VScrollLock)

---
 patches/@chakra-ui+nuxt+0.3.1.patch | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/patches/@chakra-ui+nuxt+0.3.1.patch b/patches/@chakra-ui+nuxt+0.3.1.patch
index aef1592a..2bf08585 100644
--- a/patches/@chakra-ui+nuxt+0.3.1.patch
+++ b/patches/@chakra-ui+nuxt+0.3.1.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/@chakra-ui/nuxt/lib/plugin.js b/node_modules/@chakra-ui/nuxt/lib/plugin.js
-index afe037f..35f8e3a 100644
+index afe037f..a5b8897 100644
 --- a/node_modules/@chakra-ui/nuxt/lib/plugin.js
 +++ b/node_modules/@chakra-ui/nuxt/lib/plugin.js
 @@ -3,6 +3,12 @@ import { createClientDirective } from '@chakra-ui/vue/src/directives'
@@ -15,3 +15,14 @@ index afe037f..35f8e3a 100644
  Vue.prototype.$chakra = {
    theme,
    icons: <%= JSON.stringify(options.icons, null, 2) %>
+@@ -17,5 +23,9 @@ if (process.client) {
+ 
+   // VScrollLock
+   const VScrollLock = require('v-scroll-lock').default
+-  Vue.use(VScrollLock)
++  Vue.use(VScrollLock, {
++    bodyScrollOptions: {
++      reserveScrollBarGap: true,
++    }
++  })
+ } 

From 1f29bfbce8f7231f00eeb540bcfe4eb7bb2c5660 Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Mon, 10 May 2021 02:07:59 +0900
Subject: [PATCH 02/15] Update styles of meet link

---
 pages/meet.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/pages/meet.vue b/pages/meet.vue
index 26f4365f..0bcee302 100644
--- a/pages/meet.vue
+++ b/pages/meet.vue
@@ -11,7 +11,7 @@
     <CText font-size="1.4rem" font-weight="bold" text-align="center">{{
       welcomeMessage
     }}</CText>
-    <transition name="fade" mode="out-in" @after-enter="() => {}">
+    <transition name="fade1" mode="out-in" @after-enter="meetLinksShown = true">
       <template v-if="newsLoaded">
         <CFlex v-if="$fetchState.pending" key="loading" justify="center">
           <AppSpinnerLoading />
@@ -21,7 +21,9 @@
           v-else
           key="shown"
           :columns="{ base: 1, sm: 2 }"
-          :spacing="4"
+          :p="{ base: '0 5%', sm: '0 6%' }"
+          row-gap="1rem"
+          :column-gap="{ base: '5%', sm: '6%' }"
           :mt="5"
         >
           <CFlex
@@ -29,10 +31,6 @@
             :key="index"
             justify="stretch"
             align="center"
-            :p="{
-              base: '0 10% 0 10%',
-              sm: index % 2 === 0 ? '0 2% 0 15%' : '0 15% 0 2%',
-            }"
           >
             <CButton
               as="a"
@@ -86,6 +84,7 @@ import {
 type Data = {
   meetLinks: MeetLinkItem[]
   newsLoaded: boolean
+  meetLinksShown: boolean
 }
 
 type Computed = {
@@ -108,6 +107,7 @@ export default Vue.extend<Data, Methods, Computed, unknown>({
     return {
       meetLinks: [],
       newsLoaded: false,
+      meetLinksShown: false,
     }
   },
   async fetch() {
@@ -147,7 +147,7 @@ export default Vue.extend<Data, Methods, Computed, unknown>({
 </script>
 
 <style lang="scss" scoped>
-@include fadeEaseOutCubic('fade', 0s, 0.3rem);
+@include fadeEaseOutCubic('fade1', 0s, 0.3rem);
 </style>
 
 <style lang="scss" module></style>

From 6ffb227ab68b9da0f62e56b56d6d8d19244e98b6 Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Sun, 16 May 2021 15:17:28 +0900
Subject: [PATCH 03/15] Set color of anchor elements

---
 pages/about.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/pages/about.vue b/pages/about.vue
index b191089c..1cc97a8d 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <div :class="[$style.PageAbout]">
     <TheWebsiteTitle />
 
     <transition name="fade1" mode="out-in" appear @after-enter="() => {}">
-      <CBox :pt="3" :pb="4">
+      <CBox as="section" :pt="3" :pb="4">
         <CHeading as="h2" text-align="center" size="lg" :mb="4">
           このサイトについて
         </CHeading>
@@ -22,7 +22,7 @@
       </CBox>
     </transition>
     <transition name="fade2" mode="out-in" appear @after-enter="() => {}">
-      <CBox :pt="3" :pb="4">
+      <CBox as="section" :pt="3" :pb="4">
         <CHeading as="h2" text-align="center" size="lg" :mb="4">
           連絡先
         </CHeading>
@@ -55,7 +55,7 @@
       </CBox>
     </transition>
     <transition name="fade3" mode="out-in" appear @after-enter="() => {}">
-      <CBox :pt="10" :pb="4">
+      <CBox as="section" :pt="10" :pb="4">
         <CHeading as="h2" text-align="center" size="md" :mb="4">
           帰属表示
         </CHeading>
@@ -77,7 +77,7 @@
       </CBox>
     </transition>
     <transition name="fade4" mode="out-in" appear @after-enter="() => {}">
-      <CBox :pt="4" :pb="4">
+      <CBox as="section" :pt="4" :pb="4">
         <CFlex justify="center">
           <CButton
             variant-color="gray"
@@ -205,4 +205,10 @@ export default vue
     }
   }
 }
+
+.PageAbout {
+  section a {
+    color: #00a3c4;
+  }
+}
 </style>

From 98f423944a7a46d3e375e6540f43d1fc5baab096 Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Sun, 16 May 2021 15:42:11 +0900
Subject: [PATCH 04/15] Add privacy policy

---
 pages/about.vue | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/pages/about.vue b/pages/about.vue
index 1cc97a8d..e031130a 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -77,6 +77,39 @@
       </CBox>
     </transition>
     <transition name="fade4" mode="out-in" appear @after-enter="() => {}">
+      <CBox as="section" :pt="10" :pb="4">
+        <CHeading as="h2" text-align="center" size="md" :mb="4">
+          プライバシー ポリシー
+        </CHeading>
+        <CBox
+          font-size="sm"
+          :px="{ base: '1.5rem', sm: '2rem', md: '4rem' }"
+          text-indent="1em"
+        >
+          <CText
+            >本サイトでは、Webサイト・サービスの改善のためにGoogle
+            アナリティクスを使用しています。</CText
+          >
+          <CText
+            >Google
+            アナリティクスは、データを収集するために、Cookieの設定・読取、個人を特定しない端末情報などの送信を行います（IPアドレスは匿名化されます）。</CText
+          ><CText
+            >詳しい仕組みは<CLink
+              href="https://www.google.com/intl/ja/policies/privacy/partners"
+              is-external
+              >こちら</CLink
+            >をご覧ください。</CText
+          ><CText mt="0.8em"
+            >皆さまの使用状況にあわせてサイトを改良するために、データを収集・使用しておりますので、どうかご協力よろしくお願いいたします。データを収集されたくない場合は、ブラウザのCookieを無効にするか、<CLink
+              href="https://tools.google.com/dlpage/gaoptout?hl=ja"
+              is-external
+              >専用のアドオン</CLink
+            >（PCのみ）をご利用ください。</CText
+          >
+        </CBox>
+      </CBox>
+    </transition>
+    <transition name="fade5" mode="out-in" appear @after-enter="() => {}">
       <CBox as="section" :pt="4" :pb="4">
         <CFlex justify="center">
           <CButton
@@ -193,6 +226,7 @@ export default vue
 @include fadeEaseOutCubic('fade2', 0.5s, 0.3rem);
 @include fadeEaseOutCubic('fade3', 0.7s, 0.3rem);
 @include fadeEaseOutCubic('fade4', 0.9s, 0.3rem);
+@include fadeEaseOutCubic('fade5', 1.1s, 0.3rem);
 </style>
 
 <style lang="scss" module>

From d6b63092256f565cddf79350a87984ec79b2c6a2 Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Mon, 17 May 2021 02:34:19 +0900
Subject: [PATCH 05/15] Register advertisement database id

---
 nuxt.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 545ee13c..2cac6fdf 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -141,6 +141,7 @@ const config: NuxtConfig = {
     configDatabaseId: process.env.NOTION_DATABASE_CONFIG,
     newsDatabaseId: process.env.NOTION_DATABASE_NEWS,
     meetLinksDatabaseId: process.env.NOTION_DATABASE_MEETLINKS,
+    advertisementsDatabaseId: process.env.NOTION_DATABASE_ADVERTISEMENTS,
   },
 
   styleResources: {

From 60d51442b9f03f45b05ac61085e9a0c09ed81970 Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Mon, 17 May 2021 02:34:46 +0900
Subject: [PATCH 06/15] Add type definition for AdvertisementItem

---
 utils/notion.ts | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/utils/notion.ts b/utils/notion.ts
index a4885213..7837efc9 100644
--- a/utils/notion.ts
+++ b/utils/notion.ts
@@ -1,6 +1,12 @@
 const NOTION_API_BASEURL = 'https://notion-api.splitbee.io/v1'
 const IGNORE = true as const
 
+export interface NotionMediaItem {
+  name: string
+  url: string
+  rawUrl: string
+}
+
 export function fetchNotionData(type: string, id: string) {
   return fetch(`${NOTION_API_BASEURL}/${type}/${id}`, {
     method: 'GET',
@@ -74,6 +80,48 @@ export function isValidNewsItem(target: any): target is NewsItem {
   )
 }
 
+export interface AdvertisementItem extends NotionDatabaseItem {
+  slug: string
+  title?: string
+  author: string
+  description?: string
+  thumbnail?: NotionMediaItem[]
+  link?: string
+  category?: string[]
+  isHidden?: boolean
+}
+
+export function isValidAdvertisementItem(
+  target: any
+): target is AdvertisementItem {
+  console.log(target.thumbnail)
+  return (
+    _isValidNotionDatabaseItem(target) &&
+    isNotEmptyString(target.slug) &&
+    ('title' in target ? isNotEmptyString(target.title) : IGNORE) &&
+    isNotEmptyString(target.author) &&
+    ('description' in target ? isNotEmptyString(target.description) : IGNORE) &&
+    ('thumbnail' in target
+      ? Array.isArray(target.thumbnail) &&
+        target.thumbnail.every((v: any) => isNotionMediaItem(v))
+      : IGNORE) &&
+    ('link' in target ? isNotEmptyString(target.link) : IGNORE) &&
+    ('category' in target
+      ? Array.isArray(target.category) &&
+        target.category.every((v: any) => isNotEmptyString(v))
+      : IGNORE) &&
+    ('isHidden' in target ? typeof target.isHidden === 'boolean' : IGNORE)
+  )
+}
+
 function isNotEmptyString(target: any): target is string {
   return typeof target === 'string' && target !== ''
 }
+
+function isNotionMediaItem(target: any): target is NotionMediaItem {
+  return (
+    isNotEmptyString(target.name) &&
+    isNotEmptyString(target.url) &&
+    isNotEmptyString(target.rawUrl)
+  )
+}

From e4523641ee42ff1df6a93bee528f717ed0617dae Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Mon, 17 May 2021 02:35:08 +0900
Subject: [PATCH 07/15] Add advertisement section

---
 components/AdvertisementGrid.vue | 160 +++++++++++++++++++++++++++++++
 pages/meet.vue                   |  10 ++
 2 files changed, 170 insertions(+)
 create mode 100644 components/AdvertisementGrid.vue

diff --git a/components/AdvertisementGrid.vue b/components/AdvertisementGrid.vue
new file mode 100644
index 00000000..7cc25caf
--- /dev/null
+++ b/components/AdvertisementGrid.vue
@@ -0,0 +1,160 @@
+<template>
+  <div>
+    <CGrid :class="[$style.Senden]" v-bind="$attrs">
+      <CPseudoBox
+        v-for="(item, index) in itemsAvailable"
+        :key="index"
+        transition="all 0.3s"
+        :_hover="{ opacity: 0.7, cursor: 'pointer' }"
+        @click="viewDetails(index)"
+      >
+        <CImage :src="getAdvertiseThumbnail(index)" size="100%" />
+      </CPseudoBox>
+    </CGrid>
+    <CModal
+      :is-open="showModal"
+      :on-close="closeDetails"
+      is-centered
+      :size="{ base: 'sm', sm: 'md', md: 'lg' }"
+    >
+      <CModalContent>
+        <CModalHeader></CModalHeader>
+        <CModalCloseButton />
+        <CModalBody :pt="3">
+          <template v-if="selectedItem">
+            <CImage
+              :src="getAdvertiseThumbnail(selectedIndex)"
+              size="100%"
+              max-w="512px"
+            />
+            <CFlex justify="center" direction="column" :pt="2">
+              <CBox v-if="selectedItem.title" text-align="start">{{
+                selectedItem.title
+              }}</CBox>
+              <CBox
+                v-if="selectedItem.description"
+                text-align="start"
+                :px="1"
+                >{{ selectedItem.description }}</CBox
+              >
+              <CBox text-align="end">{{ selectedItem.author }}</CBox>
+            </CFlex>
+            <CFlex justify="center" :pb="2">
+              <CButton
+                variant-color="blue"
+                variant="solid"
+                size="sm"
+                min-w="5em"
+                font-weight="normal"
+                @click="openAdvertiseLink(selectedItem)"
+                >詳細</CButton
+              >
+            </CFlex>
+          </template></CModalBody
+        >
+        <!-- <CModalFooter></CModalFooter> -->
+      </CModalContent>
+      <CModalOverlay />
+    </CModal>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import {
+  fetchNotionTableData,
+  isValidAdvertisementItem,
+  AdvertisementItem,
+} from '@/utils/notion'
+
+type Data = {
+  items: AdvertisementItem[]
+  showModal: boolean
+  selectedIndex: number
+}
+
+type Methods = {
+  viewDetails(index: number): void
+  closeDetails(): void
+  openAdvertiseLink(item: AdvertisementItem): void
+  getAdvertiseThumbnail(index: number): string
+}
+
+type Computed = {
+  itemsAvailable: AdvertisementItem[]
+  selectedItem: AdvertisementItem | null
+}
+
+export default Vue.extend<Data, Methods, Computed, unknown>({
+  data() {
+    return {
+      items: [],
+      showModal: false,
+      selectedIndex: -1,
+    }
+  },
+  async fetch() {
+    const rawItems = await fetchNotionTableData(
+      this.$config.advertisementsDatabaseId
+    ).then((r) => r.json())
+
+    if (Array.isArray(rawItems)) {
+      const items = rawItems.filter((v) => isValidAdvertisementItem(v))
+      this.items = items
+    }
+  },
+  computed: {
+    itemsAvailable() {
+      return this.items.filter((item) => !item.isHidden)
+    },
+    selectedItem() {
+      const index = this.selectedIndex
+      return index > -1 ? this.itemsAvailable[index] : null
+    },
+  },
+  methods: {
+    viewDetails(index) {
+      this.selectedIndex = index
+      this.showModal = true
+    },
+    closeDetails() {
+      this.showModal = false
+      this.selectedIndex = -1
+    },
+    openAdvertiseLink(item) {
+      const { link } = item
+      if (!link) return
+
+      // this.$gtag.event()
+
+      window.open(link, '_blank', 'noopener,noreferrer')
+    },
+    getAdvertiseThumbnail(index) {
+      const { thumbnail } = this.itemsAvailable[index]
+      if (!thumbnail) return ''
+      return thumbnail[0].url
+    },
+  },
+})
+</script>
+
+<style lang="scss" module>
+@mixin grid1($pad, $numColumns) {
+  padding: 0 $pad;
+  column-gap: $pad;
+  grid-template-columns: repeat($numColumns, 1fr);
+}
+
+.Senden {
+  row-gap: 1rem;
+  @include grid1(5%, 1);
+
+  @media screen and (min-width: 30em) {
+    @include grid1(6%, 2);
+  }
+
+  @media screen and (min-width: 40em) {
+    @include grid1(3%, 3);
+  }
+}
+</style>
diff --git a/pages/meet.vue b/pages/meet.vue
index 1d0e68c1..71db230d 100644
--- a/pages/meet.vue
+++ b/pages/meet.vue
@@ -60,6 +60,15 @@
         </CSimpleGrid>
       </template>
     </transition>
+    <transition name="fade2" mode="out-in" @after-enter="() => {}">
+      <template v-if="meetLinksShown">
+        <CFlex v-if="$fetchState.pending" key="loading" justify="center">
+          <AppSpinnerLoading />
+        </CFlex>
+        <div v-else-if="$fetchState.error" key="error">error</div>
+        <AdvertisementGrid v-else key="shown" :mt="5" />
+      </template>
+    </transition>
     <CFlex justify="center" direction="column" align="center">
       <CButton variant-color="gray" :mt="8" @click="signOut">
         <CIcon name="chevron-left" size="2rem" :ml="-3" :mr="0" />ログアウト
@@ -154,6 +163,7 @@ export default Vue.extend<Data, Methods, Computed, unknown>({
 
 <style lang="scss" scoped>
 @include fadeEaseOutCubic('fade1', 0s, 0.3rem);
+@include fadeEaseOutCubic('fade2', 0s, 0.3rem);
 </style>
 
 <style lang="scss" module></style>

From 347a22185012348cc5e21c9132cf87c1603a1cec Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Mon, 17 May 2021 02:43:13 +0900
Subject: [PATCH 08/15] Remove unused code

---
 utils/notion.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/utils/notion.ts b/utils/notion.ts
index 7837efc9..2d165993 100644
--- a/utils/notion.ts
+++ b/utils/notion.ts
@@ -94,7 +94,6 @@ export interface AdvertisementItem extends NotionDatabaseItem {
 export function isValidAdvertisementItem(
   target: any
 ): target is AdvertisementItem {
-  console.log(target.thumbnail)
   return (
     _isValidNotionDatabaseItem(target) &&
     isNotEmptyString(target.slug) &&

From 7b9fde43e7a880d34387767227b4a1387a590e81 Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Mon, 17 May 2021 02:44:10 +0900
Subject: [PATCH 09/15] Add NOTION_DATABASE_ADVERTISEMENTS env in building
 workflows

---
 .github/workflows/firebase-deploy.yml  | 1 +
 .github/workflows/firebase-preview.yml | 1 +
 2 files changed, 2 insertions(+)

diff --git a/.github/workflows/firebase-deploy.yml b/.github/workflows/firebase-deploy.yml
index bf284520..02823886 100644
--- a/.github/workflows/firebase-deploy.yml
+++ b/.github/workflows/firebase-deploy.yml
@@ -49,6 +49,7 @@ jobs:
           NOTION_DATABASE_CONFIG: ${{ secrets.NOTION_DATABASE_CONFIG }}
           NOTION_DATABASE_NEWS: ${{ secrets.NOTION_DATABASE_NEWS }}
           NOTION_DATABASE_MEETLINKS: ${{ secrets.NOTION_DATABASE_MEETLINKS }}
+          NOTION_DATABASE_ADVERTISEMENTS: ${{ secrets.NOTION_DATABASE_ADVERTISEMENTS }}
 
       - name: Deploy to Firebase Hosting
         run: |
diff --git a/.github/workflows/firebase-preview.yml b/.github/workflows/firebase-preview.yml
index 53f97ed4..ffb138b7 100644
--- a/.github/workflows/firebase-preview.yml
+++ b/.github/workflows/firebase-preview.yml
@@ -31,6 +31,7 @@ jobs:
           NOTION_DATABASE_CONFIG: ${{ secrets.NOTION_DATABASE_CONFIG }}
           NOTION_DATABASE_NEWS: ${{ secrets.NOTION_DATABASE_NEWS }}
           NOTION_DATABASE_MEETLINKS: ${{ secrets.NOTION_DATABASE_MEETLINKS }}
+          NOTION_DATABASE_ADVERTISEMENTS: ${{ secrets.NOTION_DATABASE_ADVERTISEMENTS }}
 
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:

From 2a5080a839fe3188ae431204b7797838efcd99a7 Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Mon, 17 May 2021 22:53:46 +0900
Subject: [PATCH 10/15] Extract modal item to component

---
 assets/whatsThis.min.svg                  |   1 +
 components/AdvertisementGrid.vue          |  61 ++++--------
 components/AdvertisementGridItemModal.vue | 107 ++++++++++++++++++++++
 3 files changed, 125 insertions(+), 44 deletions(-)
 create mode 100644 assets/whatsThis.min.svg
 create mode 100644 components/AdvertisementGridItemModal.vue

diff --git a/assets/whatsThis.min.svg b/assets/whatsThis.min.svg
new file mode 100644
index 00000000..6a8a2281
--- /dev/null
+++ b/assets/whatsThis.min.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135.46666 135.46667"><path fill="none" stroke="#8a8a8a" stroke-dasharray="3.96875,1.32292" stroke-width="1.32292" d="M.66145831.66145998h134.14374v134.14374H.66145831z" opacity=".875776"/><g fill="#8a8a8a" stroke-width=".264583" aria-label="これは 何？" font-family="Noto Sans CJK JP" font-size="32.0493" font-weight="500" style="line-height:1.25;-inkscape-font-specification:'Noto Sans CJK JP Medium'" text-anchor="middle"><path d="M25.123849 39.735476c2.531895.224345 5.256086.352542 8.525115.352542 2.948535 0 6.634205-.224345 8.813557-.384592v-3.333127c-2.371648.256394-5.768874.44869-8.845607.44869-3.236979 0-6.185515-.128197-8.493065-.384591zm-1.378119 9.486593c-.288444 1.249923-.640986 2.75624-.640986 4.486902 0 4.13436 3.685669 6.40986 10.480121 6.40986 4.518951 0 8.428966-.44869 10.928812-1.089676l-.03205-3.493374c-2.563944.737134-6.634205 1.217874-10.99291 1.217874-4.839444 0-7.050846-1.570416-7.050846-3.781818 0-1.153775.224345-2.243451.576887-3.461324zM80.408833 53.484626c-1.442219 1.538366-3.076733 2.467796-4.486902 2.467796-.993529 0-1.442219-.705085-1.442219-1.698613 0-3.236979 1.121726-8.364867 1.121726-11.569798 0-2.628042-1.538367-4.454852-4.711248-4.454852-3.108782 0-6.986747 2.788289-9.454543 5.03174.03205-.44869.0641-.865331.09615-1.314022.512788-.801232 1.089676-1.698612 1.506317-2.2755l-1.121726-1.346071c.224345-2.051155.48074-3.749768.640986-4.551l-3.749768-.128198c.160246.865332.160246 1.762712.160246 2.563945 0 .352542-.0641 1.37812-.160246 2.756239-1.506317.224346-3.172881.416641-4.166409.48074-.897381.03205-1.570416.0641-2.371648.03205l.320493 3.269029c1.922958-.256394 4.551-.608937 6.025268-.801233-.0641.897381-.128197 1.826811-.192296 2.724191-1.698613 2.563944-5.159937 7.146994-6.922649 9.358396l1.987057 2.788289c1.346071-1.82681 3.20493-4.58305 4.679198-6.762402-.0641 3.525423-.09615 5.352233-.128197 8.300769 0 .512788-.0641 1.538366-.09615 2.083204h3.461324c-.0641-.640986-.160246-1.570416-.192295-2.147303-.160247-2.884437-.128198-5.159937-.128198-7.916177 0-.993529.03205-2.083205.09615-3.20493 2.75624-2.980585 6.40986-5.96117 8.877657-5.96117 1.506317 0 2.371648.769183 2.371648 2.467796 0 3.012634-1.185824 7.980276-1.185824 11.47365 0 2.820338 1.538366 4.358705 3.749768 4.358705 2.339599 0 4.294606-.96148 5.897071-2.531895zM87.010928 34.415292c-.03205.833282-.160247 1.82681-.256394 2.628042-.384592 2.531895-1.41017 8.557164-1.41017 13.30046 0 4.294607.608937 7.852079 1.249923 10.063481l2.820339-.192296c-.03205-.384591-.03205-.865331-.0641-1.185824 0-.384592.0641-1.025578.160246-1.442219.352543-1.634514 1.442219-4.871493 2.275501-7.243142l-1.634515-1.281972c-.480739 1.153775-1.153774 2.692142-1.602465 4.006163-.160246-1.153775-.224345-2.211402-.224345-3.333127 0-3.397226.961479-9.999382 1.538367-12.563326.128197-.576888.416641-1.890909.640986-2.435747zm16.088752 19.71032c0 1.987057-.73714 3.172881-3.07674 3.172881-2.019102 0-3.429271-.737134-3.429271-2.211402 0-1.314021 1.442219-2.243451 3.557471-2.243451 1.02558 0 1.98706.160246 2.94854.416641zm9.26225 1.442218c-1.60247-1.442218-3.58953-3.076732-6.21757-4.134359-.0962-2.435747-.28844-5.288135-.35254-8.461016 1.82681-.128197 3.62157-.320493 5.25608-.576887v-3.108783c-1.63451.320494-3.39722.544839-5.25608.705085.032-1.442218.0641-2.788289.0961-3.589522.032-.640986.0961-1.314021.19229-1.955007h-3.62157c.1282.608937.1923 1.474268.1923 2.019106 0 .801233.0321 2.147303.0321 3.717719-.89738.03205-1.76272.0641-2.6601.0641-1.890905 0-3.653616-.09615-5.480426-.256395l.03205 3.012634c1.858859.09615 3.589522.192296 5.416332.192296.897385 0 1.794765-.03205 2.692145-.0641.0641 2.467796.19229 5.191986.28844 7.403388-.80123-.128197-1.66656-.192296-2.56394-.192296-4.230512 0-6.762407 2.179353-6.762407 5.095839 0 3.044684 2.499846 4.839445 6.794457 4.839445 4.4228 0 5.83297-2.499846 5.83297-5.448381v-.09615c1.47427.89738 2.91648 2.083204 4.39075 3.461324zM42.174047 72.425763c-1.634514 4.615099-4.326656 9.198149-7.179043 12.146685.480739.737134 1.34607 2.339599 1.602465 3.044684.89738-.993529 1.82681-2.115254 2.660092-3.333128v17.498916h2.948535V79.476609c1.057627-1.987057 2.019106-4.10231 2.75624-6.217564zM53.03876 84.828842v6.025269h-4.647148v-6.025269zm2.75624 8.589213V82.232849H45.571273v13.364559h2.820339v-2.179353zm8.781509-18.075806H44.866188v2.852388H59.44862v19.806468c0 .640986-.224345.801233-.89738.833282-.640986 0-2.948536.03205-5.256085-.0641.44869.865332.89738 2.211402 1.025577 3.044682 3.012635.032 5.159938-.0641 6.40986-.54484 1.249923-.48074 1.698613-1.346067 1.698613-3.236976V78.194637h2.147304zM79.799866 91.334851h3.269028c-.673035-4.679198 6.698304-5.480431 6.698304-10.255777 0-3.942064-3.140831-6.185515-7.691832-6.185515-3.461325 0-6.121417 1.506317-8.172572 3.813867l2.115254 1.955007c1.634514-1.82681 3.557473-2.72419 5.640677-2.72419 2.948536 0 4.518952 1.37812 4.518952 3.461324 0 3.397226-7.243142 4.711247-6.377811 9.935284zm-1.217874 5.352233c0 1.698613 1.249923 2.820338 2.884437 2.820338 1.634515 0 2.916487-1.121725 2.916487-2.820338s-1.281972-2.788289-2.916487-2.788289c-1.634514 0-2.884437 1.089676-2.884437 2.788289z" style="-inkscape-font-specification:'Noto Sans CJK JP Medium';text-align:center"/></g></svg>
\ No newline at end of file
diff --git a/components/AdvertisementGrid.vue b/components/AdvertisementGrid.vue
index 7cc25caf..9797133f 100644
--- a/components/AdvertisementGrid.vue
+++ b/components/AdvertisementGrid.vue
@@ -11,51 +11,19 @@
         <CImage :src="getAdvertiseThumbnail(index)" size="100%" />
       </CPseudoBox>
     </CGrid>
-    <CModal
+
+    <AdvertisementGridItemModal
       :is-open="showModal"
       :on-close="closeDetails"
       is-centered
       :size="{ base: 'sm', sm: 'md', md: 'lg' }"
-    >
-      <CModalContent>
-        <CModalHeader></CModalHeader>
-        <CModalCloseButton />
-        <CModalBody :pt="3">
-          <template v-if="selectedItem">
-            <CImage
-              :src="getAdvertiseThumbnail(selectedIndex)"
-              size="100%"
-              max-w="512px"
-            />
-            <CFlex justify="center" direction="column" :pt="2">
-              <CBox v-if="selectedItem.title" text-align="start">{{
-                selectedItem.title
-              }}</CBox>
-              <CBox
-                v-if="selectedItem.description"
-                text-align="start"
-                :px="1"
-                >{{ selectedItem.description }}</CBox
-              >
-              <CBox text-align="end">{{ selectedItem.author }}</CBox>
-            </CFlex>
-            <CFlex justify="center" :pb="2">
-              <CButton
-                variant-color="blue"
-                variant="solid"
-                size="sm"
-                min-w="5em"
-                font-weight="normal"
-                @click="openAdvertiseLink(selectedItem)"
-                >詳細</CButton
-              >
-            </CFlex>
-          </template></CModalBody
-        >
-        <!-- <CModalFooter></CModalFooter> -->
-      </CModalContent>
-      <CModalOverlay />
-    </CModal>
+      :thumbnail="selectedItem && getAdvertiseThumbnail(selectedIndex)"
+      :title="selectedItem && selectedItem.title"
+      :description="selectedItem && selectedItem.description"
+      :author="selectedItem && selectedItem.author"
+      :link="selectedItem && selectedItem.link"
+      @clickDetails="openAdvertiseLink(selectedIndex)"
+    />
   </div>
 </template>
 
@@ -66,6 +34,7 @@ import {
   isValidAdvertisementItem,
   AdvertisementItem,
 } from '@/utils/notion'
+import AdvertisementGridItemModal from './AdvertisementGridItemModal.vue'
 
 type Data = {
   items: AdvertisementItem[]
@@ -76,7 +45,7 @@ type Data = {
 type Methods = {
   viewDetails(index: number): void
   closeDetails(): void
-  openAdvertiseLink(item: AdvertisementItem): void
+  openAdvertiseLink(index: number): void
   getAdvertiseThumbnail(index: number): string
 }
 
@@ -86,6 +55,7 @@ type Computed = {
 }
 
 export default Vue.extend<Data, Methods, Computed, unknown>({
+  components: { AdvertisementGridItemModal },
   data() {
     return {
       items: [],
@@ -121,8 +91,9 @@ export default Vue.extend<Data, Methods, Computed, unknown>({
       this.showModal = false
       this.selectedIndex = -1
     },
-    openAdvertiseLink(item) {
-      const { link } = item
+    openAdvertiseLink(index) {
+      if (index < 0) return ''
+      const { link } = this.itemsAvailable[index]
       if (!link) return
 
       // this.$gtag.event()
@@ -130,6 +101,8 @@ export default Vue.extend<Data, Methods, Computed, unknown>({
       window.open(link, '_blank', 'noopener,noreferrer')
     },
     getAdvertiseThumbnail(index) {
+      if (index < 0) return ''
+
       const { thumbnail } = this.itemsAvailable[index]
       if (!thumbnail) return ''
       return thumbnail[0].url
diff --git a/components/AdvertisementGridItemModal.vue b/components/AdvertisementGridItemModal.vue
new file mode 100644
index 00000000..ae607ea9
--- /dev/null
+++ b/components/AdvertisementGridItemModal.vue
@@ -0,0 +1,107 @@
+<template>
+  <CModal v-bind="$attrs">
+    <CModalContent>
+      <CModalHeader></CModalHeader>
+      <CModalCloseButton />
+      <CModalBody :pt="3">
+        <img
+          v-if="thumbnail === 'WHATS_THIS'"
+          src="~assets/whatsThis.min.svg"
+          :class="[$style.SendenItemModalThumbnail]"
+        />
+        <CImage
+          v-else-if="thumbnail"
+          :src="thumbnail"
+          size="100%"
+          max-w="512px"
+        />
+
+        <CFlex justify="center" direction="column" :pt="2">
+          <CBox v-if="title" text-align="start" font-weight="bold">{{
+            title
+          }}</CBox>
+          <CBox v-if="description" text-align="start" :px="1">{{
+            description
+          }}</CBox>
+          <CBox v-if="author" text-align="end">{{ author }}</CBox>
+        </CFlex>
+        <CFlex justify="center" :pb="2">
+          <CButton
+            variant-color="blue"
+            variant="solid"
+            size="sm"
+            min-w="5em"
+            font-weight="normal"
+            @click="$emit('clickDetails')"
+            >詳細</CButton
+          >
+        </CFlex></CModalBody
+      >
+      <!-- <CModalFooter></CModalFooter> -->
+    </CModalContent>
+    <CModalOverlay />
+  </CModal>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+type Data = {}
+
+type Methods = {}
+
+type Computed = {}
+
+type Props = {
+  thumbnail?: string
+  title?: string
+  description?: string
+  author?: string
+  link?: string
+}
+
+export default Vue.extend<Data, Methods, Computed, Props>({
+  props: {
+    thumbnail: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    author: {
+      type: String,
+      default: '',
+    },
+    link: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+})
+</script>
+
+<style lang="scss" module>
+.Senden {
+  &Item {
+    &Modal {
+      &Thumbnail {
+        height: 80%;
+        width: 80%;
+        max-width: 512px;
+        margin: 0 auto;
+      }
+    }
+  }
+}
+</style>

From f67a816f8b9681a7fd43e727d9fd40ebed92dcae Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Mon, 17 May 2021 22:55:16 +0900
Subject: [PATCH 11/15] Add advertisement placeholder item

---
 components/AdvertisementGrid.vue | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/components/AdvertisementGrid.vue b/components/AdvertisementGrid.vue
index 9797133f..cb757820 100644
--- a/components/AdvertisementGrid.vue
+++ b/components/AdvertisementGrid.vue
@@ -10,6 +10,13 @@
       >
         <CImage :src="getAdvertiseThumbnail(index)" size="100%" />
       </CPseudoBox>
+      <CPseudoBox
+        transition="all 0.3s"
+        :_hover="{ opacity: 0.7, cursor: 'pointer' }"
+        @click="showWhatsThis = true"
+      >
+        <img src="~assets/whatsThis.min.svg" size="100%" />
+      </CPseudoBox>
     </CGrid>
 
     <AdvertisementGridItemModal
@@ -24,6 +31,20 @@
       :link="selectedItem && selectedItem.link"
       @clickDetails="openAdvertiseLink(selectedIndex)"
     />
+
+    <AdvertisementGridItemModal
+      :is-open="showWhatsThis"
+      :on-close="() => (showWhatsThis = false)"
+      is-centered
+      :size="{ base: 'sm', sm: 'md', md: 'lg' }"
+      thumbnail="WHATS_THIS"
+      title="宣伝コーナーを設置しました"
+      description="サークルの勧誘、演奏会のお知らせ、伴奏者の募集 etc...
+              藝大生に見てもらいたい、知ってもらいたい情報を載せて、活動の輪を広げませんか？"
+      author=""
+      link=""
+      @clickDetails="() => {}"
+    />
   </div>
 </template>
 
@@ -40,6 +61,7 @@ type Data = {
   items: AdvertisementItem[]
   showModal: boolean
   selectedIndex: number
+  showWhatsThis: boolean
 }
 
 type Methods = {
@@ -61,6 +83,7 @@ export default Vue.extend<Data, Methods, Computed, unknown>({
       items: [],
       showModal: false,
       selectedIndex: -1,
+      showWhatsThis: false,
     }
   },
   async fetch() {

From adfbc5f0492d7cf724412b719bb4de4ac095c279 Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Wed, 19 May 2021 23:43:42 +0900
Subject: [PATCH 12/15] Update advertisement modal text styles

---
 components/AdvertisementGridItemModal.vue | 36 +++++++++++++++++++----
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/components/AdvertisementGridItemModal.vue b/components/AdvertisementGridItemModal.vue
index ae607ea9..bb136fe7 100644
--- a/components/AdvertisementGridItemModal.vue
+++ b/components/AdvertisementGridItemModal.vue
@@ -16,14 +16,23 @@
           max-w="512px"
         />
 
-        <CFlex justify="center" direction="column" :pt="2">
-          <CBox v-if="title" text-align="start" font-weight="bold">{{
-            title
-          }}</CBox>
+        <CFlex justify="center" direction="column" :py="3">
+          <CHeading
+            v-if="title"
+            as="h2"
+            text-align="start"
+            font-size="1.125rem"
+            font-weight="bold"
+            >{{ title }}</CHeading
+          >
           <CBox v-if="description" text-align="start" :px="1">{{
             description
           }}</CBox>
-          <CBox v-if="author" text-align="end">{{ author }}</CBox>
+          <CBox v-if="author" text-align="end"
+            ><span :class="[$style.SendenItemModalAuthor]">{{
+              author
+            }}</span></CBox
+          >
         </CFlex>
         <CFlex justify="center" :pb="2">
           <CButton
@@ -101,6 +110,23 @@ export default Vue.extend<Data, Methods, Computed, Props>({
         max-width: 512px;
         margin: 0 auto;
       }
+
+      &Author {
+        position: relative;
+        z-index: 0;
+
+        &::before {
+          content: '';
+          position: absolute;
+          display: inline-block;
+          height: 1px;
+          width: 2em;
+          top: 50%;
+          right: calc(100% + 0.18rem);
+          border-bottom: 1px solid #1a202c;
+          z-index: -1;
+        }
+      }
     }
   }
 }

From 8438c97571da91d689213198de7a332c1f42b846 Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Wed, 19 May 2021 23:45:30 +0900
Subject: [PATCH 13/15] Render button as nuxt-link when link is internal

---
 components/AdvertisementGridItemModal.vue | 48 +++++++++++++++++------
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/components/AdvertisementGridItemModal.vue b/components/AdvertisementGridItemModal.vue
index bb136fe7..c1debb7e 100644
--- a/components/AdvertisementGridItemModal.vue
+++ b/components/AdvertisementGridItemModal.vue
@@ -35,15 +35,24 @@
           >
         </CFlex>
         <CFlex justify="center" :pb="2">
-          <CButton
-            variant-color="blue"
-            variant="solid"
-            size="sm"
-            min-w="5em"
-            font-weight="normal"
-            @click="$emit('clickDetails')"
-            >詳細</CButton
-          >
+          <template v-if="link">
+            <CButton
+              v-if="link.startsWith('/')"
+              as="nuxt-link"
+              v-bind="linkButtonAttrs"
+              :to="link"
+              @click="$emit('clickDetails')"
+              >{{ linkText }}</CButton
+            >
+            <CButton
+              v-else
+              as="a"
+              v-bind="linkButtonAttrs"
+              :href="link"
+              @click="$emit('clickDetails')"
+              >{{ linkText }}</CButton
+            >
+          </template>
         </CFlex></CModalBody
       >
       <!-- <CModalFooter></CModalFooter> -->
@@ -55,7 +64,9 @@
 <script lang="ts">
 import Vue from 'vue'
 
-type Data = {}
+type Data = {
+  linkButtonAttrs: Record<string, string>
+}
 
 type Methods = {}
 
@@ -67,6 +78,7 @@ type Props = {
   description?: string
   author?: string
   link?: string
+  linkText: string
 }
 
 export default Vue.extend<Data, Methods, Computed, Props>({
@@ -91,9 +103,23 @@ export default Vue.extend<Data, Methods, Computed, Props>({
       type: String,
       default: '',
     },
+    linkText: {
+      type: String,
+      default: '詳細',
+    },
   },
   data() {
-    return {}
+    return {
+      linkButtonAttrs: {
+        variantColor: 'blue',
+        variant: 'solid',
+        size: 'sm',
+        minW: '5em',
+        fontWeight: 'normal',
+        target: '_blank',
+        rel: 'noopener noreferrer',
+      },
+    }
   },
   computed: {},
   methods: {},

From 885a132d1ace72cbcecb96ecceecd62524239824 Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Thu, 20 May 2021 00:02:11 +0900
Subject: [PATCH 14/15] Use data attribute

---
 components/AdvertisementGrid.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/AdvertisementGrid.vue b/components/AdvertisementGrid.vue
index cb757820..59644ee9 100644
--- a/components/AdvertisementGrid.vue
+++ b/components/AdvertisementGrid.vue
@@ -37,12 +37,7 @@
       :on-close="() => (showWhatsThis = false)"
       is-centered
       :size="{ base: 'sm', sm: 'md', md: 'lg' }"
-      thumbnail="WHATS_THIS"
-      title="宣伝コーナーを設置しました"
-      description="サークルの勧誘、演奏会のお知らせ、伴奏者の募集 etc...
-              藝大生に見てもらいたい、知ってもらいたい情報を載せて、活動の輪を広げませんか？"
-      author=""
-      link=""
+      v-bind="whatsThisProps"
       @clickDetails="() => {}"
     />
   </div>
@@ -62,6 +57,7 @@ type Data = {
   showModal: boolean
   selectedIndex: number
   showWhatsThis: boolean
+  whatsThisProps: Record<string, string>
 }
 
 type Methods = {
@@ -84,6 +80,14 @@ export default Vue.extend<Data, Methods, Computed, unknown>({
       showModal: false,
       selectedIndex: -1,
       showWhatsThis: false,
+      whatsThisProps: {
+        thumbnail: 'WHATS_THIS',
+        title: '宣伝コーナーを設置しました',
+        description:
+          'サークルの勧誘、演奏会のお知らせ、伴奏者の募集 etc... 藝大生に見てもらいたい、知ってもらいたい情報を載せて、活動の輪を広げませんか？',
+        author: '',
+        link: '/',
+      },
     }
   },
   async fetch() {

From ad536b7b27965985851f87edc8ff24dbc021c1c3 Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Thu, 20 May 2021 00:42:55 +0900
Subject: [PATCH 15/15] Remove unnecessary importing

---
 components/AdvertisementGrid.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/AdvertisementGrid.vue b/components/AdvertisementGrid.vue
index 59644ee9..0c3fee89 100644
--- a/components/AdvertisementGrid.vue
+++ b/components/AdvertisementGrid.vue
@@ -50,7 +50,6 @@ import {
   isValidAdvertisementItem,
   AdvertisementItem,
 } from '@/utils/notion'
-import AdvertisementGridItemModal from './AdvertisementGridItemModal.vue'
 
 type Data = {
   items: AdvertisementItem[]
@@ -73,7 +72,6 @@ type Computed = {
 }
 
 export default Vue.extend<Data, Methods, Computed, unknown>({
-  components: { AdvertisementGridItemModal },
   data() {
     return {
       items: [],