Simple pure JavaScript plugin to rotate text snippets as if they were being typed.
http://schier.co/post/simple-vanilla-javascript-typing-carousel
A Pen by Bryan C Guner on CodePen.
<h2>Render markdown:</h2> | |
<div class="load-post-form"> | |
Link to post (busy or steemit): <input type="text" id="post-link-input"> | |
<button id="load-post-button">Load steem post</button> | |
</div> | |
<textarea rows="12" style="width: 100%;" id="input"> | |
# Sample post | |
and some content. | |
Let's mention @ned | |
or include a tag #steem. | |
https://youtu.be/B7C83L6iWJQ | |
</textarea> | |
<p id="render-button-container"><button id="render-button">Render markdown</button></p> | |
<h2>Output:</h2> | |
<p id="output"> | |
...press the button... | |
</p> | |
<br /> | |
<h2>Generated HTML markup</h2> | |
<pre id="output-markup"> | |
...press the button... | |
</pre> | |
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script> | |
<script src="https://unpkg.com/jquery"></script> | |
<script src="https://unpkg.com/steem-content-renderer@latest"></script> | |
<!--<script src="../dist/browser/steem-content-renderer.min.js"></script>--> |
Simple pure JavaScript plugin to rotate text snippets as if they were being typed.
http://schier.co/post/simple-vanilla-javascript-typing-carousel
A Pen by Bryan C Guner on CodePen.
const renderer = new SteemContentRenderer.DefaultRenderer({ | |
baseUrl: "https://steemit.com/", | |
breaks: true, | |
skipSanitization: false, | |
allowInsecureScriptTags: false, | |
addNofollowToLinks: true, | |
doNotShowImages: false, | |
ipfsPrefix: "", | |
assetsWidth: 640, | |
assetsHeight: 480, | |
imageProxyFn: (url) => url, | |
usertagUrlFn: (account) => "https://steemit.com/@" + account, | |
hashtagUrlFn: (hashtag) => "https://steemit.com/trending/" + hashtag, | |
isLinkSafeFn: (url) => true | |
}); | |
$(document).ready(() => { | |
const renderMarkdownBtnElem = $("#render-button"); | |
const inputElem = $("#input"); | |
const outputElem = $("#output"); | |
const outputMarkupElem = $("#output-markup"); | |
const loadPostButton = $("#load-post-button"); | |
const postLinkInput = $("#post-link-input"); | |
function setOutput(output) { | |
outputElem.html(output); | |
outputMarkupElem.text(output); | |
} | |
function render() { | |
const input = inputElem.val(); | |
const output = renderer.render(input); | |
console.log("Rendered", output); | |
setOutput(output); | |
} | |
function getAuthorAndPermlinkFromLink(link) { | |
let author = ""; | |
let permlink = ""; | |
if (link.length > 0) { | |
/* tslint:disable max-line-length */ | |
const regex = /^\/?(?:https?:\/\/(?:steemit\.com|busy\.org))?(?:\/?[^\/\n]*\/)?@?([^\/\n]+)\/([^\/\n]+)$/giu; | |
/* tslint:disable max-line-length */ | |
const match = regex.exec(link); | |
if (match && match.length > 1) { | |
author = match[1]; | |
permlink = match[2]; | |
} | |
} | |
return { author, permlink }; | |
} | |
renderMarkdownBtnElem.on("click", () => render()); | |
loadPostButton.on("click", () => { | |
const postLink = postLinkInput.val(); | |
const { author, permlink } = getAuthorAndPermlinkFromLink(postLink); | |
if ( | |
!author || | |
author.length === 0 || | |
!permlink || | |
permlink.length === 0 | |
) { | |
inputElem.text("Author or permlink is missing..."); | |
return; | |
} | |
inputElem.text("Loading post @" + author + "/" + permlink + " ..."); | |
(async () => { | |
try { | |
const post = await steem.api.getContentAsync(author, permlink); | |
const postMarkdown = post.body; | |
console.log("Content loaded", postMarkdown); | |
inputElem.text(postMarkdown); | |
render(); | |
} catch (error) { | |
inputElem.text( | |
"Error while loading post @" + | |
author + | |
"/" + | |
permlink + | |
": " + | |
error | |
); | |
} | |
})(); | |
}); | |
}); |
body { | |
margin: 5% auto; | |
padding: 0 3rem; | |
background: #f2f2f2; | |
color: #444444; | |
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, | |
Helvetica, Arial, sans-serif; | |
font-size: 16px; | |
line-height: 1.8; | |
text-shadow: 0 1px 0 #ffffff; | |
max-width: 800px; | |
} | |
code { | |
background: white; | |
} | |
a { | |
border-bottom: 1px solid #444444; | |
color: #444444; | |
text-decoration: none; | |
} | |
a:hover { | |
border-bottom: 0; | |
} | |
/**/ | |
h1 { | |
font-size: 2.2em; | |
} | |
h2, | |
h3, | |
h4, | |
h5 { | |
margin-bottom: 0; | |
} | |
#output { | |
border: 1px solid #777; | |
padding: 0.5rem; | |
} | |
#output-markup { | |
width: 100%; | |
padding: 0.5rem; | |
background: #eee; | |
border: 1px solid #777; | |
overflow-x: scroll; | |
} | |
#render-button-container { | |
text-align: center; | |
} | |
#render-button { | |
padding: 0.5rem; | |
font-size: 1.2em; | |
border-radius: 0.5rem 0.5rem; | |
} | |
.load-post-form { | |
text-align: right; | |
} | |
header small { | |
color: #999; | |
font-size: 50%; | |
} | |
img { | |
max-width: 100%; | |
} |