@markuxt/markuxt 0.1.4

package/src/public/_markuxt/components/MemberCard.vue

@@ -0,0 +1,198 @@
+<template>
+  <NuxtLink :to="memberLink" class="member-card">
+    <div class="member-card__image-wrapper">
+      <img
+        v-if="imageUrl"
+        :src="imageUrl"
+        :alt="member.name"
+        class="member-card__image"
+        loading="lazy"
+      />
+      <div class="member-card__overlay">
+        <a
+          v-if="member.email"
+          :href="`mailto:${member.email}`"
+          class="member-card__action"
+          :aria-label="t('members.sendEmail')"
+          @click.stop
+        >
+          <Mail class="icon-inline" theme="outline" :size="20" fill="currentColor" :stroke-width="3.6" />
+        </a>
+        <a
+          v-if="member.scholar"
+          :href="member.scholar"
+          target="_blank"
+          rel="noopener"
+          class="member-card__action"
+          :aria-label="t('members.googleScholar')"
+          @click.stop
+        >
+          <Google class="icon-inline" theme="outline" :size="20" fill="currentColor" :stroke-width="2.5" />
+        </a>
+      </div>
+    </div>
+    <div class="member-card__content">
+      <h3 class="member-card__name">{{ member.name }}</h3>
+      <p class="member-card__role">{{ member.role || member.title }}</p>
+      <p v-if="member.interests && member.interests.length" class="member-card__interests">
+        {{ formattedInterests }}
+      </p>
+    </div>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import Mail from '@icon-park/vue-next/es/icons/Mail'
+import Google from '@icon-park/vue-next/es/icons/Google'
+
+interface Member {
+  name: string
+  role?: string
+  title?: string
+  email?: string
+  scholar?: string
+  image?: string
+  interests?: string[]
+  category?: string
+  order?: number
+  _path?: string   // Nuxt Content route path (e.g., "/members/staff/salman-ijaz")
+  _id?: string     // Nuxt Content internal ID (e.g., "content:members:staff:salman-ijaz.md")
+}
+
+interface Props {
+  member: Member
+}
+
+const props = defineProps<Props>()
+
+const { t } = useI18n()
+const config = useRuntimeConfig()
+
+const imageUrl = computed(() => {
+  const resolved = resolveContentImage(props.member.image, props.member._id)
+  if (!resolved) return ''
+
+  const basePath = config.app.baseURL || ''
+  if (!basePath || basePath === '/') return resolved
+  return basePath + resolved
+})
+
+const formattedInterests = computed(() => {
+  if (!props.member.interests) return ''
+  return props.member.interests.slice(0, 3).join(' · ')
+})
+
+// Generate link to member detail page
+const memberLink = computed(() => {
+  if (props.member._path) {
+    // _path is like "/members/staff/salman-ijaz"
+    // Use it directly as route
+    return props.member._path
+  }
+  // Fallback: generate from name with /members/ prefix
+  return `/members/${props.member.name?.toLowerCase().replace(/\s+/g, '-') || ''}`
+})
+</script>
+
+<style scoped>
+.member-card {
+  background: var(--color-bg-alt);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+  border: 1px solid var(--color-border);
+  transition: all var(--transition-base);
+  text-decoration: none;
+  display: block;
+}
+
+.member-card:hover {
+  transform: translateY(-8px) rotate(1deg);
+  box-shadow: var(--shadow-xl);
+  border-color: var(--color-secondary);
+}
+
+.member-card__image-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 3 / 4;
+  overflow: hidden;
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
+}
+
+.member-card__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center top;
+  transition: transform var(--transition-slow);
+}
+
+.member-card:hover .member-card__image {
+  transform: scale(1.05);
+}
+
+.member-card__overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--spacing-md);
+  background: linear-gradient(transparent, rgba(10, 37, 64, 0.9));
+  display: flex;
+  gap: var(--spacing-sm);
+  opacity: 0;
+  transform: translateY(100%);
+  transition: all var(--transition-base);
+}
+
+.member-card:hover .member-card__overlay {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.member-card__action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: white;
+  border-radius: var(--radius-full);
+  color: var(--color-primary);
+  transition: all var(--transition-fast);
+}
+
+.member-card__action:hover {
+  background: var(--color-accent);
+  color: white;
+  transform: scale(1.1);
+}
+
+.member-card__content {
+  padding: var(--spacing-lg);
+}
+
+.member-card__name {
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-primary);
+  margin-bottom: var(--spacing-xs);
+  line-height: 1.3;
+}
+
+.member-card__role {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-secondary);
+  margin-bottom: var(--spacing-sm);
+}
+
+.member-card__interests {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  line-height: 1.5;
+}
+</style>

