Site Customization - Reddit Posts and Comments

[river]

Finally got Reddit working in PNL Reader. Shadow DOM, nested comments, hidden images, seems Reddit really doesn't want you to read it peacefully.

Here's my config if you want to try (or improve it!)
I know it's far from perfect , and this is likely gonna change a lot in the future, so keep yourself updated

Reddit Posts and Comments

URL Match: https://www.reddit.com/r/\w+/comments/\w+/.*

Configuration

{
  "article": {
    "byline": "shreddit-post a[href*='/user/']",
    "content": [
      "shreddit-post [slot=\"text-body\"]",
      "shreddit-post [slot=\"post-media-container\"] img#post-image",
      "shreddit-post gallery-carousel img.media-lightbox-img",
      "shreddit-comment-tree > shreddit-comment"
    ],
    "excludes": [
      "shreddit-post-overflow-menu",
      "faceplate-dropdown-menu",
      "award-button",
      "shreddit-post-share-button",
      "shreddit-async-loader",
      "shreddit-comment-action-row"
    ],
    "publishedTime": "shreddit-post faceplate-timeago time",
    "title": "shreddit-post [slot=\"title\"]"
  },
  "name": "Reddit Posts and Comments",
  "urlMatch": "https://www.reddit.com/r/\\w+/comments/\\w+/.*"
}

Custom CSS

/* Variables - use full selector so it's skipped by auto-prefix */
#PNLReaderArticle {
  --reddit-author: var(--pico-primary);
  --reddit-meta: var(--pico-muted-color);
}

/* Post images */
img {
  max-width: 100%;
  border-radius: 8px;
  margin: 1em 0;
  height: auto !important;
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  object-fit: contain !important;
}

/* Main post image */
img#post-image,
img.media-lightbox-img {
  display: block;
  max-width: 100%;
  width: auto;
  max-height: 80vh;
  margin: 1.5em auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

a {
  word-break: break-word;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* First div separator - use full selector */
#PNLReaderArticle > div:first-child {
  padding-bottom: 1.5em;
  margin-bottom: 2em;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

/* Comments styling */
shreddit-comment {
  display: block;
  padding: 0.5em 0 0.5em 1em;
  border-left: 1px dashed var(--pico-muted-border-color);
  margin: 0.5em 0;
  border-radius: 0;
  transition: border-color 0.2s;
}

shreddit-comment:hover {
  border-left-color: var(--pico-secondary);
}

shreddit-comment[depth="0"] {
  border-left-width: 1px;
  border-left-style: dashed;
  border-left-color: var(--pico-secondary);
  margin-top: 1em;
  padding-top: 0.75em;
}

shreddit-comment[depth="1"] {
  margin-left: 0.5em;
}

shreddit-comment[depth="2"] {
  margin-left: 1em;
  opacity: 0.95;
}

shreddit-comment[depth="3"] {
  margin-left: 1.5em;
  opacity: 0.9;
}

/* Override comment content line height */
shreddit-comment p,
.tts-speaker-icon {
  line-height: var(--pnl-reader-line-height) !important;
}

/* Author links */
a[href*="/user/"] {
  color: var(--reddit-author);
  font-weight: 600;
  text-decoration: none;
}

a[href*="/user/"]:hover {
  text-decoration: underline;
}

/* Timestamps */
time,
faceplate-timeago {
  font-size: 0.85em;
  color: var(--reddit-meta);
  margin-left: 0.5em;
}

shreddit-comment blockquote {
  border-left: 2px solid var(--pico-muted-border-color);
  padding-left: 1em;
  color: var(--reddit-meta);
  font-style: italic;
}

/* Avatars - Reddit uses SVG <image> not <img> */
[slot="commentAvatar"] {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

[slot="commentAvatar"] rpl-hovercard,
[slot="commentAvatar"] faceplate-tracker {
  display: inline-flex;
  align-items: center;
}

/* Hide decorative avatar frames/badges (keep only svg with actual image) */
[slot="commentAvatar"] svg:not(:has(image)) {
  display: none !important;
}

[slot="commentAvatar"] svg:has(image) {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  overflow: hidden;
}

[slot="commentAvatar"] [rpl][avatar] {
  width: 32px !important;
  height: 32px !important;
}

[slot="commentAvatar"] .fp-avatar-container,
[slot="commentAvatar"] .snoovatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

/* Hide hover card content */
[slot="commentAvatar"] [slot="content"] {
  display: none !important;
}

img[alt*="avatar"],
faceplate-img {
  width: 32px !important;
  border-radius: 50% !important;
  margin: 0 0.5em 0 0 !important;
  vertical-align: middle;
  display: inline-block;
}

/* Hide unwanted elements */
shreddit-comment-action-row,
[slot="actionRow"],
[slot="awardsRow"],
[slot="commentActionRow"],
faceplate-dropdown-menu,
shreddit-overflow-menu,
[slot="post-media-container"] video,
[slot="next-reply"] {
  display: none !important;
}

/* "More replies" button - style as link */
button:has(faceplate-tracker) {
  all: unset !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0.5em 0 !important;
  cursor: pointer;
  color: var(--pico-muted-color);
  font-size: 0.85em !important;
  font-weight: normal !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.25em;
  width: auto !important;
  height: auto !important;
  line-height: 1.4 !important;
}

button:has(faceplate-tracker):hover {
  text-decoration: underline;
  color: var(--pico-primary);
  background: none !important;
}

button:has(faceplate-tracker) svg {
  margin-right: 5px !important;
}

button:has(faceplate-tracker) span {
  font-size: inherit !important;
}

/* Clean up comment internal structure */
details {
  display: block;
}

details > summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
  list-style: none;
  cursor: default;
}

details > summary > div {
  display: inline-flex;
  align-items: center;
}

details > summary::-webkit-details-marker {
  display: none;
}

/* Comment meta (author + timestamp) */
[slot="commentMeta"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
}

/* Hide thread lines and collapse buttons */
[data-testid="main-thread-line"],
button[aria-label="Toggle Comment Thread"],
button[aria-controls="comment-children"],
details[role="article"][open] {
  display: none !important;
}

/* Reset grid layout to simple block */
details > div {
  display: block !important;
}

.contents {
  display: contents;
}

/* Hide empty structural divs */
div[aria-hidden="true"] {
  display: none !important;
}

/* Extracted top-level comments (from shadow DOM) */
[slot="comment"],
div[id$="-comment-rtjson-content"] {
  display: block;
  padding: 0.5em 0;
  border-left: 1px dashed var(--pico-secondary);
  padding-left: 1em;
}