mirror of
https://github.com/cotes2020/chirpy-starter.git
synced 2025-07-01 20:08:55 +10:00
first commits
This commit is contained in:
Rubens Jean Simon
40
_posts/2023/fr/2023-12-05-24-idees-de-bussiness.md
Normal file
40
_posts/2023/fr/2023-12-05-24-idees-de-bussiness.md
Normal file
@ -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.
|
||||
|
||||
<!-- **Bonus Exclusif :** Téléchargez notre PDF gratuit **"100 Things You Need to Know About Technology"** pour rester à la pointe de la technologie en 2024. Ce guide essentiel est parfait pour tout entrepreneur souhaitant exploiter le plein potentiel de la technologie moderne. [Téléchargez maintenant!](#) -->
|
||||
|
||||
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?
|
||||
@ -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
|
||||
<li>
|
||||
<%= 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" %>
|
||||
<span><%= text %></span>
|
||||
<% end %>
|
||||
</li>
|
||||
```
|
||||
|
||||
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
|
||||
<div class="bg-white dark:bg-neutral-800 w-64 min-h-screen">
|
||||
<div class="p-4">
|
||||
<!-- Logo -->
|
||||
<%= link_to root_path, class: "flex items-center space-x-2" do %>
|
||||
<%= image_tag "logo.svg", alt: "Logo", class: "h-10 w-10" %>
|
||||
<span class="text-xl font-semibold text-gray-900 dark:text-white">App Name</span>
|
||||
<% end %>
|
||||
<!-- End Logo -->
|
||||
</div>
|
||||
|
||||
<nav class="p-4 space-y-4">
|
||||
<ul class="space-y-2">
|
||||
<%= render 'layouts/components/sidebar_link', path: root_path, icon: 'home', text: 'Home', current: current_page?(root_path) %>
|
||||
<%= render 'layouts/components/sidebar_link', path: about_path, icon: 'information-circle', text: 'About', current: current_page?(about_path) %>
|
||||
<%= render 'layouts/components/sidebar_link', path: contact_path, icon: 'phone', text: 'Contact', current: current_page?(contact_path) %>
|
||||
<%= render 'layouts/components/sidebar_link', path: help_path, icon: 'support', text: 'Help', current: current_page?(help_path) %>
|
||||
<li>
|
||||
<%= form_with url: destroy_user_session_path, method: :delete, class: "inline" do %>
|
||||
<button type="submit" class="flex items-center space-x-3 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-neutral-700 dark:text-neutral-200 dark:hover:text-white rounded-lg">
|
||||
<%= heroicon "logout", class: "h-5 w-5" %>
|
||||
<span>Sign Out</span>
|
||||
</button>
|
||||
<% end %>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
```
|
||||
|
||||
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
|
||||
<body>
|
||||
<%= render 'layouts/sidebar' %>
|
||||
<div class="flex-1">
|
||||
<%= yield %>
|
||||
</div>
|
||||
</body>
|
||||
```
|
||||
|
||||
## 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.
|
||||
Reference in New Issue
Block a user