Post Type Indicator

by studio_eossa

HTML

<div class="page-container">
  <main>
    <section class="content">
      <!-- id="post-{PostID}" class="{posttype}-post posts" -->
      <article id="post-3468908" class="text-post posts">
        <div class="post-header">
          <!-- icon-{PostType} -->
          <div class="icon icon-text"></div>
        </div>
        
        <div class="post-content">
          <div class="caption">
            <div class="reblog-content">
              <!-- Here then comes the actual post specific stuff, 
for images it's usually .npf_row and further, for links it's .npf-link-block,
etc. -->
              <div class="npf-photos">
              
              </div>
            </div>
          </div>
        </div>
      </article>
    </section>
  </main>
</div>

<!-- ICONS: phosphor -->
<script src="https://unpkg.com/@phosphor-icons/web"></script>

<!-- Here, the script works, but not in my theme. -->

CSS

.icon {
  font-family: "Phosphor" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size: calc(1em + 2px);
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon.icon-text::before {
  content: var(--icon-before-content, "\e48a");
}

JavaScript

// Select all post-header elements within the posts
const posts = document.querySelectorAll('.post-header');

posts.forEach(postHeader => {
  // Find the corresponding post-content for this post-header
  const postContent = postHeader.nextElementSibling; // Select the next sibling (post-content)
  
  // Check if postContent exists and if its first child is the caption element
  if (postContent && postContent.classList.contains('post-content')) {
    const caption = postContent.firstElementChild;
    
    // Check if the caption contains the reblog-content class
    if (caption && caption.classList.contains('caption')) {
      const reblogContent = caption.querySelector('.reblog-content');
      
      // Check if reblog-content exists and contains the npf-photo class
      if (reblogContent) {
        const npfPhoto = reblogContent.querySelector('.npf-photos');
        if (npfPhoto) {
          // Change the content of the icon-text::before pseudo-element to a Unicode character
          const icon = postHeader.querySelector('.icon.icon-text');
          if (icon) {
            // Set the Unicode character (e.g., \e2ca) using the CSS variable
            icon.style.setProperty('--icon-before-content', '"\\e2ca"');
          }
        }
      }
    }
  }
});