package/src/public/_markuxt/components/MembersGrid.vue

@@ -0,0 +1,129 @@
+<template>
+  <section class="members-section" v-if="members.length > 0">
+    <div v-for="(category, index) in categorizedMembers" :key="category.name" class="members-category">
+      <h3 class="members-category__title" v-if="groupBy">{{ category.name }}</h3>
+      <div class="members-grid">
+        <MemberCard
+          v-for="member in category.members"
+          :key="member.slug"
+          :member="member"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+interface Member {
+  name: string
+  slug: string
+  role?: string
+  title?: string
+  email?: string
+  scholar?: string
+  image?: string
+  interests?: string[]
+  category?: string
+  order?: number
+  _path?: string
+  _id?: string
+  [key: string]: any  // Preserve all Nuxt Content fields
+}
+
+interface Props {
+  members: Member[]
+  groupBy?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  groupBy: true
+})
+
+const { t } = useI18n()
+
+// Category display names
+const categoryNames = computed(() => ({
+  staff: t('members.staff'),
+  'research-students': t('members.researchStudents'),
+  'research-assistants': t('members.researchAssistants'),
+  alumni: t('members.alumni')
+}))
+
+// Category sort order
+const categoryOrder = ['staff', 'research-students', 'research-assistants', 'alumni']
+
+// Sort members by category order, then by order field
+const sortedMembers = computed(() => {
+  return [...props.members].sort((a, b) => {
+    const catOrderA = categoryOrder.indexOf(a.category || '')
+    const catOrderB = categoryOrder.indexOf(b.category || '')
+    if (catOrderA !== catOrderB) {
+      return catOrderA - catOrderB
+    }
+    return (a.order || 999) - (b.order || 999)
+  })
+})
+
+const categorizedMembers = computed(() => {
+  if (!props.groupBy) {
+    return [{
+      name: t('members.section'),
+      members: sortedMembers.value
+    }]
+  }
+
+  const categories: Record<string, Member[]> = {}
+
+  for (const member of sortedMembers.value) {
+    const cat = member.category || 'staff'
+    if (!categories[cat]) {
+      categories[cat] = []
+    }
+    categories[cat].push(member)
+  }
+
+  // Return categories in predefined order
+  return categoryOrder
+    .filter(key => categories[key] && categories[key].length > 0)
+    .map(key => ({
+      name: categoryNames.value[key] || key,
+      members: categories[key]
+    }))
+})
+</script>
+
+<style scoped>
+.members-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3xl);
+}
+
+.members-category {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl);
+}
+
+.members-category__title {
+  font-family: var(--font-display);
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--color-primary);
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 2px solid var(--color-border);
+}
+
+.members-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: var(--spacing-xl);
+}
+
+@media (max-width: 640px) {
+  .members-grid {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: var(--spacing-lg);
+  }
+}
+</style>

