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 541b19abcac828b15dd1557faf1a3a75e33e6365 Mon Sep 17 00:00:00 2001 From: Wout Date: Sat, 1 Nov 2025 17:56:25 +0100 Subject: [PATCH 3/3] Add instructions to translate attribute names in error messages --- .../guides/frontend/internationalization.cr | 46 ++++++++++++++++--- 1 file changed, 40 insertions(+), 6 deletions(-) diff --git a/src/actions/guides/frontend/internationalization.cr b/src/actions/guides/frontend/internationalization.cr index 1e307ba2..ccabbe0d 100644 --- a/src/actions/guides/frontend/internationalization.cr +++ b/src/actions/guides/frontend/internationalization.cr @@ -101,7 +101,20 @@ class Guides::Frontend::Internationalization < GuideAction This file contains translations for Avram's validations. For every additional locale, you'll need to copy and translate this file. Please - consider contributing your translations. + consider contributing your translations. This file also contains a special + namespace (`avram.attribute_variants`) to translate attribute names in form + field errors: + + ```yaml + en: + avram: + attribute_variants: + email: "Email" + language: "Language" + password: "Password" + password_confirmation: "Password confirmation" + # ... + ``` **4. `config/locales/example.en.yml`** @@ -236,9 +249,9 @@ class Guides::Frontend::Internationalization < GuideAction end private def set_language - if language = current_user.try(&.language) || params.get?(:language) - Rosetta.locale = language - end + Rosetta.locale = current_user.try(&.language) || + params.get?(:language) || + Rosetta.default_locale continue end @@ -482,7 +495,28 @@ class Guides::Frontend::Internationalization < GuideAction # src/pages/errors/show_page.cr ``` - ## Step 10 - Internationalize Actions + ## Step 10 - Internationalize Components + + The `Shared::FieldErrors` component currently does not translate attribute + names in the error messages. To make the attribute names translatable, + change the `label_text` method into the following: + + ```crystal + class Shared::FieldErrors(T) < BaseComponent + # ... + def label_text + r("avram.attribute_variants", + Wordsmith::Inflector.humanize(attribute.name.to_s) + ).t(variant: attribute.name.to_s) + end + end + ``` + + With this change, the label text method will now look up the attribute name + under the `avram.attribute_variants` key, and if it is not present, use the + original humanized version. + + ## Step 11 - Internationalize Actions Translate flash messages. @@ -542,7 +576,7 @@ class Guides::Frontend::Internationalization < GuideAction # src/actions/password_reset_requests/create.cr ``` - ## Step 11 - Internationalize API Responses + ## Step 12 - Internationalize API Responses Similar to all previous steps, replace all untranslated strings: