@markuxt/markuxt 0.1.4

package/src/components/Hero.vue

@@ -0,0 +1,438 @@
+<template>
+  <section class="hero">
+    <div class="container hero__container">
+      <div class="hero__grid">
+      <div class="hero__content">
+        <span class="hero__badge">{{ badge || t('hero.badge') }}</span>
+        <h1 class="hero__title">{{ title || t('hero.title') }}</h1>
+        <p class="hero__description">{{ description || t('hero.description') }}</p>
+        <div class="hero__actions">
+          <NuxtLink to="/members" class="btn btn-primary">
+            {{ t('hero.meetTeam') }}
+          </NuxtLink>
+          <NuxtLink to="/publications" class="btn btn-secondary">
+            {{ t('hero.viewResearch') }}
+          </NuxtLink>
+        </div>
+      </div>
+      <div class="hero__visual">
+        <!-- Image Carousel -->
+        <div class="carousel">
+          <div class="carousel__track" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
+            <div
+              v-for="(slide, index) in carouselImages"
+              :key="index"
+              class="carousel__slide"
+            >
+              <img :src="slide.src" :alt="slide.alt" class="carousel__image" />
+              <div class="carousel__caption" v-if="slide.caption">
+                <span>{{ slide.caption }}</span>
+              </div>
+            </div>
+          </div>
+          <!-- Navigation Dots -->
+          <div class="carousel__dots" v-if="carouselImages.length > 1">
+            <button
+              v-for="(_, index) in carouselImages"
+              :key="index"
+              class="carousel__dot"
+              :class="{ 'carousel__dot--active': currentSlide === index }"
+              @click="goToSlide(index)"
+              :aria-label="t('hero.goToSlide', { n: index + 1 })"
+            ></button>
+          </div>
+          <!-- Navigation Arrows -->
+          <button
+            v-if="carouselImages.length > 1"
+            class="carousel__arrow carousel__arrow--prev"
+            @click="prevSlide"
+            :aria-label="t('hero.prevSlide')"
+          >
+            <Left class="icon-inline" theme="outline" :size="20" fill="currentColor" :stroke-width="3" />
+          </button>
+          <button
+            v-if="carouselImages.length > 1"
+            class="carousel__arrow carousel__arrow--next"
+            @click="nextSlide"
+            :aria-label="t('hero.nextSlide')"
+          >
+            <Right class="icon-inline" theme="outline" :size="20" fill="currentColor" :stroke-width="3" />
+          </button>
+          <!-- Progress Bar -->
+          <div class="carousel__progress" v-if="carouselImages.length > 1">
+            <div class="carousel__progress-bar" :style="{ width: `${((currentSlide + 1) / carouselImages.length) * 100}%` }"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import Left from '@icon-park/vue-next/es/icons/Left'
+import Right from '@icon-park/vue-next/es/icons/Right'
+
+interface Props {
+  badge?: string
+  title?: string
+  description?: string
+}
+
+interface CarouselImage {
+  src: string
+  alt: string
+  caption: string
+}
+
+const { t } = useI18n()
+
+withDefaults(defineProps<Props>(), {
+  badge: '',
+  title: '',
+  description: ''
+})
+
+const config = useRuntimeConfig()
+const appConfig = useAppConfig()
+
+// Carousel images from app.config — synchronous, SSR-safe
+const carouselImages = computed((): CarouselImage[] => {
+  const images = (appConfig.markuxt as Record<string, any>)?.carousel?.images as CarouselImage[] | undefined
+  const basePath = config.app.baseURL || '/'
+  const base = basePath === '/' ? '' : basePath
+
+  if (!images || images.length === 0) {
+    const fallback = (appConfig.markuxt as Record<string, any>)?.carousel?.fallbackImage || '/images/logo.png'
+    return [{
+      src: `${base}${fallback}`,
+      alt: t('hero.placeholderAlt'),
+      caption: t('hero.placeholderCaption')
+    }]
+  }
+
+  return images.map(img => ({
+    ...img,
+    src: `${base}${img.src}`
+  }))
+})
+
+const currentSlide = ref(0)
+const autoPlayInterval = ref<ReturnType<typeof setInterval> | null>(null)
+const isAutoPlaying = ref(false)
+
+const nextSlide = () => {
+  if (carouselImages.value.length === 0) return
+  currentSlide.value = (currentSlide.value + 1) % carouselImages.value.length
+}
+
+const prevSlide = () => {
+  if (carouselImages.value.length === 0) return
+  currentSlide.value = currentSlide.value === 0 ? carouselImages.value.length - 1 : currentSlide.value - 1
+}
+
+const goToSlide = (index: number) => {
+  currentSlide.value = index
+  stopAutoPlay()
+}
+
+const startAutoPlay = () => {
+  if (carouselImages.value.length > 1 && !isAutoPlaying.value) {
+    isAutoPlaying.value = true
+    autoPlayInterval.value = setInterval(() => {
+      nextSlide()
+    }, 5000)
+  }
+}
+
+const stopAutoPlay = () => {
+  if (autoPlayInterval.value) {
+    clearInterval(autoPlayInterval.value)
+    autoPlayInterval.value = null
+  }
+  isAutoPlaying.value = false
+}
+
+onMounted(() => {
+  startAutoPlay()
+})
+
+onUnmounted(() => {
+  stopAutoPlay()
+})
+</script>
+
+<style scoped>
+.hero {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  padding-top: var(--header-height);
+  position: relative;
+  overflow: hidden;
+}
+
+.hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
+  opacity: 0.03;
+  z-index: -1;
+}
+
+.hero__container {
+  padding-inline: var(--spacing-2xl);
+}
+
+.hero__grid {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  gap: var(--spacing-3xl);
+  align-items: center;
+}
+
+.hero__content {
+  animation: fadeInUp 0.8s ease forwards;
+}
+
+.hero__badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--spacing-xs) var(--spacing-md);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  background: rgba(0,217,255,0.1);
+  border-radius: var(--radius-full);
+  margin-bottom: var(--spacing-lg);
+}
+
+.hero__title {
+  font-family: var(--font-display);
+  font-size: clamp(2.5rem, 5vw, 3.5rem);
+  font-weight: 800;
+  line-height: 1.1;
+  color: var(--color-primary);
+  margin-bottom: var(--spacing-lg);
+}
+
+.hero__title span {
+  color: var(--color-secondary);
+}
+
+.hero__description {
+  font-size: 1.125rem;
+  line-height: 1.7;
+  color: var(--color-text-muted);
+  margin-bottom: var(--spacing-xl);
+  max-width: 540px;
+}
+
+.hero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+}
+
+/* Carousel */
+.hero__visual {
+  position: relative;
+  /* 4:3 aspect ratio */
+  aspect-ratio: 4 / 3;
+  width: 100%;
+  /* max-height: 500px; */
+  animation: fadeIn 1s ease 0.3s forwards;
+  opacity: 0;
+}
+
+.carousel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  box-shadow: var(--shadow-xl);
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
+}
+
+.carousel__track {
+  display: flex;
+  height: 100%;
+  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.carousel__slide {
+  min-width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.carousel__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.carousel__caption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--spacing-lg);
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  color: white;
+}
+
+.carousel__caption span {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+
+.carousel__dots {
+  position: absolute;
+  bottom: var(--spacing-md);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: var(--spacing-xs);
+  z-index: 10;
+}
+
+.carousel__dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.5);
+  border: none;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  padding: 0;
+}
+
+.carousel__dot:hover {
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.carousel__dot--active {
+  background: white;
+  width: 24px;
+  border-radius: var(--radius-full);
+}
+
+/* Navigation Arrows */
+.carousel__arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-primary);
+  transition: all var(--transition-fast);
+  z-index: 10;
+}
+
+.carousel__arrow:hover,
+.carousel__arrow:focus {
+  background: white;
+  box-shadow: var(--shadow-md);
+  transform: translateY(-50%) scale(1.1);
+}
+
+.carousel__arrow--prev {
+  left: var(--spacing-md);
+}
+
+.carousel__arrow--next {
+  right: var(--spacing-md);
+}
+
+.carousel__progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.carousel__progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
+  transition: width 0.3s ease;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion) {
+  .hero__content,
+  .hero__visual,
+  .carousel__track,
+  .carousel__arrow {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  .carousel__arrow:hover,
+  .carousel__arrow:focus {
+    transform: translateY(-50%);
+  }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .hero {
+    min-height: auto;
+    padding-top: calc(var(--header-height) + var(--spacing-xl));
+    padding-bottom: var(--spacing-2xl);
+  }
+
+  .hero__container {
+    padding-inline: var(--spacing-xl);
+  }
+
+  .hero__grid {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-2xl);
+  }
+
+  .hero__visual {
+    order: -1;
+    /* Keep 4:3 ratio on tablet */
+    aspect-ratio: 4 / 3;
+    /* max-height: 400px; */
+  }
+}
+
+@media (max-width: 480px) {
+  .hero {
+    padding-top: calc(var(--header-height) + var(--spacing-md));
+  }
+
+  .hero__actions {
+    flex-direction: column;
+  }
+
+  .hero__actions .btn {
+    width: 100%;
+  }
+
+  .hero__visual {
+    /* Keep 4:3 ratio on mobile */
+    aspect-ratio: 4 / 3;
+    max-height: 300px;
+  }
+}
+</style>

