@slidev/client 0.48.0-beta.2 → 0.48.0-beta.20

package/pages/overview.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import { useHead } from '@unhead/vue'
+import type { RouteRecordRaw } from 'vue-router'
+import type { ClicksContext } from 'packages/types'
+import { configs } from '../env'
+import { openInEditor, rawRoutes } from '../logic/nav'
+import { useFixedClicks } from '../composables/useClicks'
+import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
+import { getSlideClass } from '../utils'
+import SlideContainer from '../internals/SlideContainer.vue'
+import SlideWrapper from '../internals/SlideWrapper'
+import DrawingPreview from '../internals/DrawingPreview.vue'
+import IconButton from '../internals/IconButton.vue'
+import NoteEditable from '../internals/NoteEditable.vue'
+import ClicksSlider from '../internals/ClicksSlider.vue'
+import { CLICKS_MAX } from '../constants'
+
+const cardWidth = 450
+
+const slideTitle = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
+useHead({
+  title: `Overview - ${slideTitle}`,
+})
+
+const blocks: Map<number, HTMLElement> = reactive(new Map())
+const activeBlocks = ref<number[]>([])
+const edittingNote = ref<number | null>(null)
+const wordCounts = computed(() => rawRoutes.map(route => wordCount(route.meta?.slide?.note || '')))
+const totalWords = computed(() => wordCounts.value.reduce((a, b) => a + b, 0))
+const totalClicks = computed(() => rawRoutes.map(route => getSlideClicks(route)).reduce((a, b) => a + b, 0))
+
+const clicksContextMap = new WeakMap<RouteRecordRaw, ClicksContext>()
+function getClicksContext(route: RouteRecordRaw) {
+  // We create a local clicks context to calculate the total clicks of the slide
+  if (!clicksContextMap.has(route))
+    clicksContextMap.set(route, useFixedClicks(route, CLICKS_MAX))
+  return clicksContextMap.get(route)!
+}
+
+function getSlideClicks(route: RouteRecordRaw) {
+  return route.meta?.clicks || getClicksContext(route)?.total
+}
+
+function wordCount(str: string) {
+  return str.match(/[\w\d\’\'-]+/gi)?.length || 0
+}
+
+function isElementInViewport(el: HTMLElement) {
+  const rect = el.getBoundingClientRect()
+  const delta = 20
+  return (
+    rect.top >= 0 - delta
+    && rect.left >= 0 - delta
+    && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + delta
+    && rect.right <= (window.innerWidth || document.documentElement.clientWidth) + delta
+  )
+}
+
+function checkActiveBlocks() {
+  const active: number[] = []
+  Array.from(blocks.entries())
+    .forEach(([idx, el]) => {
+      if (isElementInViewport(el))
+        active.push(idx)
+    })
+  activeBlocks.value = active
+}
+
+function openSlideInNewTab(path: string) {
+  const a = document.createElement('a')
+  a.target = '_blank'
+  a.href = path
+  a.click()
+}
+
+function scrollToSlide(idx: number) {
+  const el = blocks.get(idx)
+  if (el)
+    el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
+function onMarkerClick(e: MouseEvent, clicks: number, route: RouteRecordRaw) {
+  const ctx = getClicksContext(route)
+  if (ctx.current === clicks)
+    ctx.current = CLICKS_MAX
+  else
+    ctx.current = clicks
+  e.preventDefault()
+}
+
+onMounted(() => {
+  nextTick(() => {
+    checkActiveBlocks()
+  })
+})
+</script>
+
+<template>
+  <div class="h-screen w-screen of-hidden flex">
+    <nav class="h-full flex flex-col border-r border-main p2 select-none">
+      <div class="flex flex-col flex-auto items-center justify-center group gap-1">
+        <div
+          v-for="(route, idx) of rawRoutes"
+          :key="route.path"
+          class="relative"
+        >
+          <button
+            class="relative transition duration-300 w-8 h-8 rounded hover:bg-active hover:op100"
+            :class="activeBlocks.includes(idx) ? 'op100 text-primary bg-gray:5' : 'op20'"
+            @click="scrollToSlide(idx)"
+          >
+            <div>{{ idx + 1 }}</div>
+          </button>
+          <div
+            v-if="route.meta?.slide?.title"
+            class="pointer-events-none select-none absolute left-110% bg-main top-50% translate-y--50% ws-nowrap z-10 px2 shadow-xl rounded border border-main transition duration-400 op0 group-hover:op100"
+            :class="activeBlocks.includes(idx) ? 'text-primary' : 'text-main important-text-op-50'"
+          >
+            {{ route.meta?.slide?.title }}
+          </div>
+        </div>
+      </div>
+      <IconButton
+        v-if="!isColorSchemaConfigured"
+        :title="isDark ? 'Switch to light mode theme' : 'Switch to dark mode theme'"
+        @click="toggleDark()"
+      >
+        <carbon-moon v-if="isDark" />
+        <carbon-sun v-else />
+      </IconButton>
+    </nav>
+    <main
+      class="flex-1 h-full of-auto"
+      :style="`grid-template-columns: repeat(auto-fit,minmax(${cardWidth}px,1fr))`"
+      @scroll="checkActiveBlocks"
+    >
+      <div
+        v-for="(route, idx) of rawRoutes"
+        :key="route.path"
+        :ref="el => blocks.set(idx, el as any)"
+        class="relative border-t border-main of-hidden flex gap-4 min-h-50 group"
+      >
+        <div class="select-none w-13 text-right my4 flex flex-col gap-1 items-end">
+          <div class="text-3xl op20 mb2">
+            {{ idx + 1 }}
+          </div>
+          <IconButton
+            class="mr--3 op0 group-hover:op80"
+            title="Play in new tab"
+            @click="openSlideInNewTab(route.path)"
+          >
+            <carbon:presentation-file />
+          </IconButton>
+          <IconButton
+            v-if="route.meta?.slide"
+            class="mr--3 op0 group-hover:op80"
+            title="Open in editor"
+            @click="openInEditor(`${route.meta.slide.filepath}:${route.meta.slide.start}`)"
+          >
+            <carbon:cics-program />
+          </IconButton>
+        </div>
+        <div class="flex flex-col gap-2 my5">
+          <div
+            class="border rounded border-main overflow-hidden bg-main select-none h-max"
+            @dblclick="openSlideInNewTab(route.path)"
+          >
+            <SlideContainer
+              :key="route.path"
+              :width="cardWidth"
+              :clicks-disabled="true"
+              class="pointer-events-none important:[&_*]:select-none"
+            >
+              <SlideWrapper
+                :is="route.component"
+                v-if="route?.component"
+                :clicks-context="getClicksContext(route)"
+                :class="getSlideClass(route)"
+                :route="route"
+                render-context="overview"
+              />
+              <DrawingPreview :page="+route.path" />
+            </SlideContainer>
+          </div>
+          <ClicksSlider
+            v-if="getSlideClicks(route)"
+            mt-2
+            :clicks-context="getClicksContext(route)"
+            class="w-full"
+          />
+        </div>
+        <div class="py3 mt-0.5 mr--8 ml--4 op0 transition group-hover:op100">
+          <IconButton
+            title="Edit Note"
+            class="rounded-full w-9 h-9 text-sm"
+            :class="edittingNote === idx ? 'important:op0' : ''"
+            @click="edittingNote = idx"
+          >
+            <carbon:pen />
+          </IconButton>
+        </div>
+        <NoteEditable
+          :no="idx"
+          class="max-w-250 w-250 text-lg rounded p3"
+          :auto-height="true"
+          :editing="edittingNote === idx"
+          :clicks-context="getClicksContext(route)"
+          @dblclick="edittingNote !== idx ? edittingNote = idx : null"
+          @update:editing="edittingNote = null"
+          @marker-click="(e, clicks) => onMarkerClick(e, clicks, route)"
+        />
+        <div
+          v-if="wordCounts[idx] > 0"
+          class="select-none absolute bottom-0 right-0 bg-main rounded-tl p2 op35 text-xs"
+        >
+          {{ wordCounts[idx] }} words
+        </div>
+      </div>
+    </main>
+    <div class="absolute top-0 right-0 px3 py1.5 border-b border-l rounded-lb bg-main border-main select-none">
+      <div class="text-xs op50">
+        {{ rawRoutes.length }} slides ·
+        {{ totalClicks + rawRoutes.length - 1 }} clicks ·
+        {{ totalWords }} words
+      </div>
+    </div>
+  </div>
+</template>

package/{internals/Play.vue → pages/play.vue}

@@ -4,12 +4,12 @@ import { isEditorVertical, isScreenVertical, showEditor, slideScale, windowSize
 import { isEmbedded, isPrintMode, next, prev, useSwipeControls } from '../logic/nav'
 import { isDrawing } from '../logic/drawings'
 import { registerShortcuts } from '../logic/shortcuts'
-import { configs, themeVars } from '../env'
-import Controls from './Controls.vue'
-import SlideContainer from './SlideContainer.vue'
-import NavControls from './NavControls.vue'
-import SlidesShow from './SlidesShow.vue'
-import PrintStyle from './PrintStyle.vue'
+import { configs } from '../env'
+import Controls from '../internals/Controls.vue'
+import SlideContainer from '../internals/SlideContainer.vue'
+import NavControls from '../internals/NavControls.vue'
+import SlidesShow from '../internals/SlidesShow.vue'
+import PrintStyle from '../internals/PrintStyle.vue'
 
 registerShortcuts()
 
@@ -31,18 +31,21 @@ useSwipeControls(root)
 
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
-const Editor = shallowRef<any>()
+const SideEditor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
-  import('./Editor.vue').then(v => Editor.value = v.default)
+  import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
 
 const DrawingControls = shallowRef<any>()
 if (__SLIDEV_FEATURE_DRAWINGS__)
-  import('./DrawingControls.vue').then(v => DrawingControls.value = v.default)
+  import('../internals/DrawingControls.vue').then(v => DrawingControls.value = v.default)
 </script>
 
 <template>
   <PrintStyle v-if="isPrintMode" />
-  <div id="page-root" ref="root" class="grid" :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'" :style="themeVars">
+  <div
+    id="page-root" ref="root" class="grid"
+    :class="isEditorVertical ? 'grid-rows-[1fr_max-content]' : 'grid-cols-[1fr_max-content]'"
+  >
     <SlideContainer
       class="w-full h-full"
       :style="{ background: 'var(--slidev-slide-container-background, black)' }"
@@ -70,8 +73,8 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
       </template>
     </SlideContainer>
 
-    <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && Editor && showEditor">
-      <Editor :resize="true" />
+    <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor">
+      <SideEditor :resize="true" />
     </template>
   </div>
   <Controls />

package/{internals/PresenterPrint.vue → pages/presenter/print.vue}

@@ -2,9 +2,9 @@
 import { computed } from 'vue'
 import { useStyleTag } from '@vueuse/core'
 import { useHead } from '@unhead/vue'
-import { configs, themeVars } from '../env'
-import { rawRoutes, total } from '../logic/nav'
-import NoteDisplay from './NoteDisplay.vue'
+import { configs } from '../../env'
+import { rawRoutes, total } from '../../logic/nav'
+import NoteDisplay from '../../internals/NoteDisplay.vue'
 
 useStyleTag(`
 @page {
@@ -24,7 +24,9 @@ html #page-root {
 }
 `)
 
-useHead({ title: `Notes - ${configs.title}` })
+useHead({
+  title: `Notes - ${configs.title}`,
+})
 
 const slidesWithNote = computed(() => rawRoutes
   .map(route => route.meta?.slide)
@@ -32,7 +34,7 @@ const slidesWithNote = computed(() => rawRoutes
 </script>
 
 <template>
-  <div id="page-root" :style="themeVars">
+  <div id="page-root">
     <div class="m-4">
       <div class="mb-10">
         <h1 class="text-4xl font-bold mt-2">
@@ -54,9 +56,12 @@ const slidesWithNote = computed(() => rawRoutes
               <div class="flex-auto" />
             </div>
           </h2>
-          <NoteDisplay :note-html="slide!.noteHTML" class="max-w-full" />
+          <NoteDisplay
+            :note-html="slide!.noteHTML"
+            class="max-w-full"
+          />
         </div>
-        <hr v-if="index < slidesWithNote.length - 1" class="border-gray-400/50 mb-8">
+        <hr v-if="index < slidesWithNote.length - 1" class="border-main mb-8">
       </div>
     </div>
   </div>

package/{internals/Presenter.vue → pages/presenter.vue}

@@ -2,25 +2,26 @@
 import { useHead } from '@unhead/vue'
 import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
-import { clicksContext, currentPage, currentRoute, hasNext, nextRoute, queryClicks, rawRoutes, total, useSwipeControls } from '../logic/nav'
+import { clicksContext, currentPage, currentRoute, currentSlideId, hasNext, nextRoute, queryClicks, rawRoutes, total, useSwipeControls } from '../logic/nav'
 import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
-import { configs, themeVars } from '../env'
+import { configs } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
 import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
 import { isDrawing } from '../logic/drawings'
-import { useFixedClicks } from '../composables/useClicks'
-import SlideContainer from './SlideContainer.vue'
-import NavControls from './NavControls.vue'
-import SlidesOverview from './SlidesOverview.vue'
-import NoteEditor from './NoteEditor.vue'
-import NoteStatic from './NoteStatic.vue'
-import Goto from './Goto.vue'
-import SlidesShow from './SlidesShow.vue'
-import SlideWrapper from './SlideWrapper'
-import DrawingControls from './DrawingControls.vue'
-import IconButton from './IconButton.vue'
+import { useFixedClicks, usePrimaryClicks } from '../composables/useClicks'
+import SlideWrapper from '../internals/SlideWrapper'
+import SlideContainer from '../internals/SlideContainer.vue'
+import NavControls from '../internals/NavControls.vue'
+import QuickOverview from '../internals/QuickOverview.vue'
+import NoteEditable from '../internals/NoteEditable.vue'
+import NoteStatic from '../internals/NoteStatic.vue'
+import Goto from '../internals/Goto.vue'
+import SlidesShow from '../internals/SlidesShow.vue'
+import DrawingControls from '../internals/DrawingControls.vue'
+import IconButton from '../internals/IconButton.vue'
+import ClicksSlider from '../internals/ClicksSlider.vue'
 
 const main = ref<HTMLDivElement>()
 
@@ -45,16 +46,23 @@ const nextFrame = computed(() => {
   else
     return null
 })
+
 const nextFrameClicksCtx = computed(() => {
   return nextFrame.value && clicksCtxMap[+nextFrame.value[0].path - 1]
 })
-watch([currentRoute, queryClicks], () => {
-  nextFrameClicksCtx.value && (nextFrameClicksCtx.value[0].value = nextFrame.value![1])
-}, { immediate: true })
 
-const Editor = shallowRef<any>()
+watch(
+  [currentRoute, queryClicks],
+  () => {
+    if (nextFrameClicksCtx.value)
+      nextFrameClicksCtx.value.current = nextFrame.value![1]
+  },
+  { immediate: true },
+)
+
+const SideEditor = shallowRef<any>()
 if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
-  import('./Editor.vue').then(v => Editor.value = v.default)
+  import('../internals/SideEditor.vue').then(v => SideEditor.value = v.default)
 
 // sync presenter cursor
 onMounted(() => {
@@ -86,68 +94,64 @@ onMounted(() => {
 <template>
   <div class="bg-main h-full slidev-presenter">
     <div class="grid-container" :class="`layout${presenterLayout}`">
-      <div class="grid-section top flex">
-        <img src="../assets/logo-title-horizontal.png" class="ml-2 my-auto h-10 py-1 lg:h-14 lg:py-2" style="height: 3.5rem;" alt="Slidev logo">
-        <div class="flex-auto" />
-        <div
-          class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"
-          opacity="50 hover:100"
-          @click="resetTimer"
-        >
-          <carbon:time class="absolute" />
-          <carbon:renew class="absolute opacity-0" />
-        </div>
-        <div class="text-2xl pl-2 pr-6 my-auto tabular-nums">
-          {{ timer }}
-        </div>
-      </div>
-      <div ref="main" class="relative grid-section main flex flex-col p-2 lg:p-4" :style="themeVars">
+      <div ref="main" class="relative grid-section main flex flex-col">
         <SlideContainer
           key="main"
-          class="h-full w-full"
+          class="h-full w-full p-2 lg:p-4 flex-auto"
         >
           <template #default>
             <SlidesShow render-context="presenter" />
           </template>
         </SlideContainer>
-        <div class="context">
-          current
+        <ClicksSlider
+          :key="currentRoute?.path"
+          :clicks-context="usePrimaryClicks(currentRoute)"
+          class="w-full pb2 px4 flex-none"
+        />
+        <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
+          Current
         </div>
       </div>
-      <div class="relative grid-section next flex flex-col p-2 lg:p-4" :style="themeVars">
+      <div class="relative grid-section next flex flex-col p-2 lg:p-4">
         <SlideContainer
           v-if="nextFrame && nextFrameClicksCtx"
           key="next"
           class="h-full w-full"
         >
           <SlideWrapper
-            :is="nextFrame[0].component as any"
+            :is="(nextFrame[0].component as any)"
             :key="nextFrame[0].path"
-            :clicks-context="nextFrameClicksCtx[1]"
+            :clicks-context="nextFrameClicksCtx"
             :class="getSlideClass(nextFrame[0])"
             :route="nextFrame[0]"
             render-context="previewNext"
           />
         </SlideContainer>
-        <div class="context">
-          next
+        <div class="absolute left-0 top-0 bg-main border-b border-r border-main px2 py1 op50 text-sm">
+          Next
         </div>
       </div>
       <!-- Notes -->
-      <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && Editor && showEditor" class="grid-section note of-auto">
-        <Editor />
+      <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && SideEditor && showEditor" class="grid-section note of-auto">
+        <SideEditor />
       </div>
       <div v-else class="grid-section note grid grid-rows-[1fr_min-content] overflow-hidden">
-        <NoteEditor
+        <NoteEditable
           v-if="__DEV__"
+          :key="`edit-${currentSlideId}`"
+          v-model:editing="notesEditing"
+          :no="currentSlideId"
           class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
-          :editing="notesEditing"
+          :clicks-context="clicksContext"
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
         />
         <NoteStatic
           v-else
+          :key="`static-${currentSlideId}`"
+          :no="currentSlideId"
           class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
           :style="{ fontSize: `${presenterNotesFontSize}em` }"
+          :clicks-context="clicksContext"
         />
         <div class="border-t border-main py-1 px-2 text-sm">
           <IconButton title="Increase font size" @click="increasePresenterFontSize">
@@ -165,116 +169,120 @@ onMounted(() => {
           </IconButton>
         </div>
       </div>
-      <div class="grid-section bottom">
+      <div class="grid-section bottom flex">
         <NavControls :persist="true" />
+        <div flex-auto />
+        <div
+          class="timer-btn my-auto relative w-22px h-22px cursor-pointer text-lg"
+          opacity="50 hover:100"
+          @click="resetTimer"
+        >
+          <carbon:time class="absolute" />
+          <carbon:renew class="absolute opacity-0" />
+        </div>
+        <div class="text-2xl pl-2 pr-6 my-auto tabular-nums">
+          {{ timer }}
+        </div>
       </div>
       <DrawingControls v-if="__SLIDEV_FEATURE_DRAWINGS__" />
     </div>
     <div class="progress-bar">
       <div
-        class="progress h-2px bg-primary transition-all"
+        class="progress h-3px bg-primary transition-all"
         :style="{ width: `${(currentPage - 1) / (total - 1) * 100}%` }"
       />
     </div>
   </div>
   <Goto />
-  <SlidesOverview v-model="showOverview" />
+  <QuickOverview v-model="showOverview" />
 </template>
 
-<style lang="postcss" scoped>
+<style scoped>
 .slidev-presenter {
   --slidev-controls-foreground: current;
 }
 
-.timer-btn:hover {
-  & > :first-child {
-    @apply opacity-0;
-  }
-  & > :last-child {
-    @apply opacity-100;
-  }
+.timer-btn:hover > :first-child {
+  opacity: 0;
+}
+.timer-btn:hover > :last-child {
+  opacity: 1;
 }
 
 .section-title {
-  @apply px-4 py-2 text-xl;
+  --uno: px-4 py-2 text-xl;
 }
 
 .grid-container {
-  @apply h-full w-full bg-gray-400 bg-opacity-15;
+  --uno: bg-gray/20;
+  height: 100%;
+  width: 100%;
   display: grid;
   gap: 1px 1px;
 }
 
 .grid-container.layout1 {
   grid-template-columns: 1fr 1fr;
-  grid-template-rows: min-content 2fr 1fr min-content;
+  grid-template-rows: 2fr 1fr min-content;
   grid-template-areas:
-    "top top"
-    "main main"
-    "note next"
-    "bottom bottom";
+    'main main'
+    'note next'
+    'bottom bottom';
 }
 
 .grid-container.layout2 {
   grid-template-columns: 3fr 2fr;
-  grid-template-rows: min-content 2fr 1fr min-content;
+  grid-template-rows: 2fr 1fr min-content;
   grid-template-areas:
-    "top top"
-    "note main"
-    "note next"
-    "bottom bottom";
+    'note main'
+    'note next'
+    'bottom bottom';
 }
 
 @media (max-aspect-ratio: 3/5) {
   .grid-container.layout1 {
     grid-template-columns: 1fr;
-    grid-template-rows: min-content 1fr 1fr 1fr min-content;
+    grid-template-rows: 1fr 1fr 1fr min-content;
     grid-template-areas:
-      "top"
-      "main"
-      "note"
-      "next"
-      "bottom";
+      'main'
+      'note'
+      'next'
+      'bottom';
   }
 }
 
 @media (min-aspect-ratio: 1/1) {
   .grid-container.layout1 {
     grid-template-columns: 1fr 1.1fr 0.9fr;
-    grid-template-rows: min-content 1fr 2fr min-content;
+    grid-template-rows: 1fr 2fr min-content;
     grid-template-areas:
-      "top top top"
-      "main main next"
-      "main main note"
-      "bottom bottom bottom";
+      'main main next'
+      'main main note'
+      'bottom bottom bottom';
   }
 }
 
 .progress-bar {
-  @apply fixed left-0 right-0 bottom-0;
+  --uno: fixed left-0 right-0 top-0;
 }
 
 .grid-section {
-  @apply bg-main;
-
-  &.top {
-    grid-area: top;
-  }
-  &.main {
-    grid-area: main;
-  }
-  &.next {
-    grid-area: next;
-  }
-  &.note {
-    grid-area: note;
-  }
-  &.bottom {
-    grid-area: bottom;
-  }
+  --uno: bg-main;
 }
 
-.context {
-  @apply absolute top-0 left-0 px-1 text-xs bg-gray-400 bg-opacity-50 opacity-75 rounded-br-md;
+.grid-section.top {
+  grid-area: top;
+}
+.grid-section.main {
+  grid-area: main;
+}
+.grid-section.next {
+  grid-area: next;
+}
+.grid-section.note {
+  grid-area: note;
+}
+.grid-section.bottom {
+  grid-area: bottom;
 }
 </style>