diff --git a/app/targets/index.js b/app/targets/index.js index 6fe3905..1484659 100644 --- a/app/targets/index.js +++ b/app/targets/index.js @@ -1,7 +1,8 @@ export drupal from "./drupal" export generic from "./generic" export joomla from "./joomla" +export shopify from "./shopify" +export squarespace from "./squarespace" +export tumblr from "./tumblr" export weebly from "./weebly" export wordpress from "./wordpress" -export squarespace from "./squarespace" -export shopify from "./shopify" diff --git a/app/targets/tumblr/index.js b/app/targets/tumblr/index.js new file mode 100644 index 0000000..0b412cd --- /dev/null +++ b/app/targets/tumblr/index.js @@ -0,0 +1,12 @@ +import tumblrLatest from "./tumblr-latest" +import icon from "./tumblr.svg" + +import BaseTarget from "components/base-target" + +export default class TumblrTarget extends BaseTarget { + static icon = icon; + static id = "tumblr"; + static label = "Tumblr"; + static supports = {embedCode: true}; + static versions = [tumblrLatest]; +} diff --git a/app/targets/tumblr/tumblr-latest/edit-appearance.jpg b/app/targets/tumblr/tumblr-latest/edit-appearance.jpg new file mode 100644 index 0000000..ac59c19 Binary files /dev/null and b/app/targets/tumblr/tumblr-latest/edit-appearance.jpg differ diff --git a/app/targets/tumblr/tumblr-latest/edit-html.jpg b/app/targets/tumblr/tumblr-latest/edit-html.jpg new file mode 100644 index 0000000..97de711 Binary files /dev/null and b/app/targets/tumblr/tumblr-latest/edit-html.jpg differ diff --git a/app/targets/tumblr/tumblr-latest/edit-theme.jpg b/app/targets/tumblr/tumblr-latest/edit-theme.jpg new file mode 100644 index 0000000..bb0fe8a Binary files /dev/null and b/app/targets/tumblr/tumblr-latest/edit-theme.jpg differ diff --git a/app/targets/tumblr/tumblr-latest/index.js b/app/targets/tumblr/tumblr-latest/index.js new file mode 100644 index 0000000..99a85f5 --- /dev/null +++ b/app/targets/tumblr/tumblr-latest/index.js @@ -0,0 +1,8 @@ +import template from "./tumblr-latest.pug" +import installScript from "./install-script" + +export default { + id: "latest", + template, + screenshots: {installScript} +} diff --git a/app/targets/tumblr/tumblr-latest/install-script/index.js b/app/targets/tumblr/tumblr-latest/install-script/index.js new file mode 100644 index 0000000..ce9551c --- /dev/null +++ b/app/targets/tumblr/tumblr-latest/install-script/index.js @@ -0,0 +1,19 @@ +import template from "./install-script.pug" +import stylesheet from "./install-script.styl" + +import BaseScreenshot from "components/base-screenshot" + +export default class Screenshot extends BaseScreenshot { + static template = template; + static stylesheet = stylesheet; + + componentDidMount(target) { + const {body} = this.iframe.contentDocument + const escaper = this.iframe.contentDocument.createElement("textarea") + + escaper.textContent = target.copyText + const escapedText = `
${escaper.innerHTML}
` + + body.innerHTML = body.innerHTML.replace(/\{\{EMBED_CODE_SLOT\}\}/g, escapedText) + } +} diff --git a/app/targets/tumblr/tumblr-latest/install-script/install-script.pug b/app/targets/tumblr/tumblr-latest/install-script/install-script.pug new file mode 100644 index 0000000..ec3cf39 --- /dev/null +++ b/app/targets/tumblr/tumblr-latest/install-script/install-script.pug @@ -0,0 +1,41 @@ +.screenshot + if this.location === "head" + :marked + ```django + + + + {{EMBED_CODE_SLOT}} + {Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary} — {PostSummary}{/block:PostSummary}{/block:PermalinkPage} + + + + + + + {block:IfShowBarOnTop}
{/block:IfShowBarOnTop} +
+
+ + + ``` + else + :marked + ```django + + + + {Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary} — {PostSummary}{/block:PostSummary}{/block:PermalinkPage} + + + + + + + {{EMBED_CODE_SLOT}} + {block:IfShowBarOnTop}
{/block:IfShowBarOnTop} +
+
+ + + ``` diff --git a/app/targets/tumblr/tumblr-latest/install-script/install-script.styl b/app/targets/tumblr/tumblr-latest/install-script/install-script.styl new file mode 100644 index 0000000..b8053b3 --- /dev/null +++ b/app/targets/tumblr/tumblr-latest/install-script/install-script.styl @@ -0,0 +1,6 @@ +body + width 700px + height 275px + + pre + min-height 100vh diff --git a/app/targets/tumblr/tumblr-latest/tumblr-latest.pug b/app/targets/tumblr/tumblr-latest/tumblr-latest.pug new file mode 100644 index 0000000..c8bf3e2 --- /dev/null +++ b/app/targets/tumblr/tumblr-latest/tumblr-latest.pug @@ -0,0 +1,48 @@ +include ../../../components/base-screenshot/mixin-annotation-arrow.pug + +ol.steps + li + h2 Login to the Tumblr Dashboard. + + li + h2 Navigate to Edit appearance Edit Theme Edit HTML. + p + | In the top right menu bar, click the user icon, then Edit appearance. + + p Then click Edit HTML/CSS in the menu that appears. + + figure + img(src=require("./edit-appearance.jpg")) + +annotation-arrow("ne")(style={top: "-3%", left: "47%", width: "19%"} transform="rotate(41deg)") + +annotation-arrow("nw")(style={top: "76%", left: "33%", width: "18%"} transform="rotate(135deg)") + + li + p In the center column, Click Edit Theme. + + figure + img(src=require("./edit-theme.jpg")) + +annotation-arrow("sw")(style={top: "45%", left: "46%", width: "20%"}) + + li + p On the top left, Click Edit HTML. + + figure + img(src=require("./edit-html.jpg")) + +annotation-arrow("nw")(style={top: "47%", left: "44%", width: "20%"} transform="rotate(17deg)") + + li + h2 Copy the code below. + + .copy-container + button.button.primary.run(data-ref="copyButtons[]") Copy + div.copyable(contenteditable)= this.copyText + + p Paste this code into your site’s <#{this.location}> tag. + + figure(data-ref="screenshotMounts[]" data-screenshot="installScript") + + li + h2 Save your changes. + + p Clicking Update Preview and Save. + p You’re done! diff --git a/app/targets/tumblr/tumblr.svg b/app/targets/tumblr/tumblr.svg new file mode 100644 index 0000000..74b2fa9 --- /dev/null +++ b/app/targets/tumblr/tumblr.svg @@ -0,0 +1,3 @@ + + + diff --git a/modules/embed-box.js b/modules/embed-box.js index 264e103..0cca7ba 100644 --- a/modules/embed-box.js +++ b/modules/embed-box.js @@ -2,15 +2,17 @@ const EmbedBoxBase = require("../app/embed-box-base").default const targets = require("../app/targets") - -EmbedBoxBase.fetchedTargets = [ - targets.wordpress, - targets.shopify, - targets.squarespace, - targets.weebly, - targets.drupal, - targets.joomla, - targets.generic +const targetOrder = [ + "wordpress", + "shopify", + "squarespace", + "tumblr", + "weebly", + "drupal", + "joomla", + "generic" ] +EmbedBoxBase.fetchedTargets = targetOrder.map(id => targets[id]) + module.exports = EmbedBoxBase