### Module Import Example

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/ColorScheme.md

Shows how to import the ColorScheme module to access its exported color constants.

```elm
import ColorScheme
```

--------------------------------

### Mixed Syntax Highlighting

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Highlight.md

Shows how to combine different highlighting styles for a multiline string example.

```elm
import Html exposing (div, text)
import Highlight

multilineExample : Html msg
multilineExample =
  div []
    [ text "message "
    , Highlight.equals
    , text " "
    , Highlight.string "\"Hello, Elm!\""
    ]
```

--------------------------------

### Elm Logo Module Usage Example

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Logo.md

Integrate the Logo module into your Elm application by importing it and using its `start`, `step`, and `view` functions within your `init`, `update`, and `view` functions respectively. This example demonstrates a typical setup for animating the logo.

```elm
import Browser
import Html exposing (Html, div)
import Html.Attributes exposing (style)
import Logo

type alias Model =
  { logo : Logo.Model
  }

type Msg
  = AnimationFrame Float

init : Model
init = { logo = Logo.start }

update : Msg -> Model -> Model
update msg model =
  case msg of
    AnimationFrame dt ->
      { model | logo = Logo.step dt model.logo }

view : Model -> Html Msg
view model =
  div [ style "width" "300px" ]
    [ Logo.view [] model.logo ]
```

--------------------------------

### Basic Text Animation Setup and View

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/TextAnimation.md

Initializes and updates a text animation state, then views the animated text. Use this for a standard text animation display.

```elm
import Html exposing (Html, div, text)
import Html.Attributes exposing (style)
import TextAnimation

type alias Model =
  { animation : TextAnimation.State }

type Msg
  = AnimationFrame

init : Model
init =
  { animation = TextAnimation.init "Elm" ["is", "awesome"]
  }

update : Msg -> Model -> Model
update _ model =
  { model | animation = TextAnimation.step model.animation }

view : Model -> Html Msg
view model =
  div []
    [ text (TextAnimation.view model.animation)
    , text (if TextAnimation.isMoving model.animation then "|" else "")
    ]
```

--------------------------------

### Initialize Default Logo Model

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Logo.md

Provides the canonical starting model for the Elm logo. Use this to get the default configuration.

```elm
import Logo

initialLogo : Logo.Model
initialLogo = Logo.start
```

--------------------------------

### Serve Elm Website Locally

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/README.md

After building the website, use these bash commands to serve the static files locally. Navigate to the output directory and start the Elm reactor.

```bash
cd _site
elm reactor
# Visit http://localhost:8000
```

--------------------------------

### Rotate Elements with Cycle in Elm

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/INDEX.md

This example shows how to use the Cycle library to initialize a cycle with a starting element and a list of subsequent elements, and then step through the cycle to get the next element.

```elm
import Cycle

cycle = Cycle.init "A" ["B", "C"]
nextCycle = Cycle.step cycle
element = Cycle.next nextCycle  -- "B"
```

--------------------------------

### init

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Cycle.md

Creates a new Cycle starting at the first element. The initial element `x` is the current element, and `xs` are the remaining elements in the cycle.

```APIDOC
## init

### Description
Creates a new Cycle starting at the first element.

### Method Signature
```elm
init : a -> List a -> Cycle a
```

### Parameters
#### Path Parameters
- **x** (a) - Required - The initial current element
- **xs** (List a) - Required - Remaining elements in the cycle

### Return Type
`Cycle a` - A new cycle with `x` as the current element.

### Example
```elm
import Cycle

myCycle : Cycle.Cycle String
myCycle = Cycle.init "one" ["two", "three", "four"]
```
```

--------------------------------

### Create UI Elements with Ui and Element

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/README.md

Build user interface components using the Ui and Element modules. This example shows how to create headings, links, and buttons.

```elm
import Ui
import Element as E

view : E.Element msg
view =
  E.column []
    [
      Ui.h1 ["Welcome"]
    , Ui.link [] { title = "Learn", url = "/docs" }
    , Ui.linkButton "/start" "Get Started" []
    ]
```

--------------------------------

### Create Links and Buttons in Elm

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/INDEX.md

This example demonstrates creating different types of links and a button using the Ui module. It includes standard links with titles and URLs, gray links, and link buttons with text and a destination URL.

```elm
import Ui

link1 = Ui.link [] { title = "Click", url = "/page" }
link2 = Ui.grayLink { title = "Footer", url = "/" }
button = Ui.linkButton "/start" "Start" []
```

--------------------------------

### Create Footer with Links

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Ui.md

Use this example to build a footer component with navigation links. It utilizes Ui.grayLink and requires Element.Spacing for horizontal spacing between links. The links are arranged in a row.

```elm
import Ui
import Element as E
import Element.Spacing as Spacing

footer : E.Element msg
footer =
  E.row
    [ Spacing.spacingXY 10 0
    ]
    [ Ui.grayLink { title = "Install", url = "/install" }
    , E.text " — "
    , Ui.grayLink { title = "Source", url = "https://github.com/elm/elm-lang.org" }
    ]
```

