Skip to content

fix: And more feat/htmlize fixes #4511

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

Merged
rjsparks merged 10 commits into from
Sep 28, 2022
Merged

fix: And more feat/htmlize fixes #4511

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d1d8fb2
fix: Remove superfluous scrollbars
larseggert Sep 27, 2022
5af552e
fix: Show email links for authors
larseggert Sep 27, 2022
b915a79
fix: Only show "email authors" button for latest reversion
larseggert Sep 27, 2022
a7a4e24
fix: Remove duplicate code, fix nav scrolling
larseggert Sep 27, 2022
26f8a6f
feat: Add RFCs to revision lists
larseggert Sep 27, 2022
114876c
feat: Add pref option to control dependency inlining
larseggert Sep 27, 2022
d4e493a
fix: Add analytical tags
larseggert Sep 27, 2022
1b40c3e
feat: Notify user of rendering inconsistencies
larseggert Sep 28, 2022
f6e239b
feat: Split out bootstrap-icons when not inlining dependencies
larseggert Sep 28, 2022
90a651f
fix: Revision list and minor other fixes
larseggert Sep 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions ietf/doc/models.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -560,6 +560,14 @@ def html_body(self, classes=""):
).read_text()
except IOError:
return None

# If HTML was generated by rfc2html, do not return it. Caller
# will use htmlize() to use a more current rfc2html to
# generate an HTMLized version. TODO: There should be a
# better way to determine how an HTML format was generated.
if html.startswith("<pre>"):
return None

