Class: Home

Inherits:
Object
  • Object
show all
Includes:
Porous::Component, Porous::Page
Defined in:
lib/porous/cli/template/pages/home.rb

Constant Summary

Constants included from VirtualDOM::DOM

VirtualDOM::DOM::HTML_TAGS, VirtualDOM::DOM::SVG_TAGS

Instance Attribute Summary

Attributes included from Porous::Injection

#injections

Instance Method Summary collapse

Methods included from Porous::Component

included, #initialize, #props, #to_s, #with_props

Methods included from Porous::Injection

#init, #init_injections, #inject, #with_root_component

Methods included from Porous::Component::Render

#before_render, #render_virtual_dom

Methods included from Porous::Component::Virtual

#component

Methods included from VirtualDOM::DOM

#class_names, #merge_string, #method_missing, #process_params, #process_tag, #text, #to_vnode

Methods included from Porous::Page

#route!

Dynamic Method Handling

This class handles dynamic methods through the method_missing method in the class VirtualDOM::DOM

Instance Method Details

#page_description ⇒ Object 



9
 
# File 'lib/porous/cli/template/pages/home.rb', line 9

def page_description = 'Landing page generated by Porous'

#page_title ⇒ Object 



8
 
# File 'lib/porous/cli/template/pages/home.rb', line 8

def page_title = 'Porous Web | Home'

#render ⇒ Object

rubocop:disable Metrics, Layout/LineLength



12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
# File 'lib/porous/cli/template/pages/home.rb', line 12

def render
  div class: 'container p-8 mx-auto lg:h-full xl:px-0 flex flex-wrap' do
    div class: 'flex items-center w-full lg:w-1/2' do
      div class: 'max-w-2xl mb-8' do
        h1 class: 'text-4xl font-bold leading-snug tracking-tight text-gray-800 lg:text-4xl lg:leading-tight xl:text-6xl xl:leading-tight dark:text-white' do
          span class: 'bg-gradient-to-br from-pink-500 to-violet-500 bg-clip-text text-transparent box-decoration-clone' do
            text 'Welcome to Porous!'
          end
        end
        p class: 'py-5 text-xl leading-normal text-gray-500 lg:text-xl xl:text-2xl dark:text-gray-300' do
          text 'Porous is an all-in-one application engine for building applications with Web technologies.'
        end

        div class: 'flex flex-col items-start space-y-3 sm:space-x-4 sm:space-y-0 sm:items-center sm:flex-row' do
          a href: 'https://github.com/exastencil/porous', target: '_blank', rel: 'noopener',
            class: 'group relative inline-flex h-12 items-center justify-center overflow-hidden rounded-md bg-indigo-600 px-6 font-medium text-neutral-200 transition hover:scale-110' do
            span 'Get Started 🧽'
            div class: 'absolute inset-0 flex h-full w-full justify-center [transform:skew(-12deg)_translateX(-100%)] group-hover:duration-1000 group-hover:[transform:skew(-12deg)_translateX(100%)]' do
              div class: 'relative h-full w-8 bg-white/20'
            end
          end
          a href: 'https://github.com/exastencil/porous', target: '_blank', rel: 'noopener',
            class: 'flex items-center space-x-2 text-gray-500 dark:text-gray-400' do
            img class: 'w-8 h-8 text-gray-500', src: '/static/github.svg'
            span 'View on GitHub'
          end
        end
      end
    end

    div class: 'flex items-center justify-center w-full lg:w-1/2' do
      div do
        img src: '/static/hero.png', width: '616', height: '617', class: 'object-cover', alt: 'Hero Illustration'
      end
    end
  end
end

#route ⇒ Object 



7
 
# File 'lib/porous/cli/template/pages/home.rb', line 7

def route = '/'