Skip to content

Commit 3a43358

Browse files
tai2tai2
committed
og:image生成。
1 parent 01864d4 commit 3a43358

39 files changed

+702
-0
lines changed

Diff for: ‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ cache/
77
pelican.pid
88
srv.pid
99
.pelican
10+
node_modules

Diff for: ‎content/images/og/a-field-guide-to-debugging.png

77.5 KB
Loading

Diff for: ‎content/images/og/abenomics-freelance.png

94.3 KB
Loading

Diff for: ‎content/images/og/about_apple_swift.png

71.2 KB
Loading

Diff for: ‎content/images/og/about_pythonjs.png

77 KB
Loading

Diff for: ‎content/images/og/android_mvp.png

78.7 KB
Loading

Diff for: ‎content/images/og/android_wear_design.png

55.4 KB
Loading

Diff for: ‎content/images/og/automatic_semicolon_insertion.png

76.5 KB
Loading

Diff for: ‎content/images/og/bower_macglashan_mvp.png

69.2 KB
Loading

Diff for: ‎content/images/og/clean_architecture.png

69.9 KB
Loading

Diff for: ‎content/images/og/crowdworks-sushi.png

102 KB
Loading

Diff for: ‎content/images/og/doctrine-best-practices.png

89.4 KB
Loading

Diff for: ‎content/images/og/doctrine-join-with-syntax.png

105 KB
Loading

Diff for: ‎content/images/og/email_validation.png

100 KB
Loading

Diff for: ‎content/images/og/freee-review.png

112 KB
Loading

Diff for: ‎content/images/og/fsa-error.png

102 KB
Loading

Diff for: ‎content/images/og/github_client_howto.png

82.4 KB
Loading

Diff for: ‎content/images/og/hexagonal_architecture.png

76.4 KB
Loading

Diff for: ‎content/images/og/ios_settings_app.png

95.4 KB
Loading

Diff for: ‎content/images/og/lgpl_and_appstore.png

58.8 KB
Loading

Diff for: ‎content/images/og/mpegla_and_ffmpeg.png

89.7 KB
Loading

Diff for: ‎content/images/og/mutt_and_notmuch.png

91.2 KB
Loading

Diff for: ‎content/images/og/nodejs-advent-calendar-2016.png

66.5 KB
Loading

Diff for: ‎content/images/og/nodeschool_tokyo.png

79.1 KB
Loading

Diff for: ‎content/images/og/pelican_impression.png

68.2 KB
Loading

Diff for: ‎content/images/og/potel_mvp.png

52.6 KB
Loading

Diff for: ‎content/images/og/react-redux-reload.png

92.7 KB
Loading

Diff for: ‎content/images/og/real-world-redux.png

84.7 KB
Loading

Diff for: ‎content/images/og/the_git_object_model.png

74.9 KB
Loading

Diff for: ‎content/images/og/wants_for_designers.png

82.3 KB
Loading

Diff for: ‎content/images/og/wants_for_directors.png

93.5 KB
Loading

Diff for: ‎content/images/og/webpacker3.png

107 KB
Loading

Diff for: ‎content/images/og/websocket_bulktransfer_ios.png

98.9 KB
Loading

Diff for: ‎content/images/og/xhr_bulktransfer_ios.png

92.3 KB
Loading

Diff for: ‎ogimage.html

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>OG Image Generator</title>
6+
<link href="https://fonts.googleapis.com/css?family=Spicy+Rice" rel="stylesheet">
7+
<style>
8+
html {
9+
color: #333;
10+
background: #FFF8DC;
11+
}
12+
13+
body {
14+
margin: 0;
15+
padding: 35px 35px 0;
16+
}
17+
18+
h1 {
19+
font-weight: bold;
20+
font-family: '游ゴシック体', sans-serif;
21+
line-height: 1.4;
22+
margin: 0;
23+
}
24+
25+
address {
26+
background: rgba(0,0,0,0.9);
27+
font-weight: bold; font-family: 'Spicy Rice', cursive;
28+
font-style: normal;
29+
font-size: 13vh;
30+
text-align: right;
31+
line-height: 18vh;
32+
padding: 10px;
33+
position: absolute;
34+
bottom: 15px;
35+
right: 15px;
36+
}
37+
38+
.icon {
39+
height: 18vh;
40+
vertical-align: middle;
41+
}
42+
43+
.sitename {
44+
color: white;
45+
vertical-align: middle;
46+
}
47+
</style>
48+
</head>
49+
<body>
50+
<h1 id="title"></h1>
51+
<address>
52+
<img class="icon" src="content/images/myicon_nomi.jpg">
53+
<span class="sitename">blog.tai2.net</span>
54+
</address>
55+
<script>
56+
document.addEventListener('DOMContentLoaded', async () => {
57+
const injectedProps = await getInjectedProps()
58+
const title = document.getElementById('title')
59+
title.innerHTML = injectedProps.title
60+
61+
let fontSize = 100 // px dimension
62+
for (;;) {
63+
title.style.fontSize = fontSize + 'px'
64+
if (document.body.clientHeight <= window.innerHeight) {
65+
break
66+
}
67+
fontSize -= 1
68+
}
69+
})
70+
</script>
71+
</body>
72+
</html>

Diff for: ‎ogimage.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
const process = require('process')
2+
const path = require('path')
3+
const fs = require('fs')
4+
const puppeteer = require('puppeteer')
5+
const restructured = require('restructured').default
6+
7+
function parseArticle(path) {
8+
const text = fs.readFileSync(path, 'utf8')
9+
const article = restructured.parse(text)
10+
const firstSection = article.children.find(child => child.type === 'section')
11+
const firstTitle = firstSection.children.find(child => child.type === 'title')
12+
const firstTitleText = firstTitle.children.find(child => child.type === 'text')
13+
return {
14+
path,
15+
title: firstTitleText.value,
16+
}
17+
}
18+
19+
async function capture(article) {
20+
const viewport = {
21+
width: 1000,
22+
height: 500,
23+
}
24+
const injectedProps = {
25+
title: article.title,
26+
}
27+
const basename = path.basename(article.path, '.rst')
28+
29+
const browser = await puppeteer.launch()
30+
const page = await browser.newPage()
31+
page.setViewport(viewport)
32+
await page.exposeFunction('getInjectedProps', () => injectedProps)
33+
await page.goto('file://' + path.resolve('ogimage.html'))
34+
await page.screenshot({path: `content/images/og/${basename}.png`})
35+
await browser.close()
36+
}
37+
38+
const article = parseArticle(process.argv[2])
39+
capture(article)

0 commit comments

Comments
 (0)