Fork of Scribe - an alternative Medium frontend
Go to file
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
.github/workflows Initial app 2021-05-01 17:03:38 -04:00
config Add basic response (except images) 2021-05-01 17:39:05 -04:00
db/migrations Initial app 2021-05-01 17:03:38 -04:00
public Initial app 2021-05-01 17:03:38 -04:00
script Add script to build object file (.o) for Ubuntu 2021-09-07 22:00:20 -04:00
spec Render embedded content 2021-09-15 15:18:08 -04:00
src Render embedded content 2021-09-15 15:18:08 -04:00
tasks Initial app 2021-05-01 17:03:38 -04:00
.crystal-version Initial app 2021-05-01 17:03:38 -04:00
.editorconfig Initial app 2021-05-01 17:03:38 -04:00
.gitignore Add tufte.css 2021-08-29 15:19:40 -04:00
.tool-versions Initial app 2021-05-01 17:03:38 -04:00
LICENSE Add License 2021-09-12 17:34:48 -04:00
Procfile Initial app 2021-05-01 17:03:38 -04:00
Procfile.dev Initial app 2021-05-01 17:03:38 -04:00
README.md Initial app 2021-05-01 17:03:38 -04:00
bs-config.js Initial app 2021-05-01 17:03:38 -04:00
package.json Move compression-webpack-plugin and postcss to prod 2021-08-29 17:08:55 -04:00
shard.lock Render embedded content 2021-09-15 15:18:08 -04:00
shard.yml Render embedded content 2021-09-15 15:18:08 -04:00
tasks.cr Initial app 2021-05-01 17:03:38 -04:00
webpack.mix.js Add tufte.css 2021-08-29 15:19:40 -04:00
yarn.lock Move compression-webpack-plugin and postcss to prod 2021-08-29 17:08:55 -04:00

README.md

scribe

This is a project written using Lucky. Enjoy!

Setting up the project

  1. Install required dependencies
  2. Update database settings in config/database.cr
  3. Run script/setup
  4. Run lucky dev to start the app

Learning Lucky

Lucky uses the Crystal programming language. You can learn about Lucky from the Lucky Guides.