0.3.7

.gitignore

@@ -35,6 +35,7 @@ eggs/
 
 lib/
 !src/newsreader/scss/lib
+!src/newsreader/js/lib
 
 lib64/
 parts/

CHANGELOG.md

@@ -0,0 +1,31 @@
+# Changelog
+
+## 0.3.7
+
+- Add a dark theme
+- Update object representations
+- Move sentry to optional dependency
+- Add CHANGELOG.md
+
+## 0.3.6.3
+
+- Update deploy job
+
+## 0.3.6.2
+
+- Use warning logging level for BuilderSkippedException's
+- Change working directory before running ansible
+
+## 0.3.6.1
+
+- Install ansible required roles
+
+## 0.3.6
+
+- Update deploy job
+- Add user manageable reddit filters
+
+## 0.3.5
+
+- Show timezone next to post datetimes
+- Take read status in consideration when sorting posts

gitlab-ci/deploy.yml

@@ -20,3 +20,4 @@ deploy:
       --inventory inventory.yml
       --private-key deploy_key
       --vault-password-file vault
+      --extra-vars "app_branch=$CI_COMMIT_TAG"

gitlab-ci/release.yml

@@ -7,6 +7,6 @@ release:
     - echo 'running release job'
   release:
     name: 'Release $CI_COMMIT_TAG'
-    description: 'Auto created release'
+    description: './CHANGELOG.md'
     tag_name: '$CI_COMMIT_TAG'
     ref: '$CI_COMMIT_TAG'

pyproject.toml

@@ -24,10 +24,13 @@ psycopg2-binary = "^2.8.5"
 gunicorn = "^20.0.4"
 python-dotenv = "^0.12.0"
 django = ">=3.0.7"
-sentry-sdk = "^0.15.1"
+sentry-sdk = {version = "^0.15.1", optional = true}
 ftfy = "^5.8"
 requests_oauthlib = "^1.3.0"
 
+[tool.poetry.extras]
+sentry = ["sentry_sdk"]
+
 [tool.poetry.dev-dependencies]
 factory-boy = "^2.12.0"
 freezegun = "^0.3.15"

src/newsreader/js/index.js

@@ -1,3 +1,4 @@
+import './lib/index.js';
 import './pages/homepage/index.js';
 import './pages/categories/index.js';
 import './pages/rules/index.js';

src/newsreader/js/lib/index.js

@@ -0,0 +1 @@
+import './theme.js';

src/newsreader/js/lib/theme.js

@@ -0,0 +1,76 @@
+function isCSSVariablesSupported() {
+  return window.CSS && window.CSS.supports('color', 'var(--fake-color');
+}
+
+function changeTheme(e) {
+  const currentPref = sessionStorage.getItem('t-dark');
+  const isDark = currentPref && currentPref === 'true' ? true : false;
+
+  if (isDark) {
+    document.documentElement.classList.remove('dark-theme');
+  } else {
+    document.documentElement.classList.add('dark-theme');
+  }
+
+  try {
+    sessionStorage.setItem('t-dark', !isDark);
+  } catch (e) {
+    // do nothing.
+  }
+}
+
+function prefersDarkTheme() {
+  try {
+    const currentPref = sessionStorage.getItem('t-dark');
+
+    if (currentPref && currentPref === 'true') {
+      return true;
+    } else if (
+      !currentPref &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  } catch (e) {
+    return false;
+  }
+}
+
+function toggleDarkTheme(isDark) {
+  if (isDark) {
+    document.documentElement.classList.add('dark-theme');
+  } else {
+    document.documentElement.classList.remove('dark-theme');
+  }
+
+  try {
+    sessionStorage.setItem('t-dark', isDark);
+  } catch (e) {
+    // do nothing.
+  }
+}
+
+function initThemeSelector() {
+  const themeButton = document.getElementsByClassName('theme-switcher')[0];
+  const mqPrefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)');
+
+  if (prefersDarkTheme()) {
+    toggleDarkTheme(true);
+  }
+
+  themeButton.addEventListener('click', changeTheme);
+
+  mqPrefersDarkTheme.addListener(mq => {
+    toggleDarkTheme(mq.matches);
+  });
+}
+
+function init() {
+  if (isCSSVariablesSupported()) {
+    initThemeSelector();
+  }
+}
+
+init();

