-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5c9fc4f
commit 149448a
Showing
29 changed files
with
2,758 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,148 @@ | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism.min.css" /> | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism-tomorrow.min.css" /> | ||
<style> | ||
:host { | ||
display: block; | ||
font-size: 14px; | ||
line-height: 20px; | ||
} | ||
:host([inline]) { | ||
display: inline !important; | ||
} | ||
:host([inline]), | ||
:host([inline]) > pre, | ||
:host([inline]) > pre > code { | ||
display: inline !important; | ||
} | ||
.snippet { | ||
background-color: #000000; | ||
color: #ABB2BF; | ||
height: 100%; | ||
margin: 0; | ||
padding: 0; | ||
} | ||
|
||
.line-numbers { | ||
position: relative; | ||
padding-left: 3.8em; | ||
counter-reset: linenumber; | ||
} | ||
:host([inline]) .line-numbers { | ||
position: static; | ||
padding-left: 0; | ||
} | ||
|
||
.line-numbers > code { | ||
position: relative; | ||
white-space: inherit; | ||
} | ||
|
||
.line-numbers .line-numbers-rows { | ||
position: absolute; | ||
pointer-events: none; | ||
top: 0; | ||
font-size: 100%; | ||
left: -3.8em; | ||
width: 3em; /* works for line-numbers below 1000 lines */ | ||
letter-spacing: -1px; | ||
border-right: 1px solid #999; | ||
|
||
-webkit-user-select: none; | ||
-moz-user-select: none; | ||
-ms-user-select: none; | ||
user-select: none; | ||
|
||
} | ||
|
||
:host([inline]) .line-numbers .line-numbers-rows { | ||
display: none; | ||
} | ||
|
||
.line-numbers-rows > span { | ||
display: block; | ||
counter-increment: linenumber; | ||
} | ||
|
||
.line-numbers-rows > span:before { | ||
content: counter(linenumber); | ||
color: #999; | ||
display: block; | ||
padding-right: 0.8em; | ||
text-align: right; | ||
} | ||
.pad { | ||
padding: 5px; | ||
} | ||
|
||
.terminal { | ||
background-color: #000000; | ||
font-family: 'Courier New', Courier, monospace; | ||
font-size: 15px; | ||
height: 100%; | ||
padding: 10px; | ||
} | ||
.terminal span { | ||
color: #00FF00; | ||
} | ||
</style> | ||
<script> | ||
import Prism from 'prismjs'; | ||
//extract props | ||
const { | ||
lang = 'markup', | ||
numbers = false, | ||
inline = false, | ||
trim = false, | ||
ltrim = false, | ||
rtrim = false, | ||
detab = 0, | ||
value | ||
} = this.props; | ||
//get children | ||
const children = this.originalChildren; | ||
//determine snippet | ||
let snippet = value || children[0]?.textContent || ''; | ||
//detab snippet | ||
if (detab) { | ||
snippet = snippet.replace( | ||
new RegExp(`\\n {${detab}}`, 'g'), '\n' | ||
); | ||
} | ||
//determine trim strategy | ||
if (trim) { | ||
snippet = snippet.trim(); | ||
} else if (ltrim) { | ||
snippet = snippet.replace(/^\s+/, ''); | ||
} else if (rtrim) { | ||
snippet = snippet.replace(/\s+$/, ''); | ||
} | ||
//on mount, highlight | ||
const highlight = event => { | ||
if (!snippet) { | ||
return; | ||
} | ||
const code = Prism.highlight(snippet, Prism.languages[lang], lang); | ||
|
||
event.detail.target.innerHTML = code; | ||
if (numbers) { | ||
const match = code.match(/\n(?!$)/g); | ||
const total = match ? match.length + 1 : 1; | ||
const lines = new Array(total + 1).join('<span></span>'); | ||
const wrapper = document.createElement('span'); | ||
wrapper.setAttribute('aria-hidden', 'true'); | ||
wrapper.className = 'line-numbers-rows'; | ||
wrapper.innerHTML = lines; | ||
event.detail.target.appendChild(wrapper); | ||
} | ||
}; | ||
</script> | ||
<if true={lang === 'bash'}> | ||
<div class="terminal"><span>$</span> {childlist}</div> | ||
<elif true={snippet} /> | ||
<if true={numbers}> | ||
<pre class="snippet line-numbers"><code mount=highlight></code></pre> | ||
<else /> | ||
<pre class="snippet pad"><code mount=highlight></code></pre> | ||
</if> | ||
</if> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
<script> | ||
const { value, sm, md, lg, box = true, text = true } = this.props; | ||
//build host class names | ||
this.classList.add('flex', 'flex-center-y'); | ||
//determine host class display | ||
if (!this.classList.contains('block') | ||
&& !this.classList.contains('flex') | ||
&& !this.classList.contains('none') | ||
&& !this.classList.contains('inline') | ||
&& !this.classList.contains('inline-block') | ||
) { | ||
this.classList.add('inline-block'); | ||
} | ||
//build box class list | ||
const classList = [ 'inline-block', 'curved', 'bda-black' ]; | ||
//determine box class size | ||
if (sm) { | ||
classList.push('w-8', 'h-8'); | ||
} else if (md) { | ||
classList.push('w-12', 'h-12'); | ||
} else if (lg) { | ||
classList.push('w-16', 'h-16'); | ||
} else { | ||
classList.push('w-12', 'h-12'); | ||
} | ||
//if there is a text, add margin | ||
//right to the box class list | ||
if (text) { | ||
classList.push('mr-5'); | ||
} | ||
</script> | ||
<if true={box}> | ||
<span class={classList.join(' ')} style={`background-color: ${value};`}></span> | ||
</if> | ||
<if true={text}> | ||
<span>{value}</span> | ||
</if> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
<script> | ||
import intl from '../intl.json'; | ||
//extract props | ||
const { value, sm, md, lg, flag = true, text = true } = this.props; | ||
//get lower case country code | ||
const code = value.toLowerCase(); | ||
//find the country in question | ||
const country = intl.find( | ||
country => country.countryCode.toLowerCase() === code | ||
); | ||
//build host class names | ||
this.classList.add('flex', 'flex-center-y'); | ||
//determine host class display | ||
if (!this.classList.contains('block') | ||
&& !this.classList.contains('flex') | ||
&& !this.classList.contains('none') | ||
&& !this.classList.contains('inline') | ||
&& !this.classList.contains('inline-block') | ||
) { | ||
this.classList.add('inline-block'); | ||
} | ||
//build flag class list | ||
const classList = [ 'inline-block', 'curved', 'bda-black' ]; | ||
//determine flag class size | ||
if (sm) { | ||
classList.push('w-40'); | ||
} else if (md) { | ||
classList.push('w-60'); | ||
} else if (lg) { | ||
classList.push('w-100'); | ||
} else { | ||
classList.push('w-60'); | ||
} | ||
//if there is a text, add margin to the flag class list | ||
if (text) { | ||
classList.push('mr-5'); | ||
} | ||
</script> | ||
<if true={country}> | ||
<if true={flag}> | ||
<img | ||
class={classList.join(' ')} | ||
src={`https://flagcdn.com/w80/${code}.png`} | ||
/> | ||
</if> | ||
<if true={text}> | ||
<span>{country.countryName}</span> | ||
</if> | ||
</if> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
<script> | ||
import intl from '../intl.json'; | ||
//extract props | ||
const { value, sm, md, lg, flag = true, text = true } = this.props; | ||
//get lower case currency code | ||
const currency = value.toLowerCase(); | ||
//find the country currency in question | ||
const country = intl.find( | ||
country => ( | ||
currency !== 'usd' && country.currencyCode.toLowerCase() === currency | ||
) || ( | ||
currency === 'usd' && country.countryCode === 'US' | ||
) | ||
); | ||
//build host class names | ||
this.classList.add('flex', 'flex-center-y'); | ||
//determine host class display | ||
if (!this.classList.contains('block') | ||
&& !this.classList.contains('flex') | ||
&& !this.classList.contains('none') | ||
&& !this.classList.contains('inline') | ||
&& !this.classList.contains('inline-block') | ||
) { | ||
this.classList.add('inline-block'); | ||
} | ||
//build flag class list | ||
const classList = [ 'inline-block', 'curved', 'bda-black' ]; | ||
//determine flag class size | ||
if (sm) { | ||
classList.push('w-40'); | ||
} else if (md) { | ||
classList.push('w-60'); | ||
} else if (lg) { | ||
classList.push('w-100'); | ||
} else { | ||
classList.push('w-60'); | ||
} | ||
//if there is a text, add margin to the flag class list | ||
if (text) { | ||
classList.push('mr-5'); | ||
} | ||
</script> | ||
<if true={country}> | ||
<if true={flag}> | ||
<img | ||
class={classList.join(' ')} | ||
src={`https://flagcdn.com/w80/${country.countryCode.toLowerCase()}.png`} | ||
/> | ||
</if> | ||
<if true={text}> | ||
<span>{country.currencyName}</span> | ||
</if> | ||
</if> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
<script> | ||
import moment from 'moment'; | ||
//moment configuration | ||
moment.locale('short', { | ||
parentLocale: 'en', | ||
relativeTime: { | ||
future: "-%s", past: "%s", s: 'now', ss: 'now', | ||
m: "1m", mm: "%dm", h: "1h", hh: "%dh", | ||
d: "1d", dd: "%dd", w: "1w", ww: "%dw", | ||
M: "1M", MM: "%dM", y: "1y", yy: "%dy" | ||
} | ||
}); | ||
//extract props | ||
const { | ||
value, | ||
locale = 'en', | ||
format = 'MMMM Do YYYY, h:mm:ss a' | ||
} = this.props; | ||
//determine display | ||
if (!this.classList.contains('block') | ||
&& !this.classList.contains('flex') | ||
&& !this.classList.contains('none') | ||
&& !this.classList.contains('inline') | ||
&& !this.classList.contains('inline-block') | ||
) { | ||
this.classList.add('inline-block'); | ||
} | ||
//make date object | ||
const date = value ? new Date(value): new Date(); | ||
//format date | ||
const output = format === 'ago' | ||
? moment(date, format).locale(locale).fromNow() | ||
: format === 'a' | ||
? moment(date, format).locale('short').fromNow() | ||
: moment(date).locale(locale).format(format); | ||
</script> | ||
{output} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<script> | ||
const { value, label, link = '' } = this.props; | ||
//determine host class display | ||
if (!this.classList.contains('block') | ||
&& !this.classList.contains('flex') | ||
&& !this.classList.contains('none') | ||
&& !this.classList.contains('inline') | ||
&& !this.classList.contains('inline-block') | ||
) { | ||
this.classList.add('inline-block'); | ||
} | ||
</script> | ||
<a class=link href={`mailto:${value}`}>{label || value}</a> |
Oops, something went wrong.