feat(ui): enhance code blocks with syntax highlighting and copy buttons

CuriousLearner · CuriousLearner · commit 9136b6130590 · 2025-09-22T05:54:24.000+05:30
diff --git a/.gitignore b/.gitignore
@@ -60,6 +60,7 @@ cover/
 local_settings.py
 db.sqlite3
 db.sqlite3-journal
+staticfiles/
 
 # Flask stuff:
 instance/
diff --git a/example_project/sample_app/anonymization_views.py b/example_project/sample_app/anonymization_views.py
@@ -37,9 +37,10 @@ def context_manager_demo(request: HttpRequest) -> HttpResponse:
     }
 
     try:
-        # Normal data access
-        normal_users = list(User.objects.values("username", "email", "first_name", "last_name")[:5])
-        context["normal_data"] = normal_users
+        # Normal data access - explicitly use default role to bypass middleware
+        with database_role("sanyamkhurana"):  # Use default role to get unmasked data
+            normal_users = list(User.objects.values("username", "email", "first_name", "last_name")[:5])
+            context["normal_data"] = normal_users
 
         # Using anonymized_data context manager
         try:
diff --git a/example_project/sample_app/views.py b/example_project/sample_app/views.py
@@ -7,7 +7,7 @@
 from datetime import datetime, timedelta
 
 from django.contrib import messages
-from django.contrib.auth.decorators import user_passes_test
+from django.contrib.auth.decorators import login_required, user_passes_test
 from django.contrib.auth.models import User
 from django.core.paginator import Paginator
 from django.db import transaction
@@ -182,7 +182,7 @@ def create_demo_data(request: HttpRequest) -> HttpResponse:
     return render(request, "sample_app/create_demo_data.html")
 
 
-@user_passes_test(lambda u: u.is_superuser)
+@login_required
 def anonymization_demo(request: HttpRequest) -> HttpResponse:
     """Demonstrate anonymization features"""
 
diff --git a/example_project/templates/sample_app/anonymized_customer_view.html b/example_project/templates/sample_app/anonymized_customer_view.html
@@ -2,6 +2,9 @@
 
 {% block title %}Anonymized Customer View - Django PostgreSQL Anonymizer{% endblock %}
 
+{% block extra_css %}
+{% endblock %}
+
 {% block content %}
 <div class="row">
     <div class="col-12">
@@ -219,23 +222,28 @@ <h5 class="mb-0">
             </div>
             <div class="card-body">
                 <h6>Class-based View with Mixin</h6>
-                <pre class="bg-light p-3 rounded"><code>from django_postgres_anon.decorators import AnonymizedDataMixin
-from django.views.generic import TemplateView
+                <div style="position: relative;">
+                    <pre style="background: #f6f8fa; border: 1px solid #e1e4e8; border-radius: 6px; padding: 16px; margin: 0; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13px; line-height: 1.45;"><code><span style="color: #d73a49; font-weight: 600;">from</span> django_postgres_anon.decorators <span style="color: #d73a49; font-weight: 600;">import</span> AnonymizedDataMixin
+<span style="color: #d73a49; font-weight: 600;">from</span> django.views.generic <span style="color: #d73a49; font-weight: 600;">import</span> TemplateView
 
-class AnonymizedCustomerView(AnonymizedDataMixin, TemplateView):
-    template_name = 'sample_app/anonymized_customer_view.html'
+<span style="color: #d73a49; font-weight: 600;">class</span> <span style="color: #6f42c1;">AnonymizedCustomerView</span>(<span style="color: #6f42c1;">AnonymizedDataMixin</span>, <span style="color: #6f42c1;">TemplateView</span>):
+    template_name = <span style="color: #032f62;">'sample_app/anonymized_customer_view.html'</span>
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
+    <span style="color: #d73a49; font-weight: 600;">def</span> <span style="color: #6f42c1;">get_context_data</span>(<span style="color: #e36209;">self</span>, **kwargs):
+        context = <span style="color: #005cc5;">super</span>().<span style="color: #6f42c1;">get_context_data</span>(**kwargs)
 
-        # This query will automatically use anonymized data
-        customers = Customer.objects.select_related('user').all()[:10]
+        <span style="color: #6a737d; font-style: italic;"># This query will automatically use anonymized data</span>
+        customers = Customer.objects.<span style="color: #6f42c1;">select_related</span>(<span style="color: #032f62;">'user'</span>).<span style="color: #6f42c1;">all</span>()[<span style="color: #005cc5;">:</span><span style="color: #005cc5;">10</span>]
 
