Flesh out Tumblr instructions.

cloudflare · Sep 14, 2016 · 1fbbb96 · 1fbbb96
1 parent 0634fcc
commit 1fbbb96
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 11 deletions.
diff --git 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
@@ -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
diff --git a/app/targets/tumblr/tumblr-latest/edit-html.jpg b/app/targets/tumblr/tumblr-latest/edit-html.jpg
diff --git a/app/targets/tumblr/tumblr-latest/edit-theme.jpg b/app/targets/tumblr/tumblr-latest/edit-theme.jpg
diff --git a/app/targets/tumblr/tumblr-latest/index.js 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
@@ -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 = `<div class="focal-point relative-arrow" data-arrow="above">${escaper.innerHTML}</div>`
+
+    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
@@ -0,0 +1,41 @@
+.screenshot
+  if this.location === "head"
+    :marked
+      ```django
+      <!DOCTYPE html>
+      <html>
+        <head>
+          {{EMBED_CODE_SLOT}}
+          <title>{Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary} — {PostSummary}{/block:PostSummary}{/block:PermalinkPage}</title>
+
+          <meta charset="utf-8">
+          <meta name="description" content="{block:IndexPage}{block:Description}{MetaDescription}{/block:Description}{/block:IndexPage}{block:PermalinkPage}{block:PostSummary}{PostSummary}{/block:PostSummary}{/block:PermalinkPage}" />
+        </head>
+
+        <body>
+          {block:IfShowBarOnTop}<section id="color_bar"></section>{/block:IfShowBarOnTop}
+          <section id="container" class="group">
+          </section>
+        </body>
+      </html>
+      ```
+  else
+    :marked
+      ```django
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>{Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary} — {PostSummary}{/block:PostSummary}{/block:PermalinkPage}</title>
+
+          <meta charset="utf-8">
+          <meta name="description" content="{block:IndexPage}{block:Description}{MetaDescription}{/block:Description}{/block:IndexPage}{block:PermalinkPage}{block:PostSummary}{PostSummary}{/block:PostSummary}{/block:PermalinkPage}" />
+        </head>
+
+        <body>
+          {{EMBED_CODE_SLOT}}
+          {block:IfShowBarOnTop}<section id="color_bar"></section>{/block:IfShowBarOnTop}
+          <section id="container" class="group">
+          </section>
+        </body>
+      </html>
+      ```
diff --git a/app/targets/tumblr/tumblr-latest/install-script/install-script.styl 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
@@ -0,0 +1,48 @@
+include ../../../components/base-screenshot/mixin-annotation-arrow.pug
+
+ol.steps
+  li
+    h2 Login to the <a target="_blank" href="https://www.tumblr.com/login">Tumblr Dashboard</a>.
+
+  li
+    h2 Navigate to <strong>Edit appearance<span class="with-more-icon-after"></span> Edit Theme <span class="with-more-icon-after"></span> Edit HTML</strong>.
+    p
+      | In the top right menu bar, click the user icon, then <strong>Edit appearance</strong>.
+
+    p Then click <strong>Edit HTML/CSS</strong> 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 <strong>Edit Theme</strong>.
+
+    figure
+      img(src=require("./edit-theme.jpg"))
+      +annotation-arrow("sw")(style={top: "45%", left: "46%", width: "20%"})
+
+  li
+    p On the top left, Click <strong>Edit HTML</strong>.
+
+    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 &lt;#{this.location}&gt; tag.
+
+    figure(data-ref="screenshotMounts[]" data-screenshot="installScript")
+
+  li
+    h2 Save your changes.
+
+    p Clicking <strong>Update Preview</strong> and <strong>Save</strong>.
+    p You’re done!
diff --git a/app/targets/tumblr/tumblr.svg b/app/targets/tumblr/tumblr.svg
diff --git 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