Completely redo the front page

* Replace basic theme and our modifications with "agogo" theme. The main reason for this is to have a top navbar with better contrast. * Remove the code carousel. I decided this makes the whole front page somewhat clunky and instead we can point to the "about" pages under the title Tour of Dylan. I plan to eventually add a small version of the Playground to the front page, which will have a pull-down menu of code examples as well. * Remove the News section. There's just not enough current news so it makes the site look dead. * The new page is essentially: (1) "what is dylan?" quote, (2) list of language features, (3) Install link, (4) ways to get started. On a large monitor this might not be a full page, which could look a bit sad. I'm not sure what else to put on the front page but I think this is an incremental improvement over what we had before. Fixes dylan-lang#52
cgay · Oct 3, 2021 · ba95890 · ba95890
1 parent 7dd58b6
commit ba95890
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 79 deletions.
diff --git a/README.rst b/README.rst
@@ -84,3 +84,11 @@ The `update-opendylan.org.sh` script is run by cron to update the
 documentation in various repositories by essentially doing a git pull
 and make html. These are the docs linked from the main Documentation
 page.
+
+Updating the "opendylan" Sphinx Theme
+-------------------------------------
+
+The "opendylan" Sphinx theme relies heavily on the `Bootstrap library
+<https://getbootstrap.com/>`_, for both the navbar and for styles.
+
+*TODO:* more info here.
diff --git a/source/_themes/opendylan/layout.html b/source/_themes/opendylan/layout.html
@@ -5,7 +5,7 @@
     :copyright: Copyright 2020 by the Dylan Hackers.
     :license: MIT.
 #}
-{% extends "basic/layout.html" %}
+{% extends "agogo/layout.html" %}
 {% block doctype %}
 <!DOCTYPE html>
 {% endblock %}
@@ -21,9 +21,10 @@
 <title>{% if title == "&lt;no title&gt;" %}Open Dylan{% else %}{{ title|striptags|e }}{% endif %}{{ titlesuffix }}</title>
 {%- endblock %}
 {% block extrahead %}
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" type="text/css" />
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" type="text/css" />
-    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
+          rel="stylesheet"
+          integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
+          crossorigin="anonymous">
     <!--[if lt IE 9]>
       <script src="{{ pathto('_static/opendylan.org/js/html5shim/html5.js', 1) }}"></script>
     <![endif]-->
@@ -33,27 +34,27 @@
 {% endblock %}
 
 {% block header %}
-   <div class="navbar navbar-fixed-top">
-     <div class="navbar-inner">
-       <div class="container">
-         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-           <span class="icon-bar"></span>
-           <span class="icon-bar"></span>
-           <span class="icon-bar"></span>
-         </a>
-         <img class="logo" src="{{ pathto('_static/opendylan.org/images/dylan-squares.png', 1) }}" alt="Dylan Logo" />
-         <a class="brand" href="{{ pathto('index') }}">Open Dylan</a>
-         <div class="nav-collapse">
-           <ul class="nav">
-           {% for page, caption in navigation_bar -%}
-             <li {% if page == active_page %} class="active" {% endif %} >
-               <a href="{% if page[:4] == 'http' %} {{page}} {% else %} {{ pathto(page) }} {% endif %}">{{ caption|e }}</a>
-           {% endfor -%}
-           </ul>
-         </div>
-       </div>
-     </div>
-    </div>
+    <!-- See example at https://getbootstrap.com/docs/5.1/components/navbar/ -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+      <div class="container-fluid">
+        <img class="logo" src="{{ pathto('_static/opendylan.org/images/dylan-squares.png', 1) }}" alt="Dylan Logo" />
+        <a class="navbar-brand" href="{{ pathto('index') }}"> Open Dylan</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            {% for page, caption in navigation_bar -%}
+              <li class="nav-item">
+                <a class="nav-link {% if page == active_page %} active {% endif %}"
+                   href="{% if page[:4] == 'http' %} {{page}} {% else %} {{ pathto(page) }} {% endif %}">{{ caption|e }}</a>
+              </li>
+            {% endfor -%}
+          </ul>
+        </div>
+      </div>
+    </nav>
 {% endblock %}
 
 {% block content %}
@@ -98,3 +99,12 @@
 
 {% block relbar1 %}{% endblock %}
 {% block relbar2 %}{% endblock %}
