Update metadata, lots of little style improvements

.github/workflows/update.yml

@@ -15,34 +15,25 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
+      - name: Install dependencies
+        run: |
+          sudo apt update && sudo apt install ruby-nokogiri git
 
       - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Setup Ruby
-        uses: ruby/setup-ruby@v1
-        with:
-          ruby-version: 2.7 # Not needed with a .ruby-version file
-          bundler-cache: true
+        uses: actions/checkout@v3
 
       - name: Build
         run: |
-          sudo apt update && sudo apt install ruby-nokogiri
-          gem install nokogiri -- --use-system-libraries
+          rm apps/*
           ruby ./generate-eos-apps.rb
 
       - name: Commit
         run: |
           FILES_CHANGED=$(git diff --name-only | wc -l)
           if [[ $FILES_CHANGED != 0 ]]; then
-            git config --local user.email "actions@github.com"
+            git config --local user.email "action@github.com"
             git config --local user.name "GitHub Action"
             git add -A
             git commit -m "Automatic update of data" -a
+            git push
           fi
-
-      - name: Push
-        uses: ad-m/[email protected]
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          branch: main

README.md

@@ -4,19 +4,39 @@ Web frontend for viewing first-party educational content apps for Endless OS.
 
 ## Data
 
-Ideally we could download the data on demand when building, but for now I'm copying `/var/lib/flatpak/appstream/eos-apps/x86_64/active/appstream.xml` and `/var/lib/flatpak/appstream/eos-apps/x86_64/active/icons/` from an Endless OS install to the root of this repo.
+Ideally we could download the data on demand when building, but for now I'm copying `/var/lib/flatpak/appstream/eos-apps/x86_64/active/appstream.xml` and `/var/lib/flatpak/appstream/eos-apps/x86_64/active/icons/` from an Endless OS install to the root of this repo and to `images/` respectively.
 
 ## Building
 
 This site is a simple Jekyll-powered site hosted by GitHub Pages. To run it locally, see [the GitHub docs](https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/).
 
-I recommend using `toolbox` to develop, especially if you're on Endless OS or Fedora Silverblue; see [this blog post](https://cassidyjames.com/blog/github-pages-jekyll-fedora-silverblue/) for details.
+I recommend using `toolbox` to develop, especially if you're on Endless OS or Fedora Silverblue; see [this blog post](https://cassidyjames.com/blog/github-pages-jekyll-fedora-silverblue/) for more details. But in brief, this should get you going:
+
+```shell
+toolbox enter
+sudo dnf install ruby ruby-devel openssl-devel @development-tools gcc-c++
+sudo gem install bundler
+bundle install
+```
+
+You may need to manually install some gems, e.g.:
+
+```shell
+sudo dnf install rubygem-nokogiri rubygem-crack
+```
+
+Then to run:
+
+```shell
+bundle exec jekyll serve --host 0.0.0.0
+```
 
 ### Updating Apps
 
-The list of apps is generated with a simple Ruby script. To rebuild the app list (e.g. if you've changed something in the Ruby script), run:
+The list of apps is generated with a simple Ruby script. To rebuild the app list, delete the existing files so any removals (e.g. end-of-life apps) are reflected, then run the script:
 
 ```shell
+rm _apps/*
 ruby generate-eos-apps.rb
 ```
 

_config.yaml

@@ -3,7 +3,7 @@ title: Endless Apps
 summary: Learning and educational apps created specifically for Endless OS
 image: "/images/endless.png"
 separator: "⋅"
-baseurl: "/"
+baseurl: ""
 color:
   primary: "#f15a22"
   primary-text: "#fff"
@@ -12,7 +12,13 @@ collections:
   apps:
     title: Apps
     output: true
-    permalink: /:path/
+    # Omit the trailing slash to create slightly cleaner links and make it a bit
+    # easier to grab the app ID off the end of the URL. This causes Jekyll to
+    # generate pages as `com.example.app.html` instead of `com.example.app/index.html`.
+    # Since Jekyll and GitHub Pages allow omitting the extension, URLs become
+    # `/com.example.app` instead of `/com.example.app/`. Jekyll and GitHub Pages
+    # still redirect `/com.example.app/` to `/com.example.app` for us.
+    permalink: /:path
 
 defaults:
   - scope:
@@ -23,7 +29,6 @@ defaults:
 
 markdown: kramdown
 
-permalink: pretty
 sass:
   style: compressed
 

_layouts/app.html

@@ -5,17 +5,10 @@
 <header>
   <div class="constrain">
     <img class="icon" width="64" height="64"
-      {% for icon in page.icons %}
-        {% if icon[0] == "64@2" %}
-          srcset="{{ icon[1] | absolute_url }} 2x"
-        {% elsif icon[0] == "128" %}
-          srcset="{{ icon[1] | absolute_url }}"
-        {% elsif icon[0] == "64" %}
-          srcset="{{ icon[1] | absolute_url }}"
-        {% endif %}
-      {% endfor %}
+      srcset="{{ site.baseurl }}/images/icons/64x64/{{ page.app_id }}.png"
       src="{{ site.baseurl }}/images/dotted-box-symbolic.svg"
-    alt="{{ page.title }} icon" />
+      alt="{{ page.title }} icon"
+    />
 
     <h1>{{ page.title }}</h1>
     <a class="button suggested" href="appstream://{{ page.app_id }}">Open in App Center</a>

_sass/_apps.scss

@@ -36,8 +36,3 @@
   }
 }
 
-.get-it .call-to-action {
-  margin-top: 1em;
-  text-align: center;
-}
-

_sass/_buttons.scss

@@ -1,6 +1,6 @@
 .button {
   appearance: none;
-  border-radius: 0.25em;
+  border-radius: 0.5em;
   color: inherit;
   display: inline-block;
   font-family: inherit;
@@ -10,13 +10,19 @@
   outline: 0;
   text-align: center;
   text-decoration: none;
-  transition: all 100ms ease-in;
+  transition: none;
   -moz-appearance: none;
   -webkit-appearance: none;
 
   &:focus,
-  &:hover {
-    background-color: rgba(white, 0.5);
+  &:hover,
+  &:active {
+    background-color: var(--accent);
+    box-shadow:
+      0 0 0 1px rgba(0, 0, 0, 0.125),
+      inset 0 0 0 0.125em rgba(255, 255, 255, 0.25);
+    color: white;
+    filter: brightness(1.1);
   }
 
   &:active {
@@ -25,12 +31,7 @@
 }
 
 .button.suggested {
-  background-color: #f15a22;
-  color: #fff;
+  background-color: var(--accent);
+  color: white;
   font-weight: bold;
-
-  &:focus,
-  &:hover {
-    filter: brightness(1.1);
-  }
 }

_sass/_header.scss

@@ -36,12 +36,12 @@ header {
 
   .button {
     display: block;
-    font-size: 16px;
-    padding: 12px 24px;
+    font-size: 1rem;
+    padding: 0.75em 1em;
     margin-left: auto;
     margin-right: auto;
-    margin-top: 0.5em;
-    max-width: 225px;
+    margin-top: 1em;
+    max-width: 12em;
 
     @media (min-width: 720px) {
       float: right;

_sass/_home.scss

@@ -8,56 +8,44 @@
 
   &.apps {
     display: grid;
-    grid-template-columns: repeat(auto-fill, 111px);
-    // flex-wrap: wrap;
+    grid-template-columns: repeat(auto-fill, 12em);
+    justify-content: space-around;
     margin: 0 auto;
-    justify-content: space-between;
-    max-width: 1000px;
+    max-width: 1200px;
     width: 95vw;
 
     .app {
-      box-shadow:
-        0px 6px 24px 0px rgba(0, 0, 0, 0),
-        inset 0px 0px 0px 1px rgba(0, 0, 0, 0),
-        inset 0px 1px 0px 1px rgba(255, 255, 255, 0);
+      border-radius: 2em;
       font-weight: normal;
       margin: 0.5em 0;
-      padding: 1em 0.5em;
+      padding: 2em 0.5em;
       text-align: left;
-      transition: all 200ms ease;
       vertical-align: top;
-      width: 111px;
 
-      &:hover,&:focus {
+      &:hover,
+      &:focus {
         background-image: linear-gradient(
-          rgba(255, 255, 255, 0.25),
-          rgba(255, 255, 255, 0.125)
+          rgba(255, 255, 255, 0.125),
+          rgba(255, 255, 255, 0)
         );
-        box-shadow:
-          0px 6px 24px 0px rgba(0, 0, 0, 0.1),
-          inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25),
-          inset 0px 1px 0px 1px rgba(255, 255, 255, 0.25);
       }
 
-      img {
+      .icon {
         display: block;
-        height: 64px;
         margin: 0 auto 0.5em;
-        width: 64px;
       }
 
       .title {
         display: block;
+        font-size: 1.5em;
+        margin-bottom: 0.5em;
         text-align: center;
       }
 
       .summary {
-        display: none;
-      }
-
-      &.hera,
-      &.loki {
-        opacity: 0.67;
+        display: block;
+        text-align: center;
+        text-wrap: balance;
       }
     }
   }