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

Using .. contents:: causes raw CSS to show up at the top of the page when using readme-renderer >= 37.0 #65

Open
barseghyanartur opened this issue Jan 10, 2023 · 7 comments
Open

Using .. contents:: causes raw CSS to show up at the top of the page when using readme-renderer >= 37.0 #65

barseghyanartur opened this issue Jan 10, 2023 · 7 comments
Labels
bug

Comments

@barseghyanartur
Copy link 

=====
Title
=====

.. contents:: Table of Contents
    :depth: 2

Heading 1
---------
Description

Heading 2
~~~~~~~~~
Long text about this

Produces weird results (on top). <body> and <style> tags not opened/closed properly - result in a broken view.
@barseghyanartur
Copy link
Author

barseghyanartur commented Jan 10, 2023 •
edited by mgedmin
Loading

Result

Rendered HTML 
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="generator" content="Docutils 0.19: https://docutils.sourceforge.io/" />
<title>Title</title>
<style type="text/css">

/*
:Author: David Goodger ([email protected])
:Id: $Id: html4css1.css 8954 2022-01-20 10:10:25Z milde $
:Copyright: This stylesheet has been placed in the public domain.

Default cascading style sheet for the HTML output of Docutils.

See https://docutils.sourceforge.io/docs/howto/html-stylesheets.html for how to
customize this style sheet.
*/

/* used to remove borders from tables and images */
.borderless, table.borderless td, table.borderless th {
  border: 0 }

table.borderless td, table.borderless th {
  /* Override padding for "table.docutils td" with "! important".
     The right padding separates the table cells. */
  padding: 0 0.5em 0 0 ! important }

.first {
  /* Override more specific margin styles with "! important". */
  margin-top: 0 ! important }

.last, .with-subtitle {
  margin-bottom: 0 ! important }

.hidden {
  display: none }

.subscript {
  vertical-align: sub;
  font-size: smaller }

.superscript {
  vertical-align: super;
  font-size: smaller }

a.toc-backref {
  text-decoration: none ;
  color: black }

blockquote.epigraph {
  margin: 2em 5em ; }

dl.docutils dd {
  margin-bottom: 0.5em }

object[type="image/svg+xml"], object[type="application/x-shockwave-flash"] {
  overflow: hidden;
}

/* Uncomment (and remove this text!) to get bold-faced definition list terms
dl.docutils dt {
  font-weight: bold }
*/

div.abstract {
  margin: 2em 5em }

div.abstract p.topic-title {
  font-weight: bold ;
  text-align: center }

div.admonition, div.attention, div.caution, div.danger, div.error,
div.hint, div.important, div.note, div.tip, div.warning {
  margin: 2em ;
  border: medium outset ;
  padding: 1em }

div.admonition p.admonition-title, div.hint p.admonition-title,
div.important p.admonition-title, div.note p.admonition-title,
div.tip p.admonition-title {
  font-weight: bold ;
  font-family: sans-serif }

div.attention p.admonition-title, div.caution p.admonition-title,
div.danger p.admonition-title, div.error p.admonition-title,
div.warning p.admonition-title, .code .error {
  color: red ;
  font-weight: bold ;
  font-family: sans-serif }

/* Uncomment (and remove this text!) to get reduced vertical space in
   compound paragraphs.
div.compound .compound-first, div.compound .compound-middle {
  margin-bottom: 0.5em }

div.compound .compound-last, div.compound .compound-middle {
  margin-top: 0.5em }
*/

div.dedication {
  margin: 2em 5em ;
  text-align: center ;
  font-style: italic }

div.dedication p.topic-title {
  font-weight: bold ;
  font-style: normal }

div.figure {
  margin-left: 2em ;
  margin-right: 2em }

div.footer, div.header {
  clear: both;
  font-size: smaller }

div.line-block {
  display: block ;
  margin-top: 1em ;
  margin-bottom: 1em }

div.line-block div.line-block {
  margin-top: 0 ;
  margin-bottom: 0 ;
  margin-left: 1.5em }