--------------------------------

### start

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Logo.md

Provides the initial model for the logo in its default Elm shape. This function returns a pre-configured pattern showing the Elm logo with all shapes in their proper positions.

```APIDOC
## start

### Description
Returns the canonical starting logo state. This is a pre-configured pattern showing the Elm logo with all shapes in their proper positions.

### Return Value
- `Model` — The default logo configuration.

### Example
```elm
import Logo

initialLogo : Logo.Model
initialLogo = Logo.start
```
```

--------------------------------

### Array Initialization and Manipulation

Source: https://github.com/elm/elm-lang.org/blob/master/static/assets/blog/0.18/todomvc.html

Demonstrates creating and manipulating arrays in Elm. Includes functions for empty arrays, from lists, appending, pushing, slicing, getting, setting, mapping, and folding.

```Elm
K=function(){function e(t,r){return t/r|0}function n(t,r){return t%r}function o(t,r){if(0===r)throw Error("Cannot perform mod 0. Division by zero error.");var e=t%r,n=0===t?0:r>0?0>t?e+r:e:-o(-t,-r);return n===r?0:n}function c(t,r){return Math.log(r)/Math.log(t)}function u(t){return-t}function i(t){return 0>t?-t:t}function a(t,r){return h.cmp(t,r)<0?t:r}function _(t,r){return h.cmp(t,r)>0?t:r}function l(t,r,e){return h.cmp(e,t)<0?t:h.cmp(e,r)>0?r:e}function s(t,r){return{ctor:k[h.cmp(t,r)+1]}}function f(t,r){return t!==r}function d(t){return!t}function p(t){return 1/0===t||t===-1/0}function g(t){return 0|t}function v(t){return t*Math.PI/180}function m(t){return 2*Math.PI*t}function b(t){var r=t._0,e=t._1;return h.Tuple2(r*Math.cos(e),r*Math.sin(e))}function y(t){var r=t._0,e=t._1;return h.Tuple2(Math.sqrt(r*r+e*e),Math.atan2(e,r))}var k=["LT","EQ","GT"];return{div:t(e),rem:t(n),mod:t(o),pi:Math.PI,e:Math.E,cos:Math.cos,sin:Math.sin,tan:Math.tan,acos:Math.acos,asin:Math.asin,atan:Math.atan,atan2:t(Math.atan2),degrees:v,turns:m,fromPolar:b,toPolar:y,sqrt:Math.sqrt,logBase:t(c),negate:u,abs:i,min:t(a),max:t(_),clamp:r(l),compare:t(s),xor:t(f),not:d,truncate:g,ceiling:Math.ceil,floor:Math.floor,round:Math.round,toFloat:function(t){return t},isNaN:isNaN,isInfinite:p}}(),h=function(){function r(t,r){for(var n,o=[],c=e(t,r,0,o);c&&(n=o.pop());)c=e(n.x,n.y,0,o);return c}function e(t,r,n,o){if(n>100)return o.push({x:t,y:r}),!0;if(t===r)return!0;if("object"!=typeof t){if("function"==typeof t)throw Error('Trying to use `(==)` on functions. There is no way to know if functions are "the same" in the Elm sense. Read more about this at https://package.elm-lang.org/packages/elm-lang/core/latest/Basics#== which describes why it is this way and what the better version will look like.');return!1}if(null===t||null===r)return!1;if(t instanceof Date)return t.getTime()===r.getTime();if(!("ctor"in t)){for(var c in t)if(!e(t[c],r[c],n+1,o))return!1;return!0}if(("RBNode\_elm\_builtin"===t.ctor||"RBEmpty\_elm\_builtin"===t.ctor)&&(t=Xr(t),r=Xr(r)),"Set\_elm\_builtin"===t.ctor&&(t=_elm_lang$core$Set$toList(t),r=_elm_lang$core$Set$toList(r)),"::"===t.ctor){for(var u=t,i=r;"::"===u.ctor&&"::"===i.ctor;){if(!e(u._0,i._0,n+1,o))return!1;u=u._1,i=i._1}return u.ctor===i.ctor}if("_Array"===t.ctor){var a=d.toJSArray(t),_=d.toJSArray(r);if(a.length!==_.length)return!1;for(var l=0;l<a.length;l++)if(!e(a[l],_[l],n+1,o))return!1;return!0}if(!e(t.ctor,r.ctor,n+1,o))return!1;for(var c in t)if(!e(t[c],r[c],n+1,o))return!1;return!0}function n(t,r){if("object"!=typeof t)return t===r?v:r>t?g:m;if(t instanceof String){var e=t.valueOf(),o=r.valueOf();return e===o?v:o>e?g:m}if("::"===t.ctor||"[]"===t.ctor){for(;"::"===t.ctor&&"::"===r.ctor;){var c=n(t._0,r._0);if(c!==v)return c;t=t._1,r=r._1}return t.ctor===r.ctor?v:"[]"===t.ctor?g:m}if("_Tuple"===t.ctor.slice(0,6)){var c,u=t.ctor.slice(6)-0,i="cannot compare tuples with more than 6 elements.";if(0===u)return v;if(u>=1){if(c=n(t._0,r._0),c!==v)return c;if(u>=2){if(c=n(t._1,r._1),c!==v)return c;if(u>=3){if(c=n(t._2,r._2),c!==v)return c;if(u>=4){if(c=n(t._3,r._3),c!==v)return c;if(u>=5){if(c=n(t._4,r._4),c!==v)return c;if(u>=6){if(c=n(t._5,r._5),c!==v)return c;if(u>=7)throw Error("Comparison error: "+i)}}}}}}return v}throw Error("Comparison error: comparison is only defined on ints, floats, times, chars, strings, lists of comparable values, and tuples of comparable values.")}function o(t,r){return{ctor:"_Tuple2",_0:t,_1:r}}function c(t){return new String(t)}function u(){return y++}function i(t,r){var e={};for(var n in t){var o=n in r?r[n]:t[n];e[n]=o}return e}function a(t,r){return{ctor:"::",_0:t,_1:r}}function _(t,r){if("string"==typeof t)return t+r;if("[]"===t.ctor)return r;var e=a(t._0,k),n=e;for(t=t._1;"[]"!==t.ctor;)n._1=a(t._0,k),t=t._1,n=n._1;return n._1=r,e}function l(t,r){return function(e){throw Error("Ran into a `Debug.crash` in module `"+t+"` "+f(r)+"\nThe message provided by the code author is:\n\n "+e)}}function s(t,r,e){return function(n){throw Error("Ran into a `Debug.crash` in module `"+t+"`\n\nThis was caused by the `case` expression "+f(r)+".\nOne of the branches ended with a crash and the following value got through:\n\n "+p(e)+"\n\nThe message provided by the code author is:\n\n "+n)}}function f(t){return t.start.line==t.end.line?"on line "+t.start.line:"between lines "+t.start.line+" and "+t.end.line}function p(t){var r=typeof t;if("function"===r){var e=t.func?t.func.name:t.name;return"<function"+(""===e?"":":")+e+">"}if("boolean"===r)return t?"True":"False";if("number"===r)return t+"";if(t instanceof 
```

