From 70b058a683b48a4f9a815d87e1dfe3b774ad6a7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= Date: Wed, 16 Aug 2023 18:31:10 +0200 Subject: [PATCH 01/15] Setup associations for vscode --- .vscode/settings.json | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..c659b65 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "files.associations": { + "*.html": "jinja-html" + } +} -- 2.45.2 From 41575bf4a97f19845ce0a49fec80a7b3414057a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= Date: Wed, 16 Aug 2023 18:52:24 +0200 Subject: [PATCH 02/15] Refactor templates --- .editorconfig | 15 ++++ view/templates/about.html | 63 ++++++---------- view/templates/base.html | 25 ++++++ view/templates/feeds.html | 56 ++++++-------- view/templates/index.html | 134 +++++++++++++++------------------ view/templates/parts/head.html | 7 -- 6 files changed, 145 insertions(+), 155 deletions(-) create mode 100644 .editorconfig create mode 100644 view/templates/base.html delete mode 100644 view/templates/parts/head.html diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..e6d4a33 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,15 @@ +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +[*.{html,py}] +indent_style = tab +indent_size = 4 + +[*.html] +indent_style = tab +indent_size = 2 diff --git a/view/templates/about.html b/view/templates/about.html index d906a45..4859a28 100644 --- a/view/templates/about.html +++ b/view/templates/about.html @@ -1,42 +1,23 @@ - - +{% extends "base.html" %} - - {% include 'parts/head.html' %} - - - - - - -
-
-

Headliner

-

Headliner is monitoring rss feeds of czech news websites for changes in article headlines. Just - because it might be interesting.

-

See the source code, but be aware that it's not too nice. - Feel free to improve it.

-

If you want to access the raw data collected by this tool, you can download the full archive from our git

-
-
- - {% include 'parts/footer.html' %} - - - \ No newline at end of file +{% block body %} +
+
+

Headliner

+

+ Headliner is monitoring rss feeds of czech news websites for changes in + article headlines. Just because it might be interesting. +

+

+ See the source code, + but be aware that it's not too nice. Feel free to improve it. +

+

+ If you want to access the raw data collected by this tool, you can + download the full archive from our git +

