Merge branch 'main' into jk-signature

CHANGELOG.md

@@ -4,7 +4,28 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
-## [v0.3.0](https://github.com/livebook-dev/livebook/tree/v0.2.3) (2021-10-19)
+## [v0.3.1](https://github.com/livebook-dev/livebook/tree/v0.3.1) (2021-10-27)
+
+### Added
+
+- Introduced automatically reevaluating cells ([#637](https://github.com/livebook-dev/livebook/pull/637))
+
+### Changed
+
+- Changed color for aborted and queued cell status ([#620](https://github.com/livebook-dev/livebook/pull/620))
+- Improved Markdown rendering of task and nested lists ([#623](https://github.com/livebook-dev/livebook/pull/623) and [#623](https://github.com/livebook-dev/livebook/pull/631))
+
+### Fixed
+
+- Connecting to an empty S3 bucket ([#646](https://github.com/livebook-dev/livebook/pull/623) and [#623](https://github.com/livebook-dev/livebook/pull/646))
+- Importing notebooks served with `application/octet-stream` content type ([#650](https://github.com/livebook-dev/livebook/pull/623) and [#623](https://github.com/livebook-dev/livebook/pull/650))
+
+### Removed
+
+- Removed the keyboard shortcut for "Evaluate cells below" ([#621](https://github.com/livebook-dev/livebook/pull/621))
+- Removed reactive inputs in favour of automatically reevaluating cells ([#649](https://github.com/livebook-dev/livebook/pull/649))
+
+## [v0.3.0](https://github.com/livebook-dev/livebook/tree/v0.3.0) (2021-10-19)
 
 ### Added
 

README.md

@@ -181,6 +181,24 @@ variables used by Elixir releases are also available](
 https://hexdocs.pm/mix/Mix.Tasks.Release.html#module-environment-variables).
 The notables ones are `RELEASE_NODE` and `RELEASE_DISTRIBUTION`.
 
+## Rendering notebooks as Markdown on GitHub
+
+By default GitHub renders the `.livemd` notebooks as regular text files. Depending
+on your use case and the target audience, you may find it useful to render notebooks
+content as Markdown files instead. There is an option to override how a particular
+file gets rendered on GitHub, so all you need to do is add a magic comment in every
+such notebook:
+
+```
+<!-- vim: syntax=markdown -->
+
+# My notebook
+
+...
+```
+
+For more details see [the documentation](https://github.com/github/linguist/blob/master/docs/overrides.md#using-emacs-or-vim-modelines).
+
 ## Development
 
 Livebook is primarily a Phoenix web application and can be setup as such:

assets/css/live_view.css

@@ -15,10 +15,10 @@ iframe[hidden] {
   transition: opacity 1s ease-out;
 }
 
-.phx-disconnected {
+.phx-loading {
   cursor: wait;
 }
 
-.phx-disconnected * {
+.phx-loading * {
   pointer-events: none;
 }

assets/css/markdown.css

@@ -62,6 +62,11 @@
   @apply my-1;
 }
 
+.markdown li > ul,
+.markdown li > ol {
+  @apply my-0;
+}
+
 .markdown blockquote {
   @apply border-l-4 border-gray-200 pl-4 py-2 my-4 text-gray-500;
 }

assets/css/tooltips.css

@@ -3,7 +3,7 @@
 /*
 Example usage:
 
-  <span class="tooltip top" aria-label="Delete">
+  <span class="tooltip top" data-tooltip="Delete">
     ...
   </span>
 */
@@ -28,7 +28,7 @@ Example usage:
 /* Tooltip text */
 .tooltip:before {
   position: absolute;
-  content: attr(aria-label);
+  content: attr(data-tooltip);
   white-space: pre;
   text-align: center;
   display: block;

assets/css/utilities.css

@@ -19,7 +19,43 @@
       0 0 10px -5px rgba(0, 0, 0, 0.04);
   }
 
+  .shadow-custom-1 {
+    box-shadow: 10px 5px 25px -8px rgba(0, 0, 0, 0.2);
+  }
+
   .flip-horizontally {
     transform: scaleY(-1);
   }
+
+  .scroll-smooth {
+    scroll-behavior: smooth;
+  }
+
+  /* Animations */
+
+  .fade-in {
+    animation: fade-in-frames 200ms;
+  }
+
+  .fade-out {
+    animation: fade-out-frames 200ms;
+  }
+
+  @keyframes fade-in-frames {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out-frames {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
 }

assets/js/app.js

@@ -24,6 +24,8 @@ import Timer from "./timer";
 import MarkdownRenderer from "./markdown_renderer";
 import Highlight from "./highlight";
 import ClipCopy from "./clip_copy";
+import DragAndDrop from "./darg_and_drop";
+import PasswordToggle from "./password_toggle";
 import morphdomCallbacks from "./morphdom_callbacks";
 import { loadUserData } from "./lib/user";
 
@@ -41,6 +43,8 @@ const hooks = {
   MarkdownRenderer,
   Highlight,
   ClipCopy,
+  DragAndDrop,
+  PasswordToggle,
 };
 
 const csrfToken = document
@@ -75,3 +79,13 @@ liveSocket.connect();
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket;
+
+// Handling custom events dispatched with JS.dispatch/3
+
+window.addEventListener("lb:focus", (event) => {
+  event.target.focus();
+});
+
+window.addEventListener("lb:set_value", (event) => {
+  event.target.value = event.detail.value;
+});

assets/js/cell/markdown.js

@@ -126,7 +126,7 @@ function remarkExpandUrls(options) {
   return (ast) => {
     if (options.baseUrl) {
       visit(ast, "link", (node) => {
-        if (node.url && !isAbsoluteUrl(node.url)) {
+        if (node.url && !isAbsoluteUrl(node.url) && !isPageAnchor(node.url)) {
           node.url = urlAppend(options.baseUrl, node.url);
         }
       });
@@ -161,7 +161,7 @@ function rehypeExternalLinks(options) {
         if (isInternalUrl(url)) {
           node.properties["data-phx-link"] = "redirect";
           node.properties["data-phx-link-state"] = "push";
-        } else {
+        } else if (isAbsoluteUrl(url)) {
           node.properties.target = "_blank";
           node.properties.rel = "noreferrer noopener";
         }
@@ -174,6 +174,10 @@ function isAbsoluteUrl(url) {
   return url.startsWith("http") || url.startsWith("/");
 }
 
+function isPageAnchor(url) {
+  return url.startsWith("#");
+}
+
 function isInternalUrl(url) {
   return url.startsWith("/") || url.startsWith(window.location.origin);
 }

assets/js/darg_and_drop/index.js

@@ -0,0 +1,25 @@
+const DragAndDrop = {
+  mounted() {
+    const dropZone = this.el.querySelector("[data-dropzone]");
+
+    ["dragenter", "dragover"].forEach((eventName) => {
+      dropZone.addEventListener(eventName, highlight, false);
+    });
+
+    ["dragleave", "drop"].forEach((eventName) => {
+      dropZone.addEventListener(eventName, unhighlight, false);
+    });
+
+    function highlight(e) {
+      dropZone.classList.add("bg-red-200");
+      dropZone.classList.add("border-red-400");
+    }
+
+    function unhighlight(e) {
+      dropZone.classList.remove("bg-red-200");
+      dropZone.classList.remove("border-red-400");
+    }
+  },
+};
+
+export default DragAndDrop;

assets/js/password_toggle/index.js

@@ -0,0 +1,38 @@
+/**
+ * A hook used to toggle password's input visibility via icon button.
+ */
+
+const VISIBLE_ICON = "ri-eye-off-line";
+const OBSCURED_ICON = "ri-eye-line";
+
+const PasswordToggle = {
+  mounted() {
+    this.visible = false;
+
+    this.input = this.el.querySelector("input");
+    this.iconButton = this.el.querySelector("i");
+
+    this.iconButton.addEventListener("click", () => {
+      this.visible = !this.visible;
+      this._updateDOM();
+    });
+  },
+
+  updated() {
+    this._updateDOM();
+  },
+
+  _updateDOM() {
+    if (this.visible) {
+      this.input.type = "text";
+      this.iconButton.classList.remove(OBSCURED_ICON);
+      this.iconButton.classList.add(VISIBLE_ICON);
+    } else {
+      this.input.type = "password";
+      this.iconButton.classList.remove(VISIBLE_ICON);
+      this.iconButton.classList.add(OBSCURED_ICON);
+    }
+  },
+};
+
+export default PasswordToggle;

assets/js/session/index.js

@@ -72,7 +72,7 @@ const Session = {
 
     // Set initial favicon based on the current status
 
-    setFavicon(faviconForEvaluationStatus(this.props.globalEvaluationStatus));
+    setFavicon(faviconForEvaluationStatus(this.props.globalStatus));
 
     // Load initial data
 
@@ -104,6 +104,7 @@ const Session = {
 
     getSectionsList().addEventListener("click", (event) => {
       handleSectionsListClick(this, event);
+      handleCellIndicatorsClick(this, event);
     });
 
     getClientsList().addEventListener("click", (event) => {
@@ -212,10 +213,8 @@ const Session = {
     const prevProps = this.props;
     this.props = getProps(this);
 
-    if (
-      this.props.globalEvaluationStatus !== prevProps.globalEvaluationStatus
-    ) {
-      setFavicon(faviconForEvaluationStatus(this.props.globalEvaluationStatus));
+    if (this.props.globalStatus !== prevProps.globalStatus) {
+      setFavicon(faviconForEvaluationStatus(this.props.globalStatus));
     }
   },
 
@@ -237,11 +236,7 @@ function getProps(hook) {
       "data-autofocus-cell-id",
       null
     ),
-    globalEvaluationStatus: getAttributeOrDefault(
-      hook.el,
-      "data-global-evaluation-status",
-      null
-    ),
+    globalStatus: getAttributeOrDefault(hook.el, "data-global-status", null),
   };
 }
 
@@ -395,13 +390,14 @@ function handleDocumentMouseDown(hook, event) {
     return;
   }
 
-  // If click targets a clickable element that awaits mouse up, keep the focus as is
-  if (event.target.closest(`a, button`)) {
-    // If the pencil icon is clicked, enter insert mode
-    if (event.target.closest(`[data-element="enable-insert-mode-button"]`)) {
-      setInsertMode(hook, true);
-    }
+  // If the pencil icon is clicked, enter insert mode
+  if (event.target.closest(`[data-element="enable-insert-mode-button"]`)) {
+    setInsertMode(hook, true);
+    return;
+  }
 
+  // If a cell action is clicked, keep the focus as is
+  if (event.target.closest(`[data-element="actions"]`)) {
     return;
   }
 
@@ -411,7 +407,7 @@ function handleDocumentMouseDown(hook, event) {
   const insertMode = editableElementClicked(event, cell);
 
   if (cellId !== hook.state.focusedCellId) {
-    setFocusedCell(hook, cellId, !insertMode);
+    setFocusedCell(hook, cellId, false);
   }
 
   // Depending on whether the click targets editor disable/enable insert mode
@@ -735,6 +731,9 @@ function setFocusedCell(hook, cellId, scroll = true) {
     hook.state.focusedSectionId = getSectionIdByCellId(
       hook.state.focusedCellId
     );
+    // Focus the primary cell content, this is important for screen readers
+    const cellBody = cell.querySelector(`[data-element="cell-body"]`);
+    cellBody.focus({ preventScroll: true });
   } else {
     hook.state.focusedCellType = null;
     hook.state.focusedSectionId = null;