--------------------------------

### Navigation Structure

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Skeleton.md

Outlines the navigation links provided in the header, including the logo/home link and links to examples, docs, community, and news.

```text
elm (logo + home link)
├─ examples    → /examples
├─ docs        → /docs
├─ community   → /community
└─ news        → /news
```

--------------------------------

### Implement Text Animation Loop in Elm

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/INDEX.md

This example demonstrates creating a text animation loop in Elm. It manages the state of the text animation, including initial text and a list of strings to cycle through, and provides functions to step through the animation and view the current text.

```elm
import TextAnimation

type alias Model = { text : TextAnimation.State }

init =
  { text = TextAnimation.init "Hello" ["World", "Elm"] }

update model =
  { model | text = TextAnimation.step model.text }

view model =
  Html.text (TextAnimation.view model.text)
```

--------------------------------

### Complex List Generation with `unfoldr`

Source: https://github.com/elm/elm-lang.org/blob/master/static/assets/blog/0.18/todomvc.html

A more complex example of list generation using `unfoldr`, potentially involving recursion and conditional logic to build the list.

```Elm
W=r(function(t,r,e){if(h.cmp(r,0)<1)return{ctor:"[]"};var n={ctor:"_Tuple2",_0:r,_1:e};t:do{r:do{if("_Tuple2"!==n.ctor)break t;if("[]"===n._1.ctor)return e;if("::"!==n._1._1.ctor){if(1===n._0)break r;break t}switch(n._0){case 1:break r;case 2:return{ctor:"::",_0:n._1._0,_1:{ctor:"::",_0:n._1._1._0,_1:{ctor:"[]"}}}};case 3:if("::"===n._1._1._1.ctor)return{ctor:"::",_0:n._1._0,_1:{ctor:"::",_0:n._1._1._0,_1:{ctor:"::",_0:n._1._1._1._0,_1:{ctor:"[]"}}}};break t;default:if("::"===n._1._1._1.ctor&&"::"===n._1._1._1._1.ctor){var o=n._1._1._1._0,c=n._1._1._0,u=n._1._0,i=n._1._1._1._1._0,l=n._1._1._1._1._1;return h.cmp(t,1e3)>0?{ctor:"::",_0:u,_1:{ctor:"::",_0:c,_1:{ctor:"::",_0:o,_1:{ctor:"::",_0:i,_1:a(H,r-4,l)}}}}:{ctor:"::",_0:u,_1:{ctor:"::",_0:c,_1:{ctor:"::",_0:o,_1:{ctor:"::",_0:i,_1:_(W,t+1,r-4,l)}}}}}break t}}while(!1);return{ctor:"::",_0:n._1._0,_1:{ctor:"[]"}}}while(!1);return e}),$=(t(function(t,r){return _(W,0,t,r)}),r(function(t,r,e){for(;;){if(h.cmp(r,0)<1)return t;var n={ctor:"::",_0:e,_1:t},o=r-1,c=e;t=n,r=o,e=c}})),K=(t(function(t,r){return _($,{ctor:"[]"},t,r)}),r(function(t,r,e){for(;;){if(h.cmp(t,r)>=1)return e;var n=t,o=r-1,c={ctor:"::",_0:r,_1:e};t=n,r=o,e=c}})),Q=t(function(t,r){return _(K,t,r,{ctor:"[]"})}),X=t(function(t,r){return _(R,t,a(Q,0,M(r)-1),r)})
```

