@@ -13,33 +13,73 @@ const getWindowContent = () => {
1313 const themeColorMeta = document . querySelector ( "meta[name='theme-color']" ) ;
1414 const themeColor = themeColorMeta ?. getAttribute ( "content" ) ;
1515
16- const getTagTuple = ( tag : Element , attributeName : string = "property" ) =>
17- [ tag . getAttribute ( attributeName ) , tag . getAttribute ( "content" ) ] as [
18- string ,
19- string ,
20- ] ;
16+ const getTagTuple = ( tag , attributeName = "property" ) => [
17+ tag . getAttribute ( attributeName ) ?? "" ,
18+ tag . getAttribute ( "content" ) ?? "" ,
19+ ] ;
2120
22- const ogMetaTags = Array . from (
21+ const ogMetaTags : string [ ] [ ] = Array . from (
2322 document . querySelectorAll ( "meta[property^='og:']" ) ,
24- ) . map ( ( tag ) => getTagTuple ( tag , "property" ) ) ;
23+ )
24+ . map ( ( tag ) => getTagTuple ( tag , "property" ) )
25+ . map ( ( [ a , b ] ) => [ a ?? "" , b ?? "" ] ) ;
2526
26- const twitterMetaTags = Array . from (
27+ const twitterMetaTags : string [ ] [ ] = Array . from (
2728 document . querySelectorAll ( "meta[name^='twitter:']" ) ,
28- ) . map ( ( tag ) => getTagTuple ( tag , "name" ) ) ;
29-
30- const getSingleTagHtml = ( [ property , content ] : [
31- string ,
32- string | undefined | null ,
33- ] ) => {
29+ )
30+ . map ( ( tag ) => getTagTuple ( tag , "name" ) )
31+ . map ( ( [ a , b ] ) => [ a ?? "" , b ?? "" ] ) ;
32+
33+ const alternateLinks : string [ ] [ ] = Array . from (
34+ document . querySelectorAll ( "link[rel='alternate'][hreflang]" ) ,
35+ )
36+ . map ( ( tag ) => [
37+ tag . getAttribute ( "hreflang" ) ?? "" ,
38+ tag . getAttribute ( "href" ) ?? "" ,
39+ ] )
40+ . map ( ( [ a , b ] ) => [ a ?? "" , b ?? "" ] ) ;
41+
42+ const iconLinks : string [ ] [ ] = Array . from (
43+ document . querySelectorAll ( "link[rel='icon'], link[rel='apple-touch-icon']" ) ,
44+ )
45+ . map ( ( tag ) => [
46+ tag . getAttribute ( "rel" ) ?? "" ,
47+ tag . getAttribute ( "href" ) ?? "" ,
48+ tag . getAttribute ( "sizes" ) ?? "" ,
49+ tag . getAttribute ( "type" ) ?? "" ,
50+ ] )
51+ . map ( ( [ rel , href , sizes , type ] ) => [
52+ rel === "apple-touch-icon" ? "Apple Touch Icon" : "Favicon" ,
53+ href ?? "" ,
54+ sizes ? `${ sizes } ` : "" ,
55+ type ?? "" ,
56+ ] )
57+ . map ( ( [ label , href , sizes , type ] ) => [
58+ sizes ? `${ label } (${ sizes } )` : label ,
59+ href ,
60+ ] ) ;
61+
62+ const getSingleTagHtml = ( [ property , content ] : [ string , string ] ) => {
3463 let contentTag : HTMLElement | Text ;
3564
3665 if ( ! content ) {
3766 content = "N/A" ;
3867 }
3968
40- if ( [ "og:image" , "twitter:image" ] . includes ( property ) ) {
69+ if (
70+ [ "og:image" , "twitter:image" ] . includes ( property ) ||
71+ property . includes ( "Favicon" ) ||
72+ property . includes ( "Apple Touch Icon" )
73+ ) {
4174 contentTag = document . createElement ( "img" ) ;
4275 contentTag . setAttribute ( "src" , content ) ;
76+ if (
77+ property . includes ( "Favicon" ) ||
78+ property . includes ( "Apple Touch Icon" )
79+ ) {
80+ contentTag . style . maxWidth = "32px" ;
81+ contentTag . style . height = "auto" ;
82+ }
4383 } else if ( property === "Theme color" && content !== "N/A" ) {
4484 contentTag = document . createElement ( "div" ) ;
4585 contentTag . style . width = "100px" ;
@@ -64,13 +104,13 @@ const getWindowContent = () => {
64104
65105 const getTagsHtml = (
66106 title : string ,
67- tags : [ string , string | undefined | null ] [ ] ,
107+ tags : string [ ] [ ] ,
68108 wrapWithDetails = true ,
69109 ) => {
70110 const dl = document . createElement ( "dl" ) ;
71111
72- for ( const tag of tags ) {
73- dl . append ( getSingleTagHtml ( tag ) ) ;
112+ for ( const [ property , content ] of tags ) {
113+ dl . append ( getSingleTagHtml ( [ property , content ] ) ) ;
74114 }
75115
76116 if ( ! wrapWithDetails ) {
@@ -90,17 +130,22 @@ const getWindowContent = () => {
90130 const standardTags = [
91131 [ "Page title" , pageTitle ] ,
92132 [ "Canonical URL" , canonicalUrl ] ,
93- [ "Meta title" , metaTitle ] ,
94133 [ "Meta description" , metaDescription ] ,
95134 [ "Theme color" , themeColor ] ,
96- ] as [ string , string | undefined | null ] [ ] ;
135+ ] . map ( ( [ k , v ] ) => [ k ?? "" , v ?? "" ] ) ;
97136
98- let standardTagsHtml = getTagsHtml ( "Standard" , standardTags , false ) ;
137+ const standardTagsHtml = getTagsHtml ( "Standard" , standardTags , false ) ;
99138
100- let ogTagsHtml =
139+ const ogTagsHtml =
101140 ogMetaTags . length > 0 ? getTagsHtml ( "Open Graph" , ogMetaTags ) : "" ;
102- let twitterTagsHtml =
141+ const twitterTagsHtml =
103142 twitterMetaTags . length > 0 ? getTagsHtml ( "Twitter" , twitterMetaTags ) : "" ;
143+ const alternateTagsHtml =
144+ alternateLinks . length > 0
145+ ? getTagsHtml ( "Alternate Languages" , alternateLinks )
146+ : "" ;
147+ const iconTagsHtml =
148+ iconLinks . length > 0 ? getTagsHtml ( "Icons" , iconLinks ) : "" ;
104149
105150 return /* html */ `
106151<style>
@@ -160,8 +205,10 @@ const getWindowContent = () => {
160205</style>
161206
162207${ standardTagsHtml }
208+ ${ iconTagsHtml }
163209${ ogTagsHtml }
164210${ twitterTagsHtml }
211+ ${ alternateTagsHtml }
165212
166213<hr />
167214
0 commit comments