diff --git a/_config.yml b/_config.yml index 2e76174..acf754c 100644 --- a/_config.yml +++ b/_config.yml @@ -14,19 +14,19 @@ timezone: # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md # ↓ -------------------------- -title: Chirpy # the main title +title: Rubens Jean Simon # the main title -tagline: A text-focused Jekyll theme # it will display as the sub-title +tagline: Software Engineer, Captain (Kozenet Pro) # it will display as the sub-title description: >- # used by seo meta and the atom feed - A minimal, responsive and feature-rich Jekyll theme for technical writing. + Kozenet Pro - Projects Documentation and More # Fill in the protocol & hostname for your site. # e.g. 'https://username.github.io', note that it does not end with a '/'. url: "" github: - username: github_username # change to your github username + username: rubemoon # change to your github username twitter: username: twitter_username # change to your twitter username @@ -34,24 +34,24 @@ twitter: social: # Change to your full name. # It will be displayed as the default author of the posts and the copyright owner in the Footer - name: your_full_name - email: example@domain.com # change to your email address + name: Rubens Jean Simon + email: contact@kozenetpro.com # change to your email address links: # The first element serves as the copyright owner's link - - https://twitter.com/username # change to your twitter homepage - - https://github.com/username # change to your github homepage + - https://www.rubensjeansimon.com # change to your homepage + - https://github.com/rubemoon # change to your github homepage # Uncomment below to add more social links # - https://www.facebook.com/username # - https://www.linkedin.com/in/username -# Site Verification Settings -webmaster_verifications: - google: # fill in your Google verification code - bing: # fill in your Bing verification code - alexa: # fill in your Alexa verification code - yandex: # fill in your Yandex verification code - baidu: # fill in your Baidu verification code - facebook: # fill in your Facebook verification code +# # Site Verification Settings +# webmaster_verifications: +# google: # fill in your Google verification code +# bing: # fill in your Bing verification code +# alexa: # fill in your Alexa verification code +# yandex: # fill in your Yandex verification code +# baidu: # fill in your Baidu verification code +# facebook: # fill in your Facebook verification code # ↑ -------------------------- # The end of `jekyll-seo-tag` settings @@ -59,7 +59,7 @@ webmaster_verifications: # Web Analytics Settings analytics: google: - id: # fill in your Google Analytics ID + id: "G-PNQNEFDK81" goatcounter: id: # fill in your GoatCounter ID umami: @@ -86,7 +86,7 @@ pageviews: # light - Use the light color scheme # dark - Use the dark color scheme # -theme_mode: # [light | dark] +theme_mode: dark # [light | dark] # The CDN endpoint for media resources. # Notice that once it is assigned, the CDN url @@ -96,7 +96,7 @@ theme_mode: # [light | dark] cdn: # the avatar on sidebar, support local or CORS resources -avatar: +avatar: assets/img/headers/kozenetproIMG.svg # The URL of the site-wide social preview image used in SEO `og:image` meta tag. # It can be overridden by a customized `page.image` in front matter. diff --git a/_data/contact.yml b/_data/contact.yml index 1ed228a..c253abd 100644 --- a/_data/contact.yml +++ b/_data/contact.yml @@ -1,14 +1,22 @@ # The contact options. +- type: youtube + icon: "fab fa-youtube" + url: "https://www.youtube.com/@kozenetpro" + +- type: linkedin + icon: 'fab fa-linkedin' # icons powered by + url: 'https://www.linkedin.com/in/rubens-jean-simon/' # Fill with your Linkedin homepage + - type: github icon: "fab fa-github" -- type: twitter - icon: "fa-brands fa-x-twitter" +#- type: twitter +# icon: "fa-brands fa-x-twitter" -- type: email - icon: "fas fa-envelope" - noblank: true # open link in current tab +# - type: email +# icon: "fas fa-envelope" +# noblank: true # open link in current tab - type: rss icon: "fas fa-rss" diff --git a/_data/share.yml b/_data/share.yml index b1d077d..3518801 100644 --- a/_data/share.yml +++ b/_data/share.yml @@ -16,10 +16,10 @@ platforms: # Uncomment below if you need to. # - # - type: Linkedin - # icon: "fab fa-linkedin" - # link: "https://www.linkedin.com/sharing/share-offsite/?url=URL" - # + - type: Linkedin + icon: "fab fa-linkedin" + link: "https://www.linkedin.com/sharing/share-offsite/?url=URL" + # - type: Weibo # icon: "fab fa-weibo" # link: "https://service.weibo.com/share/share.php?title=TITLE&url=URL" diff --git a/_includes/analytics.html b/_includes/analytics.html new file mode 100644 index 0000000..d610085 --- /dev/null +++ b/_includes/analytics.html @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/_includes/favicons.html b/_includes/favicons.html new file mode 100644 index 0000000..fbc4087 --- /dev/null +++ b/_includes/favicons.html @@ -0,0 +1,19 @@ + + +{% capture favicon_path %}{{ '/assets/img/favicons' | relative_url }}{% endcapture %} + + + + +{% if site.pwa.enabled %} + +{% endif %} + + + + + + \ No newline at end of file diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 0000000..470a416 --- /dev/null +++ b/_includes/footer.html @@ -0,0 +1,27 @@ + + + diff --git a/_layouts/archives.html b/_layouts/archives.html new file mode 100644 index 0000000..4f7ad7d --- /dev/null +++ b/_layouts/archives.html @@ -0,0 +1,35 @@ +--- +layout: page +# The Archives of posts. +--- + +{% include lang.html %} + +{% assign df_strftime_m = site.data.locales[lang].df.archives.strftime | default: '/ %m' %} +{% assign df_dayjs_m = site.data.locales[lang].df.archives.dayjs | default: '/ MM' %} + +
+ {% for post in site.posts %} + {% assign cur_year = post.date | date: '%Y' %} + + {% if cur_year != last_year %} + {% unless forloop.first %}{% endunless %} + + + {{ '{% endif %} + {% endfor %} +
diff --git a/_layouts/categories.html b/_layouts/categories.html new file mode 100644 index 0000000..0515097 --- /dev/null +++ b/_layouts/categories.html @@ -0,0 +1,138 @@ +--- +layout: page +# All the Categories of posts +--- + +{% include lang.html %} + +{% assign HEAD_PREFIX = 'h_' %} +{% assign LIST_PREFIX = 'l_' %} + +{% assign group_index = 0 %} + +{% assign sort_categories = site.categories | sort %} + +{% for category in sort_categories %} + {% assign category_name = category | first %} + {% assign posts_of_category = category | last %} + {% assign first_post = posts_of_category | first %} + + {% if category_name == first_post.categories[0] %} + {% assign sub_categories = '' | split: '' %} + + {% for post in posts_of_category %} + {% assign second_category = post.categories[1] %} + {% if second_category %} + {% unless sub_categories contains second_category %} + {% assign sub_categories = sub_categories | push: second_category %} + {% endunless %} + {% endif %} + {% endfor %} + + {% assign sub_categories = sub_categories | sort %} + {% assign sub_categories_size = sub_categories | size %} + +
+ +
+ + + + {% capture _category_url %}/categories/{{ category_name | slugify | url_encode }}/{% endcapture %} + {{ category_name }} + + + {% assign top_posts_size = site.categories[category_name] | size %} + + {% if sub_categories_size > 0 %} + {{ sub_categories_size }} + {% if sub_categories_size > 1 %} + {{ + site.data.locales[lang].categories.category_measure.plural + | default: site.data.locales[lang].categories.category_measure + }} + {% else %} + {{ + site.data.locales[lang].categories.category_measure.singular + | default: site.data.locales[lang].categories.category_measure + }} + {% endif -%} + , + {% endif %} + + {{ top_posts_size }} + + {% if top_posts_size > 1 %} + {{ + site.data.locales[lang].categories.post_measure.plural + | default: site.data.locales[lang].categories.post_measure + }} + {% else %} + {{ + site.data.locales[lang].categories.post_measure.singular + | default: site.data.locales[lang].categories.post_measure + }} + {% endif %} + + + + + {% if sub_categories_size > 0 %} + + + + {% else %} + + + + {% endif %} +
+ + + + {% if sub_categories_size > 0 %} +
+
    + {% for sub_category in sub_categories %} +
  • + + + {% capture _sub_ctg_url %}/categories/{{ sub_category | slugify | url_encode }}/{% endcapture %} + {{ sub_category }} + + {% assign posts_size = site.categories[sub_category] | size %} + + {{ posts_size }} + + {% if posts_size > 1 %} + {{ + site.data.locales[lang].categories.post_measure.plural + | default: site.data.locales[lang].categories.post_measure + }} + {% else %} + {{ + site.data.locales[lang].categories.post_measure.singular + | default: site.data.locales[lang].categories.post_measure + }} + {% endif %} + +
  • + {% endfor %} +
+
+ {% endif %} +
+ + + {% assign group_index = group_index | plus: 1 %} + {% endif %} +{% endfor %} diff --git a/_layouts/category.html b/_layouts/category.html new file mode 100644 index 0000000..b064f27 --- /dev/null +++ b/_layouts/category.html @@ -0,0 +1,24 @@ +--- +layout: page +# The Category layout +--- + +{% include lang.html %} + +
+

+ + {{ page.title }} + {{ page.posts | size }} +

+ + +
diff --git a/_layouts/compress.html b/_layouts/compress.html new file mode 100644 index 0000000..bb34487 --- /dev/null +++ b/_layouts/compress.html @@ -0,0 +1,10 @@ +--- +# Jekyll layout that compresses HTML +# v3.1.0 +# http://jch.penibelst.de/ +# © 2014–2015 Anatol Broder +# MIT License +--- + +{% capture _LINE_FEED %} +{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "" %}{% endif %}{% unless _pre_before contains "" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " ;; ;" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %}
Step Bytes
raw {{ content | size }}{% if _profile_endings %}
endings {{ _profile_endings }}{% endif %}{% if _profile_startings %}
startings {{ _profile_startings }}{% endif %}{% if _profile_comments %}
comments {{ _profile_comments }}{% endif %}{% if _profile_collapse %}
collapse {{ _profile_collapse }}{% endif %}{% if _profile_clippings %}
clippings {{ _profile_clippings }}{% endif %}
{% endif %}{% endif %} diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..097c7e9 --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,90 @@ +--- +layout: compress +--- + + + +{% include origin-type.html %} + +{% include lang.html %} + +{% if site.theme_mode %} + {% capture prefer_mode %}data-mode="{{ site.theme_mode }}"{% endcapture %} +{% endif %} + + + + {% include head.html %} + {% if jekyll.environment == 'production' and site.google_analytics %} + {% include analytics.html %} + {% endif %} + + + {% include sidebar.html lang=lang %} + +
+
+ {% include topbar.html lang=lang %} + +
+
+ {% if layout.refactor or layout.layout == 'default' %} + {% include refactor-content.html content=content lang=lang %} + {% else %} + {{ content }} + {% endif %} +
+ + + +
+ +
+ +
+ {% for _include in layout.tail_includes %} + {% assign _include_path = _include | append: '.html' %} + {% include {{ _include_path }} lang=lang %} + {% endfor %} + + {% include_cached footer.html lang=lang %} +
+
+ + {% include_cached search-results.html lang=lang %} +
+ + +
+ +
+ + {% if site.pwa.enabled %} + {% include_cached notification.html lang=lang %} + {% endif %} + + + + {% include js-selector.html %} + + {% if page.mermaid %} + {% include mermaid.html %} + {% endif %} + + {% include_cached search-loader.html %} + + diff --git a/_layouts/home.html b/_layouts/home.html new file mode 100644 index 0000000..4cf4c1d --- /dev/null +++ b/_layouts/home.html @@ -0,0 +1,118 @@ +--- +layout: default +refactor: true +--- + +{% include lang.html %} + +{% assign pinned = site.posts | where: 'pin', 'true' %} +{% assign default = site.posts | where_exp: 'item', 'item.pin != true and item.hidden != true' %} + +{% assign posts = '' | split: '' %} + + + +{% assign offset = paginator.page | minus: 1 | times: paginator.per_page %} +{% assign pinned_num = pinned.size | minus: offset %} + +{% if pinned_num > 0 %} + {% for i in (offset..pinned.size) limit: pinned_num %} + {% assign posts = posts | push: pinned[i] %} + {% endfor %} +{% else %} + {% assign pinned_num = 0 %} +{% endif %} + + + +{% assign default_beg = offset | minus: pinned.size %} + +{% if default_beg < 0 %} + {% assign default_beg = 0 %} +{% endif %} + +{% assign default_num = paginator.posts | size | minus: pinned_num %} +{% assign default_end = default_beg | plus: default_num | minus: 1 %} + +{% if default_num > 0 %} + {% for i in (default_beg..default_end) %} + {% assign posts = posts | push: default[i] %} + {% endfor %} +{% endif %} + +
+ {% for post in posts %} +
+ + {% assign card_body_col = '12' %} + + {% if post.image %} + {% assign src = post.image.path | default: post.image %} + {% unless src contains '//' %} + {% assign src = post.img_path | append: '/' | append: src | replace: '//', '/' %} + {% endunless %} + + {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %} + + {% assign lqip = null %} + + {% if post.image.lqip %} + {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %} + {% endif %} + +
+ {{ alt }} +
+ + {% assign card_body_col = '7' %} + {% endif %} + +
+
+

{{ post.title }}

+ +
+

+ {% include no-linenos.html content=post.content %} + {{ content | markdownify | strip_html | truncate: 200 | escape }} +

+
+ + + +
+ +
+
+
+ {% endfor %} +
+ + +{% if paginator.total_pages > 1 %} + {% include post-paginator.html %} +{% endif %} diff --git a/_layouts/page.html b/_layouts/page.html new file mode 100644 index 0000000..32d6582 --- /dev/null +++ b/_layouts/page.html @@ -0,0 +1,20 @@ +--- +layout: default +--- + +{% include lang.html %} + +
+ {% if page.layout == 'page' or page.collection == 'tabs' %} + {% assign tab_key = page.title | downcase %} + {% assign title = site.data.locales[lang].tabs[tab_key] | default: page.title %} +

+ {{ title }} +

+
+ {{ content }} +
+ {% else %} + {{ content }} + {% endif %} +
diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 0000000..f7818bf --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,139 @@ +--- +layout: default +refactor: true +panel_includes: + - toc +tail_includes: + - related-posts + - post-nav + - comments +--- + +{% include lang.html %} + +
+
+

{{ page.title }}

+ + + +
+ +
+ {{ content }} +
+ +
+ + {% if page.categories.size > 0 %} + + {% endif %} + + + {% if page.tags.size > 0 %} + + {% endif %} + +
+
+ {% if site.data.locales[lang].copyright.license.template %} + {% capture _replacement %} + + {{ site.data.locales[lang].copyright.license.name }} + + {% endcapture %} + + {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }} + {% endif %} +
+ + {% include post-sharing.html lang=lang %} +
+ +
+ +
diff --git a/_layouts/tag.html b/_layouts/tag.html new file mode 100644 index 0000000..d766d09 --- /dev/null +++ b/_layouts/tag.html @@ -0,0 +1,23 @@ +--- +layout: page +# The layout for Tag page +--- + +{% include lang.html %} + +
+

+ + {{ page.title }} + {{ page.posts | size }} +

+
    + {% for post in page.posts %} +
  • + {{ post.title }} + + {% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %} +
  • + {% endfor %} +
+
diff --git a/_layouts/tags.html b/_layouts/tags.html new file mode 100644 index 0000000..7800ca0 --- /dev/null +++ b/_layouts/tags.html @@ -0,0 +1,22 @@ +--- +layout: page +# All the Tags of posts. +--- + +
+ {% assign tags = '' | split: '' %} + {% for t in site.tags %} + {% assign tags = tags | push: t[0] %} + {% endfor %} + + {% assign sorted_tags = tags | sort_natural %} + + {% for t in sorted_tags %} + + {% endfor %} +
diff --git a/_posts/2023/fr/2023-12-05-24-idees-de-bussiness.md b/_posts/2023/fr/2023-12-05-24-idees-de-bussiness.md new file mode 100644 index 0000000..c84df20 --- /dev/null +++ b/_posts/2023/fr/2023-12-05-24-idees-de-bussiness.md @@ -0,0 +1,40 @@ +--- +title: "24 idées de bussiness innovantes 2024" +date: 2023-12-05 08:00:00 -0500 +categories: [Business, Entrepreneur] +tags: [Entrepreneur, Créateur de contenu, Business starter] +image: + path: /assets/img/headers/24-ideas-of-bussiness.webp + lqip: data:image/webp;base64,UklGRoAAAABXRUJQVlA4IHQAAACwAwCdASoUAAsAPzmGuVOvKKWisAgB4CcJbACdAA4LgePetk7+gAD+VFD60XmvqqB3jqLpaMPbn5c/PfNek6HeQ41XuHivqOZr+VZDeUl4w9rMBo7prqfjXZXokRbzK6TnOD/fsWjvRLets7uHr9zflzsAAA== +--- + +Préparer l'avenir est essentiel, surtout dans un monde où le business évolue rapidement. Voici 24 idées innovantes pour les entrepreneurs en 2024: + +1. **Créer une épicerie** - Une nouvelle approche des achats quotidiens. +2. **Marketing d'affiliation efficace** - Optimiser les stratégies pour des gains accrus. +3. **Services freelance de haute qualité** - Offrir l'excellence dans divers domaines. +4. **Contenu digital engageant** - Capturer l'attention dans un monde numérique. +5. **Dropshipping avec produits uniques** - Se démarquer avec des articles rares. +6. **Écrire un ebook captivant** - Partager le savoir de manière innovante. +7. **Ouvrir une laverie automatique moderne** - Réinventer les tâches ménagères. +8. **Tutoriels en ligne interactifs** - Apprendre de manière dynamique. +9. **Site e-commerce innovant** - Redéfinir le shopping en ligne. +10. **Événements virtuels mémorables** - Créer des expériences uniques. +11. **Vidéos virales sur TikTok** - Engager une audience mondiale. +12. **Affiliation via Pinterest** - Utiliser le visuel pour influencer. +13. **Bocaux à épices et stickers design** - Ajouter une touche artistique à la cuisine. +14. **Applications web avec IA** - Intégrer l'intelligence artificielle pour une meilleure fonctionnalité. +15. **Chaîne YouTube inspirante** - Eduquer et divertir. +16. **Espace de co-working accueillant** - Favoriser la collaboration. +17. **Communauté forte pour des marques** - Construire des relations durables. +18. **Manuel détaillé et utile** - Fournir des guides pratiques. +19. **Vente sur Amazon FBA** - Exploiter le géant du e-commerce. +20. **Modèles personnalisés sur Canva** - Créer avec facilité. +21. **Gérer une agence IA** - Diriger l'innovation technologique. +22. **Traduire des vidéos américaines** - Ouvrir des marchés internationaux. +23. **Créer une holding digitale** - Gérer diverses entreprises en ligne. +24. **Copywriting convaincant** - Persuader par les mots. + + + +Ces idées sont conçues pour inspirer et propulser les entrepreneurs vers le succès en 2024 et au-delà. Êtes-vous prêt à relever le défi? diff --git a/_posts/2024/en/2024-03-25-building-a-reusable-sidebar-in-rails-with-tailwindcss-and-heroicons.md b/_posts/2024/en/2024-03-25-building-a-reusable-sidebar-in-rails-with-tailwindcss-and-heroicons.md new file mode 100644 index 0000000..34d5667 --- /dev/null +++ b/_posts/2024/en/2024-03-25-building-a-reusable-sidebar-in-rails-with-tailwindcss-and-heroicons.md @@ -0,0 +1,98 @@ +--- +title: "Building a Reusable Sidebar in Rails with TailwindCSS and Heroicons" +date: 2024-03-25 08:00:00 -0500 +categories: [Rails, TailwindCSS, Heroicons] +tags: [Entrepreneur, Créateur de contenu, Business starter] +image: + path: /assets/img/headers/sidebar_rails.webp + lqip: data:image/webp;base64,UklGRkAAAABXRUJQVlA4IDQAAAAQAwCdASoUAAsAPzmGu1OvKSYisAgB4CcJYwAAW+ll18AA/rniDRhs9sq0/4Ip9WfHYHAA + +--- + +# Building a Reusable Sidebar in Rails with TailwindCSS and Heroicons + +Creating a sidebar in a web application can be a daunting task, but with the power of TailwindCSS and Heroicons, it becomes both efficient and stylish. This post will guide you through building a reusable sidebar component in a Rails application using these modern tools, while keeping the code DRY (Don't Repeat Yourself). + +## Prerequisites + +Before getting started, make sure you have the following set up in your Rails application: + +- **TailwindCSS** for styling. +- **Heroicons** for icons. + +## Step-by-Step Guide + +### 1. Create the Sidebar Link Partial + +The first step is to create a partial for the sidebar links. This makes your code reusable and maintainable. + +Create the file `app/views/layouts/components/_sidebar_link.html.erb` with the following content: + +```erb +
  • + <%= link_to path, class: "flex items-center space-x-3 px-3 py-2 text-sm font-medium text-gray-700 dark:text-neutral-200 rounded-lg #{'bg-gray-100 dark:bg-neutral-700' if current} hover:bg-gray-200 dark:hover:bg-neutral-600 transition-colors duration-200" do %> + <%= heroicon icon, class: "h-5 w-5" %> + <%= text %> + <% end %> +
  • +``` + +This partial accepts four parameters: `path`, `icon`, `text`, and `current`. + +### 2. Create the Sidebar Partial + +Next, create a sidebar partial that uses the link partial for adding navigation links. + +Create the file `app/views/layouts/_sidebar.html.erb` with the following content: + +```erb +
    +
    + + <%= link_to root_path, class: "flex items-center space-x-2" do %> + <%= image_tag "logo.svg", alt: "Logo", class: "h-10 w-10" %> + App Name + <% end %> + +
    + + +
    +``` + +This partial dynamically creates a sidebar with links by using the `_sidebar_link.html.erb` partial. + +### 3. Render the Sidebar in Your Layout + +Include the sidebar partial in your main layout file, usually located at `app/views/layouts/application.html.erb`: + +```erb + + <%= render 'layouts/sidebar' %> +
    + <%= yield %> +
    + +``` + +## Benefits of This Approach + +- Reusability: The sidebar link partial makes it easy to add or modify links without repeating code. +- DRY Principle: By using partials, the code remains organized and avoids unnecessary repetition. +- Responsive Design: TailwindCSS provides utility classes that ensure the sidebar is responsive and visually appealing. +- Consistent Icon Styling: Heroicons integrate smoothly with TailwindCSS classes for consistent icon styling. \ No newline at end of file diff --git a/assets/img/favicons/android-chrome-192x192.png b/assets/img/favicons/android-chrome-192x192.png new file mode 100644 index 0000000..bed03f0 Binary files /dev/null and b/assets/img/favicons/android-chrome-192x192.png differ diff --git a/assets/img/favicons/android-chrome-512x512.png b/assets/img/favicons/android-chrome-512x512.png new file mode 100644 index 0000000..db2f9a2 Binary files /dev/null and b/assets/img/favicons/android-chrome-512x512.png differ diff --git a/assets/img/favicons/apple-touch-icon.png b/assets/img/favicons/apple-touch-icon.png new file mode 100644 index 0000000..580c58f Binary files /dev/null and b/assets/img/favicons/apple-touch-icon.png differ diff --git a/assets/img/favicons/browserconfig.xml b/assets/img/favicons/browserconfig.xml new file mode 100644 index 0000000..a02a5c7 --- /dev/null +++ b/assets/img/favicons/browserconfig.xml @@ -0,0 +1,13 @@ +--- +layout: compress +--- + + + + + + + #da532c + + + diff --git a/assets/img/favicons/favicon-16x16.png b/assets/img/favicons/favicon-16x16.png new file mode 100644 index 0000000..acf0efe Binary files /dev/null and b/assets/img/favicons/favicon-16x16.png differ diff --git a/assets/img/favicons/favicon-32x32.png b/assets/img/favicons/favicon-32x32.png new file mode 100644 index 0000000..486cfb0 Binary files /dev/null and b/assets/img/favicons/favicon-32x32.png differ diff --git a/assets/img/favicons/favicon.ico b/assets/img/favicons/favicon.ico new file mode 100644 index 0000000..5011e14 Binary files /dev/null and b/assets/img/favicons/favicon.ico differ diff --git a/assets/img/favicons/mstile-150x150.png b/assets/img/favicons/mstile-150x150.png new file mode 100644 index 0000000..c5fb6a7 Binary files /dev/null and b/assets/img/favicons/mstile-150x150.png differ diff --git a/assets/img/favicons/site.webmanifest b/assets/img/favicons/site.webmanifest new file mode 100644 index 0000000..03c6113 --- /dev/null +++ b/assets/img/favicons/site.webmanifest @@ -0,0 +1,26 @@ +--- +layout: compress +--- + +{% assign favicon_path = "/assets/img/favicons" | relative_url %} + +{ + "name": "{{ site.title }}", + "short_name": "{{ site.title }}", + "description": "{{ site.description }}", + "icons": [ + { + "src": "{{ favicon_path }}/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "{{ favicon_path }}/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + }], + "start_url": "{{ '/index.html' | relative_url }}", + "theme_color": "#2a1e6b", + "background_color": "#ffffff", + "display": "fullscreen" +} diff --git a/assets/img/headers/24-ideas-of-bussiness.png b/assets/img/headers/24-ideas-of-bussiness.png new file mode 100644 index 0000000..ebd986b Binary files /dev/null and b/assets/img/headers/24-ideas-of-bussiness.png differ diff --git a/assets/img/headers/24-ideas-of-bussiness.webp b/assets/img/headers/24-ideas-of-bussiness.webp new file mode 100644 index 0000000..030de27 Binary files /dev/null and b/assets/img/headers/24-ideas-of-bussiness.webp differ diff --git a/assets/img/headers/kozenetproIMG.svg b/assets/img/headers/kozenetproIMG.svg new file mode 100644 index 0000000..221e3dc --- /dev/null +++ b/assets/img/headers/kozenetproIMG.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/headers/rubens-jean-simon.png b/assets/img/headers/rubens-jean-simon.png new file mode 100644 index 0000000..2f86fb1 Binary files /dev/null and b/assets/img/headers/rubens-jean-simon.png differ diff --git a/assets/img/headers/rubens-jean-simon.webp b/assets/img/headers/rubens-jean-simon.webp new file mode 100644 index 0000000..7a10f4b Binary files /dev/null and b/assets/img/headers/rubens-jean-simon.webp differ diff --git a/assets/img/headers/sidebar_rails.png b/assets/img/headers/sidebar_rails.png new file mode 100644 index 0000000..0faa4ed Binary files /dev/null and b/assets/img/headers/sidebar_rails.png differ diff --git a/assets/img/headers/sidebar_rails.webp b/assets/img/headers/sidebar_rails.webp new file mode 100644 index 0000000..77c3452 Binary files /dev/null and b/assets/img/headers/sidebar_rails.webp differ