docs: add VitePress site for RxJS Next

.gitignore

@@ -13,6 +13,10 @@ typings/
 # Generated
 dist/
 .tshy-build
+apps/rxjs.dev-next/docs/api/
+apps/rxjs.dev-next/tsconfig.typedoc.tsbuildinfo
+apps/rxjs.dev-next/.vitepress/cache/
+apps/rxjs.dev-next/.vitepress/dist/
 
 # Import location artifacts
 packages/rxjs/ajax/

apps/rxjs.dev-next/.vitepress/config.ts

@@ -0,0 +1,143 @@
+import { defineConfig, type UserConfig } from 'vitepress'
+import type { DefaultTheme, Outline } from 'vitepress/theme'
+import typedocSidebar from '../docs/api/typedoc-sidebar.json';
+
+
+export default defineConfig({
+  title: 'RxJS',
+  description: 'Reactive Extensions Library for JavaScript',
+  srcDir: 'docs',
+
+  // Migrated stable guides still use the Angular site's API URL scheme. Keep
+  // every non-API link checked while versioned API redirects are designed.
+  ignoreDeadLinks: [
+    /^\/api(?:\/|$)/,
+    /^\.\.?\/api\//,
+    /^\.\/\.\.\/\.\.\/\.\.\/(?:CODE_OF_CONDUCT|CONTRIBUTING)$/,
+  ],
+
+  // Markdown configuration
+  markdown: {
+    // Shiki is enabled by default in VitePress
+    // Code blocks will be highlighted automatically
+    theme: {
+      light: 'github-light',
+      dark: 'github-dark'
+    },
+    lineNumbers: true,
+  },
+
+  head: [
+    ['link', { rel: 'icon', type: 'image/png', href: '/images/favicons/favicon-96x96.png', sizes: '96x96' }],
+    ['link', { rel: 'icon', type: 'image/svg+xml', href: '/images/favicons/favicon.svg' }],
+    ['link', { rel: 'shortcut icon', href: '/images/favicons/favicon.ico' }],
+    ['link', { rel: 'apple-touch-icon', sizes: '180x180', href: '/images/favicons/apple-touch-icon.png' }],
+    ['link', { rel: 'manifest', href: '/site.webmanifest' }]
+  ],
+
+  // Theme configuration
+  themeConfig: {
+    outline: {
+      level: [2, 3, 4, 5] as Outline['level'],
+    },
+    logo: { src: '/images/favicons/favicon.svg', width: 24, height: 24 },
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/ReactiveX/rxjs' }
+    ],
+    search: {
+      provider: 'local'
+    },
+    nav: [
+      { text: 'RxJS Next', link: '/next/' },
+      { text: 'API Reference', link: '/api' },
+      { text: 'RxJS 7 Guides', link: '/guide/overview' },
+      {
+        text: 'About',
+        items: [
+          { text: 'Team', link: '/team' },
+          { text: 'Code of Conduct', link: '/code-of-conduct' },
+          { text: 'Black Lives Matter', link: '/black-lives-matter' }
+        ]
+      },
+
+    ],
+    sidebar: {
+      '/next/': [
+        {
+          text: 'RxJS Next',
+          items: [{ text: 'Overview', link: '/next/' }]
+        }
+      ],
+      '/guide': [
+        {
+          text: 'Getting Started',
+          items: [
+            {
+              text: 'Overview', collapsed: true, items: [
+                { text: 'Introduction', link: '/guide/overview' },
+                { text: 'Observables', link: '/guide/observable' },
+                { text: 'Observer', link: '/guide/observer' },
+                { text: 'Operators', link: '/guide/operators' },
+                { text: 'Subscription', link: '/guide/subscription' },
+                { text: 'Subjects', link: '/guide/subject' },
+                { text: 'Scheduler', link: '/guide/scheduler' },
+                { text: 'Higher-Order Observables', link: '/guide/higher-order-observables' },
+              ]
+            },
+            {
+              text: 'Installation',
+              link: '/guide/installation'
+            },
+            {
+              text: 'Importing',
+              link: '/guide/importing'
+            },
+            {
+              text: 'Glossary',
+              collapsed: true,
+              items: [
+                { text: 'Core Semantics', link: '/guide/core-semantics' },
+                { text: 'Glossary', link: '/guide/glossary-and-semantics' }
+              ]
+            },
+            {
+              text: 'Testing',
+              items: [
+                { text: 'Marble Testing', link: '/guide/testing/marble-testing' }
+              ]
+            },
+            { text: 'Migration Guide', link: '/deprecations' }
+          ]
+        },
+      ],
+      '/deprecations': [
+        {
+          text: 'Deprecations & Breaking Changes',
+          items: [
+            {
+              text: 'v7.x Breaking Changes',
+              link: '/deprecations/breaking-changes',
+              items: [
+                { text: 'v6 to v7 change summary', link: '/deprecations/6-to-7-change-summary' },
+                { text: 'Scheduler Argument', link: '/deprecations/scheduler-argument' },
+                { text: 'Subscribe Arguments', link: '/deprecations/subscribe-arguments' },
+                { text: 'ResultSelector Arguments', link: '/deprecations/result-selector' },
+                { text: 'Array Arguments', link: '/deprecations/array-argument' },
+                { text: 'Multicasting', link: '/deprecations/multicasting' },
+                { text: 'Conversion to Promises', link: '/deprecations/to-promise' },
+
+              ]
+            },
+            { text: 'v6.x Changelog', link: 'https://github.com/ReactiveX/rxjs/blob/6.x/CHANGELOG.md' },
+          ]
+        },
+      ],
+      '/api': [
+        {
+          text: 'API Reference',
+          items: typedocSidebar,
+        }
+      ]
+    }
+  },
+} satisfies UserConfig<DefaultTheme.Config>);

