Skip to content

Some fixes to issues we found while getting up and running #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jan 6, 2023
Merged

Some fixes to issues we found while getting up and running #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c1d1fdd
Remove SECURITY.md
koddsson Jan 6, 2023
66bf5b8
Run Prettier
koddsson Jan 6, 2023
bd18ff3
Fixes for Firefox
koddsson Jan 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion SECURITY.md
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
<toot-embed src="https://sunny.garden/@knowler/109487032491438808"></toot-embed>

<script type="module">
import 'https://cdn.skypack.dev/pin/urlpattern-polyfill@v6.0.2-Xkk1InwdFsTyUXRMqTq0/mode=imports,min/optimized/urlpattern-polyfill.js'
import 'https://cdn.skypack.dev/pin/element-internals-polyfill@v1.1.18-z4BovnhHcCqD1ZdZNRfe/mode=imports,min/optimized/element-internals-polyfill.js'
// import 'https://unpkg.com/@github/toot-embed-boilerplate@latest/dist/toot-embed.js'
import '../src/toot-embed-element.ts'
</script>
Expand Down
66 changes: 41 additions & 25 deletions src/toot-embed-element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,36 @@
const html = String.raw
const styles = new CSSStyleSheet()
styles.replaceSync(`
:host(:not(:--loading)) {
display: grid;
max-inline-size: 36em;
padding: 0.5em;
gap: 0.5em;
border: 0.0625em solid grey;
border-radius: 0.5em;
grid-template:
"avatar author-link author-link" max-content
"content content content" max-content
"backlink backlink backlink" max-content
/ min-content auto auto;
@supports selector(:--loading) {
:host(:not(:--loading)) {
display: grid;
max-inline-size: 36em;
padding: 0.5em;
gap: 0.5em;
border: 0.0625em solid grey;
border-radius: 0.5em;
grid-template:
"avatar author-link author-link" max-content
"content content content" max-content
"backlink backlink backlink" max-content
/ min-content auto auto;
}
}

@supports not selector(:--loading) {
:host(:not([internals-loading])) {
display: grid;
max-inline-size: 36em;
padding: 0.5em;
gap: 0.5em;
border: 0.0625em solid grey;
border-radius: 0.5em;
grid-template:
"avatar author-link author-link" max-content
"content content content" max-content
"backlink backlink backlink" max-content
/ min-content auto auto;
}
}

[part="avatar"] {
Expand Down Expand Up @@ -94,7 +112,7 @@ class TootEmbedElement extends HTMLElement {
connectedCallback(): void {
this.#internals = this.attachInternals()
this.#internals.role = 'article'
this.#renderRoot = this.attachShadow({ mode: 'open' })
this.#renderRoot = this.attachShadow({mode: 'open'})
this.#renderRoot.adoptedStyleSheets.push(styles)
if (this.querySelector('script[type="application/json"]')) {
return this.#render(JSON.parse(this.querySelector('script[type="application/json"]').textContent))
Expand All @@ -111,7 +129,7 @@ class TootEmbedElement extends HTMLElement {

async load() {
this.#internals.states.add('--loading')
const { tootId } = this.#useParams();
const {tootId} = this.#useParams()
const apiURL = new URL(`/api/v1/statuses/${tootId}`, this.src)
const response = await fetch(apiURL)
console.log(response)
Expand All @@ -121,19 +139,17 @@ class TootEmbedElement extends HTMLElement {
}

#render(json) {
const { account, url, content } = json
const {account, url, content} = json
console.log(json)
const handleURL = new URL(account.url)
const {handle} = this.#useParams()
this.#renderRoot.innerHTML = html`
<img part="avatar" src="${account.avatar}" alt="">
<img part="avatar" src="${account.avatar}" alt="" />
<a part="author-link" href="${handleURL.href}">
<span part="author-name">${account.display_name}</span>
<span part="author-handle">@${handle}@${handleURL.hostname}</span>
</a>
<div part="content">
${content}
</div>
<div part="content">${content}</div>
<a part="backlink" href="${url}" rel="bookmark">Original Toot</a>
`
this.#internals.states.add('--ready')
Expand All @@ -143,16 +159,16 @@ class TootEmbedElement extends HTMLElement {
// URLPattern only works in Chromium right now.
// Could refactor this to use RegExp for compatibility
/* @ts-ignore */
#shortPattern = new URLPattern({ pathname: '/@:handle/:tootId(\\d+)' })
#shortPattern = new URLPattern({pathname: '/@:handle/:tootId(\\d+)'})
/* @ts-ignore */
#longPattern = new URLPattern({ pathname: '/users/:handle/statuses/:tootId(\\d+)' })
#longPattern = new URLPattern({pathname: '/users/:handle/statuses/:tootId(\\d+)'})
// Toot URLs can have two different formats:
// 1. https://indieweb.social/@keithamus/109524390152251545
// 2. https://indieweb.social/users/keithamus/statuses/109524390152251545
#useParams(): { [key: string]: string } {
const groups = (this.#shortPattern.exec(this.src) ?? this.#longPattern.exec(this.src))?.pathname.groups;
if (groups) return groups;
throw `This doesn’t seem to be a toot URL: ${this.src}`;
#useParams(): {[key: string]: string} {
const groups = (this.#shortPattern.exec(this.src) ?? this.#longPattern.exec(this.src))?.pathname.groups
if (groups) return groups
throw `This doesn’t seem to be a toot URL: ${this.src}`
}
}

Expand Down