Introduction

Hokusai is a Ruby framework that aims to make it easy and fun to build desktop applications.

require "wikipedia"
require "hokusai"
require "hokusai/backends/raylib"

module Wiki
  class Widget < Hokusai::Block
    style <<-EOF
    [style]
    wikiStyle {
      color: rgb(49, 49, 49);
      size: 20;
      markdown: true;
      padding: padding(5.0, 10.0, 5.0, 10.0);
    }
    search {
      height: 45;
      background: rgb(239, 243, 255);
    }
    EOF
    template <<-EOF
    [template]
      vblock
        vblock { 
          ...search
        }
          label { 
            content="Search by Term"
          }
          input {
            size="25"
            @change="update_term"
          }
        [if="summary"]
          panel
            text {
              :content="summary"
              ...wikiStyle
            }
    EOF

    uses(
      vblock: Hokusai::Blocks::Vblock,
      text: Hokusai::Blocks::Text,
      label: Hokusai::Blocks::Label,
      input: Hokusai::Blocks::Input,
      panel: Hokusai::Blocks::Panel,
    )

    attr_reader :summary

    def update_term(term)  
      page = Wikipedia.find(term)

      @summary = <<~EOF
      **[#{term}](#{page.fullurl})**

      #{page.summary}
      EOF

      @summary
    end
  end
end

Hokusai::Backends::RaylibBackend.run(Wiki::Widget) do |config|
  config.after_load do
    font = Hokusai::Backends::RaylibBackend::Font.from_ext("#{__dir__}/assets/Inter-Regular.ttf", 160)
    Hokusai.fonts.register "inter", font
    Hokusai.fonts.activate "inter"
  end

  config.width = 500
  config.height = 500
  config.title = "Wiki Widget"
end

Maps to