Basic styling and structure for API documentation
This commit is contained in:
ポール ウェッブ
parent
9de0ef9647
commit
cbc9c876b5
5 changed files with 1302 additions and 944 deletions
|
|
@ -1,194 +1,251 @@
|
|||
<template>
|
||||
|
||||
<div class="slate">
|
||||
<!--/
|
||||
<a href="#" id="nav-button">
|
||||
<span>
|
||||
NAV
|
||||
<img src="slate-navbar.png">
|
||||
</span>
|
||||
</a>
|
||||
<div class="tocify-wrapper">
|
||||
<img src="slate-logo.png">
|
||||
<div class="search">
|
||||
<input type="text" class="search" id="input-search" placeholder="Search">
|
||||
</div>
|
||||
<ul class="search-results"></ul>
|
||||
<div id="toc">
|
||||
</div>
|
||||
<ul class="toc-footer">
|
||||
<li>Some footer content here</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="page-wrapper">
|
||||
<div class="content" v-html="htmlContent"></div>
|
||||
<div class="dark-box">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
/-->
|
||||
|
||||
<aside class="api__toc">
|
||||
<!--/ <img src="slate-logo.png"/> /-->
|
||||
|
||||
<div class="api__toc__search">
|
||||
<input type="search" class="search" id="input-search" placeholder="Search"/>
|
||||
<ul class="api__toc__search__results"></ul>
|
||||
</div>
|
||||
|
||||
<div id="toc" class="api__toc__items" role="navigation"></div>
|
||||
|
||||
<!--/
|
||||
<ul class="toc-footer">
|
||||
<li>Some footer content here</li>
|
||||
</ul>
|
||||
/-->
|
||||
</aside>
|
||||
|
||||
<section class="api__content" v-html="htmlContent"></section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
window.$ = window.jQuery = require("jquery");
|
||||
|
||||
window.$ = window.jQuery = require('jquery');
|
||||
require("jquery-ui");
|
||||
require("jquery.tocify");
|
||||
require("../js/jquery.highlight");
|
||||
|
||||
require('jquery-ui');
|
||||
const lunr = require("lunr");
|
||||
|
||||
require('jquery.tocify');
|
||||
const md = require("markdown-it")()
|
||||
.use(require("markdown-it-anchor"), {
|
||||
level: 1
|
||||
})
|
||||
.use(require("markdown-it-container"), "api__content__body")
|
||||
.use(require("markdown-it-container"), "api__content__example");
|
||||
|
||||
require('../js/jquery.highlight');
|
||||
|
||||
var lunr = require('lunr');
|
||||
|
||||
var md = require('markdown-it')()
|
||||
.use(require('markdown-it-anchor'), {
|
||||
level: 1
|
||||
});
|
||||
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
toc: {},
|
||||
searchIndex: {},
|
||||
content: {},
|
||||
searchResults: {},
|
||||
htmlContent: ''
|
||||
};
|
||||
},
|
||||
props: ['markdownFile'],
|
||||
methods: {
|
||||
makeToc: function() {
|
||||
|
||||
this.toc = $("#toc").tocify({
|
||||
selectors: 'h2',
|
||||
extendPage: false,
|
||||
theme: 'none',
|
||||
smoothScroll: false,
|
||||
showEffectSpeed: 0,
|
||||
hideEffectSpeed: 180,
|
||||
ignoreSelector: '.toc-ignore',
|
||||
highlightOffset: 60,
|
||||
scrollTo: -1,
|
||||
scrollHistory: false,
|
||||
hashGenerator: function (text, element) {
|
||||
return element.prop('id');
|
||||
}
|
||||
}).data('toc-tocify');
|
||||
|
||||
$("#nav-button").click(function() {
|
||||
$(".tocify-wrapper").toggleClass('open');
|
||||
$("#nav-button").toggleClass('open');
|
||||
return false;
|
||||
});
|
||||
|
||||
$(".page-wrapper").click(this.closeToc);
|
||||
$(".tocify-item").click(this.closeToc);
|
||||
|
||||
},
|
||||
closeToc: function() {
|
||||
|
||||
$(".tocify-wrapper").removeClass('open');
|
||||
$("#nav-button").removeClass('open');
|
||||
|
||||
},
|
||||
populateSearchIndex: function() {
|
||||
|
||||
var component = this;
|
||||
|
||||
$('.slate .content h2').each(function() {
|
||||
var title = $(this);
|
||||
var body = title.nextUntil('h2');
|
||||
component.searchIndex.add({
|
||||
id: title.prop('id'),
|
||||
title: title.text(),
|
||||
body: body.text()
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
bindSearchIndex: function() {
|
||||
|
||||
this.content = $('.slate .content');
|
||||
this.searchResults = $('.slate .search-results');
|
||||
|
||||
$('#input-search').on('keyup', this.search);
|
||||
|
||||
},
|
||||
search: function(event) {
|
||||
|
||||
var component = this;
|
||||
|
||||
component.unhighlight();
|
||||
component.searchResults.addClass('visible');
|
||||
|
||||
var searchElement = $("#input-search");
|
||||
|
||||
// ESC clears the field
|
||||
if (event.keyCode === 27) searchElement.val('');
|
||||
|
||||
if (searchElement.val()) {
|
||||
var results = component.searchIndex.search(searchElement.val()).filter(function(r) {
|
||||
return r.score > 0.0001;
|
||||
});
|
||||
|
||||
if (results.length) {
|
||||
component.searchResults.empty();
|
||||
$.each(results, function (index, result) {
|
||||
var elem = document.getElementById(result.ref);
|
||||
component.searchResults.append("<li><a href='#" + result.ref + "'>" + $(elem).text() + "</a></li>");
|
||||
});
|
||||
component.highlight(this);
|
||||
} else {
|
||||
component.searchResults.html('<li></li>');
|
||||
$('.search-results li').text('No Results Found for "' + searchElement.val() + '"');
|
||||
}
|
||||
} else {
|
||||
component.unhighlight();
|
||||
component.searchResults.removeClass('visible');
|
||||
export default {
|
||||
data: () => {
|
||||
return {
|
||||
content: {},
|
||||
htmlContent: "",
|
||||
searchIndex: {},
|
||||
searchResults: {},
|
||||
toc: {}
|
||||
}
|
||||
},
|
||||
highlight: function(element) {
|
||||
if (element.value) this.content.highlight(element.value, { element: 'span', className: 'search-highlight' });
|
||||
},
|
||||
unhighlight: function() {
|
||||
this.content.unhighlight({ element: 'span', className: 'search-highlight' });
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
|
||||
this.$http.get(this.markdownFile).then(response => {
|
||||
props: ["markdownFile"],
|
||||
|
||||
this.htmlContent = md.render(response.body);
|
||||
methods: {
|
||||
makeToc: function () {
|
||||
this.toc = $("#toc").tocify({
|
||||
extendPage: false,
|
||||
hashGenerator: (text, element) => element.prop("id"),
|
||||
hideEffectSpeed: 180,
|
||||
highlightOffset: 60,
|
||||
ignoreSelector: ".toc-ignore",
|
||||
scrollHistory: false,
|
||||
scrollTo: -1,
|
||||
selectors: "h2",
|
||||
showEffectSpeed: 0,
|
||||
smoothScroll: false,
|
||||
theme: "none"
|
||||
}).data("toc-tocify");
|
||||
|
||||
this.$nextTick(function() {
|
||||
|
||||
this.makeToc();
|
||||
|
||||
this.searchIndex = new lunr.Index();
|
||||
|
||||
this.searchIndex.ref('id');
|
||||
this.searchIndex.field('title', { boost: 10 });
|
||||
this.searchIndex.field('body');
|
||||
this.searchIndex.pipeline.add(lunr.trimmer, lunr.stopWordFilter);
|
||||
|
||||
this.populateSearchIndex();
|
||||
|
||||
this.bindSearchIndex();
|
||||
$("#nav-button").click(() => {
|
||||
$(".api__toc").toggleClass("active");
|
||||
$("#nav-button").toggleClass("active");
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
$(".api__content").click(this.closeToc);
|
||||
$(".tocify-item").click(this.closeToc);
|
||||
},
|
||||
|
||||
},
|
||||
name: 'Slate'
|
||||
};
|
||||
closeToc: () => {
|
||||
$(".api__toc").removeClass("open");
|
||||
$("#nav-button").removeClass("open");
|
||||
},
|
||||
|
||||
populateSearchIndex: function () {
|
||||
const component = this;
|
||||
|
||||
$(".slate .content h2").each(function () {
|
||||
const title = $(this);
|
||||
const body = title.nextUntil("h2");
|
||||
|
||||
component.searchIndex.add({
|
||||
body: body.text(),
|
||||
id: title.prop("id"),
|
||||
title: title.text()
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
bindSearchIndex: function () {
|
||||
this.content = $(".slate .content");
|
||||
this.searchResults = $(".api__toc__search__results");
|
||||
|
||||
$("#input-search").on("keyup", this.search);
|
||||
},
|
||||
|
||||
search: function (event) {
|
||||
const component = this;
|
||||
const searchElement = $("#input-search");
|
||||
|
||||
component.unhighlight();
|
||||
component.searchResults.addClass("active");
|
||||
|
||||
// ESC clears the field
|
||||
if (event.keyCode === 27) searchElement.val("");
|
||||
|
||||
if (searchElement.val()) {
|
||||
const results = component.searchIndex.search(searchElement.val()).filter(r => r.score > 0.0001);
|
||||
|
||||
if (results.length) {
|
||||
component.searchResults.empty();
|
||||
|
||||
$.each(results, function (index, result) {
|
||||
const elem = document.getElementById(result.ref);
|
||||
component.searchResults.append(`<li><a href="#" ${result.ref}>${$(elem).text()}</a></li>`);
|
||||
});
|
||||
|
||||
component.highlight(this);
|
||||
} else {
|
||||
component.searchResults.html("<li></li>");
|
||||
$(".api__toc__search__results li").text(`No Results Found for "${searchElement.val()}"`);
|
||||
}
|
||||
} else {
|
||||
component.unhighlight();
|
||||
component.searchResults.removeClass("active");
|
||||
}
|
||||
},
|
||||
|
||||
highlight: function (element) {
|
||||
if (element.value) this.content.highlight(element.value, { element: "span", className: "search-highlight" });
|
||||
},
|
||||
|
||||
unhighlight: function () {
|
||||
this.content.unhighlight({ element: "span", className: "search-highlight" });
|
||||
}
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
this.$http.get("/api.md").then(function (response) {
|
||||
this.htmlContent = md.render(response.body);
|
||||
|
||||
this.$nextTick(function () {
|
||||
this.makeToc();
|
||||
|
||||
this.searchIndex = new lunr.Index();
|
||||
|
||||
this.searchIndex.ref("id");
|
||||
this.searchIndex.field("title", { boost: 10 });
|
||||
this.searchIndex.field("body");
|
||||
this.searchIndex.pipeline.add(lunr.trimmer, lunr.stopWordFilter);
|
||||
|
||||
this.populateSearchIndex();
|
||||
this.bindSearchIndex();
|
||||
});
|
||||
}).catch(error => {
|
||||
console.log("Source Markdown file, not found:", error);
|
||||
});
|
||||
},
|
||||
|
||||
name: "Slate"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@import "../../../node_modules/highlight.js/styles/monokai-sublime";
|
||||
@import "../scss/partials/slate_variables";
|
||||
@import "../scss/partials/slate_icons";
|
||||
@import "../scss/partials/slate_style";
|
||||
@import "../scss/init/colors";
|
||||
@import "../scss/init/mixins";
|
||||
|
||||
// @import "../scss/partials/slate_variables";
|
||||
// @import "../scss/partials/slate_icons";
|
||||
// @import "../scss/partials/slate_style";
|
||||
|
||||
.slate {
|
||||
width: 100%; height: 100%;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@include clearfix;
|
||||
}
|
||||
}
|
||||
|
||||
.api__toc {
|
||||
width: 200px; height: calc(100vh - 4rem); // navigation is 4rem tall
|
||||
top: 4rem; left: 0; bottom: 0;
|
||||
|
||||
background-color: $white;
|
||||
border-right: 1px solid rgba($gray, 0.3);
|
||||
float: left;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
|
||||
&:not(.active) {
|
||||
}
|
||||
|
||||
&.active {
|
||||
}
|
||||
}
|
||||
|
||||
.api__toc__search__results {
|
||||
&:not(.active) {
|
||||
}
|
||||
|
||||
&.active {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.api__content {
|
||||
display: grid;
|
||||
float: right;
|
||||
grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
|
||||
width: calc(100% - 200px);
|
||||
}
|
||||
|
||||
.api__content__body,
|
||||
.api__content__example {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.api__content__body {
|
||||
border-bottom: 1px solid rgba($gray, 0.3);
|
||||
}
|
||||
|
||||
.api__content__example {
|
||||
background-color: $black;
|
||||
border-bottom: 1px solid rgba($white, 0.1);
|
||||
color: $white;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<main v-bind:class="{ 'home': $page.frontmatter.home, 'documentation': $page.frontmatter.documentation, 'contributing': $page.frontmatter.contributing }">
|
||||
<main v-bind:class="{
|
||||
'api': $page.frontmatter.api,
|
||||
'contributing': $page.frontmatter.contributing,
|
||||
'documentation': $page.frontmatter.documentation,
|
||||
'home': $page.frontmatter.home
|
||||
}">
|
||||
<nav class="navigation">
|
||||
<div class="inner-wrap">
|
||||
<router-link class="navigation__item" to="/" title="Go back home">LBRY</router-link>
|
||||
|
|
@ -194,11 +199,15 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="$page.path == '/tour.html'">
|
||||
<template v-else-if="$page.frontmatter.api">
|
||||
<Content></Content>
|
||||
</template>
|
||||
|
||||
<template v-else-if="$page.path == '/whitepaper.html'">
|
||||
<template v-else-if="$page.path === '/tour.html'">
|
||||
<Content></Content>
|
||||
</template>
|
||||
|
||||
<template v-else-if="$page.path === '/whitepaper.html'">
|
||||
<Content></Content>
|
||||
</template>
|
||||
|
||||
|
|
@ -233,6 +242,8 @@
|
|||
All information should be considered incomplete and possibly incorrect and things may not work as expected.
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
|
||||
<p>
|
||||
Please do not share or link this site publicly while this message is here. This website is open source and you can <a href="https://github.com/lbryio/lbry.tech" target="_blank" rel="noopener noreferrer">contribute to it on Github</a>.
|
||||
</p>
|
||||
|
|
@ -261,81 +272,81 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import VueResource from "vue-resource";
|
||||
import VueMoment from "vue-moment";
|
||||
|
||||
import Vue from 'vue'
|
||||
import VueResource from 'vue-resource'
|
||||
import VueMoment from 'vue-moment'
|
||||
Vue.use(VueResource);
|
||||
Vue.use(VueMoment);
|
||||
|
||||
Vue.use(VueResource)
|
||||
Vue.use(VueMoment)
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
created () {
|
||||
if (this.$ssrContext) {
|
||||
this.$ssrContext.title = this.$title
|
||||
this.$ssrContext.lang = this.$lang
|
||||
this.$ssrContext.description = this.$page.description || this.$description
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
// update title / meta tags
|
||||
this.currentMetaTags = [];
|
||||
|
||||
const updateMeta = () => {
|
||||
document.title = this.$title
|
||||
document.documentElement.lang = this.$lang
|
||||
|
||||
const meta = [
|
||||
{
|
||||
name: "description",
|
||||
content: this.$description
|
||||
},
|
||||
...(this.$page.frontmatter.meta || [])
|
||||
];
|
||||
|
||||
this.currentMetaTags = updateMetaTags(meta, this.currentMetaTags);
|
||||
};
|
||||
|
||||
this.$watch("$page", updateMeta);
|
||||
updateMeta();
|
||||
|
||||
if ( // Toggle beta message
|
||||
localStorage.getItem("hide lbry alert") &&
|
||||
localStorage.getItem("hide lbry alert") === "true" // cannot set Booleans for some reason
|
||||
) document.querySelector("#alert-beta").style.display = "none";
|
||||
|
||||
document.querySelector("#close-alert").onclick = function () {
|
||||
localStorage.setItem("hide lbry alert", true);
|
||||
document.querySelector("#alert-beta").style.display = "none";
|
||||
};
|
||||
},
|
||||
|
||||
beforeDestroy () {
|
||||
updateMetaTags(null, this.currentMetaTags)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.$ssrContext) {
|
||||
this.$ssrContext.title = this.$title
|
||||
this.$ssrContext.lang = this.$lang
|
||||
this.$ssrContext.description = this.$page.description || this.$description
|
||||
}
|
||||
|
||||
},
|
||||
mounted () {
|
||||
// update title / meta tags
|
||||
this.currentMetaTags = []
|
||||
const updateMeta = () => {
|
||||
document.title = this.$title
|
||||
document.documentElement.lang = this.$lang
|
||||
const meta = [
|
||||
{
|
||||
name: 'description',
|
||||
content: this.$description
|
||||
},
|
||||
...(this.$page.frontmatter.meta || [])
|
||||
]
|
||||
this.currentMetaTags = updateMetaTags(meta, this.currentMetaTags)
|
||||
}
|
||||
this.$watch('$page', updateMeta)
|
||||
updateMeta()
|
||||
|
||||
|
||||
|
||||
if ( // Toggle beta message
|
||||
localStorage.getItem("hide lbry alert") &&
|
||||
localStorage.getItem("hide lbry alert") === "true" // cannot set Booleans for some reason
|
||||
) {
|
||||
document.querySelector("#alert-beta").style.display = "none";
|
||||
}
|
||||
|
||||
document.querySelector("#close-alert").onclick = function () {
|
||||
localStorage.setItem("hide lbry alert", true);
|
||||
document.querySelector("#alert-beta").style.display = "none";
|
||||
};
|
||||
},
|
||||
beforeDestroy () {
|
||||
updateMetaTags(null, this.currentMetaTags)
|
||||
}
|
||||
}
|
||||
|
||||
function updateMetaTags (meta, current) {
|
||||
if (current) {
|
||||
current.forEach(c => {
|
||||
document.head.removeChild(c)
|
||||
})
|
||||
}
|
||||
if (meta) {
|
||||
return meta.map(m => {
|
||||
const tag = document.createElement('meta')
|
||||
Object.keys(m).forEach(key => {
|
||||
tag.setAttribute(key, m[key])
|
||||
function updateMetaTags (meta, current) {
|
||||
if (current) current.forEach(c => document.head.removeChild(c));
|
||||
|
||||
if (meta) {
|
||||
return meta.map(m => {
|
||||
const tag = document.createElement('meta')
|
||||
|
||||
Object.keys(m).forEach(key => {
|
||||
tag.setAttribute(key, m[key])
|
||||
});
|
||||
|
||||
document.head.appendChild(tag);
|
||||
return tag;
|
||||
})
|
||||
document.head.appendChild(tag)
|
||||
return tag
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
6
content/api/index.md
Normal file
6
content/api/index.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
api: true
|
||||
title: API
|
||||
---
|
||||
|
||||
<Slate/>
|
||||
|
|
@ -27,6 +27,8 @@
|
|||
"jquery-ui": "^1.12.1",
|
||||
"jquery.tocify": "^1.9.1",
|
||||
"lunr": "0.5.7",
|
||||
"markdown-it": "^8.4.1",
|
||||
"markdown-it-container": "^2.0.0",
|
||||
"markdown-it-wikilinks": "^1.0.1",
|
||||
"node-sass": "^4.9.0",
|
||||
"redis": "^2.8.0",
|
||||
|
|
|
|||
Loading…
Reference in a new issue