Skip to content

Commit 483a7a5

Browse files
ericholscherericholscher
authored
Merge pull request readthedocs#3579 from davidfischer/homepage-rework
Rework homepage
2 parents ee81f28 + ad6ce6e commit 483a7a5

File tree

5 files changed

+186
-133
lines changed

5 files changed

+186
-133
lines changed

‎media/css/core.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,45 @@ div.menu-user div.menu-dropdown.menu-dropped {
297297
.home-header-links .login { font-weight: bold; color: #e3e3e3; text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.5); }
298298
.home-header-links .login:hover { text-align: center; color: #fff; }
299299

300+
section {
301+
margin-bottom: 60px;
302+
}
303+
.home .lead {
304+
font-size: 20px;
305+
line-height: 30px;
306+
}
307+
.home .feature {
308+
float: left;
309+
width: 48%;
310+
margin-left: 1%;
311+
margin-right: 1%;
312+
}
313+
314+
a.cta-btn {
315+
/* Make this link look like a button */
316+
width: 300px;
317+
font-weight: bold;
318+
text-align: center;
319+
display: inline-block;
320+
margin: .3em 0em;
321+
font-size: 1.1em;
322+
color: #fff;
323+
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
324+
background: #e6e6e6 url(../images/gradient.png) repeat-x bottom left;
325+
background-color: #8ECC4C;
326+
border: 1px solid #bfbfbf;
327+
border-color: #6B9939;
328+
border-bottom-color: #50732B;
329+
padding: 8px 15px;
330+
border-radius: 3px;
331+
text-decoration: none;
332+
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
333+
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
334+
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
335+
}
336+
a.cta-btn:hover, a.cta-btn:active {
337+
color: #fff;
338+
}
300339

301340
/* wide search bar */
302341

‎readthedocs/core/views/__init__.py

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,20 +39,8 @@ class HomepageView(TemplateView):
3939
def get_context_data(self, **kwargs):
4040
"""Add latest builds and featured projects."""
4141
context = super(HomepageView, self).get_context_data(**kwargs)
42-
latest = []
43-
latest_builds = (
44-
Build.objects
45-
.filter(
46-
project__privacy_level=constants.PUBLIC,
47-
success=True,
48-
)
49-
.order_by('-date')
50-
)[:100] # yapf: disable
51-
for build in latest_builds:
52-
if (build.project not in latest and len(latest) < 10):
53-
latest.append(build.project)
54-
context['project_list'] = latest
5542
context['featured_list'] = Project.objects.filter(featured=True)
43+
context['projects_count'] = Project.objects.count()
5644
return context
5745

5846

‎readthedocs/templates/base.html

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,15 @@
88

99
<!-- meta -->
1010
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
11+
{% block extra_metas %}{% endblock extra_metas %}
12+
1113
<link rel="icon" type="image/png" href="{{ MEDIA_URL }}images/favicon.png">
1214

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

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

3941
<!-- jquery -->
40-
<script type="text/javascript" src="{% static 'vendor/jquery.js' %}"></script>
41-
<script type="text/javascript" src="{% static 'vendor/jquery-migrate.js' %}"></script>
42-
<script type="text/javascript" src="{% static 'vendor/jquery-ui.js' %}"></script>
43-
<script type="text/javascript">
42+
<script src="{% static 'vendor/jquery.js' %}"></script>
43+
<script src="{% static 'vendor/jquery-migrate.js' %}"></script>
44+
<script src="{% static 'vendor/jquery-ui.js' %}"></script>
45+
<script >
4446
require('jquery');
4547
</script>
4648

47-
<script type="text/javascript" src="{{ MEDIA_URL }}javascript/instantsearch.js"></script>
48-
<script type="text/javascript" src="{{ MEDIA_URL }}javascript/base.js"></script>
49-
<script type="text/javascript" src="{% static 'core/js/site.js' %}"></script>
50-
<script type="text/javascript">
49+
<script src="{{ MEDIA_URL }}javascript/instantsearch.js"></script>
50+
<script src="{{ MEDIA_URL }}javascript/base.js"></script>
51+
<script src="{% static 'core/js/site.js' %}"></script>
52+
<script>
5153
var site = require('core/site');
5254
site.handle_notification_dismiss();
5355
</script>
5456

5557
{% block extra_scripts %}{% endblock %}
5658

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

63-
<script type="text/javascript" src="//use.typekit.net/haq4xtp.js"></script>
64-
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
61+
<script src="//use.typekit.net/haq4xtp.js"></script>
62+
<script>try{Typekit.load();}catch(e){}</script>
6563

6664
</head>
6765

@@ -204,10 +202,10 @@ <h4>{% trans "Read the Docs" %}</h4>
204202
</div>
205203
<!-- END footer-->
206204

207-
</body>
205+
<script>
206+
{% block footerjs %}{% endblock %}
207+
</script>
208208

209-
<script type="text/javascript">
210-
{% block footerjs %}{% endblock %}
211-
</script>
209+
</body>
212210

213211
</html>

‎readthedocs/templates/core/widesearchbar.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h3>{% trans "Search all the docs" %}</h3>
99

1010
<form action="{% url "search" %}" method="GET">
1111
<div class="text-input-wrapper">
12-
<input type="text" name="q" value="{{ term }}" id="id_site_search">
12+
<input type="text" name="q" value="{{ term }}" id="id_site_search" placeholder="{% trans 'Search Read the Docs' %}">
1313
</div>
1414
<div class="submit-input-wrapper">
1515
{% comment %} Translators: This is about starting a search {% endcomment %}

‎readthedocs/templates/homepage.html

Lines changed: 128 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
{% extends "base.html" %}
22

33
{% load i18n %}
4-
4+
{% load humanize %}
55
{% load pagination_tags %}
66

7+
{% block extra_metas %}
8+
<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." %}">
9+
{% endblock extra_metas %}
10+
711
{% block title %}{% trans "Home" %}{% endblock %}
812

913
{% block body_class %}home {% if not request.user.is_authenticated %}splash{% endif %}{% endblock %}
@@ -36,105 +40,129 @@
3640

3741
{% block content %}
3842

39-
<div class="module">
40-
<div class="module-wrapper">
41-
42-
<div class="module-header">
43-
<h3>{% trans "What is this place?" %}</h3>
44-
<p>
45-
{% blocktrans %}
46-
Read the Docs hosts documentation, making it fully searchable and easy to find.
47-
You can import your docs using any major version control system, including Mercurial, Git, Subversion, and Bazaar.
48-
We support <a href="http://docs.readthedocs.io/en/latest/webhooks.html">webhooks</a> so your docs get built when you commit code.
49-
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.
50-
{% endblocktrans %}
51-
</p>
52-
<p>
53-
{% blocktrans %}
54-
Hosting documentation is free and simple,
55-
<a href="https://docs.readthedocs.io/en/latest/getting_started.html">read our guide</a>
56-
to get started!
57-
{% endblocktrans %}
58-
<p>
59-
<p>
60-
{% blocktrans %}
61-
Read the Docs is <b>community supported</b>.
62-
It depends on users like you to contribute to development,
63-
support,
64-
and operations.
65-
You can learn more about how to <a href="https://docs.readthedocs.io/en/latest/contribute.html">contribute</a> in our docs.
66-
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.
67-
Read the Docs wouldn't be possible without them.
68-
Please consider joining today,
69-
as we always need more contributors to the project.
70-
{% endblocktrans %}
71-
</p>
72-
</div>
73-
74-
</div>
75-
</div>
76-
77-
{% include "core/widesearchbar.html" %}
78-
79-
{% if featured_list %}
80-
<!-- BEGIN projects list -->
81-
<div class="module">
82-
<div class="module-wrapper">
83-
84-
<div class="module-header">
85-
<h3>{% trans "Featured Projects" %}</h3>
86-
</div>
87-
88-
<div class="module-list">
89-
<div class="module-list-wrapper">
90-
<ul>
91-
{% include "core/project_list_featured.html" %}
92-
</ul>
93-
</div>
94-
</div>
95-
96-
</div>
97-
</div>
98-
<!-- END projects list -->
99-
{% endif %}
100-
101-
<!-- BEGIN projects list -->
102-
<div class="module">
103-
<div class="module-wrapper">
104-
105-
<div class="module-header">
106-
<h3>{% trans "Recently updated projects" %}</h3>
107-
</div>
108-
109-
<div class="module-list">
110-
<div class="module-list-wrapper">
111-
<ul>
112-
{% include "core/project_list_detailed.html" %}
113-
</ul>
114-
</div>
115-
</div>
116-
117-
</div>
118-
</div>
119-
<!-- END projects list -->
120-
121-
<div>
122-
<h3>{% trans "Read the Docs is funded by the community" %}</h3>
123-
<p>
124-
{% url "advertising" as advertising_url %}
125-
{% url "donate" as sponsors_url %}
126-
{% url "gold_detail" as gold_detail %}
127-
128-
Read the Docs is a huge resource that millions of developers rely on
129-
for software documentation. It would not be possible without the
130-
support of our
131-
<a href="{{ sponsors_url | default:'https://readthedocs.org/sustainability/' }}">sponsors</a>,
132-
<a href="{{ advertising_url | default:'https://readthedocs.org/sustainability/advertising/' }}">advertisers</a>,
133-
and <a href="{{ gold_detail }}">readers like you</a>.
134-
</p>
135-
<p>
136-
Hosting for the project is graciously provided by <a href="http://www.rackspace.com/cloud/">Rackspace</a>.
137-
</p>
43+
<!-- Lead -->
44+
<section>
45+
<h2>{% trans "Technical documentation lives here" %}</h2>
46+
<p class="lead">
47+
{% blocktrans %}
48+
Read the Docs simplifies software documentation by automating building,
49+
versioning, and hosting of your docs for you.
50+
{% endblocktrans %}
51+
</p>
52+
</section>
53+
54+
55+
<section>
56+
<div class="feature">
57+
<h3>Free docs hosting</h3>
58+
<p>
59+
{% with projects_count_intcomma=projects_count|intcomma %}
60+
{% blocktrans %}
61+
We will host your documentation for free forever.
62+
There are no tricks. We help {{ projects_count_intcomma }} open source projects
63+
share their docs.
64+
{% endblocktrans %}
65+
{% endwith %}
66+
</p>
67+
</div>
68+
<div class="feature">
69+
<h3>Webhooks</h3>
70+
<p>
71+
{% blocktrans %}
72+
Whenever you push code to your favorite version control system,
73+
whether that is Git, Mercurial, Bazaar, or Subversion, we will
74+
automatically build your docs so your code and documentation are
75+
never out of sync.
76+
{% endblocktrans %}
77+
</p>
13878
</div>
79+
<div class="clearfix"></div>
80+
</section>
81+
82+
<section>
83+
<div class="feature">
84+
<h3>Multiple formats</h3>
85+
<p>
86+
{% blocktrans %}
87+
Of course we build and host your docs for the web, but they are
88+
also vieweable as PDFs, as single page HTML, and for eReaders.
89+
No additional configuration is required.
90+
{% endblocktrans %}
91+
</p>
92+
</div>
93+
<div class="feature">
94+
<h3>Multiple versions</h3>
95+
<p>
96+
{% blocktrans %}
97+
We can host and build multiple versions of your docs so having a
98+
1.0 version of your docs and a 2.0 version of your docs is as easy
99+
as having a separate branch or tag in your version control system.
100+
{% endblocktrans %}
101+
</p>
102+
</div>
103+
<div class="clearfix"></div>
104+
</section>
105+
106+
<!-- Call to action -->
107+
<section>
108+
<p style="text-align: center">
109+
<a href="https://docs.readthedocs.io/en/latest/getting_started.html" class="cta-btn">{% trans 'Getting started guide' %}</a>
110+
</p>
111+
</section>
112+
113+
<!-- Search -->
114+
<section>
115+
{% include "core/widesearchbar.html" %}
116+
<section>
117+
118+
{% if featured_list %}
119+
<!-- BEGIN projects list -->
120+
<section>
121+
<h3>{% trans "Featured Projects" %}</h3>
122+
<div class="module-list">
123+
<div class="module-list-wrapper">
124+
<ul style="margin-bottom: 0">
125+
{% include "core/project_list_featured.html" %}
126+
</ul>
127+
</div>
128+
</div>
129+
</section>
130+
<!-- END projects list -->
131+
{% endif %}
139132

133+
<!-- Funding and Contributing -->
134+
<section>
135+
<h2>{% trans "Read the Docs is funded by the community" %}</h2>
136+
<p>
137+
138+
{% url "advertising" as advertising_url %}
139+
{% url "donate" as sponsors_url %}
140+
{% url "gold_detail" as gold_detail %}
141+
142+
{% blocktrans %}
143+
Read the Docs is a huge resource that millions of developers rely on
144+
for software documentation. It would not be possible without the
145+
support of our
146+
<a href="{{ sponsors_url }}">sponsors</a>,
147+
<a href="{{ advertising_url }}">advertisers</a>,
148+
and <a href="{{ gold_detail }}">readers like you</a>.
149+
{% endblocktrans %}
150+
</p>
151+
152+
<p>
153+
{% blocktrans %}
154+
Read the Docs is <strong>community supported</strong>.
155+
It depends on users like you to contribute to development, support, and operations.
156+
You can learn more about how to <a href="https://docs.readthedocs.io/en/latest/contribute.html">contribute</a> in our docs.
157+
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.
158+
Read the Docs wouldn't be possible without them.
159+
{% endblocktrans %}
160+
</p>
161+
162+
<p>
163+
{% blocktrans %}
164+
Hosting for the project is graciously provided by <a href="http://www.rackspace.com/cloud/">Rackspace</a>.
165+
{% endblocktrans %}
166+
</p>
167+
</section>
140168
{% endblock %}

0 commit comments

Comments
 (0)