Specref
Eine von der Community gepflegte Open-Source-Datenbank mitWebstandards und verwandten Referenzen.
Der hier verwendete Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" href="./favicon.ico">
<title>Specref</title>
<link href="/css_webseite/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 20px;
padding-bottom: 20px;
}
.featurette,
#search,
.footer {
padding-right: 15px;
padding-left: 15px;
}
.featurette {
}
.featurette p + h4 {
margin-top: 28px;
}
.footer {
padding-top: 19px;
color: #777;
font-size: smaller;
border-top: 1px solid #e5e5e5;
text-align: center;
}
@media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;
}
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.featurette,
.footer {
padding-right: 0;
padding-left: 0;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
#search dd {
margin-left: 40px;
}
#search dl {
text-align: left;
background-color: #fff;
}
#status {
margin-top: 10px;
color: #777;
font-size: smaller;
white-space: pre-wrap;
}
h1 a,
#search dt a {
color: rgb(51, 51, 51);
}
h1 a:hover,
#search dt a {
color: rgb(80, 80, 80);
}
h1 a:hover {
text-decoration: none;
}
ul.features {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
ul.features li {
}
ul.features li:before {
content:"\2713\0020";
color: rgb(70, 136, 71);
font-weight: bold;
margin-right: 0.4em;
}
.icon {
display: inline-block;
color: #444444;
fill: currentColor;
background-color: ;
}
#icon-clipboard .path1 {
fill: currentcolor;
}
#icon-clipboard .path2 {
fill: rgb(70, 136, 71);
}
.icon-search,
.icon-cloud-download,
.icon-cogs,
.icon-clipboard,
.icon-github3 {
width: 16px;
height: 16px;
}
#search .icon-search {
color: #fff;
fill: currentColor;
width: 12px;
height: 12px;
}
</style>
</head>
<body>
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-clipboard" viewBox="0 0 1024 1024">
<title>clipboard</title>
<path class="path1" d="M928 128h-288c0-70.692-57.306-128-128-128-70.692 0-128 57.308-128 128h-288c-17.672 0-32 14.328-32 32v832c0 17.674 14.328 32 32 32h832c17.674 0 32-14.326 32-32v-832c0-17.672-14.326-32-32-32zM512 64c35.346 0 64 28.654 64 64s-28.654 64-64 64c-35.346 0-64-28.654-64-64s28.654-64 64-64zM896 960h-768v-768h128v96c0 17.672 14.328 32 32 32h448c17.674 0 32-14.328 32-32v-96h128v768z"></path>
<path class="path2" d="M448 858.51l-205.254-237.254 58.508-58.51 146.746 114.744 274.742-242.744 58.514 58.508z"></path>
</symbol>
<symbol id="icon-cloud-download" viewBox="0 0 1024 1024">
<title>cloud-download</title>
<path class="path1" d="M891.004 360.060c-3.242-128.698-108.458-232.060-237.862-232.060-75.792 0-143.266 35.494-186.854 90.732-24.442-31.598-62.69-51.96-105.708-51.96-73.81 0-133.642 59.876-133.642 133.722 0 6.436 0.48 12.76 1.364 18.954-11.222-2.024-22.766-3.138-34.57-3.138-106.998-0.002-193.732 86.786-193.732 193.842 0 107.062 86.734 193.848 193.73 193.848h91.76l226.51 234.51 226.51-234.51 111.482-0.012c96.138-0.184 174.008-78.21 174.008-174.446 0-82.090-56.678-150.9-132.996-169.482zM512 832l-192-192h128v-192h128v192h128l-192 192z"></path>
</symbol>
<symbol id="icon-search" viewBox="0 0 1024 1024">
<title>search</title>
<path class="path1" d="M992.262 871.396l-242.552-206.294c-25.074-22.566-51.89-32.926-73.552-31.926 57.256-67.068 91.842-154.078 91.842-249.176 0-212.078-171.922-384-384-384-212.076 0-384 171.922-384 384s171.922 384 384 384c95.098 0 182.108-34.586 249.176-91.844-1 21.662 9.36 48.478 31.926 73.552l206.294 242.552c35.322 39.246 93.022 42.554 128.22 7.356s31.892-92.898-7.354-128.22zM384 640c-141.384 0-256-114.616-256-256s114.616-256 256-256 256 114.616 256 256-114.614 256-256 256z"></path>
</symbol>
<symbol id="icon-cogs" viewBox="0 0 1024 1024">
<title>cogs</title>
<path class="path1" d="M363.722 722.052l41.298-57.816-45.254-45.256-57.818 41.296c-10.722-5.994-22.204-10.774-34.266-14.192l-11.682-70.084h-64l-11.68 70.086c-12.062 3.418-23.544 8.198-34.266 14.192l-57.818-41.298-45.256 45.256 41.298 57.816c-5.994 10.72-10.774 22.206-14.192 34.266l-70.086 11.682v64l70.086 11.682c3.418 12.060 8.198 23.544 14.192 34.266l-41.298 57.816 45.254 45.256 57.818-41.296c10.722 5.994 22.204 10.774 34.266 14.192l11.682 70.084h64l11.68-70.086c12.062-3.418 23.544-8.198 34.266-14.192l57.818 41.296 45.254-45.256-41.298-57.816c5.994-10.72 10.774-22.206 14.192-34.266l70.088-11.68v-64l-70.086-11.682c-3.418-12.060-8.198-23.544-14.192-34.266zM224 864c-35.348 0-64-28.654-64-64s28.652-64 64-64 64 28.654 64 64-28.652 64-64 64zM1024 384v-64l-67.382-12.25c-1.242-8.046-2.832-15.978-4.724-23.79l57.558-37.1-24.492-59.128-66.944 14.468c-4.214-6.91-8.726-13.62-13.492-20.13l39.006-56.342-45.256-45.254-56.342 39.006c-6.512-4.766-13.22-9.276-20.13-13.494l14.468-66.944-59.128-24.494-37.1 57.558c-7.812-1.892-15.744-3.482-23.79-4.724l-12.252-67.382h-64l-12.252 67.382c-8.046 1.242-15.976 2.832-23.79 4.724l-37.098-57.558-59.128 24.492 14.468 66.944c-6.91 4.216-13.62 8.728-20.13 13.494l-56.342-39.006-45.254 45.254 39.006 56.342c-4.766 6.51-9.278 13.22-13.494 20.13l-66.944-14.468-24.492 59.128 57.558 37.1c-1.892 7.812-3.482 15.742-4.724 23.79l-67.384 12.252v64l67.382 12.25c1.242 8.046 2.832 15.978 4.724 23.79l-57.558 37.1 24.492 59.128 66.944-14.468c4.216 6.91 8.728 13.618 13.494 20.13l-39.006 56.342 45.254 45.256 56.342-39.006c6.51 4.766 13.22 9.276 20.13 13.492l-14.468 66.944 59.128 24.492 37.102-57.558c7.81 1.892 15.742 3.482 23.788 4.724l12.252 67.384h64l12.252-67.382c8.044-1.242 15.976-2.832 23.79-4.724l37.1 57.558 59.128-24.492-14.468-66.944c6.91-4.216 13.62-8.726 20.13-13.492l56.342 39.006 45.256-45.256-39.006-56.342c4.766-6.512 9.276-13.22 13.492-20.13l66.944 14.468 24.492-59.13-57.558-37.1c1.892-7.812 3.482-15.742 4.724-23.79l67.382-12.25zM672 491.2c-76.878 0-139.2-62.322-139.2-139.2s62.32-139.2 139.2-139.2 139.2 62.322 139.2 139.2c0 76.878-62.32 139.2-139.2 139.2z"></path>
</symbol>
<symbol id="icon-github3" viewBox="0 0 1024 1024">
<title>github3</title>
<path class="path1" d="M512 831.892c-19.154 0-38.308-9.916-58.142-29.75-7.81-7.81-7.81-20.474 0-28.286 7.81-7.808 20.474-7.808 28.286 0 12.206 12.21 21.972 18.144 29.856 18.144 7.882 0 17.65-5.934 29.858-18.142 7.812-7.808 20.472-7.808 28.286 0 7.81 7.81 7.81 20.474 0 28.286-19.836 19.832-38.99 29.748-58.144 29.748zM0 525.492c0 49.892 4.266 95.122 12.8 135.682s20.534 75.74 36 105.532c15.466 29.792 35.022 55.904 58.666 78.34s49.332 40.92 77.066 55.458c27.734 14.536 59.466 26.296 95.2 35.266 35.732 8.974 72.088 15.256 109.066 18.846s77.69 5.384 122.134 5.384c44.444 0 85.242-1.79 122.398-5.38s73.602-9.872 109.332-18.846c35.734-8.974 67.558-20.73 95.468-35.266 27.91-14.538 53.778-33.026 77.598-55.458 23.824-22.436 43.47-48.548 58.934-78.34 15.47-29.794 27.56-64.974 36.27-105.532 8.71-40.56 13.066-85.788 13.066-135.68 0-89.38-27.736-166.372-83.2-230.982 3.2-8.616 5.954-18.486 8.266-29.614 2.308-11.128 4.532-26.832 6.664-47.112 2.138-20.282 1.336-43.704-2.398-70.264-3.734-26.564-10.754-53.664-21.066-81.302l-8-1.618c-5.332-1.076-14.042-0.718-26.132 1.080-12.086 1.794-26.222 5.022-42.398 9.69-16.176 4.664-37.066 13.908-62.668 27.728-25.598 13.818-52.62 31.318-81.066 52.496-48.356-14.718-115.020-30.116-200-30.116-84.976 0-151.822 15.396-200.53 30.114-28.446-21.18-55.556-38.588-81.334-52.228-25.78-13.642-46.402-22.974-61.868-27.998-15.468-5.024-29.778-8.256-42.934-9.69-13.156-1.436-21.602-1.886-25.334-1.346-3.732 0.538-6.488 1.166-8.266 1.884-10.314 27.64-17.424 54.74-21.336 81.304-3.91 26.56-4.8 49.892-2.666 69.992 2.134 20.102 4.444 35.898 6.934 47.382 2.49 11.486 5.334 21.358 8.534 29.614-55.466 64.25-83.2 141.242-83.2 230.98zM136.536 639.404c0-58.022 21.332-110.638 64-157.856 12.8-14.406 27.646-25.312 44.534-32.712 16.89-7.402 36.088-11.606 57.6-12.606s42.044-0.8 61.6 0.6c19.556 1.402 43.734 3.302 72.534 5.702 28.798 2.404 53.688 3.602 74.666 3.602 20.976 0 45.868-1.2 74.664-3.602 28.806-2.4 52.982-4.3 72.536-5.702 19.56-1.4 40.090-1.6 61.602-0.6 21.512 1.002 40.802 5.204 57.868 12.606 17.066 7.4 32 18.306 44.8 32.712 42.664 47.218 64 99.834 64 157.856 0 34.012-3.554 64.324-10.668 90.934-7.11 26.612-16.090 48.916-26.934 66.922-10.844 18.008-26.048 33.218-45.598 45.62-19.558 12.406-38.492 22.010-56.8 28.81-18.312 6.8-41.958 12.104-70.934 15.906-28.982 3.796-54.934 6.102-77.872 6.9-22.934 0.8-51.82 1.2-86.664 1.2s-63.644-0.402-86.4-1.2c-22.756-0.798-48.622-3.104-77.6-6.9-28.978-3.802-52.622-9.104-70.934-15.906-18.31-6.802-37.244-16.404-56.8-28.81-19.556-12.404-34.756-27.612-45.6-45.62-10.846-18.006-19.824-40.31-26.934-66.922-7.11-26.61-10.666-56.922-10.666-90.934zM256 608.004c0-53.019 28.654-96 64-96s64 42.981 64 96c0 53.019-28.654 96-64 96s-64-42.981-64-96zM640 608.004c0-53.019 28.654-96 64-96s64 42.981 64 96c0 53.019-28.654 96-64 96s-64-42.981-64-96z"></path>
</symbol>
</defs>
</svg>
<div class="container">
<div class="jumbotron">
<h1><a href="/">Specref</a></h1>
<p class="lead">Eine von der Community gepflegte Open-Source-Datenbank mitWebstandards und verwandten Referenzen.</p>
</div>
<div id="search">
<div class=row>
<form action="">
<div class="input-group">
<input class="form-control" name=q type=search autocomplete=off placeholder="Durchsuchen Sie Specref nach Schlüsselwörtern, Titeln, Autoren, URLs, …">
<span class="input-group-btn">
<button class="btn btn-primary" type=submit>
<svg class="icon icon-search"><use xlink:href="#icon-search"></use></svg>
Suchen
</button>
</span>
</div>
</form>
</div>
<div class=row>
<p id="status"></p>
</div>
<div class=row>
<dl></dl>
</div>
</div>
<div class="featurette">
<div class="row">
<div class="col-lg-6">
<h4>
<svg class="icon icon-search"><use xlink:href="#icon-search"></use></svg>
Search
</h4>
Sie nach Referenz , Titel , , , oder URL .
<p>Suchen Sie nach
<a href="/?q=rfc2119">Referenz</a>,
<a href="/?q=coffee%20pot">Title</a>,
<a href="/?q=JSON">Schlüsselwort</a>,
<a href="/?q=Swartz">Herausgeber</a>,
<a href="/?q=1%20April%202014">Datum</a> oder
<a href="/?q=https%3A%2F%2Fwww.w3.org%2FTR%2F2008%2FWD-DOM-Bindings-20080410%2F">URL</a>.
</p>
<h4>
<svg class="icon icon-cloud-download"><use xlink:href="#icon-cloud-download"></use></svg>
Verwenden
</h4>
<p>Rufen Sie normalisierte JSON-Daten über die
<a href="https://github.com/tobie/specref/blob/master/README.md#api">Web API</a> ab oder verlassen Sie sich auf die vorhandene Integration in <a href="https://github.com/tabatkins/bikeshed">spec-authoring</a> <a href="https://github.com/w3c/respec/">Tools</a>.</p>
<h4>
<svg class="icon icon-github3"><use xlink:href="#icon-github3"></use></svg>
Beitragen
</h4>
<p>Fügen Sie auf<a href="https://github.com/tobie/specref">GitHub</a> neue Referenzen hinzu und aktualisieren Sie vorhandene ..</p>
<h4>
<svg class="icon icon-cogs"><use xlink:href="#icon-cogs"></use></svg>
Automatisieren
</h4>
<p> Normungsgremium? Verleger?
<a href="mailto:specref@codes
peaks.com"> Kontaktieren Sie uns</a>, um Ihre Referenzliste stündlich zu synchronisieren.</p>
</div>
<div class="col-lg-6">
<h4>
<svg class="icon icon-clipboard"><use xlink:href="#icon-clipboard"></use></svg>
Merkmale
</h4>
<ul class=features>
<li><span id="refcount">52.716 Referenzen</span> , Tendenz steigend..</li>
<li>Normalisierte JSON-Daten.</li>
<li>Einfache Web-API.</li>
<li>Open-Source und Community-gepflegt.</li>
<li>
Automatische Aktualisierung von
<a href="https://www.w3.org/">W3C</a>,
<a href="https://www.w3.org/community/wicg/">WICG</a>,
<a href="https://whatwg.org/">WHATWG</a>,
<a href="https://isocpp.org/std/the-committee">WG21</a>, und
<a href="https://www.ietf.org/">IETF</a> Referenzen.
</li>
<li>Häufige Updates <span id="lastupdate"></span>.</li>
<li>
Eingebaut in
<a href="https://github.com/tabatkins/bikeshed">Bikeshed</a> and
<a href="https://github.com/w3c/respec/">ReSpec</a>.
</li>
</ul>
</div>
</div>
</div>
<footer class="footer center">
<p>Built by <a href="https://twitter.com/tobie">@tobie</a>. Based on work by <a href="http://berjon.com/">Robin Berjon</a> and <a href="http://www.w3.org/People/Bos/">Bert Bos</a>. Sponsored by Microsoft. Hosting generously provided by <a href="https://www.heroku.com/home">Heroku</a>.</p>
<div xmlns:dct="http://purl.org/dc/terms/" xmlns:vcard="http://www.w3.org/2001/vcard-rdf/3.0#">
<p>
<a rel="license" href="http://creativecommons.org/publicdomain/zero/1.0/">
<img src="https://licensebuttons.net/p/zero/1.0/80x15.png" style="border-style: none;" alt="CC0" />
</a>
</p>
<p>
To the extent possible under law,
<a rel="dct:publisher" href="http://www.codespeaks.com"><span property="dct:title">Tobie Langel</span></a>
has waived all copyright and related or neighboring rights to the
<span property="dct:title">Specref Reference Database</span>.
This work is published from:
<span property="vcard:Country" datatype="dct:ISO3166" content="CH" about="http://www.specref.org">
Switzerland</span>.
</p>
</div>
</footer>
</div>
<script src="/js_webseite/jquery.js"></script>
<script>
var REF_STATUSES = {
"NOTE": "W3C Note"
, "WG-NOTE": "W3C Working Group Note"
, "ED": "W3C Editor's Draft"
, "FPWD": "W3C First Public Working Draft"
, "WD": "W3C Working Draft"
, "LCWD": "W3C Last Call Working Draft"
, "CR": "W3C Candidate Recommendation"
, "PR": "W3C Proposed Recommendation"
, "PER": "W3C Proposed Edited Recommendation"
, "REC": "W3C Recommendation"
};
function highlight(txt, searchString) {
var regexp = new RegExp("(<[^>]+>)|(" + searchString + ")", "gi");
var flag = false;
return (txt || "").replace(regexp, function wrap(_, tag, txt) {
if (tag == "<code>") flag = true;
if (tag == "</code>") flag = false;
if (tag) return tag;
if (flag) return txt;
return "<mark>" + txt + "</mark>";
});
}
function stringifyRef(ref) {
if (typeof ref === "string") return "<div>" + ref + "</div>";
var output = "";
if (ref.authors && ref.authors.length) {
output += ref.authors.join("; ");
if (ref.etAl) output += " et al";
output += ". ";
}
if (ref.href) output += '<a href="' + ref.href + '"><cite>' + ref.title + "</cite></a>. ";
else output += '<cite>' + ref.title + '</cite>. ';
if (ref.date) output += ref.date + ". ";
if (ref.status) output += (REF_STATUSES[ref.status] || ref.status) + ". ";
if (ref.href) output += 'URL: <a href="' + ref.href + '">' + ref.href + "</a>";
if (ref.edDraft) output += ' ED: <a href="' + ref.edDraft + '">' + ref.edDraft + "</a>";
return "<div>" + output + "</div>";
};
function pluralize (count, sing, plur) {
return count + ' ' + (count == 1 ? sing : plur);
}
function buildResults(json) {
var html = "", count = 0;
for (var k in json) {
var obj = json[k];
if (obj.aliasOf) {
if (obj.aliasOf.toLowerCase() !== obj.id.toLowerCase()) {
var alias = obj;
while (alias.aliasOf) { alias = json[alias.aliasOf]; };
html += "<dt>[<a href=\"#\">" + (obj.id || k) + "</a>]" + labels(obj) + labels(alias) + "</dt><dd><div>Alias of [<a href=\"#" + obj.aliasOf.toLowerCase() + "\">" + obj.aliasOf + "</a>].</div>" + prettifyApiOutput(obj) + "</dd>";
count++;
}
} else {
count++;
html += "<dt id=\"" + (obj.id || k).toLowerCase() + "\">[<a href=\"#\">" + (obj.id || k) + "</a>]" + labels(obj) + "</dt><dd>" + stringifyRef(obj) + prettifyApiOutput(obj) + "</dd>";
}
}
return { html: html, count: count };
}
function labels(obj) {
if (obj.obsoletedBy) {
return " <span class=\"label label-warning\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Obsoleted by " + obj.obsoletedBy.map(function(k) { return "[" + k + "]"; }).join(", ") + ".\">Obsolete</span>";
}
if (obj.aliasOf) {
return " <span class=\"label label-default\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Alias of [" + obj.aliasOf + "].\">Alias</span>";
}
return "";
}
function prettifyApiOutput(obj) {
return "<pre style=\"display:none\"><code>" + JSON.stringify(obj, null, 4) + "</code></pre>";
}
function msg(query, count) {
if (count) {
return 'We found ' + pluralize(count, 'result', 'results') + ' for your search for "' + query + '".';
}
return 'Your search for "' + query + '" did not match any references in the Specref database.\nSorry. :\'(';
}
function setup($root) {
var $search = $root.find("input[type=search]");
var $status = $("#status");
var $results = $root.find("dl");
function fetch(query, callback) {
$.when(
$.getJSON("https://api.specref.org/search-refs", { q: query }),
$.getJSON("https://api.specref.org/reverse-lookup", { urls: query })
).then(function(search, revLookup) {
var ref;
search = search[0],
revLookup = revLookup[0];
for (var k in revLookup) {
ref = revLookup[k];
search[ref.id] = ref;
}
var results = buildResults(search);
results.raw = search;
callback(null, results);
}, function(error) {
$status.text("Oops! Something didn't work out as planned. :(");
});
}
$root.find("form").on("submit", function() {
var query = $search.val();
if (query) {
$status.text("Searching…");
fetch(query, function(err, output) {
window.history && window.history.pushState(null, '', queryToUrl(query));
update(query, output);
});
}
return false;
});
function update(query, output) {
$results.html(highlight(output.html, query));
$status.text(msg(query, output.count));
$search.select();
$('[data-toggle="tooltip"]').tooltip();
}
function search() {
query = queryFromLocation();
if (!query) return;
$search.val(query);
$status.text("Searching…");
fetch(query, function(err, output) {
update(query, output);
});
}
window.onpopstate = search;
function queryFromLocation() {
var obj = {};
(window.location.href.split('?')[1] || '').split("#")[0].split('&').forEach(function(str) {
str = (str || "").split('=');
obj[str[0]] = str[1];
});
return obj.q ? decodeURIComponent(obj.q) : null;
}
function queryToUrl(query) {
return location.pathname + "?q=" + encodeURIComponent(query);
}
search();
$search.focus();
}
function metadata(refcount, timeago) {
function formatRefCount(n) {
n = ""+n;
var l = n.length;
return n.substr(0, l - 3) + "," + n.substr(l - 3, l);
}
function formatTime(delta) {
delta = Math.floor(delta / 60000); // minutes
if (delta < 1) return "less than a minute ago";
if (delta == 1) return "a minutes ago";
if (delta < 60) return delta + " minutes ago";
delta = Math.floor(delta / 60); // hours
if (delta == 1) return "an hour ago";
if (delta < 24) return delta + " hours ago";
delta = Math.floor(delta / 24); // days
if (delta == 1) return "a day ago";
if (delta < 7) return delta + " days ago";
delta = Math.floor(delta / 7); // weeks
if (delta == 1) return "a week ago";
return delta + " weeks ago";
}
$.getJSON("https://api.specref.org/metadata").then(function(data) {
refcount.text(formatRefCount(data.refCount));
});
$.getJSON("https://api.github.com/repos/tobie/specref/commits?path=refs&per_page=1").then(function(data) {
timeago.html(" (last one <a href=\"" + data[0].html_url + "\">" + formatTime(new Date - Date.parse(data[0].commit.committer.date)) + "</a>)");
});
}
</script>
<script src="/js_webseite/bootstrap.min.js"></script>
<script>
setup($("#search"));
metadata($("#refcount"), $("#lastupdate"));
$("dl").delegate("dt a", "click", function(e) {
var $dd = $(this).parent().next("dd");
$dd.find("div").toggle();
$dd.find("pre").toggle();
return false;
});
</script>
</body>
</html>