package/src/components/Icon.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+// Import only the icons we need from IconPark
+import ArrowLeft from '@icon-park/vue-next/es/icons/ArrowLeft'
+import Mail from '@icon-park/vue-next/es/icons/Mail'
+import Google from '@icon-park/vue-next/es/icons/Google'
+import Search from '@icon-park/vue-next/es/icons/Search'
+import FileStaff from '@icon-park/vue-next/es/icons/FileStaff'
+import Close from '@icon-park/vue-next/es/icons/Close'
+import HamburgerButton from '@icon-park/vue-next/es/icons/HamburgerButton'
+import Help from '@icon-park/vue-next/es/icons/Help'
+import LinkOut from '@icon-park/vue-next/es/icons/LinkOut'
+
+interface Props {
+  name: string
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 20,
+  color: 'currentColor'
+})
+
+const iconMap: Record<string, any> = {
+  'arrow-left': ArrowLeft,
+  'email': Mail,
+  'google-scholar': Google,
+  'scholar': Google,
+  'research': Search,
+  'about': FileStaff,
+  'close': Close,
+  'menu': HamburgerButton,
+  'question-mark': Help,
+  'external-link': LinkOut
+}
+
+const IconComp = computed(() => iconMap[props.name] || null)
+
+// Calculate stroke-width based on icon size for optimal visual weight
+// Email icon gets bolder stroke for better visibility
+const strokeWidth = computed(() => {
+  const isEmail = props.name === 'email'
+  if (typeof props.size === 'string') return isEmail ? 3 : 2
+  if (isEmail) {
+    // Email icon is always bolder
+    if (props.size <= 14) return 4
+    if (props.size <= 18) return 3.5
+    return 3
+  }
+  // Standard stroke width for other icons (increased for stronger weight)
+  if (props.size <= 14) return 3
+  if (props.size <= 18) return 2.5
+  return 2
+})
+
+// Handle both numeric (px) and string (CSS) sizes
+const numericSize = computed(() => typeof props.size === 'number' ? props.size : 20)
+</script>
+
+<template>
+  <!-- Icon wrapper with proper flex centering -->
+  <span class="icon-container">
+    <!-- For Vue components with numeric size -->
+    <component
+      v-if="IconComp && typeof size === 'number'"
+      :is="IconComp"
+      theme="outline"
+      :size="numericSize"
+      :fill="color || 'currentColor'"
+      :stroke-width="strokeWidth"
+      class="icon-component"
+    />
+
+    <!-- For CSS sizing (container-relative) -->
+    <span
+      v-else-if="IconComp"
+      class="icon-scaled-wrapper"
+    >
+      <component
+        :is="IconComp"
+        theme="outline"
+        :size="24"
+        :fill="color || 'currentColor'"
+        :stroke-width="name === 'email' ? 3 : 1.5"
+        class="icon-scaled"
+      />
+    </span>
+
+    <!-- Fallback to Iconify CDN if icon name not recognised -->
+    <!-- <img
+      v-else
+      :src="`https://api.iconify.design/ep-icon-park-outline/${props.name}.svg`"
+      :alt="`${props.name} icon`"
+      loading="lazy"
+      class="icon-fallback"
+    /> -->
+  </span>
+</template>
+
+<style scoped>
+.icon-container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+.icon-component {
+  display: block;
+  line-height: 1;
+}
+
+.icon-scaled-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.icon-scaled,
+.icon-fallback {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: contain;
+}
+</style>

