Merge pull request #91 from remotestorage/feature/vitepress

Migrate to VitePress, include rs.js docs

.github/workflows/deploy.yml

@@ -0,0 +1,58 @@
+name: Deploy website to Pages
+
+on:
+  push:
+    branches: [master]
+
+  # Allows to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Not needed if lastUpdated is not enabled
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Install dependencies
+        run: npm ci
+      - name: Build with VitePress
+        run: npm run docs:build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -1,3 +1,5 @@
+.vitepress/dist
+.vitepress/cache
 _site
 node_modules
 tmp

.gitmodules

@@ -0,0 +1,4 @@
+[submodule "rs.js"]
+	path = rs.js
+	url = git@github.com:remotestorage/remotestorage.js.git
+	branch = master

.vitepress/config.mts

@@ -0,0 +1,93 @@
+import { defineConfig } from 'vitepress'
+import rsjsConfig from '../rs.js/docs/.vitepress/config.mts'
+
+type Item = {
+  text: string;
+  link: string;
+  items?: Item[];
+};
+
+const prefixLinks = (array: Item[], prefix: string) => {
+  array.forEach(item => {
+    if (item.link) {
+      item.link = prefix + item.link;
+    }
+    if (item.items) {
+      prefixLinks(item.items, prefix);
+    }
+  });
+};
+
+const rsjsSidebarConfig = rsjsConfig.themeConfig.sidebar
+prefixLinks(rsjsSidebarConfig, '/rs.js/docs')
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "remoteStorage",
+  description: "An open protocol for per-user storage on the Web",
+  srcExclude: ['./wiki', './rs.js/*.md'],
+  ignoreDeadLinks: [
+    /^http:\/\/localhost/,
+  ],
+
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    logo: "/logo.svg",
+    externalLinkIcon: true,
+    outline: { level: [2, 3] },
+
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Getting started', link: '/get' },
+      { text: 'remoteStorage.js', link: '/rs.js/docs' },
+      { text: 'Forums', link: 'https://community.remotestorage.io' },
+    ],
+
+    sidebar: {
+      '/': [
+        {
+          items: [
+            { text: 'Getting started', link: '/get' },
+            { text: 'How it works',
+              items: [
+                { text: 'Unhosted Web Apps', link: '/unhosted' },
+                { text: 'Protocol', link: '/protocol' },
+              ]
+            },
+            { text: 'Apps', link: '/apps' },
+            { text: 'Servers', link: '/servers' },
+            { text: 'Contribute', link: '/contribute' },
+            { text: 'Design', link: '/design' },
+          ]
+        }
+      ],
+      '/rs.js/': rsjsSidebarConfig
+    },
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/remotestorage' },
+      { icon: 'mastodon', link: 'https://kosmos.social/@remotestorage' }
+    ],
+
+    editLink: {
+      pattern: ({ filePath }) => {
+        if (filePath.startsWith('rs.js/')) {
+          return `https://github.com/remotestorage/remotestorage.js/edit/master/${filePath}`
+        } else {
+          return `https://github.com/remotestorage/website/edit/master/${filePath}`
+        }
+      }
+    },
+
+    search: {
+      provider: 'local'
+    }
+  },
+
+  async transformPageData(pageData, { siteConfig }) {
+    if (pageData.relativePath.startsWith('rs.js')) {
+      pageData.titleTemplate = 'remoteStorage.js'
+    }
+    return pageData;
+  }
+})

.vitepress/theme/components/Contributors.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const contributors = ref([])
+
+onMounted(async () => {
+  try {
+    const response = await fetch('/data/contributors.json')
+    if (!response.ok) throw new Error('Failed to fetch contributors')
+    contributors.value = await response.json()
+  } catch (error) {
+    console.error(error)
+  }
+})
+</script>
+
+<template>
+  <ul class="contributors">
+    <li v-for="contributor in contributors" :key="contributor.github" class="contributor">
+      <a :href="contributor.github" target="_blank" rel="noopener noreferrer">
+        <img :src="contributor.avatar" :alt="contributor.name" class="avatar" />
+      </a>
+    </li>
+  </ul>
+</template>
+
+
+<style scoped>
+.contributors {
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: start;
+  padding: 0;
+  margin-top: 2rem;
+}
+
+.contributor {
+  text-align: center;
+}
+
+.avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  transition: transform 0.3s;
+}
+
+.avatar:hover {
+  transform: scale(1.1);
+}
+</style>

.vitepress/theme/components/DeveloperFeatures.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useData } from 'vitepress/dist/client/theme-default/composables/data'
+import VPFeatures from 'vitepress/dist/client/theme-default/components/VPFeatures.vue'
+
+const { frontmatter: fm } = useData()
+</script>
+
+<template>
+  <h2>{{fm.devFeaturesTitle}}</h2>
+
+  <VPFeatures
+    v-if="fm.devFeatures"
+    class="devFeatures"
+    :features="fm.devFeatures"
+  />
+</template>
+
+<style scoped>
+  h2 {
+    max-width: 1152px;
+    margin: 48px auto 32px;
+    border-top: 1px solid var(--vp-c-divider);
+    padding-top: 24px;
+    letter-spacing: -0.02em;
+    line-height: 32px;
+    font-size: 24px;
+    font-weight: 600;
+  }
+</style>

.vitepress/theme/index.js

@@ -0,0 +1,20 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
+import DefaultTheme from 'vitepress/theme'
+import DeveloperFeatures from './components/DeveloperFeatures.vue'
+import Contributors from './components/Contributors.vue'
+import './style.css'
+
+/** @type {import('vitepress').Theme} */
+export default {
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+      'home-features-after': () => h(DeveloperFeatures)
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+    })
+  },
+  enhanceApp({ app, router, siteData }) {
+    app.component('Contributors', Contributors)
+  }
+}