Skip to content

Commit 950db4b

Browse files
davidfischerdavidfischer
committed
Rework homepage
- Call to action to get started - Break up large blocks of text - Remove recent projects
1 parent b12e188 commit 950db4b

File tree

5 files changed

+182
-132
lines changed

5 files changed

+182
-132
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: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -39,19 +39,6 @@ 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)
5643
return context
5744

‎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: 125 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44

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 eReaders 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,127 @@
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>Webhooks</h3>
58+
<p>
59+
{% blocktrans %}
60+
Whenever you push code to your favorite version control system,
61+
whether that is Git, Mercurial, Bazaar, or Subversion, we will
62+
automatically build your docs so your code and documentation are
63+
never out of sync.
64+
{% endblocktrans %}
65+
</p>
66+
</div>
67+
<div class="feature">
68+
<h3>Free docs hosting</h3>
69+
<p>
70+
{% blocktrans %}
71+
We will host your documentation for free forever.
72+
There are no tricks. We help thousands of open source projects
73+
share their docs.
74+
{% endblocktrans %}
75+
</p>
76+
</div>
77+
<div class="clearfix"></div>
78+
</section>
79+
80+
<section>
81+
<div class="feature">
82+
<h3>Multiple formats</h3>
83+
<p>
84+
{% blocktrans %}
85+
Of course we build and host your docs for the web, but they are
86+
also vieweable as PDFs, epubs (for eReaders), and as single page
87+
HTML documents. No additional configuration is required.
88+
{% endblocktrans %}
89+
</p>
13890
</div>
91+
<div class="feature">
92+
<h3>Multiple versions</h3>
93+
<p>
94+
{% blocktrans %}
95+
We can host and build multiple versions of your docs so having a
96+
1.0 version of your docs and a 2.0 version of your docs is as easy
97+
as having a separate branch or tag in version control.
98+
{% endblocktrans %}
99+
</p>
100+
</div>
101+
<div class="clearfix"></div>
102+
</section>
103+
104+
<!-- Call to action -->
105+
<section>
106+
<p style="text-align: center">
107+
<a href="https://docs.readthedocs.io/en/latest/getting_started.html" class="cta-btn">{% trans 'Getting started guide' %}</a>
108+
</p>
109+
</section>
110+
111+
<!-- Search -->
112+
<section>
113+
{% include "core/widesearchbar.html" %}
114+
<section>
115+
116+
{% if featured_list %}
117+
<!-- BEGIN projects list -->
118+
<section>
119+
<h3>{% trans "Featured Projects" %}</h3>
120+
<div class="module-list">
121+
<div class="module-list-wrapper">
122+
<ul style="margin-bottom: 0">
123+
{% include "core/project_list_featured.html" %}
124+
</ul>
125+
</div>
126+
</div>
127+
</section>
128+
<!-- END projects list -->
129+
{% endif %}
139130

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

0 commit comments

Comments
 (0)