feat: refactor NqCard and NqGrid components, update styles, and improve layout structure

Author: onmax

docs/vitepress-theme/components/card.md

@@ -17,7 +17,7 @@ A simple card that can turn any boring content into something that looks intenti
 The component also supports using slots for custom content instead of props.
 
 > [!TIP]
-> Remember to [register `NqCard`](/vitepress-theme/#register-the-components) in your app. It's like introducing your components to a party - they need to be on the guest list!
+> Remember to [register `NqCard`](/vitepress-theme/#register-the-components) in your app.
 
 ## Examples
 
@@ -74,21 +74,3 @@ The component also supports using slots for custom content instead of props.
 />
 
 </ComponentPreview>
-
-## With Markdown Content
-
-<ComponentPreview lang="vue">
-
-<NqCard>
-
-### The Markdown Card
-
-I'm a card with markdown content. I can be used to display formatted text, lists, and even images!
-
-- Item 1
-- Item 2
-- Item 3
-
-</NqCard>
-
-</ComponentPreview>

packages/nimiq-css/src/css/utilities.css

@@ -5,11 +5,6 @@
   color: rgba(var(--nq-neutral-800));
 }
 
-.nq-basic {
-  font-size: 12px;
-  color: pink;
-}
-
 .nq-label {
   text-transform: uppercase;
   letter-spacing: 0.17em;
@@ -655,7 +650,7 @@
   background-image: radial-gradient(at 100% 100%, var(--nq-gradient-from) 0%, var(--nq-gradient-to) 100%);
   color: rgb(var(--nq-neutral));
   border-radius: 0.5rem;
-  outline: 1.5px solid rgb(var(--nq-neutral) / 0.06);
+  outline: 1.5px solid rgb(var(--nq-neutral) / 0.04);
   outline-offset: -1.5px;
   display: flex;
   flex-direction: column;

packages/nimiq-vitepress-theme/src/assets/typography.css

@@ -1,5 +1,5 @@
 .nq-prose {
-  h1:not(.vp-raw *) {
+  h1:not(.nq-raw *) {
     --font-size-min: 32;
     --font-size-max: 40;
     margin-bottom: 1.5rem;
@@ -16,23 +16,23 @@
     }
   }
 
-  h2:not(.vp-raw *) {
+  h2:not(.nq-raw *) {
     --font-size-min: 28;
     --font-size-max: 32;
     margin-bottom: 1rem;
     margin-top: 3rem;
     font-weight: 600;
   }
 
-  h3:not(.vp-raw *) {
+  h3:not(.nq-raw *) {
     --font-size-min: 20;
     --font-size-max: 24;
     margin-bottom: 1rem;
     margin-top: 2.5rem;
     font-weight: 600;
   }
 
-  h4:not(.vp-raw *) {
+  h4:not(.nq-raw *) {
     --font-size-min: 16;
     --font-size-max: 20;
     margin-bottom: 1rem;

packages/nimiq-vitepress-theme/src/components/NqCard.vue

@@ -1,9 +1,4 @@
 <script lang="ts">
-</script>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
 export type CardColor = 'green' | 'blue' | 'red' | 'gold' | 'orange'
 export interface NqCardProps {
   icon?: string
@@ -13,6 +8,10 @@ export interface NqCardProps {
   description?: string
   label?: string
 }
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
 
 const { bgColor, icon, href } = defineProps<NqCardProps>()
 
@@ -23,44 +22,20 @@ const colors: Partial<Record<CardColor, string>> = { blue: '#0E65C9', green: '#1
 
 <template>
   <component
-    :is="hasLink ? 'a' : 'div'" :href group :data-inverted="bgColor ? '' : undefined" class="nq-raw"
-    f-mt-md relative :style="`background-image: ${bgColor ? `var(--nq-${bgColor}-gradient)` : ''}`" :data-card="bgColor ? 'colored' : 'default'"
+    :is="hasLink ? 'a' : 'div'"
+    :href class="nq-raw" group relative
+    :style="`background-image: ${bgColor ? `var(--nq-${bgColor}-gradient)` : ''}`"
+    :data-inverted="bgColor ? '' : undefined"
+    :data-card="bgColor ? 'colored' : 'default'"
     :target="hasLink && href?.startsWith('http') ? '_blank' : undefined"
-    :class="{ 'nq-hoverable': hasLink, 'nq-card': !hasLink, 'children:max-w-[max(50%,240px)]': bgColor, 'bg-neutral-300': !bgColor }"
+    :class="[
+      hasLink ? 'nq-hoverable' : 'nq-card',
+      { 'children:max-w-[max(50%,240px)]' : bgColor }
+    ]"
   >
     <div v-if="icon" :class="icon" f-size="~ max-160 min-120" absolute right--12 :style="`color: ${colors[bgColor!]}`" />
-    <slot>
-      <span nq-label>{{ label }}</span>
-      <h2>{{ title }}</h2>
-      <p>{{ description }}</p>
-    </slot>
+      <span nq-label text-12 mb-4 text="neutral-700 data-inverted:white/50" data-inverted:mb-8>{{ label }}</span>
+      <h2 font-semibold f-text="xl data-inverted:2xl" data-inverted:text-white>{{ title }}</h2>
+      <p text="data-inverted:white/60" data-inverted:f-text-lg data-inverted:mt-4>{{ description }}</p>
   </component>
 </template>
-
-<style>
-@layer nq-vp {
-  [data-card] {
-    .nq-label {
-      --uno: 'text-12 mb-4 text-neutral-700';
-    }
-
-    :where(h2, h3, h4, h5, h6):not(.nq-label) {
-      --uno: 'font-semibold f-text-xl ';
-    }
-
-    [data-inverted] * {
-      &.nq-label {
-        --uno: 'text-white/50 mb-8';
-      }
-
-      &:where(h2, h3, h4, h5, h6):not(.nq-label) {
-        --uno: 'text-white f-text-2xl';
-      }
-
-      &:where(p) {
-        --uno: 'text-white/60 f-text-lg f-mt-4';
-      }
-    }
-  }
-}
-</style>

packages/nimiq-vitepress-theme/src/components/NqGrid.vue

@@ -9,43 +9,40 @@ const { cards } = defineProps<{ cards?: NqCardInGrid[] }>()
 function getSpan({ span, bgColor }: NqCardInGrid): CardSpan | undefined {
   if (span === undefined && bgColor)
     return 'half'
-  return span
+  return span || 'default'
 }
 </script>
 
 <template>
   <ul grid="~ cols-6 gap-16" class="nq-grid nq-raw">
     <slot>
-      <li v-for="(card, index) in cards" :key="index" data-card="default" :data-span="getSpan(card)">
+      <li v-for="(card, index) in cards" :key="index" :data-span="getSpan(card)">
         <NqCard v-bind="card" />
       </li>
     </slot>
   </ul>
 </template>
 
-<style>
-.nq-grid {
-  [data-card='colored'] {
-    --uno: 'col-span-3';
+<style scoped>
+ul.nq-grid {
+  [data-span='full'] {
+    --uno: 'col-span-6';
   }
 
-  [data-card='default'] {
-    --uno: 'col-span-2';
+  [data-span='half'] {
+    --uno: 'col-span-3';
   }
 
-  [data-card='half'] {
+  [data-span='default'] {
     --uno: 'col-span-2';
   }
 
-  [data-card][data-span='full'] {
-    --uno: 'col-span-6';
+  li {
+    --uno: 'mt-0 flex';
   }
+}
 
-  [data-card][data-span='half'] {
-    --uno: 'col-span-3';
-  }
-  [data-card] {
-    --uno: 'mt-0';
-  }
+:global(ul.nq-grid li > *) {
+  --uno: 'flex-1';
 }
 </style>

packages/nimiq-vitepress-theme/src/components/NqLargeCard.vue

@@ -13,25 +13,15 @@ const hasLink = computed(() => !!href)
 
 <template>
   <component
-    :is="hasLink ? 'a' : 'div'" :href group class="nq-raw" data-card="large"
-    f-mt-md bg-neutral-300 relative flex="~ items-center col justify-center" f-p-xl
+    :is="hasLink ? 'a' : 'div'"
+    :href class="nq-raw" group bg-neutral-300 relative f-p-xl
+    flex="~ items-center col justify-center"
+    data-card="large"
     :target="hasLink && href?.startsWith('http') ? '_blank' : undefined"
     :class="{ 'nq-hoverable': hasLink, 'nq-card': !hasLink }"
   >
     <div :class="icon" f-size="~ max-64 min-80" mx-auto f-mb-lg op="70 group-hocus:100" transition-opacity />
-    <slot>
-      <h2>{{ title }}</h2>
-      <p>{{ description }}</p>
-    </slot>
+      <h2 font-semibold f-text-2xl text-center>{{ title }}</h2>
+      <p f-text-lg text-center text-neutral-800 f-mt-xs>{{ description }}</p>
   </component>
 </template>
-
-<style scoped>
-:deep(:where(h2, h3, h4, h5, h6):not(.nq-label)) {
-  --uno: 'font-semibold f-text-2xl text-center';
-}
-
-:deep(p) {
-  --uno: 'f-text-lg text-center text-neutral-800 f-mt-xs';
-}
-</style>

packages/nimiq-vitepress-theme/src/layout/Layout.vue

@@ -12,23 +12,28 @@ const showSidebar = computed(() =>
 </script>
 
 <template>
-  <div flex="~" w-full>
+  <div class="flex" id="viewport">
     <!-- TODO Add skip -->
-    <Sidebar v-if="showSidebar" max-w="$nq-sidebar-width" data-sidebar />
+    <Sidebar v-if="showSidebar" />
 
-    <main flex-1 min-h-screen ml="$nq-sidebar-width" max-w="[calc(100vw-var(--nq-sidebar-width))]">
+    <main class="min-h-screen">
       <PageContent />
     </main>
   </div>
 </template>
 
 <style>
-@propery --nq-sidebar-width {
-  syntax: '<length>';
-  initial-value: 0px;
+:root {
+  --nq-sidebar-width: 288px;
 }
 
-:root:has(sidebar[data-sidebar]) {
-  --nq-sidebar-width: 288px;
+aside {
+  width: var(--nq-sidebar-width);
+  flex-shrink: 0;
+}
+
+main {
+  flex: 1;
+  margin-left: var(--nq-sidebar-width);
 }
 </style>

packages/nimiq-vitepress-theme/src/layout/PageContent.vue

@@ -5,13 +5,13 @@ import type { NimiqVitepressThemeConfig } from '../types'
 import { useTimeAgo } from '@vueuse/core'
 import { useData, useRoute } from 'vitepress'
 import { computed, onMounted, ref, watch } from 'vue'
-import { useOutline } from '../composables/useOutline'
+import SecondarySidebar from './SecondarySidebar.vue'
 import { data } from '../lib/git.data'
 import '../assets/code-blocks.css'
 import '../assets/typography.css'
 import '../assets/github-callouts.css'
 
-const { theme, lang, frontmatter } = useData<NimiqVitepressThemeConfig>()
+const { theme, lang } = useData<NimiqVitepressThemeConfig>()
 
 const route = useRoute()
 
@@ -41,28 +41,6 @@ onMounted(() => {
 
 const showEditContent = computed(() => theme.value.showEditContent !== false)
 const showLastUpdated = computed(() => theme.value.showLastUpdated !== false)
-
-const { headingTree, isHeadingActive } = useOutline()
-
-const showOutline = computed(() => {
-  // Explicit setting in frontmatter takes precedence
-  if (frontmatter.value.outline !== undefined)
-    return !!frontmatter.value.outline
-  // Default: show if there are headings
-  return headingTree.value.length > 0
-})
-
-const showWidget = computed(() =>
-  frontmatter.value.widget !== false,
-)
-
-const showSecondarySidebar = computed(() => {
-  // Explicit setting in frontmatter takes precedence
-  if (frontmatter.value.secondarySidebar !== undefined)
-    return !!frontmatter.value.secondarySidebar
-  // Default: show if there's content to display
-  return showOutline.value || showWidget.value
-})
 </script>
 
 <template>
@@ -97,26 +75,6 @@ const showSecondarySidebar = computed(() => {
         </p>
       </div>
     </div>
-    <div v-if="showSecondarySidebar" f-text-xs sticky f="$h $h-min-60 $h-max-90" h="[calc(100vh-var(--f-h))]" f-top-xl f-px-sm w="[calc(var(--nq-sidebar-width)+24px)]" of-y-auto f-pb-xs>
-      <div v-if="showOutline" text-neutral-700 flex="~ gap-8 items-center">
-        <div i-tabler:align-left />
-        On this page
-      </div>
-      <ol v-if="showOutline" list-none f-mt-xs text-neutral-800 w-max>
-        <li v-for="h2 in headingTree" :key="h2.hashPath" flex="~ col" pb-4>
-          <a :href="`#${h2.hashPath}`" px-6 py-4 :class="{ 'text-blue font-semibold': isHeadingActive(h2.hashPath) }">{{ h2.text
-          }}</a>
-          <ol v-if="h2.items.length">
-            <li v-for="h3 in h2.items" :key="h3.hashPath" flex="~ col">
-              <a
-                :href="`#${h3.hashPath}`" font-normal p-4 pl-14
-                :class="{ 'text-blue font-semibold': isHeadingActive(h3.hashPath) }"
-              >{{ h3.text }}</a>
-            </li>
-          </ol>
-        </li>
-      </ol>
-      <div v-if="showWidget" id="widget" max-w-full :class="{ 'f-mt-md': showOutline }" h-full />
-    </div>
+    <SecondarySidebar />
   </div>
 </template>