Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Rework homepage #3579

Merged
merged 2 commits into from Feb 9, 2018
Merged

Rework homepage #3579

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
950db4b
Rework homepage
davidfischer Feb 5, 2018
ad6ce6e
Updates based on feedback
davidfischer Feb 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 39 additions & 0 deletions media/css/core.css
View file
Open in desktop
Expand Up @@ -297,6 +297,45 @@ div.menu-user div.menu-dropdown.menu-dropped {
.home-header-links .login { font-weight: bold; color: #e3e3e3; text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.5); }
.home-header-links .login:hover { text-align: center; color: #fff; }

section {
margin-bottom: 60px;
}
.home .lead {
font-size: 20px;
line-height: 30px;
}
.home .feature {
float: left;
width: 48%;
margin-left: 1%;
margin-right: 1%;
}

a.cta-btn {
/* Make this link look like a button */
width: 300px;
font-weight: bold;
text-align: center;
display: inline-block;
margin: .3em 0em;
font-size: 1.1em;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
background: #e6e6e6 url(../images/gradient.png) repeat-x bottom left;
background-color: #8ECC4C;
border: 1px solid #bfbfbf;
border-color: #6B9939;
border-bottom-color: #50732B;
padding: 8px 15px;
border-radius: 3px;
text-decoration: none;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
a.cta-btn:hover, a.cta-btn:active {
color: #fff;
}

/* wide search bar */

Expand Down
13 changes: 0 additions & 13 deletions readthedocs/core/views/__init__.py
View file
Open in desktop
Expand Up @@ -39,19 +39,6 @@ class HomepageView(TemplateView):
def get_context_data(self, **kwargs):
"""Add latest builds and featured projects."""
context = super(HomepageView, self).get_context_data(**kwargs)
latest = []
latest_builds = (
Build.objects
.filter(
project__privacy_level=constants.PUBLIC,
success=True,
)
.order_by('-date')
)[:100] # yapf: disable
for build in latest_builds:
if (build.project not in latest and len(latest) < 10):
latest.append(build.project)
context['project_list'] = latest
Copy link
Member

Choose a reason for hiding this comment

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

This was a killer query for our DB as well. Glad to have it gone :)

context['featured_list'] = Project.objects.filter(featured=True)
return context

Expand Down
36 changes: 17 additions & 19 deletions readthedocs/templates/base.html
View file
Open in desktop
Expand Up @@ -8,13 +8,15 @@

<!-- meta -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
{% block extra_metas %}{% endblock extra_metas %}

<link rel="icon" type="image/png" href="{{ MEDIA_URL }}images/favicon.png">

<!-- title -->
<title>{% block title %}{% endblock %}{% block head_title %}{% endblock %} | {% block branding %}Read the Docs {% endblock %}</title>

<!-- Google Analytics -->
<script type="text/javascript">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
Expand All @@ -37,31 +39,27 @@
{% block extra_links %}{% endblock %}

<!-- jquery -->
<script type="text/javascript" src="{% static 'vendor/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'vendor/jquery-migrate.js' %}"></script>
<script type="text/javascript" src="{% static 'vendor/jquery-ui.js' %}"></script>
<script type="text/javascript">
<script src="{% static 'vendor/jquery.js' %}"></script>
<script src="{% static 'vendor/jquery-migrate.js' %}"></script>
<script src="{% static 'vendor/jquery-ui.js' %}"></script>
<script >
require('jquery');
</script>

<script type="text/javascript" src="{{ MEDIA_URL }}javascript/instantsearch.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}javascript/base.js"></script>
<script type="text/javascript" src="{% static 'core/js/site.js' %}"></script>
<script type="text/javascript">
<script src="{{ MEDIA_URL }}javascript/instantsearch.js"></script>
<script src="{{ MEDIA_URL }}javascript/base.js"></script>
<script src="{% static 'core/js/site.js' %}"></script>
<script>
var site = require('core/site');
site.handle_notification_dismiss();
</script>

{% block extra_scripts %}{% endblock %}

<!-- typekit -->
<!-- Old typekit
<script type="text/javascript" src="//use.typekit.com/xgl8ypn.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
-->

<script type="text/javascript" src="//use.typekit.net/haq4xtp.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script src="//use.typekit.net/haq4xtp.js"></script>
<script>try{Typekit.load();}catch(e){}</script>

</head>

Expand Down Expand Up @@ -204,10 +202,10 @@ <h4>{% trans "Read the Docs" %}</h4>
</div>
<!-- END footer-->

</body>
<script>
{% block footerjs %}{% endblock %}
</script>

<script type="text/javascript">
{% block footerjs %}{% endblock %}
</script>
</body>

</html>
2 changes: 1 addition & 1 deletion readthedocs/templates/core/widesearchbar.html
View file
Open in desktop
Expand Up @@ -9,7 +9,7 @@ <h3>{% trans "Search all the docs" %}</h3>

<form action="{% url "search" %}" method="GET">
<div class="text-input-wrapper">
<input type="text" name="q" value="{{ term }}" id="id_site_search">
<input type="text" name="q" value="{{ term }}" id="id_site_search" placeholder="{% trans 'Search Read the Docs' %}">
</div>
<div class="submit-input-wrapper">
{% comment %} Translators: This is about starting a search {% endcomment %}
Expand Down
224 changes: 125 additions & 99 deletions readthedocs/templates/homepage.html
View file
Open in desktop
Expand Up @@ -4,6 +4,10 @@

{% load pagination_tags %}

{% block extra_metas %}
<meta name="description" content="{% trans "Read the Docs simplifies technical documentation by automating building, versioning, and hosting for you. Build up-to-date documentation for the web, print, and eReaders on every version control push automatically." %}">
Copy link
Member

Choose a reason for hiding this comment

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

eReaders is a bit odd here. Perhaps we should just say "for online and offline use" or something.

{% endblock extra_metas %}

{% block title %}{% trans "Home" %}{% endblock %}

{% block body_class %}home {% if not request.user.is_authenticated %}splash{% endif %}{% endblock %}
Expand Down Expand Up @@ -36,105 +40,127 @@

{% block content %}

<div class="module">
<div class="module-wrapper">

<div class="module-header">
<h3>{% trans "What is this place?" %}</h3>
<p>
{% blocktrans %}
Read the Docs hosts documentation, making it fully searchable and easy to find.
You can import your docs using any major version control system, including Mercurial, Git, Subversion, and Bazaar.
We support <a href="http://docs.readthedocs.io/en/latest/webhooks.html">webhooks</a> so your docs get built when you commit code.
There's also support for <a href="http://docs.readthedocs.io/en/latest/versions.html">versioning</a> so you can build docs from tags and branches of your code in your repository.
{% endblocktrans %}
</p>
<p>
{% blocktrans %}
Hosting documentation is free and simple,
<a href="https://docs.readthedocs.io/en/latest/getting_started.html">read our guide</a>
to get started!
{% endblocktrans %}
<p>
<p>
{% blocktrans %}
Read the Docs is <b>community supported</b>.
It depends on users like you to contribute to development,
support,
and operations.
You can learn more about how to <a href="https://docs.readthedocs.io/en/latest/contribute.html">contribute</a> in our docs.
Thanks so much to our wonderful <a href="https://docs.readthedocs.io/en/latest/team.html">community team</a> who helps us run the site.
Read the Docs wouldn't be possible without them.
Please consider joining today,
as we always need more contributors to the project.
{% endblocktrans %}
</p>
</div>

</div>
</div>

{% include "core/widesearchbar.html" %}

{% if featured_list %}
<!-- BEGIN projects list -->
<div class="module">
<div class="module-wrapper">

<div class="module-header">
<h3>{% trans "Featured Projects" %}</h3>
</div>

<div class="module-list">
<div class="module-list-wrapper">
<ul>
{% include "core/project_list_featured.html" %}
</ul>
</div>
</div>

</div>
</div>
<!-- END projects list -->
{% endif %}

<!-- BEGIN projects list -->
<div class="module">
<div class="module-wrapper">

<div class="module-header">
<h3>{% trans "Recently updated projects" %}</h3>
</div>

<div class="module-list">
<div class="module-list-wrapper">
<ul>
{% include "core/project_list_detailed.html" %}
</ul>
</div>
</div>

</div>
</div>
<!-- END projects list -->

<div>
<h3>{% trans "Read the Docs is funded by the community" %}</h3>
<p>
{% url "advertising" as advertising_url %}
{% url "donate" as sponsors_url %}
{% url "gold_detail" as gold_detail %}

Read the Docs is a huge resource that millions of developers rely on
for software documentation. It would not be possible without the
support of our
<a href="{{ sponsors_url | default:'https://readthedocs.org/sustainability/' }}">sponsors</a>,
<a href="{{ advertising_url | default:'https://readthedocs.org/sustainability/advertising/' }}">advertisers</a>,
and <a href="{{ gold_detail }}">readers like you</a>.
</p>
<p>
Hosting for the project is graciously provided by <a href="http://www.rackspace.com/cloud/">Rackspace</a>.
</p>
<!-- Lead -->
<section>
<h2>{% trans "Technical documentation lives here" %}</h2>
<p class="lead">
{% blocktrans %}
Read the Docs simplifies software documentation by automating building,
versioning, and hosting of your docs for you.
{% endblocktrans %}
</p>
</section>


<section>
<div class="feature">
<h3>Webhooks</h3>
<p>
{% blocktrans %}
Whenever you push code to your favorite version control system,
whether that is Git, Mercurial, Bazaar, or Subversion, we will
automatically build your docs so your code and documentation are
never out of sync.
{% endblocktrans %}
</p>
</div>
<div class="feature">
<h3>Free docs hosting</h3>
<p>
{% blocktrans %}
We will host your documentation for free forever.
There are no tricks. We help thousands of open source projects
share their docs.
{% endblocktrans %}
</p>
</div>
<div class="clearfix"></div>
</section>

<section>
<div class="feature">
<h3>Multiple formats</h3>
<p>
{% blocktrans %}
Of course we build and host your docs for the web, but they are
also vieweable as PDFs, epubs (for eReaders), and as single page
HTML documents. No additional configuration is required.
{% endblocktrans %}
</p>
</div>
<div class="feature">
<h3>Multiple versions</h3>
<p>
{% blocktrans %}
We can host and build multiple versions of your docs so having a
1.0 version of your docs and a 2.0 version of your docs is as easy
as having a separate branch or tag in version control.
Copy link
Member

Choose a reason for hiding this comment

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

"version control software"?

{% endblocktrans %}
</p>
</div>
<div class="clearfix"></div>
</section>

<!-- Call to action -->
<section>
<p style="text-align: center">
<a href="https://docs.readthedocs.io/en/latest/getting_started.html" class="cta-btn">{% trans 'Getting started guide' %}</a>
</p>
</section>

<!-- Search -->
<section>
{% include "core/widesearchbar.html" %}
<section>

{% if featured_list %}
<!-- BEGIN projects list -->
<section>
<h3>{% trans "Featured Projects" %}</h3>
<div class="module-list">
<div class="module-list-wrapper">
<ul style="margin-bottom: 0">
{% include "core/project_list_featured.html" %}
</ul>
</div>
</div>
</section>
<!-- END projects list -->
{% endif %}

<!-- Funding and Contributing -->
<section>
<h2>{% trans "Read the Docs is funded by the community" %}</h2>
<p>

{% url "advertising" as advertising_url %}
{% url "donate" as sponsors_url %}
{% url "gold_detail" as gold_detail %}

{% blocktrans %}
Read the Docs is a huge resource that millions of developers rely on
for software documentation. It would not be possible without the
support of our
<a href="{{ sponsors_url }}">sponsors</a>,
<a href="{{ advertising_url }}">advertisers</a>,
and <a href="{{ gold_detail }}">readers like you</a>.
{% endblocktrans %}
</p>

<p>
{% blocktrans %}
Read the Docs is <strong>community supported</strong>.
It depends on users like you to contribute to development, support, and operations.
You can learn more about how to <a href="https://docs.readthedocs.io/en/latest/contribute.html">contribute</a> in our docs.
Thanks so much to our wonderful <a href="https://docs.readthedocs.io/en/latest/team.html">community team</a> who helps us run the site.
Read the Docs wouldn't be possible without them.
{% endblocktrans %}
</p>

<p>
{% blocktrans %}
Hosting for the project is graciously provided by <a href="http://www.rackspace.com/cloud/">Rackspace</a>.
{% endblocktrans %}
</p>
</section>
{% endblock %}