From a9859c57c102c6c35736a8dbd802993e1a9468e0 Mon Sep 17 00:00:00 2001 From: Wout Date: Fri, 18 Nov 2022 20:29:41 +0100 Subject: [PATCH 1/3] 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/3] 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 734949cbd8676dfea8f5a841b68e3e982ae12408 Mon Sep 17 00:00:00 2001 From: Wout Date: Sat, 1 Nov 2025 18:39:56 +0100 Subject: [PATCH 3/3] Add instructions for route aliases --- .../http_and_routing/routing_and_params.cr | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/src/actions/guides/http_and_routing/routing_and_params.cr b/src/actions/guides/http_and_routing/routing_and_params.cr index ca79f52c..0496ea0b 100644 --- a/src/actions/guides/http_and_routing/routing_and_params.cr +++ b/src/actions/guides/http_and_routing/routing_and_params.cr @@ -327,6 +327,44 @@ class Guides::HttpAndRouting::RoutingAndParams < GuideAction end ``` + ## Route aliases + + Sometimes you may want to send more than one path to the same action. A + good use case, for example, are localized routes: + + ``` + # Posts::Index in the default language + /posts + + # also Posts::Index, but in an alternative language + /:locale/posts + ``` + + To use route aliases, you can pass the paths as additional arguments: + + ```crystal + class Posts::Index < BrowserAction + get "/posts", "/:locale/posts" do + if locale = params.get?(:locale) + # locale == "nl" + else + # locale == nil + end + end + end + ``` + + To access those routes in links, you can use both variants of the route + helpers as usual: + + ```crystal + Posts::Index.path + # => "/posts" + + Posts::Index.with(locale: "nl").path + # => "/nl/posts" + ``` + ## Routing style By default Lucky ensures that all routes adhere to the same style. All