Skip to content

Commit 5f26c7c

Browse files
vitovito
committed
grid-based layout, add toc to sidebar
this should make navigation feel more intuitive and removes the need for sections to throw a 'table of contents' somewhere (which was sometimes hard to notice) Signed-off-by: Alex Suraci <[email protected]>
1 parent a0d4c41 commit 5f26c7c

25 files changed

+381
-402
lines changed

‎css/booklit.css

+243-254
Large diffs are not rendered by default.

‎html/head.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
1212
<meta name="viewport" content="width=775" />
13-
<title>{{.Title.String}} - Concourse CI</title>
13+
<title>{{if .Parent}}{{.Title.String}} - {{end}}Concourse CI</title>
1414
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
1515
<link rel="stylesheet" type="text/css" href="css/pipeline.css" />
1616
<link rel="stylesheet" type="text/css" href="css/iosevka.css" />

‎html/page-toc.tmpl

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{{if and .Children (not .OmitChildrenFromTableOfContents)}}
2+
<div class="children">
3+
<table>
4+
{{range .Children}}
5+
<tr>
6+
{{if and .Parent (lt .Depth 3)}}
7+
<td class="number-cell" align="right">{{.Number}}&nbsp;</td>
8+
{{else}}
9+
<td class="number-cell" align="left"></td>
10+
{{end}}
11+
<td class="title-cell">
12+
<a href="{{.PrimaryTag | url}}">
13+
{{- .Title | render -}}
14+
</a>
15+
16+
{{template "page-toc.tmpl" .}}
17+
</td>
18+
</tr>
19+
{{end}}
20+
</table>
21+
</div>
22+
{{end}}

‎html/page.tmpl

+18-17
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,27 @@
44
{{template "head.tmpl" .}}
55
</head>
66
<body>
7-
<div id="top">
8-
{{template "top.tmpl" .}}
7+
{{template "top.tmpl" .}}
8+
9+
<div class="page-nav">
10+
{{template "sidebar.tmpl" .}}
911
</div>
10-
<div id="content">
11-
<div class="side">
12-
{{template "sidebar.tmpl" .}}
13-
</div>
14-
<div class="side-right">
15-
{{- if .Partial "RightSide" }}
16-
{{.Partial "RightSide" | render}}
17-
{{ end -}}
18-
</div>
19-
<div class="page">
20-
{{. | render}}
12+
13+
<div class="page-aside">
14+
{{- if .Partial "RightSide" }}
15+
<div class="page-partial">
16+
{{.Partial "RightSide" | render}}
2117
</div>
18+
{{ end -}}
19+
</div>
2220

23-
<ul class="improve-docs">
24-
<li><img src="images/github.svg" /> <a href="https://github.com/concourse/docs">help improve this site</a></li>
25-
<li><img src="images/booklit.svg" /> powered by <a href="https://vito.github.io/booklit">Booklit</a></li>
26-
</ul>
21+
<div class="page-content">
22+
{{. | render}}
2723
</div>
24+
25+
<ul class="improve-docs">
26+
<li><img src="images/github.svg" /> <a href="https://github.com/concourse/docs">help improve this site</a></li>
27+
<li><img src="images/booklit.svg" /> powered by <a href="https://vito.github.io/booklit">Booklit</a></li>
28+
</ul>
2829
</body>
2930
</html>

‎html/sidebar-right.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="content-right">
1+
<div class="content">
22
<h2>{{.Partial "Title" | render}}</h2>
33

44
{{.Content | render}}

‎html/sidebar.tmpl

+41-19
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
{{define "section-link"}}
2-
<a href="{{.Section.PrimaryTag | url}}" {{if eq .Section.PrimaryTag.Name .Current.PrimaryTag.Name}} class="self"{{end}}>
2+
<a href="{{.Section.PrimaryTag | url}}" {{if eq .Section.PrimaryTag.Name .Current.PrimaryTag.Name}} class="self"{{else if .Section.Contains .Current}} class="active"{{end}}>
33
{{- .Section.Title | render -}}
44
</a>
55
{{end}}
66

77
{{define "context"}}
8-
{{if and .Section.Parent .Section.Parent.Parent}}
8+
{{if gt .Section.Depth 1}}
99
{{template "context" walkContext .Current .Section.Parent}}
1010
{{end}}
1111

1212
{{if and .Section.Children (not .Section.OmitChildrenFromTableOfContents)}}
1313
<div class="context">
1414
<nav>
1515
<div class="top">
16+
{{if and .Section.Parent (lt .Section.Depth 3)}}
17+
<span class="section-number">{{.Section.Number}}</span>
18+
{{end}}
1619
{{template "section-link" .}}
1720
</div>
1821

19-
<input type="checkbox" class="toggle" {{if .Section.IsOrHasChild .Current}}checked{{end}} />
20-
<span class="arrow"></span>
2122
<div class="children">
2223
<table>
2324
{{range .Section.Children}}
@@ -37,8 +38,6 @@
3738
{{end}}
3839
{{end}}
3940

40-
{{template "context" walkContext $ .}}
41-
4241
{{define "anchors"}}
4342
{{if not .SplitSections}}
4443
{{range .Children}}
@@ -59,24 +58,47 @@
5958
{{end}}
6059
{{end}}
6160

61+
{{if and .Parent .Parent.Parent}}
62+
{{template "context" walkContext $ .Parent}}
63+
{{else}}
64+
{{template "context" walkContext $ .}}
65+
{{end}}
66+
67+
{{if gt .Depth 1 }}
68+
{{if and .Children (not .OmitChildrenFromTableOfContents)}}
69+
<div class="context">
70+
<div class="page-toc">
71+
<nav>
72+
<div class="top">
73+
{{if and .Parent (lt .Depth 3)}}
74+
<span class="section-number">{{.Number}}</span>
75+
{{end}}
76+
{{template "section-link" walkContext $ .}}
77+
</div>
78+
79+
{{template "page-toc.tmpl" .}}
80+
</nav>
81+
</div>
82+
</div>
83+
{{end}}
84+
{{end}}
85+
6286
{{if .HasAnchors}}
6387
<div class="context">
64-
<div class="top">
88+
<div class="Top">
6589
On this page:
6690
</div>
6791

68-
<nav>
69-
<div class="children">
70-
<table>
71-
{{range .AnchorTags}}
72-
<tr>
73-
<td colspan="2" class="title-cell"><a href="{{. | url}}">{{.Title | render}}</a></td>
74-
</tr>
75-
{{end}}
92+
<div class="children anchors">
93+
<table>
94+
{{range .AnchorTags}}
95+
<tr>
96+
<td colspan="2" class="title-cell"><a href="{{. | url}}">{{.Title | render}}</a></td>
97+
</tr>
98+
{{end}}
7699

77-
{{template "anchors" .}}
78-
</table>
79-
</div>
80-
</nav>
100+
{{template "anchors" .}}
101+
</table>
102+
</div>
81103
</div>
82104
{{end}}

‎html/toc.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{if and .Children (not .OmitChildrenFromTableOfContents)}}
2-
<ol{{if or .SplitSections (not .Parent)}} id="table-of-contents" class="toc"{{end}}>
2+
<ol class="toc">
33
{{range .Children}}
44
<li>
55
{{- if and .Parent (lt .Depth 3) -}}

‎html/top.tmpl

+14-16
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
1-
<div class="header">
2-
<div class="logo">
3-
<a href="/">Concourse</a>
4-
</div>
5-
6-
<nav>
7-
{{range .Top.Children}}
8-
<a href="{{.PrimaryTag | url}}"{{if .Contains $}} class="active"{{end}}>{{.Title | stripAux | render}}</a>
9-
{{end}}
10-
</nav>
1+
<div class="top-logo">
2+
<a href="/">Concourse</a>
3+
</div>
114

12-
<div class="search" id="search" onclick="gtag('event', 'search-click');">
13-
<input type="search" class="search-input" placeholder="Search the docs&hellip;" required="required" />
14-
</div>
5+
<nav class="top-nav">
6+
{{range .Top.Children}}
7+
<a href="{{.PrimaryTag | url}}"{{if .Contains $}} class="active"{{end}}>{{.Title | stripAux | render}}</a>
8+
{{end}}
9+
</nav>
1510

16-
<script type="text/javascript">
17-
Elm.Main.embed(document.getElementById("search"));
18-
</script>
11+
<div class="top-search" id="search" onclick="gtag('event', 'search-click');">
12+
<input type="search" class="search-input" placeholder="Search the docs&hellip;" required="required" />
1913
</div>
14+
15+
<script type="text/javascript">
16+
Elm.Main.embed(document.getElementById("search"));
17+
</script>

‎html/wide-page.tmpl

+5-8
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,11 @@
33
<head>
44
{{template "head.tmpl" .}}
55
</head>
6-
<body>
7-
<div id="top">
8-
{{template "top.tmpl" .}}
9-
</div>
10-
<div id="content">
11-
<div class="page wide">
12-
{{template "section.tmpl" .}}
13-
</div>
6+
<body class="wide">
7+
{{template "top.tmpl" .}}
8+
9+
<div class="page-content wide">
10+
{{template "section.tmpl" .}}
1411
</div>
1512
</body>
1613
</html>

‎html/wide-section.tmpl

Whitespace-only changes.

‎lit/architecture/architecture.lit

+8-8
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,6 @@ they are.
5151
the \reference{component-atc}{ATC} and sitting behind a load balancer.
5252
}
5353

