App layout: Add appstream download button (#6)

Adds an `appstream://` URL that will work on Endless OS to open the right page to the app. Also adds an optional, off-by-default .flatpakref download button if a `remote_url` exists in the site config. The idea being that we could add direct downloads of .flatpakrefs if they were added in the future. Unfortunately after writing this I learned that we've never created .flatpakref files for eos-apps, and that's outside the current scope of work. But it's here if that ever changes (and may be useful to elementary's AppCenter site upstream). Mixed in a bit are some code legibility and path fixes I noticed while developing locally. https://phabricator.endlessm.com/T34894
endlessm · Jul 19, 2023 · 1c31bd4 · 1c31bd4
1 parent 8dd5158
commit 1c31bd4
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 61 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -1,46 +1,46 @@
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>{% if page.title %}Get {{page.title}} on {% endif %}{{site.title}}</title>
-  <meta property="og:title" content="{% if page.title %}Get {{page.title}} on {% endif %}{{site.title}}">
-  <meta itemprop="name" content="{% if page.title %}Get {{page.title}} on {% endif %}{{site.title}}">
-  <meta name="twitter:title" content="{% if page.title %}Get {{page.title}} on {% endif %}{{site.title}}">
+  <title>{% if page.title %}Get {{ page.title }} on {% endif %}{{ site.title }}</title>
+  <meta property="og:title" content="{% if page.title %}Get {{ page.title}} on {% endif %}{{ site.title }}">
+  <meta itemprop="name" content="{% if page.title %}Get {{ page.title }} on {% endif %}{{ site.title }}">
+  <meta name="twitter:title" content="{% if page.title %}Get {{ page.title }} on {% endif %}{{ site.title }}">
 
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
 
-  <link rel="apple-touch-icon" href="/images/icon-32.png">
-  <link rel="icon" type="image/png" href="/images/icon-32.png" sizes="192x192">
+  <link rel="apple-touch-icon" href="{{ '/images/icon-32.png' | absolute_url }}">
+  <link rel="icon" type="image/png" href="{{ '/images/icon-32.png' | absolute_url }}" sizes="192x192">
 
-  <meta name="theme-color" content="{% if page.color.primary != "((color_primary))" %}{{page.color.primary}}{% else %}{{site.color.primary}}{% endif %}">
+  <meta name="theme-color" content="{% if page.color.primary != "((color_primary))" %}{{ page.color.primary }}{% else %}{{ site.color.primary }}{% endif %}">
 
   <meta name="twitter:card" content="summary">
   <meta name="twitter:site" content="@endlessm">
 
-  <meta name="description" content="{% if page.summary %}{{page.summary}}{% else %}{{site.summary}}{% endif %}">
-  <meta property="og:description" content="{% if page.summary %}{{page.summary}}{% else %}{{site.summary}}{% endif %}">
-  <meta itemprop="description" content="{% if page.summary %}{{page.summary}}{% else %}{{site.summary}}{% endif %}">
-  <meta name="twitter:description" content="{% if page.summary %}{{page.summary}}{% else %}{{site.summary}}{% endif %}">
+  <meta name="description" content="{% if page.summary %}{{ page.summary }}{% else %}{{ site.summary }}{% endif %}">
+  <meta property="og:description" content="{% if page.summary %}{{ page.summary }}{% else %}{{ site.summary }}{% endif %}">
+  <meta itemprop="description" content="{% if page.summary %}{{ page.summary }}{% else %}{{ site.summary }}{% endif %}">
+  <meta name="twitter:description" content="{% if page.summary %}{{ page.summary }}{% else %}{{ site.summary }}{% endif %}">
 