--------------------------------

### Render Page Footer - Skeleton

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Skeleton.md

Creates the website footer with links to Install, Compiler Source, and Site Source, along with copyright information. Use this to render the footer component.

```elm
footer : Html msg
```

```elm
import Skeleton

footerHtml : Html msg
footerHtml = Skeleton.footer
```

--------------------------------

### Use Colors with Text

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Colors.md

Shows how to apply a color to text using `Element.Font.color`. This example uses `darkBlue` for a section heading. Requires importing `Colors`, `Element`, and `Element.Font`.

```elm
import Colors
import Element as E
import Element.Font as Font

heading : E.Element msg
heading =
  E.el [ Font.color Colors.darkBlue ]
    (E.text "Section Heading")
```

--------------------------------

### Coded Telegraphic Dispatch Example (Berlin)

Source: https://github.com/elm/elm-lang.org/blob/master/static/assets/public-opinion.txt

Demonstrates a coded version of a news item from Berlin, involving translation and condensation for telegraphic transmission. This example highlights the process of culling substance from a longer speech in a foreign language.

```text
Berlin 1. Chancellor Wirth told t Reichstag tdy in outlining the gvts
pgn tt qn restoration & reconciliation wd b the keynote f new gvts
policy. qj He added ttt cabinet ws dtmd disarmament sd b carried out
loyally & tt disarmament wd n b. the ocan f imposition of further
penalties bi t alis.
```

--------------------------------

### Serve Elm Website Locally

Source: https://github.com/elm/elm-lang.org/blob/master/README.md

After building the static site, navigate to the output directory and run `elm reactor` to view the site at http://localhost:8000.

```bash
(cd _site ; elm reactor)
```

--------------------------------

### init

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/TextAnimation.md

Creates an initial animation state that begins by typing the first string.

```APIDOC
## init

### Description
Creates an initial animation state that begins by typing the first string.

### Parameters
#### Path Parameters
- **x** (String) - Required - The first string to display
- **xs** (List String) - Required - Remaining strings to cycle through

### Return type
`State` — An animation state ready to begin typing.

### Description
Initializes the animation in a deleting state with empty text (ready to start typing the first string). The provided string `x` is set as the current cycle element, with `xs` as remaining elements.

### Example
```elm
import TextAnimation

animation : TextAnimation.State
animation =
  TextAnimation.init "Hello"
    [ "World", "Elm", "Code" ]
```
```

--------------------------------

### Build Elm Website

Source: https://github.com/elm/elm-lang.org/blob/master/README.md

Run this script to generate the static website. After generation, use `elm reactor` to serve the site locally.

```bash
bash build.sh
```

--------------------------------

### Get DOM Element Width

Source: https://github.com/elm/elm-lang.org/blob/master/static/assets/blog/0.18/todomvc.html

Calculates the width of a DOM element based on its content and border properties.

```Elm
function p(t, r) {
    return n(r, function(r) {
        switch (t.ctor) {
            case "Content":
                return r.scrollHeight;
            case "VisibleContent":
                return r.clientHeight;
            case "VisibleContentWithBorders":
                return r.offsetHeight;
            case "VisibleContentWithBordersAndMargins":
                var e = r.getBoundingClientRect();
                return e.bottom - e.top
        }
    })
}
```

--------------------------------

### Create Program

Source: https://github.com/elm/elm-lang.org/blob/master/static/assets/blog/0.18/todomvc.html

Initializes an Elm application. This is the entry point for an Elm program, setting up the initial model and update functions.

```Elm
var Cr=G(Z)
```

--------------------------------

### Get DOM Element Height

Source: https://github.com/elm/elm-lang.org/blob/master/static/assets/blog/0.18/todomvc.html

Calculates the height of a DOM element based on its content and border properties.

