blacklight/scribe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
scribe/spec/components/page_content_spec.cr
Edward Loveall a6cafaa1fc
Render embedded content 
PostResponse::Paragraph's that are of type IFRAME have extra data in the
iframe attribute to specify what's in the iframe. Not all data is the
same, however. I've identified three types and am using the new
EmbeddedConverter class to convert them:

* EmbeddedContent, the full iframe experience
* GithubGist, because medium or github treat embeds differently for
  whatever reason
* EmbeddedLink, the old style, just a link to the content. Effectively
  a fallback

The size of the original iframe is also specified as an attribute. This
code resizes it. The resizing is determined by figuring out the
width/height ratio and setting the width to 800.

EmbeddedContent can be displayed if we have an embed.ly url, which most
iframe response data has. GitHub gists are a notable exception. Gists
instead can be embedded simply by taking the gist URL and attaching .js
to the end. That becomes the iframe's src attribute.

The PostResponse::Paragraph's iframe attribute is nillable. Previous
code used lots of if-statements with variable bindings to work with the
possible nil values:

```crystal
if foo = obj.nillable_value
  # obj.nillable_value was not nil and foo contains the value
else
  # obj.nillable_value was nil so do something else
end
```

See https://crystal-lang.org/reference/syntax_and_semantics/if_var.html
for more info

In the EmbeddedConverter the monads library has been introduced to get
rid of at least one level of nillability. This wraps values in Maybe
which allows for a cleaner interface:

```crystal
Monads::Try(Value).new(->{ obj.nillable_value })
  .to_maybe
  .fmap(->(value: Value) { # do something with value })
  .value_or(# value was nil, do something else)
```

This worked to get the iframe attribute from a Paragraph:

```crystal
Monads::Try(PostResponse::IFrame).new(->{ paragraph.iframe })
  .to_maybe
  .fmap(->(iframe : PostResponse::IFrame) { # iframe is not nil! })
  .fmap(#and so on)
  .value_or(Empty.new)
```

iframe only has one attribute: mediaResource which contains the iframe
data. That was used to determine one of the three types above.

Finally, Tufte.css has options for iframes. They mostly look good except
for tweets which are too small and weirdly in the center of the page
which actually looks off-center. That's for another day though.
2021-09-15 15:18:08 -04:00

420 lines
9.9 KiB
Crystal
Raw Blame History

