fix: alias db

2025-09-27 01:15:52 +08:00 · 2025-01-15 10:25:14 +08:00
parent 44eb5d4ed4
commit a0648f4086
6 changed files with 820 additions and 20 deletions
--- a/README.md
+++ b/README.md
@@ -1,7 +1,75 @@
+<!-- Improved compatibility of back to top link -->
+<a id="readme-top"></a>

-# Introduction
-Monibuca is a highly scalable high-performance streaming server development framework developed purely for Go
-# Usage
+[![Contributors][contributors-shield]][contributors-url]
+[![Forks][forks-shield]][forks-url]
+[![Stargazers][stars-shield]][stars-url]
+[![Issues][issues-shield]][issues-url]
+[![MIT License][license-shield]][license-url]
+
+<!-- PROJECT LOGO -->
+<br />
+<div align="center">
+  <h1 align="center">Monibuca v5</h1>
+
+  <p align="center">
+    A highly scalable high-performance streaming server development framework developed purely in Go
+    <br />
+    <a href="https://github.com/Monibuca/v5/wiki"><strong>Explore the docs »</strong></a>
+    <br />
+    <br />
+    <a href="https://github.com/Monibuca/v5/issues">Report Bug</a>
+    ·
+    <a href="https://github.com/Monibuca/v5/issues">Request Feature</a>
+  </p>
+</div>
+
+<!-- TABLE OF CONTENTS -->
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li><a href="#about">About</a></li>
+    <li><a href="#getting-started">Getting Started</a></li>
+    <li><a href="#usage">Usage</a></li>
+    <li><a href="#build-tags">Build Tags</a></li>
+    <li><a href="#monitoring">Monitoring</a></li>
+    <li><a href="#plugin-development">Plugin Development</a></li>
+    <li><a href="#contributing">Contributing</a></li>
+    <li><a href="#license">License</a></li>
+  </ol>
+</details>
+
+## About
+
+Monibuca is a powerful streaming server framework written entirely in Go. It's designed to be:
+
+- 🚀 **High Performance** - Built for maximum efficiency and speed
+- 📦 **Modular** - Plugin-based architecture for easy extensibility
+- 🔧 **Flexible** - Highly configurable to meet various streaming needs
+- 💪 **Scalable** - Designed to handle large-scale deployments
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## Getting Started
+
+### Prerequisites
+
+- Go 1.18 or higher
+- Basic understanding of streaming protocols
+
+### Installation
+
+1. Create a new Go project
+2. Add Monibuca as a dependency:
+   ```sh
+   go get m7s.live/v5
+   ```
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## Usage
+
+Here's a basic example to get you started:

 ```go
 package main
@@ -18,9 +86,15 @@ import (
 func main() {
 	m7s.Run(context.Background(), "config.yaml")
 }
-
 ```
-## build tags
+
+For more examples, check out the [example directory](./example).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## Build Tags
+
+The following build tags can be used to customize your build:

 | Build Tag | Description |
 |-----------|-------------|