div.sidebar {
  margin: 0 0 0.5em 1em ;
  border: medium outset ;
  padding: 1em ;
  background-color: #ffffee ;
  width: 40% ;
  float: right ;
  clear: right }

div.sidebar p.rubric {
  font-family: sans-serif ;
  font-size: medium }

div.system-messages {
  margin: 5em }

div.system-messages h1 {
  color: red }

div.system-message {
  border: medium outset ;
  padding: 1em }

div.system-message p.system-message-title {
  color: red ;
  font-weight: bold }

div.topic {
  margin: 2em }

h1.section-subtitle, h2.section-subtitle, h3.section-subtitle,
h4.section-subtitle, h5.section-subtitle, h6.section-subtitle {
  margin-top: 0.4em }

h1.title {
  text-align: center }

h2.subtitle {
  text-align: center }

hr.docutils {
  width: 75% }

img.align-left, .figure.align-left, object.align-left, table.align-left {
  clear: left ;
  float: left ;
  margin-right: 1em }

img.align-right, .figure.align-right, object.align-right, table.align-right {
  clear: right ;
  float: right ;
  margin-left: 1em }

img.align-center, .figure.align-center, object.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

table.align-center {
  margin-left: auto;
  margin-right: auto;
}

.align-left {
  text-align: left }

.align-center {
  clear: both ;
  text-align: center }

.align-right {
  text-align: right }

/* reset inner alignment in figures */
div.align-right {
  text-align: inherit }

/* div.align-center * { */
/*   text-align: left } */

.align-top    {
  vertical-align: top }

.align-middle {
  vertical-align: middle }

.align-bottom {
  vertical-align: bottom }

ol.simple, ul.simple {
  margin-bottom: 1em }

ol.arabic {
  list-style: decimal }

ol.loweralpha {
  list-style: lower-alpha }

ol.upperalpha {
  list-style: upper-alpha }

ol.lowerroman {
  list-style: lower-roman }

ol.upperroman {
  list-style: upper-roman }

p.attribution {
  text-align: right ;
  margin-left: 50% }

p.caption {
  font-style: italic }

p.credits {
  font-style: italic ;
  font-size: smaller }

p.label {
  white-space: nowrap }

p.rubric {
  font-weight: bold ;
  font-size: larger ;
  color: maroon ;
  text-align: center }

p.sidebar-title {
  font-family: sans-serif ;
  font-weight: bold ;
  font-size: larger }

p.sidebar-subtitle {
  font-family: sans-serif ;
  font-weight: bold }

p.topic-title {
  font-weight: bold }

pre.address {
  margin-bottom: 0 ;
  margin-top: 0 ;
  font: inherit }

pre.literal-block, pre.doctest-block, pre.math, pre.code {
  margin-left: 2em ;
  margin-right: 2em }

