Rename core package to ui package and update references

chrisllontop · Sep 3, 2024 · c2f8b15 · c2f8b15
1 parent 4a6710b
commit c2f8b15
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ Web component that renders API documentation using the simplified output from `@
 - Easy integration as a web component.
 - Supports OpenAPI 3.x specifications.
 
-For more details, see the [`@docutopia/ui`](packages/core/README.md).
+For more details, see the [`@docutopia/ui`](packages/ui/README.md).
 
 ## Contributing
 

diff --git a/packages/core/README.md b/packages/core/README.md
diff --git a/packages/ui/README.md b/packages/ui/README.md
@@ -0,0 +1,56 @@
+
+
+# Docutopia UI
+
+## Overview
+Docutopia UI is a customizable web component designed to render API documentation from OpenAPI specifications. It offers a high level of customization, allowing you to tailor the user interface to your specific needs.
+
+## Key Features
+- **High Customization:** Customize every aspect of your API documentation using slots for a unique and branded experience.
+- **Web Component:** Easily integrate Docutopia UI into any web application as a web component.
+- **Compatible with OpenAPI 3.x:** Supports the latest OpenAPI standards for comprehensive API documentation.
+
+## Usage
+
+### Basic usage
+
+To use Docutopia UI, you need to install the package from npm:
+
+```bash
+npm install @docutopia/ui
+```
+
+Once installed, you can use the `@docutopia/ui` component in your HTML:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Docutopia UI Example</title>
+</head>
+<body>
+  <docutopia spec="https://example.com/openapi.yaml"></docutopia>
+</body>
+</html>
+```
+
+### Customization
+
+Docutopia UI allows you to customize various parts of the documentation by using slots. For example, you can customize how each endpoint is displayed in the sidebar like this:
+
+```html
+<docutopia spec="https://example.com/openapi.yaml">
+  <template slot="sidebarItem">
+    <!-- Personalization of an endpoint -->
+    <li class="sidebar-endpoint-item">
+      <a href="{{path}}">
+        <span class="method">{{method}}</span> - {{description}}
+      </a>
+    </li>
+  </template>
+</docutopia>
+```
+
+In this example, `path`, `method`, and `description` are tags that correspond to the properties from the output of `@docutopia/parser`. This output simplifies the OpenAPI specification into a format that is easier to use for customizing your UI.
diff --git a/packages/core/package.json → packages/ui/package.json b/packages/core/package.json → packages/ui/package.json
diff --git a/packages/core/rspack.config.js → packages/ui/rspack.config.js b/packages/core/rspack.config.js → packages/ui/rspack.config.js
diff --git a/...ages/core/src/components/Docutopia.svelte → packages/ui/src/components/Docutopia.svelte b/...ages/core/src/components/Docutopia.svelte → packages/ui/src/components/Docutopia.svelte
diff --git a/packages/core/src/env.d.ts → packages/ui/src/env.d.ts b/packages/core/src/env.d.ts → packages/ui/src/env.d.ts
diff --git a/packages/core/src/index.ts → packages/ui/src/index.ts b/packages/core/src/index.ts → packages/ui/src/index.ts
diff --git a/packages/core/tsconfig.json → packages/ui/tsconfig.json b/packages/core/tsconfig.json → packages/ui/tsconfig.json