Initial fork commit

README.md

@@ -0,0 +1,27 @@
+What is this ?
+==============
+
+Alabaster Hotwire is a fork of [Alabaster](http://alabaster.readthedocs.io), the default Sphinx theme,
+quickly modified (hacked ?) to follow the same style as [Hotwire.dev](https://hotwire.dev).
+
+How to use it for Django Hotwire projects ?
+===========================================
+
+Change the theme in the `conf.py` file
+```python
+html_theme = "alabaster_hotwire"
+```
+
+Then, add this variable to populate the top bar with the following:
+```python
+html_context = {
+    'topbar' : [
+        {"url": "https://turbo-django.readthedocs.io/", "name": "Turbo Django", "active": True},
+        {"url": "https://django-turbo-response.readthedocs.io/", "name": "Django Turbo Response"},
+        {"name": "Stimulus Django"},
+    ]
+}
+```
+
+We should try to keep the same like on every documentation website we have so users won't be surprised.
+Just change `active` to `True` to match the current repo.

alabaster/__init__.py → alabaster_hotwire/__init__.py

@@ -1,6 +1,6 @@
 import os
 
-from alabaster import _version as version
+from alabaster_hotwire import _version as version
 
 
 def get_path():
@@ -12,13 +12,13 @@ def get_path():
 
 
 def update_context(app, pagename, templatename, context, doctree):
-    context["alabaster_version"] = version.__version__
+    context["alabaster_hotwire_version"] = version.__version__
 
 
 def setup(app):
     # add_html_theme is new in Sphinx 1.6+
     if hasattr(app, "add_html_theme"):
         theme_path = os.path.abspath(os.path.dirname(__file__))
-        app.add_html_theme("alabaster", theme_path)
+        app.add_html_theme("alabaster_hotwire", theme_path)
     app.connect("html-page-context", update_context)
     return {"version": version.__version__, "parallel_read_safe": True}

alabaster/layout.html → alabaster_hotwire/layout.html

@@ -10,6 +10,9 @@
     <link rel="canonical" href="{{ theme_canonical_url }}{{ pagename }}.html"/>
   {% endif %}
   <meta name="viewport" content="width=device-width, initial-scale=0.9, maximum-scale=0.9" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jost">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
 {% endblock %}
 
 {# top+bottom related navs; we also have our own in sidebar #}
@@ -41,6 +44,18 @@
 
 {# Nav should appear before content, not after #}
 {%- block content %}
+<nav class="jump">
+  <ul class="jump__list">
+    <li><a class="jump__list-link jump__list-link--hotwire" href="https://github.com/hotwire-django">Hotwire Django:</a></li>
+    {% for out in topbar %}
+      <li><a
+        class="jump__list-link jump__list-link{% if not out.url %}--disabled{% endif%}{% if out.active %}--active{% endif %}"
+        href="{{out.url}}">
+          {{out.name}}
+      </a></li>
+    {% endfor %}
+  </ul>
+</nav>
 {%- if theme_fixed_sidebar|lower == 'true' %}
   <div class="document">
     {{ sidebar() }}
@@ -86,17 +101,10 @@
 
 {%- block footer %}
     <div class="footer">
-      {% if show_copyright %}&copy;{{ copyright }}.{% endif %}
-      {% if theme_show_powered_by|lower == 'true' %}
-      {% if show_copyright %}|{% endif %}
-      Powered by <a href="http://sphinx-doc.org/">Sphinx {{ sphinx_version }}</a>
-      &amp; <a href="https://github.com/bitprophet/alabaster">Alabaster {{ alabaster_version }}</a>
-      {% endif %}
-      {%- if show_source and has_source and sourcename %}
-      {% if show_copyright or theme_show_powered_by %}|{% endif %}
-      <a href="{{ pathto('_sources/' + sourcename, true)|e }}"
-          rel="nofollow">{{ _('Page source') }}</a>
-      {%- endif %}
+      Brought to you by the
+      <a href="https://github.com/hotwire-django" target="_blank">Hotwire Django</a> team.
+      Standing on the shoulder of <a href="https://github.com/hotwired/"target="_blank">Giants</a>.
+      <span class="dim">Hotwire Django is not affiliated with Hotwire.dev nor Basecamp</span>
     </div>
 
     {% if theme_github_banner|lower != 'false' %}

alabaster/static/alabaster.css_t → alabaster_hotwire/static/alabaster.css_t

@@ -58,10 +58,9 @@
 /* -- page layout ----------------------------------------------------------- */
 
 body {
-    font-family: {{ theme_font_family }};
-    font-size: {{ theme_font_size }};
-    background-color: {{ theme_base_bg }};
-    color: {{ theme_base_text }};
+    font-size: 16px;
+    background-color: #fff;
+    color: black;
     margin: 0;
     padding: 0;
 }
@@ -85,15 +84,15 @@ div.sphinxsidebar {
     width: {{ theme_sidebar_width }};
     font-size: 14px;
     line-height: 1.5;
+    font-family: "Jost", sans-serif;
+
 }
 
 hr {
     border: 1px solid {{ theme_hr_border }};
 }
 
 div.body {
-    background-color: {{ theme_body_bg  }};
-    color: {{ theme_body_text }};
     padding: 0 30px 0 30px;
 }
 
@@ -104,17 +103,15 @@ div.body > .section {
 div.footer {
     width: {{ theme_page_width }};
     margin: 20px auto 30px auto;
-    font-size: 14px;
-    color: {{ theme_footer_text }};
-    text-align: right;
+    font-size: 0.85em;
+    font-style: italic;
 }
 
-div.footer a {
-    color: {{ theme_footer_text }};
+div.footer .dim {
+    color: #888;
 }
 
 p.caption {
-    font-family: {{ theme_caption_font_family }};
     font-size: {{ theme_caption_font_size }};
 }
 
@@ -162,7 +159,6 @@ div.sphinxsidebarwrapper p.blurb {
 
 div.sphinxsidebar h3,
 div.sphinxsidebar h4 {
-    font-family: {{ theme_head_font_family }};
     color: {{ theme_sidebar_header }};
     font-size: 24px;
     font-weight: normal;
@@ -206,7 +202,6 @@ div.sphinxsidebar ul li.toctree-l2 > a {
 
 div.sphinxsidebar input {
     border: 1px solid {{ theme_sidebar_search_button }};
-    font-family: {{ theme_font_family }};
     font-size: 1em;
 }
 
@@ -252,10 +247,13 @@ div.body h3,
 div.body h4,
 div.body h5,
 div.body h6 {
-    font-family: {{ theme_head_font_family }};
-    font-weight: normal;
-    margin: 30px 0px 10px 0px;
-    padding: 0;
+    margin-top: 1.5em;
+    margin-bottom: 0.75em;
+    font-family: "Jost", sans-serif;
+    font-weight: 600;
+    letter-spacing: -.01em;
+    line-height: 1.1em;
+    word-wrap: break-word;
 }
 
 div.body h1 { margin-top: 0; padding-top: 0; font-size: 240%; }
@@ -293,7 +291,6 @@ div.admonition tt.xref, div.admonition code.xref, div.admonition a tt {
 }
 
 div.admonition p.admonition-title {
-    font-family: {{ theme_head_font_family }};
     font-weight: normal;
     font-size: 24px;
     margin: 0 0 10px 0;
@@ -382,7 +379,6 @@ p.admonition-title:after {
 }
 
 pre, tt, code {
-    font-family: {{theme_code_font_family}};
     font-size: {{ theme_code_font_size }};
 }
 
@@ -494,7 +490,7 @@ ul, ol {
 }
 
 pre {
-    background: {{ theme_pre_bg }};
+    background: #fbf7f0;
     padding: 7px 30px;
     margin: 15px 0px;
     line-height: 1.3em;
@@ -510,7 +506,7 @@ dl pre, blockquote pre, li pre {
 }
 
 tt, code {
-    background-color: {{ theme_code_bg }};
+    background-color: #fbf7f0;
     color: {{ theme_code_text }};
     /* padding: 1px 2px; */
 }
@@ -767,3 +763,115 @@ nav#breadcrumbs li+li:before {
         display: none;
     }
 }
+
+
+
+//
+
+:root {
+    --color-white: #fff;
+    --color-black: #191919;
+    --color-django: #f0fbf5;
+    --color-yellow: #ffe801;
+    --color-teal: #15d1d8;
+    --color-pink: #ef6baa;
+    --color-text: var(--color-black);
+    --color-sheet: var(--color-white);
+    --color-neutral: var(--color-django);
+    --color-link: var(--color-yellow);
+    --color-accent: var(--color-yellow);
+    --color-positive: var(--color-teal);
+    --color-negative: var(--color-pink);
+    --space-xs: 0.25em;
+    --space-s: 0.5em;
+    --space-m: 1em;
+    --space-l: 1.5em;
+    --space-xl: 3em;
+    --space-xxl: 4em;
+    --space-xxxl: 6em;
+    --font-main: "Bitter", serif;
+    --type-base: max(1.8em,min(calc(1em + 0.9vw),2.4em));
+    --type-xxxs: 55%;
+    --type-xxs: 65%;
+    --type-xs: 75%;
+    --type-s: 85%;
+    --type-m: 100%;
+    --type-l: 120%;
+    --type-xl: 150%;
+    --type-xxl: 200%;
+    --type-xxxl: 300%;
+    --type-xxxxl: 600%;
+    --leading-s: 1.1;
+    --leading-m: 1.4;
+    --leading-l: 1.7;
+    --leading-xl: 2;
+}
+
+body {
+    /* background-color: var(--color-django); */
+    font-family: var(--font-main);
+    //font-size: var(--type-base);
+    font-variation-settings: "wdth" 180;
+    color: var(--color-text);
+}
+
+
+.jump {
+  margin: 0;
+  padding: 4px 1em;
+  color: #FFF;
+  background-color: #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Jost", sans-serif;
+  text-transform: uppercase;
+  font-style: italic; }
+  @media (min-width: 40em) {
+    .jump {
+      justify-content: flex-start; } }
+
+.jump__list {
+  list-style-type: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0; }
+  .jump__list li {
+    margin: 0;
+    padding: 0; }
+    .jump__list li:nth-child(2)::after, .jump__list li:nth-child(3)::after {
+      content: "/";
+      display: inline-block;
+      margin: 0 0.25em 0 0.125em; }
+
+.jump__list-link {
+  display: inline-block;
+  margin: 0;
+  padding: 0.5em 0.125em;
+  color: #FFF;
+  font-weight: 500;
+  text-decoration: none; }
+  @media (min-width: 40em) {
+    .jump__list-link {
+      padding: 0.125em;
+      font-size: 0.85em; } }
+  .jump__list-link:visited {
+    color: #FFF; }
+  .jump__list-link:hover {
+    color: #ffe801; }
+
+.jump__list-link--hotwire {
+  font-weight: 700;
+  margin-right: 0.25em; }
+
+.jump__list-link--active {
+  color: #5cd8e5 !important;
+  text-decoration: none;
+  pointer-events: none; }
+
+.jump__list-link--disabled {
+  opacity: 0.5;
+  text-decoration: none;
+  pointer-events: none; }

alabaster/support.py → alabaster_hotwire/support.py

@@ -18,7 +18,7 @@
 
 
 # Originally based on FlaskyStyle which was based on 'tango'.
-class Alabaster(Style):
+class AlabasterHotwire(Style):
     background_color = "#f8f8f8"  # doesn't seem to override CSS 'pre' styling?
     default_style = ""
 

alabaster/theme.conf → alabaster_hotwire/theme.conf

@@ -1,7 +1,7 @@
 [theme]
 inherit = basic
 stylesheet = alabaster.css
-pygments_style = alabaster.support.Alabaster
+pygments_style = alabaster_hotwire.support.AlabasterHotwire
 
 [options]
 analytics_id =
@@ -123,8 +123,4 @@ code_bg = #ecf0f3
 code_text = #222
 code_hover = #EEE
 code_font_size = 0.9em
-code_font_family = 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace
-font_family = Georgia, serif
-head_font_family =
-caption_font_family = inherit
 code_highlight = #FFC