blacklight/scribe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
scribe/spec/components/page_content_spec.cr

315 lines
7.3 KiB
Crystal
Raw Normal View History

First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
require "../spec_helper"
include Nodes
describe PageContent do
it "renders a single parent/child node structure" do
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
Paragraph.new(children: [
Text.new(content: "hi"),
] of Child),
] of Child
)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
html = PageContent.new(page: page).render_to_string
html.should eq %(<p>hi</p>)
end
it "renders multiple childrens" do
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
Paragraph.new(children: [
Text.new(content: "Hello, "),
Emphasis.new(children: [
Text.new(content: "World!"),
] of Child),
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
] of Child),
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
UnorderedList.new(children: [
ListItem.new(children: [
Text.new(content: "List!"),
] of Child),
ListItem.new(children: [
Text.new(content: "Again!"),
] of Child),
crystal tool format
2021-08-08 20:23:38 +02:00
] of Child),
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
] of Child
)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
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
Render a Link Anchor As opposed to a user anchor
2021-07-04 23:06:17 +02:00
it "renders an anchor" do
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
Anchor.new(children: [Text.new("link")] of Child, href: "https://example.com"),
] of Child
)
Render a Link Anchor As opposed to a user anchor
2021-07-04 23:06:17 +02:00
html = PageContent.new(page: page).render_to_string
html.should eq %(<a href="https://example.com">link</a>)
end
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
it "renders a blockquote" do
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
BlockQuote.new(children: [
Text.new("Wayne Gretzky. Michael Scott."),
] of Child),
] of Child
)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
html = PageContent.new(page: page).render_to_string
html.should eq %(<blockquote>Wayne Gretzky. Michael Scott.</blockquote>)
end
it "renders code" do
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
Code.new(children: [
Text.new("foo = bar"),
] of Child),
] of Child
)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
html = PageContent.new(page: page).render_to_string
html.should eq %(<code>foo = bar</code>)
end
it "renders empasis" do
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
Paragraph.new(children: [
Text.new(content: "This is "),
Emphasis.new(children: [
Text.new(content: "neat!"),
] of Child),
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
] of Child),
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
] of Child
)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
html = PageContent.new(page: page).render_to_string
html.should eq %(<p>This is <em>neat!</em></p>)
end
Render image inside a figure with a caption Most images have a caption (or at least have the option of being captioned). Instead of displaying the raw image, it's not rendered inside a <figure> tag with a <figcaption> (possibly blank) as a sibling. The <figcaption> can be marked up with links.
2021-07-05 20:10:40 +02:00
it "renders a figure and figure caption" do
Display figure captions as margin notes On a thin viewport like a phone these show up as hidden at first until the user expands them by interacting with the "writing hand" icon. Each margin note needs a small bit of markup near it to enable the toggle. Each also needs a unique ID to ensure it doesn't interact with alternate content. The `hash` value of the FigureCaption's `children` provides this unique value.
2021-08-15 21:08:03 +02:00
children = [Text.new("A caption")] of Child
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
Figure.new(children: [
Image.new(src: "image.png", originalWidth: 100, originalHeight: 200),
Display figure captions as margin notes On a thin viewport like a phone these show up as hidden at first until the user expands them by interacting with the "writing hand" icon. Each margin note needs a small bit of markup near it to enable the toggle. Each also needs a unique ID to ensure it doesn't interact with alternate content. The `hash` value of the FigureCaption's `children` provides this unique value.
2021-08-15 21:08:03 +02:00
FigureCaption.new(children: children),
Render image inside a figure with a caption Most images have a caption (or at least have the option of being captioned). Instead of displaying the raw image, it's not rendered inside a <figure> tag with a <figcaption> (possibly blank) as a sibling. The <figcaption> can be marked up with links.
2021-07-05 20:10:40 +02:00
] of Child),
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
] of Child
)
Render image inside a figure with a caption Most images have a caption (or at least have the option of being captioned). Instead of displaying the raw image, it's not rendered inside a <figure> tag with a <figcaption> (possibly blank) as a sibling. The <figcaption> can be marked up with links.
2021-07-05 20:10:40 +02:00
html = PageContent.new(page: page).render_to_string
html.should eq stripped_html <<-HTML
<figure>
Don't render image heights explicitly The CSS itself will take care of scaling the image height based on the width. We still need to know the height to fetch the image because the height is in the URL, but we don't need to render it in the HTML.
2021-08-14 22:07:31 +02:00
<img src="https://cdn-images-1.medium.com/fit/c/100/200/image.png" width="100">
Display figure captions as margin notes On a thin viewport like a phone these show up as hidden at first until the user expands them by interacting with the "writing hand" icon. Each margin note needs a small bit of markup near it to enable the toggle. Each also needs a unique ID to ensure it doesn't interact with alternate content. The `hash` value of the FigureCaption's `children` provides this unique value.
2021-08-15 21:08:03 +02:00
<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>
Render image inside a figure with a caption Most images have a caption (or at least have the option of being captioned). Instead of displaying the raw image, it's not rendered inside a <figure> tag with a <figcaption> (possibly blank) as a sibling. The <figcaption> can be marked up with links.
2021-07-05 20:10:40 +02:00
</figure>
HTML
end
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
it "renders an H3" do
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
Heading2.new(children: [
Text.new(content: "Title!"),
] of Child),
] of Child
)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
html = PageContent.new(page: page).render_to_string
Use H2/H3 instead of H3/H4 respectively General CSS hygiene dictates that you shouldn't go beyond an H3 tag. H1 for the document title, H2 for section headings, and H3 for low-level headings.
2021-08-14 22:12:01 +02:00
html.should eq %(<h2>Title!</h2>)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
end
it "renders an H4" do
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
Heading3.new(children: [
Text.new(content: "In Conclusion..."),
] of Child),
] of Child
)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
html = PageContent.new(page: page).render_to_string
Use H2/H3 instead of H3/H4 respectively General CSS hygiene dictates that you shouldn't go beyond an H3 tag. H1 for the document title, H2 for section headings, and H3 for low-level headings.
2021-08-14 22:12:01 +02:00
html.should eq %(<h3>In Conclusion...</h3>)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
end
it "renders an image" do
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
Paragraph.new(children: [
Image.new(src: "image.png", originalWidth: 100, originalHeight: 200),
] of Child),
] of Child
)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
html = PageContent.new(page: page).render_to_string
Fetch the resized image Instead of getting the full size image, the image can be fetched with a width and height parameter so that only the resized data is transferred. The url looks like this: https://cdn-images-1.medium.com/fit/c/<width>/<height>/<media-id> I picked a max image width of 800px. If the image width is more than that, it scales the width down to 800, then applies that ratio to the height. If it's smaller than that, the image is displayed as the original.
2021-07-05 20:54:58 +02:00
html.should eq stripped_html <<-HTML
<p>
Don't render image heights explicitly The CSS itself will take care of scaling the image height based on the width. We still need to know the height to fetch the image because the height is in the URL, but we don't need to render it in the HTML.
2021-08-14 22:07:31 +02:00
<img src="https://cdn-images-1.medium.com/fit/c/100/200/image.png" width="100">
Fetch the resized image Instead of getting the full size image, the image can be fetched with a width and height parameter so that only the resized data is transferred. The url looks like this: https://cdn-images-1.medium.com/fit/c/<width>/<height>/<media-id> I picked a max image width of 800px. If the image width is more than that, it scales the width down to 800, then applies that ratio to the height. If it's smaller than that, the image is displayed as the original.
2021-07-05 20:54:58 +02:00
</p>
HTML
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
end
it "renders an iframe container" do
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
Paragraph.new(children: [
IFrame.new(href: "https://example.com"),
] of Child),
] of Child
)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
html = PageContent.new(page: page).render_to_string
Show the host for the iframe link Instead of showing only: Click to visit embedded content An embedded link now displays with the domain it's linking to: Embedded content at example.com This hopefully breaks up the links a bit so it'e easier to distinguish between a bunch of them in a row (as long as they are on different domains).
2021-07-05 21:36:38 +02:00
html.should eq stripped_html <<-HTML
<p>
<div class="embedded">
<a href="https://example.com">Embedded content at example.com</a>
</div>
</p>
HTML
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
end
it "renders an ordered list" do
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
OrderedList.new(children: [
ListItem.new(children: [Text.new("One")] of Child),
ListItem.new(children: [Text.new("Two")] of Child),
] of Child),
] of Child
)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
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
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
Paragraph.new(children: [
Text.new("Hello, world!"),
] of Child),
] of Child
)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
html = PageContent.new(page: page).render_to_string
html.should eq %(<p>Hello, world!</p>)
end
it "renders an preformatted text" do
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
Preformatted.new(children: [
Text.new("New\nline"),
] of Child),
] of Child
)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
html = PageContent.new(page: page).render_to_string
html.should eq %(<pre>New\nline</pre>)
end
it "renders strong text" do
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
Strong.new(children: [
Text.new("Oh yeah!"),
] of Child),
] of Child
)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
html = PageContent.new(page: page).render_to_string
html.should eq %(<strong>Oh yeah!</strong>)
end
it "renders an unordered list" do
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
UnorderedList.new(children: [
ListItem.new(children: [Text.new("Apple")] of Child),
ListItem.new(children: [Text.new("Banana")] of Child),
] of Child),
] of Child
)
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
html = PageContent.new(page: page).render_to_string
html.should eq %(<ul><li>Apple</li><li>Banana</li></ul>)
end
Render a User Anchor
2021-07-04 23:37:45 +02:00
it "renders a user anchor" do
Extract tile and subtitle from initial paragraphs Medium guides each post to have a Title and Subtitle. They are rendered as the first two paragraphs: H3 and H4 respectively. If they exist, a new PageConverter class extracts them and sets them on the page. However, they aren't required. If the first two paragraphs aren't H3 and H4, the PageConverter falls back to using the first paragraph as the title, and setting the subtitle to blank. The remaining paragraphs are passed into the ParagraphConverter as normal.
2021-08-14 23:36:10 +02:00
page = Page.new(
title: "Title",
subtitle: nil,
nodes: [
UserAnchor.new(children: [Text.new("Some User")] of Child, userId: "abc123"),
] of Child
)
Render a User Anchor
2021-07-04 23:37:45 +02:00
html = PageContent.new(page: page).render_to_string
html.should eq %(<a href="https://medium.com/u/abc123">Some User</a>)
end
First step rendering a page The API responds with a bunch of paragraphs which the client converts into Paragraph objects. This turns the paragraphs in a PostResponse's Paragraph objects into the form needed to render them on a page. This includes converting flat list elements into list elements nested by a UL. And adding a limited markups along the way. The array of paragraphs is passed to a recursive function. The function takes the first paragraph and either wraps the (marked up) contents in a container tag (like Paragraph or Heading3), and then moves onto the next tag. If it finds a list, it starts parsing the next paragraphs as a list instead. Originally, this was implemented like so: ```crystal paragraph = paragraphs.shift if list? convert_list([paragraph] + paragraphs) end ``` However, passing the `paragraphs` after adding it to the already shifted `paragraph` creates a new object. This means `paragraphs` won't be mutated and once the list is parsed, it starts with the next element of the list. Instead, the element is `shift`ed inside each converter. ```crystal if paragraphs.first == list? convert_list(paragraphs) end def convert_list(paragraphs) paragraph = paragraphs.shift # ... end ``` When rendering, there is an Empty and Container object. These represent a kind of "null object" for both leafs and parent objects respectively. They should never actually render. Emptys are filtered out, and Containers are never created explicitly but this will make the types pass. IFrames are a bit of a special case. Each IFrame has custom data on it that this system would need to be aware of. For now, instead of trying to parse the seemingly large number of iframe variations and dealing with embedded iframe problems, this will just keep track of the source page URL and send the user there with a link.
2021-05-16 20:14:25 +02:00
end
Render image inside a figure with a caption Most images have a caption (or at least have the option of being captioned). Instead of displaying the raw image, it's not rendered inside a <figure> tag with a <figcaption> (possibly blank) as a sibling. The <figcaption> can be marked up with links.
2021-07-05 20:10:40 +02:00
def stripped_html(html : String)
html.gsub(/\n\s*/, "").strip
end
Reference in a new issue Copy permalink