@markuxt/markuxt 0.1.4

package/src/components/PublicationCard.vue

@@ -0,0 +1,245 @@
+<template>
+  <article class="publication-card">
+    <div class="publication-card__meta">
+      <span class="publication-card__year">{{ publication.year }}</span>
+      <span v-if="publication.venue" class="badge badge-accent">{{ publication.venue }}</span>
+    </div>
+    <h3 class="publication-card__title">
+      <!-- If there's a detail page (_path), link to it; otherwise show plain title or DOI link -->
+      <NuxtLink v-if="publication._path" :to="publication._path" class="publication-card__title-link">
+        {{ publication.title }}
+      </NuxtLink>
+      <a v-else-if="publication.doi" :href="publication.doi" target="_blank" rel="noopener" class="publication-card__title-link">
+        {{ publication.title }}
+      </a>
+      <span v-else class="publication-card__title-text">{{ publication.title }}</span>
+    </h3>
+    <p class="publication-card__authors">{{ formattedAuthors }}</p>
+    <p class="publication-card__abstract" v-if="publication.abstract">{{ truncatedAbstract }}</p>
+    <div class="publication-card__footer">
+      <div class="publication-card__keywords">
+        <span
+          v-for="(keyword, index) in displayedKeywords"
+          :key="index"
+          class="publication-card__keyword"
+        >
+          {{ keyword }}
+        </span>
+        <span v-if="moreKeywords" class="publication-card__keyword-more">+{{ moreKeywords }}</span>
+      </div>
+      <!-- Only show DOI link if there's NO detail page -->
+      <a
+        v-if="publication.doi && !publication._path"
+        :href="publication.doi"
+        target="_blank"
+        rel="noopener"
+        class="publication-card__link"
+        :aria-label="t('publications.viewPublication')"
+      >
+        <LinkOut class="icon-inline" theme="outline" :size="16" fill="currentColor" :stroke-width="2" />
+      </a>
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import LinkOut from '@icon-park/vue-next/es/icons/LinkOut'
+
+interface Publication {
+  title: string
+  authors: string[]
+  year: number
+  doi?: string
+  venue?: string
+  keywords?: string[]
+  abstract?: string
+  _path?: string
+}
+
+interface Props {
+  publication: Publication
+}
+
+const props = defineProps<Props>()
+
+const { t } = useI18n()
+
+const formattedAuthors = computed(() => {
+  const authors = props.publication.authors
+  if (authors.length <= 2) return authors.join(t('publications.authorSep'))
+  return authors.slice(0, authors.length - 1).join(', ') + ', ' + t('publications.authorSep') + authors[authors.length - 1]
+})
+
+const truncatedAbstract = computed(() => {
+  if (!props.publication.abstract) return ''
+  const abstract = props.publication.abstract
+  return abstract.length > 200 ? abstract.slice(0, 200) + t('publications.truncation') : abstract
+})
+
+const displayedKeywords = computed(() => {
+  if (!props.publication.keywords) return []
+  return props.publication.keywords.slice(0, 3)
+})
+
+const moreKeywords = computed(() => {
+  if (!props.publication.keywords) return 0
+  const remaining = props.publication.keywords.length - 3
+  return remaining > 0 ? t('publications.moreKeywords', { n: remaining }) : ''
+})
+</script>
+
+<style scoped>
+.publication-card {
+  background: var(--color-bg-alt);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-xl);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-md);
+  transition: all var(--transition-base);
+  display: block;
+  text-decoration: none;
+}
+
+.publication-card:hover {
+  box-shadow: var(--shadow-lg);
+  border-color: var(--color-secondary);
+  transform: translateY(-4px);
+}
+
+.publication-card__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-md);
+}
+
+.publication-card__year {
+  font-family: var(--font-display);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  letter-spacing: 0.05em;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  border-radius: var(--radius-sm);
+}
+
+.badge-accent {
+  background: var(--color-accent);
+  color: white;
+}
+
+.publication-card__title {
+  font-family: var(--font-display);
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--color-primary);
+  margin-bottom: var(--spacing-sm);
+}
+
+.publication-card__title-link {
+  color: var(--color-secondary);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+  display: block;
+}
+
+.publication-card__title-link:hover {
+  color: var(--color-accent);
+  text-decoration: underline;
+}
+
+.publication-card__title-text {
+  color: var(--color-primary);
+}
+
+.publication-card__authors {
+  font-size: 0.9375rem;
+  color: var(--color-text-muted);
+  line-height: 1.5;
+  margin-bottom: var(--spacing-md);
+}
+
+.publication-card__abstract {
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  color: var(--color-text);
+  line-height: 1.6;
+}
+
+.publication-card__footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-lg);
+}
+
+.publication-card__keywords {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+}
+
+.publication-card__keyword {
+  display: inline-flex;
+  padding: var(--spacing-xs) var(--spacing-md);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-text);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+}
+
+.publication-card__keyword:hover {
+  background: var(--color-secondary);
+  color: white;
+}
+
+.publication-card__keyword-more {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--spacing-xs) var(--spacing-md);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-text);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+}
+
+.publication-card__keyword-more:hover {
+  background: var(--color-secondary);
+  color: white;
+}
+
+.publication-card__link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: var(--color-bg-alt);
+  border-radius: var(--radius-full);
+  color: var(--color-primary);
+  transition: all var(--transition-fast);
+}
+
+.publication-card__link:hover {
+  background: var(--color-secondary);
+  color: white;
+  transform: scale(1.1);
+}
+</style>

