From 4f24f13956699fcb1734fabb00295af91ff3ff3d Mon Sep 17 00:00:00 2001 From: David Oliver Date: Tue, 2 Feb 2021 15:05:03 -0500 Subject: [PATCH 1/5] chore: DocGenerator generates valid output on failure Even if the Roslyn build fails, generate valid output so that docfx can run successfully during local debugging (assuming implemented views section is not of interest). --- src/Uno.UWPSyncGenerator/DocGenerator.cs | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/Uno.UWPSyncGenerator/DocGenerator.cs b/src/Uno.UWPSyncGenerator/DocGenerator.cs index 43b051b713c7..e784e87ab96c 100644 --- a/src/Uno.UWPSyncGenerator/DocGenerator.cs +++ b/src/Uno.UWPSyncGenerator/DocGenerator.cs @@ -32,7 +32,18 @@ public override void Build(string basePath, string baseName, string sourceAssemb _sb.AppendLine(); _views = new List>(); - base.Build(basePath, baseName, sourceAssembly); + + try + { + base.Build(basePath, baseName, sourceAssembly); + } + catch (Exception e) + { + _sb.AppendComment($"Generation error: {e.Message}"); +#if !DEBUG + throw; +#endif + } _viewsGrouped = GroupByNamespace(_views); _kosherFrameworkViews = new HashSet<(string name, string namespaceString)>(_views.Select(ps => (ps.UAPSymbol.Name, ps.UAPSymbol.ContainingNamespace.ToDisplayString()))); @@ -204,6 +215,15 @@ void AppendNotImplementedMembers(string memberTypePlural, string memberTypeSi } } +#if DEBUG + if (_views.None()) + { + // Dummy TOC entry so that docfx doesn't fail + tocSB.AppendLineInvariant($"- name: Implemented views failed"); + tocSB.AppendLineInvariant($" href: doesntexist.md"); + } +#endif + using (var fileWriter = new StreamWriter(Path.Combine(DocPath, ImplementedPath, "toc.yml"))) { fileWriter.Write(tocSB.ToString()); From 31fe4e3c76045e7e0e6ade98dbae6b07897eba34 Mon Sep 17 00:00:00 2001 From: David Oliver Date: Tue, 2 Feb 2021 15:07:37 -0500 Subject: [PATCH 2/5] docs: Enable full-text search Enable full-text search in the docfx settings. Note: the navbar.tmpl.partial template still needs to be adjusted in order for the search box to actually appear. --- doc/docfx.json | 1 + 1 file changed, 1 insertion(+) diff --git a/doc/docfx.json b/doc/docfx.json index fcb52b0562fd..8c78d019289c 100644 --- a/doc/docfx.json +++ b/doc/docfx.json @@ -52,6 +52,7 @@ "disableGitFeatures": false, "globalMetadata": { "_appLogoPath": "images/UnoLogoSmall.png", + "_enableSearch": "true", "_appFaviconPath": "images/UnoLogoSmall.png" } } From 7edbcc594ae8d5c156c771833c2d0de062c6a481 Mon Sep 17 00:00:00 2001 From: Karine Savaria Date: Thu, 25 Mar 2021 17:18:33 -0400 Subject: [PATCH 3/5] docs: Added toc and js theme overrides --- doc/docfx.json | 99 ++- doc/templates/uno/styles/docfx.js | 1140 +++++++++++++++++++++++++++++ doc/templates/uno/toc.html.tmpl | 21 + 3 files changed, 1205 insertions(+), 55 deletions(-) create mode 100644 doc/templates/uno/styles/docfx.js create mode 100644 doc/templates/uno/toc.html.tmpl diff --git a/doc/docfx.json b/doc/docfx.json index 8c78d019289c..e417ab757282 100644 --- a/doc/docfx.json +++ b/doc/docfx.json @@ -1,59 +1,48 @@ { - "build": { - "content": [ - { - "files": [ - "api/**.yml", - "api/index.md" - ] - }, - { - "files": [ - "articles/**.md", - "articles/**/toc.yml", - "toc.yml", - "*.md" - ] - } - ], - "resource": [ - { - "files": [ - "images/**", - "articles/**.png", - "articles/**.jpg", - "articles/**.gif" - ] - } - ], - "overwrite": [ - { - "files": [ - "apidoc/**.md" + "build": { + "content": [ + { + "files": ["api/**.yml", "api/index.md"] + }, + { + "files": [ + "articles/**.md", + "articles/**/toc.yml", + "toc.yml", + "*.md" + ] + } ], - "exclude": [ - "obj/**", - "_site/**" - ] - } - ], - "dest": "_site", - "globalMetadataFiles": [], - "fileMetadataFiles": [], - "template": [ - "default", - "templates/uno" - ], - "postProcessors": [], - "markdownEngineName": "markdig", - "noLangKeyword": false, - "keepFileLink": false, - "cleanupCacheHistory": false, - "disableGitFeatures": false, - "globalMetadata": { - "_appLogoPath": "images/UnoLogoSmall.png", - "_enableSearch": "true", - "_appFaviconPath": "images/UnoLogoSmall.png" + "resource": [ + { + "files": [ + "images/**", + "articles/**.png", + "articles/**.jpg", + "articles/**.gif" + ] + } + ], + "overwrite": [ + { + "files": ["apidoc/**.md"], + "exclude": ["obj/**", "_site/**"] + } + ], + "dest": "_site", + "globalMetadataFiles": [], + "fileMetadataFiles": [], + "template": ["default", "templates/uno"], + "postProcessors": ["ExtractSearchIndex"], + "markdownEngineName": "markdig", + "noLangKeyword": false, + "keepFileLink": false, + "cleanupCacheHistory": false, + "disableGitFeatures": false, + "globalMetadata": { + "_appLogoPath": "images/UnoLogoSmall.png", + "_enableSearch": "true", + "_appFaviconPath": "images/UnoLogoSmall.png" + } } - } } diff --git a/doc/templates/uno/styles/docfx.js b/doc/templates/uno/styles/docfx.js new file mode 100644 index 000000000000..5326339d60f5 --- /dev/null +++ b/doc/templates/uno/styles/docfx.js @@ -0,0 +1,1140 @@ +// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information. +$(function () { + var active = 'active'; + var expanded = 'in'; + var collapsed = 'collapsed'; + var filtered = 'filtered'; + var show = 'show'; + var hide = 'hide'; + var util = new utility(); + + workAroundFixedHeaderForAnchors(); + highlight(); + enableSearch(); + + renderTables(); + renderAlerts(); + renderLinks(); + renderNavbar(); + renderSidebar(); + renderAffix(); + renderFooter(); + renderLogo(); + + breakText(); + renderTabs(); + + window.refresh = function (article) { + // Update markup result + if (typeof article == 'undefined' || typeof article.content == 'undefined') + console.error("Null Argument"); + $("article.content").html(article.content); + + highlight(); + renderTables(); + renderAlerts(); + renderAffix(); + renderTabs(); + } + + // Add this event listener when needed + // window.addEventListener('content-update', contentUpdate); + + function breakText() { + $(".xref").addClass("text-break"); + var texts = $(".text-break"); + texts.each(function () { + $(this).breakWord(); + }); + } + + // Styling for tables in conceptual documents using Bootstrap. + // See http://getbootstrap.com/css/#tables + function renderTables() { + $('table').addClass('table table-bordered table-striped table-condensed').wrap('
'); + } + + // Styling for alerts. + function renderAlerts() { + $('.NOTE, .TIP').addClass('alert alert-info'); + $('.WARNING').addClass('alert alert-warning'); + $('.IMPORTANT, .CAUTION').addClass('alert alert-danger'); + } + + // Enable anchors for headings. + (function () { + anchors.options = { + placement: 'left', + visible: 'touch' + }; + anchors.add('article h2:not(.no-anchor), article h3:not(.no-anchor), article h4:not(.no-anchor)'); + })(); + + // Open links to different host in a new window. + function renderLinks() { + if ($("meta[property='docfx:newtab']").attr("content") === "true") { + $(document.links).filter(function () { + return this.hostname !== window.location.hostname; + }).attr('target', '_blank'); + } + } + + // Enable highlight.js + function highlight() { + $('pre code').each(function (i, block) { + hljs.highlightBlock(block); + }); + $('pre code[highlight-lines]').each(function (i, block) { + if (block.innerHTML === "") return; + var lines = block.innerHTML.split('\n'); + + queryString = block.getAttribute('highlight-lines'); + if (!queryString) return; + + var ranges = queryString.split(','); + for (var j = 0, range; range = ranges[j++];) { + var found = range.match(/^(\d+)\-(\d+)?$/); + if (found) { + // consider region as `{startlinenumber}-{endlinenumber}`, in which {endlinenumber} is optional + var start = +found[1]; + var end = +found[2]; + if (isNaN(end) || end > lines.length) { + end = lines.length; + } + } else { + // consider region as a sigine line number + if (isNaN(range)) continue; + var start = +range; + var end = start; + } + if (start <= 0 || end <= 0 || start > end || start > lines.length) { + // skip current region if invalid + continue; + } + lines[start - 1] = '' + lines[start - 1]; + lines[end - 1] = lines[end - 1] + ''; + } + + block.innerHTML = lines.join('\n'); + }); + } + + // Support full-text-search + function enableSearch() { + var query; + var relHref = $("meta[property='docfx\\:rel']").attr("content"); + if (typeof relHref === 'undefined') { + return; + } + try { + var worker = new Worker(relHref + 'styles/search-worker.js'); + if (!worker && !window.worker) { + localSearch(); + } else { + webWorkerSearch(); + } + + renderSearchBox(); + highlightKeywords(); + addSearchEvent(); + } catch (e) { + console.error(e); + } + + //Adjust the position of search box in navbar + function renderSearchBox() { + autoCollapse(); + $(window).on('resize', autoCollapse); + $(document).on('click', '.navbar-collapse.in', function (e) { + if ($(e.target).is('a')) { + $(this).collapse('hide'); + } + }); + + function autoCollapse() { + var navbar = $('#autocollapse'); + if (navbar.height() === null) { + setTimeout(autoCollapse, 300); + } + navbar.removeClass(collapsed); + if (navbar.height() > 60) { + navbar.addClass(collapsed); + } + } + } + + // Search factory + function localSearch() { + console.log("using local search"); + var lunrIndex = lunr(function () { + this.ref('href'); + this.field('title', { boost: 50 }); + this.field('keywords', { boost: 20 }); + }); + lunr.tokenizer.seperator = /[\s\-\.]+/; + var searchData = {}; + var searchDataRequest = new XMLHttpRequest(); + + var indexPath = relHref + "index.json"; + if (indexPath) { + searchDataRequest.open('GET', indexPath); + searchDataRequest.onload = function () { + if (this.status != 200) { + return; + } + searchData = JSON.parse(this.responseText); + for (var prop in searchData) { + if (searchData.hasOwnProperty(prop)) { + lunrIndex.add(searchData[prop]); + } + } + } + searchDataRequest.send(); + } + + $("body").bind("queryReady", function () { + var hits = lunrIndex.search(query); + var results = []; + hits.forEach(function (hit) { + var item = searchData[hit.ref]; + results.push({ 'href': item.href, 'title': item.title, 'keywords': item.keywords }); + }); + handleSearchResults(results); + }); + } + + function webWorkerSearch() { + console.log("using Web Worker"); + var indexReady = $.Deferred(); + + worker.onmessage = function (oEvent) { + switch (oEvent.data.e) { + case 'index-ready': + indexReady.resolve(); + break; + case 'query-ready': + var hits = oEvent.data.d; + handleSearchResults(hits); + break; + } + } + + indexReady.promise().done(function () { + $("body").bind("queryReady", function () { + worker.postMessage({ q: query }); + }); + if (query && (query.length >= 3)) { + worker.postMessage({ q: query }); + } + }); + } + + // Highlight the searching keywords + function highlightKeywords() { + var q = url('?q'); + if (q !== null) { + var keywords = q.split("%20"); + keywords.forEach(function (keyword) { + if (keyword !== "") { + $('.data-searchable *').mark(keyword); + $('article *').mark(keyword); + } + }); + } + } + + function addSearchEvent() { + $('body').bind("searchEvent", function () { + $('#search-query').keypress(function (e) { + return e.which !== 13; + }); + + $('#search-query').keyup(function () { + query = $(this).val(); + if (query.length < 0) { + flipContents("show"); + } else { + flipContents("hide"); + $("body").trigger("queryReady"); + $('#search-results>.search-list').text('Search Results for "' + query + '"'); + } + }).off("keydown"); + }); + } + + function flipContents(action) { + if (action === "show") { + $('.hide-when-search').show(); + $('#search-results').hide(); + } else { + $('.hide-when-search').hide(); + $('#search-results').show(); + } + } + + function relativeUrlToAbsoluteUrl(currentUrl, relativeUrl) { + var currentItems = currentUrl.split(/\/+/); + var relativeItems = relativeUrl.split(/\/+/); + var depth = currentItems.length - 1; + var items = []; + for (var i = 0; i < relativeItems.length; i++) { + if (relativeItems[i] === '..') { + depth--; + } else if (relativeItems[i] !== '.') { + items.push(relativeItems[i]); + } + } + return currentItems.slice(0, depth).concat(items).join('/'); + } + + function extractContentBrief(content) { + var briefOffset = 512; + var words = query.split(/\s+/g); + var queryIndex = content.indexOf(words[0]); + var briefContent; + if (queryIndex > briefOffset) { + return "..." + content.slice(queryIndex - briefOffset, queryIndex + briefOffset) + "..."; + } else if (queryIndex <= briefOffset) { + return content.slice(0, queryIndex + briefOffset) + "..."; + } + } + + function handleSearchResults(hits) { + console.log(hits); + var numPerPage = 9999; + $('#pagination').empty(); + $('#pagination').removeData("twbs-pagination"); + if (hits.length === 0) { + $('#search-results>.sr-items').html('

No results found

'); + } else { + $('#pagination').twbsPagination({ + totalPages: Math.ceil(hits.length / numPerPage), + visiblePages: 5, + onPageClick: function (event, page) { + var start = (page - 1) * numPerPage; + var curHits = hits.slice(start, start + numPerPage); + $('#search-results>.sr-items').empty().append( + curHits.map(function (hit) { + var currentUrl = window.location.href; + var itemRawHref = relativeUrlToAbsoluteUrl(currentUrl, relHref + hit.href); + var itemHref = relHref + hit.href + "?q=" + query; + var itemTitle = hit.title; + var itemBrief = extractContentBrief(hit.keywords); + + var itemNode = $('
').attr('class', 'sr-item'); + var itemTitleNode = $('
').attr('class', 'item-title').append($('').attr('href', itemHref).attr("target", "_blank").text(itemTitle)); + var itemHrefNode = $('
').attr('class', 'item-href').text(itemRawHref); + var itemBriefNode = $('
').attr('class', 'item-brief').text(itemBrief); + itemNode.append(itemTitleNode).append(itemHrefNode).append(itemBriefNode); + return itemNode; + }) + ); + query.split(/\s+/).forEach(function (word) { + if (word !== '') { + //$('#search-results>.sr-items *').mark(word); + } + }); + } + }); + } + } + }; + + // Update href in navbar + function renderNavbar() { + var navbar = $('#navbar ul')[0]; + if (typeof (navbar) === 'undefined') { + loadNavbar(); + } else { + $('#navbar ul a.active').parents('li').addClass(active); + renderBreadcrumb(); + } + + function loadNavbar() { + var navbarPath = $("meta[property='docfx\\:navrel']").attr("content"); + if (!navbarPath) { + return; + } + navbarPath = navbarPath.replace(/\\/g, '/'); + var tocPath = $("meta[property='docfx\\:tocrel']").attr("content") || ''; + if (tocPath) tocPath = tocPath.replace(/\\/g, '/'); + $.get(navbarPath, function (data) { + $(data).find("#toc>ul").appendTo("#navbar"); + if ($('#search-results').length !== 0) { + $('#search').show(); + $('body').trigger("searchEvent"); + } + var index = navbarPath.lastIndexOf('/'); + var navrel = ''; + if (index > -1) { + navrel = navbarPath.substr(0, index + 1); + } + $('#navbar>ul').addClass('navbar-nav'); + var currentAbsPath = util.getAbsolutePath(window.location.pathname); + // set active item + $('#navbar').find('a[href]').each(function (i, e) { + var href = $(e).attr("href"); + if (util.isRelativePath(href)) { + href = navrel + href; + $(e).attr("href", href); + + // TODO: currently only support one level navbar + var isActive = false; + var originalHref = e.name; + if (originalHref) { + originalHref = navrel + originalHref; + if (util.getDirectory(util.getAbsolutePath(originalHref)) === util.getDirectory(util.getAbsolutePath(tocPath))) { + isActive = true; + } + } else { + if (util.getAbsolutePath(href) === currentAbsPath) { + var dropdown = $(e).attr('data-toggle') == "dropdown" + if (!dropdown) { + isActive = true; + } + } + } + if (isActive) { + $(e).addClass(active); + } + } + }); + renderNavbar(); + }); + } + } + + function renderSidebar() { + var sidetoc = $('#sidetoggle .sidetoc')[0]; + if (typeof (sidetoc) === 'undefined') { + loadToc(); + } else { + registerTocEvents(); + if ($('footer').is(':visible')) { + $('.sidetoc').addClass('shiftup'); + } + + // Scroll to active item + var top = 0; + $('#toc a.active').parents('li').each(function (i, e) { + $(e).addClass(active).addClass(expanded); + $(e).children('a').addClass(active); + top += $(e).position().top; + }) + $('.sidetoc').scrollTop(top - 50); + + if ($('footer').is(':visible')) { + $('.sidetoc').addClass('shiftup'); + } + + renderBreadcrumb(); + } + + function registerTocEvents() { + $('.toc .nav > li > .expand-stub').click(function (e) { + $(e.target).parent().toggleClass(expanded); + }); + $('.toc .nav > li > .expand-stub + a:not([href])').click(function (e) { + $(e.target).parent().toggleClass(expanded); + }); + $('#toc_filter_input').on('input', function (e) { + var val = this.value; + if (val === '') { + // Clear 'filtered' class + $('#toc li').removeClass(filtered).removeClass(hide); + return; + } + + // Get leaf nodes + $('#toc li>a').filter(function (i, e) { + return $(e).siblings().length === 0 + }).each(function (i, anchor) { + var text = $(anchor).attr('title'); + var parent = $(anchor).parent(); + var parentNodes = parent.parents('ul>li'); + for (var i = 0; i < parentNodes.length; i++) { + var parentText = $(parentNodes[i]).children('a').attr('title'); + if (parentText) text = parentText + '.' + text; + }; + if (filterNavItem(text, val)) { + parent.addClass(show); + parent.removeClass(hide); + } else { + parent.addClass(hide); + parent.removeClass(show); + } + }); + $('#toc li>a').filter(function (i, e) { + return $(e).siblings().length > 0 + }).each(function (i, anchor) { + var parent = $(anchor).parent(); + if (parent.find('li.show').length > 0) { + parent.addClass(show); + parent.addClass(filtered); + parent.removeClass(hide); + } else { + parent.addClass(hide); + parent.removeClass(show); + parent.removeClass(filtered); + } + }) + + function filterNavItem(name, text) { + if (!text) return true; + if (name && name.toLowerCase().indexOf(text.toLowerCase()) > -1) return true; + return false; + } + }); + } + + function loadToc() { + var tocPath = $("meta[property='docfx\\:tocrel']").attr("content"); + if (!tocPath) { + return; + } + tocPath = tocPath.replace(/\\/g, '/'); + $('#sidetoc').load(tocPath + " #sidetoggle > div", function () { + var index = tocPath.lastIndexOf('/'); + var tocrel = ''; + if (index > -1) { + tocrel = tocPath.substr(0, index + 1); + } + var currentHref = util.getAbsolutePath(window.location.pathname); + $('#sidetoc').find('a[href]').each(function (i, e) { + var href = $(e).attr("href"); + if (util.isRelativePath(href)) { + href = tocrel + href; + $(e).attr("href", href); + } + + if (util.getAbsolutePath(e.href) === currentHref) { + $(e).addClass(active); + } + + $(e).breakWord(); + }); + + renderSidebar(); + }); + } + } + + function renderBreadcrumb() { + var breadcrumb = []; + $('#navbar a.active').each(function (i, e) { + breadcrumb.push({ + href: e.href, + name: e.innerHTML + }); + }) + $('#toc a.active').each(function (i, e) { + breadcrumb.push({ + href: e.href, + name: e.innerHTML + }); + }) + + var html = util.formList(breadcrumb, 'breadcrumb'); + $('#breadcrumb').html(html); + } + + //Setup Affix + function renderAffix() { + var hierarchy = getHierarchy(); + if (hierarchy && hierarchy.length > 0) { + var html = '
In This Article
' + html += util.formList(hierarchy, ['nav', 'bs-docs-sidenav']); + $("#affix").empty().append(html); + if ($('footer').is(':visible')) { + $(".sideaffix").css("bottom", "70px"); + } + $('#affix a').click(function() { + var scrollspy = $('[data-spy="scroll"]').data()['bs.scrollspy']; + var target = e.target.hash; + if (scrollspy && target) { + scrollspy.activate(target); + } + }); + } + + function getHierarchy() { + // supported headers are h1, h2, h3, and h4 + var $headers = $($.map(['h1', 'h2', 'h3', 'h4'], function (h) { return ".article article " + h; }).join(", ")); + + // a stack of hierarchy items that are currently being built + var stack = []; + $headers.each(function (i, e) { + if (!e.id) { + return; + } + + var item = { + name: htmlEncode($(e).text()), + href: "#" + e.id, + items: [] + }; + + if (!stack.length) { + stack.push({ type: e.tagName, siblings: [item] }); + return; + } + + var frame = stack[stack.length - 1]; + if (e.tagName === frame.type) { + frame.siblings.push(item); + } else if (e.tagName[1] > frame.type[1]) { + // we are looking at a child of the last element of frame.siblings. + // push a frame onto the stack. After we've finished building this item's children, + // we'll attach it as a child of the last element + stack.push({ type: e.tagName, siblings: [item] }); + } else { // e.tagName[1] < frame.type[1] + // we are looking at a sibling of an ancestor of the current item. + // pop frames from the stack, building items as we go, until we reach the correct level at which to attach this item. + while (e.tagName[1] < stack[stack.length - 1].type[1]) { + buildParent(); + } + if (e.tagName === stack[stack.length - 1].type) { + stack[stack.length - 1].siblings.push(item); + } else { + stack.push({ type: e.tagName, siblings: [item] }); + } + } + }); + while (stack.length > 1) { + buildParent(); + } + + function buildParent() { + var childrenToAttach = stack.pop(); + var parentFrame = stack[stack.length - 1]; + var parent = parentFrame.siblings[parentFrame.siblings.length - 1]; + $.each(childrenToAttach.siblings, function (i, child) { + parent.items.push(child); + }); + } + if (stack.length > 0) { + + var topLevel = stack.pop().siblings; + if (topLevel.length === 1) { // if there's only one topmost header, dump it + return topLevel[0].items; + } + return topLevel; + } + return undefined; + } + + function htmlEncode(str) { + if (!str) return str; + return str + .replace(/&/g, '&') + .replace(/"/g, '"') + .replace(/'/g, ''') + .replace(//g, '>'); + } + + function htmlDecode(value) { + if (!str) return str; + return value + .replace(/"/g, '"') + .replace(/'/g, "'") + .replace(/</g, '<') + .replace(/>/g, '>') + .replace(/&/g, '&'); + } + + function cssEscape(str) { + // see: http://stackoverflow.com/questions/2786538/need-to-escape-a-special-character-in-a-jquery-selector-string#answer-2837646 + if (!str) return str; + return str + .replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, "\\$&"); + } + } + + // Show footer + function renderFooter() { + initFooter(); + $(window).on("scroll", showFooterCore); + + function initFooter() { + if (needFooter()) { + shiftUpBottomCss(); + $("footer").show(); + } else { + resetBottomCss(); + $("footer").hide(); + } + } + + function showFooterCore() { + if (needFooter()) { + shiftUpBottomCss(); + $("footer").fadeIn(); + } else { + resetBottomCss(); + $("footer").fadeOut(); + } + } + + function needFooter() { + var scrollHeight = $(document).height(); + var scrollPosition = $(window).height() + $(window).scrollTop(); + return (scrollHeight - scrollPosition) < 1; + } + + function resetBottomCss() { + $(".sidetoc").removeClass("shiftup"); + $(".sideaffix").removeClass("shiftup"); + } + + function shiftUpBottomCss() { + $(".sidetoc").addClass("shiftup"); + $(".sideaffix").addClass("shiftup"); + } + } + + function renderLogo() { + // For LOGO SVG + // Replace SVG with inline SVG + // http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement + jQuery('img.svg').each(function () { + var $img = jQuery(this); + var imgID = $img.attr('id'); + var imgClass = $img.attr('class'); + var imgURL = $img.attr('src'); + + jQuery.get(imgURL, function (data) { + // Get the SVG tag, ignore the rest + var $svg = jQuery(data).find('svg'); + + // Add replaced image's ID to the new SVG + if (typeof imgID !== 'undefined') { + $svg = $svg.attr('id', imgID); + } + // Add replaced image's classes to the new SVG + if (typeof imgClass !== 'undefined') { + $svg = $svg.attr('class', imgClass + ' replaced-svg'); + } + + // Remove any invalid XML tags as per http://validator.w3.org + $svg = $svg.removeAttr('xmlns:a'); + + // Replace image with new SVG + $img.replaceWith($svg); + + }, 'xml'); + }); + } + + function renderTabs() { + var contentAttrs = { + id: 'data-bi-id', + name: 'data-bi-name', + type: 'data-bi-type' + }; + + var Tab = (function () { + function Tab(li, a, section) { + this.li = li; + this.a = a; + this.section = section; + } + Object.defineProperty(Tab.prototype, "tabIds", { + get: function () { return this.a.getAttribute('data-tab').split(' '); }, + enumerable: true, + configurable: true + }); + Object.defineProperty(Tab.prototype, "condition", { + get: function () { return this.a.getAttribute('data-condition'); }, + enumerable: true, + configurable: true + }); + Object.defineProperty(Tab.prototype, "visible", { + get: function () { return !this.li.hasAttribute('hidden'); }, + set: function (value) { + if (value) { + this.li.removeAttribute('hidden'); + this.li.removeAttribute('aria-hidden'); + } + else { + this.li.setAttribute('hidden', 'hidden'); + this.li.setAttribute('aria-hidden', 'true'); + } + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(Tab.prototype, "selected", { + get: function () { return !this.section.hasAttribute('hidden'); }, + set: function (value) { + if (value) { + this.a.setAttribute('aria-selected', 'true'); + this.a.tabIndex = 0; + this.section.removeAttribute('hidden'); + this.section.removeAttribute('aria-hidden'); + } + else { + this.a.setAttribute('aria-selected', 'false'); + this.a.tabIndex = -1; + this.section.setAttribute('hidden', 'hidden'); + this.section.setAttribute('aria-hidden', 'true'); + } + }, + enumerable: true, + configurable: true + }); + Tab.prototype.focus = function () { + this.a.focus(); + }; + return Tab; + }()); + + initTabs(document.body); + + function initTabs(container) { + var queryStringTabs = readTabsQueryStringParam(); + var elements = container.querySelectorAll('.tabGroup'); + var state = { groups: [], selectedTabs: [] }; + for (var i = 0; i < elements.length; i++) { + var group = initTabGroup(elements.item(i)); + if (!group.independent) { + updateVisibilityAndSelection(group, state); + state.groups.push(group); + } + } + container.addEventListener('click', function (event) { return handleClick(event, state); }); + if (state.groups.length === 0) { + return state; + } + selectTabs(queryStringTabs, container); + updateTabsQueryStringParam(state); + notifyContentUpdated(); + return state; + } + + function initTabGroup(element) { + var group = { + independent: element.hasAttribute('data-tab-group-independent'), + tabs: [] + }; + var li = element.firstElementChild.firstElementChild; + while (li) { + var a = li.firstElementChild; + a.setAttribute(contentAttrs.name, 'tab'); + var dataTab = a.getAttribute('data-tab').replace(/\+/g, ' '); + a.setAttribute('data-tab', dataTab); + var section = element.querySelector("[id=\"" + a.getAttribute('aria-controls') + "\"]"); + var tab = new Tab(li, a, section); + group.tabs.push(tab); + li = li.nextElementSibling; + } + element.setAttribute(contentAttrs.name, 'tab-group'); + element.tabGroup = group; + return group; + } + + function updateVisibilityAndSelection(group, state) { + var anySelected = false; + var firstVisibleTab; + for (var _i = 0, _a = group.tabs; _i < _a.length; _i++) { + var tab = _a[_i]; + tab.visible = tab.condition === null || state.selectedTabs.indexOf(tab.condition) !== -1; + if (tab.visible) { + if (!firstVisibleTab) { + firstVisibleTab = tab; + } + } + tab.selected = tab.visible && arraysIntersect(state.selectedTabs, tab.tabIds); + anySelected = anySelected || tab.selected; + } + if (!anySelected) { + for (var _b = 0, _c = group.tabs; _b < _c.length; _b++) { + var tabIds = _c[_b].tabIds; + for (var _d = 0, tabIds_1 = tabIds; _d < tabIds_1.length; _d++) { + var tabId = tabIds_1[_d]; + var index = state.selectedTabs.indexOf(tabId); + if (index === -1) { + continue; + } + state.selectedTabs.splice(index, 1); + } + } + var tab = firstVisibleTab; + tab.selected = true; + state.selectedTabs.push(tab.tabIds[0]); + } + } + + function getTabInfoFromEvent(event) { + if (!(event.target instanceof HTMLElement)) { + return null; + } + var anchor = event.target.closest('a[data-tab]'); + if (anchor === null) { + return null; + } + var tabIds = anchor.getAttribute('data-tab').split(' '); + var group = anchor.parentElement.parentElement.parentElement.tabGroup; + if (group === undefined) { + return null; + } + return { tabIds: tabIds, group: group, anchor: anchor }; + } + + function handleClick(event, state) { + var info = getTabInfoFromEvent(event); + if (info === null) { + return; + } + event.preventDefault(); + info.anchor.href = 'javascript:'; + setTimeout(function () { return info.anchor.href = '#' + info.anchor.getAttribute('aria-controls'); }); + var tabIds = info.tabIds, group = info.group; + var originalTop = info.anchor.getBoundingClientRect().top; + if (group.independent) { + for (var _i = 0, _a = group.tabs; _i < _a.length; _i++) { + var tab = _a[_i]; + tab.selected = arraysIntersect(tab.tabIds, tabIds); + } + } + else { + if (arraysIntersect(state.selectedTabs, tabIds)) { + return; + } + var previousTabId = group.tabs.filter(function (t) { return t.selected; })[0].tabIds[0]; + state.selectedTabs.splice(state.selectedTabs.indexOf(previousTabId), 1, tabIds[0]); + for (var _b = 0, _c = state.groups; _b < _c.length; _b++) { + var group_1 = _c[_b]; + updateVisibilityAndSelection(group_1, state); + } + updateTabsQueryStringParam(state); + } + notifyContentUpdated(); + var top = info.anchor.getBoundingClientRect().top; + if (top !== originalTop && event instanceof MouseEvent) { + window.scrollTo(0, window.pageYOffset + top - originalTop); + } + } + + function selectTabs(tabIds) { + for (var _i = 0, tabIds_1 = tabIds; _i < tabIds_1.length; _i++) { + var tabId = tabIds_1[_i]; + var a = document.querySelector(".tabGroup > ul > li > a[data-tab=\"" + tabId + "\"]:not([hidden])"); + if (a === null) { + return; + } + a.dispatchEvent(new CustomEvent('click', { bubbles: true })); + } + } + + function readTabsQueryStringParam() { + var qs = parseQueryString(); + var t = qs.tabs; + if (t === undefined || t === '') { + return []; + } + return t.split(','); + } + + function updateTabsQueryStringParam(state) { + var qs = parseQueryString(); + qs.tabs = state.selectedTabs.join(); + var url = location.protocol + "//" + location.host + location.pathname + "?" + toQueryString(qs) + location.hash; + if (location.href === url) { + return; + } + history.replaceState({}, document.title, url); + } + + function toQueryString(args) { + var parts = []; + for (var name_1 in args) { + if (args.hasOwnProperty(name_1) && args[name_1] !== '' && args[name_1] !== null && args[name_1] !== undefined) { + parts.push(encodeURIComponent(name_1) + '=' + encodeURIComponent(args[name_1])); + } + } + return parts.join('&'); + } + + function parseQueryString(queryString) { + var match; + var pl = /\+/g; + var search = /([^&=]+)=?([^&]*)/g; + var decode = function (s) { return decodeURIComponent(s.replace(pl, ' ')); }; + if (queryString === undefined) { + queryString = ''; + } + queryString = queryString.substring(1); + var urlParams = {}; + while (match = search.exec(queryString)) { + urlParams[decode(match[1])] = decode(match[2]); + } + return urlParams; + } + + function arraysIntersect(a, b) { + for (var _i = 0, a_1 = a; _i < a_1.length; _i++) { + var itemA = a_1[_i]; + for (var _a = 0, b_1 = b; _a < b_1.length; _a++) { + var itemB = b_1[_a]; + if (itemA === itemB) { + return true; + } + } + } + return false; + } + + function notifyContentUpdated() { + // Dispatch this event when needed + // window.dispatchEvent(new CustomEvent('content-update')); + } + } + + function utility() { + this.getAbsolutePath = getAbsolutePath; + this.isRelativePath = isRelativePath; + this.isAbsolutePath = isAbsolutePath; + this.getDirectory = getDirectory; + this.formList = formList; + + function getAbsolutePath(href) { + // Use anchor to normalize href + var anchor = $('')[0]; + // Ignore protocal, remove search and query + return anchor.host + anchor.pathname; + } + + function isRelativePath(href) { + if (href === undefined || href === '' || href[0] === '/') { + return false; + } + return !isAbsolutePath(href); + } + + function isAbsolutePath(href) { + return (/^(?:[a-z]+:)?\/\//i).test(href); + } + + function getDirectory(href) { + if (!href) return ''; + var index = href.lastIndexOf('/'); + if (index == -1) return ''; + if (index > -1) { + return href.substr(0, index); + } + } + + function formList(item, classes) { + var level = 1; + var model = { + items: item + }; + var cls = [].concat(classes).join(" "); + return getList(model, cls); + + function getList(model, cls) { + if (!model || !model.items) return null; + var l = model.items.length; + if (l === 0) return null; + var html = '
    '; + level++; + for (var i = 0; i < l; i++) { + var item = model.items[i]; + var href = item.href; + var name = item.name; + if (!name) continue; + html += href ? '
  • ' + name + '' : '
  • ' + name; + html += getList(item, cls) || ''; + html += '
    • '; + } + html += '
'; + return html; + } + } + + /** + * Add into long word. + * @param {String} text - The word to break. It should be in plain text without HTML tags. + */ + function breakPlainText(text) { + if (!text) return text; + return text.replace(/([a-z])([A-Z])|(\.)(\w)/g, '$1$3$2$4') + } + + /** + * Add into long word. The jQuery element should contain no html tags. + * If the jQuery element contains tags, this function will not change the element. + */ + $.fn.breakWord = function () { + if (this.html() == this.text()) { + this.html(function (index, text) { + return breakPlainText(text); + }) + } + return this; + } + } + + // adjusted from https://stackoverflow.com/a/13067009/1523776 + function workAroundFixedHeaderForAnchors() { + var HISTORY_SUPPORT = !!(history && history.pushState); + var ANCHOR_REGEX = /^#[^ ]+$/; + + function getFixedOffset() { + return $('header').first().height(); + } + + /** + * If the provided href is an anchor which resolves to an element on the + * page, scroll to it. + * @param {String} href + * @return {Boolean} - Was the href an anchor. + */ + function scrollIfAnchor(href, pushToHistory) { + var match, rect, anchorOffset; + + if (!ANCHOR_REGEX.test(href)) { + return false; + } + + match = document.getElementById(href.slice(1)); + + if (match) { + rect = match.getBoundingClientRect(); + anchorOffset = window.pageYOffset + rect.top - getFixedOffset(); + window.scrollTo(window.pageXOffset, anchorOffset); + + // Add the state to history as-per normal anchor links + if (HISTORY_SUPPORT && pushToHistory) { + history.pushState({}, document.title, location.pathname + href); + } + } + + return !!match; + } + + /** + * Attempt to scroll to the current location's hash. + */ + function scrollToCurrent() { + scrollIfAnchor(window.location.hash); + } + + /** + * If the click event's target was an anchor, fix the scroll position. + */ + function delegateAnchors(e) { + var elem = e.target; + + if (scrollIfAnchor(elem.getAttribute('href'), true)) { + e.preventDefault(); + } + } + + $(window).on('hashchange', scrollToCurrent); + // Exclude tabbed content case + $('a:not([data-tab])').click(delegateAnchors); + scrollToCurrent(); + } +}); diff --git a/doc/templates/uno/toc.html.tmpl b/doc/templates/uno/toc.html.tmpl new file mode 100644 index 000000000000..26cb8ad6f7fd --- /dev/null +++ b/doc/templates/uno/toc.html.tmpl @@ -0,0 +1,21 @@ +{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}} + +
+
+ {{^_disableSideFilter}} +
+
+ + +
+
+ {{/_disableSideFilter}} +
+
+ {{^leaf}} + {{>partials/li}} + {{/leaf}} +
+
+
+
\ No newline at end of file From 5e2642597a9068d1b3af8688b4585c7d8da4afe0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonathan=20Bleau=20Gu=C3=A9rette?= Date: Mon, 5 Apr 2021 16:05:38 -0400 Subject: [PATCH 4/5] docs: full-text search front --- doc/templates/uno/layout/_master.tmpl | 7 +- doc/templates/uno/styles/docfx.js | 97 ++++++++++--------------- doc/templates/uno/styles/main.css | 2 +- doc/templates/uno/styles/scss/main.scss | 71 +++++++++++++++++- doc/templates/uno/toc.html.tmpl | 12 +-- 5 files changed, 115 insertions(+), 74 deletions(-) diff --git a/doc/templates/uno/layout/_master.tmpl b/doc/templates/uno/layout/_master.tmpl index 60d3ec4b3e4b..29a545a485d2 100644 --- a/doc/templates/uno/layout/_master.tmpl +++ b/doc/templates/uno/layout/_master.tmpl @@ -19,12 +19,7 @@ {{>partials/breadcrumb}} {{/_disableBreadcrumb}} - {{#_enableSearch}} -
- {{>partials/searchResults}} -
- {{/_enableSearch}} -
+
{{^_disableToc}} {{>partials/toc}}
diff --git a/doc/templates/uno/styles/docfx.js b/doc/templates/uno/styles/docfx.js index 5326339d60f5..e284e4040f1f 100644 --- a/doc/templates/uno/styles/docfx.js +++ b/doc/templates/uno/styles/docfx.js @@ -133,7 +133,6 @@ $(function () { } else { webWorkerSearch(); } - renderSearchBox(); highlightKeywords(); addSearchEvent(); @@ -192,7 +191,7 @@ $(function () { searchDataRequest.send(); } - $("body").bind("queryReady", function () { + $("body").on("queryReady", function () { var hits = lunrIndex.search(query); var results = []; hits.forEach(function (hit) { @@ -204,7 +203,6 @@ $(function () { } function webWorkerSearch() { - console.log("using Web Worker"); var indexReady = $.Deferred(); worker.onmessage = function (oEvent) { @@ -218,9 +216,8 @@ $(function () { break; } } - indexReady.promise().done(function () { - $("body").bind("queryReady", function () { + $("body").on("query-ready", function () { worker.postMessage({ q: query }); }); if (query && (query.length >= 3)) { @@ -244,34 +241,19 @@ $(function () { } function addSearchEvent() { - $('body').bind("searchEvent", function () { + $('body').on("searchEvent", function () { $('#search-query').keypress(function (e) { return e.which !== 13; }); - $('#search-query').keyup(function () { + $('#search-query').on("keyup", function () { query = $(this).val(); - if (query.length < 0) { - flipContents("show"); - } else { - flipContents("hide"); - $("body").trigger("queryReady"); + $("body").trigger("query-ready"); $('#search-results>.search-list').text('Search Results for "' + query + '"'); - } }).off("keydown"); }); } - function flipContents(action) { - if (action === "show") { - $('.hide-when-search').show(); - $('#search-results').hide(); - } else { - $('.hide-when-search').hide(); - $('#search-results').show(); - } - } - function relativeUrlToAbsoluteUrl(currentUrl, relativeUrl) { var currentItems = currentUrl.split(/\/+/); var relativeItems = relativeUrl.split(/\/+/); @@ -288,7 +270,7 @@ $(function () { } function extractContentBrief(content) { - var briefOffset = 512; + var briefOffset = 50; var words = query.split(/\s+/g); var queryIndex = content.indexOf(words[0]); var briefContent; @@ -300,40 +282,29 @@ $(function () { } function handleSearchResults(hits) { - console.log(hits); - var numPerPage = 9999; - $('#pagination').empty(); - $('#pagination').removeData("twbs-pagination"); if (hits.length === 0) { $('#search-results>.sr-items').html('

No results found

'); } else { - $('#pagination').twbsPagination({ - totalPages: Math.ceil(hits.length / numPerPage), - visiblePages: 5, - onPageClick: function (event, page) { - var start = (page - 1) * numPerPage; - var curHits = hits.slice(start, start + numPerPage); - $('#search-results>.sr-items').empty().append( - curHits.map(function (hit) { - var currentUrl = window.location.href; - var itemRawHref = relativeUrlToAbsoluteUrl(currentUrl, relHref + hit.href); - var itemHref = relHref + hit.href + "?q=" + query; - var itemTitle = hit.title; - var itemBrief = extractContentBrief(hit.keywords); - - var itemNode = $('
').attr('class', 'sr-item'); - var itemTitleNode = $('
').attr('class', 'item-title').append($('').attr('href', itemHref).attr("target", "_blank").text(itemTitle)); - var itemHrefNode = $('
').attr('class', 'item-href').text(itemRawHref); - var itemBriefNode = $('
').attr('class', 'item-brief').text(itemBrief); - itemNode.append(itemTitleNode).append(itemHrefNode).append(itemBriefNode); - return itemNode; - }) - ); - query.split(/\s+/).forEach(function (word) { - if (word !== '') { - //$('#search-results>.sr-items *').mark(word); - } - }); + $('#search-results>.sr-items').empty().append( + hits.slice(0,5).map(function (hit) { + var currentUrl = window.location.href; + var itemRawHref = relativeUrlToAbsoluteUrl(currentUrl, relHref + hit.href); + var itemHref = relHref + hit.href + "?q=" + query; + var itemTitle = hit.title; + var itemBrief = extractContentBrief(hit.keywords); + + var itemNode = $('').attr('class', 'sr-item').attr('href', itemHref); + var itemTitleNode = $('
').attr('class', 'item-title').text(itemTitle); + var itemBriefNode = $('
').attr('class', 'item-brief').text(itemBrief); + itemNode.append(itemTitleNode).append(itemBriefNode); + + return itemNode; + }) + ); + $('#search-results').show(); + query.split(/\s+/).forEach(function (word) { + if (word !== '') { + $('#search-results>.sr-items *').mark(word); } }); } @@ -360,10 +331,6 @@ $(function () { if (tocPath) tocPath = tocPath.replace(/\\/g, '/'); $.get(navbarPath, function (data) { $(data).find("#toc>ul").appendTo("#navbar"); - if ($('#search-results').length !== 0) { - $('#search').show(); - $('body').trigger("searchEvent"); - } var index = navbarPath.lastIndexOf('/'); var navrel = ''; if (index > -1) { @@ -515,6 +482,18 @@ $(function () { }); renderSidebar(); + if ($('#search-results').length !== 0) { + $('#search').show(); + $('body').trigger("searchEvent"); + } + // if the target of the click isn't the container nor a descendant of the container + $('body').mouseup(function (e) { + if (!$('#search-results').is(e.target) && $('#search-results').has(e.target).length === 0) + { + $('#search-results').hide(); + } + }); + }); } } diff --git a/doc/templates/uno/styles/main.css b/doc/templates/uno/styles/main.css index 5eeca410d7ca..ac1f1a359f2f 100644 --- a/doc/templates/uno/styles/main.css +++ b/doc/templates/uno/styles/main.css @@ -1 +1 @@ -@import url("https://fonts.googleapis.com/css?family=Open+Sans:500,600,700,800,400italic,700italic,400");@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css");body{font-family:'Open Sans', sans-serif;color:#242424}.row:before{content:none}.row:after{content:''}a{color:#159bff}a:hover,a:active{color:#242424}h1{font-size:44px;font-weight:600;text-transform:none}h2{font-size:36px;font-weight:600;text-transform:none}h3{font-size:30px;font-weight:600;text-transform:none}@media screen{pre{overflow:auto}pre>code{white-space:pre}}.body-content .article{margin-top:120px;margin-right:0}@media only screen and (max-width: 767px){.body-content .article{margin-top:180px !important}}.sidefilter{top:116px}.sidetoc{top:178px}.sidetoc .nav>li.active>a{color:#7a67f8}.sidetoc .nav>li.active>a:hover{color:#000}@media only screen and (max-width: 768px){.sidetoc .toc{margin-left:0}.sidetoc .toc ul{margin:0}.sidetoc .toc ul li a{margin:0}}@media only screen and (max-width: 767px){.sidenav{position:fixed;top:116px;width:100%;z-index:999}}@media screen and (min-width: 980px){.navbar-header{-ms-flex-item-align:center;align-self:center}}.navbar-header .navbar-toggle{border:none;height:18px;background:none;padding:0;margin:0}.navbar-header .navbar-toggle:hover,.navbar-header .navbar-toggle:focus{background:none}.navbar-header .navbar-toggle .icon-bar{background:#242424;width:20px}.navbar-header .navbar-toggle .icon-bar+.icon-bar{margin-top:3px}.navbar-header .navbar-toggle[aria-expanded='true'] .icon-bar{background:#7a67f8}@media (max-width: 979px){.navbar-header .navbar-toggle{margin-top:10px;display:block}}@media (max-width: 979px){.navbar-header{display:inline-block;vertical-align:middle;width:100%;line-height:auto}}.navbar:first-child{padding:10px 15px;vertical-align:middle;background:#ffffff;position:fixed;border-bottom:1px solid #f4f2f3;top:0;width:100%;z-index:9999}@media screen and (min-width: 980px){.navbar:first-child{height:75px;line-height:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:0 30px}}.navbar:first-child #logo{width:36px;margin-top:0;vertical-align:middle}@media screen and (min-width: 980px){.navbar:first-child #logo{width:43px}}.navbar:first-child .navbar-brand{height:auto}.subnav{position:fixed;top:75px;width:100%;z-index:999}#navbar{margin:0;margin-left:auto;padding:15px 0 0}#navbar>.navbar-nav{display:block}#navbar>.navbar-nav.hidden{display:none}#navbar .menu,#navbar .level1{-webkit-box-align:center;-ms-flex-align:center;align-items:center}#navbar .menu li,#navbar .level1 li{padding:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top;float:none}#navbar .menu li.has-children,#navbar .level1 li.has-children{position:relative}#navbar .menu li.has-children>a::after,#navbar .level1 li.has-children>a::after{display:inline-block;content:"\f107";font-family:'FontAwesome';font-style:normal;font-size:11.2px;font-weight:400;margin:0 0 0 8px}#navbar .menu li.has-children ul,#navbar .level1 li.has-children ul{text-align:left}@media screen and (min-width: 980px){#navbar .menu li.has-children ul,#navbar .level1 li.has-children ul{visibility:hidden;display:block;position:absolute;top:100%;left:0;z-index:778;padding:15px;-webkit-box-shadow:0px 8px 28px 0px rgba(0,0,0,0.08);box-shadow:0px 8px 28px 0px rgba(0,0,0,0.08);background-color:#fff}#navbar .menu li.has-children ul a,#navbar .level1 li.has-children ul a{text-transform:none}}#navbar .menu li.has-children:hover ul,#navbar .level1 li.has-children:hover ul{visibility:visible}#navbar .menu a,#navbar .level1 a{padding:0 16px;font-weight:600;height:28px;line-height:28px;font-size:14px;text-transform:uppercase;color:#3a3a3a;border-bottom:2px solid transparent;-webkit-transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out}#navbar .menu a:hover,#navbar .menu .docs a,#navbar .level1 a:hover,#navbar .level1 .docs a{background:none;border-color:#7a67f8}#navbar .menu .get-started-btn a,#navbar .menu a[title="Get Started"],#navbar .level1 .get-started-btn a,#navbar .level1 a[title="Get Started"]{background-color:#7a67f8;border:0;border-radius:8px;-webkit-box-sizing:content-box;box-sizing:content-box;color:#fff;cursor:pointer;display:inline-block;font-family:'Open Sans', sans-serif;font-size:18px;font-weight:700;height:27px;letter-spacing:0.3px;line-height:27px;margin-bottom:0px;margin-left:44px;padding-bottom:8px;padding-left:32px;padding-right:32px;padding-top:8px;text-align:center;text-transform:none;-webkit-transition-delay:0s, 0s, 0s;transition-delay:0s, 0s, 0s;-webkit-transition-duration:0.2s, 0.2s, 0.2s;transition-duration:0.2s, 0.2s, 0.2s;-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;-webkit-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;transition-timing-function:ease-in-out, ease-in-out, ease-in-out;width:auto}#navbar .menu .get-started-btn a:hover,#navbar .menu a[title="Get Started"]:hover,#navbar .level1 .get-started-btn a:hover,#navbar .level1 a[title="Get Started"]:hover{background:#654ff7}@media screen and (min-width: 980px){#navbar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}}@media (max-width: 979px){#navbar{position:fixed;top:57px;left:0;background:#ffffff;width:100%;margin:0;border:none;padding:0;text-align:left;-webkit-box-shadow:none;box-shadow:none}#navbar.collapse{display:none !important}#navbar.collapse.in{display:block !important}#navbar .menu,#navbar .level1{display:block;margin:0;padding:0 0 10px 0}#navbar .menu li,#navbar .level1 li{display:block;padding:0}#navbar .menu li.has-children,#navbar .level1 li.has-children{position:relative}#navbar .menu li.has-children>a::after,#navbar .level1 li.has-children>a::after{font-size:16px;font-weight:700;float:right}#navbar .menu li.has-children ul,#navbar .level1 li.has-children ul{max-height:0;overflow:hidden;visibility:visible;position:relative;padding:0;-webkit-transition:all .5s ease;transition:all .5s ease}#navbar .menu li.has-children ul a,#navbar .level1 li.has-children ul a{padding-left:40px}#navbar .menu li.has-children ul a::before,#navbar .level1 li.has-children ul a::before{content:"-";margin-right:5px}#navbar .menu li.has-children.open>a::after,#navbar .level1 li.has-children.open>a::after{display:inline-block;content:"\f106"}#navbar .menu li.has-children.open ul,#navbar .level1 li.has-children.open ul{max-height:500px}#navbar .menu .get-started-btn,#navbar .level1 .get-started-btn{padding:10px 25px}#navbar .menu .get-started-btn a,#navbar .level1 .get-started-btn a{margin:0}#navbar .menu a[title="Get Started"],#navbar .level1 a[title="Get Started"]{margin:10px 25px}#navbar .menu a,#navbar .level1 a{display:block;padding:10px 25px;border:none;text-transform:none;height:auto;line-height:1.4;font-size:16px;font-weight:700}}.front-page article section{margin-left:auto}.front-page p{margin:20px auto}.front-page .subnav,.front-page .sideaffix,.front-page .footer{display:none}.front-page .body-content{width:100%;padding:0;overflow:hidden}.front-page .body-content .article{margin:0 !important}.front-page .body-content .article>[class*='col']{width:auto;padding:0;float:none}.front-page .button{display:inline-block}.front-page .button a{display:inline-block;padding:7px 17px;font-size:20px;font-weight:bold;-webkit-box-shadow:0 2px 4px 0 rgba(31,31,31,0.25);box-shadow:0 2px 4px 0 rgba(31,31,31,0.25);border-radius:8px;-webkit-transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out;transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out}.front-page .button.white a{background:#fff;color:#242424}.front-page .button.white a:hover{background:#7a67f8;color:#fff}.front-page .button.turquoise a{background:#7a67f8;color:#fff}.front-page .button.turquoise a:hover{background:#654ff7}.front-page .intro{padding:100px 15px 60px;text-align:center;font-size:18px;position:relative}@media screen and (min-width: 768px){.front-page .intro{padding:200px 15px 120px}}.front-page .intro h1{font-size:36px;text-transform:none;font-weight:600;width:auto;max-width:100%;margin:0 auto;letter-spacing:normal}@media screen and (min-width: 768px){.front-page .intro h1{font-size:44px}}.front-page .intro p{width:100%;font-size:22px}.front-page .intro strong{font-weight:bold}.front-page .intro .button a{margin-top:20px}.front-page .headerboxes{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:40px 15px;background-color:#f4f2f3}@media screen and (min-width: 768px){.front-page .headerboxes{padding:80px 15px}}.front-page .headerboxes .headerbox{margin:40px auto}.front-page .headerboxes .headerbox-inner{padding:0;height:100%}.front-page .headerboxes h2{font-size:30px;font-weight:600;text-transform:none}.front-page .headerboxes h2 .anchorjs-link{display:none}.front-page .headerboxes p{font-size:16px;font-weight:600}.front-page .headerboxes .icon{margin:0} +@import url("https://fonts.googleapis.com/css?family=Open+Sans:500,600,700,800,400italic,700italic,400");@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css");body{font-family:'Open Sans', sans-serif;color:#242424}body mark{background:rgba(21,155,255,0.25)}.row:before{content:none}.row:after{content:''}a{color:#159bff}a:hover,a:active{color:#242424}h1{font-size:44px;font-weight:600;text-transform:none}h2{font-size:36px;font-weight:600;text-transform:none}h3{font-size:30px;font-weight:600;text-transform:none}@media screen{pre{overflow:auto}pre>code{white-space:pre}}.body-content .article{margin-top:120px;margin-right:0}@media only screen and (max-width: 767px){.body-content .article{margin-top:180px !important}}.sidefilter{top:116px;z-index:2;padding:10px}.sidefilter #search{display:block;border-radius:10px}.sidefilter #search input:focus{outline:none;border:2px solid #159bff}.sidefilter #search-query{border-radius:6px;height:45px;width:100%}.sidefilter #search-results{background:white;position:absolute;margin:5px 0 0 0;width:560px;border:1px solid rgba(0,0,0,0.15);border-radius:10px;-webkit-box-shadow:0 5px 10px 0 rgba(0,0,0,0.2);box-shadow:0 5px 10px 0 rgba(0,0,0,0.2)}.sidefilter #search-results .sr-items a{color:black}.sidefilter #search-results .sr-items a:first-child{border-radius:10px 10px 0 0}.sidefilter #search-results .sr-items a:last-child{border-radius:0 0 10px 10px;margin-bottom:0}.sidefilter #search-results .sr-items p{margin:10px}.sidefilter #search-results .sr-items .sr-item{display:block;padding:15px;margin-bottom:10px}.sidefilter #search-results .sr-items .sr-item:hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(21,155,255,0.11)), to(rgba(21,155,255,0.11))),-webkit-gradient(linear, left top, left bottom, from(rgba(21,155,255,0.11)), to(rgba(21,155,255,0.11)));background-image:linear-gradient(to bottom, rgba(21,155,255,0.11) 0%, rgba(21,155,255,0.11) 100%),linear-gradient(to bottom, rgba(21,155,255,0.11) 0%, rgba(21,155,255,0.11) 100%)}.sidefilter #search-results .sr-items .item-title{font-size:16px;font-weight:bold}.sidefilter #search-results .sr-items .item-brief{font-size:16px;color:black}.sidetoc{top:180px}.sidetoc .nav>li.active>a{color:#7a67f8}.sidetoc .nav>li.active>a:hover{color:#000}@media only screen and (max-width: 768px){.sidetoc .toc{margin-left:0}.sidetoc .toc ul{margin:0}.sidetoc .toc ul li a{margin:0}}@media only screen and (max-width: 767px){.sidenav{position:fixed;top:116px;width:100%;z-index:999}}@media screen and (min-width: 980px){.navbar-header{-ms-flex-item-align:center;align-self:center}}.navbar-header .navbar-toggle{border:none;height:18px;background:none;padding:0;margin:0}.navbar-header .navbar-toggle:hover,.navbar-header .navbar-toggle:focus{background:none}.navbar-header .navbar-toggle .icon-bar{background:#242424;width:20px}.navbar-header .navbar-toggle .icon-bar+.icon-bar{margin-top:3px}.navbar-header .navbar-toggle[aria-expanded='true'] .icon-bar{background:#7a67f8}@media (max-width: 979px){.navbar-header .navbar-toggle{margin-top:10px;display:block}}@media (max-width: 979px){.navbar-header{display:inline-block;vertical-align:middle;width:100%;line-height:auto}}.navbar:first-child{padding:10px 15px;vertical-align:middle;background:#ffffff;position:fixed;border-bottom:1px solid #f4f2f3;top:0;width:100%;z-index:9999}@media screen and (min-width: 980px){.navbar:first-child{height:75px;line-height:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:0 30px}}.navbar:first-child #logo{width:36px;margin-top:0;vertical-align:middle}@media screen and (min-width: 980px){.navbar:first-child #logo{width:43px}}.navbar:first-child .navbar-brand{height:auto}.subnav{position:fixed;top:75px;width:100%;z-index:999}#navbar{margin:0;margin-left:auto;padding:15px 0 0}#navbar>.navbar-nav{display:block}#navbar>.navbar-nav.hidden{display:none}#navbar .menu,#navbar .level1{-webkit-box-align:center;-ms-flex-align:center;align-items:center}#navbar .menu li,#navbar .level1 li{padding:0;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top;float:none}#navbar .menu li.has-children,#navbar .level1 li.has-children{position:relative}#navbar .menu li.has-children>a::after,#navbar .level1 li.has-children>a::after{display:inline-block;content:"\f107";font-family:'FontAwesome';font-style:normal;font-size:11.2px;font-weight:400;margin:0 0 0 8px}#navbar .menu li.has-children ul,#navbar .level1 li.has-children ul{text-align:left}@media screen and (min-width: 980px){#navbar .menu li.has-children ul,#navbar .level1 li.has-children ul{visibility:hidden;display:block;position:absolute;top:100%;left:0;z-index:778;padding:15px;-webkit-box-shadow:0px 8px 28px 0px rgba(0,0,0,0.08);box-shadow:0px 8px 28px 0px rgba(0,0,0,0.08);background-color:#fff}#navbar .menu li.has-children ul a,#navbar .level1 li.has-children ul a{text-transform:none}}#navbar .menu li.has-children:hover ul,#navbar .level1 li.has-children:hover ul{visibility:visible}#navbar .menu a,#navbar .level1 a{padding:0 16px;font-weight:600;height:28px;line-height:28px;font-size:14px;text-transform:uppercase;color:#3a3a3a;border-bottom:2px solid transparent;-webkit-transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out}#navbar .menu a:hover,#navbar .menu .docs a,#navbar .level1 a:hover,#navbar .level1 .docs a{background:none;border-color:#7a67f8}#navbar .menu .get-started-btn a,#navbar .menu a[title="Get Started"],#navbar .level1 .get-started-btn a,#navbar .level1 a[title="Get Started"]{background-color:#7a67f8;border:0;border-radius:8px;-webkit-box-sizing:content-box;box-sizing:content-box;color:#fff;cursor:pointer;display:inline-block;font-family:'Open Sans', sans-serif;font-size:18px;font-weight:700;height:27px;letter-spacing:0.3px;line-height:27px;margin-bottom:0px;margin-left:44px;padding-bottom:8px;padding-left:32px;padding-right:32px;padding-top:8px;text-align:center;text-transform:none;-webkit-transition-delay:0s, 0s, 0s;transition-delay:0s, 0s, 0s;-webkit-transition-duration:0.2s, 0.2s, 0.2s;transition-duration:0.2s, 0.2s, 0.2s;-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;-webkit-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;transition-timing-function:ease-in-out, ease-in-out, ease-in-out;width:auto}#navbar .menu .get-started-btn a:hover,#navbar .menu a[title="Get Started"]:hover,#navbar .level1 .get-started-btn a:hover,#navbar .level1 a[title="Get Started"]:hover{background:#654ff7}@media screen and (min-width: 980px){#navbar{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}}@media (max-width: 979px){#navbar{position:fixed;top:57px;left:0;background:#ffffff;width:100%;margin:0;border:none;padding:0;text-align:left;-webkit-box-shadow:none;box-shadow:none}#navbar.collapse{display:none !important}#navbar.collapse.in{display:block !important}#navbar .menu,#navbar .level1{display:block;margin:0;padding:0 0 10px 0}#navbar .menu li,#navbar .level1 li{display:block;padding:0}#navbar .menu li.has-children,#navbar .level1 li.has-children{position:relative}#navbar .menu li.has-children>a::after,#navbar .level1 li.has-children>a::after{font-size:16px;font-weight:700;float:right}#navbar .menu li.has-children ul,#navbar .level1 li.has-children ul{max-height:0;overflow:hidden;visibility:visible;position:relative;padding:0;-webkit-transition:all .5s ease;transition:all .5s ease}#navbar .menu li.has-children ul a,#navbar .level1 li.has-children ul a{padding-left:40px}#navbar .menu li.has-children ul a::before,#navbar .level1 li.has-children ul a::before{content:"-";margin-right:5px}#navbar .menu li.has-children.open>a::after,#navbar .level1 li.has-children.open>a::after{display:inline-block;content:"\f106"}#navbar .menu li.has-children.open ul,#navbar .level1 li.has-children.open ul{max-height:500px}#navbar .menu .get-started-btn,#navbar .level1 .get-started-btn{padding:10px 25px}#navbar .menu .get-started-btn a,#navbar .level1 .get-started-btn a{margin:0}#navbar .menu a[title="Get Started"],#navbar .level1 a[title="Get Started"]{margin:10px 25px}#navbar .menu a,#navbar .level1 a{display:block;padding:10px 25px;border:none;text-transform:none;height:auto;line-height:1.4;font-size:16px;font-weight:700}}.front-page article section{margin-left:auto}.front-page p{margin:20px auto}.front-page .subnav,.front-page .sideaffix,.front-page .footer{display:none}.front-page .body-content{width:100%;padding:0;overflow:hidden}.front-page .body-content .article{margin:0 !important}.front-page .body-content .article>[class*='col']{width:auto;padding:0;float:none}.front-page .button{display:inline-block}.front-page .button a{display:inline-block;padding:7px 17px;font-size:20px;font-weight:bold;-webkit-box-shadow:0 2px 4px 0 rgba(31,31,31,0.25);box-shadow:0 2px 4px 0 rgba(31,31,31,0.25);border-radius:8px;-webkit-transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out;transition:color 0.2s ease-in-out, background-color 0.2s ease-in-out}.front-page .button.white a{background:#fff;color:#242424}.front-page .button.white a:hover{background:#7a67f8;color:#fff}.front-page .button.turquoise a{background:#7a67f8;color:#fff}.front-page .button.turquoise a:hover{background:#654ff7}.front-page .intro{padding:100px 15px 60px;text-align:center;font-size:18px;position:relative}@media screen and (min-width: 768px){.front-page .intro{padding:200px 15px 120px}}.front-page .intro h1{font-size:36px;text-transform:none;font-weight:600;width:auto;max-width:100%;margin:0 auto;letter-spacing:normal}@media screen and (min-width: 768px){.front-page .intro h1{font-size:44px}}.front-page .intro p{width:100%;font-size:22px}.front-page .intro strong{font-weight:bold}.front-page .intro .button a{margin-top:20px}.front-page .headerboxes{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:40px 15px;background-color:#f4f2f3}@media screen and (min-width: 768px){.front-page .headerboxes{padding:80px 15px}}.front-page .headerboxes .headerbox{margin:40px auto}.front-page .headerboxes .headerbox-inner{padding:0;height:100%}.front-page .headerboxes h2{font-size:30px;font-weight:600;text-transform:none}.front-page .headerboxes h2 .anchorjs-link{display:none}.front-page .headerboxes p{font-size:16px;font-weight:600}.front-page .headerboxes .icon{margin:0} diff --git a/doc/templates/uno/styles/scss/main.scss b/doc/templates/uno/styles/scss/main.scss index 11c0fc4d639a..e1f1d01765ef 100644 --- a/doc/templates/uno/styles/scss/main.scss +++ b/doc/templates/uno/styles/scss/main.scss @@ -9,6 +9,9 @@ $dgray: #242424; body { font-family: 'Open Sans', sans-serif; color: $dgray; + mark { + background: rgba(21,155,255, 0.25); + } } .row { @@ -68,11 +71,75 @@ h3 { } .sidefilter { - top: 116px; + top: 116px; + z-index: 2; + padding: 10px; + + #search { + display: block; + border-radius: 10px; + input:focus { + outline: none; + border:2px solid #159bff; + } + + } + + #search-query { + border-radius: 6px; + height: 45px; + width: 100%; + + } + + #search-results { + background: white; + position: absolute; + margin:5px 0 0 0; + width:560px; + border: 1px solid rgba(0,0,0,0.15); + border-radius: 10px; + box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2); + + .sr-items { + a { + color: black; + &:first-child { + border-radius: 10px 10px 0 0; + } + &:last-child { + border-radius: 0 0 10px 10px; + margin-bottom: 0; + } + } + p { + margin: 10px; + } + + .sr-item { + display: block; + padding: 15px; + margin-bottom: 10px; + &:hover{ + background-image:linear-gradient(to bottom, rgba(21,155,255, 0.11) 0%, rgba(21,155,255, 0.11) 100%), linear-gradient(to bottom, rgba(21,155,255, 0.11) 0%, rgba(21,155,255, 0.11) 100%); + } + } + + .item-title { + font-size: 16px; + font-weight: bold; + } + + .item-brief { + font-size: 16px; + color: black; + } + } + } } .sidetoc { - top: 178px; + top: 180px; .nav > li.active > a { color: $purple; diff --git a/doc/templates/uno/toc.html.tmpl b/doc/templates/uno/toc.html.tmpl index 26cb8ad6f7fd..94844bb170e6 100644 --- a/doc/templates/uno/toc.html.tmpl +++ b/doc/templates/uno/toc.html.tmpl @@ -2,14 +2,14 @@
- {{^_disableSideFilter}}
-
- - + +
+
+
+
- {{/_disableSideFilter}}
{{^leaf}} @@ -18,4 +18,4 @@
-
\ No newline at end of file +
From 7930557764bc8b308fb95eba6feae595d05f2501 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonathan=20Bleau=20Gu=C3=A9rette?= Date: Tue, 6 Apr 2021 11:35:41 -0400 Subject: [PATCH 5/5] docs: pr fix indentation and whitespaces --- doc/templates/uno/styles/docfx.js | 14 ++++++-------- doc/templates/uno/styles/scss/main.scss | 3 +-- doc/templates/uno/toc.html.tmpl | 8 ++++---- 3 files changed, 11 insertions(+), 14 deletions(-) diff --git a/doc/templates/uno/styles/docfx.js b/doc/templates/uno/styles/docfx.js index e284e4040f1f..99c9a9fc36b2 100644 --- a/doc/templates/uno/styles/docfx.js +++ b/doc/templates/uno/styles/docfx.js @@ -486,14 +486,12 @@ $(function () { $('#search').show(); $('body').trigger("searchEvent"); } - // if the target of the click isn't the container nor a descendant of the container - $('body').mouseup(function (e) { - if (!$('#search-results').is(e.target) && $('#search-results').has(e.target).length === 0) - { - $('#search-results').hide(); - } - }); - + // if the target of the click isn't the container nor a descendant of the container + $('body').mouseup(function (e) { + if (!$('#search-results').is(e.target) && $('#search-results').has(e.target).length === 0) { + $('#search-results').hide(); + } + }); }); } } diff --git a/doc/templates/uno/styles/scss/main.scss b/doc/templates/uno/styles/scss/main.scss index e1f1d01765ef..f654f3762f93 100644 --- a/doc/templates/uno/styles/scss/main.scss +++ b/doc/templates/uno/styles/scss/main.scss @@ -82,14 +82,12 @@ h3 { outline: none; border:2px solid #159bff; } - } #search-query { border-radius: 6px; height: 45px; width: 100%; - } #search-results { @@ -112,6 +110,7 @@ h3 { margin-bottom: 0; } } + p { margin: 10px; } diff --git a/doc/templates/uno/toc.html.tmpl b/doc/templates/uno/toc.html.tmpl index 94844bb170e6..561a5f827e0d 100644 --- a/doc/templates/uno/toc.html.tmpl +++ b/doc/templates/uno/toc.html.tmpl @@ -4,11 +4,11 @@
-
-
-
+
+
+