require "../spec_helper"
include Nodes
describe PageContent do
it "renders a single parent/child node structure" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
Paragraph.new(children: [
Text.new(content: "hi"),
] of Child),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq %(<p>hi</p>)
end
it "renders multiple childrens" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
Paragraph.new(children: [
Text.new(content: "Hello, "),
Emphasis.new(children: [
Text.new(content: "World!"),
] of Child),
] of Child),
UnorderedList.new(children: [
ListItem.new(children: [
Text.new(content: "List!"),
] of Child),
ListItem.new(children: [
Text.new(content: "Again!"),
] of Child),
] of Child),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq %(<p>Hello, <em>World!</em></p><ul><li>List!</li><li>Again!</li></ul>)
end
it "renders an anchor" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
Anchor.new(children: [Text.new("link")] of Child, href: "https://example.com"),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq %(<a href="https://example.com">link</a>)
end
it "renders a blockquote" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
BlockQuote.new(children: [
Text.new("Wayne Gretzky. Michael Scott."),
] of Child),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq %(<blockquote>Wayne Gretzky. Michael Scott.</blockquote>)
end
it "renders code" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
Code.new(children: [
Text.new("foo = bar"),
] of Child),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq %(<code>foo = bar</code>)
end
it "renders empasis" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
Paragraph.new(children: [
Text.new(content: "This is "),
Emphasis.new(children: [
Text.new(content: "neat!"),
] of Child),
] of Child),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq %(<p>This is <em>neat!</em></p>)
end
it "renders a figure and figure caption" do
children = [Text.new("A caption")] of Child
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
Figure.new(children: [
Image.new(src: "image.png", originalWidth: 100, originalHeight: 200),
FigureCaption.new(children: children),
] of Child),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq stripped_html <<-HTML
<figure>
<img src="https://cdn-images-1.medium.com/fit/c/100/200/image.png" width="100">
<label class="margin-toggle" for="#{children.hash}">&#9997;&#xFE0E;</label>
<input class="margin-toggle" type="checkbox" id="#{children.hash}">
<span class="marginnote">
A caption
</span>
</figure>
HTML
end
it "renders a GitHub Gist" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
GithubGist.new(href: "https://gist.github.com/user/some_id"),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq stripped_html <<-HTML
<script src="https://gist.github.com/user/some_id.js"></script>
HTML
end
it "renders an H3" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
Heading2.new(children: [
Text.new(content: "Title!"),
] of Child),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq %(<h2>Title!</h2>)
end
it "renders an H4" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
Heading3.new(children: [
Text.new(content: "In Conclusion..."),
] of Child),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq %(<h3>In Conclusion...</h3>)
end
it "renders an image" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
Paragraph.new(children: [
Image.new(src: "image.png", originalWidth: 100, originalHeight: 200),
] of Child),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq stripped_html <<-HTML
<p>
<img src="https://cdn-images-1.medium.com/fit/c/100/200/image.png" width="100">
</p>
HTML
end
it "renders embedded content" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
EmbeddedContent.new(
src: "https://example.com",
originalWidth: 1000,
originalHeight: 600,
),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq stripped_html <<-HTML
<div class="iframe-wrapper">
<iframe src="https://example.com" width="800" height="480" frameborder="0" allowfullscreen="true">
</iframe>
</div>
HTML
end
it "renders an embedded link container" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
Paragraph.new(children: [
EmbeddedLink.new(href: "https://example.com"),
] of Child),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq stripped_html <<-HTML
<p>
<div class="embedded">
<a href="https://example.com">Embedded content at example.com</a>
</div>
</p>
HTML
end
it "renders an mixtape embed container" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
Paragraph.new(children: [
MixtapeEmbed.new(children: [
Anchor.new(
children: [Text.new("Mixtape")] of Child,
href: "https://example.com"
),
] of Child),
] of Child),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq stripped_html <<-HTML
<p>
<div class="embedded">
<a href="https://example.com">Mixtape</a>
</div>
</p>
HTML
end
it "renders an ordered list" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
OrderedList.new(children: [
ListItem.new(children: [Text.new("One")] of Child),
ListItem.new(children: [Text.new("Two")] of Child),
] of Child),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq %(<ol><li>One</li><li>Two</li></ol>)
end
it "renders an preformatted text" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
Paragraph.new(children: [
Text.new("Hello, world!"),
] of Child),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq %(<p>Hello, world!</p>)
end
it "renders an preformatted text" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
Preformatted.new(children: [
Text.new("New\nline"),
] of Child),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq %(<pre>New\nline</pre>)
end
it "renders strong text" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
Strong.new(children: [
Text.new("Oh yeah!"),
] of Child),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq %(<strong>Oh yeah!</strong>)
end
it "renders an unordered list" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
UnorderedList.new(children: [
ListItem.new(children: [Text.new("Apple")] of Child),
ListItem.new(children: [Text.new("Banana")] of Child),
] of Child),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq %(<ul><li>Apple</li><li>Banana</li></ul>)
end
it "renders a user anchor" do
page = Page.new(
title: "Title",
subtitle: nil,
author: "Author",
created_at: Time.local,
nodes: [
UserAnchor.new(children: [Text.new("Some User")] of Child, userId: "abc123"),
] of Child
)
html = PageContent.new(page: page).render_to_string
html.should eq %(<a href="https://medium.com/u/abc123">Some User</a>)
end
end
def stripped_html(html : String)
html.gsub(/\n\s*/, "").strip
end
Reference in a new issue View git blame Copy permalink