Skip to content

Commit 9a71e93

Browse files
mattbollmattboll
authored
Feature/social network (#134)
* feat(social): fix images when sharing * feat(social): remove facebook from our news feed * feat(social): share blog articles on bluesky or linkedin instead of X or facebook
1 parent f1a9346 commit 9a71e93

File tree

9 files changed

+124
-66
lines changed

9 files changed

+124
-66
lines changed

‎site/hugo.toml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ methods = ["(?i)GET|POST"]
2121
urls = [".*"]
2222

2323
[params]
24+
siteUrl = "https://code-troopers.com"
2425
images = ["img/logo-code-troopers-tête-couleur.png"]
2526

2627
[markup]

‎site/layouts/blog/single.html‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,19 +44,18 @@ <h2>{{ .Title }}</h2>
4444
<ul class="socials">
4545
<li>
4646
<a target="_blank" rel="nofollow noopener"
47-
aria-label="Partager sur Facebook (nouvelle fenêtre)"
48-
href="https://www.facebook.com/sharer.php?u=http://code-troopers.com{{ .Permalink }}&t={{ .Title }}"
49-
class="facebook-button"
47+
aria-label="Partager sur Bluesky (nouvelle fenêtre)"
48+
href="https://bsky.app/intent/compose?text={{ .Title }}+https://code-troopers.com{{ .RelPermalink }}"
5049
onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;">
51-
{{ partial "svg" "facebook-fill" }}
50+
{{ partial "svg" "bluesky-fill" }}
5251
</a>
5352
</li>
5453
<li>
5554
<a target="_blank" rel="nofollow noopener"
56-
aria-label="Partager sur X (nouvelle fenêtre)"
57-
href="https://twitter.com/share?url=http://code-troopers.com{{ .Permalink }}&text={{ .Title }}&via=codetroopers"
58-
onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;">
59-
{{ partial "svg" "twitter-x-fill" }}
55+
aria-label="Partager sur LinkedIn (nouvelle fenêtre)"
56+
href="https://www.linkedin.com/sharing/share-offsite/?url=https://code-troopers.com{{ .RelPermalink }}"
57+
onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;">
58+
{{ partial "svg" "linkedin-fill" }}
6059
</a>
6160
</li>
6261
</ul>

‎site/layouts/partials/footer.html‎

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -24,35 +24,27 @@ <h2>Code-Troopers</h2>
2424
</div>
2525
</div>
2626

27-
<h2>Suivez nos actualités</h2>
28-
29-
<ul class="flex x3">
30-
<li>
31-
<a
32-
class="w"
33-
aria-label="Facebook Code-Troopers"
34-
href="https://facebook.com/codetroopers37"
35-
>
36-
{{ partial "svg" "facebook-fill" }}
37-
</a>
38-
</li>
39-
<li>
40-
<a
41-
aria-label="Linkedin Code-Troopers"
42-
href="https://www.linkedin.com/company/codetroopers"
43-
>
44-
{{ partial "svg" "linkedin-fill" }}
45-
</a>
46-
</li>
47-
<li>
48-
<a
49-
aria-label="Github Code-Troopers"
50-
href="https://github.com/code-troopers"
51-
>
52-
{{ partial "svg" "github-fill" }}
53-
</a>
54-
</li>
55-
</ul>
27+
<div class="socials-follow">
28+
<h2>Suivez nos actualités</h2>
29+
<ul class="x2">
30+
<li>
31+
<a
32+
aria-label="Linkedin Code-Troopers"
33+
href="https://www.linkedin.com/company/codetroopers"
34+
>
35+
{{ partial "svg" "linkedin-fill" }}
36+
</a>
37+
</li>
38+
<li>
39+
<a
40+
aria-label="Github Code-Troopers"
41+
href="https://github.com/code-troopers"
42+
>
43+
{{ partial "svg" "github-fill" }}
44+
</a>
45+
</li>
46+
</ul>
47+
</div>
5648
</section>
5749

5850
<footer>

‎site/layouts/partials/head.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
<link rel="mask-icon" href="/img/safari-pinned-tab.svg" color="#ff4400" />
2222
<meta name="theme-color" content="#fff" />
2323

24-
<!-- Open Graph Hugo https://gohugo.io/templates/internal/#open-graph -->
25-
{{ template "_internal/opengraph.html" . }} {{ if .IsHome }}
24+
<!-- Open Graph + Twitter Card -->
25+
{{ partial "opengraph.html" . }} {{ if .IsHome }}
2626
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
2727
{{ end }}
2828
<script

‎site/layouts/partials/opengraph.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{{- $siteUrl := site.Params.siteUrl }}
2+
{{- $title := .Title }}
3+
{{- $description := .Description }}
4+
{{- if not $description }}
5+
{{- $description = .Summary | plainify | htmlUnescape }}
6+
{{- end }}
7+
{{- $url := printf "%s%s" $siteUrl .RelPermalink }}
8+
9+
{{/* Resolve image: use cover page resource, fall back to site default */}}
10+
{{- $image := "" }}
11+
{{- with .Params.cover }}
12+
{{- with $.Resources.GetMatch . }}
13+
{{- with .Fill "1200x630 Center" }}
14+
{{- $image = printf "%s%s" $siteUrl .RelPermalink }}
15+
{{- end }}
16+
{{- end }}
17+
{{- end }}
18+
{{- if not $image }}
19+
{{- with site.Params.images }}
20+
{{- $image = printf "%s/%s" $siteUrl (index . 0) }}
21+
{{- end }}
22+
{{- end }}
23+
24+
<meta property="og:title" content="{{ $title }}" />
25+
<meta property="og:description" content="{{ $description }}" />
26+
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
27+
<meta property="og:url" content="{{ $url }}" />
28+
{{- with $image }}
29+
<meta property="og:image" content="{{ . }}" />
30+
{{- end }}
31+
{{- with site.Title }}
32+
<meta property="og:site_name" content="{{ . }}" />
33+
{{- end }}
34+
35+
{{- if .IsPage }}
36+
{{- with .Date }}
37+
<meta property="article:published_time" content="{{ .Format "2006-01-02T15:04:05-07:00" }}" />
38+
{{- end }}
39+
{{- with .Params.author }}
40+
<meta property="article:author" content="{{ . }}" />
41+
{{- end }}
42+
{{- with .Params.tags }}
43+
{{- range . }}
44+
<meta property="article:tag" content="{{ . }}" />
45+
{{- end }}
46+
{{- end }}
47+
{{- end }}
48+
49+
<meta name="twitter:card" content="{{ if $image }}summary_large_image{{ else }}summary{{ end }}" />
50+
<meta name="twitter:title" content="{{ $title }}" />
51+
<meta name="twitter:description" content="{{ $description }}" />
52+
{{- with $image }}
53+
<meta name="twitter:image" content="{{ . }}" />
54+
{{- end }}

‎site/layouts/tips/single.html‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,19 +39,18 @@ <h2>{{ .Title }}</h2>
3939
<ul class="socials">
4040
<li>
4141
<a target="_blank" rel="nofollow noopener"
42-
aria-label="Partager sur Facebook (nouvelle fenêtre)"
43-
href="https://www.facebook.com/sharer.php?u=http://code-troopers.com{{ .Permalink }}&t={{ .Title }}"
44-
class="facebook-button"
42+
aria-label="Partager sur Bluesky (nouvelle fenêtre)"
43+
href="https://bsky.app/intent/compose?text={{ .Title }}+https://code-troopers.com{{ .RelPermalink }}"
4544
onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;">
46-
{{ partial "svg" "facebook-fill" }}
45+
{{ partial "svg" "bluesky-fill" }}
4746
</a>
4847
</li>
4948
<li>
5049
<a target="_blank" rel="nofollow noopener"
51-
aria-label="Partager sur X (nouvelle fenêtre)"
52-
href="https://twitter.com/share?url=http://code-troopers.com{{ .Permalink }}&text={{ .Title }}&via=codetroopers"
53-
onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;">
54-
{{ partial "svg" "twitter-x-fill" }}
50+
aria-label="Partager sur LinkedIn (nouvelle fenêtre)"
51+
href="https://www.linkedin.com/sharing/share-offsite/?url=https://code-troopers.com{{ .RelPermalink }}"
52+
onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;">
53+
{{ partial "svg" "linkedin-fill" }}
5554
</a>
5655
</li>
5756
</ul>

‎site/layouts/work/single.html‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,19 +41,18 @@ <h2>{{ .Title }}</h2>
4141
<ul class="socials">
4242
<li>
4343
<a target="_blank" rel="nofollow noopener"
44-
aria-label="Partager sur Facebook (nouvelle fenêtre)"
45-
href="https://www.facebook.com/sharer.php?u=http://code-troopers.com{{ .Permalink }}&t={{ .Title }}"
46-
class="facebook-button"
47-
onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;">
48-
{{ partial "svg" "facebook-fill" }}
44+
aria-label="Partager sur Bluesky (nouvelle fenêtre)"
45+
href="https://bsky.app/intent/compose?text={{ .Title }}+https://code-troopers.com{{ .RelPermalink }}"
46+
onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;">
47+
{{ partial "svg" "bluesky-fill" }}
4948
</a>
5049
</li>
5150
<li>
5251
<a target="_blank" rel="nofollow noopener"
53-
aria-label="Partager sur X (nouvelle fenêtre)"
54-
href="https://twitter.com/share?url=http://code-troopers.com{{ .Permalink }}&text={{ .Title }}&via=codetroopers"
55-
onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;">
56-
{{ partial "svg" "twitter-x-fill" }}
52+
aria-label="Partager sur LinkedIn (nouvelle fenêtre)"
53+
href="https://www.linkedin.com/sharing/share-offsite/?url=https://code-troopers.com{{ .RelPermalink }}"
54+
onclick="window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;">
55+
{{ partial "svg" "linkedin-fill" }}
5756
</a>
5857
</li>
5958
</ul>

‎site/static/bluesky-fill.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/css/contact.css‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,35 @@ section#contact {
1010
}
1111
background: var(--gradient);
1212
color: var(--white);
13-
padding-bottom: 5rem;
13+
padding-bottom: 1rem;
1414

15-
@media screen and (max-width: 767px) {
16-
ul a {
17-
height: 3rem;
18-
width: 3rem;
15+
.socials-follow {
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
gap: 1.5rem;
20+
padding: 2rem 0;
21+
22+
h2 {
23+
margin: 0;
24+
}
25+
26+
ul {
27+
display: flex;
28+
gap: 1rem;
29+
margin: 0;
30+
list-style: none;
31+
padding: 0;
1932
}
20-
}
2133

22-
ul {
2334
a {
2435
border: 2px solid #fff;
2536
border-radius: 50%;
26-
position: relative;
27-
height: 5rem;
28-
width: 5rem;
37+
height: 3rem;
38+
width: 3rem;
39+
display: flex;
40+
align-items: center;
41+
justify-content: center;
2942
&:hover {
3043
background-color: #fff;
3144
}

0 commit comments

Comments
 (0)