Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Polish menu #6

Merged
merged 2 commits into from
Nov 16, 2022
Merged

Polish menu #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
01f41f8
polish menu style
xuxinx Nov 16, 2022
5439f45
polish menu
xuxinx Nov 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 14 additions & 7 deletions builder.go
View file
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

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

Large diffs are not rendered by default.

53 changes: 46 additions & 7 deletions docjs/src/main.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

26 changes: 13 additions & 13 deletions docs/index.html
View file
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

26 changes: 13 additions & 13 deletions docs/markdown-difference.html
View file
Open in desktop
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
Open in desktop
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