-        context.update({
-            'customers': customers,
-            'mixin_used': 'AnonymizedDataMixin',
+        context.<span style="color: #6f42c1;">update</span>({
+            <span style="color: #032f62;">'customers'</span>: customers,
+            <span style="color: #032f62;">'mixin_used'</span>: <span style="color: #032f62;">'AnonymizedDataMixin'</span>,
         })
-        return context</code></pre>
+        <span style="color: #d73a49; font-weight: 600;">return</span> context</code></pre>
+                    <button onclick="copyCode(this)" style="position: absolute; top: 8px; right: 8px; background: #0366d6; color: white; border: none; border-radius: 4px; padding: 4px 8px; font-size: 11px; cursor: pointer; opacity: 0.7;" title="Copy code">
+                        Copy
+                    </button>
+                </div>
 
                 <div class="mt-3">
                     <h6>Key Features</h6>
@@ -274,3 +282,43 @@ <h6>Key Features</h6>
     </div>
 </div>
 {% endblock %}
+
+{% block extra_js %}
+<script>
+function copyCode(button) {
+    const codeBlock = button.previousElementSibling.querySelector('code');
+    const text = codeBlock.textContent;
+
+    navigator.clipboard.writeText(text).then(function() {
+        const originalText = button.textContent;
+        button.textContent = 'Copied!';
+        button.style.background = '#28a745';
+        button.style.opacity = '1';
+
+        setTimeout(function() {
+            button.textContent = originalText;
+            button.style.background = '#0366d6';
+            button.style.opacity = '0.7';
+        }, 2000);
+    }).catch(function(err) {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+
+        const originalText = button.textContent;
+        button.textContent = 'Copied!';
+        button.style.background = '#28a745';
+        button.style.opacity = '1';
+
+        setTimeout(function() {
+            button.textContent = originalText;
+            button.style.background = '#0366d6';
+            button.style.opacity = '0.7';
+        }, 2000);
+    });
+}
+</script>
+{% endblock %}
diff --git a/example_project/templates/sample_app/context_manager_demo.html b/example_project/templates/sample_app/context_manager_demo.html
@@ -5,10 +5,10 @@
 {% block content %}
 <div class="row">
     <div class="col-12">
-        <div class="card mb-4">
-            <div class="card-header">
+        <div class="card mb-4" style="border: 3px solid #28a745; background: linear-gradient(45deg, #f8f9fa, #e9ecef);">
+            <div class="card-header" style="background: linear-gradient(45deg, #28a745, #20c997); color: white;">
                 <h4 class="mb-0">
-                    <i class="fas fa-code me-2"></i>{{ demo_title }}
+                    <i class="fas fa-code me-2"></i>Context Manager Demo
                 </h4>
             </div>
             <div class="card-body">
@@ -31,7 +31,12 @@ <h5 class="mb-0">
             </div>
             <div class="card-body">
                 <p class="small text-muted">Direct database queries without anonymization:</p>
-                <pre class="bg-light p-2 rounded"><code>User.objects.values('username', 'email')[:5]</code></pre>
+                <div class="code-block" style="position: relative;">
+                    <pre style="background: #f6f8fa; border: 1px solid #e1e4e8; border-radius: 6px; padding: 16px; margin: 0; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13px; line-height: 1.45;"><code>User.objects.<span style="color: #6f42c1; font-weight: 600;">values</span>(<span style="color: #032f62;">'username'</span>, <span style="color: #032f62;">'email'</span>)[<span style="color: #005cc5;">:</span><span style="color: #005cc5;">5</span>]</code></pre>
+                    <button onclick="copyCode(this)" style="position: absolute; top: 8px; right: 8px; background: #0366d6; color: white; border: none; border-radius: 4px; padding: 4px 8px; font-size: 11px; cursor: pointer; opacity: 0.7;" title="Copy code">
+                        Copy
+                    </button>
+                </div>
 
                 <div class="mt-3">
                     {% for user in normal_data %}
@@ -58,10 +63,15 @@ <h5 class="mb-0">
             </div>
             <div class="card-body">
                 <p class="small text-muted">Using <code>anonymized_data()</code> context manager:</p>
-                <pre class="bg-light p-2 rounded"><code>from django_postgres_anon.context_managers import anonymized_data
-
-with anonymized_data():
-    User.objects.values('username', 'email')[:5]</code></pre>
+                <div style="position: relative;">
+                    <pre style="background: #f6f8fa; border: 1px solid #e1e4e8; border-radius: 6px; padding: 16px; margin: 0; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13px; line-height: 1.45;"><code><span style="color: #d73a49; font-weight: 600;">from</span> django_postgres_anon.context_managers <span style="color: #d73a49; font-weight: 600;">import</span> anonymized_data
+
+<span style="color: #d73a49; font-weight: 600;">with</span> <span style="color: #6f42c1;">anonymized_data</span>():
+    User.objects.<span style="color: #6f42c1;">values</span>(<span style="color: #032f62;">'username'</span>, <span style="color: #032f62;">'email'</span>)[<span style="color: #005cc5;">:</span><span style="color: #005cc5;">5</span>]</code></pre>
+                    <button onclick="copyCode(this)" style="position: absolute; top: 8px; right: 8px; background: #0366d6; color: white; border: none; border-radius: 4px; padding: 4px 8px; font-size: 11px; cursor: pointer; opacity: 0.7;" title="Copy code">
+                        Copy
+                    </button>
+                </div>
 
                 <div class="mt-3">
                     {% for user in anonymized_data %}
@@ -94,10 +104,15 @@ <h5 class="mb-0">
             </div>
             <div class="card-body">
                 <p class="small text-muted">Using <code>database_role()</code> context manager:</p>
-                <pre class="bg-light p-2 rounded"><code>from django_postgres_anon.context_managers import database_role
-
-with database_role('masked_reader'):
-    User.objects.values('username', 'email')[:5]</code></pre>
+                <div style="position: relative;">
+                    <pre style="background: #f6f8fa; border: 1px solid #e1e4e8; border-radius: 6px; padding: 16px; margin: 0; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13px; line-height: 1.45;"><code><span style="color: #d73a49; font-weight: 600;">from</span> django_postgres_anon.context_managers <span style="color: #d73a49; font-weight: 600;">import</span> database_role
+
+<span style="color: #d73a49; font-weight: 600;">with</span> <span style="color: #6f42c1;">database_role</span>(<span style="color: #032f62;">'masked_reader'</span>):
+    User.objects.<span style="color: #6f42c1;">values</span>(<span style="color: #032f62;">'username'</span>, <span style="color: #032f62;">'email'</span>)[<span style="color: #005cc5;">:</span><span style="color: #005cc5;">5</span>]</code></pre>
+                    <button onclick="copyCode(this)" style="position: absolute; top: 8px; right: 8px; background: #0366d6; color: white; border: none; border-radius: 4px; padding: 4px 8px; font-size: 11px; cursor: pointer; opacity: 0.7;" title="Copy code">
+                        Copy
+                    </button>
+                </div>
 
                 <div class="mt-3">
                     {% for user in role_switched_data %}
@@ -125,97 +140,72 @@ <h5 class="mb-0">
 <div class="row">
     <div class="col-12">
         <div class="card mb-4">
-            <div class="card-header bg-info text-white">
+            <div class="card-header" style="background: linear-gradient(45deg, #17a2b8, #138496); color: white;">
                 <h5 class="mb-0">
-                    <i class="fas fa-copy me-2"></i>Quick Start - Copy & Paste Ready
+                    <i class="fas fa-copy me-2"></i>✨ Quick Start - Copy & Paste Ready
                 </h5>
             </div>
             <div class="card-body">
                 <p class="mb-3">Ready to use this in your project? Copy and paste this code:</p>
-                <pre class="bg-light p-3 rounded"><code># Import the context managers
-from django_postgres_anon.context_managers import anonymized_data, database_role
-
-# Basic usage in your views
-def my_view(request):
-    # Get anonymized data
-    with anonymized_data():
-        users = User.objects.all()
-
-    # Or use specific role
-    with database_role('masked_reader'):
-        customers = Customer.objects.all()
-
-    return render(request, 'template.html', {'users': users})</code></pre>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Code Examples -->
-<div class="row">
-    <div class="col-12">
-        <div class="card">
-            <div class="card-header">
-                <h5 class="mb-0">
-                    <i class="fas fa-code me-2"></i>Implementation Examples
-                </h5>
-            </div>
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-md-6">
-                        <h6>Context Manager Usage</h6>
-                        <pre class="bg-light p-3 rounded"><code># Temporary anonymized access
-from django_postgres_anon.context_managers import anonymized_data
-
-def my_view(request):
-    # Normal data access
-    normal_users = User.objects.all()
-
-    # Anonymized data access
-    with anonymized_data():
-        anon_users = User.objects.all()
-
-    return render(request, 'template.html', {
-        'normal': normal_users,
-        'anonymized': anon_users
-    })</code></pre>
-                    </div>
-                    <div class="col-md-6">
-                        <h6>Role Switching</h6>
-                        <pre class="bg-light p-3 rounded"><code># Switch to specific database role
-from django_postgres_anon.context_managers import database_role
-
-def admin_view(request):
-    # Switch to masked reader role
-    with database_role('masked_reader'):
-        sensitive_data = Customer.objects.all()
-
-    # Back to normal role
-    normal_data = Customer.objects.all()
-
-    return render(request, 'admin.html', {
-        'masked': sensitive_data,
-        'normal': normal_data
-    })</code></pre>
-                    </div>
+                <div style="position: relative;">
+                    <pre style="background: #f6f8fa; border: 1px solid #e1e4e8; border-radius: 6px; padding: 16px; margin: 0; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13px; line-height: 1.45;"><code><span style="color: #6a737d; font-style: italic;"># Import the context managers</span>
+<span style="color: #d73a49; font-weight: 600;">from</span> django_postgres_anon.context_managers <span style="color: #d73a49; font-weight: 600;">import</span> anonymized_data, database_role
+
+<span style="color: #6a737d; font-style: italic;"># Basic usage in your views</span>
+<span style="color: #d73a49; font-weight: 600;">def</span> <span style="color: #6f42c1;">my_view</span>(request):
+    <span style="color: #6a737d; font-style: italic;"># Get anonymized data</span>
+    <span style="color: #d73a49; font-weight: 600;">with</span> <span style="color: #6f42c1;">anonymized_data</span>():
+        users = User.objects.<span style="color: #6f42c1;">all</span>()
+
+    <span style="color: #6a737d; font-style: italic;"># Or use specific role</span>
+    <span style="color: #d73a49; font-weight: 600;">with</span> <span style="color: #6f42c1;">database_role</span>(<span style="color: #032f62;">'masked_reader'</span>):
+        customers = Customer.objects.<span style="color: #6f42c1;">all</span>()
+
+    <span style="color: #d73a49; font-weight: 600;">return</span> <span style="color: #6f42c1;">render</span>(request, <span style="color: #032f62;">'template.html'</span>, {<span style="color: #032f62;">'users'</span>: users})</code></pre>
+                    <button onclick="copyCode(this)" style="position: absolute; top: 8px; right: 8px; background: #0366d6; color: white; border: none; border-radius: 4px; padding: 4px 8px; font-size: 11px; cursor: pointer; opacity: 0.7;" title="Copy code">
+                        Copy
+                    </button>
                 </div>
             </div>
         </div>
     </div>
 </div>
 
-<!-- Navigation -->
-<div class="row mt-4">
-    <div class="col-12 text-center">
-        <a href="{% url 'sample_app:anonymization_demo' %}" class="btn btn-outline-primary me-2">
-            <i class="fas fa-arrow-left me-1"></i>Back to Demo
-        </a>
-        <a href="/api/decorated-users/" class="btn btn-primary me-2" target="_blank">
-            <i class="fas fa-external-link-alt me-1"></i>Try Decorator API
-        </a>
-        <a href="{% url 'sample_app:function_validator_demo' %}" class="btn btn-success">
-            <i class="fas fa-check-circle me-1"></i>Function Validator
-        </a>
-    </div>
-</div>
-{% endblock %}
+<script>
+function copyCode(button) {
+    const codeBlock = button.previousElementSibling.querySelector('code');
+    const text = codeBlock.textContent;
+
+    navigator.clipboard.writeText(text).then(function() {
+        const originalText = button.textContent;
+        button.textContent = 'Copied!';
+        button.style.background = '#28a745';
+        button.style.opacity = '1';
+
+        setTimeout(function() {
+            button.textContent = originalText;
+            button.style.background = '#0366d6';
+            button.style.opacity = '0.7';
+        }, 2000);
+    }).catch(function(err) {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+
+        const originalText = button.textContent;
+        button.textContent = 'Copied!';
+        button.style.background = '#28a745';
+        button.style.opacity = '1';
+
+        setTimeout(function() {
+            button.textContent = originalText;
+            button.style.background = '#0366d6';
+            button.style.opacity = '0.7';
+        }, 2000);
+    });
+}
+</script>
+{% endblock %}
diff --git a/example_project/templates/sample_app/function_validator_demo.html b/example_project/templates/sample_app/function_validator_demo.html
diff --git a/example_project/templates/sample_app/index.html b/example_project/templates/sample_app/index.html
