Updated to 0.6.0

rameshvarun · Sep 6, 2023 · cce479f · cce479f
1 parent 7408d35
commit cce479f
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,9 @@
 
 Add interactive code cells to any webpage, similar to [Jupyter](https://jupyter.org/) or [ObservableHQ](https://observablehq.com/). Works with direct HTML editing, static site generators like Jekyll / Hugo, and more.
 
-## Quickstart
+## Usage
+
+### Quickstart
 
 Just drop in JS / CSS imports and start creating code cells using `<script type="text/notebook-cell">` elements. <b>blog-cells</b> will transform these script tags into interactive, runnable code snippets.
 
@@ -19,22 +21,33 @@ console.log("Hello World!");
 </script>
 
 <!-- Import blog-cells after your cells are defined. -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/blog-cells@0.5.0/dist/blog-cells.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/blog-cells@0.5.0/dist/blog-cells.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/blog-cells@0.6.0/dist/blog-cells.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/blog-cells@0.6.0/dist/blog-cells.js"></script>
 ```
 
 Try it on [CodePen](https://codepen.io/varunramesh/pen/WNYVNQQ) or [JSFiddle](https://jsfiddle.net/varunramesh/o217xpc5/9/).
 
-## Using `pre` tags instead of `script` tags
+### Other Languages
 
-Script tags are great for defining notebook cells since they can hold pretty much any code without escaping. However, they are invisible by default, meaning that readers won't see anything until blog-cells loads. You can get around this by using `<pre class="notebook-cell">` tags instead, however reserved HTML characters should be escaped using [HTML entities](https://developer.mozilla.org/en-US/docs/Glossary/Entity).
+In addition to JavaScript, you can also embed code in other languages by adding a `data-kernel` attribute.
 
 ```html
-<pre class="notebook-cell">
-console.log("&lt;b&gt;HELLO&lt;/b&gt;");
-</pre>
+<script type="text/notebook-cell" data-kernel="python">
+print("Hello World!");
+</script>
 ```
 
+The following kernel values are currently supported:
+- `javascript` (Default)
+- `python`
+
+### Cell Attributes
+
+Cells can be configured with the following attributes:
+
+- `data-autorun="true"` - Automatically run a cell on page load. Autorun cells are run in the order that they appear on the page.
+- `data-hidden="true"` - Make a cell hidden by default - readers can toggle the cell's visibility.
+
 ## Developing
 
 ```

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "blog-cells",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A tool for turning blog posts into interactive code notebooks.",
   "repository": {
     "type": "git",

diff --git a/src/test.html → src/browser-unit.html b/src/test.html → src/browser-unit.html
diff --git a/src/index.html b/src/index.html
@@ -95,7 +95,11 @@ <h1><a href="https://github.com/rameshvarun/blog-cells">blog-cells</a> demo</h1>
 </script>
 
 <p>You can use other languages like Python.</p>
-<script type="text/notebook-cell" data-autorun="true" data-kernel="python">print("Hello World from Python!")
+<script type="text/notebook-cell" data-kernel="python">import time
+
+for i in range(5):
+  print(f"#{i + 1}: Hello World from Python!")
+  time.sleep(1)
 </script>
 
 <link rel="stylesheet" href="./blog-cells.css" />

diff --git a/webpack.config.js b/webpack.config.js
@@ -55,7 +55,7 @@ const development = {
   plugins: [
     new CopyPlugin({
       patterns: [
-        { from: "src/test.html", to: "." },
+        { from: "src/browser-unit.html", to: "." },
       ]
     }),
   ]