Skip to content

Commit

Permalink
Add code highlighting
Browse files Browse the repository at this point in the history
  • Loading branch information
@youzarsiph
youzarsiph committed May 2, 2024
1 parent 2d4e571 commit f82ffaa
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 145 deletions.
297 changes: 153 additions & 144 deletions drf_material/templates/rest_framework/api.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.2/mdb.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@latest/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/a11y-light.min.css">
{% endblock %}

<style>
Expand Down Expand Up @@ -136,17 +137,17 @@ <h5 class="dropdown-header">
<nav aria-label="breadcrumb" class="card card-body shadow-sm rounded-5 mb-4 mt-5 p-3">
<ol class="breadcrumb mb-0">
{% for breadcrumb_name, breadcrumb_url in breadcrumblist %}
{% if forloop.last %}
<li class="breadcrumb-item active" aria-current="page">
{{ breadcrumb_name }}
</li>
{% else %}
<li class="breadcrumb-item">
<a href="{{ breadcrumb_url }}">{{ breadcrumb_name }}</a>
</li>
{% endif %}
{% if forloop.last %}
<li class="breadcrumb-item active" aria-current="page">
{{ breadcrumb_name }}
</li>
{% else %}
<li class="breadcrumb-item">
<a href="{{ breadcrumb_url }}">{{ breadcrumb_name }}</a>
</li>
{% endif %}
{% empty %}
{% block breadcrummdb_empty %}&nmdbp;{% endblock breadcrummdb_empty %}
{% block breadcrummdb_empty %}&nmdbp;{% endblock breadcrummdb_empty %}
{% endfor %}
</ol>
</nav>
Expand All @@ -161,176 +162,181 @@ <h1 class="display-4">{{ name }}</h1>
</div>
<div class="lead">
{% block description %}
{{ description }}
{{ description }}
{% endblock %}
</div>
</section>


