From f9f9663b2a00edff376ae8692ad0a0f5319b0824 Mon Sep 17 00:00:00 2001 From: codecalm Date: Sat, 19 Apr 2025 15:56:49 +0200 Subject: [PATCH] feat: update profile layout and add callout shortcode for improved documentation clarity --- core/scss/ui/_timeline.scss | 2 +- core/scss/ui/_type.scss | 13 + docs/content/ui/components/charts.md | 633 +------------------ docs/content/ui/components/timelines.md | 665 +------------------- docs/content/ui/layout/page-layouts.md | 6 +- docs/content/ui/utilities/cursors.md | 34 +- preview/pages/profile.html | 2 +- shared/e11ty/filters.mjs | 9 + shared/includes/docs/navbar.html | 5 +- shared/includes/layout/js.html | 1 + shared/includes/ui/chart-heatmap.html | 10 +- shared/includes/ui/chart.html | 7 +- shared/includes/{cards => ui}/timeline.html | 0 shared/layouts/docs/default.html | 8 +- 14 files changed, 80 insertions(+), 1315 deletions(-) rename shared/includes/{cards => ui}/timeline.html (100%) diff --git a/core/scss/ui/_timeline.scss b/core/scss/ui/_timeline.scss index 112902b78..8673fd79c 100644 --- a/core/scss/ui/_timeline.scss +++ b/core/scss/ui/_timeline.scss @@ -37,7 +37,7 @@ justify-content: center; width: var(--#{$prefix}timeline-icon-size, $avatar-size); height: var(--#{$prefix}timeline-icon-size, $avatar-size); - background: var(--#{$prefix}gray-200); + background: var(--#{$prefix}bg-surface-secondary); color: var(--#{$prefix}secondary); border-radius: var(--#{$prefix}border-radius); z-index: 5 diff --git a/core/scss/ui/_type.scss b/core/scss/ui/_type.scss index e8490870b..d64b56be1 100644 --- a/core/scss/ui/_type.scss +++ b/core/scss/ui/_type.scss @@ -316,3 +316,16 @@ $text-variants: ( margin-bottom: 0; } } + + +.callout { + margin-bottom: 1.5rem; + border: 1px solid var(--#{$prefix}primary-200); + border-radius: var(--#{$prefix}border-radius); + padding: .5rem 1rem; + background: var(--#{$prefix}primary-lt); + + &>:last-child { + margin-bottom: 0; + } +} \ No newline at end of file diff --git a/docs/content/ui/components/charts.md b/docs/content/ui/components/charts.md index 610f417f9..c1b915c2d 100644 --- a/docs/content/ui/components/charts.md +++ b/docs/content/ui/components/charts.md @@ -16,105 +16,10 @@ Line charts are an essential tool for visualizing data trends over time. They ar {% capture html -%}
-
+ {% include "ui/chart.html" chart-id="demo-line" legend height=15 %}
- +{{ script }} {%- endcapture %} {% include "docs/example.html" html=html %} @@ -125,103 +30,10 @@ Area charts are ideal for representing cumulative data over time. They add visua {% capture html -%}
-
+ {% include "ui/chart.html" chart-id="demo-area" height=15 %}
- +{{ script }} {%- endcapture %} {% include "docs/example.html" html=html %} @@ -232,116 +44,10 @@ Bar charts are highly effective for comparing data across different categories. {% capture html -%}
-
+ {% include "ui/chart.html" chart-id="demo-bar" height=15 %}
- +{{ script }} {%- endcapture %} {% include "docs/example.html" html=html %} @@ -352,58 +58,10 @@ Pie charts are a simple and effective way to visualize proportions and ratios. T {% capture html -%}
-
+ {% include "ui/chart.html" chart-id="demo-pie" height=15 %}
- +{{ script }} {%- endcapture %} {% include "docs/example.html" html=html %} @@ -414,119 +72,10 @@ Heatmaps provide a graphical representation of data where individual values are {% capture html -%}
-
+ {% include "ui/chart-heatmap.html" chart-id="demo-heatmap" height=15 %}
- +{{ script }} {%- endcapture %} {% include "docs/example.html" html=html %} @@ -537,167 +86,9 @@ For more complex data visualizations, you can create advanced charts with multip {% capture html -%}
-
+ {% include "ui/chart.html" chart-id="social-referrals" height=15 %}
- +{{ script }} {%- endcapture %} {% include "docs/example.html" html=html %} diff --git a/docs/content/ui/components/timelines.md b/docs/content/ui/components/timelines.md index 3ad50b332..d944bd17a 100644 --- a/docs/content/ui/components/timelines.md +++ b/docs/content/ui/components/timelines.md @@ -9,677 +9,16 @@ description: Visualize events and processes clearly. The available timeline design is composed of many components that will help you visualize a process or show an outline of events. Thanks to the possibility of adding icons, avatars and links and the way of presenting the elements of content, your timeline will be clear for users and will make your website or app more attractive. {% capture html -%} - +{% include "ui/timeline.html" %} {%- endcapture %} {% include "docs/example.html" html=html %} -```html - -``` - ## Simple timeline Use a simplified version of the timeline, if it suits your design better. You can still make use of all the available timeline components. {% capture html -%} - +{% include "ui/timeline.html" simple %} {%- endcapture %} {% include "docs/example.html" html=html %} -```html - -``` diff --git a/docs/content/ui/layout/page-layouts.md b/docs/content/ui/layout/page-layouts.md index 20798f87f..d4d0fdaff 100644 --- a/docs/content/ui/layout/page-layouts.md +++ b/docs/content/ui/layout/page-layouts.md @@ -4,9 +4,9 @@ summary: Learn how to build a sample version of the dashboard description: Learn to design dashboard layouts. --- - - Before you start with this section, make sure you have followed the [installation guideline](/img/ui/getting-started/installation). - +{% callout %} + Before you start with this section, make sure you have followed the [installation guideline](/ui/getting-started/installation). +{% endcallout %} ## Sample layout diff --git a/docs/content/ui/utilities/cursors.md b/docs/content/ui/utilities/cursors.md index 463353141..6aff17ea1 100644 --- a/docs/content/ui/utilities/cursors.md +++ b/docs/content/ui/utilities/cursors.md @@ -45,20 +45,22 @@ Use one of the available cursor utilities depending on the action you want to in The results can be seen in the example below. {% capture html -%} -
auto
-
pointer
-
move
-
not-allowed
-
zoom-in
-
zoom-out
-
default
-
none
-
help
-
progress
-
wait
-
text
-
vertical-text
-
grab
-
grabbing
+
+
auto
+
pointer
+
move
+
not-allowed
+
zoom-in
+
zoom-out
+
default
+
none
+
help
+
progress
+
wait
+
text
+
vertical-text
+
grab
+
grabbing
+
{%- endcapture %} -{% include "docs/example.html" html=html %} \ No newline at end of file +{% include "docs/example.html" html=html hide-code %} \ No newline at end of file diff --git a/preview/pages/profile.html b/preview/pages/profile.html index 6e69e88e0..00ac2cb0b 100644 --- a/preview/pages/profile.html +++ b/preview/pages/profile.html @@ -7,7 +7,7 @@ permalink: profile.html
- {% include "cards/timeline.html" %} + {% include "ui/timeline.html" %}
diff --git a/shared/e11ty/filters.mjs b/shared/e11ty/filters.mjs index 1764c4caa..288c8945b 100644 --- a/shared/e11ty/filters.mjs +++ b/shared/e11ty/filters.mjs @@ -237,4 +237,13 @@ export function appFilters(eleventyConfig) { return ''; }) + + + eleventyConfig.addPairedShortcode(`callout`, function (content) { + if (content) { + return `
\n${content}\n
`; + } + + return ''; + }) } \ No newline at end of file diff --git a/shared/includes/docs/navbar.html b/shared/includes/docs/navbar.html index 6c7424ae1..1ad352d8e 100644 --- a/shared/includes/docs/navbar.html +++ b/shared/includes/docs/navbar.html @@ -1,4 +1,4 @@ -
+
@@ -16,6 +16,9 @@
    +
    + Preview +
    Changelog
    diff --git a/shared/includes/layout/js.html b/shared/includes/layout/js.html index 6140f5a47..79ceffbb2 100644 --- a/shared/includes/layout/js.html +++ b/shared/includes/layout/js.html @@ -12,4 +12,5 @@ + {% scripts %} \ No newline at end of file diff --git a/shared/includes/ui/chart-heatmap.html b/shared/includes/ui/chart-heatmap.html index c6b0d80fd..9190fa4e5 100644 --- a/shared/includes/ui/chart-heatmap.html +++ b/shared/includes/ui/chart-heatmap.html @@ -1,3 +1,4 @@ +{% removeemptylines %} {% assign id = include.chart-id %} {% assign class = include.class %} {% assign height = include.height | default: data.height | default: 25 %} @@ -5,8 +6,9 @@
    -{% capture script %} +{% capture script -%} {% assign colors = include.colors | default: 1 %} +{% removeemptylines %} +{% endremoveemptylines %} {%- endcapture %} {% capture_script %} {{ script }} {% endcapture_script %} +{% endremoveemptylines %} \ No newline at end of file diff --git a/shared/includes/ui/chart.html b/shared/includes/ui/chart.html index 9e08c268d..d33a5bcc3 100644 --- a/shared/includes/ui/chart.html +++ b/shared/includes/ui/chart.html @@ -1,3 +1,4 @@ +{% removeemptylines %} {% assign data = charts[include.chart-id] %} {% assign id = include.id | default: include.chart-id %} {% assign height = include.height | default: data.height | default: 10 %} @@ -17,9 +18,9 @@ {% endif %}
    - {% capture script %} -{% assign chart-type = data.type | default: 'bar' %} +{% assign chart-type = data.type | default: 'bar' -%} +{% removeemptylines %} +{% endremoveemptylines %} {%- endcapture %} {% capture_script %} @@ -276,3 +278,4 @@ {% endcapture_script %} {% endif %} +{% endremoveemptylines %} \ No newline at end of file diff --git a/shared/includes/cards/timeline.html b/shared/includes/ui/timeline.html similarity index 100% rename from shared/includes/cards/timeline.html rename to shared/includes/ui/timeline.html diff --git a/shared/layouts/docs/default.html b/shared/layouts/docs/default.html index f7a991d8f..00c360a29 100644 --- a/shared/layouts/docs/default.html +++ b/shared/layouts/docs/default.html @@ -29,12 +29,12 @@ - + {% include "docs/navbar.html" %} -
    -
    -
    +
    +
    +