promo-image-preview/index.html at master · sjwilliams/promo-image-preview · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<html>
	<head>
		<title>Chrome bookmarklet to preview social and search engines for the current URL</title>
		<style>
			body{
				margin: 0;
				padding: 0;
				font-family: arial, sans-serif;
				font-size: 16px;
			}

			p{
				font-size: 13px;
				font-weight: normal;
				line-height: 1.6;
				color: #333;
			}

			span{
				padding: 1px 3px;
				border-radius: 5px;
				font-size: 0.9em;
				color: #a7a7a7;
			}

			span strong{
				color: #000;
			}

			a{
				color: #333;
			}

			.container{
				margin: 10vh auto;
				padding: 0;
				max-width: 420px;
			}

			.bookmarklet-wrapper{
				text-align: center;
				margin-top: 48px;
				margin-bottom: 96px;
			}

			.bookmarklet-wrapper p{
				font-size: 16px;
			}

			.bookmarklet{
				display: table;
				text-decoration: none;
				margin: 1em auto;
				border-radius: 6px;
				padding: 20px;
				background-color: #333;
				color: #fff;
			}
		</style>
	</head>
	<body>


		<div class="container">

			<div class="bookmarklet-wrapper">
				<a class="bookmarklet" href="javascript:(function()%7B%22use%20strict%22%3Bfunction%20_toConsumableArray(e)%7Bif(Array.isArray(e))%7Bfor(var%20t%3D0%2Cr%3DArray(e.length)%3Bt%3Ce.length%3Bt%2B%2B)r%5Bt%5D%3De%5Bt%5D%3Breturn%20r%7Dreturn%20Array.from(e)%7Dvar%20body%3Ddocument.body%2CmessageEl%3Ddocument.createElement(%22div%22)%2Cmessage%3D%5B%5D%2CtextElMaker%3Dfunction(e%2Ct)%7Bt%3Dt%7C%7C%22p%22%3Bvar%20r%3Ddocument.createElement(t)%3Breturn%20r.innerHTML%3De%2Cr%7D%2CpMaker%3Dfunction(e)%7Bvar%20t%3DtextElMaker(e)%3Breturn%20t.style.fontSize%3D%220.88rem%22%2Ct%7D%2ChedMaker%3Dfunction(e)%7Bvar%20t%3DtextElMaker(e%2C%22h2%22)%3Breturn%20t.style.fontSize%3D%221.6rem%22%2Ct.style.margin%3D%222rem%200%201rem%200%22%2Ct%7D%2CimageMaker%3Dfunction(e)%7Bvar%20t%3Ddocument.createElement(%22img%22)%3Breturn%20t.src%3De%2Ct.style.display%3D%22block%22%2Ct.style.width%3D%22300px%22%2Ct.style.margin%3D%220.5rem%200%22%2Ct%7D%2CreduceFraction%3Dfunction(e%2Ct)%7Bvar%20r%3Dfunction%20e(t%2Cr)%7Breturn%20r%3Fe(r%2Ct%25r)%3At%7D%3Breturn%5Be%2F(r%3Dr(e%2Ct))%2Ct%2Fr%5D%7D%2CstructuredData%3D%5B%5D.concat(_toConsumableArray(document.querySelectorAll('script%5Btype%3D%22application%2Fld%2Bjson%22%5D'))).map(function(e)%7Breturn%20JSON.parse(e.text)%7D)%2Carticles%3DstructuredData.filter(function(e)%7Breturn%22NewsArticle%22%3D%3D%3De%5B%22%40type%22%5D%7D)%3Barticles.length%26%26articles%5B0%5D.image%26%26articles%5B0%5D.image.length%26%26(message.push(hedMaker(%22LD%2BJSON%2FGoogle%20Search%22))%2Carticles.forEach(function(e)%7Be.image.forEach(function(e)%7Bvar%20t%3De.url%2Cr%3De.width%2Ca%3De.height%3Bmessage.push(imageMaker(t))%3Bvar%20s%3DreduceFraction(r%2Ca)%3Bmessage.push(pMaker(r%2B%22px%20x%20%22%2Ba%2B%22px%20(%22%2Bs%5B0%5D%2B%22x%22%2Bs%5B1%5D%2B%22)%20image%22))%7D)%7D))%2C%5B%7Bname%3A%22Facebook%20Meta%22%2Cselector%3A'meta%5Bproperty%3D%22og%3Aimage%22%5D'%7D%2C%7Bname%3A%22Twitter%20Meta%22%2Cselector%3A'meta%5Bproperty%3D%22twitter%3Aimage%22%5D'%7D%5D.forEach(function(e)%7Bvar%20t%3Ddocument.querySelector(e.selector)%3Bif(t)%7Bvar%20r%3Dt.getAttribute(%22content%22)%3Bmessage.push(hedMaker(e.name))%2Cmessage.push(imageMaker(r))%7D%7D)%2Cmessage.forEach(function(e)%7BmessageEl.append(e)%7D)%2Cbody.appendChild(messageEl)%2CmessageEl.style.zIndex%3D2147483647%2CmessageEl.style.position%3D%22fixed%22%2CmessageEl.style.top%3D%220%22%2CmessageEl.style.right%3D%220%22%2CmessageEl.style.fontFamily%3D%22Arial%2C%20sans-serif%22%2CmessageEl.style.backgroundColor%3D%22%23f4ff60%22%2CmessageEl.style.color%3D%22%23000000%22%2CmessageEl.style.padding%3D%2220px%2020px%2020px%2020px%22%3B%7D)()">Get Social and Search images on a page</a>
				<p>Drag this to your bookmark bar.</p>
			</div>

			<p>Grab the code on <a href="https://github.com/sjwilliams/promo-image-preview">GitHub</a>.</p>
		</div>
	</body>
</html>