+
+<!--
+   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
+           integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
+           crossorigin="anonymous"></script>
+-->
+   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
+           integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
+           crossorigin="anonymous"></script>
diff --git a/source/_themes/opendylan/static/opendylan.org/css/opendylan.css b/source/_themes/opendylan/static/opendylan.org/css/opendylan.css
@@ -1,43 +1,78 @@
-body {
-  padding-top: 50px;
+/* Sphinx generates <li><p> for <ul> items. Default margin bottom for P is huge
+   so reduce it to 5px. */
+li > p {
+    margin-bottom: 5px;
+}
+.dylan-top-quote {
+    background-color: #e0e0ff;
+    border-radius: 5px;
+    font-size: large;
+    font-style: italic;
+    max-width: 600px;
+    padding: 20px 40px;
 }
 .navbar .logo {
   float: left;
   padding: 5px 5px;
-  height: 30px;
-  width: 32px;
-}
-.literal {
-  background-color:#f5f5f5;
-  padding:0 3px 2px;
-  font-family:Monaco, Andale Mono, Courier New, monospace;
-  font-size:12px;
-  border:1px solid rgba(0, 0, 0, 0.15);
-  -webkit-border-radius:3px;
-  -moz-border-radius:3px;
-  border-radius:3px;
 }
 footer.navbar {
   margin-top: 20px;
   margin-bottom: 0;
 }
+/* Reduce heading sizes and add a bit of blank space above. */
+.section h1 {
+    font-size: 31.5px;
+    margin-top: 0px;
+    padding-top: 30px;
+}
 .section h2 {
-  padding-top: 50px;
-  margin-top: 0px;
+    font-size: 24.5px;
+    margin-top: 0px;
+    padding-top: 30px;
+}
+.section h3 {
+    font-size: 17.5px;
+    margin-top: 0px;
+    padding-top: 30px;
+}
+.section h4 {
+    font-size: 14px;
+    margin-top: 0px;
+    padding-top: 30px;
+}
+.section h5 {
+    font-size: 12px;
+    margin-top: 0px;
+    padding-top: 30px;
 }
-/* Make the headerlink less obnoxiously visible.  Better would be to make it
-   only appear when the pointer is over the header but I couldn't figure out
-   how to do that without javascript. --cgay */
+/* Make the ugly headerlink invisible unless under the pointer. */
 a.headerlink {
-  color: silver;
-  opacity: 0.3;
+    opacity: 0;
+}
+a.headerlink:hover {
+    color: silver;
+    opacity: 1.0;
 }
 blockquote div p {
   font-size: 14px;
   line-height: 20px;
   margin: 0 0 10px;
 }
 
+.button,a.button {
+    background-color: #006600;
+    /* border-radius: 5px; */
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 18px;
+    color: white;
+    margin: 4px 2px;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+}
+
 /* Responsive Docs
 -------------------------------------------------- */
 @media (max-width: 480px) {
@@ -63,4 +98,3 @@ blockquote div p {
     padding-top: 0;
   }
 }
-
diff --git a/source/index.rst b/source/index.rst
@@ -1,50 +1,63 @@
-.. raw:: html
+Open Dylan is...
+****************
+
+...an open source implementation of the `Dylan`_ programming language.
 
-   <div class="row-fluid">
-     <div class="span4">
-       <div class="well">
+.. raw:: html
 
-Dylan is an `object-functional`_ language `created by Apple`_. Dylan has gradual typing
-and provides a programming model designed to support efficient machine code generation,
-including fine-grained control over dynamic and static behaviors.
+   <div class="dylan-top-quote">
 
-.. _object-functional: about/examples/generic_functions.html
-.. _created by Apple: history/
+Dylan is an `object-functional`_ language originally `created by Apple`_ for the
+Newton. Dylan provides a programming model designed to support efficient machine code
+generation, including fine-grained control over dynamic and static behaviors.
 
 .. raw:: html
 
-       </div>
-     </div>
    </div>
-   <div class="row-fluid">
-     <div class="span6">
-       <h2>Get Started</h2>
 
-`Installing Dylan </install/index.html>`_  is easy.
-Once downloaded, we recommend reading through `Introduction to Dylan <https://opendylan.org/documentation/intro-dylan/>`_ and exploring `some examples <https://github.com/dylan-lang/opendylan/tree/master/sources/examples>`_.
+.. _Dylan: /books/drm/Title
+.. _object-functional: /about/examples/generic_functions.html
+.. _created by Apple: /history/
 
-.. raw:: html
 
-     <h2>Learn Dylan</h2>
+* *Gradual typing* - specify types only where necessary for clarity or performance.
+* *Generic functions* dispatch on all positional arguments, for a powerful form of
+  OO.
+* *Multiple inheritance* - use mix-ins to add behavior.
+* *Sealed domains* for high performance method dispatch.
+* *Garbage collection*
+* *Macros* to extend the syntax.
+* *Exception handling* that doesn't unwind the stack, for advanced recovery protocols and
+  debugging.
+* *Regular and simple syntax*.
+* *Everything returns values*, including conditionals like ``if`` and ``select``.
 
-Dylan has a large amount of documentation available:
 
-* `Introduction to Dylan <https://opendylan.org/documentation/intro-dylan/>`__:
-   A tutorial written for those with solid programming
-   experience in C++ or another object-oriented, static language. It
-   provides a gentler introduction to Dylan than does the Dylan
-   Reference Manual (DRM).
-* `Dylan Programming Guide <https://opendylan.org/books/dpg/>`_:
-   A book length Dylan tutorial.
-* `Dylan Reference Manual <https://opendylan.org/books/drm/>`_:
-   The official definition of the Dylan language and standard library.
-* `Open Dylan Documentation <https://opendylan.org/documentation/>`_:
-   All of the Open Dylan documentation.
+Get Started
+***********
 
 .. raw:: html
 
-     </div>
-   </div>
+   <a href="/download" class="button">Install Dylan...</a>
+
+If you're just starting out, choose from these resources depending on how you like to
+learn:
+
+* The `Tour of Dylan </about/>`_ is great if you like to learn by example.
+* If you want to play around without having to install anything, try the `Playground`_.
+* `Introduction to Dylan`_ provides a high-level overview of language features.
+* The `Dylan Programming Guide`_ is a book length Dylan tutorial.
+* If you like to read the spec first, the `Dylan Reference Manual`_ might be for you.
+* If you have questions, give us a shout on `Gitter`_!
+
+Or explore `all the docs </documentation/>`_, including cheat sheets, articles, and all
+the library docs. Happy hacking!
+
+.. _Playground: https://play.opendylan.org
+.. _Introduction to Dylan: https://opendylan.org/documentation/intro-dylan/
+.. _Dylan Programming Guide: https://opendylan.org/books/dpg/
+.. _Dylan Reference Manual: https://opendylan.org/books/drm/
+.. _Gitter: https://gitter.im/dylan-lang/general
 
 .. toctree::
    :maxdepth: 1