docs: add base

.gitignore

@@ -11,3 +11,4 @@ yarn.lock
 .pnpm-debug.log
 tsconfig.tsbuildinfo
 tsconfig.vitest-temp.json
+docs/.vitepress/cache

docs/.vitepress/config/index.ts

@@ -0,0 +1,155 @@
+import { defineConfig } from 'vitepress'
+
+export const META_IMAGE = 'https://pinia.vuejs.org/social.png'
+export const META_URL = 'https://pinia.vuejs.org'
+export const META_TITLE = 'Pinia 🍍'
+export const META_DESCRIPTION =
+  'Intuitive, type safe, light and flexible Store for Vue'
+
+const rControl = /[\u0000-\u001f]/g
+const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'“”‘’<>,.?/]+/g
+const rCombining = /[\u0300-\u036F]/g
+
+/**
+ * Default slugification function
+ */
+export const slugify = (str: string): string =>
+  str
+    .normalize('NFKD')
+    // Remove accents
+    .replace(rCombining, '')
+    // Remove control characters
+    .replace(rControl, '')
+    // Replace special characters
+    .replace(rSpecial, '-')
+    // ensure it doesn't start with a number
+    .replace(/^(\d)/, '_$1')
+
+export default defineConfig({
+  title: 'Pinia Colada',
+  appearance: 'dark',
+
+  markdown: {
+    theme: {
+      dark: 'dracula-soft',
+      light: 'vitesse-light',
+    },
+
+    attrs: {
+      leftDelimiter: '%{',
+      rightDelimiter: '}%',
+    },
+
+    anchor: {
+      slugify,
+    },
+  },
+
+  head: [
+    ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }],
+    ['link', { rel: 'icon', type: 'image/png', href: '/logo.png' }],
+
+    ['meta', { property: 'og:url', content: META_URL }],
+    ['meta', { property: 'og:type', content: 'website' }],
+    ['meta', { property: 'og:description', content: META_DESCRIPTION }],
+
+    ['meta', { property: 'twitter:url', content: META_URL }],
+    ['meta', { property: 'twitter:title', content: META_TITLE }],
+    ['meta', { property: 'twitter:description', content: META_DESCRIPTION }],
+    ['meta', { property: 'twitter:card', content: 'summary_large_image' }],
+    ['meta', { property: 'twitter:image', content: META_IMAGE }],
+
+    [
+      'script',
+      {
+        src: 'https://cdn.usefathom.com/script.js',
+        'data-site': 'WUXSABAN',
+        'data-spa': 'auto',
+        defer: '',
+      },
+    ],
+  ],
+
+  themeConfig: {
+    logo: '/logo.svg',
+    outline: [2, 3],
+
+    socialLinks: [
+      { icon: 'x', link: 'https://twitter.com/posva' },
+      {
+        icon: 'github',
+        link: 'https://github.com/posva/pinia-colada',
+      },
+      {
+        icon: 'discord',
+        link: 'https://chat.vuejs.org',
+      },
+    ],
+
+    footer: {
+      copyright: 'Copyright © 2023-present Eduardo San Martin Morote',
+      message: 'Released under the MIT License.',
+    },
+
+    editLink: {
+      pattern: 'https://github.com/posva/pinia-colada/edit/main/docs/:path',
+      text: 'Suggest changes to this page',
+    },
+
+    search: {
+      provider: 'local',
+    },
+
+    carbonAds: {
+      code: 'CEBICK3I',
+      // custom: 'CEBICK3M',
+      placement: 'routervuejsorg',
+    },
+
+    nav: [
+      {
+        text: 'Guide',
+        link: '/guide/',
+      },
+      { text: 'API', link: '/api/', activeMatch: '^/api/' },
+      // { text: 'Cookbook', link: '/cookbook/', activeMatch: '^/cookbook/' },
+      {
+        text: 'Links',
+        items: [
+          {
+            text: 'Discussions',
+            link: 'https://github.com/posva/pinia-colada/discussions',
+          },
+          {
+            text: 'Changelog',
+            link: 'https://github.com/posva/pinia-colada/blob/main/CHANGELOG.md',
+          },
+        ],
+      },
+    ],
+
+    sidebar: {
+      // catch-all fallback
+      '/': [
+        {
+          text: 'Introduction',
+          items: [
+            {
+              text: 'What is Pinia?',
+              link: '/introduction.html',
+            },
+            {
+              text: 'Getting Started',
+              link: '/getting-started.html',
+            },
+          ],
+        },
+        {
+          text: 'Guide',
+
+          items: [],
+        },
+      ],
+    },
+  },
+})

docs/.vitepress/theme/components/AsideSponsors.vue

