~brettgilio/org-webring

Rename CSS classes to avoid collisions. v1 APPLIED

Alexandru-Sergiu Marton: 2
 Rename CSS classes to avoid collisions.
 Rename CSS classes to avoid collisions.

 4 files changed, 55 insertions(+), 52 deletions(-)
Export patchset (mbox)
How do I use this?

Copy & paste the following snippet into your terminal to import this patchset into git:

curl -s https://lists.sr.ht/~brettgilio/org-webring/patches/12020/mbox | git am -3
Learn more about email & git
View this thread in the archives

[PATCH] Rename CSS classes to avoid collisions. Export this patch

* org-webring.css, org-webring.el: Rename CSS classes.
---
This patch renames the CSS classes to ensure we don't break other
people's styles when they include our stylesheet.

I could use at least one more pair of eyes on this to be sure I didn't
mess something up, and one more reason I'm sending this as a patch is
that naming is a complicated and subjective problem and some feedback
would be well received before applying those changes.

 org-webring.css | 18 +++++++++---------
 org-webring.el  | 31 ++++++++++++++++---------------
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/org-webring.css b/org-webring.css
index 19d771a..2dc36f5 100644
--- a/org-webring.css
+++ b/org-webring.css
@@ -1,10 +1,10 @@
.feed .articles {
.org-webring .org-webring-articles {
    display: flex;
}
.feed .title {
.org-webring .org-webring-article-title {
    margin: 0;
}
.feed .article {
.org-webring .org-webring-article {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
@@ -13,32 +13,32 @@
    border: 0.1rem black solid;
    border-color: black;
}
.feed .summary {
.org-webring .org-webring-article-summary {
    font-size: 0.8rem;
    flex: 1 1 0;
}
.feed .attribution {
.org-webring .org-webring-attribution {
    text-align: right;
    font-size: 0.8rem;
    padding-right: 0.5rem;
    color: #555;
}
.feed .date {
.org-webring .org-webring-article-date {
    text-align: right;
    color: black;
}
.feed .source {
.org-webring .org-webring-article-source {
    text-align: right;
    color: black;
}
@media screen and (max-width: 600px) {
    .feed .articles {
    .org-webring .org-webring-articles {
	display: flex;
	flex-direction: column;
    }
}
@media screen and (max-width: 600px) {
    .feed .article {
    .org-webring .org-webring-article {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
diff --git a/org-webring.el b/org-webring.el
index 2bfd2b7..6d4113f 100644
--- a/org-webring.el
+++ b/org-webring.el
@@ -169,22 +169,23 @@ end. Taken from the s.el library."
	 (with-temp-buffer (insert (org-webring--feed-text-prop item 'description))
			   (apply #'concat (dom-strings (libxml-parse-html-region (point-min)
										  (point-max)))))))
    `(div :class "article"
	  (h4 :class "title"
    `(div :class "org-webring-article"
	  (h4 :class "org-webring-article-title"
	      (a :href
		 ,(org-webring--feed-text-prop item 'link)
		 ,(org-webring--feed-text-prop item 'title)))
	  (p :class "summary" ,(org-webring--string-truncate
				org-webring-description-max-length
				desc-sanitized
				"…"))
	  (small :class "source"
	  (p :class "org-webring-article-summary"
	     ,(org-webring--string-truncate
	       org-webring-description-max-length
	       desc-sanitized
	       "…"))
	  (small :class "org-webring-article-source"
		 (a :href
		    ,(org-webring--feed-text-prop item 'sourceLink)
		    ,(org-webring--feed-text-prop item 'sourceTitle)))
	  (small :class "date"
		 (span :class "timestamp-wrapper"
		       (span :class "timestamp"
	  (small :class "org-webring-article-date"
		 (span :class "org-webring-timestamp-wrapper"
		       (span :class "org-webring-timestamp"
			     ,(format-time-string org-webring-timestamp-format
						  (org-webring--pub-time item))))))))

@@ -195,12 +196,12 @@ end. Taken from the s.el library."
         (most-recent (last sorted-items org-webring-items-total))
         (articles (mapcar #'org-webring--article-instance most-recent)))
    (xmlgen
     `(section :class "feed"
     `(section :class "org-webring"
	       (h4 ,(print org-webring-header))
	       (section :class "articles" ,@articles)
	       (p :class "attribution"
		  (span :class "timestamp-wrapper"
			(span :class "timestamp"
	       (section :class "org-webring-articles" ,@articles)
	       (p :class "org-webring-attribution"
		  (span :class "org-webring-timestamp-wrapper"
			(span :class "org-webring-timestamp"
			      ,(format-time-string
				(cdr org-time-stamp-formats))))
		  (br)
-- 
2.28.0

[PATCH v2] Rename CSS classes to avoid collisions. Export this patch

* org-webring.css, org-webring.el: Rename CSS classes.
* org-webring.el: Remove elements with class timestamp-wrapper.
---
This patch version removes timestamp-wrapper elements and includes a
style rule for org-webring-timestamp.

 org-webring.css | 21 ++++++++++++---------
 org-webring.el  | 37 ++++++++++++++++++-------------------
 2 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/org-webring.css b/org-webring.css
index 19d771a..17062ef 100644
--- a/org-webring.css
+++ b/org-webring.css
@@ -1,10 +1,10 @@
.feed .articles {
.org-webring .org-webring-articles {
    display: flex;
}
.feed .title {
.org-webring .org-webring-article-title {
    margin: 0;
}
.feed .article {
.org-webring .org-webring-article {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
@@ -13,32 +13,35 @@
    border: 0.1rem black solid;
    border-color: black;
}
.feed .summary {
.org-webring .org-webring-article-summary {
    font-size: 0.8rem;
    flex: 1 1 0;
}
.feed .attribution {
.org-webring .org-webring-attribution {
    text-align: right;
    font-size: 0.8rem;
    padding-right: 0.5rem;
    color: #555;
}
.feed .date {
.org-webring .org-webring-article-date {
    text-align: right;
    color: black;
}
.feed .source {
.org-webring .org-webring-article-source {
    text-align: right;
    color: black;
}
.org-webring .org-webring-timestamp {
    color: #bebebe;
}
@media screen and (max-width: 600px) {
    .feed .articles {
    .org-webring .org-webring-articles {
	display: flex;
	flex-direction: column;
    }
}
@media screen and (max-width: 600px) {
    .feed .article {
    .org-webring .org-webring-article {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
diff --git a/org-webring.el b/org-webring.el
index 2bfd2b7..394cd49 100644
--- a/org-webring.el
+++ b/org-webring.el
@@ -169,24 +169,24 @@ end. Taken from the s.el library."
	 (with-temp-buffer (insert (org-webring--feed-text-prop item 'description))
			   (apply #'concat (dom-strings (libxml-parse-html-region (point-min)
										  (point-max)))))))
    `(div :class "article"
	  (h4 :class "title"
    `(div :class "org-webring-article"
	  (h4 :class "org-webring-article-title"
	      (a :href
		 ,(org-webring--feed-text-prop item 'link)
		 ,(org-webring--feed-text-prop item 'title)))
	  (p :class "summary" ,(org-webring--string-truncate
				org-webring-description-max-length
				desc-sanitized
				"…"))
	  (small :class "source"
	  (p :class "org-webring-article-summary"
	     ,(org-webring--string-truncate
	       org-webring-description-max-length
	       desc-sanitized
	       "…"))
	  (small :class "org-webring-article-source"
		 (a :href
		    ,(org-webring--feed-text-prop item 'sourceLink)
		    ,(org-webring--feed-text-prop item 'sourceTitle)))
	  (small :class "date"
		 (span :class "timestamp-wrapper"
		       (span :class "timestamp"
			     ,(format-time-string org-webring-timestamp-format
						  (org-webring--pub-time item))))))))
	  (small :class "org-webring-article-date"
		 (span :class "org-webring-timestamp"
		       ,(format-time-string org-webring-timestamp-format
					    (org-webring--pub-time item)))))))

(defun org-webring-generate-webring ()
  "Generate the entire webring and return it as HTML."
@@ -195,14 +195,13 @@ end. Taken from the s.el library."
         (most-recent (last sorted-items org-webring-items-total))
         (articles (mapcar #'org-webring--article-instance most-recent)))
    (xmlgen
     `(section :class "feed"
     `(section :class "org-webring"
	       (h4 ,(print org-webring-header))
	       (section :class "articles" ,@articles)
	       (p :class "attribution"
		  (span :class "timestamp-wrapper"
			(span :class "timestamp"
			      ,(format-time-string
				(cdr org-time-stamp-formats))))
	       (section :class "org-webring-articles" ,@articles)
	       (p :class "org-webring-attribution"
		  (span :class "org-webring-timestamp"
			,(format-time-string
			  (cdr org-time-stamp-formats)))
		  (br)
		  "Generated with "
		  (a :href ,(cdr org-webring-attribution) ,(car org-webring-attribution)))))))
-- 
2.28.0