+
+
+{% endblock body %} diff --git a/view/templates/base.html b/view/templates/base.html new file mode 100644 index 0000000..23bb11c --- /dev/null +++ b/view/templates/base.html @@ -0,0 +1,25 @@ + + + + + + Headliner + + + + + + {% block body %}{% endblock %} + {% include 'parts/footer.html' %} + + diff --git a/view/templates/feeds.html b/view/templates/feeds.html index 8c15342..dd4457c 100644 --- a/view/templates/feeds.html +++ b/view/templates/feeds.html @@ -1,35 +1,27 @@ - - +{% extends "base.html" %} - - {% include 'parts/head.html' %} - +{% block body %} +
+
+ + + + + + + + + + {% for feed in feeds %} + + + + - - -
-
-
NameRSS/Atom URLUnique tag
{{ feed.feed_name }}{{ feed.rss_source | urlize(target="_blank") }}{{ feed.unique_tag }}
- - - - - - - - - {% for feed in feeds %} - - - - - - {% endfor %} - -
NameRSS/Atom URLUnique tag
{{ feed.feed_name }}{{ feed.rss_source | urlize(target="_blank") }}{{ feed.unique_tag }}
-
+ {% endfor %} + + +
- {% include 'parts/footer.html' %} - - - \ No newline at end of file + +{% endblock body %} diff --git a/view/templates/index.html b/view/templates/index.html index 4dea652..79f3f0f 100644 --- a/view/templates/index.html +++ b/view/templates/index.html @@ -1,80 +1,64 @@ - - +{% extends "base.html" %} - - {% include 'parts/head.html' %} - - - - - - -
+{% block body %} +
- - + +
-
- - - - - - - - - - - - {% for diff in diffs %} - - - - - - - - {% endfor %} - -
Detection timeSourceDiffOriginalChanged
{{ diff.diff_time }}{{ diff.feed_name }}{{ diff.diff_html|safe }} - {{ diff.title_orig|truncate(15) }} - {{ diff.title_orig }} - - {{ diff.title_new|truncate(15) }} - {{ diff.title_new}} -
-
-
-
-
- {{ pagination.links }} -
-
- {{ pagination.info }} -
-
-
-
- {% include 'parts/footer.html' %} - - - +
+ + + + + + + + + + + + {% for diff in diffs %} + + + + + + + + {% endfor %} + +
Detection timeSourceDiffOriginalChanged
{{ diff.diff_time }} + {{ diff.feed_name }} + {{ diff.diff_html|safe }} + {{ diff.title_orig|truncate(15) }} + {{ diff.title_orig }} + + {{ diff.title_new|truncate(15) }} + {{ diff.title_new}} +
+
+
+
+
{{ pagination.links }}
+
{{ pagination.info }}
+
+
+
+{% endblock body %} diff --git a/view/templates/parts/head.html b/view/templates/parts/head.html deleted file mode 100644 index 50739f8..0000000 --- a/view/templates/parts/head.html +++ /dev/null @@ -1,7 +0,0 @@ - - -Headliner - - - - \ No newline at end of file -- 2.45.2 From 165948da05ad8d4de73e9cf5e90fe41f9cb80990 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= Date: Wed, 16 Aug 2023 19:41:55 +0200 Subject: [PATCH 03/15] WIP --- view/static/main.css | 91 ++++++++++++++++++++++++++++++++ view/templates/base.html | 11 +++- view/templates/index.html | 20 +++---- view/templates/parts/footer.html | 4 +- 4 files changed, 109 insertions(+), 17 deletions(-) diff --git a/view/static/main.css b/view/static/main.css index e69de29..a508865 100644 --- a/view/static/main.css +++ b/view/static/main.css @@ -0,0 +1,91 @@ +:root { + --border-color: hsl(0 0% 90%); + --accent-color: red; +} + +html { + box-sizing: border-box; + font-family: system-ui; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +* { + margin: 0; +} + +body { + line-height: 1.5; +} + +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} + +input, +button, +textarea, +select { + font: inherit; +} + +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} + +body { + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: stretch; +} + +.footer { + margin-top: auto; + padding: 1.5rem 0; + margin-top: 1.5rem; + border-top: 1px solid var(--border-color); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +table, +th, +tr, +td { + text-align: inherit; +} + +.pagination { + list-style-type: none; + padding: 0; + display: flex; +} + +.page-link { + display: block; + padding: 0.5em 1em; +} + +.page-item.active { + background-color: var(--accent-color); +} diff --git a/view/templates/base.html b/view/templates/base.html index 23bb11c..b3977e5 100644 --- a/view/templates/base.html +++ b/view/templates/base.html @@ -19,7 +19,16 @@ > - {% block body %}{% endblock %} +
+
+

+ Headliner +

+
+
+
+ {% block body %}{% endblock %} +
{% include 'parts/footer.html' %} diff --git a/view/templates/index.html b/view/templates/index.html index 79f3f0f..a9012d5 100644 --- a/view/templates/index.html +++ b/view/templates/index.html @@ -2,7 +2,7 @@ {% block body %}
-
+
- + >Hledat
@@ -42,11 +40,9 @@ {{ diff.diff_html|safe }} - {{ diff.title_orig|truncate(15) }} {{ diff.title_orig }} - {{ diff.title_new|truncate(15) }} {{ diff.title_new}} @@ -54,11 +50,7 @@
-
-
-
{{ pagination.links }}
-
{{ pagination.info }}
-
-
+ {{ pagination.links }} + {{ pagination.info }}
{% endblock body %} diff --git a/view/templates/parts/footer.html b/view/templates/parts/footer.html index 64bac23..604114a 100644 --- a/view/templates/parts/footer.html +++ b/view/templates/parts/footer.html @@ -1,5 +1,5 @@ - -- 2.45.2 From ac690f2fb2b7efd6072c2651256a46bd1e6ff24e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= Date: Wed, 16 Aug 2023 21:09:18 +0200 Subject: [PATCH 04/15] WIP --- view/static/main.css | 82 +++++++++++++++++++++++++++++++++++---- view/templates/index.html | 63 +++++++++++++++--------------- 2 files changed, 106 insertions(+), 39 deletions(-) diff --git a/view/static/main.css b/view/static/main.css index a508865..962dd81 100644 --- a/view/static/main.css +++ b/view/static/main.css @@ -1,6 +1,12 @@ :root { - --border-color: hsl(0 0% 90%); - --accent-color: red; + --border-color: hsl(0 0% 80%); + --accent-color: blue; + --color-muted: hsl(0 0% 50%); + --radius-m: 0.5em; + --font-size-m: 1rem; + --font-size-s: 0.85rem; + --font-size-xs: 0.75rem; + --font-size-l: 1.25rem; } html { @@ -68,6 +74,10 @@ body { padding: 0 2rem; } +ins { + background-color: green; +} + table, th, tr, @@ -79,13 +89,71 @@ td { list-style-type: none; padding: 0; display: flex; + + & .page-link { + display: block; + padding: 0.5em 1em; + } + + & .page-item.active { + background-color: var(--accent-color); + } } -.page-link { - display: block; - padding: 0.5em 1em; +.changeset { + padding: 1rem 1.5rem; + border: 1px solid var(--border-color); + border-radius: var(--radius-m); + margin-bottom: 1rem; + box-shadow: 0 2px 0 hsl(0 0% 50% / 20%); } -.page-item.active { - background-color: var(--accent-color); +.changeset-actions { + display: flex; + gap: 1rem; + margin-bottom: 0.75rem; +} + +.changeset-feed-name, +.changeset-time, +.changeset-action { + font-weight: 500; + font-size: var(--font-size-s); +} + +.changeset-feed-name, +.changeset-time { + /* color: var(--color-muted); */ +} + +.changeset-action { + display: inline-flex; + align-items: center; + gap: 0.5em; + font-weight: 500; + color: var(--color-muted); + text-decoration: none; + transition: color 200ms; +} + +.changeset-action:first-of-type { + margin-left: 0.5em; +} + +.changeset-action:hover { + color: var(--accent-color); +} + +.changeset-title { + font-size: var(--font-size-l); +} + +.changeset svg { + display: inline-block; + fill: currentColor; + width: 1.25em; +} + +.changeset details[open] summary { + margin-bottom: 1rem; } diff --git a/view/templates/index.html b/view/templates/index.html index a9012d5..f056ee1 100644 --- a/view/templates/index.html +++ b/view/templates/index.html @@ -18,38 +18,37 @@ >Hledat -
- - - - - - - - - - - - {% for diff in diffs %} - - - - - - - - {% endfor %} - -
Detection timeSourceDiffOriginalChanged
{{ diff.diff_time }} - {{ diff.feed_name }} - {{ diff.diff_html|safe }} - {{ diff.title_orig }} - - {{ diff.title_new}} -
-
+ + {% for diff in diffs %} + + {% endfor %} + {{ pagination.links }} {{ pagination.info }} -- 2.45.2 From d37c5799ad6851a13d657aa916c75d29ad4c81a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= Date: Wed, 16 Aug 2023 21:57:31 +0200 Subject: [PATCH 05/15] WIP --- view/static/main.css | 96 +++++++++++++++++++++++++++++++++------ view/templates/base.html | 3 ++ view/templates/index.html | 44 ++++++++++-------- 3 files changed, 111 insertions(+), 32 deletions(-) diff --git a/view/static/main.css b/view/static/main.css index 962dd81..812895e 100644 --- a/view/static/main.css +++ b/view/static/main.css @@ -1,17 +1,21 @@ +/* Global */ + :root { - --border-color: hsl(0 0% 80%); - --accent-color: blue; + --border-color: hsl(0 0% 80% / 60%); + --accent-color: hsl(225 90% 40%); --color-muted: hsl(0 0% 50%); + --radius-s: 0.25em; --radius-m: 0.5em; --font-size-m: 1rem; --font-size-s: 0.85rem; --font-size-xs: 0.75rem; --font-size-l: 1.25rem; + --box-shadow: 0 2px 0 hsl(0 0% 50% / 20%); } html { box-sizing: border-box; - font-family: system-ui; + font-family: "Inter", system-ui; } *, @@ -74,8 +78,42 @@ body { padding: 0 2rem; } -ins { - background-color: green; +.input { + border-radius: var(--radius-s); + border: 1px solid var(--border-color); + padding: 0.375rem 0.75rem; + font-size: var(--font-size-m); + transition: border-color 120ms, box-shadow 120ms; +} + +.input:focus { + border-color: var(--accent-color); + box-shadow: 0 0 0 2px hsl(225 90% 40% / 50%); + outline: none; +} + +.button { + display: inline-flex; + align-items: center; + gap: 0.5em; + border-radius: var(--radius-s); + border: 1px solid var(--border-color); + padding: 0.375rem 0.75rem; + background: hsl(0 0% 95%); + font-size: var(--font-size-m); + transition: background-color 120ms; + color: hsl(0 0% 40%); + font-weight: 500; + font-size: 0.9em; + line-height: 1.5rem; +} + +.button:not(:disabled) { + cursor: pointer; +} + +.button:hover { + background: hsl(0 0% 90%); } table, @@ -89,15 +127,47 @@ td { list-style-type: none; padding: 0; display: flex; + margin-bottom: 1rem; +} - & .page-link { - display: block; - padding: 0.5em 1em; - } +.page-link { + display: block; + padding: 0.5em 1em; + text-decoration: none; + color: inherit; +} - & .page-item.active { - background-color: var(--accent-color); - } +.page-item { + border: 1px solid var(--border-color); + box-shadow: var(--box-shadow); +} + +.page-item:first-of-type { + border-radius: var(--radius-s) 0 0 var(--radius-s); +} + +.page-item:last-of-type { + border-radius: 0 var(--radius-s) var(--radius-s) 0; +} + +.page-item:not(:last-of-type) { + border-right-width: 0px; +} + +.page-item.active .page-link { + background-color: var(--accent-color); + color: white; + border-color: transparent; +} + +/* Index */ + +.filters { + margin-bottom: 2rem; + position: sticky; + top: 0; + background-color: white; + padding: 0.75rem 0; } .changeset { @@ -148,7 +218,7 @@ td { font-size: var(--font-size-l); } -.changeset svg { +.inline-icon { display: inline-block; fill: currentColor; width: 1.25em; diff --git a/view/templates/base.html b/view/templates/base.html index b3977e5..4854677 100644 --- a/view/templates/base.html +++ b/view/templates/base.html @@ -17,6 +17,9 @@ data-domain="headline.beta.nolog.cz" src="https://plausible.nolog.cz/js/plausible.js" > + + +
diff --git a/view/templates/index.html b/view/templates/index.html index f056ee1..4cd5e91 100644 --- a/view/templates/index.html +++ b/view/templates/index.html @@ -2,22 +2,27 @@ {% block body %}
-
-
- - -
-
+
+
+
+ + +
+
+
{% for diff in diffs %}
@@ -25,13 +30,14 @@ {{ diff.feed_name }} - + Display article + {# Not implemented yet: - + Show change history - + #}

-- 2.45.2 From 9105df77fb382e1d4f90f032384e1864ec835ab1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= Date: Wed, 16 Aug 2023 23:01:31 +0200 Subject: [PATCH 06/15] Update editorconfig --- .editorconfig | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.editorconfig b/.editorconfig index e6d4a33..6757a0e 100644 --- a/.editorconfig +++ b/.editorconfig @@ -6,10 +6,10 @@ end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true -[*.{html,py}] +[*.py] indent_style = tab indent_size = 4 -[*.html] +[*.{html,css}] indent_style = tab indent_size = 2 -- 2.45.2 From f5abb93df751614c7fd3ed7993cafbf41aed5358 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= Date: Wed, 16 Aug 2023 23:01:45 +0200 Subject: [PATCH 07/15] Add article detail page --- docker-compose.yml | 2 +- view/app.py | 13 +++++++++++-- view/static/main.css | 7 +++++++ view/templates/article_detail.html | 13 +++++++++++++ view/templates/index.html | 5 ++--- 5 files changed, 34 insertions(+), 6 deletions(-) create mode 100644 view/templates/article_detail.html diff --git a/docker-compose.yml b/docker-compose.yml index 4b8a496..65ba04c 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -4,7 +4,7 @@ services: build: ./view/ command: python app.py ports: - - "5000:5000" + - "5050:5000" volumes: - ./view:/app - ./data:/data diff --git a/view/app.py b/view/app.py index 079fadf..61042fe 100644 --- a/view/app.py +++ b/view/app.py @@ -56,8 +56,8 @@ def index(): page = request.args.get(get_page_parameter(), type=int, default=1) pagination = Pagination(page=page, total=diff_count, record_name='diffs', css_framework='bootstrap5') - - + + page_skip = pagination.skip per_page = pagination.per_page if query: @@ -80,6 +80,15 @@ def index(): ) +@app.route("/article/") +def article_detail(article_url: str): + db = get_db().cursor() + db.execute("SELECT * FROM diffs WHERE article_url = ?", (article_url,)) + result = db.fetchall() + # TODO: Handle if nothing is found and return 404 in that case. + return render_template("article_detail.html", article_url=article_url, diffs=result ) + + @app.route('/about') def about(): return render_template('about.html') diff --git a/view/static/main.css b/view/static/main.css index 812895e..f4c6e20 100644 --- a/view/static/main.css +++ b/view/static/main.css @@ -227,3 +227,10 @@ td { .changeset details[open] summary { margin-bottom: 1rem; } + +/* Article detail */ + +.diffs-list { + list-style-type: none; + padding: 0; +} diff --git a/view/templates/article_detail.html b/view/templates/article_detail.html new file mode 100644 index 0000000..13daf54 --- /dev/null +++ b/view/templates/article_detail.html @@ -0,0 +1,13 @@ +{% extends "base.html" %} + +{% block body %} +
+

Diffs for the article at {{ article_url }}

+ +
    + {% for diff in diffs %} +
  1. {{ diff.diff_time }} {{ diff.diff_html|safe }}
    2. + {% endfor %} +
+
+{% endblock body %} diff --git a/view/templates/index.html b/view/templates/index.html index 4cd5e91..6310eb7 100644 --- a/view/templates/index.html +++ b/view/templates/index.html @@ -31,13 +31,12 @@ - Display article + Display current article - {# Not implemented yet: Show change history - #} +

-- 2.45.2 From ac2ca35a56988f7b9a4a054dfac564e964197a62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= Date: Thu, 17 Aug 2023 00:06:57 +0200 Subject: [PATCH 08/15] Style --- view/static/main.css | 123 +++++++++++++++++++++++++++---- view/templates/base.html | 12 +-- view/templates/index.html | 26 ++++--- view/templates/parts/footer.html | 17 ++++- view/templates/parts/header.html | 13 ++++ 5 files changed, 154 insertions(+), 37 deletions(-) create mode 100644 view/templates/parts/header.html diff --git a/view/static/main.css b/view/static/main.css index f4c6e20..e06c8ca 100644 --- a/view/static/main.css +++ b/view/static/main.css @@ -18,6 +18,14 @@ html { font-family: "Inter", system-ui; } +body { + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: stretch; + line-height: 1.5; +} + *, *::before, *::after { @@ -56,20 +64,101 @@ h4, h5, h6 { overflow-wrap: break-word; + font-size: inherit; + font-weight: inherit; } -body { - min-height: 100vh; +table, +th, +tr, +td { + text-align: inherit; +} + +summary { + cursor: pointer; + list-style: none; display: flex; - flex-direction: column; - align-items: stretch; + align-items: center; + gap: 0.5em; +} + +summary::-webkit-details-marker { + display: none; +} + +summary::before { + content: url('data:image/svg+xml,'); + display: grid; + place-content: center; + transition: transform 120ms; +} + +details[open] summary::before { + transform: rotate(90deg); +} + +.header { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.header .container { + display: flex; + align-items: center; + gap: 2rem; +} + +.header nav { + display: flex; + align-items: center; + gap: 1rem; +} + +.header a { + color: inherit; + text-decoration: none; +} + +.header h1 { + font-size: 1.5rem; + font-weight: 700; +} + +.header h1 .del { + text-decoration: line-through; + text-decoration-thickness: 2px; +} + +.header h1 .ins { + text-decoration: underline; + text-decoration-thickness: 1px; + text-decoration-style: wavy; +} + +.main { + margin-bottom: auto; } .footer { - margin-top: auto; + margin-top: 4rem; padding: 1.5rem 0; - margin-top: 1.5rem; - border-top: 1px solid var(--border-color); + color: hsl(0 0% 60%); +} + +.footer a { + color: inherit; +} + +.footer-container { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.footer-nologo { + display: inline-block; + fill: currentColor; } .container { @@ -116,13 +205,6 @@ body { background: hsl(0 0% 90%); } -table, -th, -tr, -td { - text-align: inherit; -} - .pagination { list-style-type: none; padding: 0; @@ -160,6 +242,14 @@ td { border-color: transparent; } +.diff ins { + text-decoration-color: hsl(120 50% 75% / 50%); +} + +.diff del { + text-decoration-color: hsl(0 50% 40% / 50%); +} + /* Index */ .filters { @@ -168,6 +258,7 @@ td { top: 0; background-color: white; padding: 0.75rem 0; + border-bottom: 1px solid var(--border-color); } .changeset { @@ -228,6 +319,10 @@ td { margin-bottom: 1rem; } +.changeset table th { + padding-right: 1rem; +} + /* Article detail */ .diffs-list { diff --git a/view/templates/base.html b/view/templates/base.html index 4854677..f22109f 100644 --- a/view/templates/base.html +++ b/view/templates/base.html @@ -22,16 +22,10 @@ -
-
-

- Headliner -

-
-
-
+ {% include "parts/header.html" %} +
{% block body %}{% endblock %}
- {% include 'parts/footer.html' %} + {% include "parts/footer.html" %} diff --git a/view/templates/index.html b/view/templates/index.html index 6310eb7..029bd9e 100644 --- a/view/templates/index.html +++ b/view/templates/index.html @@ -1,8 +1,8 @@ {% extends "base.html" %} {% block body %} -
-
+
+
+
+
{% for diff in diffs %}

@@ -40,16 +42,18 @@

- {{ diff.diff_html|safe }} +

{{ diff.diff_html|safe }}

 -

- Old: - {{ diff.title_orig }} -

-

- New: - {{ diff.title_new }} -

+ + + + + + + + + +
Old{{ diff.title_orig }}
New{{ diff.title_new }}
{% endfor %} diff --git a/view/templates/parts/footer.html b/view/templates/parts/footer.html index 604114a..6ddc5f9 100644 --- a/view/templates/parts/footer.html +++ b/view/templates/parts/footer.html @@ -1,5 +1,16 @@ diff --git a/view/templates/parts/header.html b/view/templates/parts/header.html new file mode 100644 index 0000000..d35ecad --- /dev/null +++ b/view/templates/parts/header.html @@ -0,0 +1,13 @@ +
+
+ +

+ Headliner +

+ + +
+
-- 2.45.2 From 3a53b026bff595e1c8d7ec637b8b4d2cb6d20bba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= Date: Thu, 17 Aug 2023 10:14:33 +0200 Subject: [PATCH 09/15] Style --- view/static/main.css | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/view/static/main.css b/view/static/main.css index e06c8ca..428fc7d 100644 --- a/view/static/main.css +++ b/view/static/main.css @@ -75,6 +75,14 @@ td { text-align: inherit; } +ins { + text-decoration-color: hsl(120 50% 75% / 50%); +} + +del { + text-decoration-color: hsl(0 50% 40% / 50%); +} + summary { cursor: pointer; list-style: none; @@ -221,7 +229,16 @@ details[open] summary::before { .page-item { border: 1px solid var(--border-color); - box-shadow: var(--box-shadow); + background: hsl(0 0% 95%); + transition: background-color 120ms; + color: hsl(0 0% 40%); + font-weight: 500; + font-size: 0.85em; + line-height: 1.5rem; +} + +.page-item:not(.active):hover { + background: hsl(0 0% 90%); } .page-item:first-of-type { @@ -236,20 +253,12 @@ details[open] summary::before { border-right-width: 0px; } -.page-item.active .page-link { +.page-item.active { background-color: var(--accent-color); color: white; border-color: transparent; } -.diff ins { - text-decoration-color: hsl(120 50% 75% / 50%); -} - -.diff del { - text-decoration-color: hsl(0 50% 40% / 50%); -} - /* Index */ .filters { -- 2.45.2 From b77e8fd20ff9c255e1e3c20a25eb6e96c28f5a17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= Date: Thu, 17 Aug 2023 10:50:02 +0200 Subject: [PATCH 10/15] Style --- view/static/main.css | 66 ++++++++++++++++++++++++-------- view/templates/about.html | 18 ++++++--- view/templates/base.html | 15 +++++++- view/templates/index.html | 8 +++- view/templates/parts/header.html | 13 ------- 5 files changed, 82 insertions(+), 38 deletions(-) delete mode 100644 view/templates/parts/header.html diff --git a/view/static/main.css b/view/static/main.css index 428fc7d..5e6e668 100644 --- a/view/static/main.css +++ b/view/static/main.css @@ -2,7 +2,8 @@ :root { --border-color: hsl(0 0% 80% / 60%); - --accent-color: hsl(225 90% 40%); + --accent-color: hsl(225 90% 50%); + --accent-color-pressed: hsl(225 90% 35%); --color-muted: hsl(0 0% 50%); --radius-s: 0.25em; --radius-m: 0.5em; @@ -24,6 +25,7 @@ body { flex-direction: column; align-items: stretch; line-height: 1.5; + background-color: hsl(0 0% 98%); } *, @@ -75,11 +77,23 @@ td { text-align: inherit; } +a { + color: var(--accent-color); + font-weight: 500; + text-decoration: none; +} + +a:hover { + color: var(--accent-color-pressed); +} + ins { + background-color: hsl(120 100% 95%); text-decoration-color: hsl(120 50% 75% / 50%); } del { + background-color: hsl(0 100% 95%); text-decoration-color: hsl(0 50% 40% / 50%); } @@ -107,8 +121,14 @@ details[open] summary::before { } .header { - margin-top: 1rem; - margin-bottom: 1rem; + padding-top: 1rem; + padding-bottom: 1rem; + background-color: white; +} + +.header:not(.header-extended) { + border-bottom: 1px solid var(--border-color); + margin-bottom: 2rem; } .header .container { @@ -123,7 +143,7 @@ details[open] summary::before { gap: 1rem; } -.header a { +.header-link-home { color: inherit; text-decoration: none; } @@ -166,7 +186,12 @@ details[open] summary::before { .footer-nologo { display: inline-block; - fill: currentColor; + fill: hsl(0 0% 60%); + transition: fill 120ms; +} + +.footer-nologo:hover { + fill: hsl(0 0% 40%); } .container { @@ -213,6 +238,13 @@ details[open] summary::before { background: hsl(0 0% 90%); } +.card { + border: 1px solid var(--border-color); + border-radius: var(--radius-m); + background-color: white; + box-shadow: 0 2px 0 hsl(0 0% 50% / 20%); +} + .pagination { list-style-type: none; padding: 0; @@ -259,6 +291,14 @@ details[open] summary::before { border-color: transparent; } +.pagination-page-info { + color: var(--color-muted); +} + +.prose p:not(:last-of-type) { + margin-bottom: 1rem; +} + /* Index */ .filters { @@ -270,12 +310,13 @@ details[open] summary::before { border-bottom: 1px solid var(--border-color); } +.changesets { + margin-bottom: 2rem; +} + .changeset { padding: 1rem 1.5rem; - border: 1px solid var(--border-color); - border-radius: var(--radius-m); margin-bottom: 1rem; - box-shadow: 0 2px 0 hsl(0 0% 50% / 20%); } .changeset-actions { @@ -291,11 +332,6 @@ details[open] summary::before { font-size: var(--font-size-s); } -.changeset-feed-name, -.changeset-time { - /* color: var(--color-muted); */ -} - .changeset-action { display: inline-flex; align-items: center; @@ -310,10 +346,6 @@ details[open] summary::before { margin-left: 0.5em; } -.changeset-action:hover { - color: var(--accent-color); -} - .changeset-title { font-size: var(--font-size-l); } diff --git a/view/templates/about.html b/view/templates/about.html index 4859a28..d76afcc 100644 --- a/view/templates/about.html +++ b/view/templates/about.html @@ -1,10 +1,18 @@ {% extends "base.html" %} +{% block head %} + +{% endblock head %} + {% block body %} -
-
-

Headliner

-

+

+
+

Headliner is monitoring rss feeds of czech news websites for changes in article headlines. Just because it might be interesting.

@@ -19,5 +27,5 @@ >

-
+
{% endblock body %} diff --git a/view/templates/base.html b/view/templates/base.html index f22109f..6305fba 100644 --- a/view/templates/base.html +++ b/view/templates/base.html @@ -20,9 +20,22 @@ + {% block head %}{% endblock %} - {% include "parts/header.html" %} +
+
+ +

+ Headliner +

+ + +
+
{% block body %}{% endblock %}
diff --git a/view/templates/index.html b/view/templates/index.html index 029bd9e..8ffdc22 100644 --- a/view/templates/index.html +++ b/view/templates/index.html @@ -1,5 +1,7 @@ {% extends "base.html" %} +{% block header_class %}header-extended{% endblock header_class %} + {% block body %}
@@ -25,9 +27,9 @@
-
+
{% for diff in diffs %} -
+

{{ diff.feed_name }} @@ -57,7 +59,9 @@

{% endfor %} +
+
{{ pagination.links }} {{ pagination.info }}
diff --git a/view/templates/parts/header.html b/view/templates/parts/header.html deleted file mode 100644 index d35ecad..0000000 --- a/view/templates/parts/header.html +++ /dev/null @@ -1,13 +0,0 @@ -
-
- -

- Headliner -

- - -
-
-- 2.45.2 From b95ba9eb586f8d530547562bf1747da29fc85d13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= Date: Thu, 17 Aug 2023 11:03:34 +0200 Subject: [PATCH 11/15] Style article detail --- view/static/main.css | 13 ++++----- view/templates/article_detail.html | 45 ++++++++++++++++++++++++++---- 2 files changed, 45 insertions(+), 13 deletions(-) diff --git a/view/static/main.css b/view/static/main.css index 5e6e668..ef68fff 100644 --- a/view/static/main.css +++ b/view/static/main.css @@ -75,6 +75,7 @@ th, tr, td { text-align: inherit; + border-collapse: collapse; } a { @@ -97,6 +98,10 @@ del { text-decoration-color: hsl(0 50% 40% / 50%); } +code { + font-size: inherit; +} + summary { cursor: pointer; list-style: none; @@ -243,6 +248,7 @@ details[open] summary::before { border-radius: var(--radius-m); background-color: white; box-shadow: 0 2px 0 hsl(0 0% 50% / 20%); + overflow: hidden; } .pagination { @@ -363,10 +369,3 @@ details[open] summary::before { .changeset table th { padding-right: 1rem; } - -/* Article detail */ - -.diffs-list { - list-style-type: none; - padding: 0; -} diff --git a/view/templates/article_detail.html b/view/templates/article_detail.html index 13daf54..ee2f734 100644 --- a/view/templates/article_detail.html +++ b/view/templates/article_detail.html @@ -1,13 +1,46 @@ {% extends "base.html" %} +{% block head %} + +{% endblock head %} + {% block body %}
-

Diffs for the article at {{ article_url }}

+

Diffs for the article at {{ article_url }}

-
    - {% for diff in diffs %} -
  1. {{ diff.diff_time }} {{ diff.diff_html|safe }}
    2. - {% endfor %} -
+
+ + {% for diff in diffs %} + + + + + {% endfor %} +
{{ diff.diff_time }}{{ diff.diff_html|safe }}
+
{% endblock body %} -- 2.45.2 From 7e48a57f636cab09fee8a0d1e3c0d5c403f25021 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ondr=CC=8Cej=20Ny=CC=81vlt?= Date: Thu, 17 Aug 2023 11:11:19 +0200 Subject: [PATCH 12/15] Use system font stack --- view/static/main.css | 3 ++- view/templates/base.html | 3 --- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/view/static/main.css b/view/static/main.css index ef68fff..d301f6f 100644 --- a/view/static/main.css +++ b/view/static/main.css @@ -16,7 +16,8 @@ html { box-sizing: border-box; - font-family: "Inter", system-ui; + font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } body { diff --git a/view/templates/base.html b/view/templates/base.html index 6305fba..1e72205 100644 --- a/view/templates/base.html +++ b/view/templates/base.html @@ -17,9 +17,6 @@ data-domain="headline.beta.nolog.cz" src="https://plausible.nolog.cz/js/plausible.js" > - - - {% block head %}{% endblock %} -- 2.45.2 From 2c97d7ab6946e7b58ec16ee1232cc85703c9a958 Mon Sep 17 00:00:00 2001 From: mdivecky Date: Thu, 17 Aug 2023 11:19:12 +0200 Subject: [PATCH 13/15] give every article ID to enable grouping changes by article --- misc/article_id_generator.py | 44 ++++++++++++++++++++++++++++++ processor/app.py | 15 ++++++++-- view/app.py | 9 +++--- view/templates/article_detail.html | 3 +- view/templates/index.html | 2 +- 5 files changed, 64 insertions(+), 9 deletions(-) create mode 100644 misc/article_id_generator.py diff --git a/misc/article_id_generator.py b/misc/article_id_generator.py new file mode 100644 index 0000000..ab9e445 --- /dev/null +++ b/misc/article_id_generator.py @@ -0,0 +1,44 @@ +#!/usr/bin/python3 + +# +# Create a UID of the article in old articles where we don't have RSS UID and where we can't generate the article_id on the fly. +# It takes a while, but it's a one-shot. +# + +import sqlite3 +import hashlib + +db_con = sqlite3.connect("../data/diffs.db") +db = db_con.cursor() + + + + + + + +def create_article_id(uid, feed): + # Create a fake unique ID from RSS unique tag and feed name to reference the article in database + id_string = str(uid) + str(feed) + id_bytes = id_string.encode('utf-8') + article_id = hashlib.sha256(id_bytes).hexdigest() + return(article_id) + + +def update_diff(diff_id, article_id): + sql = "UPDATE diffs SET article_id = ? WHERE diff_id = ?" + sql_data = (article_id, diff_id) + db.execute(sql, sql_data) + db_con.commit() + + + +db.execute( + "SELECT * FROM diffs WHERE NOT 'article_id' ORDER BY diff_id DESC ", +) +diffs = db.fetchall() + +for diff in diffs: + article_id = create_article_id(diff[1], diff[2]) + update_diff(diff[0], article_id) + print(article_id) \ No newline at end of file diff --git a/processor/app.py b/processor/app.py index 58c5bac..bb06ba7 100644 --- a/processor/app.py +++ b/processor/app.py @@ -6,6 +6,7 @@ import redis import time import json import sqlite3 +import hashlib from diff_match_patch import diff_match_patch @@ -34,6 +35,7 @@ db = db_con.cursor() db.executescript(""" CREATE TABLE IF NOT EXISTS diffs ( diff_id INTEGER PRIMARY KEY, + article_id TEXT, feed_name TEXT NOT NULL, article_url TEXT NOT NULL, title_orig TEXT NOT NULL, @@ -84,8 +86,8 @@ def process_diff(old, new, rss_id): # print(old['link']) # print(diff) - sql = "INSERT INTO diffs(feed_name, article_url, title_orig, title_new, diff_html, diff_time) VALUES (?,?,?,?,?,datetime('now', 'localtime'))" - sql_data = (old['medium'], old['link'], old['title'], new['title'], html_diff) + sql = "INSERT INTO diffs(article_id, feed_name, article_url, title_orig, title_new, diff_html, diff_time) VALUES (?,?,?,?,?,datetime('now', 'localtime'))" + sql_data = (new['article_id'], old['medium'], old['link'], old['title'], new['title'], html_diff) db.execute(sql, sql_data) db_con.commit() @@ -108,7 +110,12 @@ def process_item(article, rc): # Article is new, just create it and exit write_article(article, rc) - +def create_article_id(uid, feed): + # Create a unique ID from RSS unique tag and feed name to reference the article in database + id_string = str(uid) + str(feed) + id_bytes = id_string.encode('utf-8') + article_id = hashlib.sha256(id_bytes).hexdigest() + return(article_id) for feed in config['feeds']: @@ -123,11 +130,13 @@ for feed in config['feeds']: try: rss_id = item[unique_tag] title = item['title'] + article_id = create_article_id(rss_id, name) #description = item['description'] ## Don't store description for now, as we don't need it and it's big. published = time.strftime('%Y:%m:%d %H:%M:%S %Z %z', item['published_parsed']) link = item['link'] article_data = { 'title' : title, + 'article_id': article_id, #'description': description, 'published' : published, 'link' : link, diff --git a/view/app.py b/view/app.py index 61042fe..8604279 100644 --- a/view/app.py +++ b/view/app.py @@ -80,13 +80,14 @@ def index(): ) -@app.route("/article/") -def article_detail(article_url: str): +@app.route("/article/") +def article_detail(article_id: str): db = get_db().cursor() - db.execute("SELECT * FROM diffs WHERE article_url = ?", (article_url,)) + db.execute("SELECT * FROM diffs WHERE article_id = ?", (article_id,)) result = db.fetchall() + article_url = result[0]['article_url'] # TODO: Handle if nothing is found and return 404 in that case. - return render_template("article_detail.html", article_url=article_url, diffs=result ) + return render_template("article_detail.html", article_id=article_id, article_url=article_url, diffs=result ) @app.route('/about') diff --git a/view/templates/article_detail.html b/view/templates/article_detail.html index 13daf54..214168e 100644 --- a/view/templates/article_detail.html +++ b/view/templates/article_detail.html @@ -2,7 +2,8 @@ {% block body %}
-

Diffs for the article at {{ article_url }}

+

Diffs for the article at {{ article_url|truncate(50) }}

+
    {% for diff in diffs %} diff --git a/view/templates/index.html b/view/templates/index.html index 029bd9e..1534c08 100644 --- a/view/templates/index.html +++ b/view/templates/index.html @@ -35,7 +35,7 @@ Display current article - + Show change history -- 2.45.2 From 0cee048b7c72f1ca33223c6c034e51af8543f72b Mon Sep 17 00:00:00 2001 From: mdivecky Date: Thu, 17 Aug 2023 11:19:27 +0200 Subject: [PATCH 14/15] Add contributors to About page --- view/templates/about.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/view/templates/about.html b/view/templates/about.html index 4859a28..f8464dc 100644 --- a/view/templates/about.html +++ b/view/templates/about.html @@ -3,7 +3,6 @@ {% block body %}
    -

    Headliner

    Headliner is monitoring rss feeds of czech news websites for changes in article headlines. Just because it might be interesting. @@ -12,12 +11,13 @@ See the source code, but be aware that it's not too nice. Feel free to improve it.

    +

    If you want to access the raw data collected by this tool, you can - download the full archive from our git + download the full archive from our git repo.

    +
    +

    Ondřej and Bain made important contribution to the project. Thank you!

    {% endblock body %} -- 2.45.2 From be5800093c284eb8ab86e39a3525cf9fb9a29177 Mon Sep 17 00:00:00 2001 From: mdivecky Date: Thu, 17 Aug 2023 11:19:38 +0200 Subject: [PATCH 15/15] Fix header to link to feeds --- view/templates/parts/header.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/view/templates/parts/header.html b/view/templates/parts/header.html index d35ecad..9cb7cbe 100644 --- a/view/templates/parts/header.html +++ b/view/templates/parts/header.html @@ -7,7 +7,7 @@
-- 2.45.2