html2sycamore

convert.rb

#!/bin/env ruby

# This lets you past HTML code on the terminal and convert it to Rust view! macro code.
# After pasting make a new line and press CTRL + D
# You can also use a pipe to convert: $ cat input.html | bundle exec ./convert.rb

require 'nokogiri'

puts "Past now your html code:"

html = Nokogiri::HTML.parse($stdin.read)

@nested_level = -3

SPACES = "  "
output = ""

def lvl_up
  @nested_level += 1
end

def lvl_down
  @nested_level -= 1
end

def spaces
  SPACES * @nested_level
end

def process_attributes(node)
  node.attributes.map do |_,item|
    "#{item.name}=\"#{item.value}\""
  end
end


def process(node)
  lvl_up
  options = process_attributes(node)

  children = node.children.map do |child_node|
      process(child_node)
  end.compact

  result = case node.name
  when 'div', 'nav', 'a', 'button', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'main', 'svg', 'path'
    "\n" +
    "#{spaces}#{node.name}#{options.any? ? "(#{options.join(", ")})" : ""} {" +
    "#{children ? ("#{spaces}#{children.join("\n")}") : ""}" +
    "\n" + "#{spaces}}"
  when 'img'
    "\n" + "#{spaces}#{node.name}#{options.any? ? "(#{options.join(", ")})" : ""} {}"
  when 'text'
    (node.text.strip != "" ? "\n#{spaces}\"#{node.text.strip}\"" : nil)
  when 'comment'
    "\n" + node.text.each_line.map {|line| "#{spaces}// #{line.strip}"}.join("\n")
  when 'body'
    children.join("")
  when 'html'
    children.join("")
  else
      raise "Unimplemented type: #{node.name}"
  end

  lvl_down
  result
end

html.document.children.each do |node|
  result = process(node)
  output << result unless result.nil?
end

puts
puts "Result:"
puts
puts output

Gemfile

source 'https://rubygems.org'

gem 'nokogiri'

input.html

<div class="min-h-full">
  <nav class="bg-gray-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <img class="h-8 w-8" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow">
          </div>
          <div class="hidden md:block">
            <div class="ml-10 flex items-baseline space-x-4">
              <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
              <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Dashboard</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
</div>

output.rs

div(class="min-h-full") {
  nav(class="bg-gray-800") {  
    div(class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8") {    
      div(class="flex items-center justify-between h-16") {      
        div(class="flex items-center") {        
          div(class="flex-shrink-0") {          
            img(class="h-8 w-8", src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg", alt="Workflow") {}
          }

          div(class="hidden md:block") {          
            div(class="ml-10 flex items-baseline space-x-4") {            
              // Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white"

              a(href="#", class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium", aria-current="page") {              
                "Dashboard"
              }
            }
          }
        }
      }
    }
  }
}