Skip to content

Add comparison index page. #350

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 96 additions & 0 deletions content/pages/comparisons/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
{# View this page at http://localhost:8080/comparisons/ #}

<html>
<head>
<title>Read the Docs vs Other Documentation Platforms</title>
<meta name="description" content="Compare Read the Docs features with other documentation platforms like GitHub Pages, GitBook, and Cloudflare Pages to find the best solution for your documentation needs." />
<meta name="template" content="page" />
<meta name="slug" content="comparisons" />
<meta name="status" content="hidden" />
</head>
<body>

{% import "partials/basic.html" as basic %}

<section>
{% call basic.header_lead(
header="Compare Read the Docs with other platforms")
%}
<p>
While there are many options for hosting documentation,
Read the Docs is purpose-built for technical documentation with features that make both documentation authors and readers more productive.
</p>
<p>
Compare Read the Docs with other popular documentation platforms to find the best solution for your needs.
</p>
{% endcall %}
</section>

<section>
<div class="ui very padded container">
<div class="ui three stackable cards">

{{ basic.comparison_card(
url="/comparisons/github-pages/",
logo_url="/images/github-logo.svg",
logo_alt="GitHub Pages logo",
title="GitHub Pages",
meta="Static site hosting",
description="GitHub Pages is primarily for static hosting, but lacks documentation-specific features. See how Read the Docs compares."
) }}

{{ basic.comparison_card(
url="/comparisons/gitbook/",
logo_url="/images/gitbook-logo.svg",
logo_alt="GitBook logo",
title="GitBook",
meta="Documentation platform",
description="GitBook offers documentation hosting but with limited flexibility. Learn how Read the Docs gives you more control."
) }}

{{ basic.comparison_card(
url="/comparisons/cloudflare-pages/",
logo_url="/images/cloudflare-pages-logo.svg",
logo_alt="Cloudflare Pages logo",
title="Cloudflare Pages",
meta="Web hosting platform",
description="Cloudflare Pages is built for SPA hosting and not documentation. See why Read the Docs is better suited for your docs."
) }}

</div>
</div>
</section>

<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">
<h2 class="ui center aligned header">
Ready to get started? <i class="fad fa-rocket icon"></i>
</h2>

<p>
Read the Docs is the all-in-one solution that provides everything you need
for hosting documentation, from authentication to versioning.
Try it today and see the difference!
</p>

<p>
<a class="ui large teal stackable button"
data-analytics="signup-modal"
onclick="jQuery('#signup-modal').modal('show');">
<i class="fad fa-rocket icon"></i>
Get started for free
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</section>

</body>
</html>
35 changes: 35 additions & 0 deletions content/partials/basic.html
Original file line number Diff line number Diff line change
Expand Up @@ -107,3 +107,38 @@ <h3 class="ui {{ size }} header">
<img class="ui fluid rounded image" src="{{ image }}" {%- if alt %} alt="{{ alt }}"{% endif -%} />
</div>
{% endmacro %}

{#
Comparison card with logo and description

Used for platform comparison pages to show different services that can be compared.

:param url: URL to the comparison page
:param logo_url: URL to the platform logo
:param logo_alt: Alt text for the logo
:param title: Card title/platform name
:param meta: Short description below title
:param description: Main card description
#}
{% macro comparison_card(url, logo_url, logo_alt, title, meta, description) %}
<a class="card" href="{{ url }}">
<div class="content">
<div class="ui basic padded segment" style="height: 100px; display: flex; align-items: center; justify-content: center;">
<div class="ui small centered image">
<img src="{{ logo_url }}" alt="{{ logo_alt }}" style="max-height: 50px; width: auto;">
Comment on lines +126 to +128
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should instead edit the images to get similar proportions and alignment.

.ui.small.image already controls the size and centering of the image, inline styles or a statically sized segment shouldn't be used to dictate this.

</div>
</div>
<div class="header">
{{ title }}
</div>
<div class="meta">{{ meta }}</div>
<div class="description">
{{ description }}
</div>
</div>
<div class="ui button">
<i class="fad fa-arrow-right icon"></i>
Compare with {{ title }}
</div>
</a>
{% endmacro %}
4 changes: 1 addition & 3 deletions readthedocs_theme/templates/includes/footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,7 @@ <h4 class="ui sub header">Learn more</h4>
<a class="item" href="https://docs.readthedocs.io">Documentation</a>
<a class="item" href="https://docs.readthedocs.io/page/tutorial/index.html">Getting started guide</a>
<a class="item" href="https://docs.readthedocs.io/page/config-file/index.html">Configure your project</a>
<a class="item" href="/comparisons/github-pages/">Comparison to GitHub Pages</a>
<a class="item" href="/comparisons/gitbook/">Comparison to GitBook</a>
<a class="item" href="/comparisons/cloudflare-pages/">Comparison to Cloudflare Pages</a>
<a class="item" href="/comparisons/">Compare to other platforms</a>
{% endblock menu_learn %}
</div>
</div>
Expand Down