blacklight/scribe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Better error pages

Browse source 
Instead of showing the default Lucky error page, the styles now match
Scribe. In addition, if a URL can't be parsed, Scribe gives some
information as to why this might be (that Scribe can only deal with an
article pages)
This commit is contained in:
Edward Loveall 2022-02-12 17:56:36 -05:00
parent 7d0bc37efd
commit f056a0b68a
No known key found for this signature in database
GPG key ID: A7606DFEC2BA731F
4 changed files with 46 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
CHANGELOG
View file

@ -1,3 +1,8 @@
2022-02-12
* Error page matches Scribe styles
* New error page for not being able to parse article URL
2022-01-30
* Fix bug in markup generation for text with multiple codepoints

3
src/actions/articles/show.cr
View file

@ -10,9 +10,10 @@ class Articles::Show < BrowserAction
html ShowPage, page: page
in Monads::Nothing, Monads::Maybe
html(
Errors::ShowPage,
Errors::ParseErrorPage,
message: "Error parsing the URL",
status_code: 500,
original_path: request.path,
)
end
end

32
src/pages/errors/parse_error_page.cr Normal file
View file

@ -0,0 +1,32 @@
class Errors::ParseErrorPage < MainLayout
needs message : String
needs status_code : Int32
needs original_path : String
def page_title
"Error"
end
def content
h1 status_code
h2 message
article do
what_can_scribe_show
mount Shared::LayoutFooter
end
end
private def what_can_scribe_show
section do
para <<-TEXT
Scribe just tried to parse the Medium URL but wasn't able to. Scribe is
only built to display articles. It's not built to browse or search
Medium, it's users, hashtags, comments, or anything else.
TEXT
para do
text "If you like, you can try visiting "
a "this page on medium.com", href: "https://medium.com#{original_path}"
end
end
end
end

92
src/pages/errors/show_page.cr
View file

@ -1,93 +1,15 @@
class Errors::ShowPage
include Lucky::HTMLPage
class Errors::ShowPage < MainLayout
needs message : String
needs status_code : Int32
def render
html_doctype
html lang: "en" do
head do
utf8_charset
title "Something went wrong"
load_lato_font
normalize_styles
error_page_styles
end
def content
h1 status_code
h2 message
body do
div class: "container" do
h2 status_code, class: "status-code"
h1 message, class: "message"
ul class: "helpful-links" do
li do
a "Try heading back to home", href: "/", class: "helpful-link"
article do
para do
a "Try heading back to home", href: "/"
end
end
end
end
end
end
def load_lato_font
css_link "https://fonts.googleapis.com/css?family=Lato"
end
def normalize_styles
style <<-CSS
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}
CSS
end
def error_page_styles
style <<-CSS
body {
background-color: #f5f5f5;
color: #000;
font-family: 'Lato', sans-serif;
padding-top: 100px;
}
.helpful-links {
list-style-type: none;
margin: 0;
padding: 0;
}
.helpful-link {
color: #15A38B;
}
.status-code {
opacity: 0.4;
font-size: 26px;
font-weight: normal;
}
.message {
font-size: 34px;
line-height: 56px;
font-weight: normal;
}
.container {
margin: 0 auto;
max-width: 450px;
padding: 55px;
}
@media only screen and (max-width: 500px) {
.status-code {
font-size: 18px;
}
.message {
font-size: 26px;
line-height: 40px;
margin: 20px 0 35px 0;
}
}
CSS
end
end