components images

2026-07-29 14:34:37 +04:00 · 2019-10-07 23:20:17 +02:00
parent 8821ce4c4c
commit 2d2bf76308
26 changed files with 64 additions and 32 deletions
@@ -1,9 +1,12 @@
-for file in ../pages/_components/*.md
+rm -rf ../static/img/components/*
+
+for file in ../pages/_components/*.html
 do
  file="$(basename -- $file)"
-  file="${file%.md}"
+  file="${file%.html}"
  url="http://localhost:3001/components/$file.html"
  echo $url

-  capture-website $url --element="#component-wrapper" --scale-factor=2 > ../components/$file.png
+  capture-website $url --element="#component-wrapper" --scale-factor=2 > ../static/img/components/$file.png
+  convert ../static/img/components/$file.png -gravity Center -crop 1648x824-0-0! -background "#F5F7FB" -flatten +repage -resize 1280x640 ../static/img/components/$file.png
 done
@@ -37,7 +37,6 @@ module.exports = {
  input: {
    tabler: path.resolve(__dirname, '../js/tabler.js'),
    'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'),
-    demo: path.resolve(__dirname, '../js/demo.js')
  },
  output: {
    banner,
@@ -1,5 +1,6 @@
 ---
 title: Simple avatar
+markdown: false
 ---

 {% include ui/avatar.html person-id=1 status="green" %}
@@ -1,8 +1,8 @@
 <!doctype html>
-<html lang="en"{% if page.rtl %} dir="rtl"{% endif %}>
+<html lang="en" {% if page.rtl %} dir="rtl" {% endif %}>
 <head>
-	<meta charset="utf-8" />
-   <meta name="viewport" content="width=device-width, initial-scale=1" />
+   <meta charset="utf-8"/>
+   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
   <meta http-equiv="Content-Language" content="en"/>

@@ -14,31 +14,50 @@
   <meta name="mobile-web-app-capable" content="yes"/>
   <meta name="HandheldFriendly" content="True"/>
   <meta name="MobileOptimized" content="320"/>
-   <meta name="robots" content="noindex,nofollow,noarchive" />
+   <meta name="robots" content="noindex,nofollow,noarchive"/>

   <link rel="icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
   <link rel="shortcut icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>

-   <title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
+   <title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if
+      site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>

   {% if page.description %}
-   <meta name="description" content="{{ page.description | escape }}" />
+   <meta name="description" content="{{ page.description | escape }}"/>
   {% endif %}

   {% include layout/css.html %}
+
+   {% if layout.og-component %}
+      <meta name="twitter:image:src" content="https://preview-dev.tabler.io/components/{{ page.slug }}.png">
+      <meta name="twitter:site" content="@tabler_ui">
+      <meta name="twitter:card" content="summary">
+      <meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+      <meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+      <meta property="og:image" content="https://preview-dev.tabler.io/components/{{ page.slug }}.png">
+      <meta property="og:image:width" content="1280">
+      <meta property="og:image:height" content="640">
+      <meta property="og:site_name" content="Tabler">
+      <meta property="og:type" content="object">
+      <meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
+      <meta property="og:url" content="https://preview-dev.tabler.io/">
+      <meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
+   {% endif %}
+
   <style>body { display: none; }</style>
 </head>
-<body class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
+<body
+   class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">

-   {{ content}}
+{{ content}}

-   {% if site.debug %}
-      {% if jekyll.environment == 'development' %}
-         {% include layout/debug.html %}
-      {% endif %}
-   {% endif %}
+{% if site.debug %}
+{% if jekyll.environment == 'development' %}
+{% include layout/debug.html %}
+{% endif %}
+{% endif %}

-   {% include layout/js.html %}
-   <script>document.body.style.display = 'block';</script>
+{% include layout/js.html %}
+<script>document.body.style.display = 'block';</script>
 </body>
 </html>
@@ -2,6 +2,7 @@
 layout: default
 menu: components
 page-title: Tabler components
+og-component: true
 ---

 {% assign columns = page.columns | default: 0 %}
@@ -17,7 +18,11 @@ page-title: Tabler components
   </div>
   <div class="col-lg-9">
      <div class="card">
-         <div class="card-body p-5">
+         <div class="card-body">
+            <div class="card-title">{{ page.title }}</div>
+            <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
+
+
            <div class="border border-bottom-0 bg-light p-1 rounded-top">
               <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
                  <div {% if columns > 0 %}class="flex-fill" style="max-width: {{ columns | times: 298 | minus: 24 }}px"{% endif %}>
@@ -29,6 +34,11 @@ page-title: Tabler components
            <div class="highlight m-0 rounded-0 rounded-bottom">
               {{ content | highlight_tidy: 'html' }}
            </div>
+
+            <div class="row">
+               <div class="col">{% include ui/button.html text="Copy code" color="secondary" block=true class="mt-4" %}</div>
+               <div class="col">{% include ui/button.html text="Open in sandbox" color="primary" block=true class="mt-4" %}</div>
+            </div>
         </div>
      </div>
   </div>