www.ruby-lang.org/_layouts/homepage.html at 732797715fee4e8895389d9b0a439418c62ea8a1 · ruby/www.ruby-lang.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
---
layout: root
---
<head>
  <meta charset="utf-8">

  {% if page.title != null %}
  <title>{{ page.title }}</title>
  {% else %}
  <title>Ruby Programming Language</title>
  {% endif %}

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  {% assign meta_description = "A Programmer's Best Friend" %}
  {% assign meta_title = page.title | default: "Ruby Programming Language" %}

  <meta name="description" content="{{ meta_description }}">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="{{ site.url }}{{ page.url | replace: 'index.html', '' }}">
  <meta property="og:title" content="{{ meta_title }}">
  <meta property="og:description" content="{{ meta_description }}">
  <meta property="og:image" content="{{ site.url }}/images/og-image.png">
  <meta property="og:site_name" content="Ruby Programming Language">
  <meta property="og:locale" content="{{ page.lang | default: 'en' }}">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:url" content="{{ site.url }}{{ page.url | replace: 'index.html', '' }}">
  <meta name="twitter:title" content="{{ meta_title }}">
  <meta name="twitter:description" content="{{ meta_description }}">
  <meta name="twitter:image" content="{{ site.url }}/images/twitter-card-square.png">

  <!-- Schema.org -->
  <meta itemprop="name" content="{{ meta_title }}">
  <meta itemprop="description" content="{{ meta_description }}">
  <meta itemprop="image" content="{{ site.url }}/images/og-image.png">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Material+Icons&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..24,200..700,0,0&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="/stylesheets/main.css">
  <link rel="canonical" href="{{ site.url }}{{ page.url | replace: 'index.html', '' }}">

  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/images/icon-192.png" type="image/png" sizes="192x192">
  <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
  {% include rss_discovery.html %}

  <!-- Apply theme immediately to prevent flash -->
  <script>
    (function() {
      const theme = localStorage.getItem('theme-preference') || 'auto';
      if (theme === 'dark') {
        document.documentElement.classList.add('dark');
      } else if (theme === 'light') {
        document.documentElement.classList.remove('dark');
      } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.documentElement.classList.add('dark');
      }
    })();
  </script>

  <!-- Detect icon font loading to prevent FOUT -->
  <script>
    (function() {
      if (document.fonts && document.fonts.load) {
        document.fonts.load('24px "Material Symbols Rounded"').then(function() {
          document.documentElement.classList.add('fonts-loaded');
        }).catch(function() {
          document.documentElement.classList.add('fonts-loaded');
        });
      } else {
        document.documentElement.classList.add('fonts-loaded');
      }
    })();
  </script>

  <script type="text/javascript" src="/javascripts/navigation-toggle.js" defer></script>
  <script type="text/javascript" src="/javascripts/header-navigation.js" defer></script>
  <script type="text/javascript" src="/javascripts/toc.js" defer></script>
  <script type="text/javascript" src="/javascripts/theme-toggle.js" defer></script>
  <script type="text/javascript" src="/javascripts/try-ruby-examples.js"></script>
  <script type="text/javascript" src="/javascripts/hero-animation.js" defer></script>

  <!-- Fallback styles when JavaScript is disabled -->
  <noscript>
    <style>
      #hero-loader { display: none !important; }
      [data-hero-layer="gem"],
      [data-hero-layer="content"],
      [data-hero-layer="sunburst"],
      [data-hero-layer="illust-main"],
      [data-hero-layer="illust-sub"],
      [data-hero-layer="illust-main"] img { opacity: 1 !important; }
      #try-ruby-section { opacity: 1 !important; max-height: none !important; overflow: visible !important; }
      .try-ruby-content { opacity: 1 !important; }
    </style>
  </noscript>
</head>

<body id="home-page-layout">
  {% include header.html %}

  <div id="page" class="pt-20">
    <!-- Hero and Try Ruby Sections (Full Width) -->
    {{ content }}
  </div>

  {% include footer.html %}
</body>