Skip to content

Commit 23a01b1

Browse files
hhhyunwooclaude
hhhyunwoo
and
claude
committed
Add multilingual support with Google Translate
- Added Google Translate widget in top-right header - Support for English, Korean, Chinese (Simplified), and Spanish - Custom CSS styling for translate widget - Dark mode support for translate dropdown - Fixed duplicate "Posts" header on all-posts page - Hide Google branding and optimize widget appearance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent ecde4af commit 23a01b1

File tree

5 files changed

+271
-6
lines changed

5 files changed

+271
-6
lines changed

‎_includes/topbar.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!--
2+
The Top Bar with Google Translate
3+
-->
4+
5+
<div id="topbar-wrapper" class="row justify-content-center topbar-down">
6+
<div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
7+
<span id="breadcrumb">
8+
9+
{% assign paths = page.url | split: '/' %}
10+
11+
{% if paths.size == 0 or page.layout == 'home' %}
12+
<!-- index page -->
13+
<span>{{ site.data.locales[lang].tabs.home | capitalize }}</span>
14+
15+
{% else %}
16+
17+
{% for item in paths %}
18+
19+
{% if forloop.first %}
20+
<span>
21+
<a href="{{ '/' | relative_url }}">
22+
{{ site.data.locales[lang].tabs.home | capitalize }}
23+
</a>
24+
</span>
25+
26+
{% elsif forloop.last %}
27+
28+
{% if page.collection == 'tabs' %}
29+
<span>{{ site.data.locales[lang].tabs[item] | default: page.title }}</span>
30+
{% else %}
31+
<span>{{ page.title }}</span>
32+
{% endif %}
33+
34+
{% elsif page.layout == 'category' or page.layout == 'tag' %}
35+
<span>
36+
<a href="{{ item | relative_url }}">
37+
{{ site.data.locales[lang].tabs[item] | default: page.title }}
38+
</a>
39+
</span>
40+
{% endif %}
41+
42+
{% endfor %}
43+
44+
{% endif %}
45+
46+
</span><!-- endof #breadcrumb -->
47+
48+
<i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>
49+
50+
<div id="topbar-title">
51+
{% if page.layout == 'home' %}
52+
{{- site.data.locales[lang].title | default: site.title -}}
53+
{% elsif page.collection == 'tabs' %}
54+
{%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
55+
{{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
56+
{% else %}
57+
{{- site.data.locales[lang].layout[page.layout] | default: page.layout | capitalize -}}
58+
{% endif %}
59+
</div>
60+
61+
<!-- Google Translate Widget -->
62+
<div id="google_translate_element"></div>
63+
64+
<i id="search-trigger" class="fas fa-search fa-fw"></i>
65+
<span id="search-wrapper" class="align-items-center">
66+
<i class="fas fa-search fa-fw"></i>
67+
<input class="form-control" id="search-input" type="search"
68+
aria-label="search" autocomplete="off" placeholder="{{ site.data.locales[lang].search.hint | capitalize }}...">
69+
<i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
70+
</span>
71+
<span id="search-cancel" >{{ site.data.locales[lang].search.cancel }}</span>
72+
</div>
73+
74+
</div>
75+
76+
<!-- Google Translate Script -->
77+
<script type="text/javascript">
78+
function googleTranslateElementInit() {
79+
new google.translate.TranslateElement({
80+
pageLanguage: 'ko',
81+
includedLanguages: 'en,ko,zh-CN,es',
82+
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
83+
autoDisplay: false
84+
}, 'google_translate_element');
85+
}
86+
</script>
87+
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

‎_layouts/posts.html‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,6 @@
33
# The Posts page layout
44
---
55

6-
<!-- Page Header -->
7-
<div class="page-header">
8-
<h1>{{ page.title | default: "Blog Posts" }}</h1>
9-
<p>Thoughts, experiences, and insights in technology and engineering</p>
10-
</div>
11-
126
<div id="post-list">
137

148
{% assign pinned_posts = site.posts | where: "pin", true %}

‎_sass/custom/_google-translate.scss‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/* Google Translate Widget Styling */
2+
3+
#google_translate_element {
4+
position: relative;
5+
z-index: 1000;
6+
margin-left: auto;
7+
margin-right: 1rem;
8+
}
9+
10+
/* Hide Google branding */
11+
#google_translate_element .goog-logo-link {
12+
display: none !important;
13+
}
14+
15+
#google_translate_element .goog-te-gadget {
16+
font-size: 0 !important;
17+
}
18+
19+
/* Style the translate dropdown */
20+
#google_translate_element .goog-te-combo {
21+
padding: 0.25rem 0.5rem;
22+
font-size: 0.875rem;
23+
border: 1px solid #e9ecef;
24+
border-radius: 0.25rem;
25+
background-color: transparent;
26+
color: inherit;
27+
cursor: pointer;
28+
transition: all 0.3s ease;
29+
}
30+
31+
#google_translate_element .goog-te-combo:hover {
32+
border-color: #2a408e;
33+
}
34+
35+
#google_translate_element .goog-te-combo:focus {
36+
outline: none;
37+
border-color: #2a408e;
38+
box-shadow: 0 0 0 0.2rem rgba(42, 64, 142, 0.25);
39+
}
40+
41+
/* Hide the "Powered by" text */
42+
.goog-te-gadget-simple {
43+
border: none !important;
44+
background-color: transparent !important;
45+
}
46+
47+
.goog-te-gadget-simple .goog-te-menu-value span:first-child {
48+
display: none;
49+
}
50+
51+
/* Style for the language selector */
52+
.goog-te-gadget-simple .goog-te-menu-value {
53+
color: inherit !important;
54+
}
55+
56+
.goog-te-gadget-simple .goog-te-menu-value span {
57+
color: inherit !important;
58+
}
59+
60+
/* Remove Google Translate banner at the top */
61+
body {
62+
top: 0 !important;
63+
}
64+
65+
.skiptranslate {
66+
display: none !important;
67+
}
68+
69+
/* Mobile responsive */
70+
@media (max-width: 768px) {
71+
#google_translate_element {
72+
margin-left: 0.5rem;
73+
margin-right: 0.5rem;
74+
}
75+
76+
#google_translate_element .goog-te-combo {
77+
font-size: 0.75rem;
78+
padding: 0.2rem 0.4rem;
79+
}
80+
}
81+
82+
/* Dark mode support */
83+
[data-mode="dark"] #google_translate_element .goog-te-combo {
84+
background-color: #1e1e1e;
85+
color: #d1d5db;
86+
border-color: #4b5563;
87+
}
88+
89+
[data-mode="dark"] #google_translate_element .goog-te-combo:hover {
90+
border-color: #6366f1;
91+
}
92+
93+
[data-mode="dark"] #google_translate_element .goog-te-combo:focus {
94+
border-color: #6366f1;
95+
box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
96+
}

