Local fonts and background local image

examples/backdround_with_image.rb

@@ -0,0 +1,16 @@
+Shoes.app do
+
+  stack width:100, height:100 do
+    background "docs/static/avatar.png"
+    border blue ,strokewidth: 4
+  end
+
+  stack width:100, height:100 do
+    background red
+  end
+
+  stack width:100, height:100 do
+    background "rgba(255,200,0,255)"
+  end
+
+end

examples/local_fonts.rb

@@ -0,0 +1,4 @@
+Scarpe.app do
+  font "fonts/Pacifico.ttf"
+  para "Hello yayyy"
+end

lib/scarpe/base64.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+require "base64"
+require "uri"
+
+class Scarpe
+  module Base64
+    def valid_url?(string)
+      uri = URI.parse(string)
+      uri.is_a?(URI::HTTP) || uri.is_a?(URI::HTTPS)
+    rescue URI::InvalidURIError, URI::BadURIError
+      false
+    end
+
+    def encode_file_to_base64(image_filename)
+      directory_path = File.dirname(__FILE__, 3)
+
+      image_path = File.join(directory_path, image_filename)
+      puts "directory_path: #{directory_path}"
+
+      image_data = File.binread(image_path)
+
+      encoded_data = ::Base64.strict_encode64(image_data)
+
+      encoded_data
+    end
+  end
+end

lib/scarpe/font.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class Scarpe
+  class Font < Scarpe::Widget
+    display_properties :font
+
+    def initialize(font)
+      @font = font
+      super
+
+      create_display_widget
+    end
+  end
+end

lib/scarpe/widgets.rb

@@ -10,6 +10,7 @@
 require_relative "star"
 
 require_relative "fill"
+require_relative "font"
 
 require_relative "slot"
 require_relative "para"

lib/scarpe/wv.rb

@@ -19,6 +19,7 @@
 
 require_relative "wv/fill"
 require_relative "wv/arc"
+require_relative "wv/font"
 
 require_relative "wv/app"
 require_relative "wv/para"

lib/scarpe/wv/background.rb

@@ -1,13 +1,22 @@
 # frozen_string_literal: true
 
+require "scarpe/base64"
+
 class Scarpe
   module WebviewBackground
+    include Base64
+
     def style
       styles = (super if defined?(super)) || {}
       return styles unless @background_color
 
-      color = if @background_color.is_a?(Range)
+      color = case @background_color
+      when Array
+        "rgba(#{@background_color.join(", ")})"
+      when Range
         "linear-gradient(45deg, #{@background_color.first}, #{@background_color.last})"
+      when ->(value) { File.exist?(value) }
+        "url(data:image/png;base64,#{encode_file_to_base64(@background_color)})"
       else
         @background_color
       end

lib/scarpe/wv/border.rb

@@ -6,12 +6,14 @@ def style
       styles = (super if defined?(super)) || {}
       return styles unless @border_color
 
-      border_color = if @border_color.is_a?(Range)
-        { "border-image": "linear-gradient(45deg, #{@border_color.first}, #{@border_color.last}) 1" }
+      border_color = case @border_color
+      when Range
+        { "border-image": "linear-gradient(45deg, #{@border_color.first}, #{@border_color.last})" }
+      when Array
+        { "border-color": "rgba(#{@border_color.join(", ")})" }
       else
         { "border-color": @border_color }
       end
-
       styles.merge(
         "border-style": "solid",
         "border-width": "#{@options[:strokewidth] || 1}px",

lib/scarpe/wv/font.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+require "scarpe/base64"
+
+class Scarpe
+  class WebviewFont < WebviewWidget
+    include Base64
+    attr_accessor :font
+
+    def initialize(properties)
+      @font = properties[:font]
+      super
+    end
+
+    def element
+      puts @font
+      HTML.render do |h|
+        h.link(href: @font, rel: "stylesheet")
+        h.style do
+          <<~CSS
+            @font-face {
+              font-family: Pacifico;
+              src: url("data:font/truetype;base64,#{encode_file_to_base64(@font)}") format('truetype');
+            }
+            * {
+              font-family: Pacifico;
+            }
+          CSS
+        end
+      end
+    end
+  end
+end

lib/scarpe/wv/html.rb

@@ -2,8 +2,10 @@
 
 class Scarpe
   class HTML
-    CONTENT_TAGS = [:div, :p, :button, :ul, :li, :textarea, :a, :video, :strong, :em, :code, :u, :line, :span, :svg].freeze
-    VOID_TAGS = [:input, :img, :polygon, :source, :path].freeze
+
+    CONTENT_TAGS = [:div, :p, :button, :ul, :li, :textarea, :a, :video, :strong, :style, :em, :code, :u, :line, :span, :svg].freeze
+    VOID_TAGS = [:input, :img, :polygon, :source, :link, :path].freeze
+
     TAGS = (CONTENT_TAGS + VOID_TAGS).freeze
 
     class << self

lib/scarpe/wv/image.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
-require "base64"
-require "uri"
+require "scarpe/base64"
 
 class Scarpe
   class WebviewImage < WebviewWidget
+    include Base64
     def initialize(properties)
       super
 
-      @url = valid_url?(@url) ? @url : "data:image/png;base64,#{encode_image_to_base64(@url)}"
+      @url = valid_url?(@url) ? @url : "data:image/png;base64,#{encode_file_to_base64(@url)}"
     end
 
     def element
@@ -25,25 +25,6 @@ def element
 
     private
 
-    def valid_url?(string)
-      uri = URI.parse(string)
-      uri.is_a?(URI::HTTP) || uri.is_a?(URI::HTTPS)
-    rescue URI::InvalidURIError, URI::BadURIError
-      false
-    end
-
-    def encode_image_to_base64(image_filename)
-      directory_path = File.dirname(__FILE__, 4)
-
-      image_path = File.join(directory_path, image_filename)
-
-      image_data = File.binread(image_path)
-
-      encoded_data = Base64.strict_encode64(image_data)
-
-      encoded_data
-    end
-
     def style
       styles = {}