Skip to content

Commit

Permalink
Merge pull request #6 from theplant/polish-menu
Browse files Browse the repository at this point in the history 
Polish menu
  • Loading branch information
@xuxinx
xuxinx authored Nov 16, 2022
2 parents 95163d9 + 5439f45 commit d4bc69e
Show file tree
Hide file tree
Showing 12 changed files with 131 additions and 84 deletions.
21 changes: 14 additions & 7 deletions builder.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,32 +211,38 @@ func (b *Builder) layout(body *DocBuilder) (r HTMLComponent) {
}

func (b *Builder) aside(doc *DocBuilder) (r HTMLComponent) {
content := Ul().Class("px-0 mx-0 text-base font-normal list-none text-gray-700")
content := Ul().Class("px-0 py-3 mx-0 text-base font-normal list-none text-gray-700")
for _, di := range b.docTree {
switch v := di.(type) {
case *DocBuilder:
link := A().Href(v.GetPageURL()).Text(v.title).Class("inline-block px-4 truncate break-words w-64")
pageURL := v.GetPageURL()
link := A().Href(pageURL).Text(v.title).Class("inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400").
Attr("id", pageURL).
Attr("onclick", fmt.Sprintf(`window.storeMenuState("%s")`, pageURL))
if v == doc {
link.Class("text-blue-500")
} else {
link.Class("text-gray-700")
}
content.AppendChildren(
Li(link),
Li(link).Class("m-0"),
)
case *DocsGroup:
content.AppendChildren(
Li().Text(v.Title).Class("cursor-default px-4 truncate break-words w-64"),
Li().Text(v.Title).Class("cursor-default px-4 py-1 truncate break-words w-64 m-0"),
)
for _, sd := range v.Docs {
link := A().Href(sd.GetPageURL()).Text(sd.title).Class("inline-block pl-10 pr-4 truncate break-words w-64")
pageURL := sd.GetPageURL()
link := A().Href(sd.GetPageURL()).Text(sd.title).Class("inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400").
Attr("id", pageURL).
Attr("onclick", fmt.Sprintf(`window.storeMenuState("%s")`, pageURL))
if sd == doc {
link.Class("text-blue-500")
} else {
link.Class("text-gray-700")
}
content.AppendChildren(
Li(link),
Li(link).Class("m-0"),
)
}
}
Expand All @@ -248,7 +254,8 @@ func (b *Builder) aside(doc *DocBuilder) (r HTMLComponent) {
).Class("h-12"),
content,
).Class("flex flex-col w-80 h-full bg-gray-50 border-r border-gray-200 overflow-y-auto").
Attr("v-show", "!vars.hideAside")
Attr("v-show", "!vars.hideAside").
Attr("id", "menuScroller")
}

var startTime = time.Now()
Expand Down
2 changes: 1 addition & 1 deletion docjs/dist/docgo.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docjs/dist/docgo.umd.min.js
View file

Large diffs are not rendered by default.

53 changes: 46 additions & 7 deletions docjs/src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,53 @@ import searchResult from './searchResult'
Vue.component("search", search)
Vue.component("search-result", searchResult)

window.storeMenuState = function (activeMenuURL) {
var state = {
activeMenuURL: activeMenuURL,
scrollTop: document.getElementById("menuScroller").scrollTop,
};
document.cookie = "menuState=" + JSON.stringify(state) + "; path=/";
};

function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0)
return c.substring(nameEQ.length, c.length);
}
return null;
}

