-
Notifications
You must be signed in to change notification settings - Fork 7
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
New landing page to test marketing copy #152
Merged
Merged
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
ccf6db6
Add a basic skeleton of a Sphinx landing page.
ericholscher 79be83a
Lots of content updates from pairing with Manuel!
ericholscher ee00657
Update logos from our happy users
humitos 15ab468
Anthony feedback addressed
humitos 51a23ed
Fix sphinx post file path
agjohnson 7e107ff
Increase padding on images
agjohnson 3fdc509
Fix tool/sphinx logo card display
agjohnson 6f11e8a
Add section back for testimonials/example users section
agjohnson 4eb40a2
Fix SUI element structure around the config example
agjohnson c6f19ff
Fix note on page url
agjohnson 42a92a7
Link to the landing page from the footer
ericholscher File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,287 @@ | ||
| {# | ||
| The goal of this page is to sell users who are already authoring in Sphinx on the benefits of our hosting. | ||
| We aren't focusing on generic Sphinx benefits, | ||
| but the unique differentiation of our platform. | ||
| #} | ||
| <html> | ||
| <head> | ||
| <title>Supercharge your Sphinx docs hosting</title> | ||
| <meta name="template" content="page" /> | ||
| <meta name="slug" content="tools/sphinx" /> | ||
| <meta name="status" content="hidden" /> | ||
| <meta name="description" content="Learn more about the best Sphinx hosting option in the world 🎉" /> | ||
| </head> | ||
| <body> | ||
|
|
||
| {# | ||
| View this page at http://localhost:8080/tools/sphinx/index.html | ||
| #} | ||
|
|
||
| {% import "partials/basic.html" as basic %} | ||
| {% import "partials/marketing.html" as marketing %} | ||
| {% import "partials/technical.html" as technical %} | ||
| {% import "partials/homepage.html" as homepage %} | ||
|
|
||
| {% block signup_modal %} | ||
| {{ homepage.signup_modal("signup_modal") }} | ||
| {% endblock signup_modal %} | ||
|
|
||
| <section> | ||
| {% call basic.header_image( | ||
| header="Supercharge your Sphinx docs and impress your readers", | ||
| image="/images/readthedocs-thumb.png", | ||
| image_alt="Examples of Read the Docs hosted documentation", | ||
| vertical_align="middle") | ||
| %} | ||
| {# TODO: Add a GIF of using hoverxref & livesearch #} | ||
| <p> | ||
| Our powerful Sphinx hosting improves the reading and authoring experience for everyone who interacts with your documentation. | ||
| </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/tutorial/index.html" class="ui large stackable button"> | ||
| Start our tutorial | ||
| </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 quickly find the documentation and API reference information you need. | ||
| <strong>Never lose documentation again</strong>. | ||
| {% endmarkdown %} | ||
| {% endcall %} | ||
|
|
||
| {% call marketing.highlight_item( | ||
| icon="fa-eye", | ||
| header="Keep your focus with link previews", | ||
| color="violet") %} | ||
|
|
||
| {# TODO: Add link preview to the `link previews` docs #} | ||
|
|
||
| {% 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> | ||
|
|
||
| <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 | ||
| version: 2 | ||
| build: | ||
| os: ubuntu-22.04 | ||
| tools: | ||
| python: "3.10" | ||
| # You can also specify other tool versions: | ||
| # nodejs: "16" | ||
|
|
||
| # Build documentation in the docs/ directory with Sphinx | ||
| sphinx: | ||
| configuration: docs/conf.py | ||
|
|
||
| # Dependencies required to build your docs | ||
| python: | ||
| install: | ||
| - requirements: docs/requirements.txt | ||
| ``` | ||
|
|
||
| {% 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 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">Copy this example, it probably does what you want 😉</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> | ||
|
|
||
|
|
||
| {# TODO: Turn these into testimonials. #} | ||
| <section> | ||
| <div class="ui container"> | ||
| {{ basic.header_icon( | ||
| header="Join thousands of happy users", | ||
| subheader="", | ||
| icon="purple fa-message-lines", | ||
| icon_style="--fa-secondary-color: blueviolet;" | ||
| ) }} | ||
| <div class="ui three link stackable cards"> | ||
| <a href="https://flask.palletsprojects.com/en/2.2.x/" class="card"> | ||
| <div class="content"> | ||
| <div class="ui center aligned basic segment"> | ||
| <img class="ui small image" src="{{ SITE_URL }}/images/flask-logo.png" alt="Flask logo" /> | ||
| </div> | ||
| <div class="header">Flask</div> | ||
| <div class="meta"> | ||
| Web Framework | ||
| </div> | ||
| <div class="description"> | ||
| Flask is a Python web framework built with a small core and easy-to-extend philosophy. | ||
| </div> | ||
| </div> | ||
| </a> | ||
|
|
||
| <a href="https://docs.jupyter.org/en/latest/" class="card"> | ||
| <div class="content"> | ||
| <div class="ui center aligned basic segment"> | ||
| <img class="ui small image" src="{{ SITE_URL }}/images/jupyter-logo.png" alt="Jupyter logo"> | ||
| </div> | ||
| <div class="header">Jupyter</div> | ||
| <div class="meta"> | ||
| Data Science Environment | ||
| </div> | ||
| <div class="description"> | ||
| Jupyter Notebook is a web-based interactive computational environment for creating notebook documents. | ||
| </div> | ||
| </div> | ||
| </a> | ||
|
|
||
| <a href="https://docs.godotengine.org/en/stable/index.html" class="card"> | ||
| <div class="content"> | ||
| <div class="ui center aligned basic segment"> | ||
| <img class="ui small image" src="{{ SITE_URL }}/images/godot-logo.png" alt="Godot Engine logo"> | ||
| </div> | ||
| <div class="header">Godot Engine</div> | ||
| <div class="meta"> | ||
| Game Engine | ||
| </div> | ||
| <div class="description"> | ||
| Godot Engine is a free and open source community-driven 2D and 3D game engine. | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| {% 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>Get your docs online in 5 minutes.</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> | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
My original feedback is here: #152 (comment)
I fixed the HTML structure, but might want to tweak this more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yea, I don't love this heading. We were trying to address the idea that we do a lot less than something like GH actions but also more around docs, but that focus is valuable. I think that is still a strong selling point, and "upgrade your docs" doesn't really tell me much.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Aye, and that still seems like a worthwhile focus, but for different supporting content. The config file shows how to use RTD, but we haven't explained on this page that our focus is narrower than other services, or that it's a problem using a service that has too broad a focus.
We could/should totally have that content somewhere on our site though, but I'd expect the supporting content to describe why rolling your own solution is a bad idea, or show all the pieces you'd have to glue together to make RTD, etc.
Also, I'm very not tied to the heading I put up. The config example content is describing how easy it is to get benefits from RTD, so could use a heading that matches that sentiment.