remove codeblock components

app.css

@@ -15,4 +15,12 @@
   .alert-info {
     @apply text-blue-800 bg-blue-50 dark:bg-gray-800 dark:text-blue-300;
   }
+
+  .prose pre {
+    @apply bg-transparent p-0;
+  }
+
+  .prose pre code {
+    @apply rounded-lg;
+  }
 }

client/src/app.ts

@@ -2,6 +2,7 @@ import { connect } from "sprocket-js";
 import { DoubleClick } from "./hooks/double_click";
 import { DarkMode } from "./hooks/dark_mode";
 import { CodeBlock } from "./hooks/codeblock";
+import { HighlightJS } from "./hooks/hljs";
 import { ClickOutside } from "./hooks/click_outside";
 import { LoadComponents } from "./hooks/load_components";
 
@@ -11,6 +12,7 @@ const hooks = {
   DarkMode,
   ClickOutside,
   LoadComponents,
+  HighlightJS,
 };
 
 window.addEventListener("DOMContentLoaded", () => {

client/src/hooks/hljs.ts

@@ -0,0 +1,13 @@
+import hljs from "highlight.js";
+import gleam from "@gleam-lang/highlight.js-gleam";
+import { ClientHook } from "sprocket-js";
+
+hljs.registerLanguage("gleam", gleam);
+
+export const HighlightJS: ClientHook = {
+  create() {
+    setTimeout(() => {
+      hljs.highlightAll();
+    }, 0);
+  },
+};

priv/pages/2_Getting Started.djot

@@ -18,27 +18,27 @@ This method is the easiest way to get started.
 
 1. Clone the starter repository from GitHub
 
-<.codeblock language="bash">
+```bash
 # Clone the starter repository from GitHub
 git clone https://github.com/bitbldr/sprocket_starter.git
 
 # Change into the project directory
 cd sprocket_starter
-</.codeblock>
+```
 
 2. Install dependencies
 
-<.codeblock language="bash">
+```bash
 # Install dependencies
 yarn
-</.codeblock>
+```
 
 3. Start the server
 
-<.codeblock language="bash">
+```bash
 # Start the server
 yarn watch
-</.codeblock>
+```
 
 ### Method 2: Add to existing project
 
@@ -48,25 +48,25 @@ in doubt, refer to the [starter repository on GitHub](https://github.com/bitbldr
 
 1. Add Sprocket as a dependency
 
-<.codeblock language="bash">
+```bash
 # Add Sprocket as a dependency in your gleam.toml
 gleam add sprocket
-</.codeblock>
+```
 
 2. Add client-side dependencies with the following commands
 
-<.codeblock language="bash">
+```bash
 # Initialize a new NodeJS project, if you don't already have one
 npm init -y
 
 # Add sprocket-js as a client dependency
 npm install sprocket-js
-</.codeblock>
+```
 
 3. Sprocket needs to be initialized by the client in order to establish a persistent connection to
 the server. Add the following contents to your client entrypoint file (e.g. app.js)
 
-<.codeblock language="typescript">
+```typescript
 import { connect } from "sprocket-js";
 
 const hooks = {};
@@ -77,12 +77,12 @@ window.addEventListener("DOMContentLoaded", () => {
     ?.getAttribute("content");
 
   if (csrfToken) {
-    let livePath =
+    let connectPath =
       window.location.pathname === "/"
-        ? "/live"
+        ? "/connect"
         : window.location.pathname.split("/").concat("connect").join("/");
 
-    connect(livePath, {
+    connect(connectPath, {
       csrfToken,
       hooks,
       // // Optionally, specify an element to mount to
@@ -92,7 +92,7 @@ window.addEventListener("DOMContentLoaded", () => {
     console.error("Missing CSRF token");
   }
 });
-</.codeblock>
+```
 
 4. Tailwind configuration is a bit involved and is out of scope for this guide. If you wish to
 follow along with the same styles in this documentation, you can install tailwind by following the

priv/pages/3_Components.djot

@@ -14,7 +14,7 @@ We're going to create a simple component called `example_button` that takes an o
 renders a button. This guide will use Tailwind CSS to style components, but you can use any classes
 or style framework you prefer. 
 
-<.codeblock language="gleam">
+```gleam
 import gleam/option.{None, Option, Some}
 import sprocket/context.{Context}
 import sprocket/component.{render}
@@ -41,7 +41,7 @@ pub fn example_button(ctx: Context, props: ExampleButtonProps) {
     ),
   )
 }
-</.codeblock>
+```
 
 As you can see, we've defined our component and it's prop types. The component takes context and
 props as arguments and renders a button. If no label is specified, the button will render with the
@@ -55,7 +55,7 @@ To use this new component in a parent view, we can simply pass it into the `comp
 along with the props we want to pass in. Let's take a look at an example of a page view component
 that uses the button component we defined above.
 
-<.codeblock language="gleam">
+```gleam
 pub type PageViewProps {
   PageViewProps
 }
@@ -74,7 +74,7 @@ pub fn page_view(ctx: Context, _props: PageViewProps) {
     ),
   )
 }
-</.codeblock>
+```
 
 Here is our rendered component:
 
@@ -83,12 +83,12 @@ Here is our rendered component:
 That's looking pretty good, now let's customize the label to our button. We can do that by passing
 in a label prop to our component.
 
-<.codeblock language="gleam">
+```gleam
 component(
   example_button,
   ExampleButtonProps(label: Some("Add to Cart")),
 ),
-</.codeblock>
+```
 
 <.button_example label="Add to Cart" />
 
@@ -104,7 +104,7 @@ label prop, we'll give more control to the parent component by introducing in a
 `render_label` which we'll define as a function that takes the current state of the toggle and
 renders the content of the button.
 
-<.codeblock language="gleam">
+```gleam
 import sprocket/context.{Context, Element, dep}
 import sprocket/component.{render}
 import sprocket/html/elements.{button}
@@ -146,7 +146,7 @@ pub fn toggle_button(ctx: Context, props: ToggleButtonProps) {
     ),
   )
 }
