Skip to content

Commit 670c8c2

Browse files
etewiahclaude
etewiah
and
claude
committed
Replace Vue.js social sharing with reusable ERB partial
- Create shared social sharing component at app/views/pwb/shared/_social_sharing.html.erb - Replace deprecated Vue.js <social-sharing> component in all 3 themes - Support FontAwesome (default/brisbane) and Phosphor (bologna) icons - Support default and bologna layout styles - Allow customizing which networks to display - Add comprehensive documentation at docs/frontend/social_sharing_component.md - Add RSpec tests with 15 test cases covering all functionality 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 227cac1 commit 670c8c2

File tree

6 files changed

+371
-48
lines changed

6 files changed

+371
-48
lines changed

‎app/themes/bologna/views/pwb/props/show.html.erb‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -111,22 +111,7 @@
111111
<!-- Social Sharing -->
112112
<div class="border-t border-warm-gray-100 pt-8">
113113
<p class="text-warm-gray-500 text-sm mb-4"><%= t('pwb.property.share', default: 'Share this property') %>:</p>
114-
<social-sharing inline-template>
115-
<div class="flex items-center space-x-3">
116-
<network network="facebook" class="w-10 h-10 flex items-center justify-center bg-blue-100 text-blue-600 rounded-full hover:bg-blue-600 hover:text-white transition-all duration-300 cursor-pointer">
117-
<i class="ph ph-facebook-logo"></i>
118-
</network>
119-
<network network="linkedin" class="w-10 h-10 flex items-center justify-center bg-blue-100 text-blue-700 rounded-full hover:bg-blue-700 hover:text-white transition-all duration-300 cursor-pointer">
120-
<i class="ph ph-linkedin-logo"></i>
121-
</network>
122-
<network network="twitter" class="w-10 h-10 flex items-center justify-center bg-sky-100 text-sky-500 rounded-full hover:bg-sky-500 hover:text-white transition-all duration-300 cursor-pointer">
123-
<i class="ph ph-x-logo"></i>
124-
</network>
125-
<network network="whatsapp" class="w-10 h-10 flex items-center justify-center bg-green-100 text-green-600 rounded-full hover:bg-green-600 hover:text-white transition-all duration-300 cursor-pointer">
126-
<i class="ph ph-whatsapp-logo"></i>
127-
</network>
128-
</div>
129-
</social-sharing>
114+
<%= render 'pwb/shared/social_sharing', url: request.original_url, title: @property_details.title, icon_style: :phosphor, style: :bologna %>
130115
</div>
131116
</div>
132117

‎app/themes/brisbane/views/pwb/props/show.html.erb‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,22 +26,7 @@
2626
</div>
2727
<% end %>
2828
<!-- Social Sharing -->
29-
<social-sharing class="text-center" inline-template>
30-
<div class="flex justify-center space-x-4 py-6 border-t border-gray-100">
31-
<network network="facebook">
32-
<i class="fa fa-facebook text-2xl text-blue-600 hover:text-blue-800 cursor-pointer"></i>
33-
</network>
34-
<network network="linkedin">
35-
<i class="fa fa-linkedin text-2xl text-blue-700 hover:text-blue-900 cursor-pointer"></i>
36-
</network>
37-
<network network="twitter">
38-
<i class="fa fa-twitter text-2xl text-blue-400 hover:text-blue-600 cursor-pointer"></i>
39-
</network>
40-
<network network="whatsapp">
41-
<i class="fa fa-whatsapp text-2xl text-green-600 hover:text-green-800 cursor-pointer"></i>
42-
</network>
43-
</div>
44-
</social-sharing>
29+
<%= render 'pwb/shared/social_sharing', url: request.original_url, title: @property_details.title %>
4530
</div>
4631
<div class="property-detail-sidebar">
4732
<div class="space-y-6 lg:sticky lg:top-24">

‎app/themes/default/views/pwb/props/show.html.erb‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,22 +26,7 @@
2626
</div>
2727
<% end %>
2828
<!-- Social Sharing -->
29-
<social-sharing class="text-center" inline-template>
30-
<div class="flex justify-center space-x-4 py-6 border-t border-gray-100">
31-
<network network="facebook">
32-
<i class="fa fa-facebook text-2xl text-blue-600 hover:text-blue-800 cursor-pointer"></i>
33-
</network>
34-
<network network="linkedin">
35-
<i class="fa fa-linkedin text-2xl text-blue-700 hover:text-blue-900 cursor-pointer"></i>
36-
</network>
37-
<network network="twitter">
38-
<i class="fa fa-twitter text-2xl text-blue-400 hover:text-blue-600 cursor-pointer"></i>
39-
</network>
40-
<network network="whatsapp">
41-
<i class="fa fa-whatsapp text-2xl text-green-600 hover:text-green-800 cursor-pointer"></i>
42-
</network>
43-
</div>
44-
</social-sharing>
29+
<%= render 'pwb/shared/social_sharing', url: request.original_url, title: @property_details.title %>
4530
</div>
4631
<div class="property-detail-sidebar">
4732
<div class="space-y-6 lg:sticky lg:top-24">

