kmcom-nuxt-layers 1.6.33 → 1.6.35

package/layers/content/app/app.config.ts

@@ -1,3 +1,9 @@
-export default {
-  contentLayer: {},
-}
+export default defineAppConfig({
+  contentLayer: {
+    sections: {
+      blog: true as boolean,
+      portfolio: true as boolean,
+      gallery: true as boolean,
+    },
+  },
+})

package/layers/content/app/composables/createPortfolioComposables.ts

@@ -0,0 +1,32 @@
+// @ts-nocheck
+import type { PortfolioQueryOptions } from '../types/content'
+
+export function createPortfolioComposables(collectionName: string) {
+  function useItems(options: PortfolioQueryOptions = {}) {
+    const { featured, tags, limit } = options
+
+    return useContentData(`${collectionName}-items`, async () => {
+      let items = await queryCollection(collectionName).order('year', 'DESC').all()
+
+      if (featured !== undefined) {
+        items = items.filter((item) => item.featured === featured)
+      }
+
+      if (tags?.length) {
+        items = items.filter((item) => item.tags?.some((tag: string) => tags.includes(tag)))
+      }
+
+      if (limit) {
+        items = items.slice(0, limit)
+      }
+
+      return items
+    })
+  }
+
+  function useItem(slug: string) {
+    return useCollectionItem(collectionName, slug)
+  }
+
+  return { useItems, useItem }
+}

package/layers/content/app/pages/blog/[slug].vue

@@ -1,12 +1,19 @@
 <script setup lang="ts">
-definePageMeta({ name: 'content-blog-slug' })
+  definePageMeta({ name: 'content-blog-slug' })
 
-const route = useRoute()
-const slug = route.params.slug as string
+  const { contentLayer } = useAppConfig()
+  if (contentLayer?.sections?.blog === false) {
+    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+  }
+
+  const route = useRoute()
+  const slug = route.params.slug as string
 </script>
 
 <template>
-  <UContainer>
-    <BlogArticle :slug="slug" />
-  </UContainer>
+  <LayoutSection>
+    <LayoutGridItem>
+      <BlogArticle :slug="slug" />
+    </LayoutGridItem>
+  </LayoutSection>
 </template>

package/layers/content/app/pages/blog/index.vue

@@ -1,15 +1,22 @@
 <script setup lang="ts">
-useSeoMeta({
-  title: 'Blog',
-  description: 'Latest articles and updates',
-})
+  const { contentLayer } = useAppConfig()
+  if (contentLayer?.sections?.blog === false) {
+    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+  }
+
+  useSeoMeta({
+    title: 'Blog',
+    description: 'Latest articles and updates',
+  })
 </script>
 
 <template>
-  <UContainer>
-    <UPageHeader title="Blog" description="Latest articles and updates" />
-    <UPageBody>
-      <BlogList />
-    </UPageBody>
-  </UContainer>
+  <LayoutSection>
+    <LayoutGridItem>
+      <UPageHeader title="Blog" description="Latest articles and updates" />
+      <UPageBody>
+        <BlogList />
+      </UPageBody>
+    </LayoutGridItem>
+  </LayoutSection>
 </template>

package/layers/content/app/pages/gallery/[slug]/[imageId].vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
-const route = useRoute()
-const slug = route.params.slug as string
-const index = Number(route.params.imageId)
+  const { contentLayer } = useAppConfig()
+  if (contentLayer?.sections?.gallery === false) {
+    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+  }
+
+  const route = useRoute()
+  const slug = route.params.slug as string
+  const index = Number(route.params.imageId)
 </script>
 
 <template>
-  <UContainer>
-    <GalleryImageDetail :slug="slug" :index="index" />
-  </UContainer>
+  <LayoutSection>
+    <LayoutGridItem>
+      <GalleryImageDetail :slug="slug" :index="index" />
+    </LayoutGridItem>
+  </LayoutSection>
 </template>