apps/rxjs.dev-next/.vitepress/theme/index.ts

@@ -0,0 +1,8 @@
+import DefaultTheme from 'vitepress/theme'
+import type { Theme } from 'vitepress'
+
+import './style.css'
+
+export default {
+  extends: DefaultTheme,
+} satisfies Theme

apps/rxjs.dev-next/.vitepress/theme/shiki.ts

@@ -0,0 +1,14 @@
+// Shiki is already integrated in VitePress by default
+// This file can be used for custom Shiki configuration if needed
+
+import type { UserConfig } from 'vitepress';
+
+// VitePress uses Shiki by default for syntax highlighting
+// No additional configuration needed unless we want custom themes or languages
+
+export const shikiConfig = {
+  // VitePress default Shiki theme
+  theme: 'github-dark',
+  // Additional languages can be added here if needed
+  langs: ['typescript', 'javascript', 'json', 'bash'],
+};

apps/rxjs.dev-next/.vitepress/theme/style.css

@@ -0,0 +1,66 @@
+@import 'tailwindcss';
+
+/* Tell Tailwind where to scan for classes */
+@source "../../components";
+@source "../../docs";
+
+:root {
+  /* brand-1: most solid color for colored text (must satisfy contrast on brand-soft) */
+  --vp-c-brand-1: #f03aa0;
+  --vp-c-brand-2: #ee1090;
+  --vp-c-brand-3: #d00e80;
+  /* brand-soft: subtle background (semi-transparent, must satisfy contrast with brand-1 text) */
+  --vp-c-brand-soft: rgba(238, 16, 144, 0.14);
+
+  /* Hero section customization */
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: linear-gradient(-45deg, var(--vp-c-brand-3) 30%, var(--vp-c-brand-1) 50%);
+}
+
+.dark {
+  /* Dark mode brand colors - adjust if needed for better contrast */
+  --vp-c-brand-1: #f03aa0;
+  --vp-c-brand-2: #ee1090;
+  --vp-c-brand-3: #d00e80;
+  --vp-c-brand-soft: rgba(238, 16, 144, 0.16);
+
+  --vp-home-hero-name-background: linear-gradient(-45deg, var(--vp-c-brand-1) 30%, var(--vp-c-brand-3) 50%);
+  --vp-home-hero-image-filter: blur(160px);
+}
+
+@theme static {
+  /* Define new custom color */
+  --color-brand-300: #f03aa0;
+  --color-brand-400: #ee1090;
+  --color-brand-500: #ee1090;
+  --color-brand-600: #d00e80;
+}
+
+.only-dark {
+  display: none;
+}
+.dark .only-dark {
+  display: initial;
+}
+.dark .only-light {
+  display: none;
+}
+
+img[src*='marble'] {
+  border-radius: 8px;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  border: revert-layer;
+  padding: revert-layer;
+  background-color: revert-layer;
+}
+
+.image-bg {
+  top: 60% !important;
+  left: 50% !important;
+}

apps/rxjs.dev-next/README.md

@@ -0,0 +1,21 @@
+# RxJS Dev Next
+
+This is the next-generation documentation site for RxJS, built with VitePress.
+
+## Development
+
+```bash
+pnpm dev
+```
+
+## Build
+
+```bash
+pnpm build
+```
+
+## Preview
+
+```bash
+pnpm preview
+```

apps/rxjs.dev-next/components/ApiSection.vue

@@ -0,0 +1,119 @@
+<script lang="ts">
+export const kindForUrl = (url: string) => {
+  const kindRe = /\/api\/.+\/(.+)\//;
+  return kindRe.exec(url)?.[1]!;
+};
+
+export const kindMappings = {
+  functions: {
+    icon: 'i-lucide-code',
+    color: 'success',
+    label: 'Functions',
+    value: 'functions',
+  },
+  classes: {
+    icon: 'i-lucide-box',
+    color: 'info',
+    label: 'Classes',
+    value: 'classes',
+  },
+  variables: {
+    icon: 'i-lucide-key',
+    color: 'primary',
+    label: 'Variables',
+    value: 'variables',
+  },
+  enumerations: {
+    icon: 'i-lucide-list-check',
+    color: 'warning',
+    label: 'Enumerations',
+    value: 'enumerations',
+  },
+  interfaces: {
+    icon: 'i-lucide-layout-dashboard',
+    color: 'neutral',
+    label: 'Interfaces',
+    value: 'interfaces',
+  },
+  'type-aliases': {
+    icon: 'i-lucide-type',
+    color: 'error',
+    label: 'Type Aliases',
+    value: 'type-aliases',
+  },
+}
+
+export const urlToKind = (url: string) => {
+  return kindMappings[kindForUrl(url)];
+}
+</script>
+
+<script setup lang="ts">
+defineProps<{
+  items: any[];
+}>();
+
+
+const makePageLinks = (items: any[]) => {
+  return items.map((item: any) => {
+    const kind = urlToKind(item.link);
+    return {
+      label: item.text,
+      to: item.link.replace('.md', ''),
+      icon: kind?.icon,
+      color: kind?.color,
+    };
+  });
+}
+</script>
+
+<template>
+  <div class="api-grid" v-show="items.length > 0">
+    <a v-for="item in makePageLinks(items)" :key="item.label" :href="item.to" class="api-card">
+      <span>{{ item.label }}</span>
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.api-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.api-card {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 0.7rem 0.9rem;
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-brand-1) !important;
+  font-weight: 600;
+  text-decoration: none !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.api-card:hover {
+  border-color: var(--vp-c-brand-1);
+  background: var(--vp-c-brand-soft);
+}
+
+@media (min-width: 768px) {
+  .api-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+:deep(ul) {
+  list-style: none !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+</style>