package/src/components/SectionTitle.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="section-title" :class="`section-title--${align}`">
+    <span class="section-title__overline" v-if="overline">{{ overline }}</span>
+    <h2 class="section-title__title">{{ title }}</h2>
+    <p class="section-title__description" v-if="description">
+      {{ description }}
+    </p>
+    <div class="section-title__line"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title: string
+  overline?: string
+  description?: string
+  align?: 'left' | 'center'
+}
+
+withDefaults(defineProps<Props>(), {
+  align: 'left'
+})
+</script>
+
+<style scoped>
+.section-title {
+  margin-bottom: var(--spacing-2xl);
+}
+
+.section-title--center {
+  text-align: center;
+}
+
+.section-title--center .section-title__line {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.section-title__overline {
+  display: inline-block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-secondary);
+  margin-bottom: var(--spacing-sm);
+}
+
+.section-title__title {
+  font-family: var(--font-display);
+  font-size: clamp(2rem, 4vw, 2.5rem);
+  font-weight: 700;
+  color: var(--color-primary);
+  margin-bottom: var(--spacing-sm);
+}
+
+.section-title__description {
+  font-size: 1.125rem;
+  color: var(--color-text-muted);
+  max-width: 600px;
+}
+
+.section-title--center .section-title__description {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.section-title__line {
+  width: 60px;
+  height: 4px;
+  background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
+  border-radius: 2px;
+  margin-top: var(--spacing-md);
+}
+</style>

package/src/components/content/ProseImg.vue

@@ -0,0 +1,29 @@
+<template>
+  <img :src="refinedSrc" :alt="alt" :width="width" :height="height" />
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  src: { type: String, default: '' },
+  alt: { type: String, default: '' },
+  width: { type: [String, Number], default: undefined },
+  height: { type: [String, Number], default: undefined }
+})
+
+const contentId = inject<Ref<string>>('contentId', ref(''))
+
+const config = useRuntimeConfig()
+
+const refinedSrc = computed(() => {
+  try {
+    const resolved = resolveContentImage(props.src, unref(contentId))
+    if (!resolved) return ''
+    const basePath = config.app.baseURL || ''
+    if (!basePath || basePath === '/') return resolved
+    return basePath.replace(/\/$/, '') + resolved
+  } catch {
+    // Fallback: return raw src so the page doesn't break
+    return props.src || ''
+  }
+})
+</script>

package/src/components/content/ProsePre.vue

