Add Home screen blogpost (#231)

Author: keunes

_blog/2023-05-08-introducing the home screen.md

@@ -0,0 +1,48 @@
+---
+title: Welcome Home! 🏠 Introducing AntennaPod’s new default screen
+excerpt: Let's show you your new home — one of the main new features in AntennaPod 3.0.
+date: "2023-05-08 08:20:00"
+image: "2023/v3-home.jpg"
+author: loucasal
+layout: blog
+guid: 2QUY-1288-Q8NP-HU3N-PSBY
+---
+
+{: .lead}
+One of the biggest new features in AntennaPod 3.0 (available now on [Google Play](https://play.google.com/store/apps/details?id=de.danoeh.antennapod) and soon on [F-Droid](https://f-droid.org/packages/de.danoeh.antennapod/)) is the Home screen. It introduces a new way to get a quick overview, start listening and perform a range of actions. Which, in turn, allows you to enjoy the app without opening the menu to navigate between different screens.
+
+## Personalising the app experience
+
+In addition to making navigation easier, our goal was to make the app experience more personal while respecting your privacy. So we built the Home screen around the podcasts you have already subscribed to, helping you discover and interact with content from podcasters you like and trust.
+
+The Home screen currently contains five sections, each of which displays episodes to interact with directly, but also provides a shortcut to the related screen (e.g. your queue). Let's look at each of the sections:
+
+1.  The first section allows you to quickly and easily '**continue listening**' queued episodes, beginning with those you have already started listening to, but haven't finished just yet.
+
+2.  In the second section you will '**see what's new**', listing the latest episodes that have landed in your [Inbox](/blog/2022/10/2-7-release) when refreshing subscriptions.
+
+3.  The third section allows you to '**get surprised**' with a random selection of episodes from your subscriptions you haven't listened to yet. *Pro tip*: if you don't see anything you feel like listening now, tap the arrow button to refresh the selection.
+
+4.  The fourth section -- '**check your classics**' -- allows you to quickly open your all-time most-listened subscriptions. *Warning*: this might take you on a trip down memory lane.
+
+5.  In the fifth and final section you can '**manage downloads**': that is to say, interact with the episodes you downloaded on your device.
+
+{% include image.html
+   alt="Visual explainer of the Home screen features."
+   loc="/assets/images/blog/2023"
+   file="Home-screen-showcase.png"
+   max-width="22rem"
+   class="float-md-right ml-md-3 w-100"
+%}
+
+## Configuring your Home screen to best suit your needs
+
+The Home screen, which is now set as AntennaPod's default page, allows you to enable/disable its different sections via the three-dot menu. The screen already supports swipe actions, which you can change via the Settings » User Interface. There you can also still set a different screen as default if you prefer so.
+
+## What's next?
+
+What can you expect next for the Home screen? AntennaPod is a community project, so we cannot promise or predict what will be implemented when. (You are most welcome to [contribute](https://antennapod.org/contribute)!) But we have already discussed and would love to see support for reordering sections and more advanced features.
+
+*This post is part of a series highlighting some of AntennaPod's new and existing features. Do you have any feedback on the features described in this post? Please let us know via the [forum](https://forum.antennapod.org).*
+
+<small>Photo by [Garett Mizunaka](https://unsplash.com/@garett3).</small>

_data/authors.yml

@@ -9,4 +9,10 @@ keunes:
   image: keunes.png
   email:
   web: https://github.com/keunes
-  position: marketing
+  position: marketing
+loucasal:
+  name: Loucasal
+  image: loucasal.png
+  email:
+  web: https://forum.antennapod.org/u/loucasal/
+  position: contributor

_includes/image.html

@@ -1,15 +1,44 @@
 {% capture native-url %}{{ include.loc }}/{{ site.lang }}/{{ include.file }}{% endcapture %}
-{% capture english-url %}{{ include.loc }}/en/{{ include.file }}{% endcapture %}
-{% assign img-alt = include.alt | remove:'<!-- mdpo-enable-next-line -->' | strip %}
-
-{% for file in site.static_files %}
-   {% if file.path == native-url %}
-      {% assign native-exists = true %}
-   {% endif %}
-{% endfor %}
-
-{% if native-exists == true %}
-<img src="{{ native-url }}" alt="{{ img-alt }}" width="{{ include.width }}" class="{{ include.class }}">
-{% else %}
-<img src="{{ english-url }}" alt="{{ img-alt }}" width="{{ include.width }}" class="{{ include.class }}">
-{% endif %}
+{%- capture english-url %}{{ include.loc }}/en/{{ include.file }}{% endcapture %}
+{%- capture single-url %}{{ include.loc }}/{{ include.file }}{% endcapture %}
+{%- assign img-alt = include.alt | remove:'<!-- mdpo-enable-next-line -->' | strip %}
+
+{%- for file in site.static_files %}
+   {%- if file.path == native-url %}
+      {%- assign native-exists = true %}
+   {%- elsif file.path == english-url %}
+      {%- assign english-exists = true %}
+   {%- endif %}
+{%- endfor %}
+
+{%- capture url %}
+   {%- if native-exists == true %}
+      {{- native-url }}
+   {%- elsif english-exists == true %}
+      {{- english-url }}
+   {%- else %}
+      {{- single-url }}	
+   {%- endif %}
+{%- endcapture -%}
+
+<a href="" data-toggle="modal" data-target="#imgModal{{ include.file | remove:'.' }}">
+  <img src="{{ url }}" alt="{{ img-alt }}"
+    {%- if include.width %} width="{{ include.width }}"{% endif %}
+    {%- if include.max-width %} style="max-width:{{ include.max-width }};"{% endif %}
+    class="rounded {{ include.class }}"></a>
+
+<div class="modal fade" id="imgModal{{ include.file | remove:'.' }}" tabindex="-1" role="dialog" aria-labelledby="imgModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
+    <div class="modal-content rounded">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="position: absolute; top: 1rem; right: 1rem;">
+          <i class="fas fa-times-circle"></i>
+        </button>
+        <img src="{{ url }}" alt="{{ img-alt }}" width="100%" class="rounded">
+      {%- if include.footnote %}
+      <div class="modal-footer">
+        {{ include.footnote }}
+      </div>
+      {%- endif %}
+    </div>
+  </div>
+</div>

_sass/_custom.scss

@@ -536,10 +536,9 @@ blockquote {
 
 .post-content {
   & p, li {
-    font-size: 14px;
     color: $gray-900;
     margin-bottom: 0px;
-    line-height: 24px;
+    line-height: 1.5rem;
   }
 
   & p + p {
@@ -551,7 +550,7 @@ blockquote {
   }
 
   & p img {
-    padding: 15px 0 0;
+    margin: 0.5rem 0 0;
   }
 
   & blockquote p {
@@ -571,15 +570,45 @@ blockquote {
   }
 
   & h1,
+  .h1,
   h2,
+  .h2,
   h3,
+  .h3,
   h4,
+  .h4,
   h5,
-  h6 {
-    color: $gray-700;
+  .h5,
+  h6,
+  .h6 {
     font-weight: 700;
   }
 
+  & .h2,
+  h2 {
+    margin-top: 1.4rem;
+  }
+
+  .h3,
+  h3 {
+    margin-top: 1.3rem;
+  }
+
+  .h4,
+  h4 {
+    margin-top: 1.2rem;
+  }
+
+  .h5,
+  h5 {
+    margin-top: 1.1rem;
+  }
+
+  .h6,
+  h6 {
+    margin-top: 1rem;
+  }
+
   & img[alt$=" > "] {
     float: right;
     margin: 0 0 20px 20px;
@@ -944,8 +973,9 @@ i.member-img {
 // Lists
 
 .post-content, .modal-body {
-  & ul {
+  & ul, & ol {
     padding: 0;
+    margin-top: 1rem;
     margin-bottom: 0;
   }
 

assets/images/authors/loucasal.png

@@ -19,7 +19,7 @@ <h1 class="color-gray-800 weight-700">{% t titles.blog %}</h1>
                         <a class="stretched-link" href="{{ site.baseurl }}{{ blog.url | replace:'.html','' }}"></a>
                           <img src="/assets/images/blog/{{ blog.image }}" loading="lazy" alt="{{ blog.title }}" />
                           <h3 class="weight-700 pt-4">{{ blog.title }}</h3>
-                          <p class="mb-4">{{ blog.excerpt | strip_html | truncatewords: 15 }}</p>
+                          <p class="mb-4">{{ blog.excerpt | strip_html | truncate: 100 }}</p>
                           <div class="bottom">
                             <p class="text-muted">{% t blog.posted %} 
                                 {% capture month %}{{ blog.date | date: "%b" }}{% endcapture %}