54-
\section{
55-
\title{Garden\aux{: container orchestration}}{component-garden}
56-
}
57-
58-
\section{
59-
\title{BaggageClaim\aux{: volume management}}{component-baggageclaim}
60-
}
61-
6254
\section{
6355
\title{Workers\aux{: container runtime & cache management}}{architecture-worker}
6456

@@ -83,6 +75,14 @@ they are.
8375
(\code{0.0.0.0}) and register themselves directly. Otherwise they should bind
8476
on \code{127.0.0.1} and forward themselves through the
8577
\reference{component-tsa}{TSA}.
78+
79+
\section{
80+
\title{Garden\aux{: container orchestration}}{component-garden}
81+
}
82+
83+
\section{
84+
\title{BaggageClaim\aux{: volume management}}{component-baggageclaim}
85+
}
8686
}
8787

8888
\include-section{./internals.lit}

‎lit/architecture/internals.lit

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
\use-plugin{concourse-docs}
44

55
\split-sections
6-
\table-of-contents
76

87
\section{
98
\title{Caching & Retention}

‎lit/community.lit

+12-50
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,23 @@
11
\title{Community}{community}
22

3-
TODO: consolidate these into one section briefly listing each one and what it
4-
should be used for
5-
6-
\section{
7-
\title{GitHub}{github}
8-
9-
Concourse is completely open-source. All of the source code lives under the
10-
\link{Concourse organization}{https://github.com/concourse} on GitHub. Pull
11-
requests welcome! (Issues too, I guess.)
12-
13-
For a bird's eye view of the entire project, and to see what's in flight and
14-
coming up on our backlog, check out our
15-
\link{project.concourse-ci.org}{https://project.concourse-ci.org}.
16-
}
17-
18-
\section{
19-
\title{Discuss}{discuss}
20-
21-
The \link{Concourse forums}{https://discuss.concourse-ci.org} are a great
22-
place for discussions that are a bit more open-ended than GitHub issues or
23-
pull requests.
24-
25-
These forums are for supporting end users and operators, planning
26-
contributions and volunteering ideas, and announcing new things like resource
27-
types and whatever other cool things y'all want to show off.
28-
}
29-
30-
\section{
31-
\title{Discord}{discord}
32-
33-
We use \link{Discord}{https://discordapp.com} for real-time chat amongst
34-
contributors. Click \link{here}{https://discord.gg/MeRxXKW} for an invite.
35-
36-
If you're looking to become a contributor, you should drop in to Discord and
37-
introduce yourself! We're happy to help you on your way.
3+
\list{
4+
\link{GitHub repo}{https://github.com/concourse/concourse}
5+
}{
6+
\link{Blog}{https://medium.com/concourse-ci}
7+
}{
8+
\link{Forums}{https://discuss.concourse-ci.org} for support, announcements,
9+
and general discussion
10+
}{
11+
\link{Stack Overflow \code{concourse}
12+
tag}{https://stackoverflow.com/questions/tagged/concourse}
13+
}{
14+
\link{Discord}{https://discord.gg/MeRxXKW} to chat with other contributors.
3815

3916
If you're looking for help, we'd really appreciate it if you used the forums
4017
instead - threading and persistent messages make the support burden of an
4118
open-source project much easier to bear.
4219
}
4320

44-
\section{
45-
\title{Blog}{blog}
46-
47-
We often write long-form articles and project updates on our Concourse
48-
publication, hosted on \link{Medium}{https://medium.com/concourse-ci}.
49-
}
50-
51-
\section{
52-
\title{Stack Overflow}{stackoverflow}
53-
54-
Concourse questions can all be found on StackOverflow under the
55-
\link{\code{concourse}
56-
tag}{https://stackoverflow.com/questions/tagged/concourse}.
57-
}
58-
5921
\section{
6022
\title{Security Contact}{security-contact}
6123

‎lit/docs/auth.lit

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
\title{Auth & Teams}{auth}{teams}
22

33
\use-plugin{concourse-docs}
4+
\split-sections
45

56
The very first thing to configure with Concourse is how users will log in.
67

@@ -22,9 +23,6 @@ First you'll need to configure the \reference{main-team}. Once you've logged in
2223
to the \code{main} team you can configure other teams whenever you need to via
2324
\reference{fly-set-team}.
2425

25-
\split-sections
26-
\table-of-contents
27-
2826
\include-section{auth/main-team.lit}
2927
\include-section{auth/configuring.lit}
3028
\include-section{auth/managing-teams.lit}

‎lit/docs/auth/configuring.lit

+2-4
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,10 @@ providers on the \reference{web-node}. These are configured as flags or
1212
\italic{teams}, either with \reference{fly-set-team} or by configuring the
1313
\reference{main-team}.
1414

15-
Any number of the following providers can be enabled at any one time. Users
16-
will be given a choice when logging in as to which one they would like to
17-
use.
15+
Any number of providers can be enabled at any one time. Users will be given a
16+
choice when logging in as to which one they would like to use.
1817

1918
\split-sections
20-
\table-of-contents
2119

2220
\include-section{configuring/local.lit}
2321
\include-section{configuring/github.lit}

0 commit comments

Comments
 (0)