@@ -0,0 +1,58 @@
+<template>
+  <!-- Mermaid blocks are diagrams, not code: hand off to the renderer. -->
+  <MermaidDiagram v-if="language === 'mermaid'" :code="code" />
+
+  <!-- Everything else: a highlighted code block with chrome. -->
+  <div v-else class="code-block">
+    <div class="code-block__header">
+      <span class="code-block__lang">{{ displayLanguage }}</span>
+      <button
+        type="button"
+        class="code-block__copy"
+        :class="{ 'is-copied': copied }"
+        :aria-label="copied ? t('code.copied') : t('code.copyCode')"
+        :title="copied ? t('code.copiedExclaim') : t('code.copy')"
+        @click="copyCode"
+      >
+        <Check v-if="copied" theme="outline" :size="16" :stroke-width="3" />
+        <Copy v-else theme="outline" :size="16" :stroke-width="3" />
+      </button>
+    </div>
+    <pre :class="$props.class"><slot /></pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Copy from '@icon-park/vue-next/es/icons/Copy'
+import Check from '@icon-park/vue-next/es/icons/Check'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  code: { type: String, default: '' },
+  language: { type: String, default: null },
+  filename: { type: String, default: null },
+  highlights: { type: Array as () => number[], default: () => [] },
+  meta: { type: String, default: null },
+  class: { type: String, default: null }
+})
+
+const copied = ref(false)
+
+// Friendly label for the header; fall back to "text" for fenced blocks
+// that declared no language.
+const displayLanguage = computed(() => {
+  if (props.filename) return props.filename
+  return props.language || 'text'
+})
+
+async function copyCode() {
+  try {
+    await navigator.clipboard.writeText(props.code)
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 2000)
+  } catch (err) {
+    console.error('[ProsePre] copy failed:', err)
+  }
+}
+</script>

package/src/components/content/ProseVideo.vue

@@ -0,0 +1,45 @@
+<template>
+  <video
+    :src="refinedSrc"
+    :controls="controls"
+    :autoplay="autoplay"
+    :loop="loop"
+    :muted="muted"
+    :poster="refinedPoster"
+    :width="width"
+    :height="height"
+  >
+    <slot />
+  </video>
+</template>
+
+<script setup lang="ts">
+import { inject, computed, type Ref } from 'vue'
+
+const props = defineProps({
+  src: { type: String, default: '' },
+  poster: { type: String, default: undefined },
+  controls: { type: [Boolean, String], default: true },
+  autoplay: { type: [Boolean, String], default: false },
+  loop: { type: [Boolean, String], default: false },
+  muted: { type: [Boolean, String], default: false },
+  width: { type: [String, Number], default: undefined },
+  height: { type: [String, Number], default: undefined }
+})
+
+// Injected by the page component via provide('contentId', ...)
+const contentId = inject<Ref<string>>('contentId', { value: '' } as Ref<string>)
+
+const config = useRuntimeConfig()
+
+function resolve(src?: string): string | undefined {
+  if (!src) return src
+  const resolved = resolveContentImage(src, contentId.value)
+  const basePath = config.app.baseURL || '/'
+  if (!basePath || basePath === '/' || resolved.startsWith(basePath)) return resolved
+  return basePath.replace(/\/$/, '') + resolved
+}
+
+const refinedSrc = computed(() => resolve(props.src))
+const refinedPoster = computed(() => resolve(props.poster))
+</script>

package/src/composables/resolveContentImage.ts

@@ -0,0 +1,35 @@
+/**
+ * Resolve a relative image path from content frontmatter to an absolute /_markuxt/ URL.
+ *
+ * Authors write `image: photo.webp` in frontmatter; this function converts it
+ * to `/_markuxt/members/staff/photo.webp` based on the source file location.
+ *
+ * Supports `../` for cross-directory references (e.g. shared placeholders).
+ * Absolute paths (`/...`, `http...`) pass through unchanged.
+ */
+export function resolveContentImage(
+  image: string | undefined,
+  contentId: string | undefined,
+): string {
+  if (!image) return ''
+  if (image.startsWith('/') || image.startsWith('http') || image.startsWith('//')) {
+    return image
+  }
+  if (!contentId) return image
+
+  // _id format in Nuxt Content v2: 'content:members:staff:salman-ijaz.md'
+  // Split by ':', drop 'content' prefix and filename, rejoin as directory path
+  const parts = contentId.split(':')
+  if (parts.length < 3) return image
+
+  const dirSegments = parts.slice(1, -1) // e.g. ['members', 'staff']
+
+  // Normalize: resolve ../ and ./
+  const resolved = [...dirSegments]
+  for (const seg of image.split('/')) {
+    if (seg === '..') resolved.pop()
+    else if (seg !== '.') resolved.push(seg)
+  }
+
+  return '/_markuxt/' + resolved.join('/')
+}

