docs: add dependency injection overview page

packages/di/package.json

@@ -21,9 +21,6 @@
     "watch:tsc": "tsc -b -w",
     "dev": "concurrently \"npm:watch:*\""
   },
-  "dependencies": {
-    "tslib": "^2"
-  },
   "devDependencies": {
     "@jest/globals": "^29",
     "@types/node": "^20",

packages/docs/.vitepress/config.mts

@@ -1,26 +1,92 @@
 import { defineConfig } from "vitepress";
+import { transformerTwoslash } from "@shikijs/vitepress-twoslash";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "Wroud Foundation",
   description: "Tools for modern js",
   srcDir: "./src",
+  cleanUrls: true,
+  markdown: {
+    codeTransformers: [transformerTwoslash()],
+  },
+  sitemap: {
+    hostname: "https://wroud.dev",
+    // transformItems(items) {
+    //   return items.filter((item) => !item.url.includes('migration'))
+    // }
+  },
+
+  /* prettier-ignore */
+  head: [
+    // ['link', { rel: 'icon', type: 'image/svg+xml', href: '/vitepress-logo-mini.svg' }],
+    // ['link', { rel: 'icon', type: 'image/png', href: '/vitepress-logo-mini.png' }],
+    ['meta', { name: 'theme-color', content: '#528de0' }],
+    ['meta', { property: 'og:type', content: 'website' }],
+    ['meta', { property: 'og:locale', content: 'en' }],
+    ['meta', { property: 'og:title', content: 'Wround Foundation | Empowering Modern JS Development' }],
+    ['meta', { property: 'og:site_name', content: 'Wround Foundation' }],
+    // ['meta', { property: 'og:image', content: 'https://vitepress.dev/vitepress-og.jpg' }],
+    ['meta', { property: 'og:url', content: 'https://wroud.dev/' }],
+  ],
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
+    search: {
+      provider: "local",
+    },
+    editLink: {
+      pattern:
+        "https://github.com/wroud/foundation/edit/master/packages/docs/src/:path",
+      text: "Edit this page on GitHub",
+    },
+    footer: {
+      copyright: "Copyright © 2024-present Aleksei Potsetsuev",
+      message: "Released under the MIT License.",
+    },
+
+    /* prettier-ignore */
     nav: [
-      { text: "Home", link: "/" },
-      { text: "Examples", link: "/markdown-examples" },
+      { text: "guide", link: "/guide/markdown-examples", activeMatch: "/guide/" },
+      { text: "packages", link: "/packages/overview", activeMatch: "/packages/" },
     ],
 
-    sidebar: [
-      {
-        text: "Examples",
+    sidebar: {
+      "/guide/": {
+        base: "/guide/",
         items: [
-          { text: "Markdown Examples", link: "/markdown-examples" },
-          { text: "Runtime API Examples", link: "/api-examples" },
+          {
+            text: "Examples",
+            collapsed: false,
+            items: [
+              { text: "Markdown Examples", link: "markdown-examples" },
+              { text: "Runtime API Examples", link: "api-examples" },
+            ],
+          },
         ],
       },
-    ],
+      "/packages/": {
+        base: "/packages/",
+        items: [
+          {
+            text: "Packages",
+            collapsed: false,
+            items: [
+              { text: "Overview", link: "overview" },
+              {
+                text: "DI",
+                base: "/packages/di/",
+                items: [
+                  { text: "Overview", link: "overview" },
+                  { text: "Installation", link: "installation" },
+                  { text: "Usage", link: "usage" },
+                  { text: "API", link: "api" },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    },
 
     socialLinks: [
       { icon: "github", link: "https://github.com/Wroud/foundation" },

packages/docs/.vitepress/theme/custom.css

@@ -0,0 +1,85 @@
+:root {
+  --vp-c-brand: hsl(215, 70%, 60%);
+  --vp-c-brand-light: hsl(215 70% 70%);
+  --vp-c-brand-lighter: hsl(215 70% 80%);
+  --vp-c-brand-dark: hsl(215 70% 60%);
+  --vp-c-brand-darker: hsl(215 70% 50%);
+
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    hsl(250, 100%, 60%),
+    hsl(260, 100%, 60%) 35%,
+    hsl(275, 96%, 62%) 45%,
+    hsl(260 100% 60%) 65%,
+    hsl(287, 58%, 47%)
+  );
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    hsl(0 100% 60% / 80%),
+    hsl(15 100% 60% / 80%) 40%,
+    hsl(23 96% 62% / 80%) 45%,
+    hsl(0 100% 60% / 80%) 60%,
+    hsl(358 58% 47% / 80%)
+  );
+  --vp-home-hero-image-filter: blur(40px);
+
+  --vp-c-gray-light-3: #d1d1d1;
+  --vp-c-gray-light-5: #f2f2f2;
+  --vp-c-gray-dark-2: #484848;
+  --vp-c-gray-dark-3: #3a3a3a;
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(72px);
+  }
+}
+
+/* .vp-doc h4 {
+  margin-top: 24px;
+}
+
+.vp-doc tr.transposed-table:nth-child(2n) {
+  background: transparent;
+}
+
+.vp-doc tr.transposed-table:nth-child(2n + 1) {
+  background: var(--vp-c-bg-soft);
+}
+
+.vp-doc tr.transposed-table > th {
+  white-space: nowrap;
+}
+
+svg[id^="mermaid-"] {
+  line-height: 1.5;
+  background-color: transparent !important;
+}
+
+svg[id^="mermaid-"] .edgeLabel {
+  padding: 0 !important;
+}
+
+.dark svg[id^="mermaid-"] .flowchart-link {
+  stroke: lightgrey !important;
+}
+
+.dark svg[id^="mermaid-"] .marker {
+  stroke: lightgrey !important;
+  fill: lightgrey !important;
+}
+
+.dark svg[id^="mermaid-"] .edgeLabel {
+  background-color: #585858 !important;
+}
+
+.dark svg[id^="mermaid-"] span {
+  color: #ccc !important;
+} */

packages/docs/.vitepress/theme/index.ts

@@ -0,0 +1,12 @@
+import Theme from "vitepress/theme";
+import TwoslashFloatingVue from "@shikijs/vitepress-twoslash/client";
+import "@shikijs/vitepress-twoslash/style.css";
+import type { EnhanceAppContext } from "vitepress";
+import "./custom.css";
+
+export default {
+  extends: Theme,
+  enhanceApp({ app }: EnhanceAppContext) {
+    app.use(TwoslashFloatingVue);
+  },
+};

packages/docs/package.json

@@ -3,6 +3,7 @@
   "private": true,
   "packageManager": "[email protected]",
   "devDependencies": {
+    "@shikijs/vitepress-twoslash": "^1",
     "vitepress": "^1",
     "vue": "^3"
   },

packages/docs/src/index.md

@@ -4,22 +4,36 @@ layout: home
 
 hero:
   name: "Wroud Foundation"
-  text: "Tools for modern js"
-  tagline: My great project tagline
+  text: "Empowering Modern JS Development"
+  tagline: "Simplify, Standardize, Succeed"
   actions:
     - theme: brand
-      text: Markdown Examples
-      link: /markdown-examples
+      text: Get Started
+      link: /get-started
     - theme: alt
-      text: API Examples
-      link: /api-examples
+      text: Documentation
+      link: /documentation
 
 features:
-  - title: Feature A
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature B
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature C
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - icon: 🚀
+    title: Modern JavaScript Support
+    details: Utilize the latest JavaScript features and syntax, including ES modules, for cutting-edge development.
+  - icon: 📦
+    title: Small Bundle Size
+    details: Keep your applications lean and efficient with minimal overhead.
+  - icon: 🔧
+    title: Modern Decorators
+    details: Enhance your code with powerful and intuitive decorators, making it cleaner and more maintainable.
+  - icon: 🧩
+    title: Dependency Injection
+    details: Enhance modularity and testability with an easy-to-use DI system.
+    link: /configuration-options/#output-format
+    linkText: See documentation
+  - icon: 🏗️
+    title: Build for Scale
+    details: Designed to grow with your projects, ensuring performance and maintainability in large applications.
+  - icon: 🧠
+    title: Simple by Default
+    details: Get started quickly without needing extensive knowledge, thanks to straightforward and intuitive design.
 ---
 

packages/docs/src/packages/di/overview.md

@@ -0,0 +1,39 @@
+---
+outline: deep
+---
+
+## Overview
+
+`@wroud/di` is a powerful dependency injection (DI) library inspired by the .NET framework and implemented in pure JavaScript. It leverages modern JavaScript features, including optional decorators and explicit resource management, to provide a robust and flexible DI system suitable for a wide range of applications. It also supports legacy decorators from TypeScript, ensuring broad compatibility.
+
+## Key Features
+
+- **Small Bundle Size**: Only 5kB (minified), ensuring minimal overhead.
+- **Flexible DI**: Supports multiple service injections, disposals, and various lifetimes.
+- **Modern Decorators**: Clean and maintainable code with powerful decorators.
+- **Service Lifetimes**: Singleton, transient, and scoped lifetimes.
+- **Ease of Use**: Quick start without extensive knowledge.
+- **Environment Compatibility**: Works in any JavaScript environment (browser, Node.js, etc.).
+
+## Advanced Features
+
+### Multiple Service Injection
+
+Inject multiple services seamlessly for flexible dependency management.
+
+### Resource Management and Disposal
+
+Efficiently manage and dispose of services, adhering to TC39 proposal for explicit resource management, ensuring predictable resource handling and proper cleanup.
+
+### Decorator Support
+
+Optional use of TC39 proposal-decorators (stage 3) for intuitive dependency management. Also supports legacy decorators from TypeScript for broad compatibility.
+
+## Polyfills
+
+You may need the following polyfills for full compatibility:
+
+- **Decorators**: Required for environments without native decorator support. [Learn more](https://github.com/tc39/proposal-decorators)
+- **WeakMap**: For environments that do not support WeakMap.
+- **Promise**: For environments that do not support modern Promises.
+- **Dispose**: For explicit resource management. [Learn more](https://github.com/tc39/proposal-explicit-resource-management)

packages/docs/src/packages/index.md

@@ -0,0 +1,9 @@
+---
+outline: deep
+---
+
+# Packages
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:

packages/docs/src/packages/overview.md

@@ -0,0 +1,9 @@
+---
+outline: deep
+---
+
+# Packages
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files: