mirror of
https://github.com/tabler/tabler.git
synced 2026-07-29 14:34:37 +04:00
components images
This commit is contained in:
codecalm
@@ -1,9 +1,12 @@
|
|||||||
for file in ../pages/_components/*.md
|
rm -rf ../static/img/components/*
|
||||||
|
|
||||||
|
for file in ../pages/_components/*.html
|
||||||
do
|
do
|
||||||
file="$(basename -- $file)"
|
file="$(basename -- $file)"
|
||||||
file="${file%.md}"
|
file="${file%.html}"
|
||||||
url="http://localhost:3001/components/$file.html"
|
url="http://localhost:3001/components/$file.html"
|
||||||
echo $url
|
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
|
done
|
||||||
|
|||||||
@@ -37,7 +37,6 @@ module.exports = {
|
|||||||
input: {
|
input: {
|
||||||
tabler: path.resolve(__dirname, '../js/tabler.js'),
|
tabler: path.resolve(__dirname, '../js/tabler.js'),
|
||||||
'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'),
|
'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'),
|
||||||
demo: path.resolve(__dirname, '../js/demo.js')
|
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
banner,
|
banner,
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: Simple avatar
|
title: Simple avatar
|
||||||
|
markdown: false
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include ui/avatar.html person-id=1 status="green" %}
|
{% include ui/avatar.html person-id=1 status="green" %}
|
||||||
+46
-27
@@ -1,44 +1,63 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en"{% if page.rtl %} dir="rtl"{% endif %}>
|
<html lang="en" {% if page.rtl %} dir="rtl" {% endif %}>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
||||||
<meta http-equiv="Content-Language" content="en"/>
|
<meta http-equiv="Content-Language" content="en"/>
|
||||||
|
|
||||||
<meta name="msapplication-TileColor" content="{{ site.colors.blue.hex }}"/>
|
<meta name="msapplication-TileColor" content="{{ site.colors.blue.hex }}"/>
|
||||||
<meta name="theme-color" content="{{ site.colors.blue.hex }}"/>
|
<meta name="theme-color" content="{{ site.colors.blue.hex }}"/>
|
||||||
|
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||||
<meta name="mobile-web-app-capable" content="yes"/>
|
<meta name="mobile-web-app-capable" content="yes"/>
|
||||||
<meta name="HandheldFriendly" content="True"/>
|
<meta name="HandheldFriendly" content="True"/>
|
||||||
<meta name="MobileOptimized" content="320"/>
|
<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="icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
|
||||||
<link rel="shortcut 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 %}
|
{% if page.description %}
|
||||||
<meta name="description" content="{{ page.description | escape }}" />
|
<meta name="description" content="{{ page.description | escape }}"/>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% include layout/css.html %}
|
{% include layout/css.html %}
|
||||||
<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 %}">
|
|
||||||
|
|
||||||
{{ content}}
|
{% if layout.og-component %}
|
||||||
|
<meta name="twitter:image:src" content="https://preview-dev.tabler.io/components/{{ page.slug }}.png">
|
||||||
{% if site.debug %}
|
<meta name="twitter:site" content="@tabler_ui">
|
||||||
{% if jekyll.environment == 'development' %}
|
<meta name="twitter:card" content="summary">
|
||||||
{% include layout/debug.html %}
|
<meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
|
||||||
{% endif %}
|
<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 %}
|
{% endif %}
|
||||||
|
|
||||||
{% include layout/js.html %}
|
<style>body { display: none; }</style>
|
||||||
<script>document.body.style.display = 'block';</script>
|
</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 %}">
|
||||||
|
|
||||||
|
{{ content}}
|
||||||
|
|
||||||
|
{% if site.debug %}
|
||||||
|
{% if jekyll.environment == 'development' %}
|
||||||
|
{% include layout/debug.html %}
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% include layout/js.html %}
|
||||||
|
<script>document.body.style.display = 'block';</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
layout: default
|
layout: default
|
||||||
menu: components
|
menu: components
|
||||||
page-title: Tabler components
|
page-title: Tabler components
|
||||||
|
og-component: true
|
||||||
---
|
---
|
||||||
|
|
||||||
{% assign columns = page.columns | default: 0 %}
|
{% assign columns = page.columns | default: 0 %}
|
||||||
@@ -17,7 +18,11 @@ page-title: Tabler components
|
|||||||
</div>
|
</div>
|
||||||
<div class="col-lg-9">
|
<div class="col-lg-9">
|
||||||
<div class="card">
|
<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="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 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 %}>
|
<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">
|
<div class="highlight m-0 rounded-0 rounded-bottom">
|
||||||
{{ content | highlight_tidy: 'html' }}
|
{{ content | highlight_tidy: 'html' }}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 514 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Reference in New Issue
Block a user