‎app/views/pwb/shared/_social_sharing.html.erb‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<%#
2+
Social Sharing Component
3+
4+
Usage:
5+
<%= render 'pwb/shared/social_sharing', url: request.original_url, title: @property_details.title %>
6+
7+
Options:
8+
url: (required) The URL to share
9+
title: (required) The title/text to share
10+
icon_style: :fontawesome (default) or :phosphor
11+
style: :default (centered, border-top) or :bologna (left-aligned, no border)
12+
networks: Array of networks to show (default: [:facebook, :linkedin, :twitter, :whatsapp])
13+
%>
14+
<% url ||= request.original_url %>
15+
<% title ||= '' %>
16+
<% icon_style ||= :fontawesome %>
17+
<% style ||= :default %>
18+
<% networks ||= [:facebook, :linkedin, :twitter, :whatsapp] %>
19+
20+
<% encoded_url = ERB::Util.url_encode(url) %>
21+
<% encoded_title = ERB::Util.url_encode(title) %>
22+
<% encoded_both = ERB::Util.url_encode(title + ' ' + url) %>
23+
24+
<%
25+
# Define share URLs
26+
share_urls = {
27+
facebook: "https://www.facebook.com/sharer/sharer.php?u=#{encoded_url}",
28+
linkedin: "https://www.linkedin.com/sharing/share-offsite/?url=#{encoded_url}",
29+
twitter: "https://twitter.com/intent/tweet?url=#{encoded_url}&text=#{encoded_title}",
30+
whatsapp: "https://wa.me/?text=#{encoded_both}"
31+
}
32+
33+
# Define icons based on style
34+
if icon_style == :phosphor
35+
icons = {
36+
facebook: 'ph ph-facebook-logo',
37+
linkedin: 'ph ph-linkedin-logo',
38+
twitter: 'ph ph-x-logo',
39+
whatsapp: 'ph ph-whatsapp-logo'
40+
}
41+
else
42+
icons = {
43+
facebook: 'fa fa-facebook',
44+
linkedin: 'fa fa-linkedin',
45+
twitter: 'fa fa-twitter',
46+
whatsapp: 'fa fa-whatsapp'
47+
}
48+
end
49+
50+
# Define link classes based on style
51+
if style == :bologna
52+
link_classes = {
53+
facebook: 'w-10 h-10 flex items-center justify-center bg-blue-100 text-blue-600 rounded-full hover:bg-blue-600 hover:text-white transition-all duration-300',
54+
linkedin: 'w-10 h-10 flex items-center justify-center bg-blue-100 text-blue-700 rounded-full hover:bg-blue-700 hover:text-white transition-all duration-300',
55+
twitter: 'w-10 h-10 flex items-center justify-center bg-sky-100 text-sky-500 rounded-full hover:bg-sky-500 hover:text-white transition-all duration-300',
56+
whatsapp: 'w-10 h-10 flex items-center justify-center bg-green-100 text-green-600 rounded-full hover:bg-green-600 hover:text-white transition-all duration-300'
57+
}
58+
icon_classes = {}
59+
else
60+
link_classes = {
61+
facebook: '',
62+
linkedin: '',
63+
twitter: '',
64+
whatsapp: ''
65+
}
66+
icon_classes = {
67+
facebook: 'text-2xl text-blue-600 hover:text-blue-800 cursor-pointer',
68+
linkedin: 'text-2xl text-blue-700 hover:text-blue-900 cursor-pointer',
69+
twitter: 'text-2xl text-blue-400 hover:text-blue-600 cursor-pointer',
70+
whatsapp: 'text-2xl text-green-600 hover:text-green-800 cursor-pointer'
71+
}
72+
end
73+
74+
# Define titles
75+
titles = {
76+
facebook: 'Share on Facebook',
77+
linkedin: 'Share on LinkedIn',
78+
twitter: 'Share on Twitter',
79+
whatsapp: 'Share on WhatsApp'
80+
}
81+
%>
82+
83+
<% container_class = style == :bologna ? 'flex items-center space-x-3' : 'flex justify-center space-x-4 py-6 border-t border-gray-100' %>
84+
85+
<div class="<%= container_class %>">
86+
<% networks.each do |network| %>
87+
<a href="<%= share_urls[network] %>"
88+
target="_blank"
89+
rel="noopener noreferrer"
90+
title="<%= titles[network] %>"
91+
<% if link_classes[network].present? %>class="<%= link_classes[network] %>"<% end %>>
92+
<i class="<%= icons[network] %> <%= icon_classes[network] %>"></i>
93+
</a>
94+
<% end %>
95+
</div>

