Add social card generation

.github/workflows/mkdocs.yml

@@ -19,16 +19,25 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - name: Checkout Repository
+        uses: actions/checkout@v4
         with:
           submodules: true
           token: ${{ secrets.PAT }}
-      - uses: actions/setup-python@v2
+      - name: Install Python (pipenv)
+        uses: actions/setup-python@v5
+        with:
+          cache: "pipenv"
       - name: Setup Pages
         id: pages
         uses: actions/configure-pages@v5
-      - run: pip install -e mkdocs-material-insiders
-      - run: mkdocs build
+      - name: Install Python Dependencies
+        run: |
+          pip install pipenv
+          pipenv install
+          sudo apt install pngquant
+      - name: Build Site
+        run: pipenv run mkdocs build
       - name: Upload Artifact
         uses: actions/upload-pages-artifact@v3
         with:

.gitmodules

@@ -1,3 +1,3 @@
 [submodule "mkdocs-material-insiders"]
-	path = mkdocs-material-insiders
+	path = mkdocs-material
 	url = [email protected]:squidfunk/mkdocs-material-insiders.git

Pipfile

@@ -4,7 +4,7 @@ verify_ssl = true
 name = "pypi"
 
 [packages]
-mkdocs-material = {file = "mkdocs-material-insiders"}
+mkdocs-material = {path = "./mkdocs-material", extras = ["imaging"]}
 
 [dev-packages]
 

cards/page.yml

@@ -0,0 +1,123 @@
+definitions:
+  - &background_color >-
+    #000000
+
+  - &color >-
+    #ffffff
+
+  - &font_family >-
+    Montserrat
+
+  - &site_name >-
+    TRIPLEBIT
+
+  - &page_title >-
+    {{ page.meta.get("title", page.title) }}
+
+  - &page_description >-
+    {{ page.meta.get("description", config.site_description) or "" }}
+
+  - &logo >-
+    theme/public/triplebit-logo-square-white.svg
+
+  - &accent >-
+    theme/public/purple-globe.svg
+
+  - &url >-
+    {{ page.canonical_url }}
+
+# Meta tags
+tags:
+  # Open Graph
+  og:type: website
+  og:title: *page_title
+  og:description: *page_description
+  og:image: "{{ image.url }}"
+  og:image:type: "{{ image.type }}"
+  og:image:width: "{{ image.width }}"
+  og:image:height: "{{ image.height }}"
+  og:url: "{{ page.canonical_url }}"
+
+  # Mastodon
+  fediverse:creator: "@[email protected]"
+
+  # Twitter
+  twitter:site: "@triplebitnet"
+  twitter:card: summary_large_image
+  twitter:title: *page_title
+  twitter:description: *page_description
+  twitter:image: "{{ image.url }}"
+
+# -----------------------------------------------------------------------------
+# Specification
+# -----------------------------------------------------------------------------
+
+# Card size and layers
+size: { width: 1600, height: 800 }
+layers:
+  # Background
+  - background:
+      color: *background_color
+
+  - size: { width: 1000, height: 1000 }
+    offset: { x: 700, y: -100 }
+    background:
+      image: *accent
+
+  # Logo
+  - size: { width: 128, height: 128 }
+    offset: { x: 64, y: 64 }
+    background:
+      image: *logo
+
+  # Site name
+  - size: { width: 768, height: 105 }
+    offset: { x: 200, y: 75 }
+    typography:
+      content: *site_name
+      color: *color
+      font:
+        family: *font_family
+        style: Black Italic
+
+  # Page title
+  - size: { width: 864, height: 256 }
+    offset: { x: 62, y: 300 }
+    typography:
+      content: *page_title
+      align: start
+      color: *color
+      line:
+        amount: 3
+        height: 1.5
+      font:
+        family: *font_family
+        style: Bold
+
+  # Page description
+  - size: { width: 1080, height: 260 }
+    offset: { x: 64, y: 400 }
+    typography:
+      content: *page_description
+      align: start
+      color: *color
+      line:
+        amount: 5
+        height: 1.5
+      font:
+        family: *font_family
+        style: Regular
+
+  # URL
+  - size: { width: 1500, height: 32 }
+    offset: { x: 64, y: 720 }
+    typography:
+      content: *url
+      align: start
+      color: *color
+      line:
+        amount: 1
+        height: 1.5
+      font:
+        family: *font_family
+        style: Regular

docs/index.md

@@ -1,3 +1,10 @@
+---
+social:
+  cards_layout: default/only/image
+  cards_layout_options:
+    background_image: theme/public/globe-cover.svg
+---
+
 # ![AS401332](public/triplebit-logo.svg "Triplebit"){ width=70% .center }
 
 <script type="application/ld+json">

docs/monero.md

@@ -1,3 +1,7 @@
+---
+description: Triplebit operates a public Monero remote node accessible via both the clearnet internet and the Tor network.
+---
+
 # Monero Remote Node
 
 Triplebit operates a public **Monero remote node** accessible via both the clearnet internet and the Tor network:

docs/peering.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Peering
+description: Peering with Triplebit is an excellent way to contribute to the Tor network! We have an open peering policy, and we encourage peering with us at any Internet Exchange where we are hosted.
 ---
 
 Peering with Triplebit is an excellent way to contribute to the Tor network! We encourage peering with us directly if you are a member of the following Internet Exchanges:

docs/relays.md

@@ -1,3 +1,7 @@
+---
+description: Triplebit operates high performance, unfiltered, and high capacity exit relays on the Tor network. Our relays operate on 2602:f81c:9::/48 and 23.188.56.128/26 within AS401332.
+---
+
 # Tor Relays
 
 Triplebit operates Tor relays on **2602:f81c:9::/48** and **23.188.56.128/26** (specifically IPs 23.188.56**.130** through 23.188.56**.190**).

mkdocs.yml

@@ -1,4 +1,6 @@
 site_name: Triplebit
+site_description: |
+  Triplebit: A Minnesota, USA-based nonprofit internet service provider promoting privacy and human rights worldwide.
 site_url: https://www.triplebit.org/
 edit_uri: https://github.com/triplebit/triplebit.org/edit/main/docs/
 
@@ -30,7 +32,10 @@ markdown_extensions:
   - pymdownx.superfences
 
 plugins:
-  - privacy: {}
+  privacy: {}
+  social:
+    cards_layout_dir: cards
+    cards_layout: page
 
 exclude_docs: |
   !.well-known