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

Rework homepage #3579

Merged
merged 2 commits into from
Feb 9, 2018
Merged

Rework homepage #3579

Show file tree
Hide file tree
Changes from all commits
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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions media/css/core.css
View file
Open in desktop
Original file line number Diff line number Diff line change
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
14 changes: 1 addition & 13 deletions readthedocs/core/views/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,20 +39,8 @@ 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)
context['projects_count'] = Project.objects.count()
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I timed this against the prod database and it ran in ~20ms. If that's too expensive, we could consider caching it.

Copy link
Member

Choose a reason for hiding this comment

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

Should be fine, but probably worth caching since that seems like a lot of time for no real reason. We can likely just use the Django view cache decorator at a minute or 5 minute interval, if we don't have anything much live updating!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't know if we can cache the whole page especially for logged in users. They have the username/dashboard fragment at the top. Perhaps we could do something with the cache template tag.

return context


Expand Down
36 changes: 17 additions & 19 deletions readthedocs/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
228 changes: 128 additions & 100 deletions readthedocs/templates/homepage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
{% extends "base.html" %}

{% load i18n %}

{% load humanize %}
{% 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 offline use on every version control push automatically." %}">
{% 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,129 @@

{% 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>Free docs hosting</h3>
<p>
{% with projects_count_intcomma=projects_count|intcomma %}
{% blocktrans %}
We will host your documentation for free forever.
There are no tricks. We help {{ projects_count_intcomma }} open source projects
share their docs.
{% endblocktrans %}
{% endwith %}
</p>
</div>
<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="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, as single page HTML, and for eReaders.
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 your version control system.
{% 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 %}