Skip to content

Commit 9a289bf

Browse files
ryudoawaruclaude
ryudoawaru
and
claude
committed
Refactor footer section into separate component and configuration
Extracted footer HTML from default layout to dedicated include file and moved footer configuration from _config.yml to separate _data/footer.yml file. Improved social links structure with array format for better maintainability and reusability. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 43ac24f commit 9a289bf

4 files changed

Lines changed: 203 additions & 198 deletions

File tree

‎_config.yml‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,3 @@ links:
2121
conf:
2222
root_url: 'https://rubyconf.tw'
2323
about_us: 'https://ruby.tw'
24-
footer:
25-
title: "©Rubyconf Taiwan 2025"
26-
coc:
27-
title: Code of Conduct
28-
team_member:
29-
title: Team Member
30-
rubytw:
31-
title: Ruby Taiwan
32-
href: https://ruby.tw
33-
staffs:
34-
-
35-
name: Mu-Fan Teng
36-
avatar: /assets/images/ryudoawaru.jpg
37-
x_id: ryudoawaru
38-
facebook: https://www.facebook.com/ryudoawaru
39-
ig_id: ryudoawaru
40-
github_id: ryudoawaru
41-
-
42-
name: Xillinna
43-
avatar: /assets/images/Xillinna.jpg
44-
ig_id: xillinna.daily

‎_data/footer.yml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
title: "©Rubyconf Taiwan 2025"
2+
3+
coc:
4+
title: Code of Conduct
5+
6+
team_member:
7+
title: Team Member
8+
9+
rubytw:
10+
title: Ruby Taiwan
11+
href: https://ruby.tw
12+
13+
social_links:
14+
- name: Twitter
15+
href: https://x.com/rubyconftw
16+
icon: twitter
17+
- name: Facebook
18+
href: https://www.facebook.com/rubyconftw
19+
icon: facebook
20+
- name: Instagram
21+
href: https://www.instagram.com/rubytaiwan2008
22+
icon: instagram
23+
24+
staffs:
25+
- name: Mu-Fan Teng
26+
avatar: /assets/images/ryudoawaru.jpg
27+
x_id: ryudoawaru
28+
facebook: https://www.facebook.com/ryudoawaru
29+
ig_id: ryudoawaru
30+
github_id: ryudoawaru
31+
- name: Xillinna
32+
avatar: /assets/images/Xillinna.jpg
33+
ig_id: xillinna.daily