package/layers/content/app/pages/gallery/[slug]/index.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
-const route = useRoute()
-const slug = route.params.slug as string
+  const { contentLayer } = useAppConfig()
+  if (contentLayer?.sections?.gallery === false) {
+    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+  }
+
+  const route = useRoute()
+  const slug = route.params.slug as string
 </script>
 
 <template>
-  <UContainer>
-    <GalleryDetail :slug="slug" />
-  </UContainer>
+  <LayoutSection>
+    <LayoutGridItem>
+      <GalleryDetail :slug="slug" />
+    </LayoutGridItem>
+  </LayoutSection>
 </template>

package/layers/content/app/pages/gallery/index.vue

@@ -1,15 +1,22 @@
 <script setup lang="ts">
-useSeoMeta({
-  title: 'Gallery',
-  description: 'Photo collections and visual work',
-})
+  const { contentLayer } = useAppConfig()
+  if (contentLayer?.sections?.gallery === false) {
+    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+  }
+
+  useSeoMeta({
+    title: 'Gallery',
+    description: 'Photo collections and visual work',
+  })
 </script>
 
 <template>
-  <UContainer>
-    <UPageHeader title="Gallery" description="Photo collections and visual work" />
-    <UPageBody>
-      <GalleryGrid />
-    </UPageBody>
-  </UContainer>
+  <LayoutSection>
+    <LayoutGridItem>
+      <UPageHeader title="Gallery" description="Photo collections and visual work" />
+      <UPageBody>
+        <GalleryGrid />
+      </UPageBody>
+    </LayoutGridItem>
+  </LayoutSection>
 </template>

package/layers/content/app/pages/portfolio/[slug].vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
-const route = useRoute()
-const slug = route.params.slug as string
+  const { contentLayer } = useAppConfig()
+  if (contentLayer?.sections?.portfolio === false) {
+    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+  }
+
+  const route = useRoute()
+  const slug = route.params.slug as string
 </script>
 
 <template>
-  <UContainer>
-    <PortfolioDetail :slug="slug" />
-  </UContainer>
+  <LayoutSection>
+    <LayoutGridItem>
+      <PortfolioDetail :slug="slug" />
+    </LayoutGridItem>
+  </LayoutSection>
 </template>

package/layers/content/app/pages/portfolio/index.vue

@@ -1,15 +1,22 @@
 <script setup lang="ts">
-useSeoMeta({
-  title: 'Portfolio',
-  description: 'Featured projects and work',
-})
+  const { contentLayer } = useAppConfig()
+  if (contentLayer?.sections?.portfolio === false) {
+    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+  }
+
+  useSeoMeta({
+    title: 'Portfolio',
+    description: 'Featured projects and work',
+  })
 </script>
 
 <template>
-  <UContainer>
-    <UPageHeader title="Portfolio" description="Featured projects and work" />
-    <UPageBody>
-      <PortfolioList />
-    </UPageBody>
-  </UContainer>
+  <LayoutSection>
+    <LayoutGridItem>
+      <UPageHeader title="Portfolio" description="Featured projects and work" />
+      <UPageBody>
+        <PortfolioList />
+      </UPageBody>
+    </LayoutGridItem>
+  </LayoutSection>
 </template>

package/layers/content/app/types/app-config.d.ts

@@ -2,6 +2,11 @@ declare module '@nuxt/schema' {
   interface AppConfigInput {
     contentLayer?: {
       name?: string
+      sections?: {
+        blog?: boolean
+        portfolio?: boolean
+        gallery?: boolean
+      }
     }
   }
 }

package/layers/layout/app/components/Layout/Main.vue

@@ -27,7 +27,11 @@ const { mode } = useGridConfig()
 </script>
 
 <template>
-  <component :is="tag" :class="mode !== 'disabled' ? 'mastmain' : undefined">
+  <component
+    :is="tag"
+    :class="mode !== 'disabled' ? 'mastmain' : undefined"
+    :style="mode !== 'disabled' ? { paddingInline: 'var(--grid-padding, clamp(1rem, 2.5vw, 2rem))' } : undefined"
+  >
     <slot />
   </component>
 </template>

