Proof of concept of a table of contents page (#16)

* Proof of concept of a table of contents page A grid like the home page, but listing all the sections for each page. Helpful to dig deep. Just a concept page for now with minimal styling. Only accessible by knowing the link. * Moving table of contents to the home page Added a toggle to between chapter covers and table of contents. * Remove contents page since we now have that on the home page
GBKS · Sep 30, 2024 · e65cc39 · e65cc39
1 parent 0f291fb
commit e65cc39
Show file tree

Hide file tree

Showing 2 changed files with 185 additions and 4 deletions.
diff --git a/components/PageCardContent.vue b/components/PageCardContent.vue
@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+
+const props = defineProps([
+  'info',
+  'showContents'
+])
+
+</script>
+
+<template>
+  <div
+    class="page-card-content"
+    :key="info._path"
+  >
+    <div class="copy" data-color>
+      <p>{{ info.chapter }}</p>
+      <h2>
+        <NuxtLink
+          :to="info._path"
+        >{{ info.title }}</NuxtLink>
+      </h2>
+      <div class="contents">
+        <template v-for="item in info.body.children">
+          <NuxtLink
+            v-if="item.tag == 'h2'"
+            :to="info._path + '/#' + item.props.id" 
+            :class="'-' + item.tag" 
+          >{{ item.children[0].value }}</NuxtLink>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+.page-card-content {
+  position: relative;
+  text-decoration: none;
+  border-radius: 15px;
+  overflow: hidden;
+  background-color: #f8f8f8;
+  display: block;
+  transition: all 250ms $ease;
+
+  .copy {
+    position: relative;
+    padding: 20px;
+
+    p {
+      font-size: 15px;
+      font-weight: 600;
+    }
+
+    h2 {
+      margin-top: 2px;
+      font-size: 27px;
+      line-height: 1.2;
+      font-weight: 600;
+
+      a {
+        color: black;
+        text-decoration: none;
+        transition: all 100ms $ease;
+
+        &:hover {
+          color: var(--primary);
+        }
+      }
+    }
+  }
+
+  .contents {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+
+    a {
+      font-weight: 400;
+      line-height: 1.3;
+      @include r('font-size', 21, 15);
+      text-decoration: none;
+      color: black;
+      transition: all 100ms $ease;
+
+      &.-h2 {
+        padding: 5px 0;
+        line-height: 1.4;
+      }
+
+      &.-h3 {
+        display: none;
+        @include r('font-size', 21, 15);
+        @include r('padding-left', 10, 20);
+      }
+
+
+      &:hover {
+        color: var(--primary);
+      }
+    }
+  }
+}
+
+</style>
diff --git a/pages/index.vue b/pages/index.vue
@@ -3,6 +3,7 @@ const scrollPosition = ref(0)
 const isMobile = ref(false)
 const route = useRoute()
 const searchActive = ref(false)
+const showContents = ref(false)
 
 useHead({
     title: 'Open Design Guide',
@@ -67,8 +68,21 @@ onBeforeUnmount(() => {
 
             <p class="-note">This is a total work-in-progress and the content is currently pretty much 100% AI generated and needs a ton of work. <a href="https://github.com/GBKS/opendesign.guide" target="_blank">File issues</a>, join our <a href="https://github.com/BitcoinDesign/Meta/issues?q=is%3Aissue+is%3Aopen+%22Open+Design+Guide%22" target="_blank">reading club</a>, and <a href="https://github.com/BitcoinDesign/Meta/issues/696" target="_blank">learn more</a>.</p>
         </header>
+        <button
+            :class="'content-toggle' + (showContents ? ' -active' : '')"
+            :aria-selected="showContents"
+            aria-label="Toggle content view"
+            @click="showContents = !showContents"
+        >
+            <p>Covers</p>
+            <p>Content</p>
+        </button>
         <div class="page-cards">
-            <ContentList path="/" v-slot="{ list }">
+            <ContentList
+                v-if="!showContents"
+                path="/" 
+                v-slot="{ list }"
+            >
                 <PageCard
                     v-for="article in list" 
                     :key="article._path"
@@ -77,6 +91,18 @@ onBeforeUnmount(() => {
                     :isMobile="isMobile"
                 />
             </ContentList>
+            <ContentList
+                v-if="showContents"
+                path="/" 
+                v-slot="{ list }"
+            >
+                <PageCardContent
+                    v-for="article in list" 
+                    :key="article._path"
+                    :info="article"
+                    :isMobile="isMobile"
+                />
+            </ContentList>
         </div>
         <SearchButton
             :active="searchActive"
@@ -96,7 +122,7 @@ onBeforeUnmount(() => {
     flex-direction: column;
     align-items: center;
     padding: 75px 20px;
-    gap: 75px;
+    gap: 50px;
 
     header {
         max-width: 980px;
@@ -117,12 +143,61 @@ onBeforeUnmount(() => {
 
             &.-note {
                 margin-top: 20px;
-                color: #859B63;
+                color: #1CB3CB;
                 @include r('font-size', 17, 19);
                 font-weight: 600;
 
                 a {
-                    color: #859B63;
+                    color: #1CB3CB;
+                }
+            }
+        }
+    }
+
+    .content-toggle {
+        display: flex;
+        border-radius: 15px;
+        background-color: #f8f8f8;
+        cursor: pointer;
+        transition: all 250ms $ease;
+
+        p {
+            font-weight: 600;
+            color: #808080;
+            @include r('font-size', 13, 15);
+            padding: 5px 25px;
+
+            &:first-child {
+                background-color: #1CB3CB;
+                color: white;
+                border-top-left-radius: 15px;
+                border-bottom-left-radius: 15px;
+            }
+
+            &:last-child {
+                border-top-right-radius: 15px;
+                border-bottom-right-radius: 15px;
+
+                &:hover {
+                    color:#1CB3CB;
+                }
+            }
+        }
+
+        &.-active {
+            p {
+                &:first-child {
+                    background-color: transparent;
+                    color: #808080;
+
+                    &:hover {
+                        color:#1CB3CB;
+                    }
+                }
+
+                &:last-child {
+                    background-color: #1CB3CB;
+                    color: white;
                 }
             }
         }