package/src/components/LanguageSwitcher.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="lang-switcher">
+    <button
+      v-for="loc in availableLocales"
+      :key="loc.code"
+      class="lang-switcher__btn"
+      :class="{ 'lang-switcher__btn--active': loc.code === locale }"
+      @click="setLocale(loc.code as 'en' | 'zh-CN')"
+    >
+      {{ getLocaleLabel(loc.code) }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { locale, locales, setLocale } = useI18n()
+
+const availableLocales = computed(() =>
+  (locales.value as Array<{ code: string; name: string }>)
+)
+
+const LABELS: Record<string, string> = {
+  'en': 'EN',
+  'zh-CN': '中文',
+}
+
+function getLocaleLabel(code: string): string {
+  if (code in LABELS) return LABELS[code]
+  console.warn(`[LanguageSwitcher] unknown locale code: "${code}"`)
+  return code
+}
+</script>
+
+<style scoped>
+.lang-switcher {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: var(--color-bg);
+  border-radius: var(--radius-full);
+  padding: 2px 3px;
+  border: 1px solid var(--color-border);
+}
+
+.lang-switcher__btn {
+  padding: 4px 10px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+}
+
+.lang-switcher__btn:hover {
+  color: var(--color-text);
+}
+
+.lang-switcher__btn--active {
+  background: var(--color-secondary);
+  color: white;
+}
+
+.lang-switcher__btn--active:hover {
+  background: var(--color-primary);
+  color: white;
+}
+</style>