feat: add per-user Open Dyslexic font setting (#5037) [deploy]

* feat: add per-user Open Dyslexic font setting

* Adjust css slightly

Co-authored-by: Ben Halpern <bendhalpern@gmail.com>

app/assets/stylesheets/_fonts.scss

@@ -0,0 +1,19 @@
+@font-face {
+	font-family: OpenDyslexic;
+	src: font-url('OpenDyslexic-Regular.otf');
+}
+
+@font-face {
+	font-family: OpenDyslexic-Bold;
+	src: font-url('OpenDyslexic-Bold.otf');
+}
+
+@font-face {
+	font-family: OpenDyslexic-Bolditalic;
+	src: font-url('OpenDyslexic-BoldItalic.otf');
+}
+
+@font-face {
+	font-family: OpenDyslexic-Italic;
+	src: font-url('OpenDyslexic-Italic.otf');
+}

app/assets/stylesheets/scaffolds.scss

@@ -1,5 +1,6 @@
 @import 'variables';
 @import 'mixins';
+@import 'fonts';
 
 body {
   @include themeable(background, theme-background, $lightest-gray);
@@ -230,6 +231,7 @@ body.sans-serif-article-body {
     font-size: 0.98em;
   }
 }
+
 body.comic-sans-article-body {
   .body {
     font-family: 'Comic Sans MS', cursive, sans-serif;
@@ -239,6 +241,31 @@ body.comic-sans-article-body {
     font-size: 0.98em;
   }
 }
+
+body.open-dyslexic-article-body {
+  .body {
+    font-display: swap;
+    font-family: OpenDyslexic, sans-serif;
+  }
+  .body p {
+    font-display: swap;
+    font-family: OpenDyslexic, sans-serif;
+    font-size: 0.9em;
+  }
+  .body b, .body strong {
+    font-family: OpenDyslexic-Bold, sans-serif;
+  }
+  
+  .body i, .body em {
+    font-family: OpenDyslexic-Italic, sans-serif;
+  }
+  
+  .body b>i, .body b>em, .body strong>i, .body strong>em,
+  .body i>b, .body em>b, .body i>strong, .body em>strong {
+    font-family: OpenDyslexic-Bolditalic
+  }
+}
+
 body.monospace-article-body {
   .body {
     font-family: $monospace;

app/assets/stylesheets/theme-selector.scss

@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'fonts';
 
 .rich-selector {
   display: inline-block;
@@ -188,8 +189,16 @@
 
 .font-selector--comic-sans {
   font-family: 'Comic Sans MS', cursive, sans-serif;
+  font-size: 1.44em;
 }
 
+.font-selector--open-dyslexic {
+  font-family: OpenDyslexic, sans-serif;
+  font-display: swap;
+  font-size: 1.33em;
+}
+
+
 // Navbar selector
 
 .navbar-selector {

app/models/user.rb

@@ -124,7 +124,7 @@ class User < ApplicationRecord
             inclusion: { in: %w[default night_theme pink_theme minimal_light_theme ten_x_hacker_theme],
                          message: "%<value>s is not a valid theme" }
   validates :config_font,
-            inclusion: { in: %w[default sans_serif monospace comic_sans],
+            inclusion: { in: %w[default sans_serif monospace comic_sans open_dyslexic],
                          message: "%<value>s is not a valid font selection" }
   validates :config_navbar,
             inclusion: { in: %w[default static],

app/views/layouts/_user_config.html.erb

@@ -139,9 +139,17 @@
     if (localStorage.getItem('config_minimize_newest_listings') === 'yes') {
       document.getElementsByTagName("body")[0].classList.add("config_minimize_newest_listings");
     }
-    if (window.frameElement) {
+    if (window.frameElement) { // Hide top bar and footer when loaded within iframe
       document.getElementsByTagName("body")[0].classList.add("hidden-shell");
     }
+    if (bodyClass.includes('open-dyslexic-article-body')) { // Preloading custom font for anticipated use
+      var link = document.createElement('link');
+      link.as = 'font'
+      link.rel = 'preload'
+      crossorigin = 'anonymous'
+      link.href = '<%= asset_path "OpenDyslexic-Regular.otf" %>';
+      document.getElementsByTagName('head')[0].appendChild(link);
+    }
   } catch(e) {
       console.log(e)
   }

app/views/users/_ux.html.erb

@@ -11,7 +11,7 @@
   <div class="sub-field">
     <%= f.label :config_font, "Base Reading Font" %>
     <div class="theme-selector-field">
-      <% ["default", "sans serif", "monospace", "comic sans"].each do |font| %>
+      <% ["default", "sans serif", "monospace", "comic sans", "open dyslexic"].each do |font| %>
         <%= render partial: "font_selector", locals: { f: f, font: font } %>
       <% end %>
     </div>

config/initializers/assets.rb

@@ -32,3 +32,4 @@ Rails.application.config.assets.precompile += %w[lib/xss.js]
 Rails.application.config.assets.precompile += %w[lib/pulltorefresh.js]
 Rails.application.config.assets.precompile += %w[internal.js]
 Rails.application.config.assets.precompile += %w[internal/layout]
+Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

docs/backend/roles.md

@@ -70,6 +70,7 @@ User.joins(:roles).order(:id).group(:id).pluck(:id, :username, Arel.sql("array_a
 
 [1]: https://github.com/RolifyCommunity/rolify
 [2]: https://github.com/thepracticaldev/dev.to/blob/master/app/models/role.rb
-[3]: https://github.com/thepracticaldev/dev.to/search?q=has_role&unscoped_q=has_role
+[3]:
+  https://github.com/thepracticaldev/dev.to/search?q=has_role&unscoped_q=has_role
 [4]: https://stackoverflow.com/a/16096790/1511504
 [5]: /backend/admin

docs/frontend/liquid-tags.md

@@ -4,8 +4,8 @@ title: Liquid Tags
 
 # Liquid Tags
 
-Liquid tags are special elements of the [DEV Markdown
-editor](https://dev.to/new).
+Liquid tags are special elements of the
+[DEV Markdown editor](https://dev.to/new).
 
 They are custom embeds that are added via a `{% %}` syntax.
 [Liquid](https://shopify.github.io/liquid/) is a templating language developed

docs/getting-started/workflow.md

@@ -7,7 +7,8 @@ title: Suggested Workflow
 We use [Spring](https://github.com/rails/spring), and it is already included in
 the project.
 
-1.  Use the provided bin stubs to automatically start Spring, i.e. `bin/rails server`, `bin/rspec spec/models/`, `bin/rails db:migrate`.
+1.  Use the provided bin stubs to automatically start Spring, i.e.
+    `bin/rails server`, `bin/rspec spec/models/`, `bin/rails db:migrate`.
 1.  If Spring isn't picking up on new changes, use `spring stop`. For example,
     Spring should always be restarted if there's a change in the environment
     keys.
@@ -18,23 +19,27 @@ result. Instead, use `bin/spring rspec`.
 
 ## Synchronizing a fork with upstream / integrate latest changes
 
-When changes in the upstream repository happen, the fork does not get those automatically and this is by design.
-To integrate the changes to the upstream repo that were committed since you cloned your fork or synced the last time, use the following script:
-`./scripts/sync_fork.sh`
-This will fetch the changes and merge them into your current workspace.
+When changes in the upstream repository happen, the fork does not get those
+automatically and this is by design. To integrate the changes to the upstream
+repo that were committed since you cloned your fork or synced the last time, use
+the following script: `./scripts/sync_fork.sh` This will fetch the changes and
+merge them into your current workspace.
 
 Use this:
 
 - to get commits from upsteam master into your branch
-- to sync with latest changes from upsteam master before continuing with a new feature on your current branch
+- to sync with latest changes from upsteam master before continuing with a new
+  feature on your current branch
 
 ## Start over / discard all your changes
 
-Sometimes it is neccesarry to start over from the beginning or reset the current workspace to the state of the upstream branch.
-Use the helper `./scripts/clean_fork.sh` to set your fork to the exact same state as the upstream master branch.
+Sometimes it is neccesarry to start over from the beginning or reset the current
+workspace to the state of the upstream branch. Use the helper
+`./scripts/clean_fork.sh` to set your fork to the exact same state as the
+upstream master branch.
 
 Use this:
 
 - before working on a new feature
-- before creating a new branch
-  to make sure to have all the latest changes in your fork also.
+- before creating a new branch to make sure to have all the latest changes in
+  your fork also.

spec/models/user_spec.rb

@@ -752,6 +752,47 @@ RSpec.describe User, type: :model do
     end
   end
 
+  describe "theming properties" do
+    it "creates proper body class with defaults" do
+      expect(user.decorate.config_body_class).to eq("default default-article-body pro-status-#{user.pro?} trusted-status-#{user.trusted} #{user.config_navbar}-navbar-config")
+    end
+
+    it "determines dark theme if night theme" do
+      user.config_theme = "night_theme"
+      expect(user.decorate.dark_theme?).to eq(true)
+    end
+
+    it "determines dark theme if ten x hacker" do
+      user.config_theme = "ten_x_hacker_theme"
+      expect(user.decorate.dark_theme?).to eq(true)
+    end
+
+    it "determines not dark theme if not one of the dark themes" do
+      user.config_theme = "default"
+      expect(user.decorate.dark_theme?).to eq(false)
+    end
+
+    it "creates proper body class with sans serif config" do
+      user.config_font = "sans_serif"
+      expect(user.decorate.config_body_class).to eq("default sans-serif-article-body pro-status-#{user.pro?} trusted-status-#{user.trusted} #{user.config_navbar}-navbar-config")
+    end
+
+    it "creates proper body class with open dyslexic config" do
+      user.config_font = "open_dyslexic"
+      expect(user.decorate.config_body_class).to eq("default open-dyslexic-article-body pro-status-#{user.pro?} trusted-status-#{user.trusted} #{user.config_navbar}-navbar-config")
+    end
+
+    it "creates proper body class with night theme" do
+      user.config_theme = "night_theme"
+      expect(user.decorate.config_body_class).to eq("night-theme default-article-body pro-status-#{user.pro?} trusted-status-#{user.trusted} #{user.config_navbar}-navbar-config")
+    end
+
+    it "creates proper body class with pink theme" do
+      user.config_theme = "pink_theme"
+      expect(user.decorate.config_body_class).to eq("pink-theme default-article-body pro-status-#{user.pro?} trusted-status-#{user.trusted} #{user.config_navbar}-navbar-config")
+    end
+  end
+
   describe "#calculate_score" do
     it "calculates a score" do
       create(:article, featured: true, user: user)