NotionをDBaaSにして「ロリポップ！」「ヘテムル」のサイトをもっと安全にしよう

$ npm i -g create-next-app
# 好みでTypeScriptを指定
$ create-next-app --ts linyows.her.jp
$ cd linyows.her.jp
$ yarn add notionate
$ cat << EOF > .env
NOTION_CACHE=true
NOTION_TOKEN=secret_*************************************
NOTION_DBID=102db5ac15844bc5a0b7f4419b2c33a0
EOF

import {
  FetchDatabase,
  QueryDatabaseParameters,
  RichTextItemResponse,
  SelectPropertyResponse,
  DateResponse,
  DBPageBase,
  QueryDatabaseResponseEx,
} from 'notionate'

export type DBPage = DBPageBase & {
  cover: {
    src: string
  }
  properties: {
    "タイトル": {
      type: "title"
      title: RichTextItemResponse[]
      id: string
    }
    Slug: {
      type: "rich_text"
      rich_text: RichTextItemResponse[]
      id: string
    }
    "公開日時": {
      type: "date"
      date: DateResponse | null
      id: string
    }
    "タグ": {
      type: "multi_select"
      multi_select: SelectPropertyResponse[]
      id: string
    }
  }
}

export type Service = {
  id: string
  title: string
  slug: string
  date: string
  tags: string[]
  cover: string
}

export const build = (page: DBPage): Service => {
  const p = page.properties
  return {
    id: page.id,
    title: p["タイトル"].title.map(v => v.plain_text).join(',') || '',
    slug: p.Slug.rich_text.map(v => v.plain_text).join(',') || '',
    date: p["公開日時"].date?.start || '',
    tags: p["タグ"].multi_select.map(v => v.name) || [],
    cover: page.cover.src,
  }
}

const q = {
  database_id: process.env.NOTION_DBID,
  filter: {
    property: '公開日時',
    date: {
      on_or_before: (new Date(Date.now())).toISOString(),
    },
  },
  sorts: [
    {
      property: '公開日時',
      direction: 'ascending',
    },
  ],
  limit: 10,
} as QueryDatabaseParameters

export const getServices = async () => {
  return await FetchDatabase(q)
}

export const getService = async (slug: string) => {
  const svc = await getServices()
  return svc.results.find(v => {
    const p = v as unknown as DBPage
    return p.properties.Slug.rich_text.map(vv => vv.plain_text).join(',') === slug
  })
}

export const getPaths = async () => {
  const svc = await getServices()
  return svc.results.map(v => {
    const p = v as DBPage
    const slug = p.properties.Slug.rich_text.map(v => v.plain_text).join(',')
    return { params: { slug } }
  })
}

import type { AppProps } from 'next/app'
import '../styles/globals.css'
import 'notionate/dist/styles/notionate.css'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

import { GetStaticProps, NextPage } from 'next'
import type { ReactElement } from 'react'
import Link from 'next/link'
import { QueryDatabaseResponseEx } from 'notionate'
import { Gallery } from 'notionate/dist/components'
import { getServices } from '../lib/service'

type Props = {
  services: QueryDatabaseResponseEx
}

export const getStaticProps: GetStaticProps<Props> = async () => {
  const services = await getServices()
  return {
    props: {
      services,
    }
  }
}

const Home: NextPage<Props> = ({ services }) => {
  return <Gallery
    keys={['タイトル', '公開日時', 'タグ']}
    db={services}
    preview="cover"
    size="small"
    fit={true}
    href="/services/[Slug]"
    link={Link as React.FC<{ children: ReactElement<'a'>, href: string}>}
  />
}

export default Home

import { GetStaticProps, NextPage, PreviewData } from 'next'
import {
  FetchBlocks,
  ListBlockChildrenResponseEx,
} from 'notionate'
import {
  Service,
  build,
  getPaths,
  getService,
  DBPage,
  getServices,
} from '../../lib/service'
import { Blocks } from 'notionate/dist/components'

type Props = {
  service?: Service
  blocks?: ListBlockChildrenResponseEx
}

type Params = {
  slug: string
}

export const getStaticPaths = async () => {
  const paths = await getPaths()
  return {
    paths,
    fallback: false,
  }
}

export const getStaticProps: GetStaticProps<Props, Params, PreviewData> = async ({ params }) => {
  const service = await getService(params!.slug)

  if (!service) {
    return {
      props: {},
      redirect: {
        destination: '/404'
      }
    }
  }

  const blocks = await FetchBlocks(service.id)
  return {
    props: {
      service: build(service as unknown as DBPage),
      blocks,
    },
    revalidate: 60,
  }
}

const Service: NextPage<Props> = ({ service, blocks }) => {
  return (
    <>
      <header className="service-header">
        <div>
            <h2 className="name">{service?.title}</h2>
            <p className="meta">
                作成日： <span>{service?.date}</span>, 
                タグ： {service?.tags.map((tag, i) => (
                <span key={`${i}`}>{tag}</span>
                ))}
            </p>
        </div>
        <img className="cover" src={service?.cover} width="250px" />
      </header>
      <Blocks blocks={blocks!} />
    </>
  )
}

export default Service

name: Build and Deploy

on:
  repository_dispatch:
  pull_request:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18.x]
    env:
      NOTION_CACHE: true
      NOTION_TOKEN: ${{ secrets.NOTION_TOKEN }}
      NOTION_DBID: ${{ secrets.NOTION_DBID }}
    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - name: Run builds and deploys with ${{ matrix.node-version }}
      run: |
        yarn install && yarn build && yarn export
  deploy:
    runs-on: ubuntu-latest
    needs: [build]
    if: github.ref == 'refs/heads/main'
    env:
      NOTION_CACHE: true
      NOTION_TOKEN: ${{ secrets.NOTION_TOKEN }}
      NOTION_DBID: ${{ secrets.NOTION_DBID }}
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: '18'
        cache: 'npm'
    - name: Run next export
      run: |
        yarn install && yarn build && yarn export
    - name: deploy by scp
      uses: appleboy/scp-action@master
      with:
        host: ${{ secrets.SSH_HOST }}
        username: ${{ secrets.SSH_USERNAME }}
        password: ${{ secrets.SSH_PASSWORD }}
        port: ${{ secrets.SSH_PORT }}
        source: "out/*"
        target: "web"
        strip_components: 1

curl -X POST -H "Authorization: token <your-token>" \
  -H "Accept: application/vnd.github.everest-preview+json" \
  -d "{\"event_type\":\"Deploy the latest content on notion\"}" \
  -i  https://api.github.com/repos/<your-name>/<repo-name>/dispatches

DirectoryIndex index.html
DirectorySlash Off
ErrorDocument 404 /404.html
RewriteEngine On

# REWRITE to HTTPS
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

# REMOVE TRAILING SLASH
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [R=301,L]

# REWRITE to index.html
RewriteCond %{REQUEST_URI} "^/$"
RewriteRule ^(.*)$ /index.html [L]

# REWRITE to .html
RewriteCond %{REQUEST_URI} !index\.html$
RewriteCond %{REQUEST_URI} !^.*\.html$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ %{REQUEST_FILENAME}.html [L]