package/src/public/_markuxt/components/MermaidDiagram.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="mermaid-diagram">
+    <!-- Rendered SVG is injected here once mermaid resolves on the client -->
+    <div v-if="svg" class="mermaid-diagram__svg" v-html="svg" />
+    <!-- Fallback: show the raw source until hydration renders the diagram -->
+    <pre v-else class="mermaid-diagram__source"><code>{{ code }}</code></pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ code: string }>()
+
+const svg = ref('')
+
+// A unique id per diagram avoids mermaid's internal id collisions when
+// multiple diagrams render on the same page.
+const renderId = `mermaid-${Math.random().toString(36).slice(2, 10)}`
+
+async function renderDiagram() {
+  if (!props.code) return
+  try {
+    // Wait for fonts so mermaid measures text correctly
+    await document.fonts.ready
+
+    const mermaid = (await import('mermaid')).default
+    mermaid.initialize({
+      startOnLoad: false,
+      securityLevel: 'strict',
+      theme: 'base',
+      fontFamily: 'var(--font-body), sans-serif',
+      htmlLabels: true,
+      themeVariables: {
+        primaryColor: '#e6f7fb',
+        primaryBorderColor: '#009bc1',
+        primaryTextColor: '#0a2540',
+        lineColor: '#64748b',
+        fontSize: '15px',
+      },
+      flowchart: {
+        htmlLabels: true,
+        useMaxWidth: false,
+        padding: 18,
+      },
+    })
+    const { svg: rendered } = await mermaid.render(renderId, props.code)
+    svg.value = rendered
+  } catch (err) {
+    console.error('[MermaidDiagram] render failed:', err)
+  }
+}
+
+// Mermaid touches the DOM, so only run in the browser after mount.
+onMounted(renderDiagram)
+watch(() => props.code, renderDiagram)
+</script>
+
+<style scoped>
+.mermaid-diagram {
+  margin: var(--spacing-lg) 0;
+  padding: var(--spacing-lg);
+  background: var(--color-bg-alt);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow-x: auto;
+  text-align: center;
+}
+
+.mermaid-diagram__svg :deep(svg) {
+  height: auto;
+}
+
+/* Prevent text clipping inside mermaid nodes */
+.mermaid-diagram__svg :deep(.node) {
+  overflow: visible;
+}
+
+.mermaid-diagram__svg :deep(.node rect),
+.mermaid-diagram__svg :deep(.node polygon),
+.mermaid-diagram__svg :deep(.node circle) {
+  overflow: visible;
+}
+
+.mermaid-diagram__svg :deep(.nodeLabel) {
+  overflow: visible;
+  white-space: nowrap;
+}
+
+.mermaid-diagram__svg :deep(foreignObject) {
+  overflow: visible;
+}
+
+.mermaid-diagram__source {
+  margin: 0;
+  text-align: left;
+  color: var(--color-text-muted);
+  font-size: 0.85rem;
+  white-space: pre-wrap;
+}
+</style>

package/src/public/_markuxt/components/NewsCard.vue

@@ -0,0 +1,119 @@
+<template>
+  <article class="news-card">
+    <time class="news-card__date" :datetime="news.date">
+      {{ formattedDate }}
+    </time>
+    <NuxtLink :to="news._path" class="news-card__link">
+      <h3 class="news-card__title">{{ news.title }}</h3>
+    </NuxtLink>
+    <p class="news-card__excerpt" v-if="news.description">
+      {{ news.description }}
+    </p>
+    <div class="news-card__tags" v-if="news.tags && news.tags.length">
+      <span v-for="tag in news.tags.slice(0, 3)" :key="tag" class="news-card__tag">
+        {{ tag }}
+      </span>
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+// Accept any Nuxt content properties
+interface NewsItem {
+  title?: string
+  date?: string
+  description?: string
+  tags?: string[]
+  _path?: string
+  key?: string
+}
+
+interface Props {
+  news: NewsItem
+}
+
+const props = defineProps<Props>()
+
+const { locale } = useI18n()
+
+const formattedDate = computed(() => {
+  const date = props.news.date ? new Date(props.news.date) : new Date()
+  return date.toLocaleDateString(locale.value === 'zh-CN' ? 'zh-CN' : 'en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  })
+})
+</script>
+
+<style scoped>
+.news-card {
+  background: var(--color-bg-alt);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  border: 1px solid var(--color-border);
+  transition: all var(--transition-base);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.news-card:hover {
+  border-color: var(--color-secondary);
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-4px);
+}
+
+.news-card__date {
+  font-family: var(--font-display);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.news-card__link {
+  text-decoration: none;
+}
+
+.news-card__title {
+  font-family: var(--font-display);
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--color-primary);
+  margin: 0;
+  transition: color var(--transition-fast);
+}
+
+.news-card:hover .news-card__title {
+  color: var(--color-secondary);
+}
+
+.news-card__excerpt {
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  color: var(--color-text-muted);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.news-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+  margin-top: auto;
+}
+
+.news-card__tag {
+  font-size: 0.75rem;
+  padding: 2px 8px;
+  background: var(--color-bg);
+  color: var(--color-text-muted);
+  border-radius: var(--radius-sm);
+}
+</style>