Skip to content

Commit af77787

Browse files
ericholscherhumitos
ericholscher
and
humitos
authored
Add Markdoc page to website marketing (#336)
This links to our newly created doc page <!-- readthedocs-preview readthedocs-about start --> ---- 📚 Documentation preview 📚: https://readthedocs-about--336.org.readthedocs.build/ <!-- readthedocs-preview readthedocs-about end --> --------- Co-authored-by: Manuel Kaufmann <[email protected]>
1 parent 2c814d6 commit af77787

File tree

3 files changed

+231
-0
lines changed

3 files changed

+231
-0
lines changed

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

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<div class="ui container">
2+
<div class="ui horizontal divider">Try it out</div>
3+
</div>
4+
5+
<section id="try-it-out">
6+
<div class="ui padded container">
7+
<h2 class="ui huge center aligned header">
8+
Deploy in 5 minutes and see for yourself
9+
</h2>
10+
11+
<div class="ui very padded centered grid">
12+
13+
<div class="ten wide computer sixteen wide tablet sixteen wide mobile column">
14+
<div class="ui large left aligned basic vertical segment">
15+
16+
{# Stylized code blocks #}
17+
{% call technical.code_block(title="<code>.readthedocs.yaml</code>", icon="fa-file") %}
18+
{% markdown %}
19+
20+
```yaml
21+
version: 2
22+
23+
build:
24+
os: ubuntu-24.04
25+
tools:
26+
nodejs: "22"
27+
commands:
28+
# Install dependencies
29+
- cd docs/ && npm install
30+
# Build the site
31+
- cd docs/ && npm run build
32+
# Copy generated files into Read the Docs directory
33+
- mkdir --parents $READTHEDOCS_OUTPUT/html/
34+
- cp --verbose --recursive docs/out/* $READTHEDOCS_OUTPUT/html/
35+
36+
```
37+
38+
{% endmarkdown %}
39+
{% endcall %}
40+
</div>
41+
</div>
42+
43+
<div class="middle aligned left aligned six wide computer twelve wide tablet sixteen wide mobile column">
44+
<div class="ui padded basic segment">
45+
<div class="ui relaxed list">
46+
47+
{%- set header_1 = "Create an account" %}
48+
{%- set icon_1 = "fa-square-1" -%}
49+
<span class="ui small teal header item">
50+
<i class="fad {{ icon_1 }} secondary big icon"></i>
51+
<span class="content">
52+
{{ header_1 }}
53+
<span class="sub header">Sign up with GitHub or your email.</span>
54+
</span>
55+
</span>
56+
57+
{%- set header_2 = "Import your project" %}
58+
{%- set icon_2 = "fa-square-2" -%}
59+
<span class="ui small header item">
60+
<i class="fad {{ icon_2 }} secondary big icon"></i>
61+
<span class="content">
62+
{{ header_2 }}
63+
<span class="sub header">Select a project from your existing Git repositories.</span>
64+
</span>
65+
</span>
66+
67+
{%- set header_3 = "Add YAML config" %}
68+
{%- set icon_3 = "fa-square-3" -%}
69+
<span class="ui small header item">
70+
<i class="fad {{ icon_3 }} secondary big icon"></i>
71+
<span class="content">
72+
{{ header_3 }}
73+
<span class="sub header">Save this file as <code>.readthedocs.yaml</code>, and update the commands as necessary.</span>
74+
</span>
75+
</span>
76+
77+
{%- set header_4 = "Your docs build on every commit" %}
78+
{%- set icon_4 = "fa-square-4" -%}
79+
<span class="ui small header item">
80+
<i class="fad {{ icon_4 }} secondary big icon"></i>
81+
<span class="content">
82+
{{ header_4 }}
83+
<span class="sub header">Like magic.</span>
84+
</span>
85+
</span>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
</section>

‎content/pages/tools/markdoc.html

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
{#
2+
The goal of this page is to sell users who are already authoring in Markdoc on the benefits of our hosting.
3+
We aren't focusing on generic Markdoc benefits,
4+
but the unique differentiation of our platform.
5+
#}
6+
7+
{#
8+
View this page at http://localhost:8080/tools/markdoc/
9+
#}
10+
11+
<html>
12+
<head>
13+
<title>Optimize your Markdoc documentation with our hosting</title>
14+
<meta name="template" content="page" />
15+
<meta name="slug" content="tools/markdoc" />
16+
<meta name="status" content="hidden" />
17+
<meta name="description" content="Read the Docs works seamlessly with Markdoc for Markdown based documentation. Read the Docs adds great features such as search-as-you-type, previews from Git, and much more." />
18+
</head>
19+
<body>
20+
21+
{% import "partials/basic.html" as basic %}
22+
{% import "partials/marketing.html" as marketing %}
23+
{% import "partials/technical.html" as technical %}
24+
{% import "partials/homepage.html" as homepage %}
25+
26+
<section>
27+
{% call basic.header_image(
28+
header="Optimize your Markdoc documentation with our hosting",
29+
image="/images/homepage.png",
30+
image_alt="Examples of Read the Docs hosted documentation",
31+
vertical_align="middle")
32+
%}
33+
{# TODO: Add a GIF of using hoverxref & livesearch #}
34+
<p>
35+
Automatically deploy powerful search, versioning, and collaboration to your Markdoc projects.
36+
</p>
37+
38+
<p class="ui basic padded vertical segment">
39+
<a class="ui large teal stackable button"
40+
data-analytics="signup-modal"
41+
onclick="jQuery('#signup-modal').modal('show');">
42+
<i class="fad fa-play icon"></i>
43+
Create an account
44+
</a>
45+
<a href="https://test-builds.readthedocs.io/en/markdoc/" class="ui large stackable button" target="_blank">
46+
<i class="fad fa-camera-retro icon"></i>
47+
See a demo
48+
</a>
49+
</p>
50+
{% endcall %}
51+
</section>
52+
53+
<section id="features">
54+
{% call marketing.highlight_list() %}
55+
56+
{% call marketing.highlight_item(
57+
icon="olive fa-people-arrows",
58+
icon_style="--fa-secondary-color: violet; --fa-secondary-opacity: 1;",
59+
header="Easily share with deploy previews",
60+
color="violet") %}
61+
{% markdown %}
62+
Receive feedback from your team,
63+
and <strong>have confidence in changes</strong> before they go live.
64+
{% endmarkdown %}
65+
{% endcall %}
66+
67+
{% call marketing.highlight_item(
68+
icon="yellow fa-magnifying-glass",
69+
icon_style="--fa-secondary-color: white; --fa-secondary-opacity: 1;",
70+
header="Always find what you need",
71+
color="violet") %}
72+
{% markdown %}
73+
Search across all your projects with our search-as-you-type interface,
74+
and <strong>never lose documentation again</strong>.
75+
{% endmarkdown %}
76+
{% endcall %}
77+
78+
{% call marketing.highlight_item(
79+
icon="fa-eye",
80+
header="Keep your focus with link previews",
81+
color="violet") %}
82+
83+
{% markdown %}
84+
Provide context on every internal link in your docs with instant preview links.
85+
<strong>Skim the content without opening *another* tab</strong>.
86+
{% endmarkdown %}
87+
{% endcall %}
88+
89+
{% endcall %}
90+
</section>
91+
92+
{# Try it out code block #}
93+
{% include "includes/try-it-out-markdoc.html" %}
94+
95+
{# Markdoc user testimonials #}
96+
{# {% include "includes/users-markdoc.html" %} #}
97+
98+
{% block homepage_bottom_callout %}
99+
<section>
100+
<div class="ui very padded container">
101+
<div class="ui grid center aligned">
102+
103+
<div class="row">
104+
<div class="column twelve wide computer sixteen wide tablet">
105+
106+
{#
107+
TODO replace this block with something more actionable. It's
108+
not saying anything new at this point in the page, and the call
109+
to action is not strong.
110+
#}
111+
<div class="ui basic vertical huge segment">
112+
<p>
113+
<b>Import your Markdoc project today.</b>
114+
</p>
115+
116+
<p>
117+
<a class="ui large teal stackable button"
118+
data-analytics="signup-modal"
119+
onclick="jQuery('#signup-modal').modal('show');">
120+
<i class="fad fa-play icon"></i>
121+
Create an account
122+
</a>
123+
<a href="https://docs.readthedocs.io/en/stable/intro/markdoc.html" class="ui large stackable button" target="_blank">
124+
<i class="fad fa-book icon"></i>
125+
Learn more
126+
</a>
127+
</p>
128+
</div>
129+
130+
</div>
131+
</div>
132+
133+
</div>
134+
</div>
135+
</section>
136+
{% endblock homepage_bottom_callout %}
137+
138+
</body>
139+
</html>

‎readthedocs_theme/templates/includes/topnav.html

+1
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
<a class="item" href="{{ SITEURL }}/tools/sphinx">Sphinx</a>
4747
<a class="item" href="{{ SITEURL }}/tools/mkdocs">Mkdocs</a>
4848
<a class="item" href="{{ SITEURL }}/tools/jupyter-book">Jupyter Book</a>
49+
<a class="item" href="{{ SITEURL }}/tools/markdoc">Markdoc</a>
4950
<a class="item" href="{{ SITEURL }}/tools/custom">Other tools</a>
5051
</div>
5152
</div>

0 commit comments

Comments
 (0)