Clean up shared assets for API reference

This PR promotes the CSS, JS and FONTS files used by API reference to
the `static/css`, `static/js` and `static/fonts` directories
respectively. The intent is that for future releases, when generating
API reference docs, only the `index.html` and `navData.js` files need to
be copied from the generator tools.

Details of changes:

- `jquery-3.2.1.min.js` file is replaced by `jquery-3.3.1.min.js` to
  align with the version used by Docsy. We can investigate in the future
  whether this can be shared. Converging to the same version at least
  can reduce the risks of compatibility.
- `jquery.scrollTo.min.js` moved to `static/js` file and renamed to
  `jquery.scrollTo-2.1.2.min.js` so we know the version from file name.
- `scroll.js` moved to `static/js` and renamed to `scroll-apiref.js` to
  siginify that it is used by API reference.
- A `README.md` file is added to `static/js` directory for describing
  the purposes of the these files.
- `bootstrap.min.css` moved to `static/css` and renamed to
  `bootstrap-4.3.1.min.css` so that it can be shared and its version can
  be easily discovered.
- `font-awesome.min.css` moved to `static/css` and renamed to
  `fontawesome-4.7.0.min.css` for the same reason.
- `stylesheet.css` moved to `static/css` and renamed to
  `style_apiref.css` to siginify its purpose.
- A `README.md` file is added to `static/css` directory for describing
  the purposes of the these files.
- FontAwesome fonts files moved to `static/fonts` so that they can be
  shared across API reference versions.
- Current API reference (1.18) is modified to reference the relocated
  files. Upstream generator change on the way
  (kubernetes-sigs/reference-tools/#161).

Related: #22016, #22023, #22041, #22024, #22064
This commit is contained in:
Qiming Teng
2020-07-05 13:41:19 +08:00
parent ece28880f9
commit 162e5edb39
20 changed files with 32 additions and 10 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,229 +0,0 @@
/*
Kubernetes colors
kubernetes blue - rgb(50, 109, 230)
dark blue - rgb(51, 113, 227)
dark grey - rgb(48, 48, 48)
light grey - rgb(161, 160, 158)
*/
/* User agent CSS overrides */
#sidebar-wrapper ul, #sidebar-wrapper li {
margin-left: 10px;
padding-left: 0;
}
.body-content hr {
margin: 2em 0;
border-top: 2px solid dimgrey;
border-bottom: 2px solid antiquewhite;
}
.body-content table {
margin-bottom: 1em;
overflow: auto;
}
.body-content table th, .body-content table td {
text-align: left;
vertical-align: top;
line-height: 1.5;
}
.body-content table th {
padding: 15px 20px;
border-bottom: 1px solid lightsteelblue;
vertical-align: bottom;
}
.body-content table td {
padding: 10px;
}
.body-content table tr:last-child {
border-bottom: 1px solid lightsteelblue;
}
.body-content table tr:nth-child(odd) > td {
background-color: WhiteSmoke;
}
.body-content table tr:nth-child(even) > td {
background-color: Gainsboro;
}
.body-content dt {
font-weight: bold;
}
.body-content dd {
margin-left: 15px;
}
.body-content p, .body-content li, .body-content dt, .body-content dd {
line-height: 1.6;
margin-top: 0;
}
/* Brodoc CSS */
body > #wrapper {
display: block;
padding-bottom: 500px;
}
#sidebar-wrapper {
display: block;
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: whitesmoke;
border-right: 2px solid slategrey;
overflow-x: auto;
padding-top: 60px;
}
#sidebar-wrapper a {
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 5px;
}
#sidebar-wrapper ul {
list-style: none;
}
#sidebar-wrapper a.selected {
font-style: bold;
color: whitesmoke;
border: 1px solid rgb(161, 160, 158);
background-color: rgb(51, 113, 227);
border-radius: 5px;
}
#sidebar-wrapper .strong-nav {
font-family: monospace;
font-weight: bold;
}
#sidebar-wrapper .nav-level-1.strong-nav {
margin-top: 25px;
}
#sidebar-wrapper .copyright {
padding-left: 10px;
padding-top: 50px;
padding-bottom: 50px;
text-decoration: underline;
}
#page-content-wrapper {
padding-top: 60px;
}
#page-content-wrapper table tr td:first-child {
white-space: pre;
}
.body-content h1, .body-content h2 {
clear: both;
border-bottom: 3px solid lightslategrey;
padding-top: 20px;
}
.body-content > h3, .body-content > h4, .body-content > h5, .body-content > h6, .body-content > p, .body-content > aside, .body-content > ul > li, .body-content > ul > li {
padding-top: 20px;
}
.body-content table tr td:not(:first-child) {
overflow-wrap: break-word;
word-wrap: break-word;
}
.body-content table tr td a {
word-break: break-word;
}
.body-content p code {
text-overflow: ellipsis;
color: #802060;
display: inline-block;
font-size: smaller;
word-break: break-word;
}
.body-content blockquote {
border-left: 0;
border-radius: 5px;
}
.body-content pre.code-block {
margin-top: 5px;
margin-bottom: 5px;
}
.body-content blockquote p, .body-content pre {
color: black;
font-size: 13px;
}
.body-content blockquote.code-block {
background: Wheat;
}
.body-content pre.code-block code {
word-wrap: normal;
white-space: pre;
}
.body-content code {
color: Brown !important;
}
.code-block {
display: none;
width: 60%;
float: left;
clear: right;
}
.code-block.active {
display: initial;
}
#code-tabs-wrapper {
width: 55%;
height: 60px;
/* position: fixed; */
top: 0;
right: 0;
}
#code-tabs-wrapper .code-tab-list {
float: right;
margin-top: 0;
padding: 0 10px;
}
#code-tabs-wrapper .code-tab {
color: white;
/* display: inline-block; */
padding: 0 30px;
background: rgb(48, 48, 48);
border: 1px solid rgb(161, 160, 158);
border-radius: 5px;
}
#code-tabs-wrapper .tab-selected {
background: rgb(51, 113, 227);
font-style: bold;
border-radius: 5px;
}
.side-nav a {
color: black;
}
File diff suppressed because it is too large Load Diff

