drf-to-mkdoc 0.2.3__py3-none-any.whl → 0.3.0__py3-none-any.whl

drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/try-out/tabs.css

@@ -1,50 +1,102 @@
-/* Tabs */
-.tabs {
+/* Smart Tabs */
+.smart-tabs {
     display: flex;
-    gap: 0;
+    gap: var(--try-out-spacing-xs);
+    border-bottom: 1px solid var(--try-out-border);
+    padding-bottom: var(--try-out-spacing-xs);
     margin-bottom: var(--try-out-spacing-lg);
-    border: 1px solid var(--try-out-border);
-    border-radius: var(--try-out-border-radius);
-    overflow: hidden;
-    background-color: var(--try-out-surface);
 }
 
 .tab {
-    flex: 1;
-    padding: var(--try-out-spacing) var(--try-out-spacing-lg);
-    border: none;
+    display: flex;
+    align-items: center;
+    gap: var(--try-out-spacing-xs);
+    padding: var(--try-out-spacing-sm) var(--try-out-spacing);
+    border-radius: var(--try-out-border-radius);
     background: transparent;
+    border: none;
     color: var(--try-out-text-light);
     cursor: pointer;
+    transition: var(--try-out-transition);
     font-size: var(--try-out-font-base);
     font-weight: 500;
     position: relative;
-    transition: var(--try-out-transition);
-    border-right: 1px solid var(--try-out-border);
 }
 
-.tab:last-child {
-    border-right: none;
-}
-
-.tab:hover {
-    background-color: rgba(25, 118, 210, 0.05);
+.tab:hover:not(.active) {
+    background: var(--try-out-surface);
     color: var(--try-out-text);
 }
 
 .tab.active {
-    background-color: var(--try-out-primary);
+    background: var(--try-out-primary);
     color: white;
+    box-shadow: var(--try-out-shadow-md);
+}
+
+.tab .icon {
+    font-size: 0.9rem;
+    line-height: 1;
+}
+
+.badge {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 2px 6px;
+    border-radius: 10px;
+    font-size: 0.7em;
+    font-weight: 600;
+    line-height: 1;
+}
+
+.tab.active .badge {
+    background: rgba(255, 255, 255, 0.25);
+}
+
+.tab:not(.active) .badge {
+    background: var(--try-out-primary-light);
+    color: var(--try-out-primary);
 }
 
 .tab-content {
     display: none;
+    animation: fadeIn 0.2s ease-out;
 }
 
 .tab-content.active {
     display: block;
 }
 
+/* Response Tabs */
+.response-tabs {
+    display: flex;
+    gap: var(--try-out-spacing-xs);
+    border-bottom: 1px solid var(--try-out-border);
+    padding-bottom: var(--try-out-spacing-xs);
+    margin-bottom: var(--try-out-spacing);
+}
+
+.response-tabs .tab {
+    padding: var(--try-out-spacing-xs) var(--try-out-spacing-sm);
+    font-size: var(--try-out-font-sm);
+}
+
+/* Tab Focus States */
+.tab:focus-visible {
+    outline: 2px solid var(--try-out-primary);
+    outline-offset: 2px;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
 /* Mobile Tabs */
 @media screen and (max-width: 768px) {
     .tabs {

drf_to_mkdoc/static/drf-to-mkdoc/stylesheets/try-out/variables.css

@@ -1,6 +1,9 @@
 :root {
+    /* Color Palette */
     --try-out-primary: #1976d2;
     --try-out-primary-hover: #1565c0;
+    --try-out-primary-rgb: 25, 118, 210;
+    --try-out-primary-light: rgba(25, 118, 210, 0.1);
     --try-out-success: #28a745;
     --try-out-success-hover: #218838;
     --try-out-danger: #dc3545;
@@ -8,31 +11,84 @@
     --try-out-warning: #ffc107;
     --try-out-info: #17a2b8;
     
+    /* Light Theme Colors */
     --try-out-bg: #ffffff;
     --try-out-surface: #f8f9fa;
+    --try-out-surface-raised: #ffffff;
     --try-out-border: #e1e5e9;
     --try-out-text: #333333;
     --try-out-text-light: #666666;
     --try-out-text-lighter: #999999;
     --try-out-shadow: rgba(0, 0, 0, 0.1);
     --try-out-shadow-strong: rgba(0, 0, 0, 0.2);
+    --try-out-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
+    --try-out-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
+    --try-out-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
     
-    --try-out-border-radius: 4px;
-    --try-out-border-radius-lg: 6px;
-    --try-out-spacing-xs: 0.2rem;
-    --try-out-spacing-sm: 0.4rem;
-    --try-out-spacing: 0.6rem;
-    --try-out-spacing-lg: 0.8rem;
-    --try-out-spacing-xl: 1.2rem;
-    --try-out-spacing-xxl: 1.6rem;
-    
-    --try-out-font-sm: 0.75rem;
-    --try-out-font-base: 0.8rem;
-    --try-out-font-lg: 0.9rem;
-    --try-out-line-height: 1.4;
-    
-    --try-out-transition: all 0.2s ease;
+    /* Glass Effect */
+    --try-out-glass-bg: rgba(255, 255, 255, 0.95);
+    --try-out-glass-border: rgba(255, 255, 255, 0.2);
+    --try-out-backdrop-blur: 10px;
+    
+    /* Gradients */
+    --try-out-gradient-primary: linear-gradient(135deg, var(--try-out-primary), var(--try-out-primary-hover));
+    
+    /* Layout */
+    --try-out-border-radius: 6px;
+    --try-out-border-radius-lg: 10px;
+    --try-out-spacing-2xs: 0.125rem;
+    --try-out-spacing-xs: 0.25rem;
+    --try-out-spacing-sm: 0.5rem;
+    --try-out-spacing: 0.75rem;
+    --try-out-spacing-lg: 1rem;
+    --try-out-spacing-xl: 1.5rem;
+    --try-out-spacing-xxl: 2rem;
+    
+    /* Typography */
+    --try-out-font-sm: 0.875rem;
+    --try-out-font-base: 0.9rem;
+    --try-out-font-lg: 1rem;
+    --try-out-line-height: 1.5;
+    
+    /* Animation */
+    --try-out-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+    
+    /* Z-Index */
     --try-out-z-modal: 1000;
     --try-out-z-response: 1100;
     --try-out-z-fab: 100;
+    --try-out-z-sticky: 50;
+}
+
+/* Dark Theme Colors */
+[data-md-color-scheme="slate"] {
+    --try-out-bg: #1a1a1a;
+    --try-out-surface: #2d2d2d;
+    --try-out-surface-raised: #3a3a3a;
+    --try-out-border: #404040;
+    --try-out-text: #e0e0e0;
+    --try-out-text-light: #b0b0b0;
+    --try-out-text-lighter: #808080;
+    --try-out-shadow: rgba(0, 0, 0, 0.3);
+    --try-out-shadow-strong: rgba(0, 0, 0, 0.5);
+    --try-out-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
+    --try-out-shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.4);
+    --try-out-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);
+    
+    /* Glass Effect for Dark Mode */
+    --try-out-glass-bg: rgba(45, 45, 45, 0.95);
+    --try-out-glass-border: rgba(255, 255, 255, 0.1);
+    
+    /* Adjust primary colors for better contrast */
+    --try-out-primary: #42a5f5;
+    --try-out-primary-hover: #2196f3;
+    --try-out-primary-rgb: 66, 165, 245;
+    --try-out-primary-light: rgba(66, 165, 245, 0.15);
+    
+    /* Status colors for dark mode */
+    --try-out-success: #4caf50;
+    --try-out-danger: #f44336;
+    --try-out-warning: #ff9800;
+    --try-out-info: #00bcd4;
 }

drf_to_mkdoc/templates/endpoints/detail/request_body.html

@@ -4,7 +4,9 @@
 ## Request Body
 
 {% if request_example %}
+<div class="request-example" data-example='{{ request_example|format_json }}'>
 {{ request_example|format_json }}
+</div>
 {% endif %}
 
 {% endif %}

drf_to_mkdoc/templates/er_diagrams/app.html

@@ -0,0 +1,26 @@
+# {{ app_name|title|cut:"_"|safe }} Models
+
+```mermaid
+erDiagram
+{% for entity in app_entities %}
+    {{ entity.model_name }} {
+{% for field in entity.fields %}
+        {{ field.name }} {{ field.type }}{% if field.is_pk %} "PK"{% elif field.nullable %} "NULLABLE"{% endif %}
+{% endfor %}
+    }
+{% endfor %}
+{% for entity in related_entities %}
+    {{ entity.model_name }} {
+        id AutoField "PK"
+    }
+{% endfor %}
+{% for relationship in relationships %}
+    {{ relationship.source_model }} {{ relationship.type }} {{ relationship.target_model }} : "{{ relationship.description }}"
+{% endfor %}
+
+```
+
+## Models
+
+{% for entity in app_entities %}- [{{ entity.model_name }}](../../models/{{ entity.app_name }}/{{ entity.table_name }}/)
+{% endfor %}

drf_to_mkdoc/templates/er_diagrams/index.html

@@ -0,0 +1,14 @@
+# Entity-Relationship Diagrams
+
+This section contains Entity-Relationship (ER) diagrams for all Django models in the system.
+
+## [Complete System Diagram](main.md)
+
+View the complete ER diagram showing all models and their relationships.
+
+## Application Diagrams
+
+| Application | Models 
+|------------|--------|
+{% for app in apps %}| [{{ app.name|title|cut:"_"|safe }}]({{ app.name }}.md) | {{ app.model_count }} |
+{% endfor %}

drf_to_mkdoc/templates/er_diagrams/main.html

@@ -0,0 +1,22 @@
+# Complete Entity-Relationship Diagram
+
+```mermaid
+erDiagram
+{% for entity in entities %}
+    {{ entity.model_name }} {
+{% for field in entity.fields %}
+        {{ field.name }} {{ field.type }}{% if field.is_pk %} "PK"{% elif field.nullable %} "NULLABLE"{% endif %}
+{% endfor %}
+    }
+{% endfor %}
+{% for relationship in relationships %}
+    {{ relationship.source_model }} {{ relationship.type }} {{ relationship.target_model }} : "{{ relationship.description }}"
+{% endfor %}
+
+```
+
+<div class="er-diagram-controls">
+  <button class="zoom-in">Zoom In</button>
+  <button class="zoom-out">Zoom Out</button>
+  <button class="reset-zoom">Reset</button>
+</div>

drf_to_mkdoc/templates/try-out/fab.html

@@ -1,4 +1,68 @@
 <!-- Try Out Floating Action Button -->
-<button class="try-out-fab" role="button" tabindex="0" aria-label="Open Try It Out" onclick="TryOutSidebar.openTryOut()">
-    <span>🚀</span>
-</button>
+<div class="try-out-fab-container">
+    <button 
+        class="try-out-fab" 
+        role="button" 
+        tabindex="0" 
+        aria-label="Open Try It Out"
+        aria-expanded="false"
+        onclick="TryOutSidebar.openTryOut()"
+        data-tooltip="Try out this endpoint"
+    >
+        <div class="fab-content">
+            <span class="fab-icon">🚀</span>
+        </div>
+        <div class="ripple-container"></div>
+        <div class="pulse-ring"></div>
+    </button>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Ripple effect
+    const fab = document.querySelector('.try-out-fab');
+    
+    fab.addEventListener('click', function(e) {
+        const ripple = document.createElement('div');
+        ripple.className = 'ripple';
+        
+        const rect = this.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+        const x = e.clientX - rect.left - size / 2;
+        const y = e.clientY - rect.top - size / 2;
+        
+        ripple.style.width = ripple.style.height = `${size}px`;
+        ripple.style.left = `${x}px`;
+        ripple.style.top = `${y}px`;
+        
+        this.querySelector('.ripple-container').appendChild(ripple);
+        
+        setTimeout(() => ripple.remove(), 600);
+    });
+
+    // Keyboard shortcut
+    document.addEventListener('keydown', function(e) {
+        if (e.ctrlKey && e.code === 'Space') {
+            e.preventDefault();
+            TryOutSidebar.openTryOut();
+            
+            // Animate the FAB
+            fab.classList.add('keyboard-triggered');
+            setTimeout(() => fab.classList.remove('keyboard-triggered'), 200);
+        }
+    });
+
+    // Show/hide shortcut hint
+    let hintTimeout;
+    fab.addEventListener('mouseenter', function() {
+        clearTimeout(hintTimeout);
+        document.querySelector('.shortcut-hint').classList.add('visible');
+    });
+
+    fab.addEventListener('mouseleave', function() {
+        hintTimeout = setTimeout(() => {
+            document.querySelector('.shortcut-hint').classList.remove('visible');
+        }, 500);
+    });
+});
+</script>