@markuxt/markuxt 0.1.4

package/src/public/_markuxt/pages/positions/[...slug].vue

@@ -0,0 +1,425 @@
+<template>
+  <main class="position-page" v-if="position">
+    <!-- Decorative background -->
+    <div class="position__bg">
+      <div class="position__pattern"></div>
+      <div class="position__shapes">
+        <span class="position__shape position__shape--1"></span>
+        <span class="position__shape position__shape--2"></span>
+      </div>
+    </div>
+
+    <div class="container position-page__container">
+      <!-- Back button -->
+      <NuxtLink to="/positions" class="position__back">
+        <ArrowLeft class="icon-inline" theme="outline" :size="16" fill="currentColor" :stroke-width="2" />
+        {{ t('positions.backTo') }}
+      </NuxtLink>
+
+      <!-- Position Header -->
+      <div class="position-header animate-fade-in-up">
+        <div class="position-header__info">
+          <span v-if="position.type" class="position-header__badge badge-accent">
+            {{ position.type }}
+          </span>
+          <h1 class="position-header__name">{{ position.title }}</h1>
+        </div>
+      </div>
+
+      <!-- Position Content -->
+      <div class="position-content">
+        <!-- Description -->
+        <div v-if="position.body || position.description" class="position-section animate-fade-in-up delay-200">
+          <div class="position-section__header">
+            <FileStaff class="icon-inline" theme="outline" :size="20" fill="white" :stroke-width="2.8" />
+            <h3>{{ t('positions.aboutPosition') }}</h3>
+          </div>
+          <div class="position-section__body position-section__body--content">
+            <ContentRenderer :value="position" />
+          </div>
+        </div>
+
+        <!-- Requirements -->
+        <div v-if="position.requirements" class="position-section animate-fade-in-up delay-300">
+          <div class="position-section__header">
+            <CheckCorrect class="icon-inline" theme="outline" :size="20" fill="white" :stroke-width="2.8" />
+            <h3>{{ t('positions.requirements') }}</h3>
+          </div>
+          <div class="position-section__body">
+            <ul class="requirements-list">
+              <li v-for="(req, index) in position.requirements" :key="index">{{ req }}</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Apply Button -->
+        <div v-if="position.email" class="animate-fade-in-up delay-400">
+          <a
+            :href="`mailto:${position.email}`"
+            class="apply-link"
+          >
+            <Mail class="icon-inline" theme="outline" :size="20" fill="currentColor" :stroke-width="3" />
+            {{ t('positions.apply') }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <!-- Not Found -->
+  <div v-else class="not-found-page">
+    <div class="container">
+      <div class="not-found">
+        <Help class="icon-inline" theme="outline" :size="80" fill="var(--color-accent)" :stroke-width="3" />
+        <h1>{{ t('positions.notFound') }}</h1>
+        <p>{{ t('positions.notFoundDesc') }}</p>
+        <NuxtLink to="/positions" class="btn btn-primary">{{ t('positions.browseAll') }}</NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ArrowLeft from '@icon-park/vue-next/es/icons/ArrowLeft'
+import FileStaff from '@icon-park/vue-next/es/icons/FileStaff'
+import CheckCorrect from '@icon-park/vue-next/es/icons/CheckCorrect'
+import Mail from '@icon-park/vue-next/es/icons/Mail'
+import Help from '@icon-park/vue-next/es/icons/Help'
+
+const { t } = useI18n()
+const route = useRoute()
+
+// Get position by file path
+// For catch-all route [...slug], params.slug is an array
+const slug = computed(() => {
+  const slugParam = route.params.slug
+  return Array.isArray(slugParam) ? slugParam.join('/') : slugParam
+})
+
+const { data: positionData } = await useAsyncData(`position-${slug.value}`, async () => {
+  try {
+    const fullPath = `/positions/${slug.value}`
+    return await queryContent(fullPath).findOne()
+  } catch (e) {
+    console.error('Error fetching position:', e)
+    return null
+  }
+}, {
+  watch: [slug]
+})
+
+const position = computed(() => positionData.value)
+
+// Provide content ID for ProseImg/ProseVideo to resolve relative asset paths
+provide('contentId', computed(() => position.value?._id || ''))
+
+useHead({
+  title: computed(() => position.value ? `${position.value.title} - ${t('site.shortName')}` : 'Position Not Found'),
+  meta: computed(() => {
+    const description = position.value?.description || position.value?.body
+      ? (typeof (position.value.description || position.value.body) === 'string'
+          ? (position.value.description || position.value.body).substring(0, 160).replace(/<[^>]*>/g, '')
+          : `${t('site.shortName')} position`)
+      : `${t('site.shortName')} position page`
+    return [
+      { name: 'description', content: description }
+    ]
+  })
+})
+</script>
+
+<style scoped>
+.position-page {
+  min-height: 100vh;
+  position: relative;
+}
+
+/* Page Container with top padding for fixed header */
+.position-page__container {
+  padding-top: 100px;
+}
+
+/* Background */
+.position__bg {
+  position: fixed;
+  inset: 0;
+  background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
+  z-index: -2;
+  pointer-events: none;
+}
+
+.position__pattern {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(10, 37, 64, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(10, 37, 64, 0.03) 1px, transparent 1px);
+  background-size: 40px 40px;
+}
+
+.position__shapes {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.position__shape {
+  position: absolute;
+  border-radius: 50%;
+  animation: float 8s ease-in-out infinite;
+}
+
+.position__shape--1 {
+  width: 200px;
+  height: 200px;
+  top: 10%;
+  right: 8%;
+  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-secondary) 100%);
+  opacity: 0.12;
+  animation-delay: 0s;
+}
+
+.position__shape--2 {
+  width: 120px;
+  height: 120px;
+  bottom: 20%;
+  left: 5%;
+  background: var(--color-primary);
+  opacity: 0.08;
+  animation-delay: 2.5s;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-20px) rotate(3deg);
+  }
+}
+
+/* Back Button */
+.position__back {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-full);
+  color: var(--color-text);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all var(--transition-base);
+  margin-bottom: var(--spacing-xl);
+}
+
+.position__back:hover {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: white;
+  transform: translateX(-3px);
+}
+
+/* Position Header */
+.position-header {
+  margin-bottom: var(--spacing-3xl);
+}
+
+.position-header__info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.position-header__badge {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: white;
+  background: var(--color-accent);
+  border-radius: var(--radius-sm);
+  align-self: flex-start;
+}
+
+.position-header__name {
+  font-family: var(--font-display);
+  font-size: clamp(1.75rem, 4vw, 2.25rem);
+  font-weight: 800;
+  line-height: 1.15;
+  color: var(--color-primary);
+  margin: 0;
+}
+
+/* Content Area */
+.position-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl);
+  margin-bottom: var(--spacing-3xl);
+}
+
+/* Position Sections */
+.position-section {
+  background: var(--color-bg-alt);
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+  transition: all var(--transition-base);
+}
+
+.position-section:hover {
+  box-shadow: var(--shadow-lg);
+  border-color: var(--color-secondary);
+}
+
+.position-section__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-lg) var(--spacing-xl);
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.position-section__header h3 {
+  font-family: var(--font-display);
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: white;
+  margin: 0;
+}
+
+.position-section__body {
+  padding: var(--spacing-xl);
+}
+
+.position-section__body--content {
+  padding: var(--spacing-xl);
+  background: white;
+}
+
+/* Requirements List */
+.requirements-list {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.requirements-list li {
+  padding-left: var(--spacing-lg);
+  margin-bottom: var(--spacing-sm);
+  position: relative;
+}
+
+.requirements-list li::before {
+  content: '✓';
+  position: absolute;
+  left: 0;
+  color: var(--color-accent);
+  font-weight: 700;
+  font-size: 1.2em;
+}
+
+/* Apply Link */
+.apply-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md) var(--spacing-xl);
+  background: var(--color-secondary);
+  color: white;
+  text-decoration: none;
+  border-radius: var(--radius-lg);
+  font-weight: 600;
+  transition: all var(--transition-base);
+}
+
+.apply-link:hover {
+  background: var(--color-accent);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+/* ContentRenderer Markdown Styling */
+.position-section__body--content :deep(h2) {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-primary);
+  margin-top: var(--spacing-lg);
+  margin-bottom: var(--spacing-md);
+}
+
+.position-section__body--content :deep(p) {
+  font-size: 1rem;
+  line-height: 1.8;
+  color: var(--color-text);
+  margin-bottom: var(--spacing-md);
+}
+
+.position-section__body--content :deep(ul) {
+  list-style: none;
+  padding-left: 0;
+}
+
+.position-section__body--content :deep(li) {
+  padding-left: var(--spacing-lg);
+  margin-bottom: var(--spacing-sm);
+  position: relative;
+}
+
+.position-section__body--content :deep(li::before) {
+  content: '•';
+  position: absolute;
+  left: 0;
+  color: var(--color-accent);
+  font-weight: 700;
+}
+
+.position-section__body--content :deep(strong) {
+  font-weight: 600;
+  color: var(--color-primary);
+}
+
+/* Not Found */
+.not-found-page {
+  min-height: 60vh;
+  display: flex;
+  align-items: center;
+}
+
+.not-found {
+  text-align: center;
+  padding: var(--spacing-4xl) 0;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.not-found h1 {
+  font-family: var(--font-display);
+  font-size: clamp(2rem, 4vw, 2.5rem);
+  font-weight: 700;
+  color: var(--color-primary);
+  margin-bottom: var(--spacing-md);
+}
+
+.not-found p {
+  font-size: 1rem;
+  color: var(--color-text-muted);
+  margin-bottom: var(--spacing-xl);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .position-content {
+    gap: var(--spacing-lg);
+  }
+}
+</style>

package/src/public/_markuxt/pages/positions/index.vue

@@ -0,0 +1,266 @@
+<template>
+  <div class="positions-page">
+    <div class="section">
+      <div class="container">
+        <SectionTitle
+          :overline="t('positions.overline')"
+          :title="t('positions.title')"
+          :description="t('positions.description')"
+        />
+
+        <div class="positions-intro">
+          <p>
+            {{ t('positions.intro') }}
+          </p>
+        </div>
+
+        <!-- Positions Grid -->
+        <div class="positions-grid" v-if="positionsList.length > 0">
+          <NuxtLink
+            v-for="position in positionsList"
+            :key="position._path"
+            :to="position._path || ''"
+            class="position-card"
+          >
+            <div class="position-card__header">
+              <h3 class="position-card__title">{{ position.title }}</h3>
+              <span v-if="position.type" class="badge badge-accent">{{ position.type }}</span>
+            </div>
+            <p class="position-card__description" v-if="position.description">
+              {{ position.description }}
+            </p>
+            <div class="position-card__footer">
+              <span class="position-card__cta">{{ t('positions.viewDetails') }}</span>
+            </div>
+          </NuxtLink>
+        </div>
+
+        <div class="positions-coming-soon" v-else>
+          <div class="placeholder-icon">
+            <Briefcase class="icon-inline" theme="outline" :size="64" fill="var(--color-accent)" :stroke-width="2" />
+          </div>
+          <h3>{{ t('positions.noPositions') }}</h3>
+          <p>{{ t('positions.checkBack') }}</p>
+        </div>
+
+        <!-- General Inquiry -->
+        <div class="positions-contact">
+          <h3>{{ t('positions.interested') }}</h3>
+          <p>
+            {{ t('positions.contactText') }}
+          </p>
+          <a :href="`mailto:${contactEmail}`" class="btn btn-primary" v-if="contactEmail">
+            {{ t('positions.contactDirector') }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Briefcase from '@icon-park/vue-next/es/icons/Briefcase'
+
+const { t } = useI18n()
+const appConfig = useAppConfig()
+const contactEmail = computed(() => appConfig.markuxt?.contact?.email || '')
+
+interface Position {
+  title: string
+  description?: string
+  type?: string
+  _path?: string
+}
+
+// Fetch positions
+const { data: positions } = await useAsyncData('positions', () =>
+  queryContent('/positions')
+    .where({ _hidden: { $ne: true } })
+    .where({ _extension: 'md' }).find()
+)
+
+const positionsList = computed(() => positions.value || [])
+
+useHead({
+  title: t('positions.pageTitle'),
+  meta: [
+    { name: 'description', content: t('positions.pageDescription') }
+  ]
+})
+</script>
+
+<style scoped>
+.positions-page {
+  padding-top: var(--spacing-xl);
+}
+
+.positions-intro {
+  background: var(--color-bg-alt);
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-xl);
+  margin-bottom: var(--spacing-3xl);
+  border-left: 4px solid var(--color-secondary);
+}
+
+.positions-intro p {
+  font-size: 1.0625rem;
+  line-height: 1.7;
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
+.positions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: var(--spacing-xl);
+  margin-bottom: var(--spacing-3xl);
+}
+
+.position-card {
+  background: var(--color-bg-alt);
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-xl);
+  border: 1px solid var(--color-border);
+  transition: all var(--transition-base);
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.position-card:hover {
+  border-color: var(--color-secondary);
+  box-shadow: var(--shadow-xl);
+  transform: translateY(-4px);
+}
+
+.position-card__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-md);
+}
+
+.position-card__title {
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-primary);
+  margin: 0;
+  line-height: 1.3;
+}
+
+.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);
+  flex-shrink: 0;
+}
+
+.badge-accent {
+  background: var(--color-accent);
+  color: white;
+}
+
+.position-card__description {
+  font-size: 0.9375rem;
+  color: var(--color-text-muted);
+  line-height: 1.6;
+  margin-bottom: var(--spacing-lg);
+  flex: 1;
+}
+
+.position-card__footer {
+  margin-top: auto;
+}
+
+.position-card__cta {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-secondary);
+  transition: color var(--transition-fast);
+}
+
+.position-card:hover .position-card__cta {
+  color: var(--color-accent);
+}
+
+/* Coming Soon */
+.positions-coming-soon {
+  text-align: center;
+  padding: var(--spacing-4xl) var(--spacing-lg);
+  background: var(--color-bg-alt);
+  border-radius: var(--radius-2xl);
+  border: 1px dashed var(--color-border);
+  margin-bottom: var(--spacing-3xl);
+}
+
+.placeholder-icon {
+  margin-bottom: var(--spacing-lg);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.positions-coming-soon h3 {
+  font-family: var(--font-display);
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--color-primary);
+  margin-bottom: var(--spacing-md);
+}
+
+.positions-coming-soon p {
+  font-size: 1.0625rem;
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
+/* Contact Section */
+.positions-contact {
+  text-align: center;
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
+  color: white;
+  border-radius: var(--radius-2xl);
+  padding: var(--spacing-3xl) var(--spacing-xl);
+}
+
+.positions-contact h3 {
+  font-family: var(--font-display);
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: white;
+  margin-bottom: var(--spacing-md);
+}
+
+.positions-contact p {
+  font-size: 1.0625rem;
+  opacity: 0.9;
+  max-width: 600px;
+  margin: 0 auto var(--spacing-xl);
+}
+
+.positions-contact .btn {
+  background: white;
+  color: var(--color-primary);
+  border-radius: var(--radius-full); /* pill */
+  padding: 0.75rem 1.25rem;
+  box-shadow: 0 6px 18px rgba(2,6,23,0.08);
+}
+
+.positions-contact .btn:hover {
+  background: var(--color-accent);
+  color: white;
+}
+
+@media (max-width: 768px) {
+  .positions-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>