document.addEventListener("DOMContentLoaded", function() {
var h = new URLSearchParams(window.location.search).get("h")
if (h) {
const re = new RegExp(`(>[^<]*)(${h})([^>]*<)`, 'gi')
document.getElementById("docMainBox").innerHTML = document.getElementById("docMainBox").innerHTML.replaceAll(re, "$1<span class='search-h bg-yellow-300'>$2</span>$3")
setTimeout(() => {
document.querySelector(".search-h").scrollIntoView()
}, 100)
// restore menu state
{
var path = window.location.pathname.replace(/^\//, '');
var stateCookieVal = getCookie("menuState");
if (!stateCookieVal) {
document.getElementById(path).scrollIntoView({block: "center"});
return;
}
var state = JSON.parse(stateCookieVal);
if (path != state.activeMenuURL) {
document.getElementById(path).scrollIntoView({block: "center"});
return;
}
document.getElementById("menuScroller").scrollTop = state.scrollTop;
}

// search
{
var h = new URLSearchParams(window.location.search).get("h")
if (h) {
const re = new RegExp(`(>[^<]*)(${h})([^>]*<)`, 'gi')
document.getElementById("docMainBox").innerHTML = document.getElementById("docMainBox").innerHTML.replaceAll(re, "$1<span class='search-h bg-yellow-300'>$2</span>$3")
setTimeout(() => {
document.querySelector(".search-h").scrollIntoView()
}, 100)
}
}
})
});
Expand Down
26 changes: 13 additions & 13 deletions docs/github-pages-integration.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,30 +18,30 @@
<div v-init-context:vars='{hideAside: false}' class='flex h-screen'>
<div class='flex-1 flex flex-col overflow-hidden'>
<div class='flex h-full'>
<aside v-show='!vars.hideAside' class='flex flex-col w-80 h-full bg-gray-50 border-r border-gray-200 overflow-y-auto'>
<aside v-show='!vars.hideAside' id='menuScroller' class='flex flex-col w-80 h-full bg-gray-50 border-r border-gray-200 overflow-y-auto'>
<div class='h-12'><search></search></div>

<ul class='px-0 mx-0 text-base font-normal list-none text-gray-700'>
<li>
<a href='index.html' class='inline-block px-4 truncate break-words w-64 text-gray-700'>Introduction</a>
<ul class='px-0 py-3 mx-0 text-base font-normal list-none text-gray-700'>
<li class='m-0'>
<a href='index.html' id='index.html' onclick='window.storeMenuState("index.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Introduction</a>
</li>

<li>
<a href='use-with-htmlgo.html' class='inline-block px-4 truncate break-words w-64 text-gray-700'>Use with htmlgo</a>
<li class='m-0'>
<a href='use-with-htmlgo.html' id='use-with-htmlgo.html' onclick='window.storeMenuState("use-with-htmlgo.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Use with htmlgo</a>
</li>

<li>
<a href='github-pages-integration.html' class='inline-block px-4 truncate break-words w-64 text-blue-500'>Github Pages Integration</a>
<li class='m-0'>
<a href='github-pages-integration.html' id='github-pages-integration.html' onclick='window.storeMenuState("github-pages-integration.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-blue-500'>Github Pages Integration</a>
</li>

<li>
<a href='markdown-difference.html' class='inline-block px-4 truncate break-words w-64 text-gray-700'>Markdown difference</a>
<li class='m-0'>
<a href='markdown-difference.html' id='markdown-difference.html' onclick='window.storeMenuState("markdown-difference.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Markdown difference</a>
</li>

<li class='cursor-default px-4 truncate break-words w-64'>Samples</li>
<li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Samples</li>

<li>
<a href='hello-world.html' class='inline-block pl-10 pr-4 truncate break-words w-64 text-gray-700'>Hello World</a>
<li class='m-0'>
<a href='hello-world.html' id='hello-world.html' onclick='window.storeMenuState("hello-world.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Hello World</a>
</li>
</ul>
</aside>
Expand Down
26 changes: 13 additions & 13 deletions docs/hello-world.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,30 +18,30 @@
<div v-init-context:vars='{hideAside: false}' class='flex h-screen'>
<div class='flex-1 flex flex-col overflow-hidden'>
<div class='flex h-full'>
<aside v-show='!vars.hideAside' class='flex flex-col w-80 h-full bg-gray-50 border-r border-gray-200 overflow-y-auto'>
<aside v-show='!vars.hideAside' id='menuScroller' class='flex flex-col w-80 h-full bg-gray-50 border-r border-gray-200 overflow-y-auto'>
<div class='h-12'><search></search></div>

<ul class='px-0 mx-0 text-base font-normal list-none text-gray-700'>
<li>
<a href='index.html' class='inline-block px-4 truncate break-words w-64 text-gray-700'>Introduction</a>
<ul class='px-0 py-3 mx-0 text-base font-normal list-none text-gray-700'>
<li class='m-0'>
<a href='index.html' id='index.html' onclick='window.storeMenuState("index.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Introduction</a>
</li>

<li>
<a href='use-with-htmlgo.html' class='inline-block px-4 truncate break-words w-64 text-gray-700'>Use with htmlgo</a>
<li class='m-0'>
<a href='use-with-htmlgo.html' id='use-with-htmlgo.html' onclick='window.storeMenuState("use-with-htmlgo.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Use with htmlgo</a>
</li>

