[deploy] Add crayons to pages (#9175)
* flare tag line height * . * dropdown fix + actions bar fix * actions bar on mob * . * .
This commit is contained in:
ludwiczakpawel
GitHub
parent
0c92b3c433
commit
9ee54bfe45
22 changed files with 678 additions and 715 deletions
|
|
@ -71,8 +71,6 @@
|
|||
}
|
||||
|
||||
.flag-user-modal-body {
|
||||
padding: var(--su-6);
|
||||
|
||||
span {
|
||||
font-size: var(--fs-base);
|
||||
line-height: var(--lh-base);
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ export const Preview = ({ previewResponse, articleState, errors }) => {
|
|||
<article className="crayons-article">
|
||||
{titleArea(previewResponse, articleState, errors)}
|
||||
<div
|
||||
className="crayons-article__body"
|
||||
className="crayons-article__body text-styles"
|
||||
// eslint-disable-next-line react/no-danger
|
||||
dangerouslySetInnerHTML={{ __html: previewResponse.processed_html }}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -202,16 +202,14 @@ describe('<Chat />', () => {
|
|||
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(
|
||||
<Chat {...getRootData()} />,
|
||||
);
|
||||
const { queryByText } = render(<Chat {...getRootData()} />);
|
||||
|
||||
// // chat channels
|
||||
expect(
|
||||
|
|
|
|||
|
|
@ -1657,7 +1657,7 @@ export default class Chat extends Component {
|
|||
>
|
||||
<div className="crayons-modal__box">
|
||||
<div className="crayons-modal__box__body">
|
||||
<h3>Are you sure, you want to delete this message ?</h3>
|
||||
<h3>Are you sure, you want to delete this message?</h3>
|
||||
<div className="delete-actions__container">
|
||||
<div
|
||||
role="button"
|
||||
|
|
|
|||
|
|
@ -190,7 +190,7 @@
|
|||
position: :top %>
|
||||
<% end %>
|
||||
|
||||
<div class="crayons-article__body spec__body" data-article-id="<%= @article.id %>" id="article-body">
|
||||
<div class="crayons-article__body text-styles spec__body" data-article-id="<%= @article.id %>" id="article-body">
|
||||
<%= @article.processed_html.html_safe %>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,48 +16,60 @@
|
|||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
<%= form_for feedback_message do |f| %>
|
||||
<input name="utf8" type="hidden" value="✓" />
|
||||
<%= f.hidden_field :feedback_type, value: "abuse-reports" %>
|
||||
<div class="field">
|
||||
<ul style="list-style-type:none; margin-left:0px;">
|
||||
<li>
|
||||
<%= f.radio_button :category, "rude or vulgar", required: "required" %>
|
||||
<%= label_tag(:feedback_message_category_rude_or_vulgar, "Rude or vulgar") %>
|
||||
</li>
|
||||
<li>
|
||||
<%= f.radio_button :category, "harassment" %>
|
||||
<%= label_tag(:feedback_message_category_harassment, "Harassment or hate speech") %>
|
||||
</li>
|
||||
<li>
|
||||
<%= f.radio_button :category, "spam" %>
|
||||
<%= label_tag(:feedback_message_category_spam, "Spam or copyright issue") %>
|
||||
</li>
|
||||
<li>
|
||||
<%= f.radio_button :category, "listings" %>
|
||||
<%= label_tag(:feedback_message_category_listings, "Inappropriate listings message/category") %>
|
||||
</li>
|
||||
<li>
|
||||
<%= f.radio_button :category, "other" %>
|
||||
<%= label_tag(:feedback_message_category_other, "Other") %>
|
||||
</li>
|
||||
</ul>
|
||||
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 %>
|
||||
<p style="margin-bottom:0px;">
|
||||
<%= 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 %>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<% if flash[:notice] %>
|
||||
<div class="notice" id="notice">
|
||||
<%= flash[:notice] %>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= recaptcha_tags site_key: ApplicationConfig["RECAPTCHA_SITE"] %>
|
||||
<input type="submit" name="commit" value="Send Feedback" style="margin-top: 40px;" />
|
||||
|
||||
<% if flash[:notice] %>
|
||||
<div class="crayons-notice crayons-notice--danger mb-6">
|
||||
<%= flash[:notice] %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= form_for(feedback_message, html: { class: "overwrite-article-styling grid gap-4 m:gap-6" }) do |f| %>
|
||||
<input name="utf8" type="hidden" value="✓" />
|
||||
<%= f.hidden_field :feedback_type, value: "abuse-reports" %>
|
||||
|
||||
<div class="crayons-fields">
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
<%= 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") %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
<%= f.radio_button :category, "harassment", class: "crayons-radio" %>
|
||||
<%= label_tag(:feedback_message_category_harassment, "Harassment or hate speech", class: "crayons-field__label") %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
<%= f.radio_button :category, "spam", class: "crayons-radio" %>
|
||||
<%= label_tag(:feedback_message_category_spam, "Spam or copyright issue", class: "crayons-field__label") %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
<%= f.radio_button :category, "listings", class: "crayons-radio" %>
|
||||
<%= label_tag(:feedback_message_category_listings, "Inappropriate listings message/category", class: "crayons-field__label") %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field crayons-field--radio">
|
||||
<%= f.radio_button :category, "other", class: "crayons-radio" %>
|
||||
<%= label_tag(:feedback_message_category_other, "Other", class: "crayons-field__label") %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<label for="feedback_message_reported_url" class="crayons-field__label">Reported URL</label>
|
||||
<%= f.text_field :reported_url, value: feedback_message.reported_url, class: "crayons-textfield", required: true %>
|
||||
</div>
|
||||
|
||||
<div class="crayons-field">
|
||||
<label for="feedback_message_message">
|
||||
Message
|
||||
<p class="crayons-field__description m-0">Please provide any additional information or context that will help us understand and handle the situation.</p>
|
||||
</label>
|
||||
<%= f.text_area :message, class: "crayons-textfield", placeholder: "...", value: @previous_message %>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<%= recaptcha_tags site_key: ApplicationConfig["RECAPTCHA_SITE"] %>
|
||||
</div>
|
||||
|
||||
<div><button type="submit" name="commit" class="crayons-btn">Send Feedback</button></div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,27 @@
|
|||
<div id="editor-frontmatter-help">
|
||||
<div class="crayons-article">
|
||||
<div class="crayons-article__body">
|
||||
<div class="crayons-notice crayons-notice--info">
|
||||
<p><strong>We have two editor versions</strong>. If you'd prefer to edit title and tags etc. as separate fields, switch to the "rich + markdown" option in <a href="<%= user_settings_path(tab: :ux) %>">Settings » UX</a>. Otherwise, continue...</p>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li>This editor is a markdown editor that uses <a href="https://jekyllrb.com/docs/frontmatter">Jekyll front matter</a>.</li>
|
||||
<li>Most of the time, you can write inline HTML directly into your posts.</li>
|
||||
<li>We support native Liquid tags and created some fun custom ones, too! Trying embedding a Tweet or GitHub issue in your post.</li>
|
||||
<li>Links to unpublished posts are shareable for feedback/review.</li>
|
||||
<li>When you're ready to publish, set the published variable to <strong>true.</strong></li>
|
||||
</ul>
|
||||
|
||||
<h3>Front Matter</h3>
|
||||
<p>Custom variables set for each post, located between the triple-dashed lines in your editor. Here is a list of possibilities:</p>
|
||||
<ul>
|
||||
<li><strong>title:</strong> the title of your article</li>
|
||||
<li><strong>published:</strong> boolean that determines whether or not your article is published</li>
|
||||
<li><strong>description:</strong> description area in Twitter cards and open graph cards</li>
|
||||
<li><strong>tags:</strong> max of four tags, needs to be comma-separated</li>
|
||||
<li><strong>canonical_url:</strong> link for the canonical version of the content</li>
|
||||
<li><strong>cover_image:</strong> cover image for post, accepts a URL. <br>The best size is 1000 x 420.</li>
|
||||
<li><strong>series:</strong> post series name.</li>
|
||||
</ul>
|
||||
<div class="text-styles">
|
||||
<div class="crayons-notice crayons-notice--info">
|
||||
<p><strong>We have two editor versions</strong>. If you'd prefer to edit title and tags etc. as separate fields, switch to the "rich + markdown" option in <a href="<%= user_settings_path(tab: :ux) %>">Settings » UX</a>. Otherwise, continue...</p>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li>This editor is a markdown editor that uses <a href="https://jekyllrb.com/docs/frontmatter">Jekyll front matter</a>.</li>
|
||||
<li>Most of the time, you can write inline HTML directly into your posts.</li>
|
||||
<li>We support native Liquid tags and created some fun custom ones, too! Trying embedding a Tweet or GitHub issue in your post.</li>
|
||||
<li>Links to unpublished posts are shareable for feedback/review.</li>
|
||||
<li>When you're ready to publish, set the published variable to <strong>true.</strong></li>
|
||||
</ul>
|
||||
|
||||
<h3>Front Matter</h3>
|
||||
<p>Custom variables set for each post, located between the triple-dashed lines in your editor. Here is a list of possibilities:</p>
|
||||
<ul>
|
||||
<li><strong>title:</strong> the title of your article</li>
|
||||
<li><strong>published:</strong> boolean that determines whether or not your article is published</li>
|
||||
<li><strong>description:</strong> description area in Twitter cards and open graph cards</li>
|
||||
<li><strong>tags:</strong> max of four tags, needs to be comma-separated</li>
|
||||
<li><strong>canonical_url:</strong> link for the canonical version of the content</li>
|
||||
<li><strong>cover_image:</strong> cover image for post, accepts a URL. <br>The best size is 1000 x 420.</li>
|
||||
<li><strong>series:</strong> post series name.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,292 +1,290 @@
|
|||
<div id="editor-liquid-help">
|
||||
<div class="crayons-article">
|
||||
<div class="crayons-article__body">
|
||||
<p>We support native <a href="https://shopify.github.io/liquid" target="_blank" rel="noopener">Liquid tags</a> in our editor, but have created our own custom tags listed below:</p>
|
||||
<h3><%= community_name %> Article/Post Embed</h3>
|
||||
<p>All you need is the full link of the article:</p>
|
||||
<code>{% link https://dev.to/kazz/boost-your-productivity-using-markdown-1be %}</code>
|
||||
<p>You can also use the slug like this:</p>
|
||||
<code>{% link kazz/boost-your-productivity-using-markdown-1be %}</code>
|
||||
<p>You can also use the alias post instead of link like this:</p>
|
||||
<code>{% post https://dev.to/kazz/boost-your-productivity-using-markdown-1be %}</code>
|
||||
<p>or this:</p>
|
||||
<code>{% post kazz/boost-your-productivity-using-markdown-1be %}</code>
|
||||
<h3><%= community_name %> User Embed</h3>
|
||||
<p>All you need is the <%= community_name %> username:</p>
|
||||
<code>{% user jess %}</code>
|
||||
<h3><%= community_name %> Tag Embed</h3>
|
||||
<p>All you need is the tag name:</p>
|
||||
<code>{% tag git %}</code>
|
||||
<h3><%= community_name %> Comment Embed</h3>
|
||||
<p>All you need is the
|
||||
<code>ID</code> 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:
|
||||
</p>
|
||||
<code>{% devcomment 2d1a %}</code>
|
||||
<h3><%= community_name %> Podcast Episode Embed</h3>
|
||||
<p>All you need is the full link of the podcast episode:</p>
|
||||
<code>{% podcast https://dev.to/basecspodcast/s2e2--queues-irl %}</code>
|
||||
<h3><%= community_name %> Listing Embed</h3>
|
||||
<p>All you need is the full link of the listing:</p>
|
||||
<code>{% listing https://dev.to/listings/collabs/dev-is-open-source-823 %}</code>
|
||||
<p>You can also use the category and slug like this:</p>
|
||||
<code>{% listing collabs/dev-is-open-source-823 %}</code>
|
||||
<p>Note: Expired listings will raise an error. Make sure the listing is published or recently bumped.</p>
|
||||
<h3>Twitter Embed</h3>
|
||||
<p>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
|
||||
<code>id</code> from the url.</p>
|
||||
<code>{% twitter 834439977220112384 %}</code>
|
||||
<h3>Glitch embed</h3>
|
||||
<p>All you need is the Glitch project slug</p>
|
||||
<code>{% glitch earthy-course %}</code>
|
||||
<p>There are several
|
||||
<a href="https://glitch.com/help/how-can-i-customize-a-glitch-app-embed">optional attributes</a> you can use in your tag, just add them after the id, separated by spaces.
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>app</code> – Shows the app preview without the code.<br>
|
||||
<code>{% glitch earthy-course app %}</code>
|
||||
</li>
|
||||
<li><code>code</code> – Shows the code without the app preview.<br>
|
||||
<code>{% glitch earthy-course code %}</code></li>
|
||||
<li><code>preview-first</code> – Swap panes: Show the app preview on the left and the code on the right.<br>
|
||||
<code>{% glitch earthy-course preview-first %}</code></li>
|
||||
<li><code>no-attribution</code> – Hides the avatar of the creator(s).<br>
|
||||
<code>{% glitch earthy-course no-attribution %}</code></li>
|
||||
<li><code>no-files</code> – Hides the file browser.<br>
|
||||
<code>{% glitch earthy-course no-files %}</code></li>
|
||||
<li><code>file</code> – Lets you choose which file to display in the code panel. Defaults to index.html.<br>
|
||||
<code>{% glitch earthy-course file=script.js %}</code></li>
|
||||
</ul>
|
||||
<h3>GitHub Repo Embed</h3>
|
||||
<p>All you need is the GitHub username and repo:</p>
|
||||
<code>{% github thepracticaldev/dev.to %}</code>
|
||||
<dl>
|
||||
<dt><code>no-readme</code></dt>
|
||||
<dd>
|
||||
You can add a no-readme option to your GitHub tag to hide the readme file from the preview.<br>
|
||||
<code>{% github thepracticaldev/dev.to no-readme %}</code>
|
||||
</dd>
|
||||
</dl>
|
||||
<h3>GitHub Issue, Pull request or Comment Embed</h3>
|
||||
<p>All you need is the GitHub issue, PR or comment URL:</p>
|
||||
<code>{% github https://github.com/thepracticaldev/dev.to/issues/9 %}</code>
|
||||
<h3>GitHub Gist Embed</h3>
|
||||
<p>All you need is the gist link:</p>
|
||||
<code>
|
||||
{% gist https://gist.github.com/CristinaSolana/1885435 %}
|
||||
</code>
|
||||
<dl>
|
||||
<dt><code>Single File Embed</code></dt>
|
||||
<dd>
|
||||
<p>You can choose to embed a single gist file. <br>
|
||||
<code>{% gist https://gist.github.com/CristinaSolana/1885435 file=gistfile1.md %}</code></p>
|
||||
</dd>
|
||||
<dt><code>Specific Version Embed</code></dt>
|
||||
<dd>
|
||||
<p>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. <br>
|
||||
The format is <code>{% gist [gist-link]/[commit-hash] %}</code> <br>
|
||||
e.g. <br>
|
||||
<code>{% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 %}</code></p>
|
||||
</dd>
|
||||
<dt><code>Specific Version File Embed</code></dt>
|
||||
<dd>
|
||||
<p>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 . <br>
|
||||
The format is <code>{% gist [gist-link]/[commit-hash] file=[filename] %}</code> <br>
|
||||
e.g. <br>
|
||||
<code>
|
||||
{% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 file=Images.tmpl %}
|
||||
</code></p>
|
||||
</dd>
|
||||
</dl>
|
||||
<h3>GitPitch Embed</h3>
|
||||
<p>All you need is the GitPitch link:</p>
|
||||
<code>
|
||||
{% gitpitch https://gitpitch.com/gitpitch/in-60-seconds %}
|
||||
</code>
|
||||
<h3>Video Embed</h3>
|
||||
<p>All you need is the <code>id</code> from the URL.</p>
|
||||
<ul>
|
||||
<li><strong>YouTube:</strong> <code>{% youtube dQw4w9WgXcQ %}</code></li>
|
||||
<li><strong>Vimeo:</strong> <code>{% vimeo 193110695 %}</code></li>
|
||||
</ul>
|
||||
<h3>Medium Embed</h3>
|
||||
<p>Just enter the full URL of the Medium article you are trying to embed.</p>
|
||||
<code>{% 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 %}</code>
|
||||
<h3>SlideShare Embed</h3>
|
||||
<p>All you need is the SlideShare <code>key</code>:</p>
|
||||
<code>{% slideshare rdOzN9kr1yK5eE %}</code>
|
||||
<h3>CodePen Embed</h3>
|
||||
<p>All you need is the full CodePen <code>link</code>, ending in the pen ID code, as follows:</p>
|
||||
<code>{% codepen https://codepen.io/twhite96/pen/XKqrJX %}</code>
|
||||
<dl>
|
||||
<dt><code>default-tab</code></dt>
|
||||
<dd>
|
||||
Add default-tab parameter to your CodePen embed tag. Default to <i>result</i><br>
|
||||
<code>{% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result %}</code>
|
||||
</dd>
|
||||
</dl>
|
||||
<h3>Kotlin Playground</h3>
|
||||
<p>To create a runnable kotlin snippet, create a Kotlin Snippet at <a href="https://play.kotlinlang.org">https://play.kotlinlang.org</a></p>
|
||||
<p>Go to <code>Share</code> dialog and copy the full <code>link</code> from the <code>Medium</code> tab. Use it as follows:</p>
|
||||
<code>{% kotlin https://pl.kotl.in/owreUFFUG?theme=darcula&from=3&to=6&readOnly=true %}</code>
|
||||
<h3>RunKit Embed</h3>
|
||||
<p>Put executable code within a runkit liquid block, as follows:</p>
|
||||
<pre>{% runkit<br>// hidden setup JavaScript code goes in this preamble area<br>const hiddenVar = 42<br>%}<br>// visible, reader-editable JavaScript code goes here<br>console.log(hiddenVar)<br>{% endrunkit %}<br></pre>
|
||||
<div class="text-styles">
|
||||
<p>We support native <a href="https://shopify.github.io/liquid" target="_blank" rel="noopener">Liquid tags</a> in our editor, but have created our own custom tags listed below:</p>
|
||||
<h3><%= community_name %> Article/Post Embed</h3>
|
||||
<p>All you need is the full link of the article:</p>
|
||||
<code>{% link https://dev.to/kazz/boost-your-productivity-using-markdown-1be %}</code>
|
||||
<p>You can also use the slug like this:</p>
|
||||
<code>{% link kazz/boost-your-productivity-using-markdown-1be %}</code>
|
||||
<p>You can also use the alias post instead of link like this:</p>
|
||||
<code>{% post https://dev.to/kazz/boost-your-productivity-using-markdown-1be %}</code>
|
||||
<p>or this:</p>
|
||||
<code>{% post kazz/boost-your-productivity-using-markdown-1be %}</code>
|
||||
<h3><%= community_name %> User Embed</h3>
|
||||
<p>All you need is the <%= community_name %> username:</p>
|
||||
<code>{% user jess %}</code>
|
||||
<h3><%= community_name %> Tag Embed</h3>
|
||||
<p>All you need is the tag name:</p>
|
||||
<code>{% tag git %}</code>
|
||||
<h3><%= community_name %> Comment Embed</h3>
|
||||
<p>All you need is the
|
||||
<code>ID</code> 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:
|
||||
</p>
|
||||
<code>{% devcomment 2d1a %}</code>
|
||||
<h3><%= community_name %> Podcast Episode Embed</h3>
|
||||
<p>All you need is the full link of the podcast episode:</p>
|
||||
<code>{% podcast https://dev.to/basecspodcast/s2e2--queues-irl %}</code>
|
||||
<h3><%= community_name %> Listing Embed</h3>
|
||||
<p>All you need is the full link of the listing:</p>
|
||||
<code>{% listing https://dev.to/listings/collabs/dev-is-open-source-823 %}</code>
|
||||
<p>You can also use the category and slug like this:</p>
|
||||
<code>{% listing collabs/dev-is-open-source-823 %}</code>
|
||||
<p>Note: Expired listings will raise an error. Make sure the listing is published or recently bumped.</p>
|
||||
<h3>Twitter Embed</h3>
|
||||
<p>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
|
||||
<code>id</code> from the url.</p>
|
||||
<code>{% twitter 834439977220112384 %}</code>
|
||||
<h3>Glitch embed</h3>
|
||||
<p>All you need is the Glitch project slug</p>
|
||||
<code>{% glitch earthy-course %}</code>
|
||||
<p>There are several
|
||||
<a href="https://glitch.com/help/how-can-i-customize-a-glitch-app-embed">optional attributes</a> you can use in your tag, just add them after the id, separated by spaces.
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>app</code> – Shows the app preview without the code.<br>
|
||||
<code>{% glitch earthy-course app %}</code>
|
||||
</li>
|
||||
<li><code>code</code> – Shows the code without the app preview.<br>
|
||||
<code>{% glitch earthy-course code %}</code></li>
|
||||
<li><code>preview-first</code> – Swap panes: Show the app preview on the left and the code on the right.<br>
|
||||
<code>{% glitch earthy-course preview-first %}</code></li>
|
||||
<li><code>no-attribution</code> – Hides the avatar of the creator(s).<br>
|
||||
<code>{% glitch earthy-course no-attribution %}</code></li>
|
||||
<li><code>no-files</code> – Hides the file browser.<br>
|
||||
<code>{% glitch earthy-course no-files %}</code></li>
|
||||
<li><code>file</code> – Lets you choose which file to display in the code panel. Defaults to index.html.<br>
|
||||
<code>{% glitch earthy-course file=script.js %}</code></li>
|
||||
</ul>
|
||||
<h3>GitHub Repo Embed</h3>
|
||||
<p>All you need is the GitHub username and repo:</p>
|
||||
<code>{% github thepracticaldev/dev.to %}</code>
|
||||
<dl>
|
||||
<dt><code>no-readme</code></dt>
|
||||
<dd>
|
||||
You can add a no-readme option to your GitHub tag to hide the readme file from the preview.<br>
|
||||
<code>{% github thepracticaldev/dev.to no-readme %}</code>
|
||||
</dd>
|
||||
</dl>
|
||||
<h3>GitHub Issue, Pull request or Comment Embed</h3>
|
||||
<p>All you need is the GitHub issue, PR or comment URL:</p>
|
||||
<code>{% github https://github.com/thepracticaldev/dev.to/issues/9 %}</code>
|
||||
<h3>GitHub Gist Embed</h3>
|
||||
<p>All you need is the gist link:</p>
|
||||
<code>
|
||||
{% gist https://gist.github.com/CristinaSolana/1885435 %}
|
||||
</code>
|
||||
<dl>
|
||||
<dt><code>Single File Embed</code></dt>
|
||||
<dd>
|
||||
<p>You can choose to embed a single gist file. <br>
|
||||
<code>{% gist https://gist.github.com/CristinaSolana/1885435 file=gistfile1.md %}</code></p>
|
||||
</dd>
|
||||
<dt><code>Specific Version Embed</code></dt>
|
||||
<dd>
|
||||
<p>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. <br>
|
||||
The format is <code>{% gist [gist-link]/[commit-hash] %}</code> <br>
|
||||
e.g. <br>
|
||||
<code>{% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 %}</code></p>
|
||||
</dd>
|
||||
<dt><code>Specific Version File Embed</code></dt>
|
||||
<dd>
|
||||
<p>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 . <br>
|
||||
The format is <code>{% gist [gist-link]/[commit-hash] file=[filename] %}</code> <br>
|
||||
e.g. <br>
|
||||
<code>
|
||||
{% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 file=Images.tmpl %}
|
||||
</code></p>
|
||||
</dd>
|
||||
</dl>
|
||||
<h3>GitPitch Embed</h3>
|
||||
<p>All you need is the GitPitch link:</p>
|
||||
<code>
|
||||
{% gitpitch https://gitpitch.com/gitpitch/in-60-seconds %}
|
||||
</code>
|
||||
<h3>Video Embed</h3>
|
||||
<p>All you need is the <code>id</code> from the URL.</p>
|
||||
<ul>
|
||||
<li><strong>YouTube:</strong> <code>{% youtube dQw4w9WgXcQ %}</code></li>
|
||||
<li><strong>Vimeo:</strong> <code>{% vimeo 193110695 %}</code></li>
|
||||
</ul>
|
||||
<h3>Medium Embed</h3>
|
||||
<p>Just enter the full URL of the Medium article you are trying to embed.</p>
|
||||
<code>{% 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 %}</code>
|
||||
<h3>SlideShare Embed</h3>
|
||||
<p>All you need is the SlideShare <code>key</code>:</p>
|
||||
<code>{% slideshare rdOzN9kr1yK5eE %}</code>
|
||||
<h3>CodePen Embed</h3>
|
||||
<p>All you need is the full CodePen <code>link</code>, ending in the pen ID code, as follows:</p>
|
||||
<code>{% codepen https://codepen.io/twhite96/pen/XKqrJX %}</code>
|
||||
<dl>
|
||||
<dt><code>default-tab</code></dt>
|
||||
<dd>
|
||||
Add default-tab parameter to your CodePen embed tag. Default to <i>result</i><br>
|
||||
<code>{% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result %}</code>
|
||||
</dd>
|
||||
</dl>
|
||||
<h3>Kotlin Playground</h3>
|
||||
<p>To create a runnable kotlin snippet, create a Kotlin Snippet at <a href="https://play.kotlinlang.org">https://play.kotlinlang.org</a></p>
|
||||
<p>Go to <code>Share</code> dialog and copy the full <code>link</code> from the <code>Medium</code> tab. Use it as follows:</p>
|
||||
<code>{% kotlin https://pl.kotl.in/owreUFFUG?theme=darcula&from=3&to=6&readOnly=true %}</code>
|
||||
<h3>RunKit Embed</h3>
|
||||
<p>Put executable code within a runkit liquid block, as follows:</p>
|
||||
<pre>{% runkit<br>// hidden setup JavaScript code goes in this preamble area<br>const hiddenVar = 42<br>%}<br>// visible, reader-editable JavaScript code goes here<br>console.log(hiddenVar)<br>{% endrunkit %}<br></pre>
|
||||
|
||||
<h3>KaTeX Embed</h3>
|
||||
<p>Place your mathematical expression within a KaTeX liquid block, as follows:</p>
|
||||
<pre>{% katex %}<br> c = \pm\sqrt{a^2 + b^2}<br>{% endkatex %}<br></pre>
|
||||
<p>To render KaTeX inline add the "inline" option:</p>
|
||||
<pre>{% katex inline %}<br> c = \pm\sqrt{a^2 + b^2}<br>{% endkatex %}<br></pre>
|
||||
<h3>KaTeX Embed</h3>
|
||||
<p>Place your mathematical expression within a KaTeX liquid block, as follows:</p>
|
||||
<pre>{% katex %}<br> c = \pm\sqrt{a^2 + b^2}<br>{% endkatex %}<br></pre>
|
||||
<p>To render KaTeX inline add the "inline" option:</p>
|
||||
<pre>{% katex inline %}<br> c = \pm\sqrt{a^2 + b^2}<br>{% endkatex %}<br></pre>
|
||||
|
||||
<h3>Stackblitz Embed</h3>
|
||||
<p>All you need is the ID of the Stackblitz:</p>
|
||||
<code>{% stackblitz ball-demo %}</code>
|
||||
<dl>
|
||||
<dt><code>Default view</code></dt>
|
||||
<dd>
|
||||
You can change the default view, the options are <i>both</i>, <i>preview</i>, <i>editor</i>. Defaults to
|
||||
<i>both</i><br>
|
||||
<code>{% stackblitz ball-demo view=preview %}</code>
|
||||
</dd>
|
||||
<dt><code>Default file</code></dt>
|
||||
<dd>
|
||||
You can change the default file you want your embed to point to<br>
|
||||
<code>{% stackblitz ball-demo file=style.css %}</code>
|
||||
</dd>
|
||||
</dl>
|
||||
<h3>CodeSandbox Embed</h3>
|
||||
<p>All you need is the ID of the Sandbox:</p>
|
||||
<code>{% codesandbox ppxnl191zx %}</code>
|
||||
<p>Of CodeSandbox's many
|
||||
<a href="https://codesandbox.io/docs/embedding#embed-options">optional attributes</a>, the following are supported by using them in your tag, just add them after the id, separated by spaces.
|
||||
</p>
|
||||
<dl>
|
||||
<dt><code>initialpath</code></dt>
|
||||
<dd>
|
||||
Which url to initially load in address bar.<br>
|
||||
<code>{% codesandbox ppxnl191zx initialpath=/initial/load/path %}</code>
|
||||
</dd>
|
||||
<dt><code>module</code></dt>
|
||||
<dd>
|
||||
Which module to open by default.<br>
|
||||
<code>{% codesandbox ppxnl191zx module=/path/to/module %}</code>
|
||||
</dd>
|
||||
<dt><code>runonclick</code></dt>
|
||||
<dd>
|
||||
Delays when code is ran if <code>1</code> <br>
|
||||
<code>{% codesandbox ppxnl191zx runonclick=1 %}</code>
|
||||
</dd>
|
||||
</dl>
|
||||
<h3>JSFiddle Embed</h3>
|
||||
<p>All you need is the full JSFiddle <code>link</code>, ending in the fiddle ID code, as follows:</p>
|
||||
<code>{% jsfiddle https://jsfiddle.net/link2twenty/v2kx9jcd %}</code>
|
||||
<dl>
|
||||
<dt><code>Custom tabs</code></dt>
|
||||
<dd>
|
||||
You can add a custom tab order to you JSFiddle embed tag. Defaults to <i>js,html,css,result</i><br>
|
||||
<code>{% jsfiddle https://jsfiddle.net/webdevem/Q8KVC result,html,css %}</code>
|
||||
</dd>
|
||||
</dl>
|
||||
<h3>Stackblitz Embed</h3>
|
||||
<p>All you need is the ID of the Stackblitz:</p>
|
||||
<code>{% stackblitz ball-demo %}</code>
|
||||
<dl>
|
||||
<dt><code>Default view</code></dt>
|
||||
<dd>
|
||||
You can change the default view, the options are <i>both</i>, <i>preview</i>, <i>editor</i>. Defaults to
|
||||
<i>both</i><br>
|
||||
<code>{% stackblitz ball-demo view=preview %}</code>
|
||||
</dd>
|
||||
<dt><code>Default file</code></dt>
|
||||
<dd>
|
||||
You can change the default file you want your embed to point to<br>
|
||||
<code>{% stackblitz ball-demo file=style.css %}</code>
|
||||
</dd>
|
||||
</dl>
|
||||
<h3>CodeSandbox Embed</h3>
|
||||
<p>All you need is the ID of the Sandbox:</p>
|
||||
<code>{% codesandbox ppxnl191zx %}</code>
|
||||
<p>Of CodeSandbox's many
|
||||
<a href="https://codesandbox.io/docs/embedding#embed-options">optional attributes</a>, the following are supported by using them in your tag, just add them after the id, separated by spaces.
|
||||
</p>
|
||||
<dl>
|
||||
<dt><code>initialpath</code></dt>
|
||||
<dd>
|
||||
Which url to initially load in address bar.<br>
|
||||
<code>{% codesandbox ppxnl191zx initialpath=/initial/load/path %}</code>
|
||||
</dd>
|
||||
<dt><code>module</code></dt>
|
||||
<dd>
|
||||
Which module to open by default.<br>
|
||||
<code>{% codesandbox ppxnl191zx module=/path/to/module %}</code>
|
||||
</dd>
|
||||
<dt><code>runonclick</code></dt>
|
||||
<dd>
|
||||
Delays when code is ran if <code>1</code> <br>
|
||||
<code>{% codesandbox ppxnl191zx runonclick=1 %}</code>
|
||||
</dd>
|
||||
</dl>
|
||||
<h3>JSFiddle Embed</h3>
|
||||
<p>All you need is the full JSFiddle <code>link</code>, ending in the fiddle ID code, as follows:</p>
|
||||
<code>{% jsfiddle https://jsfiddle.net/link2twenty/v2kx9jcd %}</code>
|
||||
<dl>
|
||||
<dt><code>Custom tabs</code></dt>
|
||||
<dd>
|
||||
You can add a custom tab order to you JSFiddle embed tag. Defaults to <i>js,html,css,result</i><br>
|
||||
<code>{% jsfiddle https://jsfiddle.net/webdevem/Q8KVC result,html,css %}</code>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h3>JSitor Liquid Tag</h3>
|
||||
<p>
|
||||
To use JSitor liquid tag you can use the JSitor full <code>link</code>, with or without the parameters
|
||||
</p>
|
||||
<code>{% jsitor https://jsitor.com/embed/B7FQ5tHbY %}</code>
|
||||
<br />
|
||||
<code>{% jsitor https://jsitor.com/embed/B7FQ5tHbY?html&js&css&result&light %}</code>
|
||||
<p>
|
||||
Other options to use JSitor liquid tag is just by its ID, you can add it with or without the parameters
|
||||
</p>
|
||||
<code>{% jsitor B7FQ5tHbY %}</code>
|
||||
<br />
|
||||
<code>{% jsitor B7FQ5tHbY?html&js&css&result&light %}</code>
|
||||
<h3>JSitor Liquid Tag</h3>
|
||||
<p>
|
||||
To use JSitor liquid tag you can use the JSitor full <code>link</code>, with or without the parameters
|
||||
</p>
|
||||
<code>{% jsitor https://jsitor.com/embed/B7FQ5tHbY %}</code>
|
||||
<br />
|
||||
<code>{% jsitor https://jsitor.com/embed/B7FQ5tHbY?html&js&css&result&light %}</code>
|
||||
<p>
|
||||
Other options to use JSitor liquid tag is just by its ID, you can add it with or without the parameters
|
||||
</p>
|
||||
<code>{% jsitor B7FQ5tHbY %}</code>
|
||||
<br />
|
||||
<code>{% jsitor B7FQ5tHbY?html&js&css&result&light %}</code>
|
||||
|
||||
<h3>repl.it Embed</h3>
|
||||
<p>All you need is the URL after the domain name:</p>
|
||||
<code>{% replit @WigWog/PositiveFineOpensource %}</code>
|
||||
<h3>Stackery Embed</h3>
|
||||
<p>Visualize your AWS Serverless Application Model templates with <a href="https://www.stackery.io/">Stackery's</a> visualizer embed</p>
|
||||
<p>All you need is the repository owner, repository name, and branch that you would like visualized</p>
|
||||
<code>{% stackery deeheber lambda-layer-example master %}</code>
|
||||
<br />
|
||||
<p>The repository must be a public GitHub repository and have a valid AWS SAM template in the project root titled template.yaml</p>
|
||||
<h3>Next Tech Embed</h3>
|
||||
<p>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.</p>
|
||||
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/r449xp8cay3383i139qv.png" alt="Share Replit sandbox" /></p>
|
||||
<code>{% nexttech https://nt.dev/s/6ba1fffbd09e %}</code>
|
||||
<h3>Instagram Embed</h3>
|
||||
<p>All you need is the Instagram post <code>id</code> from the URL:</p>
|
||||
<code>{% instagram BXgGcAUjM39 %}</code>
|
||||
<h3>Speakerdeck Tag</h3>
|
||||
<p>All you need is the data-id code from the embed link:</p>
|
||||
<pre><span style="color: gray;"># Given this embed link:</span><br><script async class="speakerdeck-embed"<br> data-id="<span style='color: orange;'>7e9f8c0fa0c949bd8025457181913fd0</span>"<br> data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script></pre>
|
||||
<pre>{% speakerdeck <span style="color: orange;">7e9f8c0fa0c949bd8025457181913fd0</span> %}</pre>
|
||||
<h3>Soundcloud Embed</h3>
|
||||
<p>Just enter the full URL of the Soundcloud track you are trying to embed.</p>
|
||||
<code>{% soundcloud https://soundcloud.com/user-261265215/dev-to-review-episode-1 %}</code>
|
||||
<h3>Spotify Embed</h3>
|
||||
<p>
|
||||
Enter the Spotify URI of the Spotify track / playlist /
|
||||
album / artist / podcast episode you are trying to embed.
|
||||
</p>
|
||||
<pre>{% spotify <span style="color: #1DB954;">spotify:episode:5V4XZWqZQJvbddd31n56mf</span> %}</pre>
|
||||
<h3>Blogcast Tag</h3>
|
||||
<p>All you need is the article id code from the embed code:</p>
|
||||
<pre>{% blogcast <span style="color: orange;">1234</span> %}</pre>
|
||||
<h3>Parler Tag</h3>
|
||||
<p>Enter the full url of the Parler.io audio file you want to embed. </p>
|
||||
<pre>{% parler https://www.parler.io/audio/73240183203/d53cff009eac2ab1bc9dd8821a638823c39cbcea.7dd28611-b7fc-4cf8-9977-b6e3aaf644a1.mp3 %}</pre>
|
||||
<h3>Stack Exchange / Stack Overflow Tag</h3>
|
||||
<p>
|
||||
You'll need the question or answer's ID code, and the site. When using <code>{% stackoverflow %}</code> as the tag, the site will default to Stack Overflow.
|
||||
For example:
|
||||
<br>
|
||||
<a href="https://stackoverflow.com/questions/24789130/colors-in-irb-rails-console">https://stackoverflow.com/questions/24789130/colors-in-irb-rails-console</a>
|
||||
<ul>
|
||||
<li>The question ID is: <code style="color: aquamarine; background-color: black;">24789130</code></li>
|
||||
</ul>
|
||||
<pre>{% stackoverflow <span style="color: aquamarine;">24789130</span> %}</pre>
|
||||
</p>
|
||||
<p>
|
||||
For other Stack Exchange network sites, you'll need to provide the site's name and use <code>{% stackexchange %}</code> as the tag. For example:
|
||||
<br>
|
||||
<a href="https://diy.stackexchange.com/questions/169988/base-for-refrigerator-wine-shelf">https://diy.stackexchange.com/questions/169988/base-for-refrigerator-wine-shelf</a>
|
||||
<ul>
|
||||
<li>The question ID is: <code style="color: aquamarine; background-color: black;">169988</code></li>
|
||||
<li>The site is <code style="color: orange; background-color: black;">diy</code></li>
|
||||
</ul>
|
||||
<pre>{% stackexchange <span style="color: aquamarine;">169988</span> <span style="color: orange;">diy</span> %}</pre>
|
||||
</p>
|
||||
<p>
|
||||
For answers, you can get the answer's ID code by from the answer's "Share" link. For example:
|
||||
<h3>repl.it Embed</h3>
|
||||
<p>All you need is the URL after the domain name:</p>
|
||||
<code>{% replit @WigWog/PositiveFineOpensource %}</code>
|
||||
<h3>Stackery Embed</h3>
|
||||
<p>Visualize your AWS Serverless Application Model templates with <a href="https://www.stackery.io/">Stackery's</a> visualizer embed</p>
|
||||
<p>All you need is the repository owner, repository name, and branch that you would like visualized</p>
|
||||
<code>{% stackery deeheber lambda-layer-example master %}</code>
|
||||
<br />
|
||||
<p>The repository must be a public GitHub repository and have a valid AWS SAM template in the project root titled template.yaml</p>
|
||||
<h3>Next Tech Embed</h3>
|
||||
<p>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.</p>
|
||||
<p><img src="https://thepracticaldev.s3.amazonaws.com/i/r449xp8cay3383i139qv.png" alt="Share Replit sandbox" /></p>
|
||||
<code>{% nexttech https://nt.dev/s/6ba1fffbd09e %}</code>
|
||||
<h3>Instagram Embed</h3>
|
||||
<p>All you need is the Instagram post <code>id</code> from the URL:</p>
|
||||
<code>{% instagram BXgGcAUjM39 %}</code>
|
||||
<h3>Speakerdeck Tag</h3>
|
||||
<p>All you need is the data-id code from the embed link:</p>
|
||||
<pre><span style="color: gray;"># Given this embed link:</span><br><script async class="speakerdeck-embed"<br> data-id="<span style='color: orange;'>7e9f8c0fa0c949bd8025457181913fd0</span>"<br> data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script></pre>
|
||||
<pre>{% speakerdeck <span style="color: orange;">7e9f8c0fa0c949bd8025457181913fd0</span> %}</pre>
|
||||
<h3>Soundcloud Embed</h3>
|
||||
<p>Just enter the full URL of the Soundcloud track you are trying to embed.</p>
|
||||
<code>{% soundcloud https://soundcloud.com/user-261265215/dev-to-review-episode-1 %}</code>
|
||||
<h3>Spotify Embed</h3>
|
||||
<p>
|
||||
Enter the Spotify URI of the Spotify track / playlist /
|
||||
album / artist / podcast episode you are trying to embed.
|
||||
</p>
|
||||
<pre>{% spotify <span style="color: #1DB954;">spotify:episode:5V4XZWqZQJvbddd31n56mf</span> %}</pre>
|
||||
<h3>Blogcast Tag</h3>
|
||||
<p>All you need is the article id code from the embed code:</p>
|
||||
<pre>{% blogcast <span style="color: orange;">1234</span> %}</pre>
|
||||
<h3>Parler Tag</h3>
|
||||
<p>Enter the full url of the Parler.io audio file you want to embed. </p>
|
||||
<pre>{% parler https://www.parler.io/audio/73240183203/d53cff009eac2ab1bc9dd8821a638823c39cbcea.7dd28611-b7fc-4cf8-9977-b6e3aaf644a1.mp3 %}</pre>
|
||||
<h3>Stack Exchange / Stack Overflow Tag</h3>
|
||||
<p>
|
||||
You'll need the question or answer's ID code, and the site. When using <code>{% stackoverflow %}</code> as the tag, the site will default to Stack Overflow.
|
||||
For example:
|
||||
<br>
|
||||
<a href="https://diy.stackexchange.com/a/170185">https://diy.stackexchange.com/a/170185</a>
|
||||
<a href="https://stackoverflow.com/questions/24789130/colors-in-irb-rails-console">https://stackoverflow.com/questions/24789130/colors-in-irb-rails-console</a>
|
||||
<ul>
|
||||
<li>The answer ID is: <code style="color: aquamarine; background-color: black;">170185</code></li>
|
||||
<li>The site is <code style="color: orange; background-color: black;">diy</code></li>
|
||||
<li>The question ID is: <code style="color: aquamarine; background-color: black;">24789130</code></li>
|
||||
</ul>
|
||||
<pre>{% stackexchange <span style="color: aquamarine;">170185</span> <span style="color: orange;">diy</span> %}</pre>
|
||||
</p>
|
||||
<h3>Wikipedia Embed</h3>
|
||||
<p>Enter the full URL of the Wikipedia article you want to embed, with or without the anchor.</p>
|
||||
<p>
|
||||
<code>{% wikipedia https://en.wikipedia.org/wiki/Wikipedia %}</code>
|
||||
<br />
|
||||
<code>{% wikipedia https://en.wikipedia.org/wiki/Wikipedia#Diversity %}</code>
|
||||
</p>
|
||||
<h3>Asciinema Embed</h3>
|
||||
<p>All you need is the Asciinema id:</p>
|
||||
<code>{% asciinema 239367 %}</code>
|
||||
<h3>Parsing Liquid Tags as a Code Example</h3>
|
||||
<p>To parse Liquid tags as code, simply wrap it with a single backtick or triple backticks.</p>
|
||||
<p><code>`{% mytag %}{{ site.SOMETHING }}{% endmytag %}`</code></p>
|
||||
<p>One specific edge case is with using the <code>raw</code> tag. To properly escape it, use this format:
|
||||
</p>
|
||||
<p><code>`{% raw %}{{site.SOMETHING }} {% ``endraw`` %}`</code></p>
|
||||
</div>
|
||||
<pre>{% stackoverflow <span style="color: aquamarine;">24789130</span> %}</pre>
|
||||
</p>
|
||||
<p>
|
||||
For other Stack Exchange network sites, you'll need to provide the site's name and use <code>{% stackexchange %}</code> as the tag. For example:
|
||||
<br>
|
||||
<a href="https://diy.stackexchange.com/questions/169988/base-for-refrigerator-wine-shelf">https://diy.stackexchange.com/questions/169988/base-for-refrigerator-wine-shelf</a>
|
||||
<ul>
|
||||
<li>The question ID is: <code style="color: aquamarine; background-color: black;">169988</code></li>
|
||||
<li>The site is <code style="color: orange; background-color: black;">diy</code></li>
|
||||
</ul>
|
||||
<pre>{% stackexchange <span style="color: aquamarine;">169988</span> <span style="color: orange;">diy</span> %}</pre>
|
||||
</p>
|
||||
<p>
|
||||
For answers, you can get the answer's ID code by from the answer's "Share" link. For example:
|
||||
<br>
|
||||
<a href="https://diy.stackexchange.com/a/170185">https://diy.stackexchange.com/a/170185</a>
|
||||
<ul>
|
||||
<li>The answer ID is: <code style="color: aquamarine; background-color: black;">170185</code></li>
|
||||
<li>The site is <code style="color: orange; background-color: black;">diy</code></li>
|
||||
</ul>
|
||||
<pre>{% stackexchange <span style="color: aquamarine;">170185</span> <span style="color: orange;">diy</span> %}</pre>
|
||||
</p>
|
||||
<h3>Wikipedia Embed</h3>
|
||||
<p>Enter the full URL of the Wikipedia article you want to embed, with or without the anchor.</p>
|
||||
<p>
|
||||
<code>{% wikipedia https://en.wikipedia.org/wiki/Wikipedia %}</code>
|
||||
<br />
|
||||
<code>{% wikipedia https://en.wikipedia.org/wiki/Wikipedia#Diversity %}</code>
|
||||
</p>
|
||||
<h3>Asciinema Embed</h3>
|
||||
<p>All you need is the Asciinema id:</p>
|
||||
<code>{% asciinema 239367 %}</code>
|
||||
<h3>Parsing Liquid Tags as a Code Example</h3>
|
||||
<p>To parse Liquid tags as code, simply wrap it with a single backtick or triple backticks.</p>
|
||||
<p><code>`{% mytag %}{{ site.SOMETHING }}{% endmytag %}`</code></p>
|
||||
<p>One specific edge case is with using the <code>raw</code> tag. To properly escape it, use this format:
|
||||
</p>
|
||||
<p><code>`{% raw %}{{site.SOMETHING }} {% ``endraw`` %}`</code></p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,59 +1,57 @@
|
|||
<div id="editor-markdown-help">
|
||||
<div class="crayons-article">
|
||||
<div class="crayons-article__body">
|
||||
<p>Below are some examples of commonly used markdown syntax. If you want to dive deeper, check out
|
||||
<a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet" target="_blank" rel="noopener">this cheat sheet.</a>
|
||||
</p>
|
||||
<div class="text-styles">
|
||||
<p>Below are some examples of commonly used markdown syntax. If you want to dive deeper, check out
|
||||
<a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet" target="_blank" rel="noopener">this cheat sheet.</a>
|
||||
</p>
|
||||
|
||||
<h3>Bold & Italic</h3>
|
||||
<p><em>Italics</em>: <code>*asterisks* or _underscores_</code></p>
|
||||
<p><strong>Bold</strong>: <code>**double asterisks** or __double underscores__</code></p>
|
||||
<h3>Bold & Italic</h3>
|
||||
<p><em>Italics</em>: <code>*asterisks* or _underscores_</code></p>
|
||||
<p><strong>Bold</strong>: <code>**double asterisks** or __double underscores__</code></p>
|
||||
|
||||
<h3>Links</h3>
|
||||
<p><a href="<%= app_url %>">I'm an inline link</a>: <code>[I'm an inline link](put-link-here)</code></p>
|
||||
<p><a name="anchored">Anchored links</a> (For things like a Table of Contents)</p>
|
||||
<pre>
|
||||
## Table Of Contents
|
||||
* [Chapter 1](#chapter-1)
|
||||
* [Chapter 2](#chapter-2)
|
||||
<h3>Links</h3>
|
||||
<p><a href="<%= app_url %>">I'm an inline link</a>: <code>[I'm an inline link](put-link-here)</code></p>
|
||||
<p><a name="anchored">Anchored links</a> (For things like a Table of Contents)</p>
|
||||
<pre>
|
||||
## Table Of Contents
|
||||
* [Chapter 1](#chapter-1)
|
||||
* [Chapter 2](#chapter-2)
|
||||
|
||||
### Chapter 1 <%= "<a name=\"chapter-1\"></a>" %>
|
||||
</pre>
|
||||
### Chapter 1 <%= "<a name=\"chapter-1\"></a>" %>
|
||||
</pre>
|
||||
|
||||
<h3>Inline Images</h3>
|
||||
<p>
|
||||
When adding GIFs to posts and comments, please note that there is a limit of 200 megapixels per frame/page.
|
||||
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_220,q_auto,w_220/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg" alt="example image, with sloan" />
|
||||
</p>
|
||||
<pre></pre>
|
||||
<figcaption> You can even add a caption using the HTML <code>figcaption</code> tag!</figcaption>
|
||||
<h3>Inline Images</h3>
|
||||
<p>
|
||||
When adding GIFs to posts and comments, please note that there is a limit of 200 megapixels per frame/page.
|
||||
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OsLaFSo9--/c_fill,f_auto,fl_progressive,h_220,q_auto,w_220/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/31047/af153cd6-9994-4a68-83f4-8ddf3e13f0bf.jpg" alt="example image, with sloan" />
|
||||
</p>
|
||||
<pre></pre>
|
||||
<figcaption> You can even add a caption using the HTML <code>figcaption</code> tag!</figcaption>
|
||||
|
||||
<h3>Headers</h3>
|
||||
<p>Add a header to your post with this syntax:</p>
|
||||
<pre># One '#' for a h1 header<br>## Two '#'s for a h2 header<br>...<br>###### Six '#'s for a h6 header</pre>
|
||||
<h1>One '#' for a h1 header</h1>
|
||||
<h2>Two '#'s for a h2 header</h2>
|
||||
<h3>Three '#'s for a h3 header</h3>
|
||||
<h4>Four '#'s for a h4 header</h4>
|
||||
<h5>Five '#'s for a h5 header</h5>
|
||||
<h6>Six '#'s for a h6 header</h6>
|
||||
<h3>Headers</h3>
|
||||
<p>Add a header to your post with this syntax:</p>
|
||||
<pre># One '#' for a h1 header<br>## Two '#'s for a h2 header<br>...<br>###### Six '#'s for a h6 header</pre>
|
||||
<h1>One '#' for a h1 header</h1>
|
||||
<h2>Two '#'s for a h2 header</h2>
|
||||
<h3>Three '#'s for a h3 header</h3>
|
||||
<h4>Four '#'s for a h4 header</h4>
|
||||
<h5>Five '#'s for a h5 header</h5>
|
||||
<h6>Six '#'s for a h6 header</h6>
|
||||
|
||||
<h3>Author Notes/Comments</h3>
|
||||
<p>Add some hidden notes/comments to your article with this syntax:</p>
|
||||
<pre><!-- This won't show up in the content! --></pre>
|
||||
<h3>Author Notes/Comments</h3>
|
||||
<p>Add some hidden notes/comments to your article with this syntax:</p>
|
||||
<pre><!-- This won't show up in the content! --></pre>
|
||||
|
||||
<h3>Common Gotchas</h3>
|
||||
<p>
|
||||
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:
|
||||
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HjVUshkb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/8l29vxiir8k5d097o9o8.png"
|
||||
alt="example image of writing lists with images in Markdown">
|
||||
</p>
|
||||
<p>
|
||||
Here's the <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet" target="_blank" rel="noopener">Markdown cheatsheet</a> again for reference.
|
||||
</p>
|
||||
</div>
|
||||
<h3>Common Gotchas</h3>
|
||||
<p>
|
||||
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:
|
||||
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HjVUshkb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/8l29vxiir8k5d097o9o8.png"
|
||||
alt="example image of writing lists with images in Markdown">
|
||||
</p>
|
||||
<p>
|
||||
Here's the <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet" target="_blank" rel="noopener">Markdown cheatsheet</a> again for reference.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,9 @@
|
|||
<% title "#{title} #{community_qualified_name}" %>
|
||||
|
||||
<div class="blank-space"></div>
|
||||
<div class="container article">
|
||||
<div class="title">
|
||||
<h1><%= title %></h1>
|
||||
</div>
|
||||
<div class="body">
|
||||
<p>
|
||||
The production <%= title %> page is a page generated at <a href="/internal/pages">/internal/pages</a>! This one is just a placeholder.
|
||||
</p>
|
||||
<div class="crayons-layout crayons-layout--limited">
|
||||
<div class="crayons-card text-styles text-padding">
|
||||
<h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 mt-0"><%= title %></h1>
|
||||
|
||||
<p>The production <%= title %> page is a page generated at <a href="/internal/pages">/internal/pages</a>! This one is just a placeholder.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,13 +13,9 @@
|
|||
<meta name="twitter:title" content="<%= community_qualified_name %> Code of Conduct">
|
||||
<% end %>
|
||||
|
||||
<div class="blank-space"></div>
|
||||
|
||||
<div class="container article">
|
||||
<div class="title">
|
||||
<h1>Code of Conduct</h1>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="crayons-layout crayons-layout--limited">
|
||||
<div class="crayons-card text-styles text-padding">
|
||||
<h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 mt-0">Code of Conduct</h1>
|
||||
<%= render "coc_text" %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,13 +19,10 @@
|
|||
<meta name="twitter:image:src" content="<%= SiteConfig.main_social_image %>">
|
||||
<% end %>
|
||||
|
||||
<div class="container article">
|
||||
<div class="title">
|
||||
<h1>
|
||||
Contact
|
||||
</h1>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="crayons-layout crayons-layout--limited">
|
||||
<div class="crayons-card text-styles text-padding">
|
||||
<h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 mt-0">Contacts</h1>
|
||||
|
||||
<p>
|
||||
<%= community_qualified_name %> would love to hear from you!
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -32,15 +32,11 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<div class="blank-space"></div>
|
||||
<div class="container article">
|
||||
<div class="title">
|
||||
<h1>
|
||||
More information about <%= community_name %> 👋
|
||||
</h1>
|
||||
</div>
|
||||
<div class="body">
|
||||
<ul class="key-links">
|
||||
<div class="crayons-layout crayons-layout--limited">
|
||||
<div class="crayons-card text-styles text-padding">
|
||||
<h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 mt-0">More information about <%= community_name %> 👋</h1>
|
||||
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
<% if SiteConfig.shop_url.present? %>
|
||||
|
|
@ -55,8 +51,7 @@
|
|||
<li><a href="/code-of-conduct">Code of Conduct</a></li>
|
||||
<li><a href="/downloads">Get the mobile app</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="social-links flex justify-center p-4 mt-4">
|
||||
|
||||
<%= render partial: "layouts/social_media" %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,9 @@
|
|||
<meta name="keywords" content="<%= SiteConfig.meta_keywords[:default] %>">
|
||||
<% end %>
|
||||
|
||||
<div class="blank-space"></div>
|
||||
<div class="container article">
|
||||
<div class="title">
|
||||
<h1>Markdown Basics 🤓</h1>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="crayons-layout crayons-layout--limited">
|
||||
<div class="crayons-card text-styles text-padding">
|
||||
<h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 mt-0">Markdown Basics 🤓</h1>
|
||||
|
||||
<p>Below are some examples of commonly used markdown syntax. If you want to dive deeper, check out
|
||||
<a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet" target="_blank" rel="noopener">this cheat sheet.</a>
|
||||
|
|
@ -76,6 +73,5 @@
|
|||
<a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet" target="_blank" rel="noopener">Here's the Markdown cheatsheet again for reference.</a>
|
||||
</h4>
|
||||
Happy posting! 📝
|
||||
<div class="blank-space"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,14 +19,10 @@
|
|||
<meta name="twitter:image:src" content="<%= SiteConfig.main_social_image %>">
|
||||
<% end %>
|
||||
|
||||
<div class="blank-space"></div>
|
||||
<div class="container article">
|
||||
<div class="title">
|
||||
<h1>
|
||||
Privacy Policy
|
||||
</h1>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="crayons-layout crayons-layout--limited">
|
||||
<div class="crayons-card text-styles text-padding">
|
||||
<h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 mt-0">Privacy Policy</h1>
|
||||
|
||||
<p>Effective May 25, 2018</p>
|
||||
<p>This policy covers Dev Community Inc. (“<%= community_name %>”).</p>
|
||||
<h3> What information <%= community_name %> collects and Why </h3>
|
||||
|
|
|
|||
|
|
@ -12,17 +12,17 @@
|
|||
<meta name="twitter:title" content="Report Abuse">
|
||||
<% end %>
|
||||
|
||||
<div class="blank-space"></div>
|
||||
<div class="crayons-layout crayons-layout--limited">
|
||||
<div class="crayons-card text-styles text-padding">
|
||||
<h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 mt-0">Report Abuse</h1>
|
||||
|
||||
<div class="container article">
|
||||
<div class="title">
|
||||
<h1>Report Abuse</h1>
|
||||
</div>
|
||||
<div class="body">
|
||||
<p>
|
||||
Thank you for reporting any abuse that violates our <a href="/code-of-conduct">code of conduct</a> or
|
||||
<a href="/terms">terms and conditions</a>. We continue to try to make this environment a great one for everybody.
|
||||
</p>
|
||||
<%= render "feedback_messages/form", feedback_message: @feedback_message %>
|
||||
|
||||
<div class="crayons-card crayons-card--secondary p-4 m:p-6">
|
||||
<%= render "feedback_messages/form", feedback_message: @feedback_message %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<% title "O RLY Parody Book Generator" %>
|
||||
<%= stylesheet_link_tag "application", media: "all" %>
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
||||
<%= javascript_include_tag "application" %>
|
||||
|
||||
<%= content_for :page_meta do %>
|
||||
|
|
|
|||
|
|
@ -19,14 +19,11 @@
|
|||
<% end %>
|
||||
|
||||
<% if @page.template == "contained" %>
|
||||
<div class="blank-space"></div>
|
||||
<div class="container article">
|
||||
<div class="title">
|
||||
<h1>
|
||||
<%= @page.title %>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="body">
|
||||
|
||||
<div class="crayons-layout crayons-layout--limited">
|
||||
<div class="crayons-card text-styles text-padding">
|
||||
<h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 mt-0"><%= @page.title %></h1>
|
||||
|
||||
<%= @page.processed_html.html_safe %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,30 +6,19 @@
|
|||
<meta name="keywords" content="<%= SiteConfig.meta_keywords[:default] %>">
|
||||
<% end %>
|
||||
|
||||
<div class="blank-space"></div>
|
||||
|
||||
<style>
|
||||
.container .body h4 img {
|
||||
top: 10px;
|
||||
display: inline;
|
||||
left: 0;
|
||||
}
|
||||
.sponsor-level-headline {
|
||||
padding:5px 18px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container article">
|
||||
<div class="title" style="height:20px;">
|
||||
</div>
|
||||
<div class="body" style="text-align:center;">
|
||||
<h1 style="font-size:3em;font-weight:600;margin-bottom:5px;">
|
||||
THANK YOU
|
||||
</h1>
|
||||
<p style="margin:5px 5px;"><em>for supporting our community</em></p>
|
||||
<div class="crayons-layout crayons-layout--limited">
|
||||
<div class="crayons-card text-styles text-padding">
|
||||
<h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-0 mt-0">Thank you! ♥️</h1>
|
||||
<h2 class="fs-2xl s:fs-3xl l:fs-4xl fw-medium s:fw-bold lh-tight mb-4 mt-0">for supporting our community</h2>
|
||||
|
||||
<h4>
|
||||
<h4>
|
||||
<img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/2zmukvll98je8qsdyewq.png", 30) %>" alt="golden badge">
|
||||
<span class="sponsor-level-headline" style="background-color: #fefa87;">Gold Sponsors</span>
|
||||
<img src="<%= cloudinary("https://thepracticaldev.s3.amazonaws.com/i/2zmukvll98je8qsdyewq.png", 30) %>" alt="golden badge">
|
||||
|
|
@ -71,6 +60,8 @@
|
|||
<% end %>
|
||||
</div>
|
||||
|
||||
<h5>Interested in sponsoring <%= community_name %>? Check out our <a href="<%= app_url("/sponsorships") %>">sponsorships</a> page.</h5>
|
||||
<div class="crayons-notice">
|
||||
<p>Interested in sponsoring <%= community_name %>? Check out our <a href="<%= app_url("/sponsorships") %>">sponsorships</a> page.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,14 +19,10 @@
|
|||
<meta name="twitter:image:src" content="<%= SiteConfig.main_social_image %>">
|
||||
<% end %>
|
||||
|
||||
<div class="blank-space"></div>
|
||||
<div class="container article">
|
||||
<div class="title">
|
||||
<h1>
|
||||
Web Site Terms and Conditions of Use
|
||||
</h1>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="crayons-layout crayons-layout--limited">
|
||||
<div class="crayons-card text-styles text-padding">
|
||||
<h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 mt-0">Web Site Terms and Conditions of Use</h1>
|
||||
|
||||
<%= render "terms_text" %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue