claude-code-templates 1.21.0 → 1.21.1

package/docu/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "docu",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@docusaurus/core": "3.8.1",
+    "@docusaurus/preset-classic": "3.8.1",
+    "@mdx-js/react": "^3.0.0",
+    "clsx": "^2.0.0",
+    "prism-react-renderer": "^2.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "3.8.1",
+    "@docusaurus/tsconfig": "3.8.1",
+    "@docusaurus/types": "3.8.1",
+    "typescript": "~5.6.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 5 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=18.0"
+  }
+}

package/docu/sidebars.ts

@@ -0,0 +1,85 @@
+import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
+
+// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
+
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+const sidebars: SidebarsConfig = {
+  tutorialSidebar: [
+    'intro',
+    {
+      type: 'category',
+      label: 'Project Setup & Configuration',
+      items: [
+        'project-setup/interactive-setup',
+        'project-setup/framework-specific-setup',
+        'project-setup/what-gets-installed',
+        'project-setup/supported-languages-frameworks',
+        'project-setup/automation-hooks',
+        'project-setup/mcp-integration',
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Individual Components',
+      items: [
+        'components/overview',
+        'components/agents',
+        'components/commands',
+        'components/mcps',
+        'components/settings',
+        'components/hooks',
+        {
+          type: 'category',
+          label: 'Notifications',
+          items: [
+            'components/telegram-notifications',
+            'components/slack-notifications',
+            'components/discord-notifications',
+          ],
+        },
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Analytics Dashboard',
+      items: [
+        'analytics/overview',
+        'analytics/real-time-monitoring',
+        'analytics/agent-chats-manager',
+        'analytics/analysis-tools',
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Health Check',
+      items: [
+        'health-check/overview',
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Usage Examples',
+      items: [
+        'usage-examples/interactive-setup',
+        'usage-examples/framework-specific-quick-setup',
+        'usage-examples/advanced-options',
+        'usage-examples/alternative-commands',
+      ],
+    },
+    'cli-options',
+    'safety-features',
+    'contributing',
+    'support',
+  ],
+};
+
+export default sidebars;

package/docu/src/components/HomepageFeatures/index.tsx

@@ -0,0 +1,82 @@
+import type {ReactNode} from 'react';
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+type FeatureItem = {
+  title: string;
+  icon: string;
+  description: ReactNode;
+  command?: string;
+};
+
+const FeatureList: FeatureItem[] = [
+  {
+    title: 'Quick Setup',
+    icon: '⚡',
+    command: 'npm install -g claude-code-templates',
+    description: (
+      <>
+        Install the CLI tool globally and get started with Claude Code templates 
+        in seconds. No complex configuration required.
+      </>
+    ),
+  },
+  {
+    title: 'Multi-Framework Support',
+    icon: '🔧',
+    description: (
+      <>
+        Templates for React, Vue, Angular, Django, FastAPI, Rails, and more. 
+        Each includes optimized <code>CLAUDE.md</code> configurations and best practices.
+      </>
+    ),
+  },
+  {
+    title: 'Real-time Analytics',
+    icon: '📊',
+    command: 'claude-code-templates --analytics',
+    description: (
+      <>
+        Monitor your Claude Code usage with our comprehensive analytics dashboard. 
+        Track sessions, token usage, and performance metrics in real-time.
+      </>
+    ),
+  },
+];
+
+function Feature({title, icon, description, command}: FeatureItem) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className={styles.featureCard}>
+        <div className={styles.featureIcon}>
+          {icon}
+        </div>
+        <div className={styles.featureContent}>
+          <Heading as="h3" className={styles.featureTitle}>{title}</Heading>
+          <p className={styles.featureDescription}>{description}</p>
+          {command && (
+            <div className={styles.terminalCommand}>
+              <span className={styles.prompt}>$</span>
+              <code className={styles.command}>{command}</code>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures(): ReactNode {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/docu/src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,131 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 4rem 0;
+  width: 100%;
+  background: var(--bg-primary);
+}
+
+.featureCard {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  padding: 2rem;
+  height: 100%;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.featureCard:hover {
+  border-color: var(--text-accent);
+  box-shadow: 0 4px 12px var(--shadow-primary);
+  transform: translateY(-2px);
+}
+
+.featureIcon {
+  font-size: 3rem;
+  margin-bottom: 1.5rem;
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: 50%;
+}
+
+.featureContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.featureTitle {
+  color: var(--text-primary) !important;
+  font-family: inherit !important;
+  font-size: 1.25rem !important;
+  margin-bottom: 1rem !important;
+  font-weight: 500 !important;
+}
+
+.featureDescription {
+  color: var(--text-secondary) !important;
+  font-size: 0.9rem !important;
+  line-height: 1.5 !important;
+  margin-bottom: 1.5rem !important;
+  flex: 1;
+}
+
+.terminalCommand {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-secondary);
+  border-radius: 6px;
+  padding: 12px;
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.prompt {
+  color: var(--text-success);
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+.command {
+  color: var(--text-primary) !important;
+  background: none !important;
+  border: none !important;
+  padding: 0 !important;
+  font-family: inherit !important;
+  font-size: 0.85rem !important;
+  flex: 1;
+  text-align: left;
+}
+
+@media screen and (max-width: 996px) {
+  .features {
+    padding: 2rem 0;
+  }
+  
+  .featureCard {
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+  }
+  
+  .featureIcon {
+    font-size: 2.5rem;
+    width: 70px;
+    height: 70px;
+    margin-bottom: 1rem;
+  }
+  
+  .featureTitle {
+    font-size: 1.1rem !important;
+  }
+  
+  .featureDescription {
+    font-size: 0.85rem !important;
+    margin-bottom: 1rem !important;
+  }
+  
+  .terminalCommand {
+    padding: 10px;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.25rem;
+  }
+  
+  .command {
+    text-align: center !important;
+    word-break: break-all;
+  }
+}