update docs

docs/.vitepress/config.ts

@@ -1,5 +1,7 @@
 import { defineConfig } from 'vitepress';
 
+const currentYear = new Date().getFullYear();
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   base: '/vuejs-code-block/',
@@ -17,16 +19,10 @@ export default defineConfig({
         target: '_self',
         rel: 'noopener'
       },
-      { text: 'Example', link: '/example' }
-    ],
-
-    sidebar: [
+      { text: 'Guide', link: '/get-started' },
       {
-        text: 'Example',
-        items: [
-          { text: 'Markdown Examples', link: '/example' },
-          { text: 'Runtime API Examples', link: '/api-examples' }
-        ]
+        text: 'Changelog',
+        items: [{ text: 'v0.0.1', link: '/' }]
       }
     ],
 
@@ -47,6 +43,31 @@ export default defineConfig({
         icon: 'npm',
         link: 'https://www.npmjs.com/package/vuejs-code-block'
       }
-    ]
+    ],
+
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          {
+            text: 'Get Started',
+            link: '/get-started'
+          },
+          {
+            text: 'Why',
+            link: '/why'
+          }
+        ]
+      },
+      {
+        text: 'Components',
+        collapsed: true
+      }
+    ],
+
+    footer: {
+      message: 'Released under the MIT License.',
+      copyright: `Copyright ©${currentYear}-present Hetari`
+    }
   }
 });

docs/.vitepress/theme/custom.css

@@ -5,14 +5,14 @@
   --vp-home-hero-name-color: transparent;
   --vp-home-hero-name-background: -webkit-linear-gradient(
     120deg,
-    #04a86f 30%,
+    #04a86f 10%,
     #59a4bd
   );
 
   --vp-home-hero-image-background-image: linear-gradient(
-    45deg,
-    #0de08c94 50%,
-    #07865a91 50%
+    0deg,
+    #243a4c 50%,
+    #00cf87 50%
   );
   --vp-home-hero-image-filter: blur(80px);
 }