-</.codeblock>
+```
 
 We've added a `state` hook to track the active state of our button and a `handler` hook to toggle
 the active state when the button is clicked. We've also added a `render_label` prop to our component
@@ -155,7 +155,7 @@ inactive.
 
 Now let's use our new component in a parent view.
 
-<.codeblock language="gleam">
+```gleam
 pub type PageViewProps {
   PageViewProps
 }
@@ -193,7 +193,7 @@ pub fn page_view(ctx: Context, _props: PageViewProps) {
     ),
   )
 }
-</.codeblock>
+```
 
 Here is our rendered stateful component:
 
@@ -208,7 +208,7 @@ from the render function (opposed to using a `component` wrapper as seen previou
 components). Let's look at an example of a stateless functional component that renders a product
 card.
 
-<.codeblock language="gleam">
+```gleam
 type Product {
   Product(
     id: Int,
@@ -285,13 +285,13 @@ pub fn product_card(product: Product, actions: Option(List(Element))) {
     ],
   )
 }
-</.codeblock>
+```
 
 To render this component we call it directly from the render function, passing any arguments the
 function takes, which in this case is a `Product` record and an optional list of actions, which we
 will leave as `None` for now.
 
-<.codeblock language="gleam">
+```gleam
 pub fn product(ctx: Context, _props: ProductProps) {
   let some_product = 
     Product(
@@ -313,7 +313,7 @@ pub fn product(ctx: Context, _props: ProductProps) {
     ),
   )
 }
-</.codeblock>
+```
 
 <.product_card_example id="2255" name="Bamboo Cutting Board" description="This sustainable bamboo cutting board is perfect for slicing and dicing vegetables, fruits, and meats. The natural antibacterial properties of bamboo ensure a hygienic cooking experience." img_url="https://images.pexels.com/photos/6489734/pexels-photo-6489734.jpeg" qty="12 x 8 inches" price="24.99" />
 
@@ -328,7 +328,7 @@ Components can be composed together to create rich user interfaces. Let's take a
 of a view that uses the `toggle_button` and the `product_card` components we defined earlier to
 create a simple product component.
 
-<.codeblock language="gleam">
+```gleam
 pub fn product(ctx: Context, _props: PageViewProps) {
   render(
     ctx,
@@ -374,7 +374,7 @@ pub fn product(ctx: Context, _props: PageViewProps) {
     ),
   )
 }
