Class: Sandals::HTMLRenderer

Inherits:

Object

• Object
• Sandals::HTMLRenderer

Defined in:

lib/sandals/html_renderer.rb

Constant Summary

TURBO_URL =

"/__sandals/assets/turbo.js"

TURBO_PATH =

File.expand_path("assets/turbo.es2017-umd.js", __dir__)

DEFAULT_STYLES =

<<~CSS
  :root {
    color-scheme: light;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
    background: #f7f7f5;
    color: #20201e;
  }

  body {
    margin: 0;
  }

  main {
    box-sizing: border-box;
    width: min(100%, 48rem);
    margin: 0 auto;
    padding: 3rem 1.5rem;
  }

  h1 {
    margin: 0;
    font-size: clamp(2rem, 7vw, 4rem);
    letter-spacing: -0.04em;
  }

  p {
    margin: 0;
    line-height: 1.6;
  }

  .error,
  .field-error {
    color: #b42318;
  }

  .notice {
    color: #067647;
  }

  .runtime-errors {
    box-sizing: border-box;
    width: min(100%, 48rem);
    margin: 0 auto;
    padding: 1rem 1.5rem 0;
  }

  .action-error {
    display: grid;
    gap: 0.375rem;
    padding: 1rem;
    border: 1px solid #fda29b;
    border-radius: 0.375rem;
    background: #fef3f2;
    color: #b42318;
  }

  .action-error code {
    overflow-wrap: anywhere;
  }

  .field-error {
    font-size: 0.875rem;
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  a {
    color: #175cd3;
    text-underline-offset: 0.15em;
  }

  .text-field,
  .number-field,
  .text-area,
  .file-field,
  .select {
    display: grid;
    gap: 0.375rem;
  }

  .text-field input,
  .number-field input,
  .text-area textarea,
  .file-field input,
  .select select {
    box-sizing: border-box;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid #c8c8c3;
    border-radius: 0.375rem;
    background: white;
    color: inherit;
    font: inherit;
  }

  input[aria-invalid="true"],
  textarea[aria-invalid="true"],
  select[aria-invalid="true"] {
    border-color: #b42318;
  }

  .text-area textarea {
    min-height: 7rem;
    resize: vertical;
  }

  .checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .checkbox input {
    width: 1rem;
    height: 1rem;
    margin: 0;
  }

  .radio {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .radio legend {
    margin-bottom: 0.375rem;
  }

  .radio label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .radio input {
    margin: 0;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    background: white;
  }

  th,
  td {
    padding: 0.625rem 0.75rem;
    border: 1px solid #deded9;
    text-align: left;
    vertical-align: top;
  }

  th {
    background: #f0f0ed;
    font-weight: 600;
  }

  button {
    padding: 0.625rem 1rem;
    border: 0;
    border-radius: 0.375rem;
    background: #20201e;
    color: white;
    font: inherit;
    cursor: pointer;
  }

  button[aria-busy="true"] {
    cursor: wait;
    opacity: 0.7;
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .flow {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 1rem;
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
CSS

Instance Method Summary

• #clear_action_error ⇒ Object
• #render(application, view, revision:, development_reload: false) ⇒ Object
• #render_action_error(error) ⇒ Object
• #render_fragment(view) ⇒ Object

Instance Method Details

#clear_action_error ⇒ Object

# File 'lib/sandals/html_renderer.rb', line 231

def clear_action_error
  <<~HTML
    <turbo-stream action="update" target="sandals-errors">
      <template></template>
    </turbo-stream>
  HTML
end

#render(application, view, revision:, development_reload: false) ⇒ Object

# File 'lib/sandals/html_renderer.rb', line 208

def render(application, view, revision:, development_reload: false)
  document(
    application.title,
    render_children(view),
    revision:,
    refresh_interval: application.refresh_interval,
    development_reload:
  )
end

#render_action_error(error) ⇒ Object

# File 'lib/sandals/html_renderer.rb', line 222

def render_action_error(error)
  original = error.original_error
  <<~HTML
    <turbo-stream action="update" target="sandals-errors">
      <template><section class="action-error" role="alert"><strong>Action failed for “#{escape(error.action_name)}”</strong><p>#{escape(original.class)}: #{escape(original.message)}</p><code>#{escape(error.location)}</code></section></template>
    </turbo-stream>
  HTML
end

#render_fragment(view) ⇒ Object

# File 'lib/sandals/html_renderer.rb', line 218

def render_fragment(view)
  render_children(view)
end