@@ -21,7 +21,7 @@
   --vp-home-hero-name-color: transparent;
   --vp-home-hero-name-background: -webkit-linear-gradient(
     120deg,
-    #11eb9d 30%,
+    #11eb9d 10%,
     #41d1ff
   );
   --vp-home-hero-image-background-image: linear-gradient(

docs/get-started.md

@@ -0,0 +1,111 @@
+---
+layout: doc
+---
+
+# Get Started with vuejs-code-block
+
+
+## Installation
+
+To get started, install the package via npm:
+
+```bash
+npm install vuejs-code-block
+```
+
+Alternatively, if you're using Yarn:
+
+```bash
+yarn add vuejs-code-block
+```
+
+## Basic Usage
+
+Once installed, you can start using the `CodeBlock` component to display syntax-highlighted code in your Vue app. Here’s a simple example:
+
+```vue
+<template>
+  <CodeBlock :code="exampleCode" language="javascript" />
+</template>
+
+<script setup>
+import { CodeBlock } from 'vuejs-code-block'
+
+const exampleCode = `function greet(name) {
+  console.log('Hello, ' + name);
+}
+
+greet('World');
+`
+</script>
+```
+
+### Props:
+- `code`: The actual code you want to display.
+- `language`: The programming language for syntax highlighting.
+
+## Advanced Features
+
+### Line Numbers
+
+To display line numbers alongside your code, simply use the `:show-line-numbers` prop.
+
+```vue
+<CodeBlock :code="exampleCode" language="javascript" :show-line-numbers="true" />
+```
+
+### Line Highlighting
+
+You can also highlight specific lines by using the `:highlight-lines` prop.
+
+```vue
+<CodeBlock :code="exampleCode" language="javascript" :highlight-lines="[1, 3]" />
+```
+
+## Custom Styling
+
+One of the key features of **vuejs-code-block** is that it provides **unstyled** components, allowing you to style them however you like. For example, using CSS or Tailwind classes:
+
+```vue
+<template>
+  <div class="p-4 bg-gray-800 rounded-lg">
+    <CodeBlock :code="exampleCode" language="javascript" />
+  </div>
+</template>
+
+<script setup>
+import { CodeBlock } from 'vuejs-code-block'
+
+const exampleCode = `function greet(name) {
+  console.log('Hello, ' + name);
+}
+
+greet('World');
+`
+</script>
+
+<style>
+  .my-custom-code {
+    color: #00ff00;
+  }
+</style>
+```
+
+## Customization & Configuration
+
+With **vuejs-code-block**, you can extend functionality to suit your needs:
+
+- **Custom Line Numbers**: Customize how line numbers appear.
+- **Syntax Themes**: Use Prism.js themes or create your own.
+- **Dynamic Code Blocks**: Bind code content from your app’s data for interactive code examples.
+
+## Conclusion
+
+You now have everything you need to start building powerful, customizable code blocks in your Vue.js or VitePress projects using **vuejs-code-block**. For more advanced use cases, be sure to explore the documentation and available props.
+
+## Useful Links
+
+- [GitHub Repository](https://github.com/hetari/vuejs-code-block)
+- [Prism.js Documentation](https://prismjs.com/)
+- [Vue.js Documentation](https://vuejs.org/)
+

docs/index.md

@@ -11,16 +11,31 @@ hero:
     alt: Vuejs Code Block Logo
   actions:
     - theme: brand
-      text: Markdown Examples
-      link: /markdown-examples
+      text: Quickstart
+      link: /get-started
     - theme: alt
-      text: API Examples
-      link: /api-examples
+      text: Why Vuejs Code Block?
+      link: /why
+    - theme: alt
+      text: GitHub
+      link: https://github.com/hetari/vuejs-code-block
 
 features:
   - title: TypeScript
-    details: Fully type-safe components, made with 💙 TypeScript.
-  - title: Unstyled
-    details: Unstyled UI components to build powerful code blocks.
----
+    icon:
+      src: '/typescript.png'
+      alt: 'Typescript Support'
+    details: Fully type-safe components, made with 💙 TypeScript. Enjoy the best developer experience with type safety.
+  - title: Unstyled & Flexible
+    icon:
+      src: '/tailwind.png'
+      alt: 'Unstyled Support'
+    details: Full control over how your code blocks are styled. No predefined limitations—customize each block exactly to your needs.
+  - icon: ⚡️
+    title: Dynamic & Reactive with Vue
+    details: Leverage Vue's powerful reactive data and composition API to build dynamic, highly customizable code blocks effortlessly.
+  - icon: 🚀
+    title: Modular & Lightweight Components
+    details: Minimal dependency, with primitive components designed for flexibility. Compose the exact features you want in your code block.
 
+---

docs/why.md

@@ -0,0 +1,35 @@
+---
+layout: doc
+---
+
+
+# Why Choose vuejs-code-block?
+
+Building code blocks can be surprisingly complex, especially when you're aiming for more than just basic syntax highlighting. While there are many libraries available that handle syntax highlighting, the moment you require additional features—like **line numbers**, **line highlighting**, or **word-level customization**—things get tricky. 
+
+If you're a technical writer or developer creating documentation or blog posts, these features are often essential. However, most syntax highlighting libraries fall short, either lacking these features entirely or making it difficult to customize or extend their functionality.
+
+**vuejs-code-block** simplifies this process by focusing on the core functionality, leaving all styling and customization in your hands. Whether you need a basic code block or a highly customized one with advanced features, vuejs-code-block gives you the building blocks to achieve exactly what you want—without unnecessary bloat.
+
+## How It Works
+
+<!-- TODO: -->
+<!-- **prismjs** -->
+`vuejs-code-block` is built on top of the widely-used library for syntax highlighting. We've extended it by adding additional features such as:
+
+1. **Line Numbers**: Toggle line numbers on or off.
+2. **Custom Line Highlighting**: Highlight any specific lines with ease.
+3. **Word-Level Customization**: Highlight individual words or phrases for emphasis or further explanation.
+
+All of these features are exposed as **primitive Vue components**, giving you full flexibility to compose and style your code blocks however you want.
+
+
+## Why Vue.js?
+
+By offering **primitive components**, `vuejs-code-block` is incredibly flexible and allows for deep customization, unlike other libraries that come with rigid styling. As a Vue.js developer, you get to **compose** and **reuse** these components in a highly modular fashion, leveraging Vue’s reactive data and lifecycle methods for dynamic and performant code blocks.
+
+## Final Thoughts
+
+With `vuejs-code-block`, you're not just limited to out-of-the-box solutions—you’re empowered to create and style your code blocks exactly the way you envision. Whether you're building complex documentation, a technical blog, or educational material, this library lets you take full control of your code blocks without the headache of dealing with rigid styling or lack of customization.
+
+Start building custom, styled code blocks in your Vue.js projects today!