‎docs/frontend/social_sharing_component.md‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
# Social Sharing Component
2+
3+
A reusable partial for adding social media sharing buttons to any page.
4+
5+
## Location
6+
7+
`app/views/pwb/shared/_social_sharing.html.erb`
8+
9+
## Usage
10+
11+
### Basic Usage (Default Style)
12+
13+
```erb
14+
<%= render 'pwb/shared/social_sharing',
15+
url: request.original_url,
16+
title: @property_details.title %>
17+
```
18+
19+
This renders centered share buttons with FontAwesome icons and a top border.
20+
21+
### Bologna Theme Style (Phosphor Icons)
22+
23+
```erb
24+
<%= render 'pwb/shared/social_sharing',
25+
url: request.original_url,
26+
title: @property_details.title,
27+
icon_style: :phosphor,
28+
style: :bologna %>
29+
```
30+
31+
This renders left-aligned share buttons with Phosphor icons and rounded button styling.
32+
33+
### Custom Networks
34+
35+
```erb
36+
<%= render 'pwb/shared/social_sharing',
37+
url: request.original_url,
38+
title: @page.title,
39+
networks: [:facebook, :whatsapp] %>
40+
```
41+
42+
## Parameters
43+
44+
| Parameter | Type | Default | Description |
45+
|-----------|------|---------|-------------|
46+
| `url` | String | `request.original_url` | The URL to share (required) |
47+
| `title` | String | `''` | The title/text to share (required) |
48+
| `icon_style` | Symbol | `:fontawesome` | Icon library: `:fontawesome` or `:phosphor` |
49+
| `style` | Symbol | `:default` | Layout style: `:default` or `:bologna` |
50+
| `networks` | Array | `[:facebook, :linkedin, :twitter, :whatsapp]` | Networks to display |
51+
52+
## Supported Networks
53+
54+
- **Facebook** - Opens Facebook share dialog
55+
- **LinkedIn** - Opens LinkedIn share dialog
56+
- **Twitter** - Opens Twitter/X tweet composer
57+
- **WhatsApp** - Opens WhatsApp with pre-filled message
58+
59+
## Styles
60+
61+
### Default Style
62+
- Centered layout with `justify-center`
63+
- Top border separator (`border-t border-gray-100`)
64+
- Padding: `py-6`
65+
- Icons styled individually with hover effects
66+
67+
### Bologna Style
68+
- Left-aligned layout
69+
- Rounded circular buttons (40x40px)
70+
- Background colors with hover transitions
71+
- No container border (wrapper provides styling)
72+
73+
## Examples
74+
75+
### Property Detail Page (Default/Brisbane Theme)
76+
77+
```erb
78+
<!-- In app/themes/default/views/pwb/props/show.html.erb -->
79+
<%= render 'pwb/shared/social_sharing',
80+
url: request.original_url,
81+
title: @property_details.title %>
82+
```
83+
84+
### Property Detail Page (Bologna Theme)
85+
86+
```erb
87+
<!-- In app/themes/bologna/views/pwb/props/show.html.erb -->
88+
<div class="border-t border-warm-gray-100 pt-8">
89+
<p class="text-warm-gray-500 text-sm mb-4">Share this property:</p>
90+
<%= render 'pwb/shared/social_sharing',
91+
url: request.original_url,
92+
title: @property_details.title,
93+
icon_style: :phosphor,
94+
style: :bologna %>
95+
</div>
96+
```
97+
98+
### Blog Post (Hypothetical)
99+
100+
```erb
101+
<%= render 'pwb/shared/social_sharing',
102+
url: blog_post_url(@post),
103+
title: @post.title,
104+
networks: [:facebook, :twitter, :linkedin] %>
105+
```
106+
107+
## Adding New Networks
108+
109+
To add a new network (e.g., Pinterest), edit `_social_sharing.html.erb`:
110+
111+
1. Add the share URL to `share_urls` hash
112+
2. Add icons for both FontAwesome and Phosphor to `icons` hash
113+
3. Add link classes for both styles to `link_classes` hash
114+
4. Add a title to `titles` hash
115+
5. Update the default `networks` array if it should be shown by default
116+
117+
## Migration from Vue.js
118+
119+
This component replaces the deprecated Vue.js `<social-sharing>` component that used inline templates:
120+
121+
```erb
122+
<!-- OLD (deprecated Vue.js) -->
123+
<social-sharing inline-template>
124+
<network network="facebook">...</network>
125+
</social-sharing>
126+
127+
<!-- NEW (ERB partial) -->
128+
<%= render 'pwb/shared/social_sharing', url: ..., title: ... %>
129+
```
130+
131+
## Dependencies
132+
133+
- **FontAwesome** - For default icon style (`fa fa-*` classes)
134+
- **Phosphor Icons** - For Bologna theme (`ph ph-*` classes)
135+
- Both icon libraries should already be loaded in the application layout

0 commit comments

Comments
 (0)