```Elm
function d(t, r) {
    return n(r, function(r) {
        switch (t.ctor) {
            case "Content":
                return r.scrollWidth;
            case "VisibleContent":
                return r.clientWidth;
            case "VisibleContentWithBorders":
                return r.offsetWidth;
            case "VisibleContentWithBordersAndMargins":
                var e = r.getBoundingClientRect();
                return e.right - e.left
        }
    })
}
```

--------------------------------

### hint

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Skeleton.md

Creates a simple documentation page with centered markdown content.

```APIDOC
## hint

### Description
Creates a simple documentation page with markdown content, rendered centered with a maximum width.

### Function Signature
```elm
hint : String -> String -> Program () () Never
```

### Parameters
#### title (String) - Required
Page title.

#### markdown (String) - Required
Markdown content (converted to HTML with Center.markdown).

### Return type
`Program () () Never` — A complete Elm program.

### Example
```elm
import Skeleton

view : Html Never
view = 
  Skeleton.hint "Installation"
    """
# Getting Started

Follow these steps to install Elm:

1. Visit elm-lang.org
2. Download the installer
3. Run the installer
    """
```
```

--------------------------------

### Get Scroll Left of DOM Element

Source: https://github.com/elm/elm-lang.org/blob/master/static/assets/blog/0.18/todomvc.html

Retrieves the horizontal scroll position of a DOM element identified by its ID.

```Elm
function l(t) {
    return n(t, function(t) {
        return t.scrollLeft
    })
}
```

--------------------------------

### Get Scroll Top of DOM Element

Source: https://github.com/elm/elm-lang.org/blob/master/static/assets/blog/0.18/todomvc.html

Retrieves the vertical scroll position of a DOM element identified by its ID.

```Elm
function u(t) {
    return n(t, function(t) {
        return t.scrollTop
    })
}
```

--------------------------------

### Create an Element with Color

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Colors.md

Demonstrates how to set the background color of an Element using a color from the Colors module. Requires importing `Colors` and `Element`.

```elm
import Colors
import Element as E

view : E.Element msg
view =
  E.el [ E.Background.color Colors.blue ]
    (E.text "Colored text")
```

--------------------------------

### Get DOM Element by ID

Source: https://github.com/elm/elm-lang.org/blob/master/static/assets/blog/0.18/todomvc.html

Retrieves a DOM element by its ID and applies a transformation function. Returns an error if the element is not found.

```Elm
function n(t, r) {
    return _r.nativeBinding(function(e) {
        b(function() {
            var n = document.getElementById(t);
            return null === n ? void e(_r.fail({ ctor: "NotFound", _0: t })) : void e(_r.succeed(r(n)))
        })
    })
}
```

--------------------------------

### Get Current Element of a Cycle

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Cycle.md

Retrieves the current element of a cycle without changing its state. This is useful for inspecting the active element.

```elm
import Cycle

myCycle : Cycle.Cycle String
myCycle = Cycle.init "one" ["two", "three"]

currentValue : String
currentValue = Cycle.next myCycle  -- "one"
```

--------------------------------

### Elm Debugger Program Runner

Source: https://github.com/elm/elm-lang.org/blob/master/static/assets/blog/0.18/todomvc.html

A function to run the Elm Debugger program with a given configuration. Use this to start the debugger in your Elm application.

```elm
si=(t(function(t,r){var e=r;return{init:function(r){return a(ni,t,e.init(r))},view:ci(e.view),update:li(e.update),viewIn:Qu,viewOut:ri,subscriptions:oi(e.subscriptions)}}),function(t){return a(_n.program,Pr,t)})
```

--------------------------------

### Implementing a Carousel with Cycle

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Cycle.md

Demonstrates how to use the Cycle module to implement a carousel, managing a list of items and the current selection.

```elm
import Cycle

type alias CarouselState =
  { items : Cycle.Cycle String
  , selection : Int
  }

nextItem : CarouselState -> CarouselState
nextItem state =
  { state | items = Cycle.step state.items }

currentItem : CarouselState -> String
currentItem state =
  Cycle.next state.items
```

--------------------------------

### toList

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Cycle.md

Converts a cycle to a standard list, starting from the current element. The order of elements in the list reflects the cycle's current position and sequence.

```APIDOC
## toList

### Description
Converts a cycle to a standard list, starting from the current element.

### Method Signature
```elm
toList : Cycle a -> List a
```

### Parameters
#### Path Parameters
- **cycle** (Cycle a) - Required - The cycle to convert

### Return Type
`List a` - A list of all elements in cycle order.

### Example
```elm
import Cycle

myCycle : Cycle.Cycle String
myCycle = Cycle.init "one" ["two", "three"]

list : List String
list = Cycle.toList myCycle  -- ["one", "two", "three"]
```
```

--------------------------------

### Complete Elm Page Structure

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/00-START-HERE.md

This snippet shows how to construct a complete Elm page using the Skeleton and Ui modules for layout and components. It demonstrates creating a welcome message with links and a button.

