From a9859c57c102c6c35736a8dbd802993e1a9468e0 Mon Sep 17 00:00:00 2001 From: Wout Date: Fri, 18 Nov 2022 20:29:41 +0100 Subject: [PATCH 1/5] Add docs for the new inline_svg macro --- src/actions/guides/frontend/rendering_html.cr | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) diff --git a/src/actions/guides/frontend/rendering_html.cr b/src/actions/guides/frontend/rendering_html.cr index 893c40dc..48c25387 100644 --- a/src/actions/guides/frontend/rendering_html.cr +++ b/src/actions/guides/frontend/rendering_html.cr @@ -375,6 +375,83 @@ class Guides::Frontend::RenderingHtml < GuideAction end ``` + ## Inlining SVG files + + Lucky allows you to inline SVG files at compile time using the `inline_svg` + macro in pages and components: + + ```crystal + link to: Home::Index do + inline_svg("menu/home.svg") + end + ``` + + > The full path of the icon resolves to `src/svgs/menu/home.svg`. The svgs + > directory can be configured, as described further down in this section. + + By default, this macro will strip the XML declaration, comments, unnecessary + whitespace and all attributes related to styling. + + > The stripped attributes are `class`, `fill`, `stroke`, `stroke-width` and + > `style`. This can also be configured. + + Inlined SVGs can then be styled with CSS: + + ``` + [data-inline-svg] { + fill: none; + stroke: '#666'; + stroke-width: 1.5px; + } + ``` + + Or with more specificity: + + ``` + [data-inline-svg="menu/home.svg"] { + fill: pink; + } + ``` + + In some cases, SVG may need to keep their styling attributes, like logos, + for example. By passing `false` as the second argument, the styling + attributes will remain in place: + + ```crystal + inline_svg("menu/logo.svg", false) + ``` + + > Since SVGs with their original styling most likely don't require + > additional CSS styling, they have a different selector: + > `[data-inline-svg-styled]` or `[data-inline-svg-styled="menu/logo.svg"]`. + + + ### Configuration + + Because SVGs are processed and inlined at compile time, configuration + happens through annotations. Those settings can be overridden by creating an + initializer: + + ```crystal + # config/svg_inliner.cr + @[Lucky::SvgInliner::Path("src/icons")] + module Lucky::SvgInliner + end + ``` + + The example above will tell the compiler to look for SVGs in `src/icons` + rather than in the default `src/svgs`. + + Another configuration option is the regular expression to strip styling + attributes. Here's an example with a regex that will only strip the `style` + and `class` attributes: + + ```crystal + @[Lucky::SvgInliner::StripRegex(/(class|style)="[^"]+" ?/)] + module Lucky::SvgInliner + end + ``` + ## Finding the current page Lucky provides the convenient `current_page?` helper on both pages and components to make it easier From 3177c4c1f499c5e9c922660a45d25ccd9e4168dc Mon Sep 17 00:00:00 2001 From: Wout Date: Thu, 17 Aug 2023 19:58:34 +0200 Subject: [PATCH 2/5] Remove SVG builder from awesome page --- src/pages/learn/awesome_lucky/index_page.cr | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/pages/learn/awesome_lucky/index_page.cr b/src/pages/learn/awesome_lucky/index_page.cr index d9941b75..64d79517 100644 --- a/src/pages/learn/awesome_lucky/index_page.cr +++ b/src/pages/learn/awesome_lucky/index_page.cr @@ -155,10 +155,6 @@ class Learn::AwesomeLucky::IndexPage < PageLayout text: "Shield", url: "https://github.com/grottopress/shield", description: "Comprehensive security solution and authentication for Lucky" - mount AwesomeLink, - text: "Lucky SVG builder", - url: "https://github.com/wout/lucky_svg_sprite", - description: "Turn your SVG markup into reusable Lucky components" mount AwesomeLink, text: "Lucky Favicon", url: "https://github.com/wout/lucky_favicon", From 191d4f19bf5170ae8eef7479b8b1320818f799c3 Mon Sep 17 00:00:00 2001 From: Wout Date: Thu, 19 Oct 2023 15:03:30 +0200 Subject: [PATCH 3/5] fix: wrap links in current_page? example in
  • tags --- src/actions/guides/frontend/rendering_html.cr | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/actions/guides/frontend/rendering_html.cr b/src/actions/guides/frontend/rendering_html.cr index 658e4383..7ed55f74 100644 --- a/src/actions/guides/frontend/rendering_html.cr +++ b/src/actions/guides/frontend/rendering_html.cr @@ -466,20 +466,19 @@ class Guides::Frontend::RenderingHtml < GuideAction ```crystal nav do ul do - link "Home", - to: Home::Index, - data_selected: current_page?(Home::Index) + li data_current: current_page?(Home::Index) do + link "Home", to: Home::Index, + end - link "Your dashboard", - to: Dashboard::Index, - data_selected: current_page?(Dashboard::Index) + li data_current: current_page?(Dashboard::Index) do + link "Your dashboard", to: Dashboard::Index, + end - link "Your profile", - to: Me::Show, - data_selected: current_page?(Me::Show) + li data_current: current_page?(Me::Show) do + link "Your profile", to: Me::Show + end end end - ``` ### Advanced usage From f11a1f119a588e2601c0f0baec77f0c336a0b644 Mon Sep 17 00:00:00 2001 From: Wout Date: Thu, 19 Oct 2023 16:57:37 +0200 Subject: [PATCH 4/5] Update src/actions/guides/frontend/rendering_html.cr Co-authored-by: Jeremy Woertink --- src/actions/guides/frontend/rendering_html.cr | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/actions/guides/frontend/rendering_html.cr b/src/actions/guides/frontend/rendering_html.cr index 7ed55f74..c0a9394a 100644 --- a/src/actions/guides/frontend/rendering_html.cr +++ b/src/actions/guides/frontend/rendering_html.cr @@ -467,7 +467,7 @@ class Guides::Frontend::RenderingHtml < GuideAction nav do ul do li data_current: current_page?(Home::Index) do - link "Home", to: Home::Index, + link "Home", to: Home::Index end li data_current: current_page?(Dashboard::Index) do From 29f56577b2d3ab052b15e25f45e74bd987d07f0d Mon Sep 17 00:00:00 2001 From: Wout Date: Thu, 19 Oct 2023 16:57:42 +0200 Subject: [PATCH 5/5] Update src/actions/guides/frontend/rendering_html.cr Co-authored-by: Jeremy Woertink --- src/actions/guides/frontend/rendering_html.cr | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/actions/guides/frontend/rendering_html.cr b/src/actions/guides/frontend/rendering_html.cr index c0a9394a..738650a1 100644 --- a/src/actions/guides/frontend/rendering_html.cr +++ b/src/actions/guides/frontend/rendering_html.cr @@ -471,7 +471,7 @@ class Guides::Frontend::RenderingHtml < GuideAction end li data_current: current_page?(Dashboard::Index) do - link "Your dashboard", to: Dashboard::Index, + link "Your dashboard", to: Dashboard::Index end li data_current: current_page?(Me::Show) do