feat: add meta info per page
This commit is contained in:
parent
27308dde8f
commit
28d7747d41
3 changed files with 45 additions and 25 deletions
|
@ -1,6 +1,8 @@
|
||||||
# Threads
|
# Threads
|
||||||
|
|
||||||
Show off your favorite public threads!
|
Show off your favorite public threads and offer hand-picked, fine-grained, topical subscriptions!
|
||||||
|
|
||||||
|
See it [in action](https://ayco.io/threads).
|
||||||
|
|
||||||
## Project setup
|
## Project setup
|
||||||
|
|
||||||
|
|
|
@ -4,6 +4,18 @@
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>{{ app.title }}</title>
|
<title>{{ app.title }}</title>
|
||||||
|
<meta name="theme-color" content="#3054bf">
|
||||||
|
{% if threads|length == 1 %}
|
||||||
|
<meta name="description" content="{{ threads[0].content }}" />
|
||||||
|
{% else %}
|
||||||
|
<meta name="description" content="{{ app.description }}" />
|
||||||
|
{% endif %}
|
||||||
|
<meta name="author" content="{{ attribution.owner }}" />
|
||||||
|
<meta property="og:site_name" content="{{ app.title }}" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:title" content="{{ app.title }}" />
|
||||||
|
<meta property="og:description" content="{{ app.description }}" />
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://webcomponent.io/reset.css" />
|
<link rel="stylesheet" href="https://webcomponent.io/reset.css" />
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
|
@ -13,9 +25,12 @@
|
||||||
color: #232323;
|
color: #232323;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
header, footer, main {
|
header, footer {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
main {
|
||||||
|
padding: 1em 0;
|
||||||
|
}
|
||||||
header, footer {
|
header, footer {
|
||||||
background: linear-gradient(45deg, #3054bf, #416fff);
|
background: linear-gradient(45deg, #3054bf, #416fff);
|
||||||
color: white;
|
color: white;
|
||||||
|
@ -151,7 +166,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<nav><a href="/">go home</a></nav>
|
<nav><a href="/">Go home</a></nav>
|
||||||
<h1>{{ app.title }}</h1>
|
<h1>{{ app.title }}</h1>
|
||||||
<p>{{ app.description }}</p>
|
<p>{{ app.description }}</p>
|
||||||
</header>
|
</header>
|
||||||
|
@ -237,30 +252,33 @@
|
||||||
>
|
>
|
||||||
</h3>
|
</h3>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
{{ descendant.content | safe }} {% for media in
|
{{ descendant.content | safe }}
|
||||||
descendant.media_attachments%} {% if media.type == 'image'%}
|
{% for media in descendant.media_attachments%}
|
||||||
<a href="{{ media.url }}">
|
{% if media.type == 'image'%}
|
||||||
<img
|
<a href="{{ media.url }}">
|
||||||
|
<img
|
||||||
|
class="media"
|
||||||
|
src="{{media.preview_url}}"
|
||||||
|
alt="{{ media.description or 'media attachment' }}"
|
||||||
|
title="{{ media.description or 'media attachment' }}"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
{% elif media.type == 'gifv' %}
|
||||||
|
<video
|
||||||
class="media"
|
class="media"
|
||||||
src="{{media.preview_url}}"
|
controls
|
||||||
|
autoplay="autoplay"
|
||||||
|
muted
|
||||||
|
loop
|
||||||
alt="{{ media.description or 'media attachment' }}"
|
alt="{{ media.description or 'media attachment' }}"
|
||||||
title="{{ media.description or 'media attachment' }}"
|
title="{{ media.description or 'media attachment' }}"
|
||||||
/>
|
>
|
||||||
</a>
|
<source src="{{media.url}}" type="video/mp4" />
|
||||||
{% elif media.type == 'gifv' %}
|
Your browser does not support the video tag.
|
||||||
<video
|
</video>
|
||||||
class="media"
|
{% endif %}
|
||||||
controls
|
{% endfor %}
|
||||||
autoplay="autoplay"
|
{% if descendant.card %}
|
||||||
muted
|
|
||||||
loop
|
|
||||||
alt="{{ media.description or 'media attachment' }}"
|
|
||||||
title="{{ media.description or 'media attachment' }}"
|
|
||||||
>
|
|
||||||
<source src="{{media.url}}" type="video/mp4" />
|
|
||||||
Your browser does not support the video tag.
|
|
||||||
</video>
|
|
||||||
{% endif %} {% endfor %} {% if descendant.card %}
|
|
||||||
<a href="{{ descendant.card.url }}">
|
<a href="{{ descendant.card.url }}">
|
||||||
<div class="link_card">
|
<div class="link_card">
|
||||||
<small>
|
<small>
|
||||||
|
|
|
@ -86,7 +86,7 @@ def clean_author(account):
|
||||||
def clean_status(status):
|
def clean_status(status):
|
||||||
clean = clean_dict(status, ['id', 'content', 'created_at', 'url', 'media_attachments', 'card'])
|
clean = clean_dict(status, ['id', 'content', 'created_at', 'url', 'media_attachments', 'card'])
|
||||||
clean['account'] = clean_author(status['account'])
|
clean['account'] = clean_author(status['account'])
|
||||||
clean['content'] = markdown.markdown("<section markdown='block'>"+ clean['content'] +"<section>", extensions=['md_in_html'])
|
clean['content'] = markdown.markdown("<section markdown='block'>"+ clean['content'] +"</section>", extensions=['md_in_html'])
|
||||||
for emoji in status['emojis']:
|
for emoji in status['emojis']:
|
||||||
clean['content'] = clean['content'].replace(":" + emoji['shortcode'] + ":", '<img alt="' + emoji['shortcode'] + ' emoji" class="emoji" src="'+emoji['url']+'" />')
|
clean['content'] = clean['content'].replace(":" + emoji['shortcode'] + ":", '<img alt="' + emoji['shortcode'] + ' emoji" class="emoji" src="'+emoji['url']+'" />')
|
||||||
return clean
|
return clean
|
||||||
|
|
Loading…
Reference in a new issue