Makefile | 2 + docs/texinfo-extra-head.html | 7 ++ docs/texinfo.css | 226 +++++++++++++++++++++++++++++++++++ 3 files changed, 235 insertions(+) create mode 100644 docs/texinfo-extra-head.html create mode 100644 docs/texinfo.css
Style a bit the HTML documents, to make them look like qemu.org pages.
Signed-off-by: Marc-André Lureau <marcandre.lureau@redhat.com>
---
Makefile | 2 +
docs/texinfo-extra-head.html | 7 ++
docs/texinfo.css | 226 +++++++++++++++++++++++++++++++++++
3 files changed, 235 insertions(+)
create mode 100644 docs/texinfo-extra-head.html
create mode 100644 docs/texinfo.css
diff --git a/Makefile b/Makefile
index f2947186a4..9cc4dae1a6 100644
--- a/Makefile
+++ b/Makefile
@@ -940,6 +940,8 @@ docs/version.texi: $(SRC_PATH)/VERSION
%.html: %.texi docs/version.texi
$(call quiet-command,LC_ALL=C $(MAKEINFO) $(MAKEINFOFLAGS) --no-headers \
+ --set-customization-variable EXTRA_HEAD="`cat $(SRC_PATH)/docs/texinfo-extra-head.html`" \
+ --css-include=$(SRC_PATH)/docs/texinfo.css \
--html $< -o $@,"GEN","$@")
%.info: %.texi docs/version.texi
diff --git a/docs/texinfo-extra-head.html b/docs/texinfo-extra-head.html
new file mode 100644
index 0000000000..2986b31701
--- /dev/null
+++ b/docs/texinfo-extra-head.html
@@ -0,0 +1,7 @@
+<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:300,400%7cRoboto:300,400,500' rel='stylesheet' type='text/css'>
+<!-- these are optional qemu.org resources -->
+<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
+<link rel="manifest" href="/assets/favicons/manifest.json">
+<link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
diff --git a/docs/texinfo.css b/docs/texinfo.css
new file mode 100644
index 0000000000..f541ed2cec
--- /dev/null
+++ b/docs/texinfo.css
@@ -0,0 +1,226 @@
+/* CSS style for QEMU Texinfo documents */
+/* based on Public domain 2016 sirgazil. All rights waived. */
+
+a:link,
+a:visited {
+ color: #F03B11;
+ text-decoration: none;
+}
+
+a:active,
+a:focus,
+a:hover {
+ text-decoration: underline;
+}
+
+abbr,
+acronym {
+ cursor: help;
+}
+
+blockquote {
+ color: #555753;
+ font-style: oblique;
+ margin: 30px 0;
+ padding-left: 3em;
+}
+
+body {
+ background: url("https://www.qemu.org/assets/images/qemu_head_200.png") no-repeat fixed 2em 80px;
+ font-family: 'Roboto', sans-serif;
+ font-size: 11pt;
+ font-weight: 300;
+ line-height: 1.75em;
+ color: #000000;
+ margin-left: 16.667%;
+ width: 66.667%;
+}
+
+code,
+samp,
+tt,
+var {
+ font-family: 'Roboto Mono', monospace;
+}
+
+div.example,
+div.lisp {
+ margin: 0;
+}
+
+dl {
+ margin: 3em 0;
+}
+
+dl dl {
+ margin: 0;
+}
+
+dt {
+ background-color: #F5F5F5;
+ padding: 0.5em;
+}
+
+h1,
+h2,
+h2.contents-heading,
+h3,
+h4 {
+ padding: 20px 0 0 0;
+ font-weight: 300;
+}
+
+h1 {
+ position: relative;
+ background: #f03b11;
+ background: -webkit-linear-gradient(top, #f03b11 0%, #f01139 100%);
+ background: linear-gradient(to bottom, #f03b11 0%, #f01139 100%);
+ background-size: cover;
+ text-align: center;
+ color: #FFF;
+ text-decoration: none;
+ font-weight: 300;
+ line-height: 1em;
+ font-size: 3em;
+}
+
+h2 {
+ font-size: 2.2em;
+ font-weight: bold;
+}
+
+h3 {
+ font-size: 1.8em;
+}
+
+h4 {
+ font-size: 1.4em;
+}
+
+hr {
+ display: none;
+}
+
+img {
+ max-width: 100%;
+}
+
+li {
+ padding: 5px;
+}
+
+pre.display,
+pre.example,
+pre.format,
+pre.lisp,
+pre.verbatim {
+ overflow: auto;
+}
+
+pre.example,
+pre.lisp,
+pre.verbatim {
+ background-color: #2D3743;
+ border-color: #000;
+ border-style: solid;
+ border-width: thin;
+ color: #E1E1E1;
+ font-size: smaller;
+ padding: 1em;
+}
+
+table {
+ border-collapse: collapse;
+ margin: 40px 0px;
+}
+
+table.index-cp *,
+table.index-fn *,
+table.index-ky *,
+table.index-pg *,
+table.index-tp *,
+table.index-vr * {
+ background-color: inherit;
+ border-style: none;
+}
+
+td,
+th {
+ border-color: silver;
+ border-style: solid;
+ border-width: thin;
+ padding: 10px;
+}
+
+th {
+ background-color: #F5F5F5;
+}
+
+.contents-heading {
+ display: none;
+}
+
+.contents {
+ margin-bottom: 4em;
+}
+
+.float {
+ margin: 3em 0em;
+}
+
+.float-caption {
+ font-size: smaller;
+ text-align: center;
+}
+
+.float>img {
+ display: block;
+ margin: auto;
+}
+
+.footnote {
+ font-size: smaller;
+ margin: 5em 0em;
+}
+
+.footnote h3 {
+ display: inline;
+ font-size: small;
+}
+
+.header {
+ background-color: #F2F2F2;
+ font-size: small;
+ padding: 0.2em 1em;
+}
+
+.key {
+ display: inline-block;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ padding: 0.1em 0.5em;
+ margin: 0 0.2em;
+ box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
+ background-color: #f7f7f7;
+}
+
+.menu * {
+ border-style: none;
+}
+
+.menu td {
+ padding: 0.5em 0em;
+}
+
+.menu td:last-child {
+ width: 60%;
+}
+
+.menu th {
+ background-color: inherit;
+}
+
+.example code,
+.example var {
+ color: #E1E1E1;
+}
--
2.20.0.rc1
Am 22.11.2018 um 15:17 schrieb Marc-André Lureau: > Style a bit the HTML documents, to make them look like qemu.org pages. > > Signed-off-by: Marc-André Lureau <marcandre.lureau@redhat.com> > --- > Makefile | 2 + > docs/texinfo-extra-head.html | 7 ++ > docs/texinfo.css | 226 +++++++++++++++++++++++++++++++++++ > 3 files changed, 235 insertions(+) > create mode 100644 docs/texinfo-extra-head.html > create mode 100644 docs/texinfo.css I tried this patch, and here are the results without the patch and with the patch, so everybody can compare both looks: old: https://qemu.weilnetz.de/doc/qemu-doc.html new: https://qemu.weilnetz.de/doc/3.1/qemu-doc.html I like the new look and can use it from now on, no matter whether it is merged into QEMU 3.1 or delayed for release 4. Tested-by: Stefan Weil <sw@weilnetz.de> PS: https://qemu.weilnetz.de/doc/3.1/qemu-ga-ref.html and https://qemu.weilnetz.de/doc/3.1/qemu-qmp-ref.html are also candidates for the new look.
Hi On Wed, Nov 28, 2018 at 7:27 PM Stefan Weil <sw@weilnetz.de> wrote: > > Am 22.11.2018 um 15:17 schrieb Marc-André Lureau: > > Style a bit the HTML documents, to make them look like qemu.org pages. > > > > Signed-off-by: Marc-André Lureau <marcandre.lureau@redhat.com> > > --- > > Makefile | 2 + > > docs/texinfo-extra-head.html | 7 ++ > > docs/texinfo.css | 226 +++++++++++++++++++++++++++++++++++ > > 3 files changed, 235 insertions(+) > > create mode 100644 docs/texinfo-extra-head.html > > create mode 100644 docs/texinfo.css > > > I tried this patch, and here are the results without the patch and with > the patch, so everybody can compare both looks: > > old: https://qemu.weilnetz.de/doc/qemu-doc.html > new: https://qemu.weilnetz.de/doc/3.1/qemu-doc.html > > I like the new look and can use it from now on, no matter whether it is > merged into QEMU 3.1 or delayed for release 4. With my limited knowledge of CSS, I tried to apply a style close to what qemu.org already uses. Further tweaks would be welcome, but better left to someone with more web design skills. > > Tested-by: Stefan Weil <sw@weilnetz.de> > > PS: https://qemu.weilnetz.de/doc/3.1/qemu-ga-ref.html and > https://qemu.weilnetz.de/doc/3.1/qemu-qmp-ref.html are also candidates > for the new look. Oh, but the style is also applied for them, as they are also generated from the same texinfo->html process. I wonder if the generated pages could be somehow uploaded on release on qemu.org, or simply committed to qemu-web? -- Marc-André Lureau
On Wed, Nov 28, 2018 at 07:40:09PM +0400, Marc-André Lureau wrote: > Hi > > On Wed, Nov 28, 2018 at 7:27 PM Stefan Weil <sw@weilnetz.de> wrote: > > > > Am 22.11.2018 um 15:17 schrieb Marc-André Lureau: > > > Style a bit the HTML documents, to make them look like qemu.org pages. > > > > > > Signed-off-by: Marc-André Lureau <marcandre.lureau@redhat.com> > > > --- > > > Makefile | 2 + > > > docs/texinfo-extra-head.html | 7 ++ > > > docs/texinfo.css | 226 +++++++++++++++++++++++++++++++++++ > > > 3 files changed, 235 insertions(+) > > > create mode 100644 docs/texinfo-extra-head.html > > > create mode 100644 docs/texinfo.css > > > > > > I tried this patch, and here are the results without the patch and with > > the patch, so everybody can compare both looks: > > > > old: https://qemu.weilnetz.de/doc/qemu-doc.html > > new: https://qemu.weilnetz.de/doc/3.1/qemu-doc.html > > > > I like the new look and can use it from now on, no matter whether it is > > merged into QEMU 3.1 or delayed for release 4. > > With my limited knowledge of CSS, I tried to apply a style close to > what qemu.org already uses. Further tweaks would be welcome, but > better left to someone with more web design skills. > > > > > Tested-by: Stefan Weil <sw@weilnetz.de> > > > > PS: https://qemu.weilnetz.de/doc/3.1/qemu-ga-ref.html and > > https://qemu.weilnetz.de/doc/3.1/qemu-qmp-ref.html are also candidates > > for the new look. > > Oh, but the style is also applied for them, as they are also generated > from the same texinfo->html process. > > I wonder if the generated pages could be somehow uploaded on release > on qemu.org, or simply committed to qemu-web? Committing them to qemu-web would be a fairly straightforward approach, not requiring any extra tooling work. In particular it would make it pretty easy to provide docs for historical versions of QEMU too. The alternative is to write a jekyll plugin which fetches the qemu releases & generates docs dynamically, but this would much more complex & fragile IMHO. Regards, Daniel -- |: https://berrange.com -o- https://www.flickr.com/photos/dberrange :| |: https://libvirt.org -o- https://fstop138.berrange.com :| |: https://entangle-photo.org -o- https://www.instagram.com/dberrange :|
On Thu, Nov 22, 2018 at 06:17:41PM +0400, Marc-André Lureau wrote: > Style a bit the HTML documents, to make them look like qemu.org pages. > > Signed-off-by: Marc-André Lureau <marcandre.lureau@redhat.com> > --- > Makefile | 2 + > docs/texinfo-extra-head.html | 7 ++ > docs/texinfo.css | 226 +++++++++++++++++++++++++++++++++++ > 3 files changed, 235 insertions(+) > create mode 100644 docs/texinfo-extra-head.html > create mode 100644 docs/texinfo.css IIUC the plain is to have the qemu-doc.html file hosted directly on the qemu.org website. When we do that, all that is required is to copy the existing plain qemu-doc.html file and prepend --- permalink: /qemu-doc.html --- at which point Jekyll's build process will automatically pull in the standard web page template, which gives us the consistent styling and navbar layout so it seemlessly fits into qemu.org With this in mind, I'm not convinced we should try to do anything clever with styling in the main qemu.git repo, as it may create more scope for conflicts with jekyll's styling. I see Stefan has volunteered to just apply the change locally when he generates the site, which seems reasonable until we get the content integrated into qemu.org directly. > > diff --git a/Makefile b/Makefile > index f2947186a4..9cc4dae1a6 100644 > --- a/Makefile > +++ b/Makefile > @@ -940,6 +940,8 @@ docs/version.texi: $(SRC_PATH)/VERSION > > %.html: %.texi docs/version.texi > $(call quiet-command,LC_ALL=C $(MAKEINFO) $(MAKEINFOFLAGS) --no-headers \ > + --set-customization-variable EXTRA_HEAD="`cat $(SRC_PATH)/docs/texinfo-extra-head.html`" \ > + --css-include=$(SRC_PATH)/docs/texinfo.css \ > --html $< -o $@,"GEN","$@") > > %.info: %.texi docs/version.texi > diff --git a/docs/texinfo-extra-head.html b/docs/texinfo-extra-head.html > new file mode 100644 > index 0000000000..2986b31701 > --- /dev/null > +++ b/docs/texinfo-extra-head.html > @@ -0,0 +1,7 @@ > +<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:300,400%7cRoboto:300,400,500' rel='stylesheet' type='text/css'> > +<!-- these are optional qemu.org resources --> > +<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png"> > +<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png"> > +<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png"> > +<link rel="manifest" href="/assets/favicons/manifest.json"> > +<link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#5bbad5"> > diff --git a/docs/texinfo.css b/docs/texinfo.css > new file mode 100644 > index 0000000000..f541ed2cec > --- /dev/null > +++ b/docs/texinfo.css > @@ -0,0 +1,226 @@ > +/* CSS style for QEMU Texinfo documents */ > +/* based on Public domain 2016 sirgazil. All rights waived. */ > + > +a:link, > +a:visited { > + color: #F03B11; > + text-decoration: none; > +} > + > +a:active, > +a:focus, > +a:hover { > + text-decoration: underline; > +} > + > +abbr, > +acronym { > + cursor: help; > +} > + > +blockquote { > + color: #555753; > + font-style: oblique; > + margin: 30px 0; > + padding-left: 3em; > +} > + > +body { > + background: url("https://www.qemu.org/assets/images/qemu_head_200.png") no-repeat fixed 2em 80px; > + font-family: 'Roboto', sans-serif; > + font-size: 11pt; > + font-weight: 300; > + line-height: 1.75em; > + color: #000000; > + margin-left: 16.667%; > + width: 66.667%; > +} > + > +code, > +samp, > +tt, > +var { > + font-family: 'Roboto Mono', monospace; > +} > + > +div.example, > +div.lisp { > + margin: 0; > +} > + > +dl { > + margin: 3em 0; > +} > + > +dl dl { > + margin: 0; > +} > + > +dt { > + background-color: #F5F5F5; > + padding: 0.5em; > +} > + > +h1, > +h2, > +h2.contents-heading, > +h3, > +h4 { > + padding: 20px 0 0 0; > + font-weight: 300; > +} > + > +h1 { > + position: relative; > + background: #f03b11; > + background: -webkit-linear-gradient(top, #f03b11 0%, #f01139 100%); > + background: linear-gradient(to bottom, #f03b11 0%, #f01139 100%); > + background-size: cover; > + text-align: center; > + color: #FFF; > + text-decoration: none; > + font-weight: 300; > + line-height: 1em; > + font-size: 3em; > +} > + > +h2 { > + font-size: 2.2em; > + font-weight: bold; > +} > + > +h3 { > + font-size: 1.8em; > +} > + > +h4 { > + font-size: 1.4em; > +} > + > +hr { > + display: none; > +} > + > +img { > + max-width: 100%; > +} > + > +li { > + padding: 5px; > +} > + > +pre.display, > +pre.example, > +pre.format, > +pre.lisp, > +pre.verbatim { > + overflow: auto; > +} > + > +pre.example, > +pre.lisp, > +pre.verbatim { > + background-color: #2D3743; > + border-color: #000; > + border-style: solid; > + border-width: thin; > + color: #E1E1E1; > + font-size: smaller; > + padding: 1em; > +} > + > +table { > + border-collapse: collapse; > + margin: 40px 0px; > +} > + > +table.index-cp *, > +table.index-fn *, > +table.index-ky *, > +table.index-pg *, > +table.index-tp *, > +table.index-vr * { > + background-color: inherit; > + border-style: none; > +} > + > +td, > +th { > + border-color: silver; > + border-style: solid; > + border-width: thin; > + padding: 10px; > +} > + > +th { > + background-color: #F5F5F5; > +} > + > +.contents-heading { > + display: none; > +} > + > +.contents { > + margin-bottom: 4em; > +} > + > +.float { > + margin: 3em 0em; > +} > + > +.float-caption { > + font-size: smaller; > + text-align: center; > +} > + > +.float>img { > + display: block; > + margin: auto; > +} > + > +.footnote { > + font-size: smaller; > + margin: 5em 0em; > +} > + > +.footnote h3 { > + display: inline; > + font-size: small; > +} > + > +.header { > + background-color: #F2F2F2; > + font-size: small; > + padding: 0.2em 1em; > +} > + > +.key { > + display: inline-block; > + border: 1px solid #ccc; > + border-radius: 4px; > + padding: 0.1em 0.5em; > + margin: 0 0.2em; > + box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset; > + background-color: #f7f7f7; > +} > + > +.menu * { > + border-style: none; > +} > + > +.menu td { > + padding: 0.5em 0em; > +} > + > +.menu td:last-child { > + width: 60%; > +} > + > +.menu th { > + background-color: inherit; > +} > + > +.example code, > +.example var { > + color: #E1E1E1; > +} > -- > 2.20.0.rc1 > > Regards, Daniel -- |: https://berrange.com -o- https://www.flickr.com/photos/dberrange :| |: https://libvirt.org -o- https://fstop138.berrange.com :| |: https://entangle-photo.org -o- https://www.instagram.com/dberrange :|
On Nov 22, 2018 3:18 PM, "Marc-André Lureau" <marcandre.lureau@redhat.com> wrote: > > Style a bit the HTML documents, to make them look like qemu.org pages. > > Signed-off-by: Marc-André Lureau <marcandre.lureau@redhat.com> > --- > Makefile | 2 + > docs/texinfo-extra-head.html | 7 ++ > docs/texinfo.css | 226 +++++++++++++++++++++++++++++++++++ > 3 files changed, 235 insertions(+) > create mode 100644 docs/texinfo-extra-head.html > create mode 100644 docs/texinfo.css > Marc-André, I salute these effort, and also my eyes say thank you to you. I just have a suggestion that command line examples, like this one: qemu-system-i386 [options] [disk_image] have a little larger letters. (maybe it is just my system, I see them as if their size is almost twice smaller than regular text size) Thanks again! Aleksandar
Hi On Wed, Dec 19, 2018 at 7:17 PM Aleksandar Markovic <aleksandar.m.mail@gmail.com> wrote: > > > On Nov 22, 2018 3:18 PM, "Marc-André Lureau" <marcandre.lureau@redhat.com> wrote: > > > > Style a bit the HTML documents, to make them look like qemu.org pages. > > > > Signed-off-by: Marc-André Lureau <marcandre.lureau@redhat.com> > > --- > > Makefile | 2 + > > docs/texinfo-extra-head.html | 7 ++ > > docs/texinfo.css | 226 +++++++++++++++++++++++++++++++++++ > > 3 files changed, 235 insertions(+) > > create mode 100644 docs/texinfo-extra-head.html > > create mode 100644 docs/texinfo.css > > > > Marc-André, > > I salute these effort, and also my eyes say thank you to you. > > I just have a suggestion that command line examples, like this one: > > qemu-system-i386 [options] [disk_image] > > have a little larger letters. (maybe it is just my system, I see them as if their size is almost twice smaller than regular text size) Easy, change pre.verbatim { font-size: smaller } to larger. > > Thanks again! Note that there is an alternative proposal that looks more interesting in "[qemu-web PATCH] Import historical documentation" I don't know what's the status about it.
On Thu, Dec 20, 2018 at 07:24:56PM +0400, Marc-André Lureau wrote: > Hi > > On Wed, Dec 19, 2018 at 7:17 PM Aleksandar Markovic > <aleksandar.m.mail@gmail.com> wrote: > > > > > > On Nov 22, 2018 3:18 PM, "Marc-André Lureau" <marcandre.lureau@redhat.com> wrote: > > > > > > Style a bit the HTML documents, to make them look like qemu.org pages. > > > > > > Signed-off-by: Marc-André Lureau <marcandre.lureau@redhat.com> > > > --- > > > Makefile | 2 + > > > docs/texinfo-extra-head.html | 7 ++ > > > docs/texinfo.css | 226 +++++++++++++++++++++++++++++++++++ > > > 3 files changed, 235 insertions(+) > > > create mode 100644 docs/texinfo-extra-head.html > > > create mode 100644 docs/texinfo.css > > > > > > > Marc-André, > > > > I salute these effort, and also my eyes say thank you to you. > > > > I just have a suggestion that command line examples, like this one: > > > > qemu-system-i386 [options] [disk_image] > > > > have a little larger letters. (maybe it is just my system, I see them as if their size is almost twice smaller than regular text size) > > Easy, change > pre.verbatim { > font-size: smaller > } > > to larger. > > > > > Thanks again! > > Note that there is an alternative proposal that looks more interesting > in "[qemu-web PATCH] Import historical documentation" > I don't know what's the status about it. Essentiall it is waiting for me to propose a v2 based on feedback Regards, Daniel -- |: https://berrange.com -o- https://www.flickr.com/photos/dberrange :| |: https://libvirt.org -o- https://fstop138.berrange.com :| |: https://entangle-photo.org -o- https://www.instagram.com/dberrange :|
© 2016 - 2024 Red Hat, Inc.