mirror of
https://github.com/idris-lang/Idris2.git
synced 2024-11-28 11:05:17 +03:00
[ new ] persistent css switch and alternative style files (#1923)
This commit is contained in:
G. Allais
GitHub
parent
f6281afe88
commit
426441eecf
2
Makefile
2
Makefile
@ -186,7 +186,7 @@ install-support:
|
||||
mkdir -p ${PREFIX}/${NAME_VERSION}/support/racket
|
||||
mkdir -p ${PREFIX}/${NAME_VERSION}/support/gambit
|
||||
mkdir -p ${PREFIX}/${NAME_VERSION}/support/js
|
||||
install -m 644 support/docs/styles.css ${PREFIX}/${NAME_VERSION}/support/docs
|
||||
install -m 644 support/docs/*.css ${PREFIX}/${NAME_VERSION}/support/docs
|
||||
install -m 644 support/racket/* ${PREFIX}/${NAME_VERSION}/support/racket
|
||||
install -m 644 support/gambit/* ${PREFIX}/${NAME_VERSION}/support/gambit
|
||||
install -m 644 support/js/* ${PREFIX}/${NAME_VERSION}/support/js
|
||||
|
||||
@ -115,13 +115,77 @@ docDocToHtml doc =
|
||||
renderHtml $ removeNewlinesFromDeclarations dt
|
||||
|
||||
htmlPreamble : String -> String -> String -> String
|
||||
htmlPreamble title root class = "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\">"
|
||||
++ "<title>" ++ htmlEscape title ++ "</title>"
|
||||
++ "<link rel=\"stylesheet\" href=\"" ++ root ++ "styles.css\"></head>"
|
||||
++ "<body class=\"" ++ class ++ "\">"
|
||||
++ "<header><strong>Idris2Doc</strong> : " ++ htmlEscape title
|
||||
++ "<nav><a href=\"" ++ root ++ "index.html\">Index</a></nav></header>"
|
||||
++ "<div class=\"container\">"
|
||||
htmlPreamble title root class =
|
||||
let title = htmlEscape title in
|
||||
let cssID = "preferredStyle" in
|
||||
let cssSelectID = "selectPreferredStyle" in
|
||||
let cssDefault = "default" in
|
||||
let cssLocalKey = "stylefile" in
|
||||
"""
|
||||
<!DOCTYPE html><html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>\{title}</title>
|
||||
<link rel="stylesheet" type="text/css" id="\{cssID}" href="\{root}\{cssDefault}.css">
|
||||
<script>
|
||||
/* Updates the stylesheet to use the preferred one.
|
||||
Note that we set the link to root ++ sourceLoc because the config
|
||||
is shared across the whole website, so the root may differ from
|
||||
page to page.
|
||||
*/
|
||||
function setStyleSource (sourceLoc) {
|
||||
document.getElementById("\{cssID}").href = "\{root}" + sourceLoc + ".css";
|
||||
document.getElementById("\{cssSelectID}").value = sourceLoc;
|
||||
}
|
||||
/* Initialises the preferred style sheet:
|
||||
1. if there is a stored value then use that
|
||||
otherwise select the default
|
||||
2. set both the css link href & the drop down menu selected option
|
||||
*/
|
||||
function initStyleSource () {
|
||||
var preferredStyle = localStorage.getItem("\{cssLocalKey}");
|
||||
if (preferredStyle !== null) {
|
||||
setStyleSource(preferredStyle);
|
||||
} else {
|
||||
setStyleSource("\{cssDefault}");
|
||||
};
|
||||
}
|
||||
function saveStyleSource (preferredStyle) {
|
||||
localStorage.\{cssLocalKey} = preferredStyle;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="\{class}">
|
||||
<header>
|
||||
<strong>Idris2Doc</strong> : \{title}
|
||||
<nav><a href="\{root}index.html">Index</a>
|
||||
|
||||
<select id="\{cssSelectID}">
|
||||
\{String.unlines $ flip map cssFiles $ \ css =>
|
||||
#"<option value="\#{css.filename}">\#{css.stylename}</option>"#
|
||||
}
|
||||
</select>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
/* We start by initialising the style source */
|
||||
initStyleSource();
|
||||
|
||||
/* This listens for changes on the drop down menu and updates the
|
||||
css used for the current page when a selection is made.
|
||||
*/
|
||||
document.getElementById("\{cssSelectID}").addEventListener("change", function(){
|
||||
var selected = this.options[this.selectedIndex].value; /* the option chosen */
|
||||
setStyleSource (selected);
|
||||
saveStyleSource (selected);
|
||||
});
|
||||
</script>
|
||||
|
||||
</header>
|
||||
<div class="container">
|
||||
"""
|
||||
|
||||
htmlFooter : String
|
||||
htmlFooter = "</div><footer>Produced by Idris 2 version " ++ (showVersion True version) ++ "</footer></body></html>"
|
||||
|
||||
@ -528,9 +528,15 @@ makeDoc pkg opts =
|
||||
Right () <- coreLift $ writeFile (docBase </> "index.html") $ renderDocIndex pkg
|
||||
| Left err => fileError (docBase </> "index.html") err
|
||||
|
||||
css <- readDataFile "docs/styles.css"
|
||||
Right () <- coreLift $ writeFile (docBase </> "styles.css") css
|
||||
| Left err => fileError (docBase </> "styles.css") err
|
||||
errs <- for cssFiles $ \ cssFile => do
|
||||
let fn = cssFile.filename ++ ".css"
|
||||
css <- readDataFile ("docs/" ++ fn)
|
||||
Right () <- coreLift $ writeFile (docBase </> fn) css
|
||||
| Left err => fileError (docBase </> fn) err
|
||||
pure (the (List Error) [])
|
||||
|
||||
let [] = concat errs
|
||||
| err => pure err
|
||||
|
||||
runScript (postbuild pkg)
|
||||
pure []
|
||||
|
||||
@ -243,3 +243,20 @@ Pretty PkgDesc where
|
||||
seqField nm xs = pretty nm
|
||||
<++> equals
|
||||
<++> align (sep (punctuate comma (map pretty xs)))
|
||||
|
||||
|
||||
------------------------------------------------------------------------------
|
||||
-- CSS files (used in --mkdoc)
|
||||
|
||||
public export
|
||||
record CSS where
|
||||
constructor MkCSS
|
||||
stylename : String
|
||||
filename : String
|
||||
|
||||
export
|
||||
cssFiles : List CSS
|
||||
cssFiles = [ MkCSS "Default" "default"
|
||||
, MkCSS "Alternative" "alternative"
|
||||
, MkCSS "Black & White" "blackandwhite"
|
||||
]
|
||||
|
||||
242
support/docs/alternative.css
Normal file
242
support/docs/alternative.css
Normal file
@ -0,0 +1,242 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: 100%;
|
||||
font-family: "Trebuchet MS", Helvetica, sans-serif;
|
||||
font-size: 11pt;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
a,
|
||||
a:active,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 5px 11px;
|
||||
border-bottom: 3px solid #659fdb;
|
||||
box-shadow: 0 -8px 22px 0;
|
||||
background-color: #252525;
|
||||
color: white;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
header nav,
|
||||
header strong {
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
header nav {
|
||||
float: right;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
border-top: 1px solid #aaa;
|
||||
margin-top: -31px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
line-height: 30px;
|
||||
font-size: 9pt;
|
||||
background: none repeat scroll 0 0 #ddd;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 10px 10px 41px 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14pt;
|
||||
font-family: "Trebuchet MS", Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
#moduleHeader {
|
||||
border-bottom: 1px solid #bbb;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #bbb;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.decls {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.decls > dt {
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
font-size: 10pt;
|
||||
line-height: 20px;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f0f0f0;
|
||||
display: table;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.decls > dd {
|
||||
margin: 10px 0 20px 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.decls > dd > p {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.decls > dd > dl:not(.decls):not(:first-child) {
|
||||
padding-top: 5px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.decls > dd > dl:not(.decls) > dt {
|
||||
display: block;
|
||||
min-width: 70px;
|
||||
float: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.decls > dd > dl:not(.decls) > dd {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.fixity {
|
||||
font-style: italic;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
dd.fixity {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.word {
|
||||
display: table-cell;
|
||||
white-space: nowrap;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.signature {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.documented,
|
||||
.name {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.documented {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* The following colours are taken from the conservative 8 color palette given
|
||||
in http://mkweb.bcgsc.ca/colorblind/palettes.mhtml
|
||||
*/
|
||||
|
||||
a.function {
|
||||
color: rgb(53, 155, 115);
|
||||
}
|
||||
|
||||
.function {
|
||||
color: rgb(53, 155, 115);
|
||||
}
|
||||
|
||||
a.constructor {
|
||||
color: rgb(213, 94, 0);
|
||||
}
|
||||
|
||||
.constructor {
|
||||
color: rgb(213, 94, 0);
|
||||
}
|
||||
|
||||
a.type {
|
||||
color: rgb(61, 183, 233);
|
||||
}
|
||||
|
||||
.type {
|
||||
color: rgb(61, 183, 233);
|
||||
}
|
||||
|
||||
.keyword {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.boundvar {
|
||||
color: rgb(247, 72, 165); /* Too much colour makes it hard to differ the rest of the colours */
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.boundvar.implicit {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul.names {
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
ul.names li {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
ul.names li a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
ul.names li:nth-child(odd) {
|
||||
background-color: #eeeeef;
|
||||
}
|
||||
|
||||
ul.names li:nth-child(even) {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
body.index .container a:visited {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
body.index .container a:hover {
|
||||
color: #04819e;
|
||||
}
|
||||
242
support/docs/blackandwhite.css
Normal file
242
support/docs/blackandwhite.css
Normal file
@ -0,0 +1,242 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: 100%;
|
||||
font-family: "Trebuchet MS", Helvetica, sans-serif;
|
||||
font-size: 11pt;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
a,
|
||||
a:active,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 5px 11px;
|
||||
border-bottom: 3px solid #659fdb;
|
||||
box-shadow: 0 -8px 22px 0;
|
||||
background-color: #252525;
|
||||
color: white;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
header nav,
|
||||
header strong {
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
header nav {
|
||||
float: right;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
border-top: 1px solid #aaa;
|
||||
margin-top: -31px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
line-height: 30px;
|
||||
font-size: 9pt;
|
||||
background: none repeat scroll 0 0 #ddd;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 10px 10px 41px 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14pt;
|
||||
font-family: "Trebuchet MS", Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
#moduleHeader {
|
||||
border-bottom: 1px solid #bbb;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #bbb;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.decls {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.decls > dt {
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
font-size: 10pt;
|
||||
line-height: 20px;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f0f0f0;
|
||||
display: table;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.decls > dd {
|
||||
margin: 10px 0 20px 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.decls > dd > p {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.decls > dd > dl:not(.decls):not(:first-child) {
|
||||
padding-top: 5px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.decls > dd > dl:not(.decls) > dt {
|
||||
display: block;
|
||||
min-width: 70px;
|
||||
float: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.decls > dd > dl:not(.decls) > dd {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.fixity {
|
||||
font-style: italic;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
dd.fixity {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.word {
|
||||
display: table-cell;
|
||||
white-space: nowrap;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.signature {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.documented,
|
||||
.name {
|
||||
cursor: default;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
}
|
||||
|
||||
.documented {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a.function {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.function {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
a.constructor {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.constructor {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a.type {
|
||||
font-variant: small-caps !important;
|
||||
}
|
||||
|
||||
.type {
|
||||
font-variant: small-caps !important;
|
||||
}
|
||||
|
||||
.keyword {
|
||||
text-decoration: underline;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.boundvar {
|
||||
color: #bf30bf; /* Too much colour makes it hard to differ the rest of the colours */
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.boundvar.implicit {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul.names {
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
ul.names li {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
ul.names li a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
ul.names li:nth-child(odd) {
|
||||
background-color: #eeeeef;
|
||||
}
|
||||
|
||||
ul.names li:nth-child(even) {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
body.index .container a:visited {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
body.index .container a:hover {
|
||||
color: #04819e;
|
||||
}
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Idris Packages</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="default.css" />
|
||||
</head>
|
||||
<body class="index">
|
||||
<header>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user