Fix and refactor website meta tags for better SEO and social media previews

This commit is contained in:
Keavon Chambers 2024-05-10 04:17:44 -07:00
parent 0c50d91516
commit d0c493cdb6
14 changed files with 121 additions and 97 deletions

View file

@ -6,6 +6,7 @@ date = 2022-02-12
banner = "https://static.graphite.rs/content/blog/2022-02-12-announcing-graphite-alpha.avif"
banner_png = "https://static.graphite.rs/content/blog/2022-02-12-announcing-graphite-alpha.png"
author = "Keavon Chambers"
summary = "The Graphite open source team announces the alpha release of their next-generation graphics editor, a web-based SVG editor with vector-based tools. Future plans include a node-based procedural workflow, a raster graphics compositing engine, and a native desktop client."
reddit = "https://www.reddit.com/r/graphite/comments/unw3hi/blog_post_announcing_graphite_alpha/"
twitter = "https://twitter.com/GraphiteEditor/status/1524663930697568256"
+++

View file

@ -6,6 +6,7 @@ date = 2022-03-12
banner = "https://static.graphite.rs/content/blog/2022-03-12-graphite-a-vision-for-the-future-of-2d-content-creation.avif"
banner_png = "https://static.graphite.rs/content/blog/2022-03-12-graphite-a-vision-for-the-future-of-2d-content-creation.png"
author = "Keavon Chambers"
summary = "Graphite is an open-source application for 2D graphics editing and digital content creation, offering a nondestructive, node-based workflow. It combines intuitive UI with powerful procedural image generators to revolutionize 2D content creation."
reddit = "https://www.reddit.com/r/graphite/comments/unw3va/blog_post_graphite_a_vision_for_the_future_of_2d/"
twitter = "https://twitter.com/GraphiteEditor/status/1524664010091556864"
+++

View file

@ -6,6 +6,7 @@ date = 2022-05-12
banner = "https://static.graphite.rs/content/blog/2022-05-12-distributed-computing-in-the-graphene-runtime__2.avif"
banner_png = "https://static.graphite.rs/content/blog/2022-05-12-distributed-computing-in-the-graphene-runtime__2.png"
author = "Keavon Chambers"
summary = "Graphite's 2D editor is built upon Graphene, a node-based editing system for nondestructive design across various data types designed to render artwork faster using multiple machines. The system optimizes execution paths, minimizes latency, and uses a distributed runtime for quick data processing."
reddit = "https://www.reddit.com/r/graphite/comments/unw45k/blog_post_distributed_computing_in_the_graphene/"
twitter = "https://twitter.com/GraphiteEditor/status/1524664083554791424"
+++

View file

@ -6,6 +6,7 @@ date = 2024-01-01
banner = "https://static.graphite.rs/content/blog/2024-01-01-looking-back-on-2023-and-what's-next.avif"
banner_png = "https://static.graphite.rs/content/blog/2024-01-01-looking-back-on-2023-and-what's-next.png"
author = "Keavon Chambers"
summary = "Looking back on 2023, we reflect on our significant achievements and milestones. As we move forward, we're excited to share what's next, promising a year filled with innovation and progress."
reddit = "https://www.reddit.com/r/graphite/comments/18xmoti/blog_post_looking_back_on_2023_and_whats_next/"
twitter = "https://twitter.com/GraphiteEditor/status/1742576805532577937"

View file

@ -5,6 +5,7 @@ date = 2024-02-22
banner = "https://static.graphite.rs/content/blog/2024-02-22-graphite-internships-announcing-participation-in-gsoc-2024.avif"
banner_png = "https://static.graphite.rs/content/blog/2024-02-22-graphite-internships-announcing-participation-in-gsoc-2024.png"
author = "Keavon Chambers"
summary = "Join Graphite in Google Summer of Code 2024 for a unique opportunity to contribute to open-source software development in Rust and computer graphics. Get paid while learning, working on self-contained projects under experienced mentors, and help Graphite grow."
reddit = "https://www.reddit.com/r/graphite/comments/1ax3l8z/blog_post_graphite_internships_announcing/"
twitter = "https://twitter.com/GraphiteEditor/status/1760619083396165703"
+++

View file

@ -5,6 +5,7 @@ date = 2024-05-09
banner = "https://static.graphite.rs/content/blog/2024-05-09-graphite-progress-report-q1-2024.avif"
banner_png = "https://static.graphite.rs/content/blog/2024-05-09-graphite-progress-report-q1-2024.png"
author = "Keavon Chambers & Hypercube"
summary = "Graphite's Q1 2024 update introduces a precise snapping system and a customizable grid for enhanced design control. The update also includes improved procedural scattering with the 'Copy to Points' node, demonstrated in new demo artwork."
reddit = "https://www.reddit.com/r/graphite/comments/1coa0if/blog_post_graphite_progress_report_q1_2024/"
twitter = "https://twitter.com/GraphiteEditor/status/1788698448348266946"
+++

View file

@ -125,14 +125,14 @@ Always on the bleeding edge and built to last— Graphite is written on a robust
<img class="atlas" style="--atlas-index: 0" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Imaginate (Stable Diffusion node/tool)</span>
</div>
<div class="informational ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Editable nested node subgraphs</span>
</div>
<div class="informational ongoing" title="Development Ongoing">
<img class="atlas" style="--atlas-index: 7" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Native desktop app (with <a target="_blank" href="https://tauri.app/">Tauri</a>)</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 8" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Custom subgraph nodes</span>
</div>
<div class="informational">
<img class="atlas" style="--atlas-index: 51" src="https://static.graphite.rs/icons/icon-atlas-roadmap__2.png" alt="" />
<span>Boolean operations for shapes</span>

View file

@ -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 -%}

View file

@ -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 -%}

View file

@ -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>

View file

@ -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 -%}

View file

@ -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 }}">&raquo; {{ chapter.title }}</a></li>
<li class="chapter{% if current_path == chapter.path %} active{% endif %}"><a href="{{ chapter.path | safe }}" title="{{ chapter.title | safe }}">&raquo; {{ 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 }}">&raquo; {{ page.title }}</a></li>
<li {% if current_path == chapter_page.path %}class="active"{% endif %}><a href="{{ chapter_page.path | safe }}" title="{{ page.title | safe }}">&raquo; {{ 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 -%}

View file

@ -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 -%}

View file

@ -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 -%}