Skip to content

Commit

Permalink
Add basic landing page for any tool (#337)
Browse files Browse the repository at this point in the history 
This is just a starting point with a generic config.

Fixes #301


<!-- readthedocs-preview readthedocs-about start -->
----
📚 Documentation preview 📚:
https://readthedocs-about--337.org.readthedocs.build/

<!-- readthedocs-preview readthedocs-about end -->

---------

Co-authored-by: Anthony <[email protected]>
  • Loading branch information
@ericholscher @agjohnson
ericholscher and agjohnson authored Dec 11, 2024
1 parent 7a42d75 commit 2c814d6
Show file tree
Hide file tree
Showing 3 changed files with 233 additions and 0 deletions.
108 changes: 108 additions & 0 deletions content/includes/try-it-out-custom.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<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">
Upgrade your documentation with Read the Docs
</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
# Read the Docs configuration file for Sphinx projects
# See https://docs.readthedocs.io/en/stable/config-file/v2.html for details

# Required
version: 2

# Set the OS, Python version and other tools you might need
build:
os: ubuntu-24.04
tools:
python: "3.12"
nodejs: "20"
# You can also specify other tool versions:
# rust: "1.70"
# golang: "1.20"

# Support any tool with custom build commands
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 --recursive docs/build/* $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">
<a data-analytics="signup-modal"
onclick="jQuery('#signup-modal').modal('show');">
Sign up
</a>
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 your existing Git repositories with a 1-click interface.</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">Start with this example, and then adapt it.</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>
124 changes: 124 additions & 0 deletions content/pages/custom.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
{#
The goal of this page is to highlight the flexibility of our platform in supporting any documentation tool,
with full customization of the build commands you can run.
#}

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

<html>
<head>
<title>Host any documentation tool</title>
<meta name="template" content="page" />
<meta name="slug" content="tools/custom" />
<meta name="status" content="hidden" />
<meta name="description" content="Read the Docs supports any documentation tool by allowing full control of the build commands your project runs. Enjoy powerful 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="Deploy with any tool",
image="/images/homepage.png",
image_alt="Examples of Read the Docs hosted documentation",
vertical_align="middle")
%}
<p>
Read the Docs supports any documentation tool by allowing full control of the build commands your project runs.
Enjoy powerful features such as search-as-you-type, previews from Git, and much more.
</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://docs.readthedocs.io/en/stable/build-customization.html#override-the-build-process" class="ui large stackable button">
Learn more
</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="Collaborate 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-cogs",
header="Full customization of build commands",
color="violet") %}
{% markdown %}
Customize the build commands to suit your project's needs.
<strong>Flexibility to support any tool</strong>.
{% endmarkdown %}
{% endcall %}

{% endcall %}
</section>

{# Try it out code block #}
{% include "includes/try-it-out-custom.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">

<div class="ui basic vertical huge segment">
<p>
<b>Get started with any documentation tool 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>
</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/custom">Other tools</a>
</div>
</div>
{% endif %}
Expand Down

0 comments on commit 2c814d6

Please sign in to comment.