diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss index 55207e30a..63ce8e7bb 100644 --- a/app/assets/stylesheets/article-show.scss +++ b/app/assets/stylesheets/article-show.scss @@ -71,8 +71,6 @@ } .flag-user-modal-body { - padding: var(--su-6); - span { font-size: var(--fs-base); line-height: var(--lh-base); diff --git a/app/assets/stylesheets/typography.scss b/app/assets/stylesheets/typography.scss index 3f5b415bb..7a66a387e 100644 --- a/app/assets/stylesheets/typography.scss +++ b/app/assets/stylesheets/typography.scss @@ -4,7 +4,7 @@ // Alternate base fonts body.sans-serif-article-body { .body, - .crayons-article__body { + .text-styles { font-family: var(--ff-default); } .body p { @@ -15,7 +15,7 @@ body.sans-serif-article-body { body.comic-sans-article-body { .body, - .crayons-article__body { + .text-styles { font-family: 'Comic Sans MS', cursive, sans-serif; } .body p { @@ -26,7 +26,7 @@ body.comic-sans-article-body { body.open-dyslexic-article-body { .body, - .crayons-article__body { + text-styles { font-display: swap; font-family: OpenDyslexic, sans-serif; } @@ -37,15 +37,15 @@ body.open-dyslexic-article-body { } .body b, .body strong, - .crayons-article__body b, - .crayons-article__body strong { + .text-styles b, + .text-styles strong { font-family: OpenDyslexic-Bold, sans-serif; } .body i, .body em, - .crayons-article__body i, - .crayons-article__body em { + .text-styles i, + .text-styles em { font-family: OpenDyslexic-Italic, sans-serif; } @@ -57,21 +57,21 @@ body.open-dyslexic-article-body { .body em > b, .body i > strong, .body em > strong, - .crayons-article__body b > i, - .crayons-article__body b > em, - .crayons-article__body strong > i, - .crayons-article__body strong > em, - .crayons-article__body i > b, - .crayons-article__body em > b, - .crayons-article__body i > strong, - .crayons-article__body em > strong { + .text-styles b > i, + .text-styles b > em, + .text-styles strong > i, + .text-styles strong > em, + .text-styles i > b, + .text-styles em > b, + .text-styles i > strong, + .text-styles em > strong { font-family: OpenDyslexic-Bolditalic; } } body.monospace-article-body { .body, - .crayons-article__body { + .text-styles { font-family: var(--ff-accent); } .body p { diff --git a/app/assets/stylesheets/views/article.scss b/app/assets/stylesheets/views/article.scss index 204d73ad2..b3e7f72e8 100644 --- a/app/assets/stylesheets/views/article.scss +++ b/app/assets/stylesheets/views/article.scss @@ -81,226 +81,232 @@ &__body { padding: 0 var(--article-padding-x) var(--article-padding-y) var(--article-padding-x); - font-size: var(--article-font-size); overflow-wrap: break-word; + } +} +.text-styles { + font-size: var(--article-font-size); - a { - code { - color: var(--link-color); - } - - &.anchor { - padding-top: 0; - margin-top: 0; - top: -50px; - display: block; - visibility: hidden; - position: relative; - } + a { + code { + color: var(--link-color); } - h1, - h2, - h3, - h4, - h5, - h6 { - font-family: var(--ff-default); - margin: var(--article-rythm) 0; - margin-top: calc(var(--article-rythm) * 2); + &.anchor { + padding-top: 0; + margin-top: 0; + top: -50px; + display: block; + visibility: hidden; + position: relative; + } + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: var(--ff-default); + margin: var(--article-rythm) 0; + margin-top: calc(var(--article-rythm) * 2); + padding: 0; + } + + h1 { + font-size: 1.85em; + line-height: 1.25em; + font-weight: 400; + } + + h2 { + font-size: 1.7em; + font-weight: 400; + line-height: 1.25em; + margin-bottom: 0.5em; + } + + h3 { + font-size: 1.32em; + font-weight: 400; + } + + hr { + width: 25%; + opacity: 0.1; + border: 1px solid var(--body-color); + margin: 1.3em auto 1.5em; + } + + p { + margin: var(--article-rythm) 0; + } + + ul, + ol { + padding-left: var(--su-6); + margin: var(--article-rythm) 0; + br { + line-height: 0; + margin: 0; + padding: 0; + } + } + + ul { + list-style-type: disc; + + p { + margin: 0; padding: 0; } - h1 { - font-size: 1.85em; - line-height: 1.25em; - font-weight: 400; - } - - h2 { - font-size: 1.7em; - font-weight: 400; - line-height: 1.25em; - margin-bottom: 0.5em; - } - - h3 { - font-size: 1.32em; - font-weight: 400; - } - - hr { - width: 25%; - opacity: 0.1; - border: 1px solid var(--body-color); - margin: 1.3em auto 1.5em; - } - - p { - margin: var(--article-rythm) 0; - } - - ul, - ol { - padding-left: var(--su-6); - margin: var(--article-rythm) 0; - br { - line-height: 0; - margin: 0; - padding: 0; - } - } - ul { - list-style-type: disc; - - p { - margin: 0; - padding: 0; - } + margin: 0 0.7em 0 1.9em; + list-style-type: square; ul { - margin: 0 0.7em 0 1.9em; - list-style-type: square; - - ul { - list-style-type: circle; - } + list-style-type: circle; } } + } - li { + li { + margin: var(--su-2) 0; + } + + figure { + margin: 0; + } + + figcaption { + font-style: italic; + text-align: center; + font-size: 0.8em; + line-height: 1.4em; + color: var(--body-color); + opacity: 0.75; + display: block; + } + + p + figcaption { + margin-top: -0.8em; + } + + blockquote { + border-left: 4px solid var(--base-50); + padding: 0 var(--su-4); + margin: var(--article-rythm) 0; + + p:first-child { margin: var(--su-2) 0; } - figure { - margin: 0; - } + &.twitter-tweet { + font-family: var(--ff-default); + background: var(--body-color-inverted); + max-width: 456px; + border: 1px solid #e9eef2; + font-size: 0.75em; + line-height: 1.35em; + border-radius: 5px; + margin: 1.6em auto; + padding: 60px 10px 18px; + color: white; + min-height: 60px; + padding: 33px 15px 8px; - figcaption { - font-style: italic; - text-align: center; - font-size: 0.8em; - line-height: 1.4em; - color: var(--body-color); - opacity: 0.75; - display: block; - } - - p + figcaption { - margin-top: -0.8em; - } - - blockquote { - border-left: 4px solid var(--base-50); - padding: 0 var(--su-4); - margin: var(--article-rythm) 0; - - p:first-child { - margin: var(--su-2) 0; - } - - &.twitter-tweet { - font-family: var(--ff-default); - background: var(--body-color-inverted); - max-width: 456px; - border: 1px solid #e9eef2; - font-size: 0.75em; - line-height: 1.35em; - border-radius: 5px; - margin: 1.6em auto; - padding: 60px 10px 18px; + a { color: white; - min-height: 60px; - padding: 33px 15px 8px; - - a { - color: white; - } - - @media screen and (min-width: $breakpoint-s) { - padding: 60px 22px 18px; - min-height: 105px; - } - } - } - - kbd { - display: inline-block; - padding: 3px 5px; - font-size: 11px; - line-height: 10px; - color: #444d56; - vertical-align: middle; - background-color: #fafbfc; - border: solid 1px #c6cbd1; - border-bottom-color: #959da5; - border-radius: 3px; - box-shadow: inset 0 -1px 0 #959da5; - } - - pre:not(.highlight), - div.highlight { - margin: var(--article-rythm) 0; - } - - img { - height: auto; - position: relative; - display: block; - margin: auto; - max-width: 100%; - max-height: calc(50vh + 180px); - border-radius: var(--radius); - } - - a.article-body-image-wrapper { - cursor: zoom-in; - } - - iframe { - width: 100%; - border: 0; - margin: var(--article-rythm) 0; - } - - .fluidvids { - margin: var(--article-rythm) 0; - - iframe { - margin: 0; - } - } - - .table-wrapper-paragraph { - width: 100%; - margin-left: 0%; - overflow-x: auto; - } - - table { - border-collapse: collapse; - font-size: 0.78em; - margin: 0.8em auto 1.2em; - table-layout: fixed; - - th { - border: 1px solid rgba(0, 0, 0, 0.1); - padding: 5px 1vw; - background: var(--body-bg); - text-align: left; } - td { - border: 1px solid rgba(0, 0, 0, 0.1); - padding: 5px 1vw; + @media screen and (min-width: $breakpoint-s) { + padding: 60px 22px 18px; + min-height: 105px; } } - - .twitter-tweet { - margin: auto; - } } + + kbd { + display: inline-block; + padding: 3px 5px; + font-size: 11px; + line-height: 10px; + color: #444d56; + vertical-align: middle; + background-color: #fafbfc; + border: solid 1px #c6cbd1; + border-bottom-color: #959da5; + border-radius: 3px; + box-shadow: inset 0 -1px 0 #959da5; + } + + pre:not(.highlight), + div.highlight { + margin: var(--article-rythm) 0; + } + + img { + height: auto; + position: relative; + display: block; + margin: auto; + max-width: 100%; + max-height: calc(50vh + 180px); + border-radius: var(--radius); + } + + a.article-body-image-wrapper { + cursor: zoom-in; + } + + iframe { + width: 100%; + border: 0; + margin: var(--article-rythm) 0; + } + + .fluidvids { + margin: var(--article-rythm) 0; + + iframe { + margin: 0; + } + } + + .table-wrapper-paragraph { + width: 100%; + margin-left: 0%; + overflow-x: auto; + } + + table { + border-collapse: collapse; + font-size: 0.78em; + margin: 0.8em auto 1.2em; + table-layout: fixed; + + th { + border: 1px solid rgba(0, 0, 0, 0.1); + padding: 5px 1vw; + background: var(--body-bg); + text-align: left; + } + + td { + border: 1px solid rgba(0, 0, 0, 0.1); + padding: 5px 1vw; + } + } + + .twitter-tweet { + margin: auto; + } +} + +.text-padding { + padding: var(--article-padding-y) var(--article-padding-x); } .crayons-article-actions { @@ -519,10 +525,6 @@ } } -.text-padding { - padding: var(--article-padding-y) var(--article-padding-x); -} - .crayons-article { .article-collection-wrapper { font-family: var(--ff-default); diff --git a/app/javascript/article-form/components/Preview.jsx b/app/javascript/article-form/components/Preview.jsx index 38a7dc1c2..9cc5c6f20 100644 --- a/app/javascript/article-form/components/Preview.jsx +++ b/app/javascript/article-form/components/Preview.jsx @@ -73,7 +73,7 @@ export const Preview = ({ previewResponse, articleState, errors }) => {
{titleArea(previewResponse, articleState, errors)}
diff --git a/app/javascript/chat/__tests__/chat.test.jsx b/app/javascript/chat/__tests__/chat.test.jsx index be3fbe1ab..3c3533dad 100644 --- a/app/javascript/chat/__tests__/chat.test.jsx +++ b/app/javascript/chat/__tests__/chat.test.jsx @@ -202,16 +202,14 @@ describe('', () => { getByRole('dialog', { selector: '[aria-hidden="false"]', }); - getByText('Are you sure, you want to delete this message ?'); + getByText('Are you sure, you want to delete this message?'); getByText('Cancel', { selector: '[role="button"]' }); getByText('Delete', { selector: '[role="button"]' }); }); it('should collapse and expand chat channels properly', async () => { fetch.mockResponse(getMockResponse()); - const { queryByText } = render( - , - ); + const { queryByText } = render(); // // chat channels expect( diff --git a/app/javascript/chat/chat.jsx b/app/javascript/chat/chat.jsx index 1600a8d2c..f4abc47f1 100644 --- a/app/javascript/chat/chat.jsx +++ b/app/javascript/chat/chat.jsx @@ -1657,7 +1657,7 @@ export default class Chat extends Component { >
-

Are you sure, you want to delete this message ?

+

Are you sure, you want to delete this message?

<% end %> -
+
<%= @article.processed_html.html_safe %>
diff --git a/app/views/feedback_messages/_form.html.erb b/app/views/feedback_messages/_form.html.erb index 678e2308b..8c8356687 100644 --- a/app/views/feedback_messages/_form.html.erb +++ b/app/views/feedback_messages/_form.html.erb @@ -16,48 +16,60 @@ border-radius: 3px; } -<%= form_for feedback_message do |f| %> - - <%= f.hidden_field :feedback_type, value: "abuse-reports" %> -
-
    -
  • - <%= f.radio_button :category, "rude or vulgar", required: "required" %> - <%= label_tag(:feedback_message_category_rude_or_vulgar, "Rude or vulgar") %> -
    • -
  • - <%= f.radio_button :category, "harassment" %> - <%= label_tag(:feedback_message_category_harassment, "Harassment or hate speech") %> -
    • -
  • - <%= f.radio_button :category, "spam" %> - <%= label_tag(:feedback_message_category_spam, "Spam or copyright issue") %> -
    • -
  • - <%= f.radio_button :category, "listings" %> - <%= label_tag(:feedback_message_category_listings, "Inappropriate listings message/category") %> -
    • -
  • - <%= f.radio_button :category, "other" %> - <%= label_tag(:feedback_message_category_other, "Other") %> -
    • -
- Reported URL: - <%= f.text_field :reported_url, class: "reportedurlfield", value: feedback_message.reported_url, style: "width:100%;font-size: 18px; border-radius:3px;", required: true %> -

- <%= f.label :message %>: - <%= f.text_area :message, class: "messagefield", placeholder: "Please provide any additional information or context that will help us understand and handle the situation.", value: @previous_message %> -

-
-
-
-
- <% if flash[:notice] %> -
- <%= flash[:notice] %> -
- <% end %> - <%= recaptcha_tags site_key: ApplicationConfig["RECAPTCHA_SITE"] %> - + +<% if flash[:notice] %> +
+ <%= flash[:notice] %>
<% end %> + +<%= form_for(feedback_message, html: { class: "overwrite-article-styling grid gap-4 m:gap-6" }) do |f| %> + + <%= f.hidden_field :feedback_type, value: "abuse-reports" %> + +
+
+ <%= f.radio_button :category, "rude or vulgar", required: "required", class: "crayons-radio" %> + <%= label_tag(:feedback_message_category_rude_or_vulgar, "Rude or vulgar", class: "crayons-field__label") %> +
+ +
+ <%= f.radio_button :category, "harassment", class: "crayons-radio" %> + <%= label_tag(:feedback_message_category_harassment, "Harassment or hate speech", class: "crayons-field__label") %> +
+ +
+ <%= f.radio_button :category, "spam", class: "crayons-radio" %> + <%= label_tag(:feedback_message_category_spam, "Spam or copyright issue", class: "crayons-field__label") %> +
+ +
+ <%= f.radio_button :category, "listings", class: "crayons-radio" %> + <%= label_tag(:feedback_message_category_listings, "Inappropriate listings message/category", class: "crayons-field__label") %> +
+ +
+ <%= f.radio_button :category, "other", class: "crayons-radio" %> + <%= label_tag(:feedback_message_category_other, "Other", class: "crayons-field__label") %> +
+
+ +
+ + <%= f.text_field :reported_url, value: feedback_message.reported_url, class: "crayons-textfield", required: true %> +
+ +
+ + <%= f.text_area :message, class: "crayons-textfield", placeholder: "...", value: @previous_message %> +
+ +
+ <%= recaptcha_tags site_key: ApplicationConfig["RECAPTCHA_SITE"] %> +
+ +
+<% end %> diff --git a/app/views/pages/_editor_frontmatter_help.html.erb b/app/views/pages/_editor_frontmatter_help.html.erb index dd078cb79..f0c4f30ca 100644 --- a/app/views/pages/_editor_frontmatter_help.html.erb +++ b/app/views/pages/_editor_frontmatter_help.html.erb @@ -1,29 +1,27 @@
-
-
-
-

We have two editor versions. If you'd prefer to edit title and tags etc. as separate fields, switch to the "rich + markdown" option in Settings » UX. Otherwise, continue...

-
- -
    -
  • This editor is a markdown editor that uses Jekyll front matter.
    • -
  • Most of the time, you can write inline HTML directly into your posts.
    • -
  • We support native Liquid tags and created some fun custom ones, too! Trying embedding a Tweet or GitHub issue in your post.
    • -
  • Links to unpublished posts are shareable for feedback/review.
    • -
  • When you're ready to publish, set the published variable to true.
    • -
- -

Front Matter

-

Custom variables set for each post, located between the triple-dashed lines in your editor. Here is a list of possibilities:

-
    -
  • title: the title of your article
    • -
  • published: boolean that determines whether or not your article is published
    • -
  • description: description area in Twitter cards and open graph cards
    • -
  • tags: max of four tags, needs to be comma-separated
    • -
  • canonical_url: link for the canonical version of the content
    • -
  • cover_image: cover image for post, accepts a URL.
    The best size is 1000 x 420.
    • -
  • series: post series name.
    • -
+
+
+

We have two editor versions. If you'd prefer to edit title and tags etc. as separate fields, switch to the "rich + markdown" option in Settings » UX. Otherwise, continue...

+ +
    +
  • This editor is a markdown editor that uses Jekyll front matter.
    • +
  • Most of the time, you can write inline HTML directly into your posts.
    • +
  • We support native Liquid tags and created some fun custom ones, too! Trying embedding a Tweet or GitHub issue in your post.
    • +
  • Links to unpublished posts are shareable for feedback/review.
    • +
  • When you're ready to publish, set the published variable to true.
    • +
+ +

Front Matter

+

Custom variables set for each post, located between the triple-dashed lines in your editor. Here is a list of possibilities:

+
    +
  • title: the title of your article
    • +
  • published: boolean that determines whether or not your article is published
    • +
  • description: description area in Twitter cards and open graph cards
    • +
  • tags: max of four tags, needs to be comma-separated
    • +
  • canonical_url: link for the canonical version of the content
    • +
  • cover_image: cover image for post, accepts a URL.
    The best size is 1000 x 420.
    • +
  • series: post series name.
    • +
diff --git a/app/views/pages/_editor_liquid_help.html.erb b/app/views/pages/_editor_liquid_help.html.erb index a450a8042..4fae23ec9 100644 --- a/app/views/pages/_editor_liquid_help.html.erb +++ b/app/views/pages/_editor_liquid_help.html.erb @@ -1,292 +1,290 @@
-
-
-

We support native Liquid tags in our editor, but have created our own custom tags listed below:

-

<%= community_name %> Article/Post Embed

-

All you need is the full link of the article:

- {% link https://dev.to/kazz/boost-your-productivity-using-markdown-1be %} -

You can also use the slug like this:

- {% link kazz/boost-your-productivity-using-markdown-1be %} -

You can also use the alias post instead of link like this:

- {% post https://dev.to/kazz/boost-your-productivity-using-markdown-1be %} -

or this:

- {% post kazz/boost-your-productivity-using-markdown-1be %} -

<%= community_name %> User Embed

-

All you need is the <%= community_name %> username:

- {% user jess %} -

<%= community_name %> Tag Embed

-

All you need is the tag name:

- {% tag git %} -

<%= community_name %> Comment Embed

-

All you need is the - ID at the end of a comment URL. To get the comment link, click either the timestamp or the menu button in the top right corner on a comment and then click "Permalink". Here's an example: -

- {% devcomment 2d1a %} -

<%= community_name %> Podcast Episode Embed

-

All you need is the full link of the podcast episode:

- {% podcast https://dev.to/basecspodcast/s2e2--queues-irl %} -

<%= community_name %> Listing Embed

-

All you need is the full link of the listing:

- {% listing https://dev.to/listings/collabs/dev-is-open-source-823 %} -

You can also use the category and slug like this:

- {% listing collabs/dev-is-open-source-823 %} -

Note: Expired listings will raise an error. Make sure the listing is published or recently bumped.

-

Twitter Embed

-

Using the Twitter Liquid tag will allow the tweet to pre-render from the server, providing your reader with a better experience. All you need is the tweet - id from the url.

- {% twitter 834439977220112384 %} -

Glitch embed

-

All you need is the Glitch project slug

- {% glitch earthy-course %} -

There are several - optional attributes you can use in your tag, just add them after the id, separated by spaces. -

-
    -
  • app – Shows the app preview without the code.
    - {% glitch earthy-course app %} -
    • -
  • code – Shows the code without the app preview.
    - {% glitch earthy-course code %}
    • -
  • preview-first – Swap panes: Show the app preview on the left and the code on the right.
    - {% glitch earthy-course preview-first %}
    • -
  • no-attribution – Hides the avatar of the creator(s).
    - {% glitch earthy-course no-attribution %}
    • -
  • no-files – Hides the file browser.
    - {% glitch earthy-course no-files %}
    • -
  • file – Lets you choose which file to display in the code panel. Defaults to index.html.
    - {% glitch earthy-course file=script.js %}
    • -
-

GitHub Repo Embed

-

All you need is the GitHub username and repo:

- {% github thepracticaldev/dev.to %} -
-
no-readme
-
- You can add a no-readme option to your GitHub tag to hide the readme file from the preview.
- {% github thepracticaldev/dev.to no-readme %} -
-
-

GitHub Issue, Pull request or Comment Embed

-

All you need is the GitHub issue, PR or comment URL:

- {% github https://github.com/thepracticaldev/dev.to/issues/9 %} -

GitHub Gist Embed

-

All you need is the gist link:

- - {% gist https://gist.github.com/CristinaSolana/1885435 %} - -
-
Single File Embed
-
-

You can choose to embed a single gist file.
- {% gist https://gist.github.com/CristinaSolana/1885435 file=gistfile1.md %}

-
-
Specific Version Embed
-
-

You can choose to embed a specific version of a gist file. All you need - the link and the commit hash for that specific version.
- The format is {% gist [gist-link]/[commit-hash] %}
- e.g.
- {% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 %}

-
-
Specific Version File Embed
-
-

You can choose to embed a specific version of a gist file. All you need - the link, the filename and the commit hash for that specific version .
- The format is {% gist [gist-link]/[commit-hash] file=[filename] %}
- e.g.
- - {% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 file=Images.tmpl %} -

-
-
-

GitPitch Embed

-

All you need is the GitPitch link:

- - {% gitpitch https://gitpitch.com/gitpitch/in-60-seconds %} - -

Video Embed

-

All you need is the id from the URL.

-
    -
  • YouTube: {% youtube dQw4w9WgXcQ %}
    • -
  • Vimeo: {% vimeo 193110695 %}
    • -
-

Medium Embed

-

Just enter the full URL of the Medium article you are trying to embed.

- {% medium https://medium.com/s/story/boba-science-how-can-i-drink-a-bubble-tea-to-ensure-that-i-dont-finish-the-tea-before-the-bobas-7fc5fd0e442d %} -

SlideShare Embed

-

All you need is the SlideShare key:

- {% slideshare rdOzN9kr1yK5eE %} -

CodePen Embed

-

All you need is the full CodePen link, ending in the pen ID code, as follows:

- {% codepen https://codepen.io/twhite96/pen/XKqrJX %} -
-
default-tab
-
- Add default-tab parameter to your CodePen embed tag. Default to result
- {% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result %} -
-
-

Kotlin Playground

-

To create a runnable kotlin snippet, create a Kotlin Snippet at https://play.kotlinlang.org

-

Go to Share dialog and copy the full link from the Medium tab. Use it as follows:

- {% kotlin https://pl.kotl.in/owreUFFUG?theme=darcula&from=3&to=6&readOnly=true %} -

RunKit Embed

-

Put executable code within a runkit liquid block, as follows:

- 
{% runkit
// hidden setup JavaScript code goes in this preamble area
const hiddenVar = 42
%}
// visible, reader-editable JavaScript code goes here
console.log(hiddenVar)
{% endrunkit %}
+
+

We support native Liquid tags in our editor, but have created our own custom tags listed below:

+

<%= community_name %> Article/Post Embed

+

All you need is the full link of the article:

+ {% link https://dev.to/kazz/boost-your-productivity-using-markdown-1be %} +

You can also use the slug like this:

+ {% link kazz/boost-your-productivity-using-markdown-1be %} +

You can also use the alias post instead of link like this:

+ {% post https://dev.to/kazz/boost-your-productivity-using-markdown-1be %} +

or this:

+ {% post kazz/boost-your-productivity-using-markdown-1be %} +

<%= community_name %> User Embed

+

All you need is the <%= community_name %> username:

+ {% user jess %} +

<%= community_name %> Tag Embed

+

All you need is the tag name:

+ {% tag git %} +

<%= community_name %> Comment Embed

+

All you need is the + ID at the end of a comment URL. To get the comment link, click either the timestamp or the menu button in the top right corner on a comment and then click "Permalink". Here's an example: +

+ {% devcomment 2d1a %} +

<%= community_name %> Podcast Episode Embed

+

All you need is the full link of the podcast episode:

+ {% podcast https://dev.to/basecspodcast/s2e2--queues-irl %} +

<%= community_name %> Listing Embed

+

All you need is the full link of the listing:

+ {% listing https://dev.to/listings/collabs/dev-is-open-source-823 %} +

You can also use the category and slug like this:

+ {% listing collabs/dev-is-open-source-823 %} +

Note: Expired listings will raise an error. Make sure the listing is published or recently bumped.

+

Twitter Embed

+

Using the Twitter Liquid tag will allow the tweet to pre-render from the server, providing your reader with a better experience. All you need is the tweet + id from the url.

+ {% twitter 834439977220112384 %} +

Glitch embed

+

All you need is the Glitch project slug

+ {% glitch earthy-course %} +

There are several + optional attributes you can use in your tag, just add them after the id, separated by spaces. +

+
    +
  • app – Shows the app preview without the code.
    + {% glitch earthy-course app %} +
    • +
  • code – Shows the code without the app preview.
    + {% glitch earthy-course code %}
    • +
  • preview-first – Swap panes: Show the app preview on the left and the code on the right.
    + {% glitch earthy-course preview-first %}
    • +
  • no-attribution – Hides the avatar of the creator(s).
    + {% glitch earthy-course no-attribution %}
    • +
  • no-files – Hides the file browser.
    + {% glitch earthy-course no-files %}
    • +
  • file – Lets you choose which file to display in the code panel. Defaults to index.html.
    + {% glitch earthy-course file=script.js %}
    • +
+

GitHub Repo Embed

+

All you need is the GitHub username and repo:

+ {% github thepracticaldev/dev.to %} +
+
no-readme
+
+ You can add a no-readme option to your GitHub tag to hide the readme file from the preview.
+ {% github thepracticaldev/dev.to no-readme %} +
+
+

GitHub Issue, Pull request or Comment Embed

+

All you need is the GitHub issue, PR or comment URL:

+ {% github https://github.com/thepracticaldev/dev.to/issues/9 %} +

GitHub Gist Embed

+

All you need is the gist link:

+ + {% gist https://gist.github.com/CristinaSolana/1885435 %} + +
+
Single File Embed
+
+

You can choose to embed a single gist file.
+ {% gist https://gist.github.com/CristinaSolana/1885435 file=gistfile1.md %}

+
+
Specific Version Embed
+
+

You can choose to embed a specific version of a gist file. All you need + the link and the commit hash for that specific version.
+ The format is {% gist [gist-link]/[commit-hash] %}
+ e.g.
+ {% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 %}

+
+
Specific Version File Embed
+
+

You can choose to embed a specific version of a gist file. All you need + the link, the filename and the commit hash for that specific version .
+ The format is {% gist [gist-link]/[commit-hash] file=[filename] %}
+ e.g.
+ + {% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 file=Images.tmpl %} +

+
+
+

GitPitch Embed

+

All you need is the GitPitch link:

+ + {% gitpitch https://gitpitch.com/gitpitch/in-60-seconds %} + +

Video Embed

+

All you need is the id from the URL.

+
    +
  • YouTube: {% youtube dQw4w9WgXcQ %}
    • +
  • Vimeo: {% vimeo 193110695 %}
    • +
+

Medium Embed

+

Just enter the full URL of the Medium article you are trying to embed.

+ {% medium https://medium.com/s/story/boba-science-how-can-i-drink-a-bubble-tea-to-ensure-that-i-dont-finish-the-tea-before-the-bobas-7fc5fd0e442d %} +

SlideShare Embed

+

All you need is the SlideShare key:

+ {% slideshare rdOzN9kr1yK5eE %} +

CodePen Embed

+

All you need is the full CodePen link, ending in the pen ID code, as follows:

+ {% codepen https://codepen.io/twhite96/pen/XKqrJX %} +
+
default-tab
+
+ Add default-tab parameter to your CodePen embed tag. Default to result
+ {% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result %} +
+
+

Kotlin Playground

+

To create a runnable kotlin snippet, create a Kotlin Snippet at https://play.kotlinlang.org

+

Go to Share dialog and copy the full link from the Medium tab. Use it as follows:

+ {% kotlin https://pl.kotl.in/owreUFFUG?theme=darcula&from=3&to=6&readOnly=true %} +

RunKit Embed

+

Put executable code within a runkit liquid block, as follows:

+ 
{% runkit
// hidden setup JavaScript code goes in this preamble area
const hiddenVar = 42
%}
// visible, reader-editable JavaScript code goes here
console.log(hiddenVar)
{% endrunkit %}
-

KaTeX Embed

-

Place your mathematical expression within a KaTeX liquid block, as follows:

- 
{% katex %}
 c = \pm\sqrt{a^2 + b^2}
{% endkatex %}
-

To render KaTeX inline add the "inline" option:

- 
{% katex inline %}
 c = \pm\sqrt{a^2 + b^2}
{% endkatex %}
+

KaTeX Embed

+

Place your mathematical expression within a KaTeX liquid block, as follows:

+ 
{% katex %}
 c = \pm\sqrt{a^2 + b^2}
{% endkatex %}
+

To render KaTeX inline add the "inline" option:

+ 
{% katex inline %}
 c = \pm\sqrt{a^2 + b^2}
{% endkatex %}
-

Stackblitz Embed

-

All you need is the ID of the Stackblitz:

- {% stackblitz ball-demo %} -
-
Default view
-
- You can change the default view, the options are both, preview, editor. Defaults to - both
- {% stackblitz ball-demo view=preview %} -
-
Default file
-
- You can change the default file you want your embed to point to
- {% stackblitz ball-demo file=style.css %} -
-
-

CodeSandbox Embed

-

All you need is the ID of the Sandbox:

- {% codesandbox ppxnl191zx %} -

Of CodeSandbox's many - optional attributes, the following are supported by using them in your tag, just add them after the id, separated by spaces. -

-
-
initialpath
-
- Which url to initially load in address bar.
- {% codesandbox ppxnl191zx initialpath=/initial/load/path %} -
-
module
-
- Which module to open by default.
- {% codesandbox ppxnl191zx module=/path/to/module %} -
-
runonclick
-
- Delays when code is ran if 1
- {% codesandbox ppxnl191zx runonclick=1 %} -
-
-

JSFiddle Embed

-

All you need is the full JSFiddle link, ending in the fiddle ID code, as follows:

- {% jsfiddle https://jsfiddle.net/link2twenty/v2kx9jcd %} -
-
Custom tabs
-
- You can add a custom tab order to you JSFiddle embed tag. Defaults to js,html,css,result
- {% jsfiddle https://jsfiddle.net/webdevem/Q8KVC result,html,css %} -
-
+

Stackblitz Embed

+

All you need is the ID of the Stackblitz:

+ {% stackblitz ball-demo %} +
+
Default view
+
+ You can change the default view, the options are both, preview, editor. Defaults to + both
+ {% stackblitz ball-demo view=preview %} +
+
Default file
+
+ You can change the default file you want your embed to point to
+ {% stackblitz ball-demo file=style.css %} +
+
+

CodeSandbox Embed

+

All you need is the ID of the Sandbox:

+ {% codesandbox ppxnl191zx %} +

Of CodeSandbox's many + optional attributes, the following are supported by using them in your tag, just add them after the id, separated by spaces. +

+
+
initialpath
+
+ Which url to initially load in address bar.
+ {% codesandbox ppxnl191zx initialpath=/initial/load/path %} +
+
module
+
+ Which module to open by default.
+ {% codesandbox ppxnl191zx module=/path/to/module %} +
+
runonclick
+
+ Delays when code is ran if 1
+ {% codesandbox ppxnl191zx runonclick=1 %} +
+
+

JSFiddle Embed

+

All you need is the full JSFiddle link, ending in the fiddle ID code, as follows:

+ {% jsfiddle https://jsfiddle.net/link2twenty/v2kx9jcd %} +
+
Custom tabs
+
+ You can add a custom tab order to you JSFiddle embed tag. Defaults to js,html,css,result
+ {% jsfiddle https://jsfiddle.net/webdevem/Q8KVC result,html,css %} +
+
-

JSitor Liquid Tag

-

- To use JSitor liquid tag you can use the JSitor full link, with or without the parameters -

- {% jsitor https://jsitor.com/embed/B7FQ5tHbY %} -
- {% jsitor https://jsitor.com/embed/B7FQ5tHbY?html&js&css&result&light %} -

- Other options to use JSitor liquid tag is just by its ID, you can add it with or without the parameters -

- {% jsitor B7FQ5tHbY %} -
- {% jsitor B7FQ5tHbY?html&js&css&result&light %} +

JSitor Liquid Tag

+

+ To use JSitor liquid tag you can use the JSitor full link, with or without the parameters +

+ {% jsitor https://jsitor.com/embed/B7FQ5tHbY %} +
+ {% jsitor https://jsitor.com/embed/B7FQ5tHbY?html&js&css&result&light %} +

+ Other options to use JSitor liquid tag is just by its ID, you can add it with or without the parameters +

+ {% jsitor B7FQ5tHbY %} +
+ {% jsitor B7FQ5tHbY?html&js&css&result&light %} -

repl.it Embed

-

All you need is the URL after the domain name:

- {% replit @WigWog/PositiveFineOpensource %} -

Stackery Embed

-

Visualize your AWS Serverless Application Model templates with Stackery's visualizer embed

-

All you need is the repository owner, repository name, and branch that you would like visualized

- {% stackery deeheber lambda-layer-example master %} -
-

The repository must be a public GitHub repository and have a valid AWS SAM template in the project root titled template.yaml

-

Next Tech Embed

-

All you need is the share URL for your sandbox. You can get the share URL by clicking - the "Share" button in the top right when the sandbox is open.

-

Share Replit sandbox

- {% nexttech https://nt.dev/s/6ba1fffbd09e %} -

Instagram Embed

-

All you need is the Instagram post id from the URL:

- {% instagram BXgGcAUjM39 %} -

Speakerdeck Tag

-

All you need is the data-id code from the embed link:

- 
# Given this embed link:
<script async class="speakerdeck-embed"
    data-id="7e9f8c0fa0c949bd8025457181913fd0"
    data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
- 
{% speakerdeck 7e9f8c0fa0c949bd8025457181913fd0 %}
-

Soundcloud Embed

-

Just enter the full URL of the Soundcloud track you are trying to embed.

- {% soundcloud https://soundcloud.com/user-261265215/dev-to-review-episode-1 %} -

Spotify Embed

-

- Enter the Spotify URI of the Spotify track / playlist / - album / artist / podcast episode you are trying to embed. -

- 
{% spotify spotify:episode:5V4XZWqZQJvbddd31n56mf %}
-

Blogcast Tag

-

All you need is the article id code from the embed code:

- 
{% blogcast 1234 %}
-

Parler Tag

-

Enter the full url of the Parler.io audio file you want to embed.

- 
{% parler https://www.parler.io/audio/73240183203/d53cff009eac2ab1bc9dd8821a638823c39cbcea.7dd28611-b7fc-4cf8-9977-b6e3aaf644a1.mp3 %}
-

Stack Exchange / Stack Overflow Tag

-

- You'll need the question or answer's ID code, and the site. When using {% stackoverflow %} as the tag, the site will default to Stack Overflow. - For example: -
- https://stackoverflow.com/questions/24789130/colors-in-irb-rails-console -

    -
  • The question ID is: 24789130
    • -
- 
{% stackoverflow 24789130 %}
-

-

- For other Stack Exchange network sites, you'll need to provide the site's name and use {% stackexchange %} as the tag. For example: -
- https://diy.stackexchange.com/questions/169988/base-for-refrigerator-wine-shelf -

    -
  • The question ID is: 169988
    • -
  • The site is diy
    • -
- 
{% stackexchange 169988 diy %}
-

-

- For answers, you can get the answer's ID code by from the answer's "Share" link. For example: +

repl.it Embed

+

All you need is the URL after the domain name:

+ {% replit @WigWog/PositiveFineOpensource %} +

Stackery Embed

+

Visualize your AWS Serverless Application Model templates with Stackery's visualizer embed

+

All you need is the repository owner, repository name, and branch that you would like visualized

+ {% stackery deeheber lambda-layer-example master %} +
+

The repository must be a public GitHub repository and have a valid AWS SAM template in the project root titled template.yaml

+

Next Tech Embed

+

All you need is the share URL for your sandbox. You can get the share URL by clicking + the "Share" button in the top right when the sandbox is open.

+

Share Replit sandbox

+ {% nexttech https://nt.dev/s/6ba1fffbd09e %} +

Instagram Embed

+

All you need is the Instagram post id from the URL:

+ {% instagram BXgGcAUjM39 %} +

Speakerdeck Tag

+

All you need is the data-id code from the embed link:

+ 
# Given this embed link:
<script async class="speakerdeck-embed"
    data-id="7e9f8c0fa0c949bd8025457181913fd0"
    data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
+ 
{% speakerdeck 7e9f8c0fa0c949bd8025457181913fd0 %}
+

Soundcloud Embed

+

Just enter the full URL of the Soundcloud track you are trying to embed.

+ {% soundcloud https://soundcloud.com/user-261265215/dev-to-review-episode-1 %} +

Spotify Embed

+

+ Enter the Spotify URI of the Spotify track / playlist / + album / artist / podcast episode you are trying to embed. +

+ 
{% spotify spotify:episode:5V4XZWqZQJvbddd31n56mf %}
+

Blogcast Tag

+

All you need is the article id code from the embed code:

+ 
{% blogcast 1234 %}
+

Parler Tag

+

Enter the full url of the Parler.io audio file you want to embed.

+ 
{% parler https://www.parler.io/audio/73240183203/d53cff009eac2ab1bc9dd8821a638823c39cbcea.7dd28611-b7fc-4cf8-9977-b6e3aaf644a1.mp3 %}
+

Stack Exchange / Stack Overflow Tag

+

+ You'll need the question or answer's ID code, and the site. When using {% stackoverflow %} as the tag, the site will default to Stack Overflow. + For example:
- https://diy.stackexchange.com/a/170185 + https://stackoverflow.com/questions/24789130/colors-in-irb-rails-console

    -
  • The answer ID is: 170185
    • -
  • The site is diy
    • +
  • The question ID is: 24789130
- 
{% stackexchange 170185 diy %}
-

-

Wikipedia Embed

-

Enter the full URL of the Wikipedia article you want to embed, with or without the anchor.

-

- {% wikipedia https://en.wikipedia.org/wiki/Wikipedia %} -
- {% wikipedia https://en.wikipedia.org/wiki/Wikipedia#Diversity %} -

-

Asciinema Embed

-

All you need is the Asciinema id:

- {% asciinema 239367 %} -

Parsing Liquid Tags as a Code Example

-

To parse Liquid tags as code, simply wrap it with a single backtick or triple backticks.

-

`{% mytag %}{{ site.SOMETHING }}{% endmytag %}`

-

One specific edge case is with using the raw tag. To properly escape it, use this format: -

-

`{% raw %}{{site.SOMETHING }} {% ``endraw`` %}`

-
+ 
{% stackoverflow 24789130 %}
+

+

+ For other Stack Exchange network sites, you'll need to provide the site's name and use {% stackexchange %} as the tag. For example: +
+ https://diy.stackexchange.com/questions/169988/base-for-refrigerator-wine-shelf +

    +
  • The question ID is: 169988
    • +
  • The site is diy
    • +
+ 
{% stackexchange 169988 diy %}
+

+

+ For answers, you can get the answer's ID code by from the answer's "Share" link. For example: +
+ https://diy.stackexchange.com/a/170185 +

    +
  • The answer ID is: 170185
    • +
  • The site is diy
    • +
+ 
{% stackexchange 170185 diy %}
+

+

Wikipedia Embed

+

Enter the full URL of the Wikipedia article you want to embed, with or without the anchor.

+

+ {% wikipedia https://en.wikipedia.org/wiki/Wikipedia %} +
+ {% wikipedia https://en.wikipedia.org/wiki/Wikipedia#Diversity %} +

+

Asciinema Embed

+

All you need is the Asciinema id:

+ {% asciinema 239367 %} +

Parsing Liquid Tags as a Code Example

+

To parse Liquid tags as code, simply wrap it with a single backtick or triple backticks.

+

`{% mytag %}{{ site.SOMETHING }}{% endmytag %}`

+

One specific edge case is with using the raw tag. To properly escape it, use this format: +

+

`{% raw %}{{site.SOMETHING }} {% ``endraw`` %}`

diff --git a/app/views/pages/_editor_markdown_help.html.erb b/app/views/pages/_editor_markdown_help.html.erb index bb41a4cb4..a76968f04 100644 --- a/app/views/pages/_editor_markdown_help.html.erb +++ b/app/views/pages/_editor_markdown_help.html.erb @@ -1,59 +1,57 @@
-
-
-

Below are some examples of commonly used markdown syntax. If you want to dive deeper, check out - this cheat sheet. -

+
+

Below are some examples of commonly used markdown syntax. If you want to dive deeper, check out + this cheat sheet. +

-

Bold & Italic

-

Italics: *asterisks* or _underscores_

-

Bold: **double asterisks** or __double underscores__

+

Bold & Italic

+

Italics: *asterisks* or _underscores_

+

Bold: **double asterisks** or __double underscores__

-

Links

-

I'm an inline link: [I'm an inline link](put-link-here)

-

Anchored links (For things like a Table of Contents)

- 
-        ## Table Of Contents
-          * [Chapter 1](#chapter-1)
-          * [Chapter 2](#chapter-2)
+    
Links

+    
I'm an inline link: [I'm an inline link](put-link-here)

+    
Anchored links (For things like a Table of Contents)

+    
+      ## Table Of Contents
+        * [Chapter 1](#chapter-1)
+        * [Chapter 2](#chapter-2)
 
-        ### Chapter 1 <%= "" %>
-      

+      ### Chapter 1 <%= "" %>
+
-

Inline Images

-

- When adding GIFs to posts and comments, please note that there is a limit of 200 megapixels per frame/page. - example image, with sloan -

- 
![Alt text of image](put-link-to-image-here)
-
You can even add a caption using the HTML figcaption tag!
+

Inline Images

+

+ When adding GIFs to posts and comments, please note that there is a limit of 200 megapixels per frame/page. + example image, with sloan +

+ 
![Alt text of image](put-link-to-image-here)
+
You can even add a caption using the HTML figcaption tag!
-

Headers

-

Add a header to your post with this syntax:

- 
# One '#' for a h1 header
## Two '#'s for a h2 header
...
###### Six '#'s for a h6 header
-

One '#' for a h1 header

-

Two '#'s for a h2 header

-

Three '#'s for a h3 header

-

Four '#'s for a h4 header

-
Five '#'s for a h5 header
-
Six '#'s for a h6 header
+

Headers

+

Add a header to your post with this syntax:

+ 
# One '#' for a h1 header
## Two '#'s for a h2 header
...
###### Six '#'s for a h6 header
+

One '#' for a h1 header

+

Two '#'s for a h2 header

+

Three '#'s for a h3 header

+

Four '#'s for a h4 header

+
Five '#'s for a h5 header
+
Six '#'s for a h6 header
-

Author Notes/Comments

-

Add some hidden notes/comments to your article with this syntax:

- 
<!-- This won't show up in the content! -->
+

Author Notes/Comments

+

Add some hidden notes/comments to your article with this syntax:

+ 
<!-- This won't show up in the content! -->
-

Common Gotchas

-

- Lists are written just like any other Markdown editor. - If you're adding an image in between numbered list, though, be sure to tab the image, - otherwise it'll restart the number of the list. - Here's an example of what to do: - example image of writing lists with images in Markdown -

-

- Here's the Markdown cheatsheet again for reference. -

-
+

Common Gotchas

+

+ Lists are written just like any other Markdown editor. + If you're adding an image in between numbered list, though, be sure to tab the image, + otherwise it'll restart the number of the list. + Here's an example of what to do: + example image of writing lists with images in Markdown +

+

+ Here's the Markdown cheatsheet again for reference. +

diff --git a/app/views/pages/_placeholder.html.erb b/app/views/pages/_placeholder.html.erb index 3ac3eb1bf..8db2a3fd4 100644 --- a/app/views/pages/_placeholder.html.erb +++ b/app/views/pages/_placeholder.html.erb @@ -1,13 +1,9 @@ <% title "#{title} #{community_qualified_name}" %> -
-
-
-

<%= title %>

-
-
-

- The production <%= title %> page is a page generated at /internal/pages! This one is just a placeholder. -

+
+
+

<%= title %>

+ +

The production <%= title %> page is a page generated at /internal/pages! This one is just a placeholder.

diff --git a/app/views/pages/code_of_conduct.html.erb b/app/views/pages/code_of_conduct.html.erb index de166b0cd..45a5faf42 100644 --- a/app/views/pages/code_of_conduct.html.erb +++ b/app/views/pages/code_of_conduct.html.erb @@ -13,13 +13,9 @@ <% end %> -
- -
-
-

Code of Conduct

-
-
+
+
+

Code of Conduct

<%= render "coc_text" %>
diff --git a/app/views/pages/contact.html.erb b/app/views/pages/contact.html.erb index d61dc5c46..0b62d461b 100644 --- a/app/views/pages/contact.html.erb +++ b/app/views/pages/contact.html.erb @@ -19,13 +19,10 @@ <% end %> -
-
-

- Contact -

-
-
+
+
+

Contacts

+

<%= community_qualified_name %> would love to hear from you!

diff --git a/app/views/pages/information.html.erb b/app/views/pages/information.html.erb index d3eafbd9a..a8fd2b1bd 100644 --- a/app/views/pages/information.html.erb +++ b/app/views/pages/information.html.erb @@ -32,15 +32,11 @@ } -
-
-
-

- More information about <%= community_name %> 👋 -

-
-
-
    +
    +
    +

    More information about <%= community_name %> 👋

    + + -
    -
    diff --git a/app/views/pages/markdown_basics.html.erb b/app/views/pages/markdown_basics.html.erb index 0e051e8d1..e49293a8f 100644 --- a/app/views/pages/markdown_basics.html.erb +++ b/app/views/pages/markdown_basics.html.erb @@ -6,12 +6,9 @@ <% end %> -
    -
    -
    -

    Markdown Basics 🤓

    -
    -
    +
    +
    +

    Markdown Basics 🤓

    Below are some examples of commonly used markdown syntax. If you want to dive deeper, check out this cheat sheet. @@ -76,6 +73,5 @@ Here's the Markdown cheatsheet again for reference. Happy posting! 📝 -

    diff --git a/app/views/pages/privacy.html.erb b/app/views/pages/privacy.html.erb index 136f88154..179552ee7 100644 --- a/app/views/pages/privacy.html.erb +++ b/app/views/pages/privacy.html.erb @@ -19,14 +19,10 @@ <% end %> -
    -
    -
    -

    - Privacy Policy -

    -
    -
    +
    +
    +

    Privacy Policy

    +

    Effective May 25, 2018

    This policy covers Dev Community Inc. (“<%= community_name %>”).

    What information <%= community_name %> collects and Why

    diff --git a/app/views/pages/report_abuse.html.erb b/app/views/pages/report_abuse.html.erb index 92392c519..9cd979494 100644 --- a/app/views/pages/report_abuse.html.erb +++ b/app/views/pages/report_abuse.html.erb @@ -12,17 +12,17 @@ <% end %> -
    +
    +
    +

    Report Abuse

    -
    -
    -

    Report Abuse

    -
    -

    Thank you for reporting any abuse that violates our code of conduct or terms and conditions. We continue to try to make this environment a great one for everybody.

    - <%= render "feedback_messages/form", feedback_message: @feedback_message %> + +
    + <%= render "feedback_messages/form", feedback_message: @feedback_message %> +
    diff --git a/app/views/pages/rlyweb.html.erb b/app/views/pages/rlyweb.html.erb index 10286eb4e..5f82ccce3 100644 --- a/app/views/pages/rlyweb.html.erb +++ b/app/views/pages/rlyweb.html.erb @@ -1,6 +1,5 @@ <% title "O RLY Parody Book Generator" %> <%= stylesheet_link_tag "application", media: "all" %> - <%= javascript_include_tag "application" %> <%= content_for :page_meta do %> diff --git a/app/views/pages/show.html.erb b/app/views/pages/show.html.erb index 24d53cad8..eb67cb26f 100644 --- a/app/views/pages/show.html.erb +++ b/app/views/pages/show.html.erb @@ -19,14 +19,11 @@ <% end %> <% if @page.template == "contained" %> -
    -
    -
    -

    - <%= @page.title %> -

    -
    -
    + +
    +
    +

    <%= @page.title %>

    + <%= @page.processed_html.html_safe %>
    diff --git a/app/views/pages/sponsors.html.erb b/app/views/pages/sponsors.html.erb index 4e6b2d564..0c4370cb9 100644 --- a/app/views/pages/sponsors.html.erb +++ b/app/views/pages/sponsors.html.erb @@ -6,30 +6,19 @@ <% end %> -
    - -
    -
    -
    -
    -

    - THANK YOU -

    -

    for supporting our community

    +
    +
    +

    Thank you! ♥️

    +

    for supporting our community

    -

    +

    " alt="golden badge"> " alt="golden badge"> @@ -71,6 +60,8 @@ <% end %>

    -
    Interested in sponsoring <%= community_name %>? Check out our ">sponsorships page.
    +
    +

    Interested in sponsoring <%= community_name %>? Check out our ">sponsorships page.

    +
    diff --git a/app/views/pages/terms.html.erb b/app/views/pages/terms.html.erb index 10c463b13..1663c2302 100644 --- a/app/views/pages/terms.html.erb +++ b/app/views/pages/terms.html.erb @@ -19,14 +19,10 @@ <% end %> -
    -
    -
    -

    - Web Site Terms and Conditions of Use -

    -
    -
    +
    +
    +

    Web Site Terms and Conditions of Use

    + <%= render "terms_text" %>