Skip to content

Commit 185a560

Browse files
humitoshumitos
committed
Landing: day to day usage
Example of "How to use Read the Docs in your daily work" after reading the onboarding book on Book Club. The idea of this page is to show _exactly_ how customers will use Read the Docs on their day to day work to make them reach that "aha" moment when they realize this workflow is a lot easier than the one they are currently following. Goals: - explain how they will use Read the Docs daily - mention docs as code workflow - explain write, push, review and deploy stages - show images representing those exact stages - mention we don't provide an editor Page based on https://about.readthedocs.com/docs-as-code/ structure.
1 parent 652947d commit 185a560

File tree

6 files changed

+262
-4
lines changed

6 files changed

+262
-4
lines changed

‎content/images/usage/code-editor-light.png

115 KB
Loading

‎content/images/usage/code-editor.png

131 KB
Loading

‎content/images/usage/documentation.png

127 KB
Loading

‎content/images/usage/pull-request-collaboration.png

225 KB
Loading

‎content/includes/try-it-out.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@ <h2 class="ui huge center aligned header">
2020
```yaml
2121
version: 2
2222
build:
23-
os: ubuntu-22.04
23+
os: ubuntu-24.04
2424
tools:
25-
python: "3.10"
25+
python: "3.12"
2626
# You can also specify other tool versions:
27-
# nodejs: "16"
27+
# nodejs: "20"
2828

2929
# Build documentation in the docs/ directory with Sphinx
3030
sphinx:
@@ -96,4 +96,4 @@ <h2 class="ui huge center aligned header">
9696

9797
</div>
9898
</div>
99-
</section>
99+
</section>

‎content/pages/usage.html

+258
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
{#
2+
The goal of this page is to explain in a simple way how users will use Read the Docs in their lives.
3+
#}
4+
<html>
5+
<head>
6+
<title>Using Read the Docs daily</title>
7+
<meta name="template" content="page" />
8+
<meta name="slug" content="usage" />
9+
<meta name="status" content="hidden" />
10+
<meta name="description" content="How to use Read the Docs in your daily basis to write, build and host your documentation." />
11+
</head>
12+
<body>
13+
14+
{#
15+
View this page at http://localhost:8080/usage/index.html
16+
#}
17+
18+
{% import "partials/basic.html" as basic %}
19+
{% import "partials/features.html" as about %}
20+
{% import "partials/marketing.html" as marketing %}
21+
{% import "partials/technical.html" as technical %}
22+
{% import "partials/homepage.html" as homepage %}
23+
24+
<section>
25+
<div class="ui horizontally very padded container">
26+
<div class="ui very padded centered grid">
27+
<div class="middle aligned row">
28+
29+
<div class="ten wide computer sixteen wide tablet sixteen wide mobile column">
30+
<div class="ui large left aligned basic vertical segment">
31+
<h1 class="ui huge header">
32+
Read the Docs in your daily work
33+
</h1>
34+
35+
<p>
36+
Read the Docs helps you with building, reviewing and publishing documentation for your customers
37+
by following the <em>docs as code</em> pattern that you may be already using.
38+
Allow your readers to browse different versions of your documentation, switch between langauges and perform searches accross all your projects.
39+
They will appreciate you are using Read the Docs for your documentation.
40+
</p>
41+
42+
<div class="ui list">
43+
<div class="item"><i class="fad fa-check secondary icon"></i>Write documentation using a rich ecosystem of tools and markups.</div>
44+
<div class="item"><i class="fad fa-check secondary icon"></i>Preview each change before publishing.</div>
45+
<div class="item"><i class="fad fa-check secondary icon"></i>Automatically deploy the documentation on merge.</div>
46+
<div class="item"><i class="fad fa-check secondary icon"></i>Expose different versions of your documentation to readers.</div>
47+
</div>
48+
49+
<p>
50+
Read the Docs is the <em>all-in-one</em> solution for docs as code.
51+
</p>
52+
53+
</div>
54+
</div>
55+
56+
<div class="six wide computer twelve wide tablet sixteen wide mobile column">
57+
<div class="ui padded basic segment">
58+
<div class="ui relaxed list">
59+
60+
{%- set header_1 = "Write the documentation" %}
61+
{%- set slug_1 = "write" %}
62+
{%- set icon_1 = "fa-pencil" -%}
63+
<a href="#{{ slug_1 }}" class="ui small teal header item">
64+
<i class="fad {{ icon_1 }} secondary big icon"></i>
65+
<span class="content">
66+
{{ header_1 }}
67+
<span class="sub header">Write the documentation using your favourite editor and tool.</span>
68+
</span>
69+
</a>
70+
71+
{%- set header_2 = "Push the changes to Git" %}
72+
{%- set slug_2 = "git-integration" %}
73+
{%- set icon_2 = "fa-code-commit" -%}
74+
<a href="#{{ slug_2 }}" class="ui small header item">
75+
<i class="fad {{ icon_2 }} secondary big icon"></i>
76+
<span class="content">
77+
{{ header_2 }}
78+
<span class="sub header">Collaborate with your team by following the pull request and review workflow.</span>
79+
</span>
80+
</a>
81+
82+
{%- set header_3 = "Preview your pull request" %}
83+
{%- set slug_3 = "pull-request-previews" %}
84+
{%- set icon_3 = "fa-file-plus-minus" -%}
85+
<a href="#{{ slug_3 }}" class="ui small header item">
86+
<i class="fad {{ icon_3 }} secondary big icon"></i>
87+
<span class="content">
88+
{{ header_3 }}
89+
<span class="sub header">Verify changes to your documentation with a fully built documentation website for each pull request.</span>
90+
</span>
91+
</a>
92+
93+
{%- set header_4 = "One-click deployment" %}
94+
{%- set slug_4 = "one-click-deployment" %}
95+
{%- set icon_4 = "fa-rocket" -%}
96+
<a href="#{{ slug_4 }}" class="ui small header item">
97+
<i class="fad {{ icon_4 }} secondary big icon"></i>
98+
<span class="content">
99+
{{ header_4 }}
100+
<span class="sub header">Automatically deploy your documentation each time you <em>merge to main</em>.</span>
101+
</span>
102+
</a>
103+
104+
</div>
105+
</div>
106+
</div>
107+
108+
</div>
109+
</div>
110+
</div>
111+
112+
</section>
113+
114+
{% macro about_divide(text=None) %}
115+
<div class="ui text container">
116+
<div class="ui {%- if text %} horizontal {%- endif %} divider">
117+
{% if text %}{{ text }}{% endif %}
118+
</div>
119+
</div>
120+
{% endmacro %}
121+
122+
{{ about_divide() }}
123+
124+
<section>
125+
<div class="ui very padded container">
126+
<div class="ui vertically padded centered grid" id="{{ slug_1 }}">
127+
128+
{% call about.step(
129+
header=header_1,
130+
image="/images/usage/code-editor-light.png",
131+
image_alt="Visual Studio Code editor",
132+
icon=icon_1) %}
133+
{% markdown %}
134+
Write documentation using your favourite editor and tool (Sphinx, MkDocs, Docusaurus, Pelican, etc).
135+
Read the Docs doesn't force you to use any particular editor, or WebUI, or WYSIWYG editor.
136+
You can use the one you already love.
137+
{% endmarkdown %}
138+
{% endcall %}
139+
140+
</div>
141+
</div>
142+
143+
{{ about_divide() }}
144+
145+
<div class="ui very padded container" id="{{ slug_2 }}">
146+
<div class="ui vertically padded centered grid">
147+
148+
{% call about.step(
149+
header=header_2,
150+
image="/images/usage/pull-request-collaboration.png",
151+
image_alt="Opened pull request on GitHub",
152+
icon=icon_2) %}
153+
{% markdown %}
154+
Once you are done writing the documentation, push you changes to Git and open a pull request to collaborate with your team.
155+
Accept or reject suggestions from your co-workers while previewing the live changes on Read the Docs.
156+
{% endmarkdown %}
157+
158+
<a class="ui basic primary button" href="https://docs.readthedocs.io/page/reference/git-integration.html">
159+
<i class="fad fa-book icon" aria-hidden="true"></i>
160+
Documentation
161+
</a>
162+
163+
{% endcall %}
164+
165+
</div>
166+
</div>
167+
168+
{{ about_divide() }}
169+
170+
<div class="ui very padded container" id="{{ slug_3 }}">
171+
<div class="ui vertically padded centered grid">
172+
173+
{% call about.step(
174+
header=header_3,
175+
image="/images/docs-as-code/visual-diff.png",
176+
image_alt="Visual diff between two versions",
177+
icon=icon_3) %}
178+
{% markdown %}
179+
When the pull request opened, you and your team can see the live changes on Read the Docs to evaluate the look & feel,
180+
but also to find style issues that are impossible to find out from the diff code in the pull request.
181+
{% endmarkdown %}
182+
183+
<a class="ui basic primary button" href="https://docs.readthedocs.io/page/pull-requests.html">
184+
<i class="fad fa-book icon" aria-hidden="true"></i>
185+
Documentation
186+
</a>
187+
188+
{% endcall %}
189+
190+
</div>
191+
</div>
192+
193+
{{ about_divide() }}
194+
195+
<div class="ui very padded container" id="{{ slug_4 }}">
196+
<div class="ui vertically padded centered grid">
197+
198+
{% call about.step(
199+
header=header_4,
200+
image="/images/usage/documentation.png",
201+
image_alt="Documentation built on Read the Docs",
202+
icon=icon_4) %}
203+
{% markdown %}
204+
After getting an approval in your pull request and you merged it,
205+
Read the Docs will build and deploy those changes in production automatically.
206+
{% endmarkdown %}
207+
208+
{# TODO: Have a better docs page for deployment #}
209+
<a class="ui basic primary button" href="https://docs.readthedocs.io/page/builds.html">
210+
<i class="fad fa-book icon" aria-hidden="true"></i>
211+
Documentation
212+
</a>
213+
214+
{% endcall %}
215+
216+
</div>
217+
</div>
218+
219+
</section>
220+
221+
222+
{# Try it out code block #}
223+
{% include "includes/try-it-out.html" %}
224+
225+
{% block bottom_callout %}
226+
<section>
227+
<div class="ui very padded container">
228+
<div class="ui grid center aligned">
229+
<div class="row">
230+
<div class="column twelve wide computer sixteen wide tablet">
231+
<div class="ui basic vertical huge segment">
232+
<h2 class="ui center aligned header">
233+
Save time and headaches!
234+
</h2>
235+
236+
<p>
237+
Simplify you day to day work by writing, building, previewing and publishing your documentation with Read the Docs.
238+
Collaborate with all your team in an easy way that everybody understands and can immediately see the changes after pushing them to Git.
239+
</p>
240+
241+
<p>
242+
<a class="ui large teal stackable button"
243+
data-analytics="signup-modal"
244+
onclick="jQuery('#signup-modal').modal('show');">
245+
<i class="fad fa-rocket icon"></i>
246+
Sign up now
247+
</a>
248+
</p>
249+
</div>
250+
</div>
251+
</div>
252+
</div>
253+
</div>
254+
</section>
255+
{% endblock bottom_callout %}
256+
257+
</body>
258+
</html>

0 commit comments

Comments
 (0)