src/newsreader/news/collection/feed.py

@@ -92,6 +92,9 @@ class FeedBuilder(PostBuilder):
         content_details = "\n ".join([item.get("value") for item in content_items])
         return self.sanitize_fragment(content_details)
 
+    def __str__(self):
+        return f"{self.stream.rule.pk}: FeedBuilder"
+
 
 class FeedStream(PostStream):
     rule_type = RuleTypeChoices.feed
@@ -108,6 +111,9 @@ class FeedStream(PostStream):
             message = "Could not parse feed"
             raise StreamParseException(response=response, message=message) from e
 
+    def __str__(self):
+        return f"{self.rule.pk}: FeedStream"
+
 
 class FeedClient(PostClient):
     stream = FeedStream

src/newsreader/news/collection/reddit.py

@@ -290,6 +290,9 @@ class RedditBuilder(PostBuilder):
             title=title,
         )
 
+    def __str__(self):
+        return f"{self.stream.rule.pk}: RedditBuilder"
+
 
 class RedditStream(PostStream):
     rule_type = RuleTypeChoices.subreddit
@@ -315,6 +318,9 @@ class RedditStream(PostStream):
                 response=response, message="Failed parsing json"
             ) from e
 
+    def __str__(self):
+        return f"{self.rule.pk}: RedditStream"
+
 
 class RedditClient(PostClient):
     stream = RedditStream

src/newsreader/news/collection/twitter.py

@@ -175,6 +175,9 @@ class TwitterBuilder(PostBuilder):
 
         return formatted_entities
 
+    def __str__(self):
+        return f"{self.stream.rule.pk}: TwitterBuilder"
+
 
 class TwitterStream(PostStream):
     rule_type = RuleTypeChoices.twitter_timeline
@@ -199,6 +202,9 @@ class TwitterStream(PostStream):
                 response=response, message="Failed parsing json"
             ) from e
 
+    def __str__(self):
+        return f"{self.rule.pk}: TwitterStream"
+
 
 class TwitterClient(PostClient):
     stream = TwitterStream

src/newsreader/news/core/forms.py

@@ -12,7 +12,14 @@ class RulesWidget(CheckboxSelectMultiple):
 
     def create_option(self, *args, **kwargs):
         option = super().create_option(*args, **kwargs)
-        instance = self.choices.queryset.get(pk=option["value"])
+
+        # see https://docs.djangoproject.com/en/3.1/releases/3.1/#id1
+        try:
+            pk = int(option["value"])
+        except TypeError:
+            pk = option["value"].value
+
+        instance = self.choices.queryset.get(pk=pk)
 
         if self.category and instance.category:
             option["selected"] = self.category.pk == instance.category.pk

src/newsreader/scss/components/body/_body.scss

@@ -3,7 +3,6 @@
   padding: 0;
 
   font-family: Rubik, sans-serif;
-  color: $font-color;
 }
 
 body {

src/newsreader/scss/components/card/_card.scss

@@ -7,7 +7,7 @@
 
   width: 50%;
 
-  background-color: $white;
+  background-color: var(--background-color);
 
   &__header {
     display: flex;
@@ -16,7 +16,7 @@
 
     padding: 15px 0;
 
-    border-bottom: 2px $gray solid;
+    border-bottom: 2px var(--lightest-accent-color) solid;
   }
 
   &__content {

src/newsreader/scss/components/category/_category.scss

@@ -36,6 +36,6 @@
   }
 
   &--selected, &:hover {
-    background-color: $gray;
+    background-color: var(--lighter-accent-color);
   }
 }

src/newsreader/scss/components/form/_form.scss

@@ -4,7 +4,7 @@
 
   width: 70%;
 
