Skip to content

Commit a66d48a

Browse files
sorahsorah
authored
Merge pull request #3718 from liberaldev/improve-font-family-with-lang-attr
Improve font family with add lang attr
2 parents 9c3d084 + a725e45 commit a66d48a

File tree

9 files changed

+361
-237
lines changed

9 files changed

+361
-237
lines changed

‎_includes/language_selector.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,10 @@
3131
{% for lang in site.data.languages %}
3232
<a href="/{{ lang.code }}{{ page.url | remove_first: '/' | replace_first: page.lang, '' }}"
3333
class="flex items-center justify-between px-4 py-2 text-sm {% if lang.code == current_lang %}bg-stone-100 dark:bg-stone-700 text-stone-900 dark:text-stone-50 font-medium{% else %}text-stone-700 dark:text-stone-300{% endif %} hover:bg-stone-100 dark:hover:bg-stone-700 transition-colors">
34-
<span>{{ lang.native_name }} ({{ lang.code }})</span>
34+
<span>
35+
<span lang="{{ lang.code | to_html_lang }}">{{ lang.native_name }}</span>
36+
(<span lang="und-Latn">{{ lang.code }}</span>)
37+
</span>
3538
{% if lang.code == current_lang %}
3639
<span class="icon-check" aria-hidden="true"></span>
3740
{% endif %}

‎_layouts/default.html‎

Lines changed: 117 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,125 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
6-
{% if page.title != null %}
7-
{% capture homepage_path %}/{{ page.lang }}/{% endcapture %}
8-
{% if page.url == homepage_path %}
9-
<title>{{ page.title }}</title>
10-
{% else %}
11-
<title>{{ page.title }} | Ruby</title>
12-
{% endif %}
13-
{% else %}
14-
<title>Ruby Programming Language</title>
15-
{% endif %}
16-
17-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1+
---
2+
layout: root
3+
---
4+
<head>
5+
<meta charset="utf-8">
186