pre.code .ln { color: grey; } /* line numbers */
pre.code, code { background-color: #eeeeee }
pre.code .comment, code .comment { color: #5C6576 }
pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold }
pre.code .literal.string, code .literal.string { color: #0C5404 }
pre.code .name.builtin, code .name.builtin { color: #352B84 }
pre.code .deleted, code .deleted { background-color: #DEB0A1}
pre.code .inserted, code .inserted { background-color: #A3D289}

span.classifier {
  font-family: sans-serif ;
  font-style: oblique }

span.classifier-delimiter {
  font-family: sans-serif ;
  font-weight: bold }

span.interpreted {
  font-family: sans-serif }

span.option {
  white-space: nowrap }

span.pre {
  white-space: pre }

span.problematic {
  color: red }

span.section-subtitle {
  /* font-size relative to parent (h1..h6 element) */
  font-size: 80% }

table.citation {
  border-left: solid 1px gray;
  margin-left: 1px }

table.docinfo {
  margin: 2em 4em }

table.docutils {
  margin-top: 0.5em ;
  margin-bottom: 0.5em }

table.footnote {
  border-left: solid 1px black;
  margin-left: 1px }

table.docutils td, table.docutils th,
table.docinfo td, table.docinfo th {
  padding-left: 0.5em ;
  padding-right: 0.5em ;
  vertical-align: top }

table.docutils th.field-name, table.docinfo th.docinfo-name {
  font-weight: bold ;
  text-align: left ;
  white-space: nowrap ;
  padding-left: 0 }

/* "booktabs" style (no vertical lines) */
table.docutils.booktabs {
  border: 0px;
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-collapse: collapse;
}
table.docutils.booktabs * {
  border: 0px;
}
table.docutils.booktabs th {
  border-bottom: thin solid;
  text-align: left;
}

h1 tt.docutils, h2 tt.docutils, h3 tt.docutils,
h4 tt.docutils, h5 tt.docutils, h6 tt.docutils {
  font-size: 100% }

ul.auto-toc {
  list-style-type: none }

</style>
<style type="text/css">

/*
 * Stylesheet overrides for ReSTview
 */

/* Some breathing space for the text */

body {
    margin: 3em;
    max-width: 50em;
}

/* Monospace text */

tt {
    color: #234F32;
}

/* Doctest blocks */

blockquote > pre.doctest-block {
    margin-left: 0;
}

/* Literal blocks */

pre.literal-block {
    color: #AA4400;
}

/* Block quotations */

blockquote {
    margin-left: 2em;  /* to match with pre.code et al */
    margin-right: 2em;
}

/* Code blocks */

pre.code {
    background: inherit;
}

/* Footnotes */

a.footnote-reference,
a.fn-backref {
    font-size: xx-small;
    vertical-align: super;
    line-height: normal;
    text-decoration: none;
}
a.footnote-reference:hover,
a.fn-backref:hover {
    text-decoration: underline;
}

table.footnote {
    border: none;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 20px;
    margin-right: 0.5em;
    font-size: small;
}
table.footnote td {
    border: none;
    padding-top: 1em;
    padding-left: 0px;
}
table.footnote tr:first-child > td.label {
    border-top: 1px solid #eee;
    padding-left: 20px;
    padding-right: 20px;
}

table.footnote + table.footnote {
    margin-top: 0;
}
table.footnote + table.footnote td {
    border: none;
    padding-top: 0;
}

/* System messages (aka errors) */

div.system-messages h1 {
    color: red;
}
div.system-message {
    border: none;
    border-left: 1ex solid red;
    margin-left: -3em;
    margin-top: 0;
    padding-left: 4.5em;
    padding-top: 1em;
    padding-bottom: 1em;
    color: red;
    background: #fff8f8;
}
div.system-message p.system-message-title {
    margin-top: 0;
    font-weight: bold;
}

</style>
</head>
<body class="with-toc">
pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
pre .hll { background-color: #ffffcc }
pre { background: #ffffff; }
pre .c { color: #888888 } /* Comment */
pre .err { color: #FF0000; background-color: #FFAAAA } /* Error */
pre .k { color: #008800; font-weight: bold } /* Keyword */
pre .o { color: #333333 } /* Operator */
pre .ch { color: #888888 } /* Comment.Hashbang */
pre .cm { color: #888888 } /* Comment.Multiline */
pre .cp { color: #557799 } /* Comment.Preproc */
pre .cpf { color: #888888 } /* Comment.PreprocFile */
pre .c1 { color: #888888 } /* Comment.Single */
pre .cs { color: #cc0000; font-weight: bold } /* Comment.Special */
pre .gd { color: #A00000 } /* Generic.Deleted */
pre .ge { font-style: italic } /* Generic.Emph */
pre .gr { color: #FF0000 } /* Generic.Error */
pre .gh { color: #000080; font-weight: bold } /* Generic.Heading */
pre .gi { color: #00A000 } /* Generic.Inserted */
pre .go { color: #888888 } /* Generic.Output */
pre .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
pre .gs { font-weight: bold } /* Generic.Strong */
pre .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
pre .gt { color: #0044DD } /* Generic.Traceback */
pre .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
pre .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
pre .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
pre .kp { color: #003388; font-weight: bold } /* Keyword.Pseudo */
pre .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
pre .kt { color: #333399; font-weight: bold } /* Keyword.Type */
pre .m { color: #6600EE; font-weight: bold } /* Literal.Number */
pre .s { background-color: #fff0f0 } /* Literal.String */
pre .na { color: #0000CC } /* Name.Attribute */
pre .nb { color: #007020 } /* Name.Builtin */
pre .nc { color: #BB0066; font-weight: bold } /* Name.Class */
pre .no { color: #003366; font-weight: bold } /* Name.Constant */
pre .nd { color: #555555; font-weight: bold } /* Name.Decorator */
pre .ni { color: #880000; font-weight: bold } /* Name.Entity */
pre .ne { color: #FF0000; font-weight: bold } /* Name.Exception */
pre .nf { color: #0066BB; font-weight: bold } /* Name.Function */
pre .nl { color: #997700; font-weight: bold } /* Name.Label */
pre .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
pre .nt { color: #007700 } /* Name.Tag */
pre .nv { color: #996633 } /* Name.Variable */
pre .ow { color: #000000; font-weight: bold } /* Operator.Word */
pre .w { color: #bbbbbb } /* Text.Whitespace */
pre .mb { color: #6600EE; font-weight: bold } /* Literal.Number.Bin */
pre .mf { color: #6600EE; font-weight: bold } /* Literal.Number.Float */
pre .mh { color: #005588; font-weight: bold } /* Literal.Number.Hex */
pre .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
pre .mo { color: #4400EE; font-weight: bold } /* Literal.Number.Oct */
pre .sa { background-color: #fff0f0 } /* Literal.String.Affix */
pre .sb { background-color: #fff0f0 } /* Literal.String.Backtick */
pre .sc { color: #0044DD } /* Literal.String.Char */
pre .dl { background-color: #fff0f0 } /* Literal.String.Delimiter */
pre .sd { color: #DD4422 } /* Literal.String.Doc */
pre .s2 { background-color: #fff0f0 } /* Literal.String.Double */
pre .se { color: #666666; font-weight: bold; background-color: #fff0f0 } /* Literal.String.Escape */
pre .sh { background-color: #fff0f0 } /* Literal.String.Heredoc */
pre .si { background-color: #eeeeee } /* Literal.String.Interpol */
pre .sx { color: #DD2200; background-color: #fff0f0 } /* Literal.String.Other */
pre .sr { color: #000000; background-color: #fff0ff } /* Literal.String.Regex */
pre .s1 { background-color: #fff0f0 } /* Literal.String.Single */
pre .ss { color: #AA6600 } /* Literal.String.Symbol */
pre .bp { color: #007020 } /* Name.Builtin.Pseudo */
pre .fm { color: #0066BB; font-weight: bold } /* Name.Function.Magic */
pre .vc { color: #336699 } /* Name.Variable.Class */
pre .vg { color: #dd7700; font-weight: bold } /* Name.Variable.Global */
pre .vi { color: #3333BB } /* Name.Variable.Instance */
pre .vm { color: #996633 } /* Name.Variable.Magic */
pre .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
</style>
</head>
<body>
<main id="title">
<h1 class="title">Title</h1>

<nav class="contents" id="table-of-contents" role="doc-toc">
<p class="topic-title">Table of Contents</p>
<ul class="simple">
<li><p><a class="reference internal" href="[#heading-1](view-source:http://localhost:39689/#heading-1)" id="toc-entry-1">Heading 1</a></p>
<ul>
<li><p><a class="reference internal" href="[#heading-2](view-source:http://localhost:39689/#heading-2)" id="toc-entry-2">Heading 2</a></p></li>
</ul>
</li>
</ul>
</nav>
<section id="heading-1">
<h1><a class="toc-backref" href="[#toc-entry-1](view-source:http://localhost:39689/#toc-entry-1)" role="doc-backlink">Heading 1</a></h1>
<p>Description</p>
<section id="heading-2">
<h2><a class="toc-backref" href="[#toc-entry-2](view-source:http://localhost:39689/#toc-entry-2)" role="doc-backlink">Heading 2</a></h2>
<p>Long text about this</p>
</section>
</section>
</main>

<script type="text/javascript">
var mtime = '1673352080.9420652';
var poll = null;
window.onload = function () {
    setTimeout(function () {
        poll = new XMLHttpRequest();
        poll.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                var reload = new XMLHttpRequest();
                reload.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        document.title = this.responseXML.title;
                        document.body.innerHTML = this.responseXML.body.innerHTML;
                        var old_styles = document.getElementsByTagName('style');
                        var new_styles = this.responseXML.getElementsByTagName('style');
                        for (var i = old_styles.length - 1; i >= 0; i--) {
                            old_styles[i].remove();
                        }
                        // convert HTMLCollection to an array so that
                        // items don't disappear from under us when I append
                        // them to a different DOM tree
                        new_styles = [].slice.call(new_styles);
                        for (var i = 0; i < new_styles.length; i++) {
                            document.head.appendChild(new_styles[i]);
                        }
                        mtime = this.getResponseHeader('X-Restview-Mtime');
                        if (mtime) {
                            poll.open('HEAD', '/polling?pathname=' + location.pathname + '&mtime=' + mtime, true);
                            poll.send();
                        }
                    }
                }
                reload.open('GET', location.pathname, true);
                reload.responseType = 'document';
                reload.send();
            }
        }
        poll.open('HEAD', '/polling?pathname=' + location.pathname + '&mtime=' + mtime, true);
        poll.send(null);
    }, 0);
}
window.onbeforeunload = function () {
    poll.abort();
}
</script>
</body>
</html>

pip-list

bleach          5.0.1
docutils        0.19
pip             22.2.2
Pygments        2.14.0
readme-renderer 37.3
restview        3.0.0
setuptools      62.6.0
six             1.16.0
webencodings    0.5.1
wheel           0.37.1

python 3.11.1

@mgedmin
Copy link
Owner

mgedmin commented Jan 10, 2023 •
edited
Loading

Hm, an incompatibility with some library. It works fine for me with

$ pipx runpip restview list
Package         Version
--------------- -------
bleach          5.0.0
docutils        0.18.1
pip             22.3.1
Pygments        2.12.0
readme-renderer 35.0
restview        3.0.0
setuptools      65.6.3
six             1.16.0
webencodings    0.5.1
wheel           0.38.4

image

but if I upgrade readme-renderer to 37.3, pygments to 2.12.0, and bleach to 5.0.1, I get the same dump of raw CSS at the top.

Downgrading readme-renderer back to 35.0 fixes it.

@mgedmin mgedmin added the bug label Jan 10, 2023
@mgedmin
Copy link
Owner

mgedmin commented Jan 10, 2023

readme-renderer 36.0 works fine, 37.0 breaks.

@mgedmin mgedmin changed the title Using .. contents:: breaks Using .. contents:: causes raw CSS to show up at the top of the page when using readme-renderer >= 37.0 Jan 10, 2023
@mgedmin
Copy link
Owner

mgedmin commented Jan 10, 2023

So this is entirely my fault, since I'm subclassing readme_renderer.rst.ReadMeHTMLTranslator and assuming that it in turn subclasses docutils.writers.html4css1.HTMLTranslator.

readme-renderer 37.0 switched from subclassing html4css1.HTMLTranslator to html5_polyglot.HTMLTranslator in pypa/readme_renderer@d853780.

@mgedmin
Copy link
Owner

mgedmin commented Jan 10, 2023

Oh oh oh the test failures I saw and fixed recently (commit 5033eac) were probably not related to the new docutils, but to the new readme-renderer. Unfortunately it's hard to see the problem when viewing raw HTML diffs.

@barseghyanartur
Copy link
Author

I confirm, that downgrading readme-renderer to 36.0 brings things back to normal.

mgedmin added a commit that referenced this issue Jan 10, 2023
@mgedmin
WIP: switch to html5_polyglot writer
8e1c462 
Because readme-rendering switched to it, so I'm using it already in
effect, in a half-assed way which causes problems like issue #65.
@mgedmin mgedmin mentioned this issue Jan 10, 2023
Open
4 tasks
@mgedmin
Copy link
Owner

mgedmin commented Jan 10, 2023

I've released restview 3.0.1 to PyPI as a stopgap measure. It adds a version requirement for readme-renderer < 37.

A proper fix will take longer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mgedmin @barseghyanartur