-  background-color: $white;
+  background-color: var(--background-color);
 
   &__section {
     &--last {

src/newsreader/scss/components/index.scss

@@ -3,6 +3,7 @@
 @import './main/index';
 @import './navbar/index';
 @import './loading-indicator/index';
+@import './theme-switcher/index';
 
 @import './modal/index';
 

src/newsreader/scss/components/modal/_modal.scss

@@ -20,7 +20,7 @@
 
     width: 60%;
 
-    background-color: $white;
+    background-color: var(--accent-color);
   }
 
   &__header {

src/newsreader/scss/components/navbar/_navbar.scss

@@ -1,6 +1,7 @@
 .nav {
   display: flex;
   justify-content: center;
+  align-items: center;
 
   margin: 0 0 5px 0;
   padding: 10px 0;

src/newsreader/scss/components/post-message/_post-message.scss

@@ -7,8 +7,6 @@
   width: 60%;
   height: 80vh;
 
-  background-color: $white;
-
   &__message {
     font-size: 16px;
   }

src/newsreader/scss/components/post/_post.scss

@@ -11,7 +11,7 @@
 
   overflow-y: auto;
 
-  background-color: $white;
+  background-color: var(--background-color);
 
   cursor: initial;
 
@@ -33,7 +33,7 @@
 
   &__title {
     &--read {
-      color: $gainsboro;
+      color: var(--read-color);
     }
   }
 
@@ -55,7 +55,7 @@
   }
 
   &__rule, &__category {
-    background-color: $orange !important;
+    background-color: var(--lightest-accent-color) !important;
 
     & a {
       color: $black;

src/newsreader/scss/components/posts/_posts.scss

@@ -33,7 +33,7 @@
     }
 
     & .badge {
-      background-color: $orange;
+      background-color: var(--lightest-accent-color);
     }
 
     &:last-child {
@@ -48,7 +48,7 @@
     font-size: 16px;
 
     &--read {
-      color: darken($gainsboro, +10%);
+      color: var(--read-color);
     }
 
     &:hover {

src/newsreader/scss/components/rules/_rules.scss

@@ -14,11 +14,11 @@
 
     &:hover {
       cursor: pointer;
-      background-color: $gray;
+      background-color: var(--lighter-accent-color);
     }
 
     &--selected {
-      background-color: $gray;
+      background-color: var(--lighter-accent-color);
     }
   }
 

src/newsreader/scss/components/table/_table.scss

@@ -1,7 +1,7 @@
 .table {
   table-layout: fixed;
 
-  background-color: $white;
+  background-color: var(--background-color);
   width: 90%;
   padding: 20px;
 

src/newsreader/scss/components/theme-switcher/_theme-switcher.scss

@@ -0,0 +1,5 @@
+.theme-switcher {
+  &:hover {
+    cursor: pointer;
+  }
+}

src/newsreader/scss/components/theme-switcher/index.scss

@@ -0,0 +1 @@
+@import './theme-switcher';

src/newsreader/scss/elements/badge/_badge.scss

@@ -6,7 +6,7 @@
 
   text-align: center;
 
-  background-color: $gainsboro;
+  background-color: var(--lighter-accent-color);
 
   font-size: small;
 }

src/newsreader/scss/elements/checkbox/_checkbox.scss

@@ -14,7 +14,7 @@
 
     &:checked + .checkbox__label {
       .checkbox__box {
-        background-color: $checkbox-blue;
+        background-color: var(--lightest-accent-color);
       }
     }
   }
@@ -29,7 +29,7 @@
 
     height: 100%;
     width: 100%;
-    border: 2px solid darken($gainsboro, 10%);
+    border: 2px solid var(--lighter-accent-color);
     cursor: pointer;
   }
 }

src/newsreader/scss/elements/h1/_h1.scss

@@ -1,5 +1,5 @@
 .h1 {
-  color: $header-color;
+  color: var(--font-color);
   font-size: 20px;
 }
 

src/newsreader/scss/elements/h2/_h2.scss

@@ -1,5 +1,5 @@
 .h2 {
-  color: $header-color;
+  color: var(--font-color);
 }
 
 h2 {

src/newsreader/scss/elements/h3/_h3.scss

@@ -1,5 +1,5 @@
 .h3 {
-  color: $header-color;
+  color: var(--font-color);
 }
 
 h3 {

src/newsreader/scss/elements/h4/_h4.scss

@@ -1,5 +1,5 @@
 .h4 {
-  color: $header-color;
+  color: var(--font-color);
 }
 
 h4 {

src/newsreader/scss/elements/h5/_h5.scss

@@ -1,5 +1,5 @@
 .h5 {
-  color: $header-color;
+  color: var(--font-color);
 }
 
 h5 {

src/newsreader/scss/elements/input/_input.scss

@@ -1,10 +1,12 @@
 .input {
   @include text-padding;
 
-  border: 1px $gray solid;
+  color: var(--font-color);
+  background-color: var(--accent-color);
+  border: 1px var(--lighter-accent-color) solid;
 
   &:focus {
-    border: 1px $focus-blue solid;
+    border: 1px var(--lightest-accent-color) solid;
   }
 
   &[type="file"] {

src/newsreader/scss/elements/link/_link.scss

@@ -1,5 +1,5 @@
 .link {
-  color: darken($azureish-white, 30%);
+  color: var(--link-color);
   text-decoration: none;
 
   &:hover {

src/newsreader/scss/elements/small/_small.scss

@@ -1,5 +1,5 @@
 .small {
-  color: $nickel;
+  color: var(--font-color);
   font-size: small;
 }
 

src/newsreader/scss/lib/_css.gg.scss

@@ -1,10 +1,10 @@
 @import '~css.gg/icons-scss/icons';
 
 .gg-link {
-  color: initial;
+  color: var(--font-color);
 }
 
 .gg-pen {
+  color: var(--font-color);
   transform: rotate(-45deg) scale(var(--ggs, 0.8));
-  color: initial;
 }

src/newsreader/scss/partials/_colors.scss

@@ -8,9 +8,6 @@ $white: rgba(255, 255, 255, 1);
 $black: rgba(0, 0, 0, 1);
 $dark: rgba(0, 0, 0, 0.4);
 
-$font-color: rgba(48, 51, 53, 1);
-$header-color: rgba(100, 101, 102, 1);
-
 $reddit-orange: rgba(255, 69, 0, 1);
 $twitter-blue: rgba(29, 155, 240, 1);
 
@@ -26,3 +23,25 @@ $lavendal-pink: rgba(162, 155, 254, 1);
 
 $focus-blue: darken($azureish-white, +10%);
 $checkbox-blue: rgba(34, 170, 253, 1);
+
+// White theme
+$background-color: $white;
+
+$font-color: rgba(48, 51, 53, 1);
+$link-color: darken($azureish-white, 30%);
+$read-color: darken($gainsboro, 10%);
+
+$accent-color: $gainsboro;
+$lighter-accent-color: $gainsboro;
+$lightest-accent-color: $orange;
+
+// Dark theme
+$dark-background-color: rgba(29, 45, 80, 1);
+
+$dark-font-color: darken($gray, 10%);
+$dark-link-color: $link-color;
+$dark-read-color: darken($dark-font-color, 20%);
+
+$dark-accent-color: rgba(19, 59, 92, 1);
+$dark-lighter-accent-color: rgba(30, 95, 116, 1);
+$dark-lightest-accent-color: rgba(252, 218, 183, 1);

src/newsreader/scss/partials/_root.scss

@@ -0,0 +1,26 @@
+:root {
+  --background-color: #{$background-color};
+
+  --font-color: #{$font-color};
+  --link-color: #{$link-color};
+  --read-color: #{$read-color};
+
+  --accent-color: #{$accent-color};
+  --lighter-accent-color: #{$lighter-accent-color};
+  --lightest-accent-color: #{$lightest-accent-color};
+
+  &.dark-theme {
+    --background-color: #{$dark-background-color};
+
+    --font-color: #{$dark-font-color};
+    --link-color: #{$dark-link-color};
+    --read-color: #{$dark-read-color};
+
+    --accent-color: #{$dark-accent-color};
+    --lighter-accent-color: #{$dark-lighter-accent-color};
+    --lightest-accent-color: #{$dark-lightest-accent-color};
+  }
+
+  color: var(--font-color);
+  background-color: var(--background-color);
+}

src/newsreader/scss/partials/index.scss

@@ -1,2 +1,3 @@
 @import './colors';
 @import './fonts';
+@import './root';

src/newsreader/templates/base.html

@@ -27,6 +27,8 @@
           <li class="nav__item"><a href="{% url 'accounts:register' %}">Register</a></li>
         {% endif %}
       </ol>
+
+      <i class="theme-switcher gg-dark-mode"></i>
     </nav>
 
     {% if messages %}