feat(content): update VitePress configuration and remove unused Splid…

…e components

.gitignore

@@ -1,3 +1,4 @@
 .env
 node_modules
-content/.vitepress/cache
+content/.vitepress/cache
+content/.vitepress/dist

content/.vitepress/config.mts

@@ -49,6 +49,8 @@ export default defineConfig({
     ['link', { rel: 'icon', type: 'image/png', sizes: '16x16', href: 'https://static.harmony-within.us/favicon/favicon-16x16.png' }],
     ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: 'https://static.harmony-within.us/favicon/apple-touch-icon.png' }],
     ['link', { rel: 'shortcut icon', href: 'https://static.harmony-within.us/favicon/favicon.ico' }],
+    ['link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css' }],
+    ['script', { src: 'https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js' }],
     ['meta', { name: 'msapplication-TileColor', content: '#f8acbc' }],
 
   ],

content/.vitepress/theme/custom.css

@@ -1,6 +1,3 @@
-@import '@splidejs/vue-splide/css';
-@import '@splidejs/vue-splide/css/core';
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

content/.vitepress/theme/index.ts

@@ -1,11 +1,9 @@
 import DefaultTheme from 'vitepress/theme'
-import { Splide, SplideSlide } from '@splidejs/vue-splide'
 import './custom.css'
 
 export default {
   ...DefaultTheme,
   enhanceApp({ app }) {
-    app.component('Splide', Splide)
-    app.component('SplideSlide', SplideSlide)
+    //
   }
 }

content/index.md

@@ -26,22 +26,14 @@ features:
 <script setup>
 import { ref, onMounted } from 'vue'
 import { format } from 'date-fns'
-import { Splide, SplideSlide } from '@splidejs/vue-splide'
 
-const announcements = ref([
- /* {
-    title: "New Healthcare Resources Available",
-    date: "2024-05-01",
-    content: "We've updated our healthcare resources section with new information about trans-inclusive healthcare providers.",
-    image: "/images/healthcare.jpg"
-  },*/
+const announcements =
   {
     title: "Lorem Ipsum",
     date: "2024-01-01",
     content: "Lorem ipsum...",
     image: "/images"
   }
-])
 
 const posts = ref([
   {
@@ -66,18 +58,15 @@ const formatDate = (date) => format(new Date(date), 'MMMM d, yyyy')
     <h2 class="text-4xl font-bold mb-8 bg-gradient-to-r from-[#5bcefa] via-[#f5a9b8] to-white bg-clip-text text-transparent">
       Latest Announcements
     </h2>
-  <Splide :options="{ type: 'loop', perPage: 1, autoplay: true, interval: 4000, pagination: false }">
-      <SplideSlide v-for="announcement in announcements" :key="announcement.title">
         <div class="announcement-card flex flex-col md:flex-row items-center gap-8">
           <div class="md:w-1/2">
-            <h3 class="text-2xl font-semibold mb-3">{{ announcement.title }}</h3>
-            <p class="text-sm text-gray-400 mb-3">{{ formatDate(announcement.date) }}</p>
-            <p class="text-lg">{{ announcement.content }}</p>
+            <h3 class="text-2xl font-semibold mb-3">{{ announcements.title }}</h3>
+            <p class="text-sm text-gray-400 mb-3">{{ announcements.date }}</p>
+            <p class="text-lg">{{ announcements.content }}</p>
           </div>
           <div class="md:w-1/2 h-64 bg-gradient-to-br from-[#5bcefa]/20 to-[#f5a9b8]/20 rounded-xl"></div>
         </div>
-      </SplideSlide>
-    </Splide>
+
   </section>
 
   <section class="mb-12">

package.json

@@ -11,7 +11,6 @@
     "vue": "^3.5.12"
   },
   "dependencies": {
-    "@splidejs/vue-splide": "^0.6.12",
     "@types/d3": "^7.4.3",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
     "autoprefixer": "^10.4.20",
@@ -21,7 +20,6 @@
     "ical-generator": "^8.0.1",
     "markdown-yaml-metadata-parser": "^3.0.0",
     "postcss": "^8.4.47",
-    "sass": "^1.80.3",
     "tailwindcss": "^3.4.14"
   }
 }