‎_includes/footer.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<footer
2+
x-data="{ modal_id: 0 }"
3+
x-cloak
4+
class="relative bg-gray-900 text-blue-light py-8"
5+
>
6+
<div class="container mx-auto px-4 space-y-4">
7+
<div
8+
class="flex justify-center space-x-8 mb-6 border-b border-blue-light text-blue-light font-bold pb-6"
9+
>
10+
<button
11+
@click="modal_id=1"
12+
class="text-blue-light hover:text-blue-light-active cursor-pointer"
13+
>
14+
{{ site.data.footer.coc.title }}
15+
</button>
16+
17+
<button
18+
@click="modal_id=2"
19+
class="text-blue-light hover:text-blue-light-active cursor-pointer"
20+
>
21+
{{ site.data.footer.team_member.title }}
22+
</button>
23+
<a
24+
href="{{ site.data.footer.rubytw.href}}"
25+
target="_blank"
26+
class="text-blue-light hover:text-blue-light-active"
27+
>{{ site.data.footer.rubytw.title }}</a
28+
>
29+
</div>
30+
<div class="flex justify-center space-x-4">
31+
{% for social in site.data.footer.social_links %}
32+
<a href="{{ social.href }}" target="_blank">
33+
<div class="w-7 h-7 text-blue-light">
34+
{% include icons/{{ social.icon }}.svg %}
35+
</div>
36+
</a>
37+
{% endfor %}
38+
</div>
39+
<div class="font-light text-xs text-center text-blue-light">
40+
{{ site.data.footer.title }}
41+
</div>
42+
</div>
43+
<!-- code of conduct modal -->
44+
<div
45+
x-show="modal_id == 1"
46+
aria-labelledby="modal-title"
47+
role="dialog"
48+
aria-modal="true"
49+
>
50+
<div class="z-50 fixed inset-0 w-full h-full pt-24 transition-opacity">
51+
<div
52+
@click="modal_id=0"
53+
class="absolute top-0 w-full h-full bg-black/50"
54+
></div>
55+
<div
56+
class="absolute left-1/2 -translate-x-1/2 overflow-y-auto top-28 rounded-xl p-4 md:p-8 pr-6 w-[90vw] md:w-[60rem] max-h-[70vh] md:max-h-[80vh] bg-white text-left shadow-xl transition-all [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:pr-1 [&::-webkit-scrollbar-track]:rounded-r-xl [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:rounded-xl [&::-webkit-scrollbar-thumb]:bg-gray-300"
57+
>
58+
<div class="relative w-full p-4 bg-white">
59+
<div class="flex flex-col items-center">
60+
<h3 class="text-3xl text-center font-bold text-red-normal">
61+
{{ site.data.footer.coc.title }}
62+
</h3>
63+
<div class="mt-4 text-green-normal space-y-4">
64+
{% capture coc_content %}{% include posts/coc.md %}{% endcapture %}
65+
{{ coc_content | markdownify }}
66+
</div>
67+
<button
68+
@click="modal_id=0"
69+
class="mx-auto mt-4 border rounded px-3 py-2 text-lg bg-green-normal text-blue-light hover:bg-green-normal-active cursor-pointer"
70+
>
71+
CLOSE
72+
</button>
73+
</div>
74+
<button
75+
@click="modal_id=0"
76+
class="absolute right-4 top-4 text-2xl cursor-pointer text-green-normal hover:text-green-normal-active"
77+
>
78+
{% include icons/xMark.svg %}
79+
</button>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
<!-- team member modal -->
85+
<div
86+
x-show="modal_id == 2"
87+
aria-labelledby="modal-title"
88+
role="dialog"
89+
aria-modal="true"
90+
>
91+
<div class="z-50 fixed inset-0 w-full h-full pt-24 transition-opacity">
92+
<div
93+
@click="modal_id=0"
94+
class="absolute top-0 w-full h-full bg-black/50"
95+
></div>
96+
<div
97+
class="absolute left-1/2 -translate-x-1/2 overflow-y-auto top-28 rounded-xl p-4 md:p-8 pr-6 w-[90vw] md:w-[60rem] max-h-[70vh] md:max-h-[80vh] bg-white text-left shadow-xl transition-all [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:pr-1 [&::-webkit-scrollbar-track]:rounded-r-xl [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:rounded-xl [&::-webkit-scrollbar-thumb]:bg-gray-300"
98+
>
99+
<div class="relative w-full p-4 bg-white">
100+
<div
101+
class="grid grid-cols-1 md:grid-cols-3 gap-x-4 justify-center items-center text-center"
102+
>
103+
{% for staff in site.data.footer.staffs %}
104+
<div class="flex flex-col items-center gap-4">
105+
<div class="w-45 h-45 border rounded-full relative">
106+
<div
107+
class="absolute inset-1 rounded-full border border-white z-10"
108+
></div>
109+
<img
110+
class="w-full h-full object-cover rounded-full relative"
111+
src="{{staff.avatar}}"
112+
alt="{{staff.name}}"
113+
/>
114+
</div>
115+
<span class="mt-2 text-lg text-blue-normal font-bold"
116+
>{{staff.name}}</span
117+
>
118+
<div class="flex gap-x-2">
119+
{% if staff.github_id %}
120+
<a
121+
href="https://github.com/{{staff.github_id}}"
122+
target="_blank"
123+
class="text-blue-normal w-7 h-7"
124+
>
125+
{% include icons/github.svg %}
126+
</a>
127+
{% endif %}
128+
{% if staff.x_id %}
129+
<a
130+
href="https://x.com/{{staff.x_id}}"
131+
target="_blank"
132+
class="text-blue-normal w-7 h-7"
133+
>
134+
{% include icons/twitter.svg %}
135+
</a>
136+
{% endif %}
137+
{% if staff.facebook %}
138+
<a
139+
href="{{staff.facebook}}"
140+
target="_blank"
141+
class="text-blue-normal w-7 h-7"
142+
>
143+
{% include icons/facebook.svg %}
144+
</a>
145+
{% endif %}
146+
{% if staff.ig_id %}
147+
<a
148+
href="https://www.instagram.com/{{staff.ig_id}}"
149+
target="_blank"
150+
class="text-blue-normal w-7 h-7"
151+
>
152+
{% include icons/instagram.svg %}
153+
</a>
154+
{% endif %}
155+
</div>
156+
</div>
157+
{% endfor %}
158+
</div>
159+
<button
160+
@click="modal_id=0"
161+
class="absolute right-4 top-4 text-2xl cursor-pointer text-green-normal hover:text-green-normal-active"
162+
>
163+
{% include icons/xMark.svg %}
164+
</button>
165+
</div>
166+
</div>
167+
</div>
168+
</div>
169+
</footer>

0 commit comments

Comments
 (0)