og:image生成。

tai2 · Nov 17, 2017 · 3a43358 · 3a43358
1 parent 01864d4
commit 3a43358
Show file tree

Hide file tree

Showing 39 changed files with 702 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,4 @@ cache/
 pelican.pid
 srv.pid
 .pelican
+node_modules
diff --git a/content/images/og/a-field-guide-to-debugging.png b/content/images/og/a-field-guide-to-debugging.png
diff --git a/content/images/og/abenomics-freelance.png b/content/images/og/abenomics-freelance.png
diff --git a/content/images/og/about_apple_swift.png b/content/images/og/about_apple_swift.png
diff --git a/content/images/og/about_pythonjs.png b/content/images/og/about_pythonjs.png
diff --git a/content/images/og/android_mvp.png b/content/images/og/android_mvp.png
diff --git a/content/images/og/android_wear_design.png b/content/images/og/android_wear_design.png
diff --git a/content/images/og/automatic_semicolon_insertion.png b/content/images/og/automatic_semicolon_insertion.png
diff --git a/content/images/og/bower_macglashan_mvp.png b/content/images/og/bower_macglashan_mvp.png
diff --git a/content/images/og/clean_architecture.png b/content/images/og/clean_architecture.png
diff --git a/content/images/og/crowdworks-sushi.png b/content/images/og/crowdworks-sushi.png
diff --git a/content/images/og/doctrine-best-practices.png b/content/images/og/doctrine-best-practices.png
diff --git a/content/images/og/doctrine-join-with-syntax.png b/content/images/og/doctrine-join-with-syntax.png
diff --git a/content/images/og/email_validation.png b/content/images/og/email_validation.png
diff --git a/content/images/og/freee-review.png b/content/images/og/freee-review.png
diff --git a/content/images/og/fsa-error.png b/content/images/og/fsa-error.png
diff --git a/content/images/og/github_client_howto.png b/content/images/og/github_client_howto.png
diff --git a/content/images/og/hexagonal_architecture.png b/content/images/og/hexagonal_architecture.png
diff --git a/content/images/og/ios_settings_app.png b/content/images/og/ios_settings_app.png
diff --git a/content/images/og/lgpl_and_appstore.png b/content/images/og/lgpl_and_appstore.png
diff --git a/content/images/og/mpegla_and_ffmpeg.png b/content/images/og/mpegla_and_ffmpeg.png
diff --git a/content/images/og/mutt_and_notmuch.png b/content/images/og/mutt_and_notmuch.png
diff --git a/content/images/og/nodejs-advent-calendar-2016.png b/content/images/og/nodejs-advent-calendar-2016.png
diff --git a/content/images/og/nodeschool_tokyo.png b/content/images/og/nodeschool_tokyo.png
diff --git a/content/images/og/pelican_impression.png b/content/images/og/pelican_impression.png
diff --git a/content/images/og/potel_mvp.png b/content/images/og/potel_mvp.png
diff --git a/content/images/og/react-redux-reload.png b/content/images/og/react-redux-reload.png
diff --git a/content/images/og/real-world-redux.png b/content/images/og/real-world-redux.png
diff --git a/content/images/og/the_git_object_model.png b/content/images/og/the_git_object_model.png
diff --git a/content/images/og/wants_for_designers.png b/content/images/og/wants_for_designers.png
diff --git a/content/images/og/wants_for_directors.png b/content/images/og/wants_for_directors.png
diff --git a/content/images/og/webpacker3.png b/content/images/og/webpacker3.png
diff --git a/content/images/og/websocket_bulktransfer_ios.png b/content/images/og/websocket_bulktransfer_ios.png
diff --git a/content/images/og/xhr_bulktransfer_ios.png b/content/images/og/xhr_bulktransfer_ios.png
diff --git a/ogimage.html b/ogimage.html
@@ -0,0 +1,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>
diff --git a/ogimage.js b/ogimage.js
@@ -0,0 +1,39 @@
+const process = require('process')
+const path = require('path')
+const fs = require('fs')
+const puppeteer = require('puppeteer')
+const restructured = require('restructured').default
+
+function parseArticle(path) {
+    const text = fs.readFileSync(path, 'utf8')
+    const article = restructured.parse(text)
+    const firstSection = article.children.find(child => child.type === 'section')
+    const firstTitle = firstSection.children.find(child => child.type === 'title')
+    const firstTitleText = firstTitle.children.find(child => child.type === 'text')
+    return {
+        path,
+        title: firstTitleText.value,
+    }
+}
+
+async function capture(article) {
+    const viewport = {
+        width: 1000,
+        height: 500,
+    }
+    const injectedProps = {
+        title: article.title,
+    }
+    const basename = path.basename(article.path, '.rst')
+
+    const browser = await puppeteer.launch()
+    const page = await browser.newPage()
+    page.setViewport(viewport)
+    await page.exposeFunction('getInjectedProps', () => injectedProps)
+    await page.goto('file://' + path.resolve('ogimage.html'))
+    await page.screenshot({path: `content/images/og/${basename}.png`})
+    await browser.close()
+}
+
+const article = parseArticle(process.argv[2])
+capture(article)