Before

Width:  |  Height:  |  Size: 434 KiB

@@ -4,9 +4,9 @@
<META charset="UTF-8">
<TITLE>Kubernetes API Reference Docs</TITLE>
<LINK rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
<LINK rel="stylesheet" href="css/bootstrap.min.css">
<LINK rel="stylesheet" href="css/font-awesome.min.css" type="text/css">
<LINK rel="stylesheet" href="css/stylesheet.css" type="text/css">
<LINK rel="stylesheet" href="/css/bootstrap-4.3.1.min.css">
<LINK rel="stylesheet" href="/css/fontawesome-4.7.0.min.css" type="text/css">
<LINK rel="stylesheet" href="/css/style_apiref.css" type="text/css">
</HEAD>
<BODY>
<DIV id="wrapper" class="container-fluid">
@@ -47944,10 +47944,10 @@ The contents of the target Secret&#39;s Data field will be presented in a volume
</DIV>
</DIV>
</DIV>
<SCRIPT src="/js/jquery-3.2.1.min.js"></SCRIPT>
<SCRIPT src="js/jquery.scrollTo.min.js"></SCRIPT>
<SCRIPT src="/js/jquery-3.3.1.min.js"></SCRIPT>
<SCRIPT src="/js/jquery.scrollTo-2.1.2.min.js"></SCRIPT>
<SCRIPT src="/js/bootstrap-4.3.1.min.js"></SCRIPT>
<SCRIPT src="js/navData.js"></SCRIPT>
<SCRIPT src="js/scroll.js"></SCRIPT>
<SCRIPT src="/js/scroll-apiref.js"></SCRIPT>
</BODY>
</HTML>
@@ -1,7 +0,0 @@
/**
* Copyright (c) 2007-2015 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
* Licensed under MIT
* @author Ariel Flesler
* @version 2.1.2
*/
;(function(f){"use strict";"function"===typeof define&&define.amd?define(["jquery"],f):"undefined"!==typeof module&&module.exports?module.exports=f(require("jquery")):f(jQuery)})(function($){"use strict";function n(a){return!a.nodeName||-1!==$.inArray(a.nodeName.toLowerCase(),["iframe","#document","html","body"])}function h(a){return $.isFunction(a)||$.isPlainObject(a)?a:{top:a,left:a}}var p=$.scrollTo=function(a,d,b){return $(window).scrollTo(a,d,b)};p.defaults={axis:"xy",duration:0,limit:!0};$.fn.scrollTo=function(a,d,b){"object"=== typeof d&&(b=d,d=0);"function"===typeof b&&(b={onAfter:b});"max"===a&&(a=9E9);b=$.extend({},p.defaults,b);d=d||b.duration;var u=b.queue&&1<b.axis.length;u&&(d/=2);b.offset=h(b.offset);b.over=h(b.over);return this.each(function(){function k(a){var k=$.extend({},b,{queue:!0,duration:d,complete:a&&function(){a.call(q,e,b)}});r.animate(f,k)}if(null!==a){var l=n(this),q=l?this.contentWindow||window:this,r=$(q),e=a,f={},t;switch(typeof e){case "number":case "string":if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(e)){e= h(e);break}e=l?$(e):$(e,q);case "object":if(e.length===0)return;if(e.is||e.style)t=(e=$(e)).offset()}var v=$.isFunction(b.offset)&&b.offset(q,e)||b.offset;$.each(b.axis.split(""),function(a,c){var d="x"===c?"Left":"Top",m=d.toLowerCase(),g="scroll"+d,h=r[g](),n=p.max(q,c);t?(f[g]=t[m]+(l?0:h-r.offset()[m]),b.margin&&(f[g]-=parseInt(e.css("margin"+d),10)||0,f[g]-=parseInt(e.css("border"+d+"Width"),10)||0),f[g]+=v[m]||0,b.over[m]&&(f[g]+=e["x"===c?"width":"height"]()*b.over[m])):(d=e[m],f[g]=d.slice&& "%"===d.slice(-1)?parseFloat(d)/100*n:d);b.limit&&/^\d+$/.test(f[g])&&(f[g]=0>=f[g]?0:Math.min(f[g],n));!a&&1<b.axis.length&&(h===f[g]?f={}:u&&(k(b.onAfterFirst),f={}))});k(b.onAfter)}})};p.max=function(a,d){var b="x"===d?"Width":"Height",h="scroll"+b;if(!n(a))return a[h]-$(a)[b.toLowerCase()]();var b="client"+b,k=a.ownerDocument||a.document,l=k.documentElement,k=k.body;return Math.max(l[h],k[h])-Math.min(l[b],k[b])};$.Tween.propHooks.scrollLeft=$.Tween.propHooks.scrollTop={get:function(a){return $(a.elem)[a.prop]()}, set:function(a){var d=this.get(a);if(a.options.interrupt&&a._last&&a._last!==d)return $(a.elem).stop();var b=Math.round(a.now);d!==b&&($(a.elem)[a.prop](b),a._last=this.get(a))}};return p});
@@ -1,196 +0,0 @@
$(document).ready(function() {
/**
* TODO: Refactor with intent toward pure functions. Mutation of state can lead to bugs and difficult debugging.
*/
var toc = navData.toc;
var flatToc = navData.flatToc.reverse();
function collectNodes(tocMap) {
var tocNodes = {};
tocMap.map(function(node, index) {
var sectionNode = $('#' + node.section);
var tocSubsections = {};
tocItem = {section: sectionNode};
var subsectionNodes;
if (node.subsections) {
subsectionNodes = (collectNodes(node.subsections));
tocItem.subsections = subsectionNodes;
}
tocNodes[node.section] = tocItem;
});
return tocNodes;
}
var tocItems = collectNodes(toc);
function collectNodesFlat(tocMap, obj) {
var collect = obj || {};
tocMap.map(function(node, index) {
var sectionNode = $('#' + node.section);
tocItem = {section: sectionNode};
if (node.subsections) {
subsectionNodes = (collectNodesFlat(node.subsections, collect));
}
collect[node.section] = sectionNode;
});
return collect;
}
var tocFlat = collectNodesFlat(toc);
var prevSectionToken;
var prevSubsectionToken;
var activeTokensObj = {};
function scrollActions(scrollPosition) {
var activeSection = checkNodePositions(toc, tocFlat, scrollPosition);
var activeSubSection,
prevL1Nav,
currL1Nav,
prevL2Nav,
currL2Nav;
// No active section - return existing activeTokensObj (may be empty)
if (!activeSection) {
return activeTokensObj;
}
/**
* This block deals with L1Nav sections
*/
// If no previous token, set previous to current active and show L1Nav
if (!prevSectionToken) {
prevSectionToken = activeSection.token;
currL1Nav = getNavNode(activeSection.token);
currL1Nav.show('fast');
}
// If active is not the same as previous, hide previous L1Nav and show current L1Nav; set previous to current
else if (activeSection.token !== prevSectionToken) {
prevL1Nav = getNavNode(prevSectionToken);
currL1Nav = getNavNode(activeSection.token);
prevL1Nav.hide('fast');
currL1Nav.show('fast');
prevSectionToken = activeSection.token;
}
/**
* This block deals with L2Nav subsections
*/
// If there is a subsections array and it has a non-zero length, set active subsection
if (activeSection.subsections && activeSection.subsections.length !== 0) {
activeSubSection = checkNodePositions(activeSection.subsections, tocFlat, scrollPosition);
if (activeSubSection) {
if (!prevSubsectionToken) {
prevSubsectionToken = activeSubSection.token;
currL2Nav = getNavNode(activeSubSection.token);
currL2Nav.show('fast');
} else if (activeSubSection.token !== prevSubsectionToken) {
prevL2Nav = getNavNode(prevSubsectionToken);
currL2Nav = getNavNode(activeSubSection.token);
prevL2Nav.hide('fast');
currL2Nav.show('fast');
prevSubsectionToken = activeSubSection.token;
}
} else {
prevL2Nav = getNavNode(prevSubsectionToken);
prevL2Nav.hide('fast');
prevSubsectionToken = null;
}
}
activeTokensObj.L1 = prevSectionToken;
activeTokensObj.L2 = prevSubsectionToken;
return activeTokensObj;
}
/**
* Checks for active elements by scroll position
*/
var prevElemToken;
var activeElemToken;
function checkActiveElement(items, scrollPosition) {
var offset = 50;
var offsetScroll = scrollPosition + offset;
var visibleNode;
for (var i = 0; i < items.length; i++) {
var token = items[i];
var node = getHeadingNode(token);
if (offsetScroll >= node.offset().top) {
activeElemToken = token;
}
}
if (!prevElemToken) {
getNavElemNode(activeElemToken).addClass('selected');
prevElemToken = activeElemToken;
return;
}
if (activeElemToken !== prevElemToken) {
getNavElemNode(prevElemToken).removeClass('selected');
getNavElemNode(activeElemToken).addClass('selected');
prevElemToken = activeElemToken;
}
return activeElemToken;
}
function getHeadingNode(token) {
return $('#' + token);
}
function getNavNode(token) {
return $('#' + token + '-nav');
}
function getNavElemNode(token) {
return $('#sidebar-wrapper > ul a[href="#' + token + '"]');
}
function checkNodePositions(nodes, flatNodeMap, scrollPosition) {
var activeNode;
for (var i = 0; i < nodes.length; i++) {
var item = nodes[i];
var node = flatNodeMap[item.section];
var nodeTop = node.offset().top - 50;
if (scrollPosition >= nodeTop) {
activeNode = {token: item.section, node: node};
if (item.subsections) {
activeNode.subsections = item.subsections;
}
break;
}
}
return activeNode;
}
function scrollToNav(token) {
setTimeout(function() {
var scrollPosition = $(window).scrollTop();
var activeSectionTokens = scrollActions(scrollPosition);
var activeElemToken = checkActiveElement(flatToc, scrollPosition);
var navNode = $('#sidebar-wrapper > ul a[href="#' + token + '"]');
$('#sidebar-wrapper').scrollTo(navNode, {duration: 'fast', axis: 'y'});
}, 200);
}
$(window).on('hashchange', function(event) {
var scrollPosition = $(window).scrollTop();
var activeSectionTokens = scrollActions(scrollPosition);
var activeElemToken = checkActiveElement(flatToc, scrollPosition);
var scrollToken = activeSectionTokens.L2 ? activeSectionTokens.L2 : activeSectionTokens.L1;
scrollToNav(scrollToken);
var token = location.hash.slice(1);
});
var scrollPosition = $(window).scrollTop();
scrollActions(scrollPosition);
checkActiveElement(flatToc, scrollPosition);
// TODO: prevent scroll on sidebar from propagating to window
$(window).on('scroll', function(event) {
var scrollPosition = $(window).scrollTop();
var activeSectionTokens = scrollActions(scrollPosition);
var activeElemToken = checkActiveElement(flatToc, scrollPosition);
});
});