‎_sass/custom/_sidebar-categories.scss‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/* Sidebar Category Toggle Styles */
2+
3+
#sidebar {
4+
.nav-link.dropdown-toggle {
5+
display: flex;
6+
align-items: center;
7+
justify-content: space-between;
8+
cursor: pointer;
9+
10+
&::after {
11+
content: '\f107'; // FontAwesome chevron-down
12+
font-family: 'Font Awesome 5 Free';
13+
font-weight: 900;
14+
border: none;
15+
vertical-align: middle;
16+
transition: transform 0.3s ease;
17+
margin-left: auto;
18+
}
19+
20+
&[aria-expanded="true"]::after {
21+
transform: rotate(180deg);
22+
}
23+
}
24+
25+
// Nested category list styling
26+
.collapse {
27+
transition: all 0.3s ease-in-out;
28+
29+
&.show {
30+
background-color: rgba(0, 0, 0, 0.02);
31+
}
32+
33+
.nav-link {
34+
padding-left: 2.5rem;
35+
font-size: 0.875rem;
36+
37+
&:hover {
38+
background-color: var(--sidebar-hover);
39+
padding-left: 2.75rem;
40+
}
41+
}
42+
}
43+
44+
// Second level nesting (mentoring/tech subcategories)
45+
.collapse .collapse {
46+
.nav-link {
47+
padding-left: 3.5rem;
48+
font-size: 0.8rem;
49+
50+
&:hover {
51+
padding-left: 3.75rem;
52+
}
53+
}
54+
}
55+
56+
// Category icons styling
57+
.nav-link i {
58+
width: 20px;
59+
text-align: center;
60+
margin-right: 0.75rem;
61+
}
62+
63+
// Active state for category pages
64+
.nav-item.active .nav-link {
65+
background-color: var(--primary-color);
66+
color: white;
67+
font-weight: 600;
68+
69+
&::before {
70+
content: '';
71+
position: absolute;
72+
left: 0;
73+
top: 0;
74+
bottom: 0;
75+
width: 4px;
76+
background: var(--primary-color);
77+
}
78+
}
79+
}
80+
81+
// Ensure smooth transitions
82+
#categoriesSubmenu,
83+
#mentoringSubmenu,
84+
#techSubmenu {
85+
overflow: hidden;
86+
transition: height 0.3s ease;
87+
}

‎assets/css/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
---
33

44
@import "jekyll-theme-chirpy";
5+
@import "custom/google-translate";
56

67
/* Modern Typography and Design Improvements */
78
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

0 commit comments

Comments
 (0)