blog/ogimage.html at d1cef7ddd6c8b1bfee089e207393b183fb5fcac2 · tai2/blog · 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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>OG Image Generator</title>
        <link href="https://fonts.googleapis.com/css?family=Spicy+Rice" rel="stylesheet">
        <style>
            html {
                color: #333;
                background: #FFF8DC;
            }

            body {
                margin: 0;
                padding: 35px 35px 0;
            }

            h1 {
                font-weight: bold;
                font-family: '游ゴシック体', sans-serif;
                line-height: 1.4;
                margin: 0;
            }

            address {
                background: rgba(0,0,0,0.9);
                font-weight: bold;                                                                                                                           font-family: 'Spicy Rice', cursive;
                font-style: normal;
                font-size: 13vh;
                text-align: right;
                line-height: 18vh;
                padding: 10px;
                position: absolute;
                bottom: 15px;
                right: 15px;
            }

            .icon {
                height: 18vh;
                vertical-align: middle;
            }

            .sitename {
                color: white;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <h1 id="title"></h1>
        <address>
            <img class="icon" src="content/images/myicon_nomi.jpg">
            <span class="sitename">blog.tai2.net</span>
        </address>
        <script>
            document.addEventListener('DOMContentLoaded', async () => {
                const injectedProps = await getInjectedProps()
                const title = document.getElementById('title')
                title.innerHTML = injectedProps.title

                let fontSize = 100 // px dimension
                for (;;) {
                    title.style.fontSize = fontSize + 'px'
                    if (document.body.clientHeight <= window.innerHeight) {
                        break
                    }
                    fontSize -= 1
                }
            })
        </script>
    </body>
</html>