<li>
<a href='github-pages-integration.html' class='inline-block px-4 truncate break-words w-64 text-gray-700'>Github Pages Integration</a>
<li class='m-0'>
<a href='github-pages-integration.html' id='github-pages-integration.html' onclick='window.storeMenuState("github-pages-integration.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Github Pages Integration</a>
</li>

<li>
<a href='markdown-difference.html' class='inline-block px-4 truncate break-words w-64 text-gray-700'>Markdown difference</a>
<li class='m-0'>
<a href='markdown-difference.html' id='markdown-difference.html' onclick='window.storeMenuState("markdown-difference.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Markdown difference</a>
</li>

<li class='cursor-default px-4 truncate break-words w-64'>Samples</li>
<li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Samples</li>

<li>
<a href='hello-world.html' class='inline-block pl-10 pr-4 truncate break-words w-64 text-blue-500'>Hello World</a>
<li class='m-0'>
<a href='hello-world.html' id='hello-world.html' onclick='window.storeMenuState("hello-world.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-blue-500'>Hello World</a>
</li>
</ul>
</aside>
Expand Down
2 changes: 1 addition & 1 deletion docs/index.css
View file

Large diffs are not rendered by default.

26 changes: 13 additions & 13 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,30 +18,30 @@
<div v-init-context:vars='{hideAside: false}' class='flex h-screen'>
<div class='flex-1 flex flex-col overflow-hidden'>
<div class='flex h-full'>
<aside v-show='!vars.hideAside' class='flex flex-col w-80 h-full bg-gray-50 border-r border-gray-200 overflow-y-auto'>
<aside v-show='!vars.hideAside' id='menuScroller' class='flex flex-col w-80 h-full bg-gray-50 border-r border-gray-200 overflow-y-auto'>
<div class='h-12'><search></search></div>

<ul class='px-0 mx-0 text-base font-normal list-none text-gray-700'>
<li>
<a href='index.html' class='inline-block px-4 truncate break-words w-64 text-blue-500'>Introduction</a>
<ul class='px-0 py-3 mx-0 text-base font-normal list-none text-gray-700'>
<li class='m-0'>
<a href='index.html' id='index.html' onclick='window.storeMenuState("index.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-blue-500'>Introduction</a>
</li>

<li>
<a href='use-with-htmlgo.html' class='inline-block px-4 truncate break-words w-64 text-gray-700'>Use with htmlgo</a>
<li class='m-0'>
<a href='use-with-htmlgo.html' id='use-with-htmlgo.html' onclick='window.storeMenuState("use-with-htmlgo.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Use with htmlgo</a>
</li>

<li>
<a href='github-pages-integration.html' class='inline-block px-4 truncate break-words w-64 text-gray-700'>Github Pages Integration</a>
<li class='m-0'>
<a href='github-pages-integration.html' id='github-pages-integration.html' onclick='window.storeMenuState("github-pages-integration.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Github Pages Integration</a>
</li>

<li>
<a href='markdown-difference.html' class='inline-block px-4 truncate break-words w-64 text-gray-700'>Markdown difference</a>
<li class='m-0'>
<a href='markdown-difference.html' id='markdown-difference.html' onclick='window.storeMenuState("markdown-difference.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Markdown difference</a>
</li>

<li class='cursor-default px-4 truncate break-words w-64'>Samples</li>
<li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Samples</li>

<li>
<a href='hello-world.html' class='inline-block pl-10 pr-4 truncate break-words w-64 text-gray-700'>Hello World</a>
<li class='m-0'>
<a href='hello-world.html' id='hello-world.html' onclick='window.storeMenuState("hello-world.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Hello World</a>
</li>
</ul>
</aside>
Expand Down
4 changes: 2 additions & 2 deletions docs/index.js
View file

Large diffs are not rendered by default.

26 changes: 13 additions & 13 deletions docs/markdown-difference.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,30 +18,30 @@
<div v-init-context:vars='{hideAside: false}' class='flex h-screen'>
<div class='flex-1 flex flex-col overflow-hidden'>
<div class='flex h-full'>
<aside v-show='!vars.hideAside' class='flex flex-col w-80 h-full bg-gray-50 border-r border-gray-200 overflow-y-auto'>
<aside v-show='!vars.hideAside' id='menuScroller' class='flex flex-col w-80 h-full bg-gray-50 border-r border-gray-200 overflow-y-auto'>
<div class='h-12'><search></search></div>

