From 6f36fef502270ee34fdf19b8c62c2dde985ca61d Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Tue, 19 Dec 2023 08:39:13 -0800
Subject: [PATCH] View transitions prototype

---
 datasette/templates/_facet_results.html | 2 +-
 datasette/templates/_table.html         | 2 +-
 datasette/templates/base.html           | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/datasette/templates/_facet_results.html b/datasette/templates/_facet_results.html
index 034e9678..24d386bd 100644
--- a/datasette/templates/_facet_results.html
+++ b/datasette/templates/_facet_results.html
@@ -1,4 +1,4 @@
-<div class="facet-results">
+<div class="facet-results"  style="view-transition-name: facet-results">
     {% for facet_info in sorted_facet_results %}
         <div class="facet-info facet-{{ database|to_css_class }}-{{ table|to_css_class }}-{{ facet_info.name|to_css_class }}" id="facet-{{ facet_info.name|to_css_class }}" data-column="{{ facet_info.name }}">
             <p class="facet-info-name">
diff --git a/datasette/templates/_table.html b/datasette/templates/_table.html
index a1329ba7..9b57990e 100644
--- a/datasette/templates/_table.html
+++ b/datasette/templates/_table.html
@@ -1,7 +1,7 @@
 <!-- above-table-panel is a hook node for plugins to attach to . Displays even if no data available -->
 <div class="above-table-panel"> </div>
 {% if display_rows %}
-<div class="table-wrapper">
+<div class="table-wrapper" style="view-transition-name: table-wrapper">
     <table class="rows-and-columns">
         <thead>
             <tr>
diff --git a/datasette/templates/base.html b/datasette/templates/base.html
index ceead217..7da0484e 100644
--- a/datasette/templates/base.html
+++ b/datasette/templates/base.html
@@ -4,6 +4,7 @@
     <title>{% block title %}{% endblock %}</title>
     <link rel="stylesheet" href="{{ urls.static('app.css') }}?{{ app_css_hash }}">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="view-transition" content="same-origin">
 {% for url in extra_css_urls %}
     <link rel="stylesheet" href="{{ url.url }}"{% if url.get("sri") %} integrity="{{ url.sri }}" crossorigin="anonymous"{% endif %}>
 {% endfor %}