tabler components page

_config.yml

@@ -40,6 +40,8 @@ collections:
     output: true
   changelog:
     output: false
+  components:
+    output: true
 
 defaults:
   -
@@ -54,6 +56,11 @@ defaults:
     values:
       layout: docs
       nav-position: top
+  -
+    scope:
+      type: components
+    values:
+      layout: component
 
 
 colors:

build/browsersync.js

@@ -16,4 +16,5 @@ bs.init({
     ignoreInitial: true,
   },
   notify: false,
+  open: false
 });

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "scripts": {
-    "start": "npm-run-all clean css-main js-compile-standalone --parallel browsersync watch html-watch",
+    "start": "npm-run-all clean css-main js-compile-standalone --parallel html-watch browsersync watch",
     "build": "npm-run-all clean html-build css js fonts",
     "bundlesize": "bundlesize",
     "browsersync": "node build/browsersync.js",

pages/_components/simple-card.html

@@ -0,0 +1,5 @@
+---
+name: Simple box
+---
+
+{% include cards/card.html %}

pages/_components/widget-sales.html

@@ -0,0 +1,5 @@
+---
+title: Sales widget
+---
+
+{% include cards/charts/sales.html %}

pages/_includes/cards/card.html

@@ -3,7 +3,7 @@
 	<div class="card-status-{{include.status-position}} bg-{{ include.status-color | default: 'blue' }}"></div>
 	{% endif %}
 
-   {% unless include.hide-header %}
+   {% if include.show-header %}
 	<div class="card-header">
 		<h3 class="card-title">{{ include.title | default: 'Card title' }}</h3>
 
@@ -37,7 +37,7 @@
 		</div>
 		{% endunless %}
 	</div>
-   {% endunless %}
+   {% endif %}
 
    {% if include.alert %}
 	<div class="card-alert alert alert-{{ include.alert-type | default: 'success' }} mb-0">

pages/_includes/cards/charts/sales.html

@@ -0,0 +1,18 @@
+<div class="card">
+   <div class="card-body">
+      <div class="d-flex">
+         <div>Sales</div>
+         <div class="ml-auto">
+            {% include parts/dropdown/days.html %}
+         </div>
+      </div>
+      <div class="h1 mb-3">75%</div>
+      <div class="d-flex mb-2">
+         <div>Conversion rate</div>
+         <div class="ml-auto text-green">
+            24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
+         </div>
+      </div>
+      {% include ui/progress.html percentage=75 color="blue" size="sm" %}
+   </div>
+</div>

pages/_includes/layout/homepage.html

@@ -1,23 +1,6 @@
 <div class="row row-cards">
    <div class="col-sm-6 col-lg-3">
-      <div class="card">
+      {% include cards/charts/sales.html %}
-         <div class="card-body">
-            <div class="d-flex">
-               <div>Sales</div>
-               <div class="ml-auto">
-                  {% include parts/dropdown/days.html %}
-               </div>
-            </div>
-            <div class="h1 mb-3">75%</div>
-            <div class="d-flex mb-2">
-               <div>Conversion rate</div>
-               <div class="ml-auto text-green">
-                  24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
-               </div>
-            </div>
-            {% include ui/progress.html percentage=75 color="blue" size="sm" %}
-         </div>
-      </div>
    </div>
    <div class="col-sm-6 col-lg-3">
       <div class="card">

pages/_includes/ui/icon.html

@@ -1 +1,2 @@
+
 {% assign provider = include.provider | default: "fe" %}<i class="icon {{ provider }} {{ provider }}-{{ include.icon }}{% if include.class %} {{ include.class }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}"></i>

pages/_layouts/component.html

@@ -0,0 +1,18 @@
+---
+layout: base
+---
+
+{% assign columns = page.columns | default: 0 %}
+{% assign columns = 1 %}
+
+<div class="container">
+   <div class="d-flex align-items-center justify-content-center p-5" style="min-height: 50vh">
+      <div class="flex-fill "{% if columns > 0 %} style="max-width: {{ columns | times: 298 | minus: 24 }}px"{% endif %}>
+         {{ content }}
+      </div>
+   </div>
+</div>
+
+<div>
+   {{ content | highlight_tidy }}
+</div>

pages/_layouts/default.html

@@ -3,7 +3,9 @@ layout: base
 ---
 
 <div class="d-flex flex-row h-100p">
+   {% comment %}
    {% include layout/sidenav.html dark=page.sidenav-dark folded=page.sidenav-folded fixed=true %}
+   {% endcomment %}
 
    <div class="layout-main d-flex flex-column flex-fill max-w-full">
       {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}

pages/_plugins/jekyll-example.rb

@@ -1,100 +1,98 @@
 require 'htmlbeautifier'
 
+def render_rouge(code, lang, line_numbers = false)
+  require 'rouge'
+  formatter = Rouge::Formatters::HTML.new(line_numbers: line_numbers, wrap: false)
+  lexer = Rouge::Lexer.find_fancy(lang, code) || Rouge::Lexers::PlainText
+
+  code = HtmlBeautifier.beautify(code, indent: "\t")
+
+  code = code.gsub(/<hide>.*?<\/hide>/, "")
+  code = formatter.format(lexer.lex(code))
+  code = code.strip.gsub /^[\t\s]*$\n/, ''
+  code = code.gsub /\t/, "\s\s\s"
+  code = code.gsub "javascript:void(0)", "#"
+  code = code.gsub "../", "./"
+
+
+  "<div class=\"highlight\"><pre>#{code}</pre></div>"
+end
+
+def add_code_tag(code, lang)
+  code = code.sub(/<pre>\n*/, '<pre><code class="language-' + lang.to_s.gsub("+", "-") + '" data-lang="' + lang.to_s + '">')
+  code = code.sub(/\n*<\/pre>/, "</code></pre>")
+  code.strip
+end
+
 module Jekyll
-  module Tags
+  class ExampleBlock < Liquid::Block
-    class ExampleBlock < Liquid::Block
+    include Liquid::StandardFilters
-      include Liquid::StandardFilters
 
-      SYNTAX = /^([a-zA-Z0-9.+#-]+)((\s+[\w-]+(=((\w|[0-9_-])+|"([0-9]+\s)*[0-9]+"))?)*)$/
+    SYNTAX = /^([a-zA-Z0-9.+#-]+)((\s+[\w-]+(=((\w|[0-9_-])+|"([0-9]+\s)*[0-9]+"))?)*)$/
 
-      def initialize(tag_name, markup, tokens)
+    def initialize(tag_name, markup, tokens)
-        super
+      super
-        if markup.strip == ""
+      if markup.strip == ""
-          markup = 'html'
+        markup = 'html'
-        end
+      end
 
-        if markup.strip =~ SYNTAX
+      if markup.strip =~ SYNTAX
-          @lang = $1.downcase
+        @lang = $1.downcase
-          @options = {}
+        @options = {}
-          if defined?($2) && $2 != ''
+        if defined?($2) && $2 != ''
-            # Split along 3 possible forms -- key="<quoted list>", key=value, or key
+          # Split along 3 possible forms -- key="<quoted list>", key=value, or key
-            $2.scan(/(?:[\w-]+(?:=(?:(?:\w|[0-9_-])+|"[^"]*")?)?)/) do |opt|
+          $2.scan(/(?:[\w-]+(?:=(?:(?:\w|[0-9_-])+|"[^"]*")?)?)/) do |opt|
-              key, value = opt.split('=')
+            key, value = opt.split('=')
-              # If a quoted list, convert to array
+            # If a quoted list, convert to array
-              if value && value.include?("\"")
+            if value && value.include?("\"")
-                value.gsub!(/"/, "")
+              value.gsub!(/"/, "")
-                value = value.split
+              value = value.split
-              end
-              @options[key.to_sym] = value || true
             end
+            @options[key.to_sym] = value || true
           end
-          @options[:linenos] = false
+        end
-        else
+        @options[:linenos] = false
-          raise SyntaxError.new <<-eos
+      else
+        raise SyntaxError.new <<-eos
 Syntax Error in tag 'example' while parsing the following markup:
 
   #{markup}
 
 Valid syntax: example <lang> [id=foo]
-          eos
+        eos
-        end
       end
+    end
 
-      def render(context)
+    def render(context)
-        prefix = context["highlighter_prefix"] || ""
+      prefix = context["highlighter_prefix"] || ""
-        suffix = context["highlighter_suffix"] || ""
+      suffix = context["highlighter_suffix"] || ""
-        code = super.to_s.strip
+      code = super.to_s.strip
 
-        output = case context.registers[:site].highlighter
+      output = case context.registers[:site].highlighter
 
-                 when 'rouge'
+               when 'rouge'
-                   render_rouge(code)
+                 render_rouge(code, @lang, @options[:linenos])
-                 end
+               end
 
-        # output = HtmlBeautifier.beautify(output, indent: "\t")
+      rendered_output = example(code) + add_code_tag(output, @lang)
+      prefix + rendered_output + suffix
+    end
 
-        rendered_output = example(code) + add_code_tag(output)
+    def example(output)
-        prefix + rendered_output + suffix
+      output = output.gsub(/<hide>/, "").gsub(/<\/hide>/, "")
-      end
 
-      def example(output)
+      "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + "#{output}" + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
-        output = output.gsub(/<hide>/, "").gsub(/<\/hide>/, "")
+    end
 
-        "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + "#{output}" + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
+  end
-      end
-
-      def remove_example_classes(code)
-        # Find `bd-` classes and remove them from the highlighted code. Because of how this regex works, it will also
-        # remove classes that are after the `bd-` class. While this is a bug, I left it because it can be helpful too.
-        # To fix the bug, replace `(?=")` with `(?=("|\ ))`.
-        code = code.gsub(/(?!class=".)\ *?bd-.+?(?=")/, "")
-        # Find empty class attributes after the previous regex and remove those too.
-        code = code.gsub(/\ class=""/, "")
-      end
-
-      def render_rouge(code)
-        require 'rouge'
-        formatter = Rouge::Formatters::HTML.new(line_numbers: @options[:linenos], wrap: false)
-        lexer = Rouge::Lexer.find_fancy(@lang, code) || Rouge::Lexers::PlainText
-        code = remove_example_classes(code)
-        code = code.gsub(/<hide>.*?<\/hide>/, "")
-        code = formatter.format(lexer.lex(code))
-        code = code.strip.gsub /^[\t\s]*$\n/, ''
-        code = code.gsub /\t/, "\s\s"
-        code = code.gsub "javascript:void(0)", "#"
-        code = code.gsub "../", "./"
-        "<div class=\"highlight\"><pre>#{code}</pre></div>"
-      end
-
-      def add_code_tag(code)
-        # Add nested <code> tags to code blocks
-        code = code.sub(/<pre>\n*/, '<pre><code class="language-' + @lang.to_s.gsub("+", "-") + '" data-lang="' + @lang.to_s + '">')
-        code = code.sub(/\n*<\/pre>/, "</code></pre>")
-        code.strip
-      end
 
+  module HightlightFilter
+    def highlight_tidy(code, language = 'html')
+      code = render_rouge(code, language)
+      add_code_tag(code, language)
     end
   end
 end
 
-Liquid::Template.register_tag('example', Jekyll::Tags::ExampleBlock)
+Liquid::Template.register_tag('example', Jekyll::ExampleBlock)
+Liquid::Template.register_filter(Jekyll::HightlightFilter)

pages/components.html

@@ -0,0 +1,11 @@
+---
+title: Table UI components
+---
+
+<div class="container">
+   <ul>
+      {% for component in site.components %}
+      <li><a href="{{ component.url }}">{{ component.title }}</a></li>
+      {% endfor %}
+   </ul>
+</div>

scss/ui/_typo.scss

@@ -83,10 +83,10 @@ pre {
   hyphens: none;
   line-height: 1.45;
   color: $gray-800;
-  text-shadow: 0 1px #fff;
   tab-size: 3;
   background-color: #f8fafc;
   border-radius: $border-radius;
+  -webkit-font-smoothing: auto;
 }
 
 img {