diff --git a/app/core/template_filters.py b/app/core/template_filters.py index 00de02b..3fff617 100644 --- a/app/core/template_filters.py +++ b/app/core/template_filters.py @@ -57,6 +57,15 @@ def github_style_admonition(text): return '\n'.join(result_lines) +# Register template filters +@bp.app_template_filter('github_style_admonition') +def github_style_admonition_filter(text): + """Template filter version of github_style_admonition""" + if text is None: + return "" + return github_style_admonition(text) + + @bp.app_template_filter("markdown") def markdown_filter(text): """Convert markdown text to HTML with proper GitHub styling for all elements""" diff --git a/app/static/css/custom.css b/app/static/css/custom.css index b2da5ba..7fa6712 100644 --- a/app/static/css/custom.css +++ b/app/static/css/custom.css @@ -488,14 +488,62 @@ margin-right: 0.25rem; } -/* Add compatibility classes for GitHub markdown */ -.markdown-content .markdown-reading-view { +/* Integration with GitHub markdown classes */ +.markdown-content .markdown-reading-view, +.markdown-content .markdown-source-view { width: 100%; color: var(--markdown-text); - background-color: var(--markdown-bg); + background-color: transparent; } -[data-bs-theme="dark"] .markdown-content .markdown-reading-view { +/* Ensure markdown content adapts to theme */ +.markdown-content { color: var(--markdown-text); - background-color: var(--markdown-bg); + background-color: transparent; +} + +/* Application Card Styling */ +.app-card { + background-color: var(--card-bg); + border: 1px solid var(--border-color); + border-radius: 0.375rem; + overflow: hidden; + margin-bottom: 1rem; +} + +.app-card-header { + background-color: rgba(0, 0, 0, 0.03); + border-bottom: 1px solid var(--border-color); + padding: 0.75rem 1rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +[data-bs-theme="dark"] .app-card-header { + background-color: rgba(255, 255, 255, 0.03); +} + +.app-card-body { + padding: 1rem; +} + +.app-card-footer { + border-top: 1px solid var(--border-color); + padding: 0.5rem 1rem; + background-color: rgba(0, 0, 0, 0.01); +} + +[data-bs-theme="dark"] .app-card-footer { + background-color: rgba(255, 255, 255, 0.01); +} + +.app-link { + color: var(--text-color); + text-decoration: none; + font-weight: 600; +} + +.app-link:hover { + color: var(--highlight-color); } \ No newline at end of file diff --git a/app/static/css/markdown.css b/app/static/css/markdown.css deleted file mode 100644 index bbfcff9..0000000 --- a/app/static/css/markdown.css +++ /dev/null @@ -1,195 +0,0 @@ -/* Enhanced Markdown Styling */ -.markdown-content { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 1.6; - word-wrap: break-word; - color: #24292e; -} - -.markdown-content h1, -.markdown-content h2, -.markdown-content h3, -.markdown-content h4, -.markdown-content h5, -.markdown-content h6 { - margin-top: 24px; - margin-bottom: 16px; - font-weight: 600; - line-height: 1.25; -} - -.markdown-content h1 { - font-size: 2em; - border-bottom: 1px solid #eaecef; - padding-bottom: .3em; -} - -.markdown-content h2 { - font-size: 1.5em; - border-bottom: 1px solid #eaecef; - padding-bottom: .3em; -} - -.markdown-content h3 { - font-size: 1.25em; -} - -.markdown-content h4 { - font-size: 1em; -} - -.markdown-content p { - margin-top: 0; - margin-bottom: 16px; -} - -.markdown-content blockquote { - padding: 0 1em; - color: #6a737d; - border-left: 0.25em solid #dfe2e5; - margin: 0 0 16px 0; -} - -.markdown-content pre { - padding: 16px; - overflow: auto; - font-size: 85%; - line-height: 1.45; - background-color: #f6f8fa; - border-radius: 3px; - margin-bottom: 16px; -} - -.markdown-content code { - padding: 0.2em 0.4em; - margin: 0; - font-size: 85%; - background-color: rgba(27, 31, 35, 0.05); - border-radius: 3px; -} - -.markdown-content pre code { - background-color: transparent; - padding: 0; -} - -.markdown-content table { - border-spacing: 0; - border-collapse: collapse; - margin-bottom: 16px; - width: 100%; - overflow: auto; -} - -.markdown-content table th, -.markdown-content table td { - padding: 6px 13px; - border: 1px solid #dfe2e5; -} - -.markdown-content table tr { - background-color: #fff; - border-top: 1px solid #c6cbd1; -} - -.markdown-content table tr:nth-child(2n) { - background-color: #f6f8fa; -} - -/* GitHub-style alerts */ -.markdown-alert { - padding: 0.5rem 1rem; - margin-bottom: 16px; - border-radius: 6px; -} - -.markdown-alert p { - margin-top: 0; - margin-bottom: 0; -} - -.markdown-alert p:first-of-type { - margin-top: 8px; -} - -.markdown-alert-title { - font-weight: bold; - margin-bottom: 8px; -} - -.markdown-alert-note { - background-color: #f1f8ff; - border-left: 4px solid #58a6ff; -} - -.markdown-alert-tip { - background-color: #dafbe1; - border-left: 4px solid #2da44e; -} - -.markdown-alert-important { - background-color: #fff8c5; - border-left: 4px solid #bf8700; -} - -.markdown-alert-warning { - background-color: #fff8c5; - border-left: 4px solid #bf8700; -} - -.markdown-alert-caution { - background-color: #ffebe9; - border-left: 4px solid #cf222e; -} - -/* Add this to ensure consistent display of markdown content */ -.markdown-body { - color: inherit; - font-family: inherit; -} - -.markdown-content { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; - line-height: 1.6; - color: #24292e; - overflow-wrap: break-word; - padding: 0; -} - -.markdown-content h1:first-child, -.markdown-content h2:first-child, -.markdown-content h3:first-child, -.markdown-content h4:first-child, -.markdown-content h5:first-child, -.markdown-content h6:first-child { - margin-top: 0; -} - -/* Additional styling for consistency in all views */ -.markdown-content pre, -.markdown-body pre { - background-color: #f6f8fa; - border-radius: 3px; - padding: 16px; - overflow: auto; - font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; - font-size: 85%; -} - -.markdown-content code, -.markdown-body code { - background-color: rgba(27, 31, 35, 0.05); - border-radius: 3px; - font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; - font-size: 85%; - margin: 0; - padding: 0.2em 0.4em; -} - -/* Make sure all GitHub-style alert boxes look the same */ -.markdown-alert { - padding: 8px 16px; - margin-bottom: 16px; - border-radius: 6px; -} \ No newline at end of file diff --git a/app/templates/components/markdown_content.html b/app/templates/components/markdown_content.html new file mode 100644 index 0000000..f0a6101 --- /dev/null +++ b/app/templates/components/markdown_content.html @@ -0,0 +1,11 @@ +{% macro render_markdown(content) %} +
+ {{ content|github_style_admonition|markdown|safe }} +
+{% endmacro %} + +{% macro render_markdown_with_truncate(content, length=300) %} +
+ {{ content|github_style_admonition|markdown|truncate(length, true)|safe }} +
+{% endmacro %} \ No newline at end of file diff --git a/app/templates/dashboard/app_view.html b/app/templates/dashboard/app_view.html index 064e303..c858746 100644 --- a/app/templates/dashboard/app_view.html +++ b/app/templates/dashboard/app_view.html @@ -1,7 +1,12 @@ {% extends "layout.html" %} +{% from "components/markdown_content.html" import render_markdown %} {% block title %}{{ title }}{% endblock %} +{% block styles %} + +{% endblock %} + {% block content %}
@@ -111,27 +116,23 @@
-
+

