Skip to content

Commit a50b695

Browse files
ngeorgerngeorger
authored
feat: Add Spanish language support with custom templates and components (#105)
feat: Add Spanish language support with custom templates and components - Implemented custom post template for Spanish content in `custom-es.hbs`. - Created default Spanish template in `default-es.hbs`. - Updated home page to use Spanish posts list in `home-es.hbs`. - Added author box component for Spanish in `author-box-es.hbs`. - Introduced post card component for Spanish in `post-card-es.hbs`. - Created posts list component for Spanish in `posts-list-es.hbs`. - Added tag page template for Spanish in `tag-es.hbs`. - Updated social share component to remove unnecessary text in `social-share.hbs`. - Incremented version number in `package.json` to 1.4.2. - Commented out language detection script in `main.js`.
1 parent 389add7 commit a50b695

File tree

12 files changed

+295
-20
lines changed

12 files changed

+295
-20
lines changed

‎assets/built/main.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/built/screen.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/main.js‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -44,21 +44,21 @@ window.onclick = function (event) {
4444
/* Set the language attribute on the HTML element based on the subpath of the URL
4545
This script will set the language attribute on the HTML element based on the subpath of the URL
4646
*/
47-
document.addEventListener('DOMContentLoaded', function () {
48-
var path = window.location.pathname.split('/')[1]; // Get the first subpath
49-
var lang = 'en'; // Default language
50-
// Map subpaths to locales
51-
var localeMap = {
52-
'es': 'es',
53-
'br': 'pt',
54-
'en': 'en',
55-
// Add more mappings as needed
56-
};
57-
if (localeMap.hasOwnProperty(path)) {
58-
lang = localeMap[path];
59-
}
60-
document.querySelector('html').setAttribute('lang', lang);
61-
});
47+
// document.addEventListener('DOMContentLoaded', function () {
48+
// var path = window.location.pathname.split('/')[1]; // Get the first subpath
49+
// var lang = 'en'; // Default language
50+
// // Map subpaths to locales
51+
// var localeMap = {
52+
// 'es': 'es',
53+
// 'br': 'pt',
54+
// 'en': 'en',
55+
// // Add more mappings as needed
56+
// };
57+
// if (localeMap.hasOwnProperty(path)) {
58+
// lang = localeMap[path];
59+
// }
60+
// document.querySelector('html').setAttribute('lang', lang);
61+
// });
6262

6363
/* Responsive HTML table */
6464
(function () {

‎custom-es.hbs‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
{{!< default-es}}
2+
<!-- This is the custom post template for Spanish content -->
3+
<main id="main post-wrapper">
4+
5+
{{#post}}
6+
<!-- Post Content Section -->
7+
<article class="prose-invert prose-lg post-content text-light">
8+
{{#is "page"}}
9+
{{#if @page.show_title_and_feature_image}}
10+
<h1 class="text-4xl text-center">{{title}}</h1>
11+
{{> "feature-image"}}
12+
{{/if}}
13+
{{!-- {{> social-share}} --}}
14+
{{/is}}
15+
16+
{{#is "post"}}
17+
<h1 class="text-4xl text-center">{{title}}</h1>
18+
{{> "social-share"}}
19+
20+
<section class="mb-8 text-center post-meta">
21+
<div class="space-x-2 tags">
22+
{{#foreach tags}}
23+
<a href="{{url}}" class="px-2 py-1 text-sm rounded bg-dark hover:bg-highlight">{{name}}</a>
24+
{{/foreach}}
25+
</div>
26+
{{> "feature-image" }}
27+
<div class="mb-2 text-xs text-light">
28+
{{#foreach authors}}
29+
Autor: <a href="{{url}}" class="hover:underline" rel="author" >{{name}}</a>
30+
{{/foreach}} | Publicado {{date published_at format="d MMMM YYYY"}}
31+
</div>
32+
{{/is}}
33+
</section>
34+
35+
<!-- Main Post Content -->
36+
{{#is "post"}}
37+
<section class="gh-content grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8">
38+
<aside class="gh-sidebar">
39+
<span><b>Índice:</b></span>
40+
<div class="gh-toc"></div>
41+
</aside> {{! The TOC will be inserted here }}
42+
<div class="lg:col-span-2 pr-4 contenido">
43+
{{else}}
44+
<section class="lg:col-span-2 pr-4 contenido">
45+
{{/is}}
46+
{{{content}}}
47+
</div>
48+
</section>
49+
50+
51+
{{#is "post"}}
52+
<h2>Más contenido:</h2>
53+
{{#get "posts" include="authors" filter="id:-{{id}}+tags:[{{primary_tag.slug}}]" limit="2" as |next|}}
54+
{{#if next}}
55+
<section id="post-list">
56+
{{#foreach next}}
57+
{{> "post-card-es"}}
58+
{{/foreach}}
59+
</section>
60+
{{/if}}
61+
{{/get}}
62+
63+
<section id="comments">
64+
{{#if comments}}
65+
<div class="gh-comments gh-canvas">
66+
{{#if @member}}
67+
{{comments count=false mode=dark title="Opiniones?"}}
68+
{{else}}
69+
{{> "social-sso"}}
70+
{{comments count=false mode=dark title=" "}}
71+
{{/if}}
72+
</div>
73+
{{/if}}
74+
</section>
75+
{{> "components/author-box-es"}}
76+
77+
78+
{{/is}}
79+
</article>
80+
81+
{{/post}}
82+
</main>
83+

‎default-es.hbs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="es">
3+
<!-- This is the default template for Spanish content -->
34
<head>
45
<meta charset="utf-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">

‎home-es.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
{{/if}}
99
{{/tag}}
1010

11-
{{> "posts-list" }}
11+
{{> "posts-list-es" }}
1212

1313
</main>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "sredevopsorg-ghost-theme",
33
"description": "Ghost v6 Theme made for SREDevOps.org (https://www.sredevops.org) based on Tailwind CSS v3, responsive, dark color schema, SVG icons, sidebar + footer navgation, customized tags and recommendations pages.",
44
"demo": "https://www.sredevops.org",
5-
"version": "1.4.1",
5+
"version": "1.4.2",
66
"engines": {
77
"ghost": ">=5.0.0"
88
},

‎partials/components/author-box-es.hbs‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!-- Author Box -->
2+
<section class="mt-8 author-box">
3+
{{#foreach authors}}
4+
5+
<div class="flex flex-col w-full p-4">
6+
<div class="flex flex-col gap-4 mb-4">
7+
<span>
8+
{{#if profile_image}}
9+
<img src="{{img_url profile_image size="xs" format="webp"}}" alt="{{name}}" class="rounded-full">
10+
{{/if}}
11+
</span>
12+
<span class=" text-base font-normal text-light">{{name}}</span>
13+
<span class="text-xs" ><a href="{{url}}">Ver más contenido por {{name}}</a></span>
14+
{{#if bio}}
15+
<span class="text-base">{{bio}}</span>
16+
{{/if}}
17+
</div>
18+
19+
20+
<div class="flex flex-wrap gap-2 mb-4">
21+
<div class="flex flex-wrap gap-2 text-sm">
22+
{{#if website}}
23+
<a href="{{website}}" target="_blank" rel="noopener" class="flex items-center gap-2 px-4 py-2 rounded-lg hover:text-lighter hover:bg-dark">
24+
<svg class="w-5 h-5 text-light" role="img" aria-label="Website">
25+
<use xlink:href="#icon-link"></use>
26+
</svg>
27+
Website
28+
</a>
29+
{{/if}}
30+
{{#if twitter}}
31+
<a href="{{social_url type="twitter"}}" target="_blank" rel="noopener" class="flex items-center gap-2 px-4 py-2 rounded-lg hover:text-lighter hover:bg-dark">
32+
<svg class="w-5 h-5 text-light" role="img" aria-label="Twitter">
33+
<use xlink:href="#icon-x"></use>
34+
</svg>
35+
Twitter
36+
</a>
37+
{{/if}}
38+
{{#if facebook}}
39+
<a href="{{social_url type="facebook"}}" target="_blank" rel="noopener" class="flex items-center gap-2 px-4 py-2 rounded-lg hover:text-lighter hover:bg-dark">
40+
<svg class="w-5 h-5 text-light" role="img" aria-label="Facebook">
41+
<use xlink:href="#icon-facebook"></use>
42+
</svg>
43+
Facebook
44+
</a>
45+
{{/if}}
46+
{{#if threads}}
47+
<a href="{{social_url type="threads"}}" target="_blank" rel="noopener" class="flex items-center gap-2 px-4 py-2 rounded-lg hover:text-lighter hover:bg-dark">
48+
<svg class="w-5 h-5 text-light" role="img" aria-label="Threads">
49+
<use xlink:href="#icon-threads"></use>
50+
</svg>
51+
Threads
52+
</a>
53+
{{/if}}
54+
{{#if bluesky}}
55+
<a href="{{social_url type="bluesky"}}" target="_blank" rel="noopener" class="flex items-center gap-2 px-4 py-2 rounded-lg hover:text-lighter hover:bg-dark">
56+
<svg class="w-5 h-5 text-light" role="img" aria-label="Bluesky">
57+
<use xlink:href="#icon-bluesky"></use>
58+
</svg>
59+
Bluesky
60+
</a>
61+
{{/if}}
62+
{{#if mastodon}}
63+
<a href="{{social_url type="mastodon"}}" target="_blank" rel="noopener" class="flex items-center gap-2 px-4 py-2 rounded-lg hover:text-lighter hover:bg-dark">
64+
<svg class="w-5 h-5 text-light" role="img" aria-label="Mastodon">
65+
<use xlink:href="#icon-mastodon"></use>
66+
</svg>
67+
Mastodon
68+
</a>
69+
{{/if}}
70+
{{#if tiktok}}
71+
<a href="{{social_url type="tiktok"}}" target="_blank" rel="noopener" class="flex items-center gap-2 px-4 py-2 rounded-lg hover:text-lighter hover:bg-dark">
72+
<svg class="w-5 h-5 text-light" role="img" aria-label="TikTok">
73+
<use xlink:href="#icon-tiktok"></use>
74+
</svg>
75+
TikTok
76+
</a>
77+
{{/if}}
78+
{{#if youtube}}
79+
<a href="{{social_url type="youtube"}}" target="_blank" rel="noopener" class="flex items-center gap-2 px-4 py-2 rounded-lg hover:text-lighter hover:bg-dark">
80+
<svg class="w-5 h-5 text-light" role="img" aria-label="YouTube">
81+
<use xlink:href="#icon-youtube"></use>
82+
</svg>
83+
YouTube
84+
</a>
85+
{{/if}}
86+
{{#if instagram}}
87+
<a href="{{social_url type="instagram"}}" target="_blank" rel="noopener" class="flex items-center gap-2 px-4 py-2 rounded-lg hover:text-lighter hover:bg-dark">
88+
<svg class="w-5 h-5 text-light" role="img" aria-label="Instagram">
89+
<use xlink:href="#icon-instagram"></use>
90+
</svg>
91+
Instagram
92+
</a>
93+
{{/if}}
94+
{{#if location}}
95+
<span class="flex items-center gap-2 px-4 py-2 rounded-lg hover:text-lighter hover:bg-dark text-light">
96+
<svg class="w-5 h-5 text-light" role="img" aria-label="Location">
97+
<use xlink:href="#icon-globe"></use>
98+
</svg>
99+
{{location}}
100+
</span>
101+
{{/if}}
102+
</div>
103+
</div>
104+
</div>
105+
{{/foreach}}
106+
107+
</section>

‎partials/post-card-es.hbs‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<article id="{{slug}}">
2+
<a href="{{url absolute=" true"}}" alt="{{title}}">
3+
{{> "feature-image"}}
4+
</a>
5+
<div>
6+
7+
<h1>
8+
<a href="{{url absolute=" true"}}">
9+
{{title}}
10+
</a>
11+
</h1>
12+
13+
<p class="mt-2 text-sm line-clamp-3 text-light">
14+
{{excerpt}}
15+
</p>
16+
17+
<a href="{{url absolute=" true"}}" class="inline-flex items-center gap-1 mt-4 text-sm font-medium group"
18+
alt="{{title}}" rel="bookmark">
19+
<h4 class="block transition-all group-hover:ms-0.5" alt="{{title}}">
20+
Leer más &rarr;
21+
</h4>
22+
</a>
23+
</div>
24+
</article>

‎partials/posts-list-es.hbs‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!-- Post Grid -->
2+
<section id="post-list">
3+
{{#foreach posts}}
4+
<article id="{{slug}}">
5+
<a href="{{url absolute="true"}}" alt="{{title}}">
6+
{{> "feature-image"}}
7+
</a>
8+
<div>
9+
10+
<h1>
11+
<a href="{{url absolute="true"}}">
12+
{{title}}
13+
</a>
14+
</h1>
15+
16+
<p class="mt-2 text-sm line-clamp-3 text-light">
17+
{{excerpt}}
18+
</p>
19+
20+
<a href="{{url absolute="true"}}" class="inline-flex items-center gap-1 mt-4 text-sm font-medium group" alt="{{title}}" rel="bookmark">
21+
<h2 class="block transition-all group-hover:ms-0.5" alt="{{title}}">
22+
Leer más &rarr;
23+
</h2>
24+
</a>
25+
</div>
26+
</article>
27+
{{/foreach}}
28+
</section>
29+
30+
<!-- Pagination -->
31+
<section id="pagination" class="flex justify-center mt-6 pagination">
32+
<ul class="flex items-center space-x-4">
33+
<!-- Previous Page Link -->
34+
{{#if pagination.prev}}
35+
<li>
36+
<a href="{{page_url pagination.prev}}" class="px-3 py-1 rounded-xlg text-lighter hover:bg-highlight bg-darker">&larr; Posts recientes</a>
37+
</li>
38+
{{/if}}
39+
40+
41+
<!-- Next Page Link -->
42+
{{#if pagination.next}}
43+
<li>
44+
<a href="{{page_url pagination.next}}" class="px-3 py-1 rounded-xlg text-lighter hover:bg-highlight bg-darker">Posts anteriores &rarr;</a>
45+
</li>
46+
{{/if}}
47+
</ul>
48+
</section>

0 commit comments

Comments
 (0)