Skip to content

Commit

Permalink
Add Markdoc page to website marketing (#336)
Browse files Browse the repository at this point in the history 
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]>
  • Loading branch information
@ericholscher @humitos
ericholscher and humitos authored Dec 12, 2024
1 parent 2c814d6 commit af77787
Show file tree
Hide file tree
Showing 3 changed files with 231 additions and 0 deletions.
91 changes: 91 additions & 0 deletions content/includes/try-it-out-markdoc.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<div class="ui container">
<div class="ui horizontal divider">Try it out</div>
</div>

<section id="try-it-out">
<div class="ui padded container">
<h2 class="ui huge center aligned header">
Deploy in 5 minutes and see for yourself
</h2>

<div class="ui very padded centered grid">

<div class="ten wide computer sixteen wide tablet sixteen wide mobile column">
<div class="ui large left aligned basic vertical segment">

{# Stylized code blocks #}
{% call technical.code_block(title="<code>.readthedocs.yaml</code>", icon="fa-file") %}
{% markdown %}

```yaml
version: 2

build:
os: ubuntu-24.04
tools:
nodejs: "22"
commands:
# Install dependencies
- cd docs/ && npm install
# Build the site
- cd docs/ && npm run build
# Copy generated files into Read the Docs directory
- mkdir --parents $READTHEDOCS_OUTPUT/html/
- cp --verbose --recursive docs/out/* $READTHEDOCS_OUTPUT/html/

```

{% endmarkdown %}
{% endcall %}
</div>
</div>

<div class="middle aligned left aligned six wide computer twelve wide tablet sixteen wide mobile column">
<div class="ui padded basic segment">
<div class="ui relaxed list">

{%- set header_1 = "Create an account" %}
{%- set icon_1 = "fa-square-1" -%}
<span class="ui small teal header item">
<i class="fad {{ icon_1 }} secondary big icon"></i>
<span class="content">
{{ header_1 }}
<span class="sub header">Sign up with GitHub or your email.</span>
</span>
</span>

{%- set header_2 = "Import your project" %}
{%- set icon_2 = "fa-square-2" -%}
<span class="ui small header item">
<i class="fad {{ icon_2 }} secondary big icon"></i>
<span class="content">
{{ header_2 }}
<span class="sub header">Select a project from your existing Git repositories.</span>
</span>
</span>

{%- set header_3 = "Add YAML config" %}
{%- set icon_3 = "fa-square-3" -%}
<span class="ui small header item">
<i class="fad {{ icon_3 }} secondary big icon"></i>
<span class="content">
{{ header_3 }}
<span class="sub header">Save this file as <code>.readthedocs.yaml</code>, and update the commands as necessary.</span>
</span>
</span>

{%- set header_4 = "Your docs build on every commit" %}
{%- set icon_4 = "fa-square-4" -%}
<span class="ui small header item">
<i class="fad {{ icon_4 }} secondary big icon"></i>
<span class="content">
{{ header_4 }}
<span class="sub header">Like magic.</span>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
139 changes: 139 additions & 0 deletions content/pages/tools/markdoc.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
{#
The goal of this page is to sell users who are already authoring in Markdoc on the benefits of our hosting.
We aren't focusing on generic Markdoc benefits,
but the unique differentiation of our platform.
#}

{#
View this page at http://localhost:8080/tools/markdoc/
#}

<html>
<head>
<title>Optimize your Markdoc documentation with our hosting</title>
<meta name="template" content="page" />
<meta name="slug" content="tools/markdoc" />
<meta name="status" content="hidden" />
<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." />
</head>
<body>

{% import "partials/basic.html" as basic %}
{% import "partials/marketing.html" as marketing %}
{% import "partials/technical.html" as technical %}
{% import "partials/homepage.html" as homepage %}

<section>
{% call basic.header_image(
header="Optimize your Markdoc documentation with our hosting",
image="/images/homepage.png",
image_alt="Examples of Read the Docs hosted documentation",
vertical_align="middle")
%}
{# TODO: Add a GIF of using hoverxref & livesearch #}
<p>
Automatically deploy powerful search, versioning, and collaboration to your Markdoc projects.
</p>

<p class="ui basic padded vertical segment">
<a class="ui large teal stackable button"
data-analytics="signup-modal"
onclick="jQuery('#signup-modal').modal('show');">
<i class="fad fa-play icon"></i>
Create an account
</a>
<a href="https://test-builds.readthedocs.io/en/markdoc/" class="ui large stackable button" target="_blank">
<i class="fad fa-camera-retro icon"></i>
See a demo
</a>
</p>
{% endcall %}
</section>

<section id="features">
{% call marketing.highlight_list() %}

{% call marketing.highlight_item(
icon="olive fa-people-arrows",
icon_style="--fa-secondary-color: violet; --fa-secondary-opacity: 1;",
header="Easily share with deploy previews",
color="violet") %}
{% markdown %}
Receive feedback from your team,
and <strong>have confidence in changes</strong> before they go live.
{% endmarkdown %}
{% endcall %}

{% call marketing.highlight_item(
icon="yellow fa-magnifying-glass",
icon_style="--fa-secondary-color: white; --fa-secondary-opacity: 1;",
header="Always find what you need",
color="violet") %}
{% markdown %}
Search across all your projects with our search-as-you-type interface,
and <strong>never lose documentation again</strong>.
{% endmarkdown %}
{% endcall %}

{% call marketing.highlight_item(
icon="fa-eye",
header="Keep your focus with link previews",
color="violet") %}

{% markdown %}
Provide context on every internal link in your docs with instant preview links.
<strong>Skim the content without opening *another* tab</strong>.
{% endmarkdown %}
{% endcall %}

{% endcall %}
</section>

{# Try it out code block #}
{% include "includes/try-it-out-markdoc.html" %}

{# Markdoc user testimonials #}
{# {% include "includes/users-markdoc.html" %} #}

{% block homepage_bottom_callout %}
<section>
<div class="ui very padded container">
<div class="ui grid center aligned">

<div class="row">
<div class="column twelve wide computer sixteen wide tablet">

{#
TODO replace this block with something more actionable. It's
not saying anything new at this point in the page, and the call
to action is not strong.
#}
<div class="ui basic vertical huge segment">
<p>
<b>Import your Markdoc project today.</b>
</p>

<p>
<a class="ui large teal stackable button"
data-analytics="signup-modal"
onclick="jQuery('#signup-modal').modal('show');">
<i class="fad fa-play icon"></i>
Create an account
</a>
<a href="https://docs.readthedocs.io/en/stable/intro/markdoc.html" class="ui large stackable button" target="_blank">
<i class="fad fa-book icon"></i>
Learn more
</a>
</p>
</div>

</div>
</div>

</div>
</div>
</section>
{% endblock homepage_bottom_callout %}

</body>
</html>
1 change: 1 addition & 0 deletions readthedocs_theme/templates/includes/topnav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
<a class="item" href="{{ SITEURL }}/tools/sphinx">Sphinx</a>
<a class="item" href="{{ SITEURL }}/tools/mkdocs">Mkdocs</a>
<a class="item" href="{{ SITEURL }}/tools/jupyter-book">Jupyter Book</a>
<a class="item" href="{{ SITEURL }}/tools/markdoc">Markdoc</a>
<a class="item" href="{{ SITEURL }}/tools/custom">Other tools</a>
</div>
</div>
Expand Down

0 comments on commit af77787

Please sign in to comment.