Merge pull request #84 from holoviz-topics/feature/social

Add social meta tags

mkdocs.yml

@@ -1,11 +1,15 @@
 site_name: Panel Chat Examples
-site_description: Example recipes for Panel Chat Components
+site_description: A collection of reference Panel chat apps with accessible source code
+site_author: HoloViz Panel
 
 repo_url: https://github.com/holoviz-topics/panel-chat-examples
 repo_name: holoviz-topics/panel-chat-examples
 
+canonical_url: https://holoviz-topics.github.io/panel-chat-examples/
+
 theme:
     name: material
+    custom_dir: 'overrides'
     logo: 'assets/images/panel-logo.png'
     features:
         - content.copy.code

overrides/main.html

@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+
+{% block extrahead %}
+  {% set title = config.site_name %}
+  {% if page and page.meta and page.meta.title %}
+      {% set title = title ~ " - " ~ page.meta.title %}
+  {% elif page and page.title and not page.is_homepage %}
+      {% set title = title ~ " - " ~ page.title | striptags %}
+  {% endif %}
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:site" content="@Panel_org" />
+  <meta name="twitter:creator" content="@Panel_org" />
+  <meta name="twitter:title" content="{{ title }}" />
+  <meta name="twitter:description" content="{{ config.site_description }}" />
+  <meta name="twitter:image" content="https://holoviz-topics.github.io/panel-chat-examples/assets/images/panel-chat-examples-card-800x418.png" />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="{{ title }}" />
+  <meta property="og:description" content="{{ config.site_description }}" />
+  <meta property="og:url" content="{{ page.canonical_url }}" />
+  <meta property="og:image" content="https://holoviz-topics.github.io/panel-chat-examples/assets/images/panel-chat-examples-card-1600x437.png" />
+  <meta property="og:image:type" content="image/png" />
+  <meta property="og:image:width" content="1600" />
+  <meta property="og:image:height" content="837" />
+{% endblock %}

scripts/social_card_app.py

@@ -0,0 +1,23 @@
+"""
+Used to create the panel-chat-examples-card-HEIGHTxWIDTH.png cards for social media
+"""
+import panel as pn
+
+pn.extension(design="material")
+
+
+async def callback(contents: str, user: str, instance: pn.chat.ChatInterface):
+    return """
+Panel Chat Examples is a collection of reference **Panel chat apps with accessible \
+source code**.
+
+**HoloViz Panel** is the powerful data exploration & web app framework for Python.
+
+<img src="https://panel.holoviz.org/_static/logo_horizontal_light_theme.png" \
+style="height:125px"></img>
+"""
+
+
+chat_interface = pn.chat.ChatInterface(callback=callback, callback_user="Assistant")
+chat_interface.send("**What is Panel Chat Examples**?", user="User", avatar="👩")
+chat_interface.servable()