{% block request_forms %}
<section class="d-grid d-md-flex align-items-lg-center justify-content-lg-end gap-4 mb-4"
aria-label="{% translate 'Request form' %}">
{% if 'GET' in allowed_methods %}
<form id="get-form">
<fieldset>
{% if api_settings.URL_FORMAT_OVERRIDE %}
<div class="btn-group w-100 gap-4 rounded-5" role="group">
<a class="btn btn-primary w-100 rounded-5" href="{{ request.get_full_path }}" rel="nofollow"
<section class="d-grid d-md-flex align-items-lg-center justify-content-lg-end gap-4 mb-4"
aria-label="{% translate 'Request form' %}">
{% if 'GET' in allowed_methods %}
<form id="get-form">
<fieldset>
{% if api_settings.URL_FORMAT_OVERRIDE %}
<div class="btn-group w-100 gap-4 rounded-5" role="group">
<a class="btn btn-primary w-100 rounded-5" href="{{ request.get_full_path }}" rel="nofollow"
title="Make a GET request on the {{ name }} resource" data-mdb-toggle="tooltip">
<span class="d-flex align-items-center justify-content-center gap-4">
<i class="bi bi-arrow-clockwise"></i>
{% translate "GET" %}
</span>
</a>
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle rounded-5" type="button" id="dropdownMenuButton"
data-mdb-toggle="dropdown" aria-expanded="false">
<i class="bi bi-chevron-down"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end rounded-5 shadow-sm w-100" aria-labelledby="dropdownMenuButton">
<li>
<h6 class="dropdown-header">
{% translate 'Select a format' %}
</h6>
</li>
{% for format in available_formats %}
<li>
<a class="dropdown-item" href="{% add_query_param request api_settings.URL_FORMAT_OVERRIDE format %}"
rel="nofollow" data-mdb-toggle="tooltip"
title="Make a GET request on the {{ name }} resource with the format set to `{{ format|upper }}`">
{{ format|upper }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{% else %}
<a class="btn btn-primary rounded-5" href="{{ request.get_full_path }}" rel="nofollow"
title="Make a GET request on the {{ name }} resource" data-mdb-toggle="tooltip">
<span class="d-flex align-items-center justify-content-center gap-4">
<i class="bi bi-arrow-clockwise"></i>
{% translate "GET" %}
</span>
</a>
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle rounded-5" type="button" id="dropdownMenuButton"
data-mdb-toggle="dropdown" aria-expanded="false">
<i class="bi bi-chevron-down"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end rounded-5 shadow-sm w-100" aria-labelledby="dropdownMenuButton">
<li>
<h6 class="dropdown-header">
{% translate 'Select a format' %}
</h6>
</li>
{% for format in available_formats %}
<li>
<a class="dropdown-item" href="{% add_query_param request api_settings.URL_FORMAT_OVERRIDE format %}"
rel="nofollow" data-mdb-toggle="tooltip"
title="Make a GET request on the {{ name }} resource with the format set to `{{ format|upper }}`">
{{ format|upper }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{% else %}
<a class="btn btn-primary rounded-5" href="{{ request.get_full_path }}" rel="nofollow"
title="Make a GET request on the {{ name }} resource" data-mdb-toggle="tooltip">
{% endif %}
</fieldset>
</form>
{% endif %}

{% if options_form %}
<form class="button-form" action="{{ request.get_full_path }}" data-method="OPTIONS">
<button type="submit" class="btn btn-info w-100 rounded-5"
title="Make an OPTIONS request on the {{ name }} resource" data-mdb-toggle="tooltip">
<span class="d-flex align-items-center justify-content-center gap-4">
<i class="bi bi-arrow-clockwise"></i>
{% translate "GET" %}
<i class="bi bi-info-square"></i>
{% translate "OPTIONS" %}
</span>
</a>
{% endif %}
</fieldset>
</form>
{% endif %}

{% if options_form %}
<form class="button-form" action="{{ request.get_full_path }}" data-method="OPTIONS">
<button type="submit" class="btn btn-info w-100 rounded-5"
title="Make an OPTIONS request on the {{ name }} resource" data-mdb-toggle="tooltip">
<span class="d-flex align-items-center justify-content-center gap-4">
<i class="bi bi-info-square"></i>
{% translate "OPTIONS" %}
</span>
</button>
</form>
{% endif %}
</button>
</form>
{% endif %}

{% if delete_form %}
<div>
<button type="button" class="btn btn-danger w-100 rounded-5" data-mdb-toggle="modal"
data-mdb-target="#deleteModal" title="Make a DELETE request on the {{ name }} resource">
<span class="d-flex align-items-center justify-content-center gap-4">
<i class="bi bi-trash"></i>
{% translate "DELETE" %}
</span>
</button>
</div>
{% if delete_form %}
<div>
<button type="button" class="btn btn-danger w-100 rounded-5" data-mdb-toggle="modal"
data-mdb-target="#deleteModal" title="Make a DELETE request on the {{ name }} resource">
<span class="d-flex align-items-center justify-content-center gap-4">
<i class="bi bi-trash"></i>
{% translate "DELETE" %}
</span>
</button>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content p-md-3 p-lg-4 rounded-5 shadow">
<div class="modal-header border-bottom-0">
<h3 class="modal-title" id="exampleModalLabel">
{% translate 'Delete' %} {{ name }}
</h3>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="mb-4">
{% translate "Are you sure you want to delete this" %} {{ name }}?
</p>
<div class="d-grid d-lg-flex align-items-lg-center gap-4">
<form class="button-form w-100" action="{{ request.get_full_path }}" data-method="DELETE">
<button class="btn btn-danger w-100 rounded-5">
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content p-md-3 p-lg-4 rounded-5 shadow">
<div class="modal-header border-bottom-0">
<h3 class="modal-title" id="exampleModalLabel">
{% translate 'Delete' %} {{ name }}
</h3>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="mb-4">
{% translate "Are you sure you want to delete this" %} {{ name }}?
</p>
<div class="d-grid d-lg-flex align-items-lg-center gap-4">
<form class="button-form w-100" action="{{ request.get_full_path }}" data-method="DELETE">
<button class="btn btn-danger w-100 rounded-5">
<span class="d-flex align-item-center justify-content-center gap-4">
<i class="bi bi-trash"></i>
{% translate "Delete" %}
</span>
</button>
</form>
<button type="button" class="btn btn-outline-secondary w-100 rounded-5" data-mdb-dismiss="modal">
<span class="d-flex align-item-center justify-content-center gap-4">
<i class="bi bi-trash"></i>
{% translate "Delete" %}
<i class="bi bi-x-lg"></i>
{% translate "Cancel" %}
</span>
</button>
</form>
<button type="button" class="btn btn-outline-secondary w-100 rounded-5" data-mdb-dismiss="modal">
<span class="d-flex align-item-center justify-content-center gap-4">
<i class="bi bi-x-lg"></i>
{% translate "Cancel" %}
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}

{% if extra_actions %}
<div class="dropdown">
<button class="btn btn-info w-100 rounded-5" id="extra-actions-menu" data-mdb-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
{% if extra_actions %}
<div class="dropdown">
<button class="btn btn-info w-100 rounded-5" id="extra-actions-menu" data-mdb-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
<span class="d-flex align-items-center justify-content-center gap-4">
{% translate "Extra Actions" %}
<i class="bi bi-chevron-down"></i>
</span>
</button>
<ul class="dropdown-menu rounded-5 shadow-sm w-100" aria-labelledby="extra-actions-menu">
<li>
<h3 class="dropdown-header">
{% translate 'Select an action' %}
</h3>
</li>
{% for action_name, url in extra_actions|items %}
<li>
<a class="dropdown-item" href="{{ url }}">
{{ action_name }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}

{% if filter_form %}
<button data-mdb-toggle="modal" data-mdb-target="#filtersModal" class="btn btn-success rounded-5">
<span class="d-flex align-items-center justify-content-center gap-4">
{% translate "Extra Actions" %}
<i class="bi bi-chevron-down"></i>
<i class="bi bi-filter"></i>
{% translate "Filters" %}
</span>
</button>
<ul class="dropdown-menu rounded-5 shadow-sm w-100" aria-labelledby="extra-actions-menu">
<li>
<h3 class="dropdown-header">
{% translate 'Select an action' %}
</h3>
</li>
{% for action_name, url in extra_actions|items %}
<li>
<a class="dropdown-item" href="{{ url }}">
{{ action_name }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}

{% if filter_form %}
<button data-mdb-toggle="modal" data-mdb-target="#filtersModal" class="btn btn-success rounded-5">
<span class="d-flex align-items-center justify-content-center gap-4">
<i class="bi bi-filter"></i>
{% translate "Filters" %}
</span>
</button>
{% endif %}
</section>
{% endif %}
</section>
{% endblock %}

{% if paginator %}
<section title="{% translate 'Pagination' %}" class="d-flex align-item-center justify-content-end mb-4">
{% get_pagination_html paginator %}
</section>
<section title="{% translate 'Pagination' %}" class="d-flex align-item-center justify-content-end mb-4">
{% get_pagination_html paginator %}
</section>
{% endif %}

<div class="row g-4 mb-4" aria-label="{% translate 'Main content' %}">
<section class="col-12 col-lg-8 order-last order-lg-first" role="main" aria-label="{% translate 'Main content' %}">
<div class="card card-body rounded-5 p-4 shadow-sm">
<div class="request-info" aria-label="{% translate 'Request info' %}">
<pre class="prettyprint"><b>{{ request.method }}</b> {{ request.get_full_path }}</pre>
</div>
<div class="card card-body rounded-4 p-4 shadow-sm">
<div class="request-info" aria-label="{% translate 'Request info' %}">
<pre
class="prettyprint"><code class="language-http" style="padding: 0; background-color: transparent;">{{ request.method }} {{ request.get_full_path }}</code></pre>
</div>

<div class="response-info" aria-label="{% translate 'response info' %}">
<pre
class="prettyprint d-grid gap-4"><div class="overflow-auto"><div><strong>HTTP {{ response.status_code }} {{ response.status_text }}</strong></div>{% for key, val in response_headers|items %}<div><strong>{{ key }}:</strong> <span class="lit">{{ val|break_long_headers|urlize }}</span></div>{% endfor %}</div><code>{{ content|urlize }}</code></pre>
</div>
<div class="response-info" aria-label="{% translate 'response info' %}">
<pre class="prettyprint d-grid gap-4">
<code class="language-http" style="padding: 0; background-color: transparent;">HTTP {{ response.status_code }} {{ response.status_text }}
{% for key, val in response_headers|items %}{{ key }}: {{ val|break_long_headers|urlize }}
{% endfor %}</code>
<code class="language-json" style="padding: 0; background-color: transparent;">{{ content|urlize }}</code>
</pre>
</div>
</div>
</section>

<section class="col-12 col-lg-4">
Expand Down Expand Up @@ -504,4 +510,7 @@ <h3 class="dropdown-header">
{% block script %}
{{ block.super }}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.2/mdb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/http.min.js"></script>
<script>hljs.highlightAll()</script>
{% endblock %}
2 changes: 1 addition & 1 deletion pyproject.toml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[tool.poetry]
name = "drf-material"
version = "0.2.7"
version = "0.2.8"
description = "Material design for Django REST Framework API"
authors = ["Yousef Abu Shanab <[email protected]>"]
license = "MIT"
Expand Down

0 comments on commit f82ffaa

Please sign in to comment.