package/src/content-transformers/binary-assets.ts

@@ -0,0 +1,20 @@
+/**
+ * Nuxt Content transformer for binary asset files (images, videos, etc.).
+ *
+ * Without this, @nuxt/content warns for every binary file in content/:
+ *   ".webp files are not supported … falling back to raw content"
+ *
+ * This transformer claims those extensions so the built-in parser never
+ * falls through to the warning path.
+ */
+export default {
+  name: 'binary-assets',
+  extensions: [
+    '\\.png', '\\.jpe?g', '\\.gif', '\\.webp', '\\.svg', '\\.ico',
+    '\\.mp4', '\\.webm', '\\.avi', '\\.mov', '\\.mkv',
+    '\\.pdf', '\\.zip', '\\.tar', '\\.gz',
+    '\\.woff2?', '\\.ttf', '\\.eot',
+    '\\.mp3', '\\.wav', '\\.ogg', '\\.flac',
+  ],
+  parse: async (_id: string, content: string) => ({ _id, _type: 'binary', body: content }),
+}

package/src/error.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="error-page">
+    <div class="error-page__content">
+      <h1 class="error-page__code">404</h1>
+      <h2 class="error-page__title">{{ t('error.notFound') }}</h2>
+      <p class="error-page__description">{{ t('error.notFoundDesc') }}</p>
+      <NuxtLink to="/" class="btn btn-primary">{{ t('error.backHome') }}</NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+
+useHead({
+  title: '404 - Page Not Found'
+})
+</script>
+
+<style scoped>
+.error-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-3xl) var(--spacing-lg);
+  text-align: center;
+  min-height: 50vh;
+}
+
+.error-page__content {
+  max-width: 480px;
+}
+
+.error-page__code {
+  font-family: var(--font-display);
+  font-size: 8rem;
+  font-weight: 900;
+  line-height: 1;
+  color: var(--color-secondary);
+  margin-bottom: var(--spacing-md);
+  opacity: 0.3;
+}
+
+.error-page__title {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--color-primary);
+  margin-bottom: var(--spacing-md);
+}
+
+.error-page__description {
+  font-size: 1rem;
+  color: var(--color-text-muted);
+  line-height: 1.6;
+  margin-bottom: var(--spacing-2xl);
+}
+</style>

package/src/layouts/default.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="layout">
+    <AppHeader />
+    <main class="main">
+      <slot />
+    </main>
+    <AppFooter />
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t, locale } = useI18n()
+
+useHead({
+  htmlAttrs: { lang: locale },
+  title: t('site.title'),
+  meta: [
+    { name: 'description', content: t('site.description') },
+    { name: 'keywords', content: t('site.keywords') },
+    { property: 'og:title', content: t('site.ogTitle') },
+    { property: 'og:description', content: t('site.ogDescription') },
+    { property: 'og:type', content: 'website' },
+  ],
+})
+</script>
+
+<style scoped>
+.layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.main {
+  flex: 1;
+}
+</style>

package/src/middleware/navigation-guard.ts

@@ -0,0 +1,22 @@
+import type { Router } from 'vue-router'
+
+export default defineNuxtPlugin(() => {
+  const appConfig = useAppConfig()
+  const allowedPaths = new Set(
+    (appConfig.markuxt?.navigation || []).map((item: { to: string }) => item.to)
+  )
+
+  addRouteMiddleware('navigation-guard', (to) => {
+    // Only guard markuxt section pages (members, publications, projects, positions, news)
+    const markuxtSections = ['/members', '/publications', '/projects', '/positions', '/news']
+    const isMarkuxtPage = markuxtSections.some(section => to.path.startsWith(section))
+
+    if (isMarkuxtPage) {
+      // Check if any allowed path matches this route's section
+      const sectionPath = '/' + to.path.split('/')[1]
+      if (!allowedPaths.has(sectionPath)) {
+        return abortNavigation(createError({ statusCode: 404, statusMessage: 'Page Not Found' }))
+      }
+    }
+  }, { global: true })
+})