7+
{% if page.title != null %}
198
{% capture homepage_path %}/{{ page.lang }}/{% endcapture %}
209
{% if page.url == homepage_path %}
21-
{% assign meta_description = "A Programmer's Best Friend" %}
22-
{% elsif page.description %}
23-
{% assign meta_description = page.description %}
24-
{% elsif page.excerpt %}
25-
{% assign meta_description = page.excerpt | strip_html | strip_newlines | truncate: 160 %}
10+
<title>{{ page.title }}</title>
2611
{% else %}
27-
{% assign meta_description = page.content | strip_html | strip_newlines | truncate: 160 %}
12+
<title>{{ page.title }} | Ruby</title>
2813
{% endif %}
29-
30-
{% if page.title %}
31-
{% if page.url == homepage_path %}
32-
{% assign meta_title = page.title %}
33-
{% else %}
34-
{% assign meta_title = page.title | append: " | Ruby" %}
35-
{% endif %}
14+
{% else %}
15+
<title>Ruby Programming Language</title>
16+
{% endif %}
17+
18+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
19+
20+
{% capture homepage_path %}/{{ page.lang }}/{% endcapture %}
21+
{% if page.url == homepage_path %}
22+
{% assign meta_description = "A Programmer's Best Friend" %}
23+
{% elsif page.description %}
24+
{% assign meta_description = page.description %}
25+
{% elsif page.excerpt %}
26+
{% assign meta_description = page.excerpt | strip_html | strip_newlines | truncate: 160 %}
27+
{% else %}
28+
{% assign meta_description = page.content | strip_html | strip_newlines | truncate: 160 %}
29+
{% endif %}
30+
31+
{% if page.title %}
32+
{% if page.url == homepage_path %}
33+
{% assign meta_title = page.title %}
3634
{% else %}
37-
{% assign meta_title = "Ruby Programming Language" %}
35+
{% assign meta_title = page.title | append: " | Ruby" %}
3836
{% endif %}
39-
40-
<meta name="description" content="{{ meta_description }}">
41-
42-
<!-- Open Graph / Facebook -->
43-
<meta property="og:type" content="website">
44-
<meta property="og:url" content="{{ site.url }}{{ page.url | replace: 'index.html', '' }}">
45-
<meta property="og:title" content="{{ meta_title }}">
46-
<meta property="og:description" content="{{ meta_description }}">
47-
<meta property="og:image" content="{{ site.url }}/images/og-image.png">
48-
<meta property="og:site_name" content="Ruby Programming Language">
49-
<meta property="og:locale" content="{{ page.lang | default: 'en' }}">
50-
51-
<!-- Twitter Card -->
52-
<meta name="twitter:card" content="summary">
53-
<meta name="twitter:url" content="{{ site.url }}{{ page.url | replace: 'index.html', '' }}">
54-
<meta name="twitter:title" content="{{ meta_title }}">
55-
<meta name="twitter:description" content="{{ meta_description }}">
56-
<meta name="twitter:image" content="{{ site.url }}/images/twitter-card-square.png">
57-
58-
<!-- Schema.org -->
59-
<meta itemprop="name" content="{{ meta_title }}">
60-
<meta itemprop="description" content="{{ meta_description }}">
61-
<meta itemprop="image" content="{{ site.url }}/images/og-image.png">
62-
63-
<link rel="stylesheet" type="text/css" href="/stylesheets/compiled.css">
64-
<link rel="preconnect" href="https://fonts.googleapis.com">
65-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
66-
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;700;800&family=Rock+Salt&family=Material+Icons&family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],200..700,0,0&display=swap" rel="stylesheet">
67-
<link rel="canonical" href="{{ site.url }}{{ page.url | replace: 'index.html', '' }}">
68-
69-
<link rel="icon" href="/favicon.ico" sizes="32x32">
70-
<link rel="icon" href="/images/icon-192.png" type="image/png" sizes="192x192">
71-
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
72-
{% include rss_discovery.html %}
73-
74-
<!-- Apply theme immediately to prevent flash -->
75-
<script>
76-
(function() {
77-
const theme = localStorage.getItem('theme-preference') || 'auto';
78-
if (theme === 'dark') {
79-
document.documentElement.classList.add('dark');
80-
} else if (theme === 'light') {
81-
document.documentElement.classList.remove('dark');
82-
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
83-
document.documentElement.classList.add('dark');
84-
}
85-
})();
86-
</script>
87-
88-
<!-- Detect icon font loading to prevent FOUT -->
89-
<script>
90-
(function() {
91-
if (document.fonts && document.fonts.load) {
92-
document.fonts.load('24px "Material Symbols Rounded"').then(function() {
93-
document.documentElement.classList.add('fonts-loaded');
94-
}).catch(function() {
95-
document.documentElement.classList.add('fonts-loaded');
96-
});
97-
} else {
37+
{% else %}
38+
{% assign meta_title = "Ruby Programming Language" %}
39+
{% endif %}
40+
41+
<meta name="description" content="{{ meta_description }}">
42+
43+
<!-- Open Graph / Facebook -->
44+
<meta property="og:type" content="website">
45+
<meta property="og:url" content="{{ site.url }}{{ page.url | replace: 'index.html', '' }}">
46+
<meta property="og:title" content="{{ meta_title }}">
47+
<meta property="og:description" content="{{ meta_description }}">
48+
<meta property="og:image" content="{{ site.url }}/images/og-image.png">
49+
<meta property="og:site_name" content="Ruby Programming Language">
50+
<meta property="og:locale" content="{{ page.lang | default: 'en' }}">
51+
52+
<!-- Twitter Card -->
53+
<meta name="twitter:card" content="summary">
54+
<meta name="twitter:url" content="{{ site.url }}{{ page.url | replace: 'index.html', '' }}">
55+
<meta name="twitter:title" content="{{ meta_title }}">
56+
<meta name="twitter:description" content="{{ meta_description }}">
57+
<meta name="twitter:image" content="{{ site.url }}/images/twitter-card-square.png">
58+
59+
<!-- Schema.org -->
60+
<meta itemprop="name" content="{{ meta_title }}">
61+
<meta itemprop="description" content="{{ meta_description }}">
62+
<meta itemprop="image" content="{{ site.url }}/images/og-image.png">
63+
64+
<link rel="stylesheet" type="text/css" href="/stylesheets/compiled.css">
65+
<link rel="preconnect" href="https://fonts.googleapis.com">
66+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
67+
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected]&family=Noto+Sans+KR:[email protected]&family=Noto+Sans+SC:[email protected]&family=Noto+Sans+TC:[email protected]&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap&family=Rock+Salt&family=Material+Icons&family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],200..700,0,0&display=swap" rel="stylesheet">
68+
<link rel="canonical" href="{{ site.url }}{{ page.url | replace: 'index.html', '' }}">
69+
70+
<link rel="icon" href="/favicon.ico" sizes="32x32">
71+
<link rel="icon" href="/images/icon-192.png" type="image/png" sizes="192x192">
72+
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
73+
{% include rss_discovery.html %}
74+
75+
<!-- Apply theme immediately to prevent flash -->
76+
<script>
77+
(function() {
78+
const theme = localStorage.getItem('theme-preference') || 'auto';
79+
if (theme === 'dark') {
80+
document.documentElement.classList.add('dark');
81+
} else if (theme === 'light') {
82+
document.documentElement.classList.remove('dark');
83+
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
84+
document.documentElement.classList.add('dark');
85+
}
86+
})();
87+
</script>
88+
89+
<!-- Detect icon font loading to prevent FOUT -->
90+
<script>
91+
(function() {
92+
if (document.fonts && document.fonts.load) {
93+
document.fonts.load('24px "Material Symbols Rounded"').then(function() {
9894
document.documentElement.classList.add('fonts-loaded');
99-
}
100-
})();
101-
</script>
102-
103-
<script type="text/javascript" src="/javascripts/navigation-toggle.js" defer></script>
104-
<script type="text/javascript" src="/javascripts/header-navigation.js" defer></script>
105-
<script type="text/javascript" src="/javascripts/toc.js" defer></script>
106-
<script type="text/javascript" src="/javascripts/theme-toggle.js" defer></script>
107-
{% if layout.javascript != null %}
108-
{% for javascript in layout.javascript %}
109-
<script type="text/javascript" src="/javascripts/{{ javascript }}.js"></script>
110-
{% endfor %}
111-
{% endif %}
112-
</head>
113-
114-
{% capture homepage_url %}/{{ page.lang }}/{% endcapture %}
115-
116-
<body{% if page.url == homepage_url %} id="home-page-layout"{% endif %}>
117-
{% include header.html %}
118-
119-
<div id="page" class="pt-20">
120-
{{ content }}
121-
</div>
122-
123-
{% include footer.html %}
124-
</body>
125-
</html>
95+
}).catch(function() {
96+
document.documentElement.classList.add('fonts-loaded');
97+
});
98+
} else {
99+
document.documentElement.classList.add('fonts-loaded');
100+
}
101+
})();
102+
</script>
103+
104+
<script type="text/javascript" src="/javascripts/navigation-toggle.js" defer></script>
105+
<script type="text/javascript" src="/javascripts/header-navigation.js" defer></script>
106+
<script type="text/javascript" src="/javascripts/toc.js" defer></script>
107+
<script type="text/javascript" src="/javascripts/theme-toggle.js" defer></script>
108+
{% if layout.javascript != null %}
109+
{% for javascript in layout.javascript %}
110+
<script type="text/javascript" src="/javascripts/{{ javascript }}.js"></script>
111+
{% endfor %}
112+
{% endif %}
113+
</head>
114+
115+
{% capture homepage_url %}/{{ page.lang }}/{% endcapture %}
116+
117+
<body{% if page.url == homepage_url %} id="home-page-layout"{% endif %}>
118+
{% include header.html %}
119+
120+
<div id="page" class="pt-20">
121+
{{ content }}
122+
</div>
123+
124+
{% include footer.html %}
125+
</body>

0 commit comments

Comments
 (0)