-  <meta property="og:image" content="{% if page.screenshots %}{{page.screenshots[0]}}{% else %}{{site.image}}{% endif %}" />
-  <meta itemprop="image" content="{% if page.screenshots %}{{page.screenshots[0]}}{% else %}{{site.image}}{% endif %}" />
+  <meta property="og:image" content="{% if page.screenshots %}{{ page.screenshots[0] | absolute_url }}{% else %}{{ site.image | absolute_url }}{% endif %}" />
+  <meta itemprop="image" content="{% if page.screenshots %}{{ page.screenshots[0] | absolute_url }}{% else %}{{ site.image | absolute_url }}{% endif %}" />
 
   {% if page.icons %}
     {% for icon in page.icons %}
       {% if icon[0] == "64@2" %}
-        <meta property="og:image" content="{{icon[1]}}" />
-        <meta itemprop="image" content="{{icon[1]}}" />
+        <meta property="og:image" content="{{ icon[1] | absolute_url }}" />
+        <meta itemprop="image" content="{{ icon[1] | absolute_url }}" />
       {% endif %}
     {% endfor %}
   {% else %}
-    <meta property="og:image" content="{% if page.screenshots %}{{page.screenshots[0]}}{% else %}{{site.image}}{% endif %}" />
-    <meta itemprop="image" content="{% if page.screenshots %}{{page.screenshots[0]}}{% else %}{{site.image}}{% endif %}" />
+    <meta property="og:image" content="{% if page.screenshots %}{{ page.screenshots[0] | absolute_url }}{% else %}{{site.image}}{% endif %}" />
+    <meta itemprop="image" content="{% if page.screenshots %}{{ page.screenshots[0] | absolute_url }}{% else %}{{site.image}}{% endif %}" />
   {% endif %}
 
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,300&display=swap" rel="stylesheet">
 
-  <link rel="stylesheet" type="text/css" media="all" href="{{'/css/main.css' | prepend: site.baseurl | append: '?v=' | append: site.time}}">
+  <link rel="stylesheet" type="text/css" media="all" href="{{ '/css/main.css' | absolute_url | append: '?v=' | append: site.time }}">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.6.0/tiny-slider.css">
 </head>
diff --git a/_includes/screenshots.html b/_includes/screenshots.html
@@ -2,7 +2,7 @@
   <div class="carousel">
     {% for screenshot in page.screenshots %}
       <div>
-        <img alt="Screenshot" src="{{screenshot}}" />
+        <img alt="Screenshot" src="{{ screenshot | absolute_url }}" />
       </div>
     {% endfor %}
   </div>

diff --git a/_layouts/app.html b/_layouts/app.html
@@ -7,17 +7,21 @@
     <img class="icon" width="64" height="64"
       {% for icon in page.icons %}
         {% if icon[0] == "64@2" %}
-          srcset="{{ icon[1] | prepend: site.baseurl }} 2x"
+          srcset="{{ icon[1] | absolute_url }} 2x"
         {% elsif icon[0] == "128" %}
-          srcset="{{ icon[1] | prepend: site.baseurl }}"
+          srcset="{{ icon[1] | absolute_url }}"
         {% elsif icon[0] == "64" %}
-          srcset="{{ icon[1] | prepend: site.baseurl }}"
+          srcset="{{ icon[1] | absolute_url }}"
         {% endif %}
       {% endfor %}
       src="{{ site.baseurl }}/images/dotted-box-symbolic.svg"
     alt="{{ page.title }} icon" />
 
     <h1>{{ page.title }}</h1>
+    <a class="button suggested" href="appstream://{{ page.app_id }}">Open in App Center</a>
+    {% if site.remote_url %}
+    <a class="button" href="{{ site.remote_url }}/{{ page.app_id }}.flatpakref" download="{{ page.title }}.flatpakref">Download as Flatpak</a>
+    {% endif %}
   </div>
 </header>
 
@@ -35,6 +39,6 @@ <h2>{{ page.summary }}</h2>
 
 <footer>
   <div class="constrain">
-    <a class="button go-home" href="{{ site.baseurl }}/">← All Apps</a>
+    <a class="button go-home" href="{{ '/' | relative_url }}">← All Apps</a>
   </div>
 </footer>
