Commit 5404524a authored by Peter Serwylo's avatar Peter Serwylo

Make the tutorials overview page match the spec from carrie.

Some things I have left out of the spec, such as the blue heading. I've
left that to just be the same style as all the other headings for now.
Same with the link sto the tutorials, they are not underlined because
the rest of the site doesn't use underlined links.

Additionally, I had to add some extra frontmatter to the tutorials so
that they woudl be able to show appropriately in the overview.
Specifically, the heading on the overview page is different from the
heading of the tutorial. The tutorial is written as "How to ...",
whereas the main title shown in the tutorial list is more actionable,
selling features of F-Droid.
parent 805e540b
......@@ -2,9 +2,18 @@
"misc": {
"step_x": "Step [number]",
"step_x_description": "Step [number]: [description]",
"option_x_description": "Option [number]: [description]"
"option_x_description": "Option [number]: [description]",
"overview": {
"title": "What You Can Do with F-Droid",
"summary": "F-Droid is an independent, community-sourced app store for Android that is completely free and open source software. Within F-Droid you can browse over 1,200 open source apps, search and install apps from created repositories, or create your own repository. Open f-droid.org on your Android phone to download the app and get started!",
"tutorial_x_title": "Tutorial [number]: [title]"
}
},
"add_repo": {
"overview": {
"title": "Get more content.",
"summary": "To get more, add a repo to F-Droid. A repo is a collection of curated content. You can find out about people’s repos from them directly. Developers often link to their F-Droid repo from their website. Trainers often share links to repos over email, Facebook or Twitter."
},
"title": "How to Add a Repo to F-Droid",
"intro": "You can add a repo to F-Droid by scanning the repo's QR code from another device or by opening a repo link on your phone. Begin by downloading and installing the F-Droid app on your Android phone.",
"open_repo_link": {
......@@ -39,6 +48,10 @@
"no_internet": "No internet? No problem. Learn <a href=\"../swap/\">How to Send and Receive Apps Offline.</a>"
},
"swap": {
"overview": {
"title": "Send and receive apps offline.",
"summary": "No internet? No problem. F-Droid Nearby gives you the ability to send and receive content to people in the same room."
},
"title": "How to Send and Receive Apps Offline",
"intro": "No internet? No problem. Download apps from people near you.",
"all_devices_need_fdroid": "All devices need F-Droid downloaded and installed before beginning. All devices should follow the steps below.",
......@@ -55,6 +68,10 @@
"related_tutorial": "You may also be interested in: <a href=\"../create-repo/\">How to Create a Repo</a>"
},
"create_repo": {
"overview": {
"title": "Add your own apps and files.",
"summary": "Create your own customized repository of apps. Use F-Droid to distribute content. Trainers use repos to easily share a collection of resources and apps with participants at a training when there’s no reliable internet connection. Developers use repos to distribute their apps to niche audiences."
},
"title": "How to Create a Repo",
"related_tutorial": "You may also be interested in: <a href='../add-repo/'>How to Add a Repo to F-Droid</a>",
"intro": "Can't find what you're looking for? Why not create your own customized collection of apps and files using Repomaker. Download the Repomaker web app on your computer to get started.",
......
......@@ -8,16 +8,38 @@ pagination:
per_page: 10000
permalink: '/:num/'
title: ':title'
sort_field: order
---
<h2>{{ site.data.strings.navigation.tutorials }}</h2>
<ul>
<div class="tutorials-list">
<h2>{{ site.data.tutorials.misc.overview.title }}</h2>
<div class="tutorials-info">
{{ site.data.tutorials.misc.overview.summary }}
</div>
{% for tutorial in paginator.posts %}
<li>
<a href="{{ tutorial.url | prepend: site.baseurl }}">{{ tutorial.title }}</a>: {{ tutorial.excerpt | strip_html }}
</li>
<div class="tutorial-list-item">
<h3>
{% if tutorial.paginator_title %}
{{ tutorial.paginator_title }}
{% else %}
{{ tutorial.title }}
{% endif %}
</h3>
<div class="summary">
{% if tutorial.paginator_summary %}
{{ tutorial.paginator_summary }}
{% else %}
{{ tutorial.excerpt | strip_html }}
{% endif %}
</div>
<div class="link">
<a href="{{ tutorial.url | prepend: site.baseurl }}">
{{ site.data.tutorials.misc.overview.tutorial_x_title | replace: '[number]', forloop.index | replace: '[title]', tutorial.title }}
</a>
</div>
</div>
{% endfor %}
</ul>
</div>
<!-- For now don't paginate, just leave all tutorials on this page.
If it becomes a problem with too many tutorials in the future then
......
......@@ -5,27 +5,29 @@
Jekyll::Hooks.register :site, :post_read do |site|
site.documents.each do |document|
parse_title(document)
document.data.each do |key, value|
parse_frontmatter(document, key)
end
end
end
def parse_title(document)
def parse_frontmatter(document, frontmatter_key)
site = document.site
title = document.data["title"]
value = document.data[frontmatter_key]
# Title has at least one word, followed by a dot, followed by more words and dots.
if (title =~ /^[\w\-]+\.[\w\-.]+$/) == nil
# Value has at least one word, followed by a dot, followed by more words and dots.
if (value =~ /^[\w\-]+\.[\w\-.]+$/) == nil
return
end
title_parts = title.split(/\./)
new_title = recursively_get_value(site.data, title_parts)
value_parts = value.split(/\./)
new_value = recursively_get_value(site.data, value_parts)
if new_title != nil and new_title.length > 0
Jekyll::logger.debug "i18n", "Translating document title #{title} to #{site.active_lang}: \"#{new_title}\""
document.data["title"] = new_title
if new_value != nil and new_value.length > 0
Jekyll::logger.debug "i18n", "Translating document frontmatter [#{frontmatter_key}: #{value}] to #{site.active_lang}: \"#{new_value}\""
document.data[frontmatter_key] = new_value
end
end
......
......@@ -609,3 +609,22 @@ img {
}
}
.tutorials-list {
.tutorials-info {
}
.tutorial-list-item {
margin-top: 48px;
h3 {
font-weight: bold;
margin-bottom: 8px;
}
.link {
margin: 12px 0;
font-size: 18px;
}
}
}
\ No newline at end of file
---
layout: tutorial
order: 01
title: tutorials.add_repo.title
paginator_title: tutorials.add_repo.overview.title
paginator_summary: tutorials.add_repo.overview.summary
---
<!-- Don't have an empty line until after the first <p>, as Jekyll is
looking for "\n\n" to decide what constitutes the "excerpt" for a post. -->
......
---
layout: tutorial
order: 03
title: tutorials.create_repo.title
paginator_title: tutorials.create_repo.overview.title
paginator_summary: tutorials.create_repo.overview.summary
---
<!-- Don't have an empty line until after the first <p>, as Jekyll is
looking for "\n\n" to decide what constitutes the "excerpt" for a post. -->
......
---
layout: tutorial
order: 02
title: tutorials.swap.title
paginator_title: tutorials.swap.overview.title
paginator_summary: tutorials.swap.overview.summary
---
<!-- Don't have an empty line until after the first <p>, as Jekyll is
looking for "\n\n" to decide what constitutes the "excerpt" for a post. -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment