7518a035b1
Previously, GitHub gists were embedded. The gist url would be detected in a paragraph and the page would render a script like: ```html <script src="https://gist.github.com/user/gist_id.js"></script> ``` The script would then embed the gist on the page. However, gists contain multiple files. It's technically possible to embed a single file in the same way by appending a `file` query param: ```html <script src="https://gist.github.com/user/gist_id.js?file=foo.txt"></script> ``` I wanted to try and tackle proxying gists instead. Overview -------- At a high level the PageConverter kicks off the work of fetching and storing the gist content, then sends that content down to the `ParagraphConverter`. When a paragraph comes up that contains a gist embed, it retrieves the previously fetched content. This allows all the necessary content to be fetched up front so the minimum number of requests need to be made. Fetching Gists -------------- There is now a `GithubClient` class that gets gist content from GitHub's ReST API. The gist API response looks something like this (non-relevant keys removed): ```json { "files": { "file-one.txt": { "filename": "file-one.txt", "raw_url": "https://gist.githubusercontent.com/<username>/<id>/raw/<file_id>/file-o ne.txt", "content": "..." }, "file-two.txt": { "filename": "file-two.txt", "raw_url": "https://gist.githubusercontent.com/<username>/<id>/raw/<file_id>/file-t wo.txt", "content": "..." } } } ``` That response gets turned into a bunch of `GistFile` objects that are then stored in a request-level `GistStore`. Crystal's JSON parsing does not make it easy to parse json with arbitrary keys into objects. This is because each key corresponds to an object property, like `property name : String`. If Crystal doesn't know the keys ahead of time, there's no way to know what methods to create. That's a problem here because the key for each gist file is the unique filename. Fortunately, the keys for each _file_ follows the same pattern and are easy to parse into a `GistFile` object. To turn gist file JSON into Crystal objects, the `GithubClient` turns the whole response into a `JSON::Any` which is like a Hash. Then it extracts just the file data objects and parses those into `GistFile` objects. Those `GistFile` objects are then cached in a `GistStore` that is shared for the page, which means one gist cache per request/article. `GistFile` objects can be fetched out of the store by file, or if no file is specified, it returns all files in the gist. The GistFile is rendered as a link of the file's name to the file in the gist on GitHub, and then a code block of the contents of the file. In summary, the `PageConverter`: * Scans the paragraphs for GitHub gists using `GistScanner` * Requests their data from GitHub using the `GithubClient` * Parses the response into `GistFile`s and populates the `GistStore` * Passes that `GistStore` to the `ParagraphConverter` to use when constructing the page nodes Caching ------- GitHub limits API requests to 5000/hour with a valid api token and 60/hour without. 60 is pretty tight for the usage that scribe.rip gets, but 5000 is reasonable most of the time. Not every article has an embedded gist, but some articles have multiple gists. A viral article (of which Scribe has seen two at the time of this commit) might receive a little over 127k hits/day, which is an average of over 5300/hour. If that article had a gist, Scribe would reach the API limit during parts of the day with high traffic. If it had multiple gists, it would hit it even more. However, average traffic is around 30k visits/day which would be well under the limit, assuming average load. To help not hit that limit, a `GistStore` holds all the `GistFile` objects per gist. The logic in `GistScanner` is smart enough to only return unique gist URLs so each gist is only requested once even if multiple files from one gist exist in an article. This limits the number of times Scribe hits the GitHub API. If Scribe is rate-limited, instead of populating a `GistCache` the `PageConverter` will create a `RateLimitedGistStore`. This is an object that acts like the `GistStore` but returns `RateLimitedGistFile` objects instead of `GistFile` objects. This allows Scribe to gracefully degrade in the event of reaching the rate limit. If rate-limiting becomes a regular problem, Scribe could also be reworked to fallback to the embedded gists again. API Credentials --------------- API credentials are in the form of a GitHub username and a personal access token attached to that username. To get a token, visit https://github.com/settings/tokens and create a new token. The only permission it needs is `gist`. This token is set via the `GITHUB_PERSONAL_ACCESS_TOKEN` environment variable. The username also needs to be set via `GITHUB_USERNAME`. When developing locally, these can both be set in the .env file. Authentication is probably not necessary locally, but it's there if you want to test. If either token is missing, unauthenticated requests are made. Rendering --------- The node tree itself holds a `GithubGist` object. It has a reference to the `GistStore` and the original gist URL. When it renders the page requests the gist's `files`. The gist ID and optional file are detected, and then used to request the file(s) from the `GistStore`. Gists render as a list of each files contents and a link to the file on GitHub. If the requests were rate limited, the store is a `RateLimitedGistStore` and the files are `RateLimitedGistFile`s. These rate-limited objects rendered with a link to the gist on GitHub and text saying that Scribe has been rate-limited. If somehow the file requested doesn't exist in the store, it displays similarly to the rate-limited file but with "file missing" text instead of "rate limited" text. GitHub API docs: https://docs.github.com/en/rest/reference/gists Rate Limiting docs: https://docs.github.com/en/rest/overview/resources-in-the-rest-api#rate- limiting
346 lines
8.7 KiB
Crystal
346 lines
8.7 KiB
Crystal
require "../spec_helper"
|
|
|
|
include Nodes
|
|
|
|
describe ParagraphConverter do
|
|
it "converts a simple structure with no markups" do
|
|
gist_store = GistStore.new
|
|
paragraphs = Array(PostResponse::Paragraph).from_json <<-JSON
|
|
[
|
|
{
|
|
"text": "Title",
|
|
"type": "H3",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
}
|
|
]
|
|
JSON
|
|
expected = [Heading3.new(children: [Text.new(content: "Title")] of Child)]
|
|
|
|
result = ParagraphConverter.new.convert(paragraphs, gist_store)
|
|
|
|
result.should eq expected
|
|
end
|
|
|
|
it "converts a simple structure with a markup" do
|
|
gist_store = GistStore.new
|
|
paragraphs = Array(PostResponse::Paragraph).from_json <<-JSON
|
|
[
|
|
{
|
|
"text": "inline code",
|
|
"type": "P",
|
|
"markups": [
|
|
{
|
|
"name": null,
|
|
"title": null,
|
|
"type": "CODE",
|
|
"href": null,
|
|
"start": 7,
|
|
"end": 11,
|
|
"rel": null,
|
|
"anchorType": null
|
|
}
|
|
],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
}
|
|
]
|
|
JSON
|
|
expected = [
|
|
Paragraph.new(children: [
|
|
Text.new(content: "inline "),
|
|
Code.new(children: [Text.new(content: "code")] of Child),
|
|
] of Child),
|
|
]
|
|
|
|
result = ParagraphConverter.new.convert(paragraphs, gist_store)
|
|
|
|
result.should eq expected
|
|
end
|
|
|
|
it "groups <ul> list items into one list" do
|
|
gist_store = GistStore.new
|
|
paragraphs = Array(PostResponse::Paragraph).from_json <<-JSON
|
|
[
|
|
{
|
|
"text": "One",
|
|
"type": "ULI",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
},
|
|
{
|
|
"text": "Two",
|
|
"type": "ULI",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
},
|
|
{
|
|
"text": "Not a list item",
|
|
"type": "P",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
}
|
|
]
|
|
JSON
|
|
expected = [
|
|
UnorderedList.new(children: [
|
|
ListItem.new(children: [Text.new(content: "One")] of Child),
|
|
ListItem.new(children: [Text.new(content: "Two")] of Child),
|
|
] of Child),
|
|
Paragraph.new(children: [Text.new(content: "Not a list item")] of Child),
|
|
]
|
|
|
|
result = ParagraphConverter.new.convert(paragraphs, gist_store)
|
|
|
|
result.should eq expected
|
|
end
|
|
|
|
it "groups <ol> list items into one list" do
|
|
gist_store = GistStore.new
|
|
paragraphs = Array(PostResponse::Paragraph).from_json <<-JSON
|
|
[
|
|
{
|
|
"text": "One",
|
|
"type": "OLI",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
},
|
|
{
|
|
"text": "Two",
|
|
"type": "OLI",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
},
|
|
{
|
|
"text": "Not a list item",
|
|
"type": "P",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
}
|
|
]
|
|
JSON
|
|
expected = [
|
|
OrderedList.new(children: [
|
|
ListItem.new(children: [Text.new(content: "One")] of Child),
|
|
ListItem.new(children: [Text.new(content: "Two")] of Child),
|
|
] of Child),
|
|
Paragraph.new(children: [Text.new(content: "Not a list item")] of Child),
|
|
]
|
|
|
|
result = ParagraphConverter.new.convert(paragraphs, gist_store)
|
|
|
|
result.should eq expected
|
|
end
|
|
|
|
it "converts an IMG to a Figure" do
|
|
gist_store = GistStore.new
|
|
paragraph = PostResponse::Paragraph.from_json <<-JSON
|
|
{
|
|
"text": "Image by someuser",
|
|
"type": "IMG",
|
|
"markups": [
|
|
{
|
|
"title": "",
|
|
"type": "A",
|
|
"href": "https://unsplash.com/@someuser",
|
|
"userId": null,
|
|
"start": 9,
|
|
"end": 17,
|
|
"rel": "photo-creator",
|
|
"anchorType": "LINK"
|
|
}
|
|
],
|
|
"iframe": null,
|
|
"layout": "INSET_CENTER",
|
|
"metadata": {
|
|
"id": "image.png",
|
|
"originalWidth": 1000,
|
|
"originalHeight": 600
|
|
}
|
|
}
|
|
JSON
|
|
expected = [
|
|
Figure.new(children: [
|
|
Image.new(src: "image.png", originalWidth: 1000, originalHeight: 600),
|
|
FigureCaption.new(children: [
|
|
Text.new("Image by "),
|
|
Anchor.new(
|
|
children: [Text.new("someuser")] of Child,
|
|
href: "https://unsplash.com/@someuser"
|
|
),
|
|
] of Child),
|
|
] of Child),
|
|
]
|
|
|
|
result = ParagraphConverter.new.convert([paragraph], gist_store)
|
|
|
|
result.should eq expected
|
|
end
|
|
|
|
it "converts all the tags" do
|
|
gist_store = GistStore.new
|
|
paragraphs = Array(PostResponse::Paragraph).from_json <<-JSON
|
|
[
|
|
{
|
|
"text": "text",
|
|
"type": "H2",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
},
|
|
{
|
|
"text": "text",
|
|
"type": "H3",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
},
|
|
{
|
|
"text": "text",
|
|
"type": "H4",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
},
|
|
{
|
|
"text": "text",
|
|
"type": "P",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
},
|
|
{
|
|
"text": "text",
|
|
"type": "PRE",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
},
|
|
{
|
|
"text": "text",
|
|
"type": "BQ",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
},
|
|
{
|
|
"text": "text",
|
|
"type": "PQ",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
},
|
|
{
|
|
"text": "text",
|
|
"type": "ULI",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
},
|
|
{
|
|
"text": "text",
|
|
"type": "OLI",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": null
|
|
},
|
|
{
|
|
"text": "text",
|
|
"type": "IMG",
|
|
"markups": [],
|
|
"iframe": null,
|
|
"layout": null,
|
|
"metadata": {
|
|
"id": "1*miroimage.png",
|
|
"originalWidth": 618,
|
|
"originalHeight": 682
|
|
}
|
|
},
|
|
{
|
|
"text": "",
|
|
"type": "IFRAME",
|
|
"markups": [],
|
|
"iframe": {
|
|
"mediaResource": {
|
|
"href": "https://example.com",
|
|
"iframeSrc": "",
|
|
"iframeWidth": 0,
|
|
"iframeHeight": 0
|
|
}
|
|
},
|
|
"layout": null,
|
|
"metadata": null
|
|
},
|
|
{
|
|
"text": "Mixtape",
|
|
"type": "MIXTAPE_EMBED",
|
|
"href": null,
|
|
"layout": null,
|
|
"markups": [
|
|
{
|
|
"title": "https://example.com",
|
|
"type": "A",
|
|
"href": "https://example.com",
|
|
"userId": null,
|
|
"start": 0,
|
|
"end": 7,
|
|
"anchorType": "LINK"
|
|
}
|
|
],
|
|
"iframe": null,
|
|
"metadata": null
|
|
}
|
|
]
|
|
JSON
|
|
expected = [
|
|
Heading1.new([Text.new("text")] of Child),
|
|
Heading2.new([Text.new("text")] of Child),
|
|
Heading3.new([Text.new("text")] of Child),
|
|
Paragraph.new([Text.new("text")] of Child),
|
|
Preformatted.new([Text.new("text")] of Child),
|
|
BlockQuote.new([Text.new("text")] of Child), # BQ
|
|
BlockQuote.new([Text.new("text")] of Child), # PQ
|
|
UnorderedList.new([ListItem.new([Text.new("text")] of Child)] of Child),
|
|
OrderedList.new([ListItem.new([Text.new("text")] of Child)] of Child),
|
|
Figure.new(children: [
|
|
Image.new(src: "1*miroimage.png", originalWidth: 618, originalHeight: 682),
|
|
FigureCaption.new(children: [Text.new("text")] of Child),
|
|
] of Child),
|
|
EmbeddedLink.new(href: "https://example.com"),
|
|
MixtapeEmbed.new(children: [
|
|
Anchor.new(
|
|
children: [Text.new("Mixtape")] of Child,
|
|
href: "https://example.com"
|
|
),
|
|
] of Child),
|
|
]
|
|
|
|
result = ParagraphConverter.new.convert(paragraphs, gist_store)
|
|
|
|
result.should eq expected
|
|
end
|
|
end
|