mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-30 13:48:13 +08:00
Fix and refactor website meta tags for better SEO and social media previews
This commit is contained in:
Keavon Chambers
@@ -1,8 +1,10 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Page not found{% endblock title %}
|
||||
{%- block head -%}
|
||||
{%- set title = "Page not found" -%}
|
||||
{%- endblock head -%}
|
||||
|
||||
{% block content %}
|
||||
{%- block content -%}
|
||||
<section id="404">
|
||||
<div class="section">
|
||||
<h1>Page not found</h1>
|
||||
@@ -11,4 +13,4 @@
|
||||
<a href="/" class="button arrow">Home Page</a>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock content %}
|
||||
{%- endblock content -%}
|
||||
|
||||
@@ -1,40 +1,36 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Blog | {% set this = section | default(value = page) %}{{ this.title }}{% endblock title %}
|
||||
|
||||
{% block head %}
|
||||
{% set this = section | default(value = page) %}
|
||||
<link rel="stylesheet" href="/article.css">
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:title" content="{{ this.title | safe }}.">
|
||||
<meta property="og:image" content="{{ this.extra.banner_png | safe }}">
|
||||
<meta property="og:url" content="{{ current_url | safe }}">
|
||||
{% endblock head %}
|
||||
|
||||
{% block content %}
|
||||
{% set this = section | default(value = page) %}
|
||||
{%- block head -%}{%- set page = page | default(value = section) -%}
|
||||
{%- set title = "Blog | " ~ page.title -%}
|
||||
{%- set meta_title = page.title -%}
|
||||
{%- set meta_image = page.extra.banner_png | safe -%}
|
||||
{%- set meta_article_type = true -%}
|
||||
{%- set meta_description = page.extra.summary | default(value = page.content | striptags | safe | linebreaksbr | replace(from = "<br>", to = " ") | replace(from = " ", to = " ") | trim | truncate(length = 200)) -%}
|
||||
{%- set css = ["article.css"] -%}
|
||||
{%- endblock head -%}
|
||||
|
||||
{%- block content -%}{%- set page = page | default(value = section) -%}
|
||||
<section class="reading-material">
|
||||
<div class="section">
|
||||
<div class="details">
|
||||
<h1 class="headline">{{ this.title }}</h2>
|
||||
<span class="publication">By {{ this.extra.author }}. {{ this.date | date(format = "%B %d, %Y", timezone="America/Los_Angeles") }}.</span>
|
||||
<img class="banner" src="{{ this.extra.banner | safe }}" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" />
|
||||
<h1 class="headline">{{ page.title }}</h2>
|
||||
<span class="publication">By {{ page.extra.author }}. {{ page.date | date(format = "%B %d, %Y", timezone="America/Los_Angeles") }}.</span>
|
||||
<img class="banner" src="{{ page.extra.banner | safe }}" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" />
|
||||
</div>
|
||||
<hr />
|
||||
<article>
|
||||
{{ this.content | safe }}
|
||||
{{ page.content | safe }}
|
||||
</article>
|
||||
{% if this.extra.reddit or this.extra.twitter %}
|
||||
{% if page.extra.reddit or page.extra.twitter %}
|
||||
<hr />
|
||||
<div class="social">
|
||||
{% if this.extra.reddit %}
|
||||
<a href="{{ this.extra.reddit | safe }}" target="_blank" class="button arrow">
|
||||
{% if page.extra.reddit %}
|
||||
<a href="{{ page.extra.reddit | safe }}" target="_blank" class="button arrow">
|
||||
<img src="https://static.graphite.rs/icons/reddit.svg" /><span>Comment on Reddit</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if this.extra.twitter %}
|
||||
<a href="{{ this.extra.twitter | safe }}" target="_blank" class="button arrow">
|
||||
{% if page.extra.twitter %}
|
||||
<a href="{{ page.extra.twitter | safe }}" target="_blank" class="button arrow">
|
||||
<img src="https://static.graphite.rs/icons/twitter.svg" /><span>Comment on Twitter</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
@@ -42,4 +38,8 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
{% endblock content %}
|
||||
{%- if not page.summary -%}
|
||||
{{ throw(message = "ARTICLE HAS NO SUMMARY! After the first paragraph (or two short ones), a `<!-- more -->` comment must be inserted in the markdown. Otherwise the blog page will be missing its preview text." | safe) }}
|
||||
{%- endif -%}
|
||||
{%- endblock content -%}
|
||||
|
||||
|
||||
+29
-15
@@ -1,13 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
{% set this = section | default(value = page | default(value = false)) %}
|
||||
{%- block head -%}{%- endblock head -%}
|
||||
{%- set page = page | default(value = section | default(value = false)) -%}
|
||||
<meta charset="utf-8">
|
||||
<title>Graphite | {{ title | safe }}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimum-scale=1">
|
||||
<title>Graphite | {% block title %}{% endblock title %}</title>
|
||||
{% block rss %}
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path = 'blog/rss.xml', trailing_slash = false) }}">
|
||||
{% endblock %}
|
||||
{% if current_path -%}
|
||||
<meta property="og:url" content="https://graphite.rs{{ current_path | safe }}">
|
||||
{%- endif %}
|
||||
{% if meta_description -%}
|
||||
<meta name="description" content="{{ meta_description | safe }}">
|
||||
<meta property="og:description" content="{{ meta_description | safe }}" />
|
||||
<meta name="twitter:description" content="{{ meta_description | safe }}" />
|
||||
{%- endif %}
|
||||
<meta property="og:image" content="{{ meta_image | default(value = 'https://static.graphite.rs/logos/splash.png' | safe) | safe }}">
|
||||
<meta name="twitter:image" content="{{ meta_image | default(value = 'https://static.graphite.rs/logos/splash.png' | safe) | safe }}" />
|
||||
<meta property="og:title" content="{{ meta_title | default(value = title | safe) | safe }}">
|
||||
<meta name="twitter:title" content="{{ meta_title | default(value = title | safe) | safe }}" />
|
||||
<meta property="og:type" content="{% if meta_article_type %}article{% else %}website{% endif %}" />
|
||||
<meta property="og:site_name" content="Graphite" />
|
||||
<meta name="twitter:site" content="@GraphiteEditor" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
{% block rss -%}
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path = 'blog/rss.xml', trailing_slash = false) | safe }}">
|
||||
{%- endblock %}
|
||||
<link rel="preconnect" href="https://rsms.me/">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
@@ -15,17 +32,14 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=EB+Garamond:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/base.css">
|
||||
<link rel="stylesheet" href="/syntax-highlighting.css">
|
||||
{% if this and this.extra.css %}
|
||||
{% for css in this.extra.css %}
|
||||
<link rel="stylesheet" href="/{{ css | safe }}">
|
||||
{%- set extra_css = page.extra.css | default(value = []) | concat(with = css | default(value = [])) -%}
|
||||
{% for css_path in extra_css %}
|
||||
<link rel="stylesheet" href="/{{ css_path | safe }}">
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% block head %}{% endblock head %}
|
||||
{% if this and this.extra.js %}
|
||||
{% for js in this.extra.js %}
|
||||
<script src="/js/{{ js | safe }}"></script>
|
||||
{%- set extra_js = page.extra.js | default(value = []) | concat(with = js | default(value = [])) -%}
|
||||
{% for js_path in extra_js %}
|
||||
<script src="/js/{{ js_path | safe }}"></script>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<script src="/js/text-justification.js"></script>
|
||||
<script src="/js/navbar.js"></script>
|
||||
<!-- INDEX_HTML_HEAD_REPLACEMENT -->
|
||||
@@ -78,7 +92,7 @@
|
||||
</header>
|
||||
<main>
|
||||
<div class="content">
|
||||
{% block content %}{% endblock %}
|
||||
{%- block content -%}{%- endblock -%}
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
+13
-15
@@ -1,35 +1,33 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ section.title }}{% endblock title %}
|
||||
{%- block head -%}{%- set page = page | default(value = section) -%}
|
||||
{%- set title = page.title -%}
|
||||
{%- set meta_title = "Graphite Blog" -%}
|
||||
{%- set css = ["blog.css"] -%}
|
||||
{%- endblock head -%}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="/blog.css">
|
||||
{% endblock head %}
|
||||
|
||||
{% block content %}
|
||||
{{ section.content | safe }}
|
||||
{%- block content -%}{%- set page = page | default(value = section) -%}
|
||||
{{ page.content | safe }}
|
||||
|
||||
<section id="articles" class="section">
|
||||
{% for page in section.pages %}
|
||||
{% for page in page.pages %}
|
||||
<section>
|
||||
<div class="banner">
|
||||
<a href="{{ page.path }}"><img src="{{ page.extra.banner | safe }}" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" /></a>
|
||||
<a href="{{ page.path | safe }}"><img src="{{ page.extra.banner | safe }}" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" /></a>
|
||||
</div>
|
||||
<div class="details">
|
||||
<div class="headline">
|
||||
<h2><a href="{{ page.path }}">{{ page.title }}</a></h2>
|
||||
<h2><a href="{{ page.path | safe }}">{{ page.title }}</a></h2>
|
||||
</div>
|
||||
<span class="publication">By {{ page.extra.author }}. {{ page.date | date(format = "%B %d, %Y", timezone = "America/Los_Angeles") }}.</span>
|
||||
<div class="summary">
|
||||
<div>
|
||||
{{ page.summary | safe }}
|
||||
</div>
|
||||
<div>{{ page.summary | safe }}</div>
|
||||
</div>
|
||||
<div class="keep-reading">
|
||||
<a href="{{ page.path }}" class="link arrow">Keep Reading</a>
|
||||
<a href="{{ page.path | safe }}" class="link arrow">Keep Reading</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endblock content %}
|
||||
{%- endblock content -%}
|
||||
|
||||
+30
-30
@@ -1,17 +1,17 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{% set this = section | default(value = page) %}{{ this.title }}{% endblock title %}
|
||||
{%- block head -%}{%- set page = page | default(value = section) -%}
|
||||
{%- set title = page.title -%}
|
||||
{%- set meta_article_type = true -%}
|
||||
{%- set meta_description = page.extra.summary | default(value = page.content | striptags | safe | linebreaksbr | replace(from = "<br>", to = " ") | replace(from = " ", to = " ") | trim | truncate(length = 200)) -%}
|
||||
{%- set css = ["book.css"] -%}
|
||||
{%- set js = ["book.js"] -%}
|
||||
{%- endblock head -%}
|
||||
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="/book.css">
|
||||
<script src="/js/book.js"></script>
|
||||
{% endblock head %}
|
||||
|
||||
{% block content %}
|
||||
{% set this = section | default(value = page) %}
|
||||
{%- block content -%}{%- set page = page | default(value = section) -%}
|
||||
|
||||
{# Search this page-or-section's ancestor tree for a section that identifies itself as a book, and save it to a `book` variable #}
|
||||
{% for ancestor_path in this.ancestors | concat(with = this.relative_path) %}
|
||||
{% for ancestor_path in page.ancestors | concat(with = page.relative_path) %}
|
||||
{# Get the ancestor section from this ancestor path string #}
|
||||
{% if ancestor_path is ending_with("/_index.md") %}
|
||||
{% set potential_book = get_section(path = ancestor_path) %}
|
||||
@@ -44,23 +44,23 @@
|
||||
</svg>
|
||||
</button>
|
||||
<ul>
|
||||
<li class="title{% if current_path == book.path %} active{% endif %}"><a href="{{ book.path }}" title="{{ book.title }}">{{ book.title }}</a></li>
|
||||
<li class="title{% if current_path == book.path %} active{% endif %}"><a href="{{ book.path | safe }}" title="{{ book.title | safe }}">{{ book.title }}</a></li>
|
||||
</ul>
|
||||
{% for chapter in chapters %}
|
||||
<ul>
|
||||
<li class="chapter{% if current_path == chapter.path %} active{% endif %}"><a href="{{ chapter.path }}" title="{{ chapter.title }}">» {{ chapter.title }}</a></li>
|
||||
<li class="chapter{% if current_path == chapter.path %} active{% endif %}"><a href="{{ chapter.path | safe }}" title="{{ chapter.title | safe }}">» {{ chapter.title }}</a></li>
|
||||
|
||||
{% set_global flat_pages = flat_pages | concat(with = chapter) %}
|
||||
{% if chapter == this %}{% set_global flat_index_of_this = flat_pages | length - 1 %}{% endif %}
|
||||
{% if chapter == page %}{% set_global flat_index_of_this = flat_pages | length - 1 %}{% endif %}
|
||||
|
||||
{% if chapter.pages %}
|
||||
|
||||
{% for page in chapter.pages | sort(attribute = "extra.order") %}
|
||||
{% for chapter_page in chapter.pages | sort(attribute = "extra.order") %}
|
||||
|
||||
{% set_global flat_pages = flat_pages | concat(with = page) %}
|
||||
{% if page == this %}{% set_global flat_index_of_this = flat_pages | length - 1 %}{% endif %}
|
||||
{% set_global flat_pages = flat_pages | concat(with = chapter_page) %}
|
||||
{% if chapter_page == page %}{% set_global flat_index_of_this = flat_pages | length - 1 %}{% endif %}
|
||||
|
||||
<li {% if current_path == page.path %}class="active"{% endif %}><a href="{{ page.path }}" title="{{ page.title }}">» {{ page.title }}</a></li>
|
||||
<li {% if current_path == chapter_page.path %}class="active"{% endif %}><a href="{{ chapter_page.path | safe }}" title="{{ page.title | safe }}">» {{ chapter_page.title }}</a></li>
|
||||
|
||||
{% endfor %}
|
||||
|
||||
@@ -81,10 +81,10 @@
|
||||
<rect x="2" y="11" width="20" height="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h1>{{ this.title }}</h1>
|
||||
<h1>{{ page.title }}</h1>
|
||||
</div>
|
||||
<article>
|
||||
{{ this.content | safe }}
|
||||
{{ page.content | safe }}
|
||||
</article>
|
||||
|
||||
<hr />
|
||||
@@ -94,7 +94,7 @@
|
||||
{% set prev = flat_pages | nth(n = flat_index_of_this - 1) %}
|
||||
{% endif %}
|
||||
{% if prev %}
|
||||
<a href="{{ prev.path }}" title="{{ prev.title }}">
|
||||
<a href="{{ prev.path | safe }}" title="{{ prev.title | safe }}">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20,0C8.95,0,0,8.95,0,20c0,11.05,8.95,20,20,20c11.05,0,20-8.95,20-20C40,8.95,31.05,0,20,0z M20,38c-9.93,0-18-8.07-18-18S10.07,2,20,2s18,8.07,18,18S29.93,38,20,38z" />
|
||||
<polygon points="24.71,10.71 23.29,9.29 12.59,20 23.29,30.71 24.71,29.29 15.41,20" />
|
||||
@@ -109,7 +109,7 @@
|
||||
{% set next = flat_pages | nth(n = flat_index_of_this + 1) %}
|
||||
{% endif %}
|
||||
{% if next %}
|
||||
<a href="{{ next.path }}" title="{{ next.title }}">
|
||||
<a href="{{ next.path | safe }}" title="{{ next.title | safe }}">
|
||||
{{ next.title }}
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20,0C8.95,0,0,8.95,0,20c0,11.05,8.95,20,20,20c11.05,0,20-8.95,20-20C40,8.95,31.05,0,20,0z M20,38c-9.93,0-18-8.07-18-18S10.07,2,20,2s18,8.07,18,18S29.93,38,20,38z" />
|
||||
@@ -124,29 +124,29 @@
|
||||
<aside class="contents">
|
||||
<ul>
|
||||
<li class="title">
|
||||
<a href="#" title="{% if this.toc | length > 0 %}Contents (top ↑){% else %}Back to top ↑{% endif %}">
|
||||
{% if this.toc | length > 0 %}Contents<span> (top ↑)</span>{% else %}Back to top ↑{% endif %}
|
||||
<a href="#" title="{% if page.toc | length > 0 %}Contents (top ↑){% else %}Back to top ↑{% endif %}">
|
||||
{% if page.toc | length > 0 %}Contents<span> (top ↑)</span>{% else %}Back to top ↑{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
{% for depth_1 in this.toc %}
|
||||
<li><a href="#{{ depth_1.id }}" title="{{ depth_1.title }}">{{ depth_1.title }}</a></li>
|
||||
{% for depth_1 in page.toc %}
|
||||
<li><a href="#{{ depth_1.id }}" title="{{ depth_1.title | safe }}">{{ depth_1.title }}</a></li>
|
||||
{% for depth_2 in depth_1.children %}
|
||||
<ul>
|
||||
<li><a href="#{{ depth_2.id }}" title="{{ depth_2.title }}">{{ depth_2.title }}</a></li>
|
||||
<li><a href="#{{ depth_2.id }}" title="{{ depth_2.title | safe }}">{{ depth_2.title }}</a></li>
|
||||
{% for depth_3 in depth_2.children %}
|
||||
<ul>
|
||||
<li><a href="#{{ depth_3.id }}" title="{{ depth_3.title }}">{{ depth_3.title }}</a></li>
|
||||
<li><a href="#{{ depth_3.id }}" title="{{ depth_3.title | safe }}">{{ depth_3.title }}</a></li>
|
||||
{% for depth_4 in depth_3.children %}
|
||||
<ul>
|
||||
<li><a href="#{{ depth_4.id }}" title="{{ depth_4.title }}">{{ depth_4.title }}</a></li>
|
||||
<li><a href="#{{ depth_4.id }}" title="{{ depth_4.title | safe }}">{{ depth_4.title }}</a></li>
|
||||
{% for depth_5 in depth_4.children %}
|
||||
<ul>
|
||||
<li><a href="#{{ depth_5.id }}" title="{{ depth_5.title }}">{{ depth_5.title }}</a></li>
|
||||
<li><a href="#{{ depth_5.id }}" title="{{ depth_5.title | safe }}">{{ depth_5.title }}</a></li>
|
||||
{% for depth_6 in depth_5.children %}
|
||||
<ul>
|
||||
<li><a href="#{{ depth_6.id }}" title="{{ depth_6.title }}">{{ depth_6.title }}</a></li>
|
||||
<li><a href="#{{ depth_6.id }}" title="{{ depth_6.title | safe }}">{{ depth_6.title }}</a></li>
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
@@ -161,4 +161,4 @@
|
||||
</ul>
|
||||
</aside>
|
||||
</section>
|
||||
{% endblock content %}
|
||||
{%- endblock content -%}
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ page.title }}{% endblock title %}
|
||||
{%- block head -%}{%- set page = page | default(value = section) -%}
|
||||
{%- set title = page.title -%}
|
||||
{%- endblock head -%}
|
||||
|
||||
{% block content %}
|
||||
{%- block content -%}{%- set page = page | default(value = section) -%}
|
||||
{{ page.content | safe }}
|
||||
{% endblock content %}
|
||||
{%- endblock content -%}
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ section.title }}{% endblock title %}
|
||||
{%- block head -%}{%- set page = page | default(value = section) -%}
|
||||
{%- set title = page.title -%}
|
||||
{%- endblock head -%}
|
||||
|
||||
{% block content %}
|
||||
{{ section.content | safe }}
|
||||
{% endblock content %}
|
||||
{%- block content -%}{%- set page = page | default(value = section) -%}
|
||||
{{ page.content | safe }}
|
||||
{%- endblock content -%}
|
||||
|
||||
Reference in New Issue
Block a user