package/layers/layout/app/components/Layout/Section/index.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-/**
- * BaseSection - Full-viewport section using subgrid
- *
- * Inherits the parent MastMain's 18-column grid lines using CSS subgrid.
- * Spans 12 rows (1 viewport height) for full-screen sections.
- * Child GridItem elements position themselves on these inherited grid lines.
- *
- * @prop {boolean} fullHeight - Optional min-height safety net
- * @prop {boolean} fullWidth - Break outside the grid gutters for edge-to-edge content
- */
-interface Props {
-  fullHeight?: boolean
-  fullWidth?: boolean
-}
+  /**
+   * BaseSection - Full-viewport section using subgrid
+   *
+   * Inherits the parent MastMain's 18-column grid lines using CSS subgrid.
+   * Spans 12 rows (1 viewport height) for full-screen sections.
+   * Child GridItem elements position themselves on these inherited grid lines.
+   *
+   * @prop {boolean} fullHeight - Optional min-height safety net
+   * @prop {boolean} fullWidth - Break outside the grid gutters for edge-to-edge content
+   */
+  interface Props {
+    fullHeight?: boolean
+    fullWidth?: boolean
+  }
 
-const { fullHeight = false, fullWidth = false } = defineProps<Props>()
+  const { fullHeight = false, fullWidth = false } = defineProps<Props>()
 </script>
 
 <template>
@@ -24,13 +24,13 @@ const { fullHeight = false, fullWidth = false } = defineProps<Props>()
 </template>
 
 <style scoped>
-.section-bleed {
-  --bleed: var(--grid-padding, clamp(1rem, 2.5vw, 2rem));
-  --gap: var(--grid-gap, clamp(0.75rem, 1.5vw, 1.5rem));
+  .section-bleed {
+    --bleed: var(--grid-padding, clamp(1rem, 2.5vw, 2rem));
+    --gap: var(--grid-gap, clamp(0.75rem, 1.5vw, 1.5rem));
 
-  margin-inline: calc(-1 * var(--bleed));
-  margin-block: calc(-0.5 * var(--gap));
-  width: calc(100% + 2 * var(--bleed));
-  max-width: none;
-}
+    margin-inline: calc(-1 * var(--bleed));
+    margin-block: calc(-0.5 * var(--gap));
+    width: calc(100% + 2 * var(--bleed));
+    max-width: none;
+  }
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "1.6.33",
+  "version": "1.6.35",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "files": [
     "layers/*/nuxt.config.ts",
@@ -97,7 +97,7 @@
     "@eslint/json": "^1.2.0",
     "@eslint/markdown": "^8.0.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
-    "@iconify-json/lucide": "^1.2.105",
+    "@iconify-json/lucide": "^1.2.107",
     "@netlify/nuxt": "0.3.1",
     "@nuxt/eslint": "^1.15.2",
     "@nuxt/fonts": "^0.14.0",
@@ -107,8 +107,8 @@
     "@perplex-digital/stylelint-config": "^17.4.0",
     "@pinia/nuxt": "^0.11.3",
     "@types/node": "^25.6.0",
-    "@typescript-eslint/eslint-plugin": "^8.59.2",
-    "@typescript-eslint/parser": "^8.59.2",
+    "@typescript-eslint/eslint-plugin": "^8.59.3",
+    "@typescript-eslint/parser": "^8.59.3",
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vueuse/core": "^14.3.0",
     "@vueuse/nuxt": "^14.3.0",
@@ -144,12 +144,12 @@
     "stylelint-no-unsupported-browser-features": "^8.1.1",
     "stylelint-prettier": "^5.0.3",
     "tailwindcss": "^4.2.4",
-    "turbo": "^2.9.12",
+    "turbo": "^2.9.14",
     "typescript": "^6.0.3",
     "vite-plugin-checker": "^0.13.0",
-    "vitest": "^4.1.5",
+    "vitest": "^4.1.6",
     "vue": "latest",
-    "vue-tsc": "^3.2.8",
+    "vue-tsc": "^3.2.9",
     "zod": "^4.4.3",
     "zod-to-json-schema": "^3.25.2"
   },