```elm
import Html exposing (Html)
import Skeleton
import Ui
import Element as E

main : Program () () Never
main =
  Skeleton.docs "Getting Started"
    [ E.column [ E.spacing 20 ]
        [ Ui.h2 "Welcome"
        , E.paragraph []
            [ E.text "Check out the "
            , Ui.link []
                { title = "guide"
                , url = "https://guide.elm-lang.org"
                }
            ]
        , Ui.linkButton "/start" "Get Started" []
        ]
        |> E.layout []
    ]
```

--------------------------------

### Basic Code Highlighting

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Highlight.md

Demonstrates basic code highlighting using predefined highlight functions for variables and strings.

```elm
import Html exposing (div, text)
import Highlight

codeExample : Html msg
codeExample =
  div []
    [ text "let "
    , Highlight.var
    , text " = "
    , Highlight.string "\"world\""
    ]
```

--------------------------------

### Convert Cycle to List

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Cycle.md

Converts a cycle into a standard Elm list, preserving the order starting from the current element. Use this to view all elements in sequence.

```elm
import Cycle

myCycle : Cycle.Cycle String
myCycle = Cycle.init "one" ["two", "three"]

list : List String
list = Cycle.toList myCycle  -- ["one", "two", "three"]
```

--------------------------------

### Highlight Variable

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Highlight.md

Creates a cyan-colored span element for highlighting variable names or references in code examples. Typically used within a larger HTML structure.

```Elm
import Html exposing (div)
import Highlight

view : Html msg
view =
  div []
    [ Html.text "let "
    , Highlight.var
    , Html.text " = value"
    ]
```

--------------------------------

### Module Import

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Highlight.md

Illustrates the necessary import statement for the Highlight module, which exports all symbols for direct access.

```elm
import Highlight
```

--------------------------------

### Combine Colors for UI Elements

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Colors.md

Illustrates creating a UI card with specific background and border colors using `Colors.white` and `Colors.lightishGray`. Requires importing `Colors`, `Element`, `Element.Background`, and `Element.Border`.

```elm
import Colors
import Element as E
import Element.Background as Background
import Element.Border as Border

card : E.Element msg
card =
  E.el
    [
      Background.color Colors.white
    , Border.color Colors.lightishGray
    , Border.width 1
    , E.padding 16
    ]
    (E.text "Card content")
```

--------------------------------

### Highlight.equals

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Highlight.md

Generates an HTML element for highlighting equals signs in code, rendered in dull red. This function is used to emphasize assignment or equality operators in code examples.

```APIDOC
## Highlight.equals

### Description
Generates an HTML element for highlighting equals signs in code, rendered in dull red. Used to highlight assignment operators or equality operators in code examples.

### Signature
```elm
equals : Html msg
```

### Return Value
- `Html msg` - A styled `<span>` element.

### Example
```elm
import Html exposing (div)
import Highlight

view : Html msg
view =
  div []
    [ Html.text "x "
    , Highlight.equals
    , Html.text " 5"
    ]
```
```

--------------------------------

### Highlight.var

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Highlight.md

Generates an HTML element for highlighting variables in code, rendered in cyan. This function is typically used to emphasize variable names or references within code examples.

```APIDOC
## Highlight.var

### Description
Generates an HTML element for highlighting variables in code, rendered in cyan. Typically used in code examples to highlight variable names or references.

### Signature
```elm
var : Html msg
```

### Return Value
- `Html msg` - A styled `<span>` element.

### Example
```elm
import Html exposing (div)
import Highlight

view : Html msg
view =
  div []
    [ Html.text "let "
    , Highlight.var
    , Html.text " = value"
    ]
```
```

--------------------------------

### Create a Basic Page with Skeleton

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/README.md

Use Skeleton.docs to create a new page with a title and content. This is a foundational pattern for structuring Elm applications.

```elm
import Html exposing (Html)
import Skeleton

main : Program () () Never
main =
  Skeleton.docs "Page Title"
    [ Html.text "Page content here" ]
```

--------------------------------

### Highlight Equals Sign

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Highlight.md

Creates a dull red-colored span element for highlighting assignment or equality operators in code examples. This snippet is useful for visually distinguishing operators.

```Elm
import Html exposing (div)
import Highlight

view : Html msg
view =
  div []
    [ Html.text "x "
    , Highlight.equals
    , Html.text " 5"
    ]
```

--------------------------------

### Rotating Through Options with Cycle

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Cycle.md

Shows how to use Cycle to rotate through a predefined list of options, such as application themes.

```elm
import Cycle

themes : Cycle.Cycle String
themes = Cycle.init "light" ["dark", "auto"]

toggleTheme : Cycle.Cycle String -> Cycle.Cycle String
toggleTheme = Cycle.step
```

--------------------------------

### Build Elm Website

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/README.md

Use this bash script to build the Elm website. It navigates to the project directory and executes the build script, generating static HTML files.

```bash
cd /workspace/home/elm-lang.org
bash build.sh
```

