Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

themes/mkdocs: Avoid inline ressources (like CSS and JS) #1907

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

themes/mkdocs: Avoid inline ressources (like CSS and JS) #1907

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
97fa8a8
themes/mkdocs: Pass inline data to JS as a JSON object, not raw Javas…
nbraud Nov 17, 2019
ee6c526
themes/mkdocs: Do not use an inline script to initialize highlight.js
nbraud Nov 17, 2019
4eb29c4
themes/mkdocs: Eliminate inline CSS
nbraud Nov 17, 2019
4193834
themes/mkdocs: Make base_url global (in the JS environment)
nbraud Nov 17, 2019
7a671e3
theme/mkdocs/base.js: Avoid modern JS constructs for compatibility
nbraud Nov 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions mkdocs/themes/mkdocs/404.html
View file
Open in desktop
Expand Up @@ -3,9 +3,9 @@
{% block content %}

<div class="row-fluid">
<div id="main-content" class="span12">
<h1 id="404-page-not-found" style="text-align: center">404</h1>
<p style="text-align: center"><strong>Page not found</strong></p>
<div id="main-content" class="span12 centered">
<h1 id="404-page-not-found">404</h1>
<p><strong>Page not found</strong></p>
</div>
</div>

Expand Down
8 changes: 4 additions & 4 deletions mkdocs/themes/mkdocs/base.html
View file
Open in desktop
Expand Up @@ -37,7 +37,6 @@
{%- for lang in config.theme.hljs_languages %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/{{lang}}.min.js"></script>
{%- endfor %}
<script>hljs.initHighlightingOnLoad();</script>
{%- endif %}
{%- endblock %}

Expand Down Expand Up @@ -185,9 +184,10 @@
</footer>

{%- block scripts %}
<script>
var base_url = {{ base_url | tojson }},
shortcuts = {{ config.theme.shortcuts | tojson }};
<script type="application/json" mkdocs-selector="data">
{{ {'base_url': base_url,
'highlightjs': config.theme.highlightjs,
'shortcuts': config.theme.shortcuts} | tojson }}
</script>
<script src="{{ 'js/base.js'|url }}" defer></script>
{%- for path in config['extra_javascript'] %}
Expand Down
8 changes: 8 additions & 0 deletions mkdocs/themes/mkdocs/css/base.css
View file
Open in desktop
Expand Up @@ -117,13 +117,21 @@ a:hover code, a:focus code {
color: #157AB5;
}

centered {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not a really big deal - but a class name of text-center would be more semantically correct.

text-align: center;
}

footer {
margin-top: 30px;
margin-bottom: 10px;
text-align: center;
font-weight: 200;
}

keyboard-keys {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a class so is missing the . at the beginning.

width: 20%;
}

.modal-dialog {
margin-top: 60px;
}
Expand Down
15 changes: 14 additions & 1 deletion mkdocs/themes/mkdocs/js/base.js
View file
Open in desktop
Expand Up @@ -12,12 +12,25 @@ function getSearchTerm()
}
}

$(document).ready(function() {
// Make base_url global, so external scripts can find it
// (e.g. the search plugin)
window.base_url = JSON.parse(document.querySelector(
'script[type="application/json"][mkdocs-selector="data"]'
).textContent).base_url;

$(document).ready(function() {
var data = JSON.parse(document.querySelector(
'script[type="application/json"][mkdocs-selector="data"]'
).textContent);
var search_term = getSearchTerm(),
shortcuts = data.shortcuts,
$search_modal = $('#mkdocs_search_modal'),
$keyboard_modal = $('#mkdocs_keyboard_modal');

if(data.highlightjs) {
hljs.initHighlightingOnLoad();
}

if(search_term){
$search_modal.modal();
}
Expand Down
2 changes: 1 addition & 1 deletion mkdocs/themes/mkdocs/keyboard-modal.html
View file
Open in desktop
Expand Up @@ -9,7 +9,7 @@ <h4 class="modal-title" id="keyboardModalLabel">Keyboard Shortcuts</h4>
<table class="table">
<thead>
<tr>
<th style="width: 20%;">Keys</th>
<th class="keyboard-keys">Keys</th>
<th>Action</th>
</tr>
</thead>
Expand Down