Add advertisement section

.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: |

.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:

components/AdvertisementGrid.vue

@@ -0,0 +1,158 @@
+<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>
+      <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
+      :is-open="showModal"
+      :on-close="closeDetails"
+      is-centered
+      :size="{ base: 'sm', sm: 'md', md: 'lg' }"
+      :thumbnail="selectedItem && getAdvertiseThumbnail(selectedIndex)"
+      :title="selectedItem && selectedItem.title"
+      :description="selectedItem && selectedItem.description"
+      :author="selectedItem && selectedItem.author"
+      :link="selectedItem && selectedItem.link"
+      @clickDetails="openAdvertiseLink(selectedIndex)"
+    />
+
+    <AdvertisementGridItemModal
+      :is-open="showWhatsThis"
+      :on-close="() => (showWhatsThis = false)"
+      is-centered
+      :size="{ base: 'sm', sm: 'md', md: 'lg' }"
+      v-bind="whatsThisProps"
+      @clickDetails="() => {}"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import {
+  fetchNotionTableData,
+  isValidAdvertisementItem,
+  AdvertisementItem,
+} from '@/utils/notion'
+
+type Data = {
+  items: AdvertisementItem[]
+  showModal: boolean
+  selectedIndex: number
+  showWhatsThis: boolean
+  whatsThisProps: Record<string, string>
+}
+
+type Methods = {
+  viewDetails(index: number): void
+  closeDetails(): void
+  openAdvertiseLink(index: number): 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,
+      showWhatsThis: false,
+      whatsThisProps: {
+        thumbnail: 'WHATS_THIS',
+        title: '宣伝コーナーを設置しました',
+        description:
+          'サークルの勧誘、演奏会のお知らせ、伴奏者の募集 etc... 藝大生に見てもらいたい、知ってもらいたい情報を載せて、活動の輪を広げませんか？',
+        author: '',
+        link: '/',
+      },
+    }
+  },
+  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(index) {
+      if (index < 0) return ''
+      const { link } = this.itemsAvailable[index]
+      if (!link) return
+
+      // this.$gtag.event()
+
+      window.open(link, '_blank', 'noopener,noreferrer')
+    },
+    getAdvertiseThumbnail(index) {
+      if (index < 0) return ''
+
+      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>

components/AdvertisementGridItemModal.vue

@@ -0,0 +1,159 @@
+<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" :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"
+            ><span :class="[$style.SendenItemModalAuthor]">{{
+              author
+            }}</span></CBox
+          >
+        </CFlex>
+        <CFlex justify="center" :pb="2">
+          <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> -->
+    </CModalContent>
+    <CModalOverlay />
+  </CModal>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+type Data = {
+  linkButtonAttrs: Record<string, string>
+}
+
+type Methods = {}
+
+type Computed = {}
+
+type Props = {
+  thumbnail?: string
+  title?: string
+  description?: string
+  author?: string
+  link?: string
+  linkText: 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: '',
+    },
+    linkText: {
+      type: String,
+      default: '詳細',
+    },
+  },
+  data() {
+    return {
+      linkButtonAttrs: {
+        variantColor: 'blue',
+        variant: 'solid',
+        size: 'sm',
+        minW: '5em',
+        fontWeight: 'normal',
+        target: '_blank',
+        rel: 'noopener noreferrer',
+      },
+    }
+  },
+  computed: {},
+  methods: {},
+})
+</script>
+
+<style lang="scss" module>
+.Senden {
+  &Item {
+    &Modal {
+      &Thumbnail {
+        height: 80%;
+        width: 80%;
+        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;
+        }
+      }
+    }
+  }
+}
+</style>

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: {