@@ -32,11 +106,11 @@ func main() {
 | duckdb | Enables the duckdb DB |
 | taskpanic | Throws panic, for testing |

-## More Example
+<p align="right">(<a href="#readme-top">back to top</a>)</p>

-see example directory
+## Monitoring

-# Prometheus
+Monibuca supports Prometheus monitoring out of the box. Add the following to your Prometheus configuration:

 ```yaml
 scrape_configs:
@@ -46,6 +120,40 @@ scrape_configs:
      - targets: ["localhost:8080"]
 ```

-# Create Plugin
+<p align="right">(<a href="#readme-top">back to top</a>)</p>

-see [plugin](./plugin/README.md)
+## Plugin Development
+
+Monibuca's functionality can be extended through plugins. For information on creating plugins, see the [plugin guide](./plugin/README.md).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## License
+
+Distributed under the MIT License. See `LICENSE` for more information.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- MARKDOWN LINKS & IMAGES -->
+[contributors-shield]: https://img.shields.io/github/contributors/Monibuca/v5.svg?style=for-the-badge
+[contributors-url]: https://github.com/Monibuca/v5/graphs/contributors
+[forks-shield]: https://img.shields.io/github/forks/Monibuca/v5.svg?style=for-the-badge
+[forks-url]: https://github.com/Monibuca/v5/network/members
+[stars-shield]: https://img.shields.io/github/stars/Monibuca/v5.svg?style=for-the-badge
+[stars-url]: https://github.com/Monibuca/v5/stargazers
+[issues-shield]: https://img.shields.io/github/issues/Monibuca/v5.svg?style=for-the-badge
+[issues-url]: https://github.com/Monibuca/v5/issues
+[license-shield]: https://img.shields.io/github/license/Monibuca/v5.svg?style=for-the-badge
+[license-url]: https://github.com/Monibuca/v5/blob/master/LICENSE
--- a/alias.go
+++ b/alias.go
@@ -99,21 +99,17 @@ func (s *Server) SetStreamAlias(ctx context.Context, req *pb.SetStreamAliasReque
 				}
 				// 更新数据库中的别名
 				if s.DB != nil {
-					var dbAlias StreamAliasDB
-					s.DB.Where("alias = ?", req.Alias).First(&dbAlias)
-					dbAlias.StreamPath = req.StreamPath
-					dbAlias.AutoRemove = req.AutoRemove
-					s.DB.Save(&dbAlias)
+					s.DB.Model(&StreamAliasDB{}).Where("alias = ?", req.Alias).Updates(req)
 				}
 				s.Info("modify alias", "alias", req.Alias, "oldStreamPath", oldStreamPath, "streamPath", req.StreamPath, "replace", ok && canReplace)
 			} else { // create alias
-				aliasInfo := &AliasStream{
+				aliasInfo := AliasStream{
 					AutoRemove: req.AutoRemove,
 					StreamPath: req.StreamPath,
 					Alias:      req.Alias,
 				}
 				var pubId uint32
-				s.AliasStreams.Add(aliasInfo)
+				s.AliasStreams.Add(&aliasInfo)
 				aliasStream, ok := s.Streams.Get(aliasInfo.Alias)
 				if canReplace {
 					aliasInfo.Publisher = publisher
@@ -131,7 +127,7 @@ func (s *Server) SetStreamAlias(ctx context.Context, req *pb.SetStreamAliasReque
 				// 保存到数据库
 				if s.DB != nil {
 					s.DB.Create(&StreamAliasDB{
-						AliasStream: *aliasInfo,
+						AliasStream: aliasInfo,
 					})
 				}
 				s.Info("add alias", "alias", req.Alias, "streamPath", req.StreamPath, "replace", ok && canReplace, "pub", pubId)
@@ -191,6 +187,9 @@ func (p *Publisher) processAliasOnDispose() {
 		if alias.StreamPath == p.StreamPath {
 			if alias.AutoRemove {
 				defer s.AliasStreams.Remove(alias)
+				if s.DB != nil {
+					defer s.DB.Where("alias = ?", alias.Alias).Delete(&StreamAliasDB{})
+				}
 			}
 			alias.Publisher = nil
 			relatedAlias = append(relatedAlias, alias)
@@ -227,10 +226,14 @@ func (s *Subscriber) processAliasOnStart() (hasInvited bool, done bool) {
 	} else {
 		for reg, alias := range server.StreamAlias {
 			if streamPath := reg.Replace(s.StreamPath, alias); streamPath != "" {
-				server.AliasStreams.Set(&AliasStream{
+				as := AliasStream{
 					StreamPath: streamPath,
 					Alias:      s.StreamPath,
-				})
+				}
+				server.AliasStreams.Set(&as)
+				if server.DB != nil {
+					server.DB.Where("alias = ?", s.StreamPath).Assign(as).FirstOrCreate(&StreamAliasDB{})
+				}
 				if publisher, ok := server.Streams.Get(streamPath); ok {
 					publisher.AddSubscriber(s)
 					done = true
--- a/pkg/util/index.go
+++ b/pkg/util/index.go
@@ -16,6 +16,8 @@ type ReadWriteSeekCloser interface {
 	io.Closer
 }

+type Object = map[string]any
+
 func Conditional[T any](cond bool, t, f T) T {
 	if cond {
 		return t
--- a/website/index.html
+++ b/website/index.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Monibuca - 高性能流媒体服务器框架</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <header>
+    <nav>
+      <div class="container">
+        <div class="logo">
+          <img src="logo.svg" alt="Monibuca Logo">
+          <span>Monibuca</span>
+        </div>
+        <div class="nav-links">
+          <a href="#features">特性</a>
+          <a href="#quickstart">快速开始</a>
+          <a href="#plugins">插件</a>
+          <a href="#docs">文档</a>
+          <a href="https://github.com/langhuihui/monibuca" class="github-link" target="_blank" rel="noopener">GitHub</a>
+        </div>
+      </div>
+    </nav>
+  </header>
+
+  <main>
+    <section class="hero">
+      <div class="container">
+        <h1>下一代流媒体服务器框架</h1>
+        <p class="subtitle">高性能、可扩展、插件化的纯 Go 流媒体服务器开发框架</p>
+        <div class="cta-buttons">
+          <a href="#quickstart" class="primary-button">快速开始</a>
+          <a href="https://docs.m7s.live" class="secondary-button" target="_blank" rel="noopener">查看文档</a>
+        </div>
+        <div class="features-grid">
+          <div class="feature-card">
+            <div class="icon">🚀</div>
+            <h3>高性能</h3>
+            <p>采用纯 Go 开发，充分利用 Go 的并发特性</p>
+          </div>
+          <div class="feature-card">
+            <div class="icon">🔌</div>
+            <h3>插件化</h3>
+            <p>核心功能都以插件形式提供，可按需加载</p>
+          </div>
+          <div class="feature-card">
+            <div class="icon">🛠</div>
+            <h3>可扩展</h3>
+            <p>支持自定义插件开发，灵活扩展功能</p>
+          </div>
+          <div class="feature-card">
+            <div class="icon">📽</div>
+            <h3>多协议</h3>
+            <p>支持 RTMP、HTTP-FLV、HLS、WebRTC 等</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="features" class="features">
+      <div class="container">
+        <h2>核心特性</h2>
+        <div class="features-list">
+          <div class="feature">
+            <h3>🎯 低延迟</h3>
+            <p>针对实时性场景优化，提供极低的传输延迟</p>
+          </div>
+          <div class="feature">
+            <h3>📊 实时监控</h3>
+            <p>支持 Prometheus 监控集成，实时掌握系统状态</p>
+          </div>
+          <div class="feature">
+            <h3>🔄 集群支持</h3>
+            <p>支持分布式部署，轻松扩展系统规模</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="quickstart" class="quickstart">
+      <div class="container">
+        <h2>快速开始</h2>
+        <div class="code-block">
+          <div class="code-header">
+            <span>安装</span>
+            <button class="copy-button" data-target="install-code">复制</button>
+          </div>
+          <pre><code id="install-code">mkdir my-m7s-server && cd my-m7s-server
+go mod init my-m7s-server</code></pre>
+        </div>
+        <div class="code-block">
+          <div class="code-header">
+            <span>创建主程序</span>
+            <button class="copy-button" data-target="main-code">复制</button>
+          </div>
+          <pre><code id="main-code">package main
+
+import (
+    "context"
+    "m7s.live/v5"
+    _ "m7s.live/v5/plugin/rtmp"
+    _ "m7s.live/v5/plugin/flv"
+    _ "m7s.live/v5/plugin/hls"
+)
+
+func main() {
+    m7s.Run(context.Background(), "config.yaml")
+}</code></pre>
+        </div>
+      </div>
+    </section>
+
+    <section id="plugins" class="plugins">
+      <div class="container">
+        <h2>官方插件</h2>
+        <div class="plugins-grid">
+          <div class="plugin-card">
+            <h3>RTMP</h3>
+            <p>支持 RTMP 协议推拉流</p>
+          </div>
+          <div class="plugin-card">
+            <h3>HTTP-FLV</h3>
+            <p>支持 HTTP-FLV 协议直播</p>
+          </div>
+          <div class="plugin-card">
+            <h3>HLS</h3>
+            <p>支持 HLS 协议直播点播</p>
+          </div>
+          <div class="plugin-card">
+            <h3>WebRTC</h3>
+            <p>支持 WebRTC 协议互动直播</p>
+          </div>
+          <div class="plugin-card">
+            <h3>GB28181</h3>
+            <p>支持国标协议设备接入</p>
+          </div>
+          <div class="plugin-card">
+            <h3>SRT</h3>
+            <p>支持 SRT 协议传输</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer>
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h4>资源</h4>
+          <a href="https://docs.m7s.live">文档</a>
+          <a href="https://pkg.go.dev/m7s.live/v5">API 参考</a>
+          <a href="https://github.com/langhuihui/monibuca/tree/main/example">示例代码</a>
+        </div>
+        <div class="footer-section">
+          <h4>社区</h4>
+          <a href="https://github.com/langhuihui/monibuca">GitHub</a>
+          <a href="https://github.com/langhuihui/monibuca/issues">问题反馈</a>
+        </div>
+        <div class="footer-section">
+          <h4>关于</h4>
+          <p>© 2024 Monibuca. 采用 AGPL 许可证.</p>
+        </div>
+      </div>
+    </div>
+  </footer>
+
+  <script src="main.js"></script>
+</body>
+
+</html>
--- a/website/main.js
+++ b/website/main.js
@@ -0,0 +1,93 @@
+// Copy button functionality
+document.querySelectorAll('.copy-button').forEach(button => {
+  button.addEventListener('click', () => {
+    const codeId = button.getAttribute('data-target');
+    const codeElement = document.getElementById(codeId);
+    const text = codeElement.textContent;
+
+    navigator.clipboard.writeText(text).then(() => {
+      const originalText = button.textContent;
+      button.textContent = '已复制!';
+      button.style.background = 'rgba(0,255,0,0.2)';
+
+      setTimeout(() => {
+        button.textContent = originalText;
+        button.style.background = 'transparent';
+      }, 2000);
+    });
+  });
+});
+
+// Smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+  anchor.addEventListener('click', function (e) {
+    e.preventDefault();
+    const target = document.querySelector(this.getAttribute('href'));
+    if (target) {
+      target.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }
+  });
+});
+
+// Header scroll effect
+const header = document.querySelector('header');
+let lastScrollY = window.scrollY;
+
+window.addEventListener('scroll', () => {
+  if (window.scrollY > lastScrollY) {
+    header.style.transform = 'translateY(-100%)';
+  } else {
+    header.style.transform = 'translateY(0)';
+  }
+  lastScrollY = window.scrollY;
+});
+
+// Add transition to header
+header.style.transition = 'transform 0.3s ease-in-out';
+
+// Mobile menu functionality (if needed in the future)
+// const mobileMenuButton = document.querySelector('.mobile-menu-button');
+// const navLinks = document.querySelector('.nav-links');
+
+// if (mobileMenuButton) {
+//     mobileMenuButton.addEventListener('click', () => {
+//         navLinks.classList.toggle('active');
+//     });
+// }
+
+// Intersection Observer for fade-in animations
+const observerOptions = {
+  root: null,
+  rootMargin: '0px',
+  threshold: 0.1
+};
+
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      entry.target.classList.add('fade-in');
+      observer.unobserve(entry.target);
+    }
+  });
+}, observerOptions);
+
+// Observe all sections
+document.querySelectorAll('section').forEach(section => {
+  section.style.opacity = '0';
+  section.style.transform = 'translateY(20px)';
+  section.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
+  observer.observe(section);
+});
+
+// Add fade-in class for animation
+const style = document.createElement('style');
+style.textContent = `
+    .fade-in {
+        opacity: 1 !important;
+        transform: translateY(0) !important;
+    }
+`;
+document.head.appendChild(style); 
--- a/website/style.css
+++ b/website/style.css
@@ -0,0 +1,419 @@
+:root {
+    --primary-color: #646cff;
+    --primary-color-dark: #535bf2;
+    --text-color: #213547;
+    --text-color-light: #666;
+    --background-color: #242424;
+    --text-color-dark: rgba(255, 255, 255, 0.87);
+    --text-color-dark-2: rgba(255, 255, 255, 0.6);
+    --border-color: #eee;
+    --code-background: #1a1a1a;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    color: var(--text-color-dark);
+    line-height: 1.6;
+    background: var(--background-color);
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+}
+
+/* Header & Navigation */
+header {
+    background: rgba(36, 36, 36, 0.8);
+    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1000;
+}
+
+nav {
+    height: 64px;
+    display: flex;
+    align-items: center;
+}
+
+nav .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.logo img {
+    height: 32px;
+}
+
+.logo span {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--primary-color);
+}
+
+.nav-links {
+    display: flex;
+    gap: 2rem;
+}
+
+.nav-links a {
+    text-decoration: none;
+    color: var(--text-color-dark-2);
+    font-weight: 500;
+    transition: color 0.2s;
+}
+
+.nav-links a:hover {
+    color: var(--text-color-dark);
+}
+
+.github-link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* Hero Section */
+.hero {
+    padding: 120px 0 80px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+        radial-gradient(circle at 50% 0%, rgba(100, 108, 255, 0.15), rgba(36, 36, 36, 0) 50%),
+        radial-gradient(circle at 0% 100%, rgba(255, 182, 255, 0.1), rgba(36, 36, 36, 0) 50%),
+        radial-gradient(circle at 100% 100%, rgba(100, 108, 255, 0.1), rgba(36, 36, 36, 0) 50%);
+    z-index: -1;
+}
+
+.hero h1 {
+    font-size: 3.5rem;
+    font-weight: 800;
+    margin-bottom: 1rem;
+    background: linear-gradient(120deg, #bd34fe 30%, #47caff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.hero .subtitle {
+    font-size: 1.5rem;
+    color: var(--text-color-dark-2);
+    margin-bottom: 2rem;
+}
+
+.cta-buttons {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    margin-bottom: 4rem;
+}
+
+.primary-button, .secondary-button {
+    padding: 0.75rem 2rem;
+    border-radius: 20px;
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.2s;
+    border: 1px solid transparent;
+}
+
+.primary-button {
+    background: linear-gradient(to right, #bd34fe 30%, #47caff);
+    color: white;
+    box-shadow: 0 2px 12px rgba(189, 52, 254, 0.3);
+}
+
+.primary-button:hover {
+    background: linear-gradient(to right, #a925e5 30%, #38b8eb);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px rgba(189, 52, 254, 0.4);
+}
+
+.secondary-button {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--text-color-dark);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.secondary-button:hover {
+    background: rgba(255, 255, 255, 0.15);
+    transform: translateY(-2px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+/* Features Grid */
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+    margin-top: 4rem;
+}
+
+.feature-card {
+    background: var(--code-background);
+    padding: 2rem;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    transition: all 0.2s;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+}
+
+.feature-card .icon {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+}
+
+.feature-card h3 {
+    margin-bottom: 0.5rem;
+    color: #bd34fe;
+}
+
+.feature-card p {
+    color: var(--text-color-dark-2);
+}
+
+/* Features Section */
+.features {
+    padding: 80px 0;
+    background: var(--background-color);
+    position: relative;
+}
+
+.features::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+        radial-gradient(circle at 0% 0%, rgba(189, 52, 254, 0.15), rgba(36, 36, 36, 0) 50%),
+        radial-gradient(circle at 100% 0%, rgba(71, 202, 255, 0.15), rgba(36, 36, 36, 0) 50%);
+    z-index: -1;
+}
+
+.features h2 {
+    color: var(--text-color-dark);
+}
+
+.features-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+}
+
+.feature {
+    background: var(--code-background);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.feature h3 {
+    color: #47caff;
+}
+
+.feature p {
+    color: var(--text-color-dark-2);
+}
+
+/* Quickstart Section */
+.quickstart {
+    padding: 80px 0;
+}
+
+.quickstart h2 {
+    text-align: center;
+    margin-bottom: 3rem;
+    font-size: 2.5rem;
+}
+
+.code-block {
+    background: var(--code-background);
+    border-radius: 8px;
+    margin-bottom: 2rem;
+    overflow: hidden;
+}
+
+.code-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    background: rgba(255,255,255,0.1);
+}
+
+.code-header span {
+    color: #fff;
+}
+
+.copy-button {
+    background: transparent;
+    border: 1px solid rgba(255,255,255,0.2);
+    color: #fff;
+    padding: 0.25rem 0.75rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.copy-button:hover {
+    background: rgba(255,255,255,0.1);
+}
+
+pre {
+    margin: 0;
+    padding: 1.5rem;
+}
+
+code {
+    color: #fff;
+    font-family: 'Fira Code', monospace;
+    font-size: 0.9rem;
+}
+
+/* Plugins Section */
+.plugins {
+    padding: 80px 0;
+    background: var(--background-color);
+    position: relative;
+}
+
+.plugins::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+        radial-gradient(circle at 100% 50%, rgba(71, 202, 255, 0.15), rgba(36, 36, 36, 0) 50%),
+        radial-gradient(circle at 0% 50%, rgba(189, 52, 254, 0.15), rgba(36, 36, 36, 0) 50%);
+    z-index: -1;
+}
+
+.plugins h2 {
+    color: var(--text-color-dark);
+}
+
+.plugins-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+}
+
+.plugin-card {
+    background: var(--code-background);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.plugin-card:hover {
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+}
+
+.plugin-card h3 {
+    background: linear-gradient(120deg, #bd34fe 30%, #47caff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.plugin-card p {
+    color: var(--text-color-dark-2);
+}
+
+/* Footer */
+footer {
+    background: var(--code-background);
+    color: var(--text-color-dark);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+footer::before {
+    background: 
+        radial-gradient(circle at 0% 0%, rgba(189, 52, 254, 0.15), rgba(26, 26, 26, 0) 50%),
+        radial-gradient(circle at 100% 100%, rgba(71, 202, 255, 0.15), rgba(26, 26, 26, 0) 50%);
+}
+
+.footer-content {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 3rem;
+}
+
+.footer-section h4 {
+    color: #bd34fe;
+}
+
+.footer-section a {
+    color: var(--text-color-dark-2);
+}
+
+.footer-section a:hover {
+    color: var(--text-color-dark);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .nav-links {
+        display: none;
+    }
+    
+    .hero h1 {
+        font-size: 2.5rem;
+    }
+    
+    .hero .subtitle {
+        font-size: 1.2rem;
+    }
+    
+    .features-grid,
+    .plugins-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .cta-buttons {
+        flex-direction: column;
+    }
+    
+    .footer-content {
+        grid-template-columns: 1fr;
+        text-align: center;
+    }
+}