feat: blog post about sunsetting

Co-authored-by: Alexander Niebuhr <45965090+alexanderniebuhr@users.noreply.github.com>

.vitepress/config/nav.ts

@@ -166,6 +166,9 @@ export const nav: DefaultTheme.Config['nav'] = [
   {
     text: 'Posts',
     items: [
+      { text: 'Windi CSS is Sunsetting', link: '/posts/sunsetting' },
+      { text: 'separator', link: 'separator' },
+
       // { text: 'API', link: '/posts/api' },
       { text: 'The Story of WindiCSS', link: '/posts/story' },
       { text: 'WindiCSS v2.2 is here', link: '/posts/v22' },

.vitepress/config/sidebar.ts

@@ -132,6 +132,12 @@ export const sidebar: DefaultTheme.Config['sidebar'] = {
     },
   ],
   '/posts': [
+    {
+      text: 'Important Updates',
+      children: [
+        { text: 'Windi CSS is Sunsetting', link: '/posts/sunsetting' },
+      ],
+    },
     {
       text: 'Releases',
       children: [

.vitepress/theme/Layout.vue

@@ -1,4 +1,5 @@
 <template>
   <TheLayout />
+  <SunsettingNote />
   <Debug />
 </template>

.vitepress/theme/components/molecules/SunsettingNote.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from '@vue/reactivity';
+import { useLocalStorage } from '@vueuse/core'
+import { useRoute } from 'vitepress'
+
+const clicked = useLocalStorage('sunsetting-note-clicked', false)
+
+const route = useRoute()
+
+const showNote = computed(() => {
+  if (route.path === '/posts/sunsetting')
+    return false
+  if (route.path === '/')
+    return true
+  return !clicked.value
+})
+</script>
+
+<template>
+  <div class="fixed left-0 right-0 bottom-0 bg-$windi-bg" v-if="showNote">
+    <a
+      class="
+        bg-orange-600 bg-opacity-5
+        flex rounded items-center gap-4
+        text-orange-500
+        hover:bg-opacity-10
+        p-4 md:px-6
+        text-sm lg:text-base"
+      @click="clicked = true"
+      href="/posts/sunsetting"
+    >
+      <CarbonSunset class="text-2xl flex-none" />
+      <div class="flex flex-col">
+        <span class="font-bold flex gap-2"> Windi CSS is Sunsetting</span>
+        We recommend new projects to consider alternatives. Click for more information.
+      </div>
+    </a>
+  </div>
+</template>

.vitepress/theme/components/organisms/HomeHero.vue

@@ -46,7 +46,6 @@ const heroText = computed(() => frontmatter.value.heroText || site.value.title)
           </div>
         </div>
       </div>
-      <HomeNews />
     </div>
   </header>
 </template>

components.d.ts

@@ -8,25 +8,19 @@ declare module 'vue' {
     AppButton: typeof import('./.vitepress/theme/components/atoms/AppButton.vue')['default']
     AppLayout: typeof import('./.vitepress/theme/components/atoms/AppLayout.vue')['default']
     AppLogo: typeof import('./.vitepress/theme/components/atoms/AppLogo.vue')['default']
-    'Bx:bxCheckCircle': typeof import('~icons/bx/bx-check-circle')['default']
-    'Bx:bxClipboard': typeof import('~icons/bx/bx-clipboard')['default']
     'Bx:bxMoon': typeof import('~icons/bx/bx-moon')['default']
     'Carbon:arrowLeft': typeof import('~icons/carbon/arrow-left')['default']
-    'Carbon:arrowRight': typeof import('~icons/carbon/arrow-right')['default']
     'Carbon:camera': typeof import('~icons/carbon/camera')['default']
     'Carbon:chartBubblePacked': typeof import('~icons/carbon/chart-bubble-packed')['default']
     'Carbon:checkmarkOutline': typeof import('~icons/carbon/checkmark-outline')['default']
     'Carbon:circlePacking': typeof import('~icons/carbon/circle-packing')['default']
     'Carbon:copy': typeof import('~icons/carbon/copy')['default']
-    'Carbon:download': typeof import('~icons/carbon/download')['default']
-    'Carbon:openPanelBottom': typeof import('~icons/carbon/open-panel-bottom')['default']
-    'Carbon:openPanelLeft': typeof import('~icons/carbon/open-panel-left')['default']
-    'Carbon:openPanelRight': typeof import('~icons/carbon/open-panel-right')['default']
     'Carbon:pen': typeof import('~icons/carbon/pen')['default']
     'Carbon:settingsAdjust': typeof import('~icons/carbon/settings-adjust')['default']
     CarbonArrowLeft: typeof import('~icons/carbon/arrow-left')['default']
     CarbonArrowRight: typeof import('~icons/carbon/arrow-right')['default']
     CarbonLogoGithub: typeof import('~icons/carbon/logo-github')['default']
+    CarbonSunset: typeof import('~icons/carbon/sunset')['default']
     ColorsPalette: typeof import('./.vitepress/theme/components/global/ColorsPalette.vue')['default']
     ContentLayout: typeof import('./.vitepress/theme/components/atoms/ContentLayout.vue')['default']
     Customizing: typeof import('./.vitepress/theme/components/global/Customizing.vue')['default']
@@ -45,9 +39,6 @@ declare module 'vue' {
     LastUpdated: typeof import('./.vitepress/theme/components/molecules/LastUpdated.vue')['default']
     LearnMore: typeof import('./.vitepress/theme/components/global/LearnMore.vue')['default']
     Logo: typeof import('./.vitepress/theme/components/atoms/logos/Logo.vue')['default']
-    'Logos:nuxt': typeof import('~icons/logos/nuxt')['default']
-    'Logos:svelteIcon': typeof import('~icons/logos/svelte-icon')['default']
-    'Logos:vue': typeof import('~icons/logos/vue')['default']
     NavLink: typeof import('./.vitepress/theme/components/molecules/NavLink.vue')['default']
     NextAndPrevLinks: typeof import('./.vitepress/theme/components/molecules/NextAndPrevLinks.vue')['default']
     NuxtJs: typeof import('./.vitepress/theme/components/atoms/logos/NuxtJs.vue')['default']
@@ -75,6 +66,7 @@ declare module 'vue' {
     SidebarNav: typeof import('./.vitepress/theme/components/molecules/sidebar/SidebarNav.vue')['default']
     SingleColor: typeof import('./.vitepress/theme/components/molecules/SingleColor.vue')['default']
     Sponsors: typeof import('./.vitepress/theme/components/global/Sponsors.vue')['default']
+    SunsettingNote: typeof import('./.vitepress/theme/components/molecules/SunsettingNote.vue')['default']
     TableOfContents: typeof import('./.vitepress/theme/components/molecules/TableOfContents.vue')['default']
     TheHeader: typeof import('./.vitepress/theme/components/templates/TheHeader.vue')['default']
     TheHome: typeof import('./.vitepress/theme/components/templates/TheHome.vue')['default']

index.md

@@ -12,9 +12,6 @@ altActionLink: /features/
 heroImage: /assets/logo.svg
 heroAlt: Windi CSS logo
 
-newsTitle: 👉 Check out new features in Windi CSS v3.4
-newsLink: /posts/v34.html
-
 footer: MIT Licensed | Copyright © 2020-2021 Windi CSS Contributors
 ---
 

package.json

@@ -1,6 +1,7 @@
 {
   "private": true,
   "license": "MIT",
+  "packageManager": "pnpm@7.32.0",
   "scripts": {
     "dev": "vitepress dev",
     "functions": "netlify dev",

posts/sunsetting.md

@@ -0,0 +1,14 @@
+# Windi CSS is Sunsetting
+
+Initiated by [@voorjaar](https://github.com/voorjaar) in December 2020, Windi CSS was created to explore the possibilities of solving [Tailwind's performance issues](https://v1.tailwindcss.com/docs/controlling-file-size). Our efficient and powerful [on-demand approach](https://windicss.org/guide/#why-windi-css) later inspired Tailwind to implement [their "JIT" engine](https://v2.tailwindcss.com/docs/just-in-time-mode), the same methodology of Windi CSS. Along the way, we delved into various possibilities for enhancing developer experience, introducing features such as [Variant Group](https://windicss.org/features/variant-groups.html), [Shortcuts](https://windicss.org/features/shortcuts.html), [Attributify Mode](https://windicss.org/features/attributify.html), [Visual Analyzer](https://windicss.org/features/analyzer.html). These innovations influenced [UnoCSS](https://unocss.dev/) and significantly improved the developer experience across other atomic CSS frameworks.
+
+As team members have pursued new opportunities, our time dedicated to maintaining Windi CSS has become quite limited. Regrettably, we no longer have the necessary time and resources to actively work on the project, making it challenging to uphold the quality and responsiveness our community deserves. After much reflection and with a heavy heart, our team has decided to sunset the project, and we believe it's essential to communicate this transparently and responsibly to the community.
+
+This means that we won't expect adding new features to Windi CSS in the future, but we will still provide security fixes as needed. **Windi CSS is not deprecated, and existing users and projects can continue to use it without issues.** Meanwhile, we encourage you to explore alternative solutions for your future projects.
+
+For new projects, we recommend considering alternatives like [UnoCSS](https://unocss.dev/) or [Tailwind CSS](https://tailwindcss.com/). UnoCSS incorporates many of the great features from Windi CSS, which could make the transition easier if you are already familiar with those features. On the other hand, Tailwind has a huge community and the plugins ecosystem. Both alternatives are actively maintained, ensuring a more sustainable and reliable experience.
+
+In closing, we want to express our deepest gratitude to the entire Windi CSS community for your unwavering support, enthusiasm, collaboration, and sponsoring. We are incredibly proud of the project we built together and the valuable lessons learned throughout this journey. Thank you for being an integral part of our adventure, and we wish you all the best in your future endeavors.
+
+Warmest regards,<br>
+The Windi CSS Team