Add image cover

This commit is contained in:
Andros Fenollosa 2021-07-31 01:22:18 +02:00
parent 630d1614b1
commit 4a6654c22d
9 changed files with 162 additions and 139 deletions

View File

@ -13,6 +13,8 @@
[cheshire "5.9.0"]
;; Date
[clj-time "0.15.2"]
;; HTTP client
[clj-http "3.12.3"]
;; Utils dirs
[me.raynes/fs "1.4.6"]
;; Parse RSS/Atom feeds

View File

@ -24,8 +24,8 @@
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="static/css/normalize.css">
<link rel="stylesheet" href="static/css/main.css">
<link rel="stylesheet" href="static/css/desktop.css" media="all and (max-width: 600px)">
<link rel="stylesheet" href="static/css/mobile.css" media="all and (min-width: 601px)">
<link href="static/css/mobile.css" rel="stylesheet" media="all and (max-width: 600px)">
<link href="static/css/desktop.css" rel="stylesheet" media="all and (min-width: 601px)">
<!-- End CSS -->
</head>
<body>

Binary file not shown.

View File

@ -0,0 +1,135 @@
/* Desktop */
.main {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(12, 1fr);
}
/* First column. */
.feed__article:nth-child(3n-2){
grid-column: 9 / 13;
}
/* Second column */
.feed__article:nth-child(3n+2){
grid-column: 1 / 5;
}
/* Third column */
.feed__article:nth-child(3n+3) {
grid-column: 5 / 9;
}
.article__title {
font-size: 1.5rem;
}
.article__feed {
font-size: 1rem;
}
.article__date {
font-size: .9rem;
color: var(--color-gray);
}
.feed__article:nth-child(1) .article__title {
font-size: 2rem;
}
.feed__article:nth-child(1) .article__feed {
font-size: 1rem;
}
.feed__article:nth-child(1) {
grid-column: 1 / 9;
grid-row: 1 / 4;
text-align: center;
}
.feed__article:nth-child(2) {
grid-column: 9 / 13;
grid-row: 1 / 2;
}
.feed__article:nth-child(3) {
grid-column: 9 / 13;
grid-row: 2 / 3;
}
.feed__article:nth-child(4) {
grid-column: 9 / 13;
grid-row: 3 / 4;
}
.feed__article:nth-child(2) .article__header,
.feed__article:nth-child(3) .article__header,
.feed__article:nth-child(4) .article__header
{
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
grid-gap: 1rem;
}
.article__header > p {
margin: 0;
}
.article__header-img > img {
height: var(--height-img);
}
.feed__article:nth-child(1) .article__header-img > img,
.feed__article:nth-child(2) .article__header-img > img,
.feed__article:nth-child(3) .article__header-img > img,
.feed__article:nth-child(4) .article__header-img > img
{
height: initial;
}
.feed__article:nth-child(2) .article__titles,
.feed__article:nth-child(3) .article__titles,
.feed__article:nth-child(4) .article__titles,
.feed__article:nth-child(2) .article__header-img,
.feed__article:nth-child(3) .article__header-img,
.feed__article:nth-child(4) .article__header-img
{
width: 50%;
}
.feed__article:nth-child(2) .article__title,
.feed__article:nth-child(3) .article__title,
.feed__article:nth-child(4) .article__title
{
font-size: 1.2rem;
}
.feed__article:nth-child(2) .article__feed,
.feed__article:nth-child(3) .article__feed,
.feed__article:nth-child(4) .article__feed
{
font-size: 1rem;
}
.article__main {
position: fixed;
left: -100%;
top: 0;
bottom: 0;
overflow-y: auto;
}
.feed__article:nth-child(1) .article__header {
display: flex;
flex-direction: column;
height: 100%;
}
.feed__article:nth-child(1) .article__header-img {
height: 100%;
}
.feed__article:first-child img {
height: 100%;
}

View File