@@ -0,0 +1,74 @@
+<template>
+  <a
+    class="mp-banner"
+    href="https://masteringpinia.com?utm=pinia-sidebar"
+    target="_blank"
+  >
+    <img width="22" height="22" src="/mp-pinia-logo.svg" />
+    <span>
+      <p class="extra-info">Complete guide to</p>
+      <p class="heading">Mastering Pinia</p>
+      <p class="extra-info">written by its creator</p>
+    </span>
+  </a>
+</template>
+
+<style scoped>
+.banner {
+  margin-bottom: 0.5rem;
+}
+
+.mp-banner {
+  margin: 1rem 0;
+  padding: 0.4rem 0;
+  border-radius: 14px;
+  position: relative;
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 1rem;
+  background-color: var(--vp-c-bg-alt);
+  border: 2px solid var(--vp-c-bg-alt);
+  transition: border-color 0.5s;
+}
+
+.mp-banner:hover {
+  border: 2px solid var(--vp-c-brand-1);
+}
+
+.mp-banner img {
+  transition: transform 0.5s;
+  transform: scale(1.25);
+}
+.mp-banner:hover img {
+  transform: scale(1.75);
+}
+
+.mp-banner .extra-info {
+  color: var(--vp-c-text-1);
+  opacity: 0;
+  font-size: 0.7rem;
+  padding-left: 0.1rem;
+  transition: opacity 0.5s;
+}
+
+.mp-banner .heading {
+  background-image: linear-gradient(
+    120deg,
+    var(--vp-c-brand-3) 16%,
+    var(--vp-c-brand-2),
+    var(--vp-c-brand-1)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.mp-banner:hover .extra-info {
+  opacity: 0.9;
+}
+</style>

docs/.vitepress/theme/components/HomeSponsors.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="sponsors_outer">
+    <div>
+      <HomeSponsorsGroup
+        v-if="sponsors.platinum.length"
+        name="Platinum"
+        size="96"
+      />
+
+      <HomeSponsorsGroup v-if="sponsors.gold.length" name="Gold" size="38" />
+
+      <HomeSponsorsGroup
+        v-if="sponsors.silver.length"
+        name="Silver"
+        size="24"
+      />
+
+      <div class="cta">
+        <a class="become-sponsor" href="https://github.com/sponsors/posva">{{
+          translations[site.lang] || translations.en
+        }}</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import HomeSponsorsGroup from './HomeSponsorsGroup.vue'
+import sponsors from './sponsors.json'
+import { useData } from 'vitepress'
+
+const { site } = useData()
+const translations = {
+  en: 'Become a sponsor',
+  'en-US': 'Become a Sponsor!',
+  'zh-CN': '成为赞助者！',
+}
+</script>
+
+<style scoped>
+.sponsors_outer {
+  text-align: center;
+  padding: 35px 40px 45px;
+  background-color: var(--vp-c-bg-accent);
+  /* transition when toggling dark mode */
+  transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
+}
+
+.cta {
+  margin-top: 2rem;
+}
+</style>

docs/.vitepress/theme/components/HomeSponsorsGroup.vue

@@ -0,0 +1,99 @@
+<template>
+  <h3>{{ name }} Sponsors</h3>
+
+  <p>
+    <a
+      v-for="sponsor in list"
+      :key="sponsor.href"
+      :href="sponsor.href"
+      :title="sponsor.alt"
+      target="_blank"
+      rel="sponsored noopener"
+      class="sponsor_wrapper"
+      :class="
+        isDark && sponsor.imgSrcLight === sponsor.imgSrcDark && 'apply-bg'
+      "
+    >
+      <img
+        :src="sponsor.imgSrc"
+        :class="
+          isDark &&
+          sponsor.imgSrcLight === sponsor.imgSrcDark &&
+          'invert-colors'
+        "
+        :alt="sponsor.alt"
+        :style="{ height: size + 'px' }"
+      />
+    </a>
+  </p>
+</template>
+
+<script setup lang="ts">
+import sponsors from './sponsors.json'
+import { computed } from 'vue'
+import { useData } from 'vitepress'
+
+const props = withDefaults(
+  defineProps<{
+    name: 'Gold' | 'Platinum' | 'Silver' | 'Bronze'
+    size?: number | string
+  }>(),
+  {
+    size: 140,
+  }
+)
+
+const { isDark } = useData()
+
+const list = computed(() =>
+  sponsors[props.name.toLowerCase()].map((sponsor) => ({
+    ...sponsor,
+    imgSrc: isDark.value ? sponsor.imgSrcDark : sponsor.imgSrcLight,
+  }))
+)
+</script>
+
+<style scoped>
+.sponsor_wrapper {
+  padding: 5px;
+  margin: 0 3px;
+
+  border-radius: 5px;
+
+  display: inline-block;
+  text-decoration: none;
+  vertical-align: middle;
+
+  transition: background-color 300ms ease-in-out;
+}
+
+p {
+  margin: 0;
+}
+
+h3 {
+  font-size: 1.35rem;
+  font-weight: 600;
+  margin: 0.75em 0;
+}
+
+img {
+  transition: all 0.3s ease;
+  filter: grayscale(100%);
+  opacity: 0.66;
+}
+
+html:not(.light) img.invert-colors {
+  filter: invert(1) grayscale(100%);
+  background-color: transparent;
+}
+
+.sponsor_wrapper.apply-bg:hover {
+  background-color: var(--c-text);
+}
+
+.sponsor_wrapper:hover img {
+  filter: none !important;
+  opacity: 1;
+}
+</style>