diff --git a/_sass/_buttons.scss b/_sass/_buttons.scss
@@ -13,42 +13,24 @@
   transition: all 100ms ease-in;
   -moz-appearance: none;
   -webkit-appearance: none;
-}
 
-.button:hover {
-  background-color: rgba(150, 150, 150, 0.125);
-  text-decoration: none;
+  &:focus,
+  &:hover {
+    background-color: rgba(white, 0.5);
+  }
+
+  &:active {
+    filter: brightness(0.9);
+  }
 }
 
 .button.suggested {
-  background-color: #64b9f1;
-  background-image: linear-gradient(
-    to bottom,
-    #4ca7e4,
-    #328ecc
-  );
-  border: 1px solid rgba(0,0,0,.2);
-  border-color: #337cac;
-  box-shadow:
-    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
-    inset 0 -1px 0 0 rgba(255, 255, 255, 0.15);
+  background-color: #f15a22;
   color: #fff;
-  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-
-  &:focus {
-    box-shadow:
-      inset 0 0 0 1px rgba(255, 255, 255, 0.05),
-      inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
-      inset 0 -1px 0 0 rgba(255, 255, 255, 0.15),
-      0 3px 6px rgba(12, 128, 200, 0.16),
-      0 3px 6px rgba(12, 128, 200, 0.23);
-    text-decoration: none;
-  }
+  font-weight: bold;
 
-  &:active {
-    box-shadow:
-      inset 0 0 0 1px rgba(0, 0, 0, 0.05),
-      0 1px 0 0 rgba(255, 255, 255, 0.3);
+  &:focus,
+  &:hover {
+    filter: brightness(1.1);
   }
 }
diff --git a/index.html b/index.html
@@ -15,18 +15,18 @@ <h2>{{ site.summary }}</h2>
 <div class="home apps">
   {% for app in flatpak_apps %}
     {% unless app.app_id == "com.google.Chrome" %}
-      <a class="app button {{ app.dist }}" href="{{ site.baseurl }}/{{ app.app_id }}" title="{{ app.summary }}" id="{{ app.app_id }}" tabindex="0">
+      <a class="app button {{ app.dist }}" href="{{ app.app_id | relative_url }}" title="{{ app.summary }}" id="{{ app.app_id }}" tabindex="0">
         <img width="64" height="64"
           {% for icon in app.icons %}
             {% if icon[0] == "64@2" %}
-              srcset="{{ icon[1] | prepend: site.baseurl }} 2x"
+              srcset="{{ icon[1] | absolute_url }} 2x"
             {% elsif icon[0] == "128" %}
-              srcset="{{ icon[1] | prepend: site.baseurl }}"
+              srcset="{{ icon[1] | absolute_url }}"
             {% elsif icon[0] == "64" %}
-              srcset="{{ icon[1] | prepend: site.baseurl }}"
+              srcset="{{ icon[1] | absolute_url }}"
             {% endif %}
           {% endfor %}
-          src="{{ site.baseurl }}/images/dotted-box-symbolic.svg"
+          src="{{ '/images/dotted-box-symbolic.svg' | absolute_url }}"
         alt="{{ app.title }} icon" />
 
         <span class="title">{{ app.title }}</span>
@@ -36,8 +36,8 @@ <h2>{{ site.summary }}</h2>
       <style>
         .app[id="{{ app.app_id }}"]:hover,
         .app[id="{{ app.app_id }}"]:focus {
-          background-color: {% if app.color.primary != "((color_primary))" %}{{app.color.primary}}{% else %}{{site.color.primary}}{% endif %};
-          color: {% if app.color.primary-text != "((color_text))" %}{{app.color.primary-text}}{% else %}{{site.color.primary-text}}{% endif %};
+          background-color: {% if app.color.primary != "((color_primary))" %}{{ app.color.primary }}{% else %}{{ site.color.primary }}{% endif %};
+          color: {% if app.color.primary-text != "((color_text))" %}{{ app.color.primary-text }}{% else %}{{ site.color.primary-text }}{% endif %};
         }
       </style>
     {% endunless %}