Permalink
Browse files

og:image生成。

  • Loading branch information...
tai2 committed Nov 17, 2017
1 parent 01864d4 commit 3a433584b62598878e5b17d552675b5369eea9aa
Showing with 702 additions and 0 deletions.
  1. +1 −0 .gitignore
  2. BIN content/images/og/a-field-guide-to-debugging.png
  3. BIN content/images/og/abenomics-freelance.png
  4. BIN content/images/og/about_apple_swift.png
  5. BIN content/images/og/about_pythonjs.png
  6. BIN content/images/og/android_mvp.png
  7. BIN content/images/og/android_wear_design.png
  8. BIN content/images/og/automatic_semicolon_insertion.png
  9. BIN content/images/og/bower_macglashan_mvp.png
  10. BIN content/images/og/clean_architecture.png
  11. BIN content/images/og/crowdworks-sushi.png
  12. BIN content/images/og/doctrine-best-practices.png
  13. BIN content/images/og/doctrine-join-with-syntax.png
  14. BIN content/images/og/email_validation.png
  15. BIN content/images/og/freee-review.png
  16. BIN content/images/og/fsa-error.png
  17. BIN content/images/og/github_client_howto.png
  18. BIN content/images/og/hexagonal_architecture.png
  19. BIN content/images/og/ios_settings_app.png
  20. BIN content/images/og/lgpl_and_appstore.png
  21. BIN content/images/og/mpegla_and_ffmpeg.png
  22. BIN content/images/og/mutt_and_notmuch.png
  23. BIN content/images/og/nodejs-advent-calendar-2016.png
  24. BIN content/images/og/nodeschool_tokyo.png
  25. BIN content/images/og/pelican_impression.png
  26. BIN content/images/og/potel_mvp.png
  27. BIN content/images/og/react-redux-reload.png
  28. BIN content/images/og/real-world-redux.png
  29. BIN content/images/og/the_git_object_model.png
  30. BIN content/images/og/wants_for_designers.png
  31. BIN content/images/og/wants_for_directors.png
  32. BIN content/images/og/webpacker3.png
  33. BIN content/images/og/websocket_bulktransfer_ios.png
  34. BIN content/images/og/xhr_bulktransfer_ios.png
  35. +72 −0 ogimage.html
  36. +39 −0 ogimage.js
  37. +561 −0 package-lock.json
  38. +23 −0 package.json
  39. +6 −0 pelicanconf.py
@@ -7,3 +7,4 @@ cache/
pelican.pid
srv.pid
.pelican
node_modules
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
@@ -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>
@@ -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)
Oops, something went wrong.

0 comments on commit 3a43358

Please sign in to comment.