@ -7,7 +7,7 @@
@font-face {
font-family: Newsreader;
src: url("static/fonts/Newsreader-VariableFont_opsz,wght.woff2");
src: url("../fonts/Newsreader-VariableFont_opsz,wght.woff2");
}
body {
@ -15,6 +15,8 @@ body {
padding: 0;
font-family: Newsreader, serif;
color: var(--color-black);
background-image: url("../img/background.jpg");
background-size: 100%;
}
img {
object-fit: cover;

View File

@ -1,131 +1,7 @@
/* Desktop */
.main {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(12, 1fr);
.title {
font-size: 3rem
}
/* First column. */
.feed__article:nth-child(3n-2){
grid-column: 9 / 13;
}
/* Second column */
.feed__article:nth-child(3n+2){
grid-column: 1 / 5;
}
/* Third column */
.feed__article:nth-child(3n+3) {
grid-column: 5 / 9;
}
.article__title {
font-size: 1.5rem;
}
.article__feed {
.subtitle {
font-size: 1rem;
}
.article__date {
font-size: .9rem;
color: var(--color-gray);
}
.feed__article:nth-child(1) .article__title {
font-size: 2rem;
}
.feed__article:nth-child(1) .article__feed {
font-size: 1rem;
}
.feed__article:nth-child(1) {
grid-column: 1 / 9;
grid-row: 1 / 4;
text-align: center;
}
.feed__article:nth-child(2) {
grid-column: 9 / 13;
grid-row: 1 / 2;
}
.feed__article:nth-child(3) {
grid-column: 9 / 13;
grid-row: 2 / 3;
}
.feed__article:nth-child(4) {
grid-column: 9 / 13;
grid-row: 3 / 4;
}
.feed__article:nth-child(2) .article__header,
.feed__article:nth-child(3) .article__header,
.feed__article:nth-child(4) .article__header
{
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
grid-gap: 1rem;
}
.article__header > p {
margin: 0;
}
.article__header-img > img {
height: var(--height-img);
}
.feed__article:nth-child(1) .article__header-img > img,
.feed__article:nth-child(2) .article__header-img > img,
.feed__article:nth-child(3) .article__header-img > img,
.feed__article:nth-child(4) .article__header-img > img
{
height: initial;
}
.feed__article:nth-child(2) .article__titles,
.feed__article:nth-child(3) .article__titles,
.feed__article:nth-child(4) .article__titles,
.feed__article:nth-child(2) .article__header-img,
.feed__article:nth-child(3) .article__header-img,
.feed__article:nth-child(4) .article__header-img
{
width: 50%;
}
.feed__article:nth-child(2) .article__title,
.feed__article:nth-child(3) .article__title,
.feed__article:nth-child(4) .article__title
{
font-size: 1.2rem;
}
.feed__article:nth-child(2) .article__feed,
.feed__article:nth-child(3) .article__feed,
.feed__article:nth-child(4) .article__feed
{
font-size: 1rem;
}
.article__main {
position: fixed;
left: -100%;
top: 0;
bottom: 0;
overflow-y: auto;
}
.feed__article:nth-child(1) .article__header {
display: flex;
flex-direction: column;
height: 100%;
}
.feed__article:nth-child(1) .article__header-img {
height: 100%;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 265 KiB

View File

@ -14,7 +14,7 @@
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="Leiningen: cheshire:5.9.0" level="project" />
<orderEntry type="library" name="Leiningen: clj-http:3.10.2" level="project" />
<orderEntry type="library" name="Leiningen: clj-http:3.12.3" level="project" />
<orderEntry type="library" name="Leiningen: clj-rss:0.2.7" level="project" />
<orderEntry type="library" name="Leiningen: clj-time:0.15.2" level="project" />
<orderEntry type="library" name="Leiningen: clj-tuple:0.2.2" level="project" />
@ -26,7 +26,7 @@
<orderEntry type="library" name="Leiningen: com.rometools/rome-utils:1.15.0" level="project" />
<orderEntry type="library" name="Leiningen: com.rometools/rome:1.15.0" level="project" />
<orderEntry type="library" name="Leiningen: commons-codec:1.11" level="project" />
<orderEntry type="library" name="Leiningen: commons-io:2.6" level="project" />
<orderEntry type="library" name="Leiningen: commons-io:2.8.0" level="project" />
<orderEntry type="library" name="Leiningen: commons-logging:1.2" level="project" />
<orderEntry type="library" name="Leiningen: hiccup:1.0.5" level="project" />
<orderEntry type="library" name="Leiningen: joda-time:2.10" level="project" />
@ -36,11 +36,11 @@
<orderEntry type="library" name="Leiningen: nrepl:0.6.0" level="project" />
<orderEntry type="library" name="Leiningen: org.apache.commons/commons-compress:1.8" level="project" />
<orderEntry type="library" name="Leiningen: org.apache.httpcomponents/httpasyncclient:4.1.4" level="project" />
<orderEntry type="library" name="Leiningen: org.apache.httpcomponents/httpclient-cache:4.5.10" level="project" />
<orderEntry type="library" name="Leiningen: org.apache.httpcomponents/httpclient:4.5.10" level="project" />
<orderEntry type="library" name="Leiningen: org.apache.httpcomponents/httpclient-cache:4.5.13" level="project" />
<orderEntry type="library" name="Leiningen: org.apache.httpcomponents/httpclient:4.5.13" level="project" />
<orderEntry type="library" name="Leiningen: org.apache.httpcomponents/httpcore-nio:4.4.10" level="project" />
<orderEntry type="library" name="Leiningen: org.apache.httpcomponents/httpcore:4.4.12" level="project" />
<orderEntry type="library" name="Leiningen: org.apache.httpcomponents/httpmime:4.5.10" level="project" />
<orderEntry type="library" name="Leiningen: org.apache.httpcomponents/httpcore:4.4.14" level="project" />
<orderEntry type="library" name="Leiningen: org.apache.httpcomponents/httpmime:4.5.13" level="project" />
<orderEntry type="library" name="Leiningen: org.clojure/clojure:1.10.3" level="project" />
<orderEntry type="library" name="Leiningen: org.clojure/core.specs.alpha:0.2.56" level="project" />
<orderEntry type="library" name="Leiningen: org.clojure/data.codec:0.1.0" level="project" />

View File

@ -1,6 +1,7 @@
(ns rsspaper.feeds
(:require
[rsspaper.config :refer [config]]
[clj-http.client :as client]
[clj-time.core :as t]
[clj-time.coerce :as c]
[clj-time.format :as f]
@ -20,7 +21,7 @@
(case (:edition config)
"daily" (filter (fn [article] (and (not (nil? (:published-date article))) (>= (:published-date article) daily))) articles)
"weekly" (filter (fn [article] (and (not (nil? (:published-date article))) (>= (:published-date article) weekly))) articles)
:else articles)))
articles)))
(defn add-datetimes-formatter
[articles]
@ -39,11 +40,18 @@
;; Add cover to article search first image in description
;; Iterate every blog
(map (fn [article]
(let [url-article (second (re-find #"<img[^>]+src=\"([^\">]+)\"" (str (get-in article [:description :value]))))]
(assoc article :cover (if (nil? url-article) (get-in article [:feed :image :url]) url-article)))) articles))
(let [url-article (get-in article [:feed :link])
html (:body (client/get url-article {:insecure? true}))
first-content (second (re-find #"<meta.*content=\"([^\">]+)\".*property=\"og:image(?::url)?\".*>" html))
second-content (second (re-find #"<meta.*property=\"og:image(?::url)?\".*content=\"([^\">]+)\".*>" html))
first-image (second (re-find #"<img[^>]+src=\"([^\">]+)\"" html))
images [first-content second-content first-image]
final-image (first (filter (fn [item] (not (nil? item))) images))]
(assoc article :cover final-image))) articles))
(defn order-published
[articles]
;; Order articles
(reverse (sort-by :published-date articles)))
(defn get-articles