5 files changed, 123 insertions, 0 deletions
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
new file mode 100644
index 000000000..024e48d6d
--- /dev/null
+++ b/bskyweb/templates/base.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>                                                                                          
+<html lang="en">
+<head>   
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="referrer" content="origin-when-cross-origin">
+  <title>{%- block head_title -%}Bluesky{%- endblock -%}</title>
+  <!-- Hello Humans! API docs at https://atproto.com -->
+  <style>
+    /* These styles make the body full-height */
+    html, body { height: 100%; }
+    /* These styles disable body scrolling if you are using <ScrollView> */
+    body { overflow: hidden; }
+    /* These styles make the root element full-height */
+    #app-root { display:flex; height:100%; }
+    /* Remove focus state on inputs */
+    *:focus { outline: 0; }
+  </style>
+  {% block head_bundle -%}<script defer src="/static/bundle.web.js"></script>{%- endblock %}
+  <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/>
+  <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png"/>
+  <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"/>
+  {% block head_page_meta -%}
+  <meta property="og:title" content="Bluesky Social"/>
+  <meta property="og:type" content="article"/>
+  <meta property="og:image" content="/static/default-social-card.png"/>
+  <meta name="twitter:title" content="Bluesky Social"/>
+  <meta name="twitter:description" content="See what&#x27;s next."/>
+  <meta name="twitter:image" content="/static/default-social-card.png"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:site" content="@bluesky"/>
+  {%- endblock %}
+	<!-- TODO: link rel=canonical -->
+	<!-- TODO: analytics code -->
+	<!-- TODO: could put <link rel="preload"> tags here -->
+  <meta name="generator" name="bskyweb">
+	{% block head_metadata %}{% endblock %}
+</head>
+<body>
+{%- block body_all %}
+	<div id="app-root">
+    <noscript>
+			{%- block noscript_extra %}{% endblock -%}
+      <h1>Javascript Required</h1>
+      <p>This is a heavily interactive web application, and Javascript is required. Simple HTML interfaces are possible, but that is not what this is.
+      <p>Learn more about Bluesky at <a href="https://blueskyweb.xyz">blueskyweb.xyz</a> and <a href="https://atproto.com">atproto.com</a>.
+    </noscript>
+	</div>
+{% endblock -%}
+</body>
+</html>
diff --git a/bskyweb/templates/error.html b/bskyweb/templates/error.html
new file mode 100644
index 000000000..e40d8c4ab
--- /dev/null
+++ b/bskyweb/templates/error.html
@@ -0,0 +1,15 @@
+{% extends "base.html" %}
+
+{% block head_title %}Error {{ statusCode }} - Bluesky{% endblock %}
+
+{# don't include the bundle on error pages #}
+{% block head_bundle %}{% endblock %}
+
+{% block body_all %}
+  {% if statusCode == 404 %}
+	  <h1>404: Not Found</h1>
+  {% else %}
+	  <h1>{{ statusCode }}: Server Error</h1>
+    <p>Sorry about that! Our <a href="https://bluesky.statuspage.io/">Status Page</a> might have more context.
+  {% endif %}
+{% endblock %}
diff --git a/bskyweb/templates/home.html b/bskyweb/templates/home.html
new file mode 100644
index 000000000..631f281c0
--- /dev/null
+++ b/bskyweb/templates/home.html
@@ -0,0 +1,7 @@
+{% extends "base.html" %}
+
+{% block head_title %}Bluesky{% endblock %}
+
+{% block noscript_extra %}
+<p>This is the home page.
+{% endblock %}
diff --git a/bskyweb/templates/post.html b/bskyweb/templates/post.html
new file mode 100644
index 000000000..a24f64ab5
--- /dev/null
+++ b/bskyweb/templates/post.html
@@ -0,0 +1,25 @@
+{% extends "base.html" %}
+
+{% block head_page_meta -%}
+<!-- TODO: "same as" indication with at:// URI? -->
+{%- if postView -%}
+	<meta property="og:type" content="article"/>
+	<meta name="twitter:card" content="summary"/>
+  {%- if postView.Author.DisplayName -%}
+	<meta property="og:title" content="{{ postView.Author.DisplayName }} / {{ postView.Author.Handle }}"/>
+	<meta name="twitter:title" content="{{ postView.Author.DisplayName }} / {{ postView.Author.Handle }}"/>
+  {%- else -%}
+	<meta property="og:title" content="{{ postView.Author.Handle }}"/>
+	<meta name="twitter:title" content="{{ postView.Author.Handle }}"/>
+  {%- endif -%}
+	{%- if postView.Record.Text -%}
+	<meta name="twitter:description" content="{{ postView.Record.Text }}"/>
+	<!-- TODO: could put any images in here, or author avatar -->
+	{%- endif -%}
+{%- endif -%}
+{%- endblock %}
+
+{% block noscript_extra -%}
+<p>{{ postView.Author.DisplayName }} / {{ postView.Author.Handle }}
+<p>{{ postView.Record.Text }}
+{%- endblock %}
diff --git a/bskyweb/templates/profile.html b/bskyweb/templates/profile.html
new file mode 100644
index 000000000..260f211a6
--- /dev/null
+++ b/bskyweb/templates/profile.html
@@ -0,0 +1,25 @@
+{% extends "base.html" %}
+
+{% block head_page_meta -%}
+<!-- TODO: "same as" indication with DID? -->
+{%- if profileView -%}
+	<meta property="og:type" content="article"/>
+	<meta name="twitter:card" content="summary"/>
+  {%- if profileView.DisplayName -%}
+	<meta property="og:title" content="{{ profileView.DisplayName }} / {{ profileView.Handle }}"/>
+	<meta name="twitter:title" content="{{ profileView.DisplayName }} / {{ profileView.Handle }}"/>
+  {%- else -%}
+	<meta property="og:title" content="{{ profileView.Handle }}"/>
+	<meta name="twitter:title" content="{{ profileView.Handle }}"/>
+  {%- endif -%}
+	<meta name="twitter:description" content="{{ profileView.Description }}"/>
+	{%- if profileView.Avatar -%}
+  <meta name="twitter:image" content="{{ profileView.Avatar }}"/>
+  {%- endif -%}
+{%- endif -%}
+{%- endblock %}
+
+{% block noscript_extra -%}
+<p>{{ profileView.DisplayName }} / {{ profileView.Handle }}
+<p>{{ profileView.Description }}
+{%- endblock %}