--------------------------------

### Initialize a Cycle

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Cycle.md

Creates a new Cycle with a specified current element and a list of remaining elements. Use this to set up a new cycle instance.

```elm
import Cycle

myCycle : Cycle.Cycle String
myCycle = Cycle.init "one" ["two", "three", "four"]
```

--------------------------------

### Initialize Elm Program with Flags

Source: https://github.com/elm/elm-lang.org/blob/master/static/assets/blog/0.18/todomvc.html

Use `programWithFlags` to initialize an Elm program that accepts initial flags. If flags are not needed, use `program` instead.

```javascript
function rr(t,r){throw r&&(r.innerHTML='<div style="padding-left:1em;"><h2 style="font-weight:normal;"><b>Oops!</b> Something went wrong when starting your Elm program.</h2><pre style="padding-left:1em;">'+t+"</pre></div>"),Error(t)}
function er(t,r,e,n){r.embed=function(r,e){for(;r.lastChild;)r.removeChild(r.lastChild);return lr.initialize(n(t.init,e,r),t.update,t.subscriptions,nr(r,t.view))},r.fullscreen=function(r){return lr.initialize(n(t.init,r,document.body),t.update,t.subscriptions,nr(document.body,t.view))}}
function nr(t,r){return function(e,n){var o={tagger:e,parent:void 0},c=r(n),u=N(c,o);return t.appendChild(u),ur(u,r,c,o)}}
function or(t,r,e,n){r.freeze=function(r,e){var o=n(t.init,e)._0,c=t.view(o),u=K(c);return'<div id="'+r+'" '+Br+"="+'"'+JSON.stringify(c)+'"'+'>'+u+"</div>"},r.thaw=function(r,o){return lr.initialize(n(t.init,o),t.update,t.subscriptions,cr(e,r,t.view))}}
function cr(t,r,e){return function(n,o){"string"!=typeof r&&rr("To initialize a program with "+t+".thaw(), the first argument must be the STRING id you used when you called "+t+".freeze() and the HTML that resulted from freeze must be embeded on this page.");var c=document.getElementById(r);c||rr("You tried to initialize a frozen program with "+t+".thaw(\""+r+"\")", but I cannot find that ID in the DOM.\nAre you sure it is the same ID you used when calling "+t+".freeze()?\nAre you sure you embedded the frozen HTML in this page?");try{var u=JSON.parse(c.getAttribute(Br));c.removeAttribute(Br)}catch(i){var a="You tried to initialize a frozen program with "+t+".thaw(\""+r+"\"), but some data has been corrupted.\nCalling freeze produces an HTML string containing a "+Br+" attribute. That attribute SHOULD hold a JSON object that I use to get everything set up, but I ran into the\n following problem when trying to read it:\n\n"+i.message;rr(a,c)}var _={tagger:n,parent:void 0},l=ur(c.firstChild,e,u,_);return l(o),l}}
function ur(t,r,e,n){function o(){switch(u){case"NO_REQUEST":throw Error("Unexpected draw callback.\nPlease report this to <https://github.com/elm-lang/virtual-dom/issues>");case"PENDING_REQUEST":Sr(o),u="EXTRA_REQUEST";var e=r(c),a=A(i,e);return t=U(t,i,a,n),void(i=e);case"EXTRA_REQUEST":return void(u="NO_REQUEST")}}var c,u="NO_REQUEST",i=e;return function(t){"NO_REQUEST"===u&&Sr(o),u="PENDING_REQUEST",c=t}}function ir(t,r,e,n){r.fullscreen=function(r){var o={doc:void 0};return lr.initialize(n(t.init,r,document.body),t.update(ar(o)),t.subscriptions,sr(e,document.body,o,t.view,t.viewIn,t.viewOut))}}
function ar(t){return _r.nativeBinding(function(r){var e=t.doc;if(e){var n=e.getElementsByClassName("debugger-sidebar-messages")[0];n&&(n.scrollTop=n.scrollHeight)}r(_r.succeed(h.Tuple0))})}
function sr(t,r,e,n,o,c){return function(u,i){var a={tagger:u,parent:void 0},_={tagger:u,parent:void 0},l=n(i),s=N(l,a);r.appendChild(s);var f=ur(s,n,l,a),d=o(i)._1,p=N(d,_);r.appendChild(p);var h=hr(a,p,o),g=ur(p,h,d,_),v=dr(i,c,_,r,t,e);return function(t){f(t),g(t),v(t)}}}
function dr(t,r,e,n,o,c){var u,i;return function(t){if(t.isDebuggerOpen){if(!c.doc)return u=r(t),void(i=pr(o,c,u,e));Nr=c.doc;var n=r(t),a=A(u,n);i=U(i,u,a,e),u=n,Nr=document}}}
function pr(t,r,e,n){function o(){r.doc=void 0,_.close()}var c=900,u=360,i=screen.width-c,a=screen.height-u,_=window.open("","","width="+c+",height="+u+",left="+i+",top="+a);Nr=_.document,r.doc=Nr,Nr.title="Debugger - "+t,Nr.body.style.margin="0",Nr.body.style.padding="0";var l=N(e,n);return Nr.body.appendChild(l),Nr.addEventListener("keydown",function(t){t.metaKey&&82===t.which&&window.location.reload(),38===t.which&&(n.tagger({ctor:"Up"}),t.preventDefault()),40===t.which&&(n.tagger({ctor:"Down"}),t.preventDefault())}),window.addEventListener("unload",o),_.addEventListener("unload",function(){r.doc=void 0,window.removeEventListener("unload",o),n.tagger({ctor:"Close"})}),Nr=document,l}}
function hr(t,r,e){var n,o=br(r),c="Normal",u=t.tagger,i=function(){};return function(r){var a=e(r),_ = a._0.ctor;return t.tagger="Normal"===_?u:i,c!==_&&(vr("removeEventListener",o,c),vr("addEventListener",o,_),"Normal"===c&&(n=document.body.style.overflow,document.body.style.overflow="hidden"),"Normal"===_&&(document.body.style.overflow=n),c=_),a._1}}
function vr(t,r,e){switch(e){case"Normal":return;case"Pause":return mr(t,r,Ar);case"Message":return mr(t,r,Mr)}}
function mr(t,r,e){for(var n=0;n<e.length;n++)document.body[t](e[n],r,!0)}
function br(t){return function(r){if("keydown"!==r.type||!r.metaKey||82!==r.which){for(var 
```