-</.codeblock>
+```
 
 <.stateful_product_card_example id="2259" name="Organic Aromatherapy Candle" description="Create a fresh ambiance with this organic aromatherapy candle. Hand-poured with pure essential oils, the fresh scent of citrus will brighten up your room." img_url="https://images.pexels.com/photos/7260249/pexels-photo-7260249.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" qty="1 candle" price="19.99" />
 
@@ -392,7 +392,7 @@ It's important to use the `keyed` function when rendering elements that may chan
 diffing algorithm can keep track of them and their states across renders. Let's take a look at an
 example of a component that renders a list of products, each with their own state.
 
-<.codeblock language="gleam">
+```gleam
 pub type ProductListProps {
   ProductListProps(products: List(Product))
 }
@@ -420,7 +420,7 @@ pub fn product_list(ctx: Context, props: ProductListProps) {
     ),
   )
 }
-</.codeblock>
+```
 
 <.product_list_example />
 

priv/pages/4_Props and Events.djot

@@ -15,7 +15,7 @@ components are clicked, they call the `on_click` event handler that was passed t
 The `counter` component then increments its `count` state and re-renders. The `display` component is
 also re-rendered because its `count` prop has changed.
 
-<.codeblock language="gleam">
+```gleam
 import gleam/int import gleam/option.{None, Option, Some}
 import sprocket/context.{Context, dep}
 import sprocket/hooks.{reducer, handler}
@@ -113,7 +113,7 @@ pub fn display(ctx: Context, props: DisplayProps) {
     ),
   )
 }
-</.codeblock>
+```
 
 <.props_and_events_counter_example />
 

priv/pages/5_State Management.djot

@@ -13,7 +13,7 @@ define a function that updates the state when the button is clicked.
 
 First we define our state struct and message types:
 
-<.codeblock language="gleam">
+```gleam
 type Model {
   Model(selection: Option(Int), options: List(HelloOption))
 }
@@ -22,21 +22,21 @@ type Msg {
   NoOp
   SayHello
 }
-</.codeblock>
+```
 
 Here we're storing a list of options and the index of the selected option in the state.
 
 Next we define our update function:
 
-<.codeblock language="gleam">
+```gleam
 fn update(model: Model, msg: Msg) -> Model {
   case msg {
     NoOp -> model
     SayHello ->
       Model(..model, selection: Some(int.random(0, list.length(model.options))))
   }
 }
-</.codeblock>
+```
 
 An update function takes the current state and a message and returns a new state.
 
@@ -45,13 +45,13 @@ An update function takes the current state and a message and returns a new state
 Let's declare a reducer hook in our component that initializes the state model and uses our update
 function:
 
-<.codeblock language="gleam">
+```gleam
 use ctx, Model(selection: selection, options: options), dispatch <- reducer(
   ctx,
   Model(selection: None, options: hello_options()),
   update,
 )
-</.codeblock>
+```
 
 You can see here we are provided with the current state of the reducer, which we can use in our
 component. Notice, we also are provided with a `dispatch` function from the reducer. The dispatch
@@ -67,19 +67,19 @@ when the button is clicked. It's important that we create an `IdentifiableHandle
 `handler` hook so that we can ensure the id of the handler function is consistent across renders,
 preventing a new id being created and sent to the client on every render.
 
-<.codeblock language="gleam">
+```gleam
 use ctx, say_hello <- handler(
   ctx,
   fn(_) { dispatch(SayHello) },
 )
-</.codeblock>
+```
 
 Putting it all together
 
 We now have all the pieces we need to create a more interesting button that updates whenever it is
 clicked. Let's put it all together:
 
-<.codeblock language="gleam">
+```gleam
 import gleam/int
 import gleam/list
 import gleam/option.{None, Option, Some}
@@ -185,7 +185,7 @@ fn hello_options() -> List(HelloOption) {
     #("Swahili", "Hujambo"),
   ]
 }
-</.codeblock>
+```
 
 <.hello_button_example />