# get body
body = etree.HTML(html).xpath("//body")[0]
body.tag = "div"
Expand Down
9 changes: 5 additions & 4 deletions ietf/doc/views_doc.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -450,11 +450,12 @@ def document_main(request, name, rev=None, document_html=False):
js = None
css = None
if document_html:
js = Path(finders.find("ietf/js/document_html.js")).read_text()
css = Path(finders.find("ietf/css/document_html.css")).read_text()
html = doc.html_body()
if html:
css += Path(finders.find("ietf/css/document_html_txt.css")).read_text()
if request.COOKIES.get("pagedeps") == "inline":
js = Path(finders.find("ietf/js/document_html.js")).read_text()
css = Path(finders.find("ietf/css/document_html_inline.css")).read_text()
if html:
css += Path(finders.find("ietf/css/document_html_txt.css")).read_text()
return render(request, "doc/document_draft.html" if document_html is False else "doc/document_html.html",
dict(doc=doc,
document_html=document_html,
Expand Down
19 changes: 12 additions & 7 deletions ietf/static/css/document_html.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,6 @@ $tooltip-margin: inherit !default;
// Utilities
@import "bootstrap/scss/utilities/api";

// Make the bootstrap icons available.
$bootstrap-icons-font-src: url(data-url:npm:bootstrap-icons/font/fonts/bootstrap-icons.woff2) format("woff2"),
url(data-url:npm:bootstrap-icons/font/fonts/bootstrap-icons.woff) format("woff");
@import "bootstrap-icons/font/bootstrap-icons";

:root {
--doc-ptsize-max: 16pt;
}
Expand All @@ -64,6 +59,10 @@ url(data-url:npm:bootstrap-icons/font/fonts/bootstrap-icons.woff) format("woff")
overscroll-behavior: none;
}

.no-scrollbar {
scrollbar-width: none;
}

.sidebar-toggle[aria-expanded="true"] {
display: none;
}
Expand Down Expand Up @@ -215,8 +214,14 @@ tbody.meta tr {
}

// Make revision numbers pagination items fixed-width
.revision-list .page-item {
width: 2.2rem;
.revision-list {
.page-item {
width: 2.2rem;
}

.page-item.rfc {
width: 6.6rem;
}
}

#docinfo {
Expand Down
6 changes: 6 additions & 0 deletions ietf/static/css/document_html_inline.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@import "document_html";

// Make the bootstrap icons available via data-url.
$bootstrap-icons-font-src: url(data-url:npm:bootstrap-icons/font/fonts/bootstrap-icons.woff2) format("woff2"),
url(data-url:npm:bootstrap-icons/font/fonts/bootstrap-icons.woff) format("woff");
@import "bootstrap-icons/font/bootstrap-icons";
6 changes: 6 additions & 0 deletions ietf/static/css/document_html_referenced.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@import "document_html";

// Make the bootstrap icons available.
$bootstrap-icons-font-src: url("npm:bootstrap-icons/font/fonts/bootstrap-icons.woff2") format("woff2"),
url("npm:bootstrap-icons/font/fonts/bootstrap-icons.woff") format("woff");
@import "bootstrap-icons/font/bootstrap-icons";
13 changes: 10 additions & 3 deletions ietf/static/css/ietf.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,8 @@ table tbody.meta {
}

// Try and hyphenate table headings and other things
th, .hyphenate {
th,
.hyphenate {
hyphens: auto;
}

Expand Down Expand Up @@ -209,8 +210,14 @@ th, .hyphenate {
}

// Make revision numbers pagination items fixed-width
.revision-list .page-item {
width: 2.2rem;
.revision-list {
.page-item {
width: 2.2rem;
}

.page-item.rfc {
width: 6.6rem;
}
}

// Style the photo cards
Expand Down
16 changes: 0 additions & 16 deletions ietf/static/js/document_html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,11 @@ import {
Tab as Tab
} from "bootstrap";

import debounce from "lodash/debounce";
import Cookies from "js-cookie";
import { populate_nav } from "./nav.js";

const cookies = Cookies.withAttributes({ sameSite: "strict" });

// Chrome apparently wants this debounced to something >10ms,
// otherwise the main view doesn't scroll?

document.addEventListener("scroll", debounce(function () {
const items = document.getElementById("toc-nav")
.querySelectorAll(".active");
const item = [...items].pop();
if (item) {
item.scrollIntoView({
block: "center",
behavior: "smooth"
});
}
}, 100));

document.addEventListener("DOMContentLoaded", function (event) {
// handle point size slider
const cookie = "doc-ptsize-max";
Expand Down
14 changes: 0 additions & 14 deletions ietf/static/js/ietf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,6 @@ if (!process.env.BUILD_DEPLOY) {

import Cookies from "js-cookie";

import debounce from "lodash/debounce";

import { populate_nav } from "./nav.js";

// setup CSRF protection using jQuery
Expand Down Expand Up @@ -205,18 +203,6 @@ $(function () {
extraNav.remove();
}

$(document)
// Chrome apparently wants this debounced to something >10ms,
// otherwise the main view doesn't scroll?
.on("scroll", debounce(function () {
const item = $('#righthand-nav')
.find(".active")
.last();
if (item.length) {
item[0].scrollIntoView({ block: "center", behavior: "smooth" });
}
}, 100));

// offset the scrollspy to account for the menu bar
const contentOffset = contentElement ? contentElement.offset().top : 0;

Expand Down
16 changes: 16 additions & 0 deletions ietf/static/js/nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import debounce from "lodash/debounce";

function make_nav() {
const nav = document.createElement("nav");
nav.classList.add("nav-pills", "ps-3", "flex-column");
Expand Down Expand Up @@ -81,4 +83,18 @@ export function populate_nav(nav, heading_selector, classes) {
for (var i = nav_stack.length - 1; i > 0; i--) {
nav_stack[i - 1].appendChild(nav_stack[i]);
}

// Chrome apparently wants this debounced to something >10ms,
// otherwise the main view doesn't scroll?
document.addEventListener("scroll", debounce(function () {
const items = nav.querySelectorAll(".active");
const item = [...items].pop();
console.log(item);
if (item) {
item.scrollIntoView({
block: "center",
behavior: "smooth"
});
}
}, 100));
}
66 changes: 56 additions & 10 deletions ietf/templates/doc/document_html.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
{# Copyright The IETF Trust 2016, All Rights Reserved #}
<!DOCTYPE html>
{% load analytical %}

@rjsparks rjsparks Sep 28, 2022

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Good call, but what nudged you to notice to do this?

@larseggert larseggert Sep 28, 2022

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

I happened to look at base.html.

{% load origin %}
{% load static %}
{% load ietf_filters textfilters %}
{% origin %}
<html lang="en">
<head>
{% analytical_head_top %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
Expand All @@ -16,8 +18,16 @@
{% endif %}
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>{{ js|safe }}</script>
<style>{{ css|safe }}</style>
{% if request.COOKIES.pagedeps == 'inline' %}
<script>{{ js|safe }}</script>
<style>{{ css|safe }}</style>
{% else %}
<link rel="stylesheet" href="{% static 'ietf/css/document_html_referenced.css' %}">
{% if html %}
<link rel="stylesheet" href="{% static 'ietf/css/document_html_txt.css' %}">
{% endif %}
<script src="{% static 'ietf/js/document_html.js' %}"></script>
{% endif %}
<link rel="alternate"
type="application/atom+xml"
title="Document changes"
Expand All @@ -30,8 +40,10 @@
{% endif %}>
{% include "base/icons.html" %}
{% include "doc/opengraph.html" %}
{% analytical_head_bottom %}
</head>
<body>
{% analytical_body_top %}
<button class="btn btn-outline-secondary position-fixed top-0 end-0 m-2 sidebar-toggle"
type="button"
id="sidebar-on"
Expand Down Expand Up @@ -69,8 +81,8 @@
aria-label="Show document information">
<span class="navbar-toggler-icon small"></span>
</button>
<div class="collapse overflow-scroll w-100 pt-2" id="docinfo-collapse">
<div class="bg-light p-0 overflow-scroll">
<div class="navbar-nav navbar-nav-scroll overscroll-none collapse pt-1" id="docinfo-collapse">
<div class="bg-light p-0">
<table class="table table-sm table-borderless small">
<tbody class="meta align-top">
<tr>
Expand Down Expand Up @@ -106,7 +118,7 @@
{% endif %}
</div>
<div class="d-print-none col-3 bg-light collapse{% if request.COOKIES.sidebar != 'off'%} show{% endif %}" id="sidebar">
<div class="position-fixed col-3 border-start sidebar overflow-scroll overscroll-none">
<div class="position-fixed col-3 border-start sidebar overflow-scroll overscroll-none no-scrollbar">
<button class="btn btn-outline-secondary float-end m-2"
type="button"
id="sidebar-off"
Expand Down Expand Up @@ -136,6 +148,20 @@
</span>
</a>
</p>
{% if request.COOKIES.htmlconf != 'html' and html %}
<div class="alert alert-info small">
You are viewing the legacy <code>rfc2html</code>
rendering of this document. Change the
preferences for a modern <code>xml2rfc</code>-based
HTMLization.
</div>
{% elif request.COOKIES.htmlconf == 'html' and not html %}
<div class="alert alert-info small">
You are viewing the legacy <code>rfc2html</code>
rendering, because no <code>xml2rfc</code>-generated
HTML is available for this document.
</div>
{% endif %}
<ul class="nav nav-tabs nav-fill small" role="tablist">
<li class="nav-item" role="presentation" title="Document information">
<button class="nav-link px-2"
Expand All @@ -158,7 +184,7 @@
role="tab"
aria-controls="toc-tab-pane"
aria-selected="false">
<i class="bi bi-list-columns-reverse"></i><span class="d-none d-md-block d-xl-inline ms-xl-1">Contents</span>
<i class="bi bi-list-ol"></i><span class="d-none d-md-block d-xl-inline ms-xl-1">Contents</span>
</button>
</li>
<li class="nav-item" role="presentation" title="Preferences">
Expand Down Expand Up @@ -207,24 +233,44 @@
<label class="form-label fw-bold mt-4 mb-2">Tab to show by default</label>
<div class="btn-group-vertical btn-group-sm d-flex" role="group">
<input type="radio" class="btn-check" name="deftab" id="docinfo-radio">
<label class="btn btn-outline-primary" for="docinfo-radio">Info</label>
<label class="btn btn-outline-primary" for="docinfo-radio">
<i class="bi bi-info-circle me-1"></i>Info
</label>
<input type="radio" class="btn-check" name="deftab" id="toc-radio">
<label class="btn btn-outline-primary" for="toc-radio">Contents</label>
<label class="btn btn-outline-primary" for="toc-radio">
<i class="bi bi-list-ol me-1"></i>Contents
</label>
</div>
<label class="form-label fw-bold mt-4 mb-2">HTMLization configuration</label>
<div class="btn-group-vertical btn-group-sm d-flex" role="group">
<input type="radio" class="btn-check" name="htmlconf" id="txt-radio">
<label class="btn btn-outline-primary" for="txt-radio" title="">HTMLize the plaintext</label>
<label class="btn btn-outline-primary" for="txt-radio" title="This is the traditional HTMLization method.">
<i class="bi bi-badge-sd me-1"></i>HTMLize the plaintext
</label>
<input type="radio" class="btn-check" name="htmlconf" id="html-radio">
<label class="btn btn-outline-primary" for="html-radio" title="">Plaintextify the HTML</label>
<label class="btn btn-outline-primary" for="html-radio" title="This is the modern HTMLization method.">
<i class="bi bi-badge-hd me-1"></i>Plaintextify the HTML
</label>
</div>
<label class="form-label fw-bold mt-4 mb-2" for="ptsize">Maximum font size</label>
<input type="range" class="form-range" min="7" max="16" id="ptsize" oninput="ptdemo.value = ptsize.value">
<label class="form-label fw-bold mt-4 mb-2">Page dependencies</label>
<div class="btn-group-vertical btn-group-sm d-flex" role="group">
<input type="radio" class="btn-check" name="pagedeps" id="inline-radio">
<label class="btn btn-outline-primary" for="inline-radio" title="Generate larger, standalone web pages that do not require network access to render.">
<i class="bi bi-box me-1"></i>Inline
</label>
<input type="radio" class="btn-check" name="pagedeps" id="reference-radio">
<label class="btn btn-outline-primary" for="reference-radio" title="Generate regular web pages that require network access to render.">
<i class="bi bi-link-45deg me-1"></i>Reference
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% analytical_body_bottom %}
</body>
</html>
8 changes: 4 additions & 4 deletions ietf/templates/doc/document_info.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@
{% endif %}
{% else %}
{% if snapshot and doc.doc.get_state_slug == 'rfc' %}
<div{% if document_html %} class="alert alert-warning"{% endif %}>This is an older version of an Internet-Draft that was ultimately published as <a href="{% url 'ietf.doc.views_doc.document_html' name=doc.doc.canonical_name %}">{{doc.doc.canonical_name|prettystdname}}</a>.</div>
<div{% if document_html %} class="alert alert-warning small"{% endif %}>This is an older version of an Internet-Draft that was ultimately published as <a href="{% url 'ietf.doc.views_doc.document_html' name=doc.doc.canonical_name %}">{{doc.doc.canonical_name|prettystdname}}</a>.</div>
{% elif snapshot and doc.rev != latest_rev %}
<div{% if document_html %} class="alert alert-warning"{% endif %}>This is an older version of an Internet-Draft whose latest revision state is "{{ doc.doc.get_state }}".</div>
<div{% if document_html %} class="alert alert-warning small"{% endif %}>This is an older version of an Internet-Draft whose latest revision state is "{{ doc.doc.get_state }}".</div>
{% else %}
<span class="{% if doc.get_state_slug == 'active' %}text-success{% elif doc.get_state_slug == 'expired' or doc.get_state_slug == 'repl' %}text-danger{% endif %}">{% if snapshot and doc.rev == latest_rev %}{{ doc.doc.get_state }}{% else %}{{ doc.get_state }}{% endif %} Internet-Draft</span>
{% if submission %}({{ submission|safe }}){% endif %}
Expand Down Expand Up @@ -103,9 +103,9 @@
<td>
{# Implementation that uses the current primary email for each author #}
{% for author in doc.authors %}
{% person_link author with_email=document_html|yesno:',True' %}{% if not forloop.last %},{% endif %}
{% person_link author %}{% if not forloop.last %},{% endif %}
{% endfor %}
{% if document_html %}
{% if document_html and not snapshot or document_html and doc.rev == latest_rev%}
<br>
<a class="btn btn-primary btn-sm mt-1" href="mailto:{{ doc.name }}@ietf.org?subject={{ doc.name}}" title="Send email to the document authors">Email authors</a>
{% endif %}
Expand Down
Loading