--------------------------------

### Highlight.string

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Highlight.md

Generates an HTML element for highlighting string literals in code, rendered in dull yellow. This function takes a string as input and displays it with a distinct color for string values in code examples.

```APIDOC
## Highlight.string

### Description
Generates a colored span element displaying the provided string in dull yellow. Used for string literals and text values in code examples.

### Signature
```elm
string : String -> Html msg
```

### Parameters
#### Path Parameters
- **str** (String) - Required - The string content to display

### Return Value
- `Html msg` - A styled `<span>` element.

### Example
```elm
import Html exposing (div)
import Highlight

view : Html msg
view =
  div []
    [ Html.text "message = "
    , Highlight.string "\"Hello, Elm!\""
    ]
```
```

--------------------------------

### Create Program with Flags

Source: https://github.com/elm/elm-lang.org/blob/master/static/assets/blog/0.18/todomvc.html

Initializes an Elm application with initial flags. Flags are used to pass configuration data from JavaScript to the Elm runtime.

```Elm
var Er=G(tr)
```

--------------------------------

### Coded Telegraphic Dispatch Example

Source: https://github.com/elm/elm-lang.org/blob/master/static/assets/public-opinion.txt

Illustrates how a news dispatch from Washington D.C. is condensed using a code for telegraphic transmission due to cost and facility limitations. This method significantly shortens the message while retaining key information.

```text
Washn i. The Uni Stas rgds tq of Ger spg seized in ts cou at t outbk
o hox as a clod incident.
```

--------------------------------

### Build Page with Ui Components

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/Ui.md

Use this snippet to construct the main content of a page with various Ui elements like headings, paragraphs, links, and blockquotes. Ensure Element and Element.Spacing are imported.

```elm
import Ui
import Element as E
import Element.Font as Font
import Element.Spacing as Spacing

view : E.Element msg
view =
  E.column
    [ Spacing.spacingXY 0 20
    ]
    [ Ui.h1 ["Welcome"]
    , Ui.h2 "Getting Started"
    , E.paragraph []
        [
          E.text "Check out the "
        ,
          Ui.link [] { title = "guide", url = "/guide" }
        ,
          E.text "."
        ]
    , Ui.blockquote "Elm is a delightful language for reliable web applications."
    ]
```

--------------------------------

### Create a Simple Elm Page

Source: https://github.com/elm/elm-lang.org/blob/master/_autodocs/INDEX.md

This snippet demonstrates how to create a basic Elm page using the Skeleton and Html modules. It sets a title and provides content.

```elm
import Skeleton
import Html

main : Program () () Never
main =
  Skeleton.skeleton "Title" Skeleton.Examples
    [ Html.text "Content" ]
```

--------------------------------

### Get human-readable type names in Elm

Source: https://github.com/elm/elm-lang.org/blob/master/static/assets/blog/0.18/todomvc.html

This Elm function returns a human-readable string representation for various Elm data types. It's useful for displaying type information in a user-friendly way, such as in error messages or debugging interfaces.

```elm
tu=function(t){var r=t;switch(r.ctor){case"Function":return"functions";case"Decoder":return"JSON decoders";case"Task":return"tasks";case"Process":return"processes";case"Socket":return"web sockets";case"Request":return"HTTP requests";case"Program":return"programs";default:return"virtual DOM values"}}
```