Jupyter Book tool page

content/includes/try-it-out-jupyter-book.html

@@ -0,0 +1,105 @@
+<div class="ui container">
+    <div class="ui horizontal divider">Try it out</div>
+</div>
+
+<section id="try-it-out">
+    <div class="ui padded container">
+      <h2 class="ui huge center aligned header">
+        Publish your book online with Read the Docs
+      </h2>
+
+      <div class="ui very padded centered grid">
+
+        <div class="ten wide computer sixteen wide tablet sixteen wide mobile column">
+          <div class="ui large left aligned basic vertical segment">
+
+            {# Stylized code blocks #}
+            {% call technical.code_block(title="<code>.readthedocs.yaml</code>", icon="fa-file") %}
+            {% markdown %}
+
+            ```yaml
+            version: 2
+            build:
+              os: ubuntu-22.04
+              tools:
+                python: "3.11"
+              jobs:
+                pre_build:
+                  # Generate the Sphinx configuration for
+                  # this Jupyter Book so it builds.
+                  - "jupyter-book config sphinx docs/"
+
+            # Dependencies required to build your docs
+            python:
+               install:
+                 - method: pip
+                   path: .
+                   extra_requirements:
+                     - sphinx
+
+            sphinx:
+              builder: html
+              configuration: docs/conf.py
+              fail_on_warning: true
+            ```
+            {% endmarkdown %}
+            {% endcall %}
+          </div>
+        </div>
+
+        <div class="middle aligned left aligned six wide computer twelve wide tablet sixteen wide mobile column">
+          <div class="ui padded basic segment">
+            <div class="ui relaxed list">
+
+              {%- set header_1 = "Create an account" %}
+              {%- set icon_1 = "fa-square-1" -%}
+              <span class="ui small teal header item">
+                <i class="fad {{ icon_1 }} secondary big icon"></i>
+                <span class="content">
+                  {{ header_1 }}
+                  <span class="sub header">
+                    <a data-analytics="signup-modal"
+                     onclick="jQuery('#signup-modal').modal('show');">
+                      Sign up
+                    </a>
+                    with GitHub or your email.
+                  </span>
+                </span>
+              </span>
+
+              {%- set header_2 = "Import your project" %}
+              {%- set icon_2 = "fa-square-2" -%}
+              <span class="ui small header item">
+                <i class="fad {{ icon_2 }} secondary big icon"></i>
+                <span class="content">
+                  {{ header_2 }}
+                  <span class="sub header">Select your existing Git repositories with a 1-click interface.</span>
+                </span>
+              </span>
+
+              {%- set header_3 = "Add YAML config" %}
+              {%- set icon_3 = "fa-square-3" -%}
+              <span class="ui small header item">
+                <i class="fad {{ icon_3 }} secondary big icon"></i>
+                <span class="content">
+                  {{ header_3 }}
+                  <span class="sub header">Copy this example, it probably does what you want 😉</span>
+                </span>
+              </span>
+
+              {%- set header_4 = "Your docs build on every commit" %}
+              {%- set icon_4 = "fa-square-4" -%}
+              <span class="ui small header item">
+                <i class="fad {{ icon_4 }} secondary big icon"></i>
+                <span class="content">
+                  {{ header_4 }}
+                  <span class="sub header">Like magic.</span>
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+</section>

content/includes/users-jupyter-book.html

@@ -0,0 +1,58 @@
+{% import "partials/basic.html" as basic %}
+
+<section id="testimonials">
+    <div class="ui container">
+    {{ basic.header_icon(
+        header="Join thousands of happy users",
+        subheader="",
+        icon="purple fa-message-lines",
+        icon_style="--fa-secondary-color: blueviolet;"
+    ) }}
+    <div class="ui three link stackable cards">
+      <a href="https://jupyterbook.org/" class="card">
+        <div class="content">
+            <div class="ui center aligned basic segment">
+            <img class="ui small image" src="{{ SITE_URL }}/images/jupyter-book-users-logo.png" alt="Jupyter Book logo" />
+            </div>
+            <div class="header">Jupyter Book</div>
+            <div class="meta">
+            Publishing
+            </div>
+            <div class="description">
+            Jupyter Book is an authoring tool to build beautiful, publication-quality books and documents from computational content.
+            </div>
+        </div>
+      </a>
+
+      <a href="https://jupysql.ploomber.io/" class="card">
+        <div class="content">
+            <div class="ui center aligned basic segment">
+            <img class="ui small image" src="{{ SITE_URL }}/images/jupysql-logo.png" alt="JupySQL logo">
+            </div>
+            <div class="header">JupySQL</div>
+            <div class="meta">
+            Jupyter plugin
+            </div>
+            <div class="description">
+            JupySQL allows you to run SQL and plot large datasets in Jupyter via a %sql, %%sql, and %sqlplot magics.
+            </div>
+        </div>
+      </a>
+
+      <a href="https://myst-parser.readthedocs.io/" class="card">
+        <div class="content">
+            <div class="ui center aligned basic segment">
+            <img class="ui small image" src="{{ SITE_URL }}/images/myst-parser-logo.png" alt="MyST parser logo">
+            </div>
+            <div class="header">MyST parser</div>
+            <div class="meta">
+            Documentation
+            </div>
+            <div class="description">
+            A Sphinx and Docutils extension to parse MyST, a rich and extensible flavour of Markdown for authoring technical and scientific documentation.
+            </div>
+        </div>
+      </a>
+    </div>
+    </div>
+</section>

content/pages/features.html

@@ -160,7 +160,7 @@ <h4 class="ui header">
                   </h4>
 
                   {% markdown %}
-                  Integrate with tools like **[Sphinx](/tools/sphinx/)**, **[MkDocs](/tools/mkdocs/)**, and **Jupyter Book**,
+                  Integrate with tools like **[Sphinx](/tools/sphinx/)**, **[MkDocs](/tools/mkdocs/)**, and **[Jupyter Book[(/tools/jupyter-book/)**,
                   and track changes with **Git**.
                   Use the tools that work best for your project.
                   {% endmarkdown %}

content/pages/tools/jupyter-book.html

@@ -0,0 +1,137 @@
+{#
+  View this page at http://localhost:8080/tools/jupyter-book/
+#}
+<html>
+  <head>
+    <title>Publish your documentation with Jupyter Book</title>
+    <meta name="template" content="page" />
+    <meta name="slug" content="tools/jupyter-book" />
+    <meta name="status" content="hidden" />
+    <meta name="description" content="Create an HTML version of your book and publish it online." />
+  </head>
+  <body>
+
+{% import "partials/basic.html" as basic %}
+{% import "partials/marketing.html" as marketing %}
+{% import "partials/technical.html" as technical %}
+{% import "partials/homepage.html" as homepage %}
+
+<section>
+
+  {% call basic.header_image(
+    header="Publish your documentation with Jupyter Book and Read the Docs",
+    image="/images/jupyter-book-logo.png",
+    image_alt="Jupyter Book logo",
+    vertical_align="middle")
+  %}
+    <p>
+        Jupyter Book works perfectly with Read the Docs, allowing your book to be published online
+        and always updated with the latest version.
+    </p>
+
+    <p class="ui basic padded vertical segment">
+      <a class="ui large teal stackable button"
+      data-analytics="signup-modal"
+       onclick="jQuery('#signup-modal').modal('show');">
+        <i class="fad fa-play icon"></i>
+        Create an account
+      </a>
+      <a href="https://example-jupyter-book.readthedocs.io/" class="ui large stackable button">
+        See a demo
+      </a>
+    </p>
+  {% endcall %}
+</section>
+
+<section id="features">
+  {% call marketing.highlight_list() %}
+    {% call marketing.highlight_item(
+        icon="olive fa-people-arrows",
+        icon_style="--fa-secondary-color: violet; --fa-secondary-opacity: 1;",
+        header="Pair-review the changes with build previews",
+        color="violet") %}
+    {% markdown %}
+    Receive feedback from your team,
+    and <strong>have confidence in changes</strong> before they go live.
+    {% endmarkdown %}
+    {% endcall %}
+
+    {% call marketing.highlight_item(
+        icon="yellow fa-magnifying-glass",
+        icon_style="--fa-secondary-color: white; --fa-secondary-opacity: 1;",
+        header="Always find what you need",
+        color="violet") %}
+    {% markdown %}
+    Search across all your books and projects with our search-as-you-type interface,
+    and quickly find the paragraph, documentation and API reference information you need.
+    <strong>Never lose documentation again</strong>.
+    {% endmarkdown %}
+    {% endcall %}
+
+    {% call marketing.highlight_item(
+        icon="fa-eye",
+        header="Keep your focus with link previews",
+        color="violet") %}
+
+    {% markdown %}
+    Provide context on every internal link in your docs with instant preview links.
+    <strong>Skim the content without opening *another* tab</strong>.
+    {% endmarkdown %}
+        {% endcall %}
+    {% endcall %}
+</section>
+
+{# Try it out code block #}
+{% include "includes/try-it-out-jupyter-book.html" %}
+
+{#
+  Jupyter Book users
+  https://ethicalads.metabaseapp.com/question/240-projects-using-jupyter-book
+
+  SELECT DISTINCT data->'project'->'slug'
+  FROM "telemetry_builddata"
+  WHERE data @? '$.packages.pip.all ? (@.name == "jupyter-book")'
+  ORDER BY data->'project'->'slug';
+#}
+{% include "includes/users-jupyter-book.html" %}
+
+{% block homepage_bottom_callout %}
+<section>
+  <div class="ui very padded container">
+    <div class="ui grid center aligned">
+
+      <div class="row">
+        <div class="column twelve wide computer sixteen wide tablet">
+
+          {#
+            TODO replace this block with something more actionable. It's
+            not saying anything new at this point in the page, and the call
+            to action is not strong.
+          #}
+          <div class="ui basic vertical huge segment">
+            <p>
+              <b>Get your docs online in 5 minutes.</b>
+            </p>
+
+            <p>
+              <a class="ui large teal stackable button"
+              data-analytics="signup-modal"
+               onclick="jQuery('#signup-modal').modal('show');">
+              <i class="fad fa-play icon"></i>
+              Create an account
+            </a>
+            </p>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+  </div>
+</section>
+{% endblock homepage_bottom_callout %}
+
+
+
+  </body>
+</html>