<ul class='px-0 mx-0 text-base font-normal list-none text-gray-700'>
<li>
<a href='index.html' class='inline-block px-4 truncate break-words w-64 text-gray-700'>Introduction</a>
<ul class='px-0 py-3 mx-0 text-base font-normal list-none text-gray-700'>
<li class='m-0'>
<a href='index.html' id='index.html' onclick='window.storeMenuState("index.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Introduction</a>
</li>

<li>
<a href='use-with-htmlgo.html' class='inline-block px-4 truncate break-words w-64 text-gray-700'>Use with htmlgo</a>
<li class='m-0'>
<a href='use-with-htmlgo.html' id='use-with-htmlgo.html' onclick='window.storeMenuState("use-with-htmlgo.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Use with htmlgo</a>
</li>

<li>
<a href='github-pages-integration.html' class='inline-block px-4 truncate break-words w-64 text-gray-700'>Github Pages Integration</a>
<li class='m-0'>
<a href='github-pages-integration.html' id='github-pages-integration.html' onclick='window.storeMenuState("github-pages-integration.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Github Pages Integration</a>
</li>

<li>
<a href='markdown-difference.html' class='inline-block px-4 truncate break-words w-64 text-blue-500'>Markdown difference</a>
<li class='m-0'>
<a href='markdown-difference.html' id='markdown-difference.html' onclick='window.storeMenuState("markdown-difference.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-blue-500'>Markdown difference</a>
</li>

<li class='cursor-default px-4 truncate break-words w-64'>Samples</li>
<li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Samples</li>

<li>
<a href='hello-world.html' class='inline-block pl-10 pr-4 truncate break-words w-64 text-gray-700'>Hello World</a>
<li class='m-0'>
<a href='hello-world.html' id='hello-world.html' onclick='window.storeMenuState("hello-world.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Hello World</a>
</li>
</ul>
</aside>
Expand Down
26 changes: 13 additions & 13 deletions docs/use-with-htmlgo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,30 +18,30 @@
<div v-init-context:vars='{hideAside: false}' class='flex h-screen'>
<div class='flex-1 flex flex-col overflow-hidden'>
<div class='flex h-full'>
<aside v-show='!vars.hideAside' class='flex flex-col w-80 h-full bg-gray-50 border-r border-gray-200 overflow-y-auto'>
<aside v-show='!vars.hideAside' id='menuScroller' class='flex flex-col w-80 h-full bg-gray-50 border-r border-gray-200 overflow-y-auto'>
<div class='h-12'><search></search></div>

<ul class='px-0 mx-0 text-base font-normal list-none text-gray-700'>
<li>
<a href='index.html' class='inline-block px-4 truncate break-words w-64 text-gray-700'>Introduction</a>
<ul class='px-0 py-3 mx-0 text-base font-normal list-none text-gray-700'>
<li class='m-0'>
<a href='index.html' id='index.html' onclick='window.storeMenuState("index.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Introduction</a>
</li>

<li>
<a href='use-with-htmlgo.html' class='inline-block px-4 truncate break-words w-64 text-blue-500'>Use with htmlgo</a>
<li class='m-0'>
<a href='use-with-htmlgo.html' id='use-with-htmlgo.html' onclick='window.storeMenuState("use-with-htmlgo.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-blue-500'>Use with htmlgo</a>
</li>

<li>
<a href='github-pages-integration.html' class='inline-block px-4 truncate break-words w-64 text-gray-700'>Github Pages Integration</a>
<li class='m-0'>
<a href='github-pages-integration.html' id='github-pages-integration.html' onclick='window.storeMenuState("github-pages-integration.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Github Pages Integration</a>
</li>

<li>
<a href='markdown-difference.html' class='inline-block px-4 truncate break-words w-64 text-gray-700'>Markdown difference</a>
<li class='m-0'>
<a href='markdown-difference.html' id='markdown-difference.html' onclick='window.storeMenuState("markdown-difference.html")' class='inline-block px-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Markdown difference</a>
</li>

<li class='cursor-default px-4 truncate break-words w-64'>Samples</li>
<li class='cursor-default px-4 py-1 truncate break-words w-64 m-0'>Samples</li>

<li>
<a href='hello-world.html' class='inline-block pl-10 pr-4 truncate break-words w-64 text-gray-700'>Hello World</a>
<li class='m-0'>
<a href='hello-world.html' id='hello-world.html' onclick='window.storeMenuState("hello-world.html")' class='inline-block pl-10 pr-4 py-1 truncate break-words w-64 hover:text-blue-400 text-gray-700'>Hello World</a>
</li>
</ul>
</aside>
Expand Down
Loading

0 comments on commit d4bc69e

Please sign in to comment.