Documentation

+ {% if current_user.is_admin %} +
+ + Edit Documentation + +
+ {% endif %}
-
+
{% if app.documentation %} - {{ app.documentation|markdown|safe }} + {{ render_markdown(app.documentation) }} {% else %} -
-
- -
-

No documentation available

-

- Add documentation to this application to keep track of important information. -

-
- - Add Documentation - -
+
+ No documentation available for this application.
{% endif %}
diff --git a/app/templates/dashboard/subnet_view.html b/app/templates/dashboard/subnet_view.html index 3327646..8afd1b6 100644 --- a/app/templates/dashboard/subnet_view.html +++ b/app/templates/dashboard/subnet_view.html @@ -1,3 +1,9 @@ +{% extends "dashboard/layout.html" %} +{% from "components/markdown_content.html" import render_markdown, render_markdown_with_truncate %} + +{% block title %}Subnet {{ subnet.cidr }}{% endblock %} + +{% block content %}
@@ -63,35 +69,36 @@ }); - +

Applications in this Subnet

+ {% if subnet.applications %} {% for app in subnet.applications %}
-
+
{{ app.name }} {% if app.server %} - on {{ app.server.hostname }} ({{ app.server.ip_address }}) + on {{ app.server.hostname }} ({{ app.server.ip_address }}) {% endif %} View
- {% if app.documentation %} -
-
- {{ app.documentation|markdown|safe }} -
+ +
+ {% if app.documentation %} + {{ render_markdown_with_truncate(app.documentation) }} + Read more + {% else %} +

No documentation available for this application.

+ {% endif %}
- {% else %} -
- No documentation available for this application. -
- {% endif %} -
+ + {% if app.ports %} +
Usage @@ -100,19 +107,18 @@
- {% if app.ports %} - {{ app.ports|length }} ports - {% else %} - No ports - {% endif %} + {{ app.ports|length }} port{% if app.ports|length != 1 %}s{% endif %}
+ {% endif %}
+ {% endfor %} {% else %}
No applications found in this subnet.
- {% endfor %} + {% endif %}
-
\ No newline at end of file +
+{% endblock %} \ No newline at end of file diff --git a/app/templates/layout.html b/app/templates/layout.html index 3eff0d3..495b688 100644 --- a/app/templates/layout.html +++ b/app/templates/layout.html @@ -1,5 +1,5 @@ - + @@ -605,4 +605,4 @@ {% block scripts %}{% endblock %} - + \ No newline at end of file