Show HN: Favicons for HN

Post by kzrdude » Wed, Apr 20, 2022, 2:06 PM UTC

blue_pants wrote: post #46

mkdirp wrote: post #33

As an aside, there's Refined Hacker News[0] which seems like it would be a great option for this to be built into. It has lots of great features while keeping things minimal. [0] https://github.com/plibither8/refined-hacker-news

Thanks for extensions. But I think there's no need to integrate its functionality to the site. This way one can choose how to customize the site without increasing complexity of the site itself.

Post by JayGuerette » Wed, Apr 20, 2022, 2:18 PM UTC

    // ==UserScript==
    // @name     hacker news favicons
    // @match  https://news.ycombinator.com/*
    // ==/UserScript==
    for (let link of document.querySelectorAll('.titlelink')) {
      if (link.attributes["hasIcon"] != 'true') {
        const domain = new URL(link.href).hostname
        const imageUrl = `https://icons.duckduckgo.com/ip3/${domain}.ico`
        const image = document.createElement('img')
        link.attributes["hasIcon"] = 'true'
        image.src = imageUrl
        image.width = 16
        image.height = 16
        image.style.paddingRight = '0.50em'
        image.style.paddingLeft = '0.50em'
        image.style.verticalAlign = 'middle';
        image.style.filter = 'grayscale(1)';
        link.prepend(image)
      }
    }

Post by kappuchino » Wed, Apr 20, 2022, 2:30 PM UTC

JayGuerette wrote: post #54

My version, better alignment, grayscaled icons, eliminates duplicates on navigation: // ==UserScript== // @name hacker news favicons // @match https://news.ycombinator.com/* // ==/UserScript== for (let link of document.querySelectorAll('.titlelink')) { if (link.attributes["hasIcon"] != 'true') { const domain = new URL(link.href).hostname const imageUrl = `https://icons.duckduckgo.com/ip3/${domain}.ico` const image =…

Post by JayGuerette » Wed, Apr 20, 2022, 2:35 PM UTC

kappuchino wrote: post #56

JayGuerette wrote: post #54

My version, better alignment, grayscaled icons, eliminates duplicates on navigation: // ==UserScript== // @name hacker news favicons // @match https://news.ycombinator.com/* // ==/UserScript== for (let link of document.querySelectorAll('.titlelink')) { if (link.attributes["hasIcon"] != 'true') { const domain = new URL(link.href).hostname const imageUrl = `https://icons.duckduckgo.com/ip3/${domain}.ico` const image =…

Afaik @include is depricated (at least I get a warning in FF), switch to // @match which is also safer. Details: https://wiki.greasespot.net/Metadata_Block / https://www.tampermonkey.net/changelog.php?ext=dhdg&show=dhd... (Since 4.4)

Post by dgut » Wed, Apr 20, 2022, 2:53 PM UTC

ziml77 wrote: post #28

Is anyone who's good with CSS able to modify this to align the icon and text better? The current alignment where the baseline of the text is in line with the bottom of the favicon feels off.

  image.width = 12
  image.height = 12
  image.style.marginRight = '0.25em'
  //image.style.paddingRight = '0.25em'
  //image.style.paddingLeft = '0.25em'

  document.querySelectorAll('.athing > td:nth-child(3), .titlelink').forEach(e => { 
    e.style.display = 'flex',
    e.style.alignItems = 'center',
    e.style.marginRight = '0.25em'
  })