search

scalacenter / scaladex

The Scala Package Index
https://index.scala-lang.org
BSD 3-Clause "New" or "Revised" License
198 stars 76 forks source link

Show meta tag for Open Graph Protocol #1271

Closed windymelt closed 11 months ago

windymelt commented 1 year ago

Hi, Can I contribute some aesthetical enhancement on head tag?

I love Scaladex, but when I embed Scaladex project page, only very few data appears. I'd like to enrich rendering.

Currently we have twitter card meta tag for Scaladex. However, twitter card meta tag is intended to be used in Twitter(X).

Fortunately, there is another open protocol for embedding site: The Open Graph protocol. Though initially it is developed for Facebook, many blog / CMS supports OGP for embedding protocol.

I added some meta tag respecting twitterCard. This Pull-Req enables rich rendering of embedded project.

I hope this pull request will help good experience for Scaladex.

windymelt commented 1 year ago

oops, we have to use meta property instead of meta name in OGP...

adpi2 commented 12 months ago

Thanks @windymet for your very much welcome contribution. I don't have time to review it now but I'll do it next week.

Do you have a screenshot of the final result?

windymelt commented 12 months ago

Hi, thanks for your response!

http://localhost:8080/lampepfl/dotty 's DOM looks like:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>dotty</title>
   <!-- snip -->

      <meta name="twitter:card" content="summary">
      <meta name="twitter:site" content="@scala_lang">
      <meta name="twitter:title" content="dotty">
      <meta name="twitter:description" content="The Scala 3 compiler, also known as Dotty.">
      <meta name="twitter:image" content="https://avatars.githubusercontent.com/u/2684793?v=4">    
      <meta property="og:title" content="Scaladex - lampepfl / dotty">
      <meta property="og:url" content="https://index.scala-lang.org/lampepfl/dotty">
      <meta property="og:type" content="article">
      <meta property="og:description" content="The Scala 3 compiler, also known as Dotty.">
      <meta property="og:site_name" content="Scaladex">
      <meta property="og:image" content="https://avatars.githubusercontent.com/u/2684793?v=4">
  </head>

og:***is inserted into head tag.

Then embedded rendering becomes:

from

image

to

image

I tested embedding using Ngrok. Though I embedded into Hatena Blog, one of famous blog service in Japan that recognize OGP, other blog service will render the page well.

I think making attribute string from string interpolation is little bit unsafe; but Twirl will do its sanitize, and name of organization and repository should be safe string.