-
Notifications
You must be signed in to change notification settings - Fork 0
/
generate_index.py
154 lines (139 loc) · 5.65 KB
/
generate_index.py
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
import os
import re
def sort_files(files):
def key_func(file):
# Split the file name into a list of integers and strings
parts = re.split(r'(\d+)', file)
# Convert the integers to actual integers
parts = [int(part) if part.isdigit() else part for part in parts]
return parts
# Sort the files using the key function
return sorted(files, key=key_func)
def generate_html(base_dir):
html_content = '''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slokas Recitations by Jagadguru Shri Kripalu Maharaj</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }
.container { max-width: 1200px; margin: 0 auto; padding: 20px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
h1 { text-align: center; color: #4B0082; }
.category { margin-bottom: 20px; }
.category h2 {
cursor: pointer;
background-color: #f0f0f0;
color: #404040;
padding: 10px;
border-radius: 5px;
margin: 0;
font-size: 1.2em;
display: flex;
align-items: center;
justify-content: flex-start;
}
.category h2::before {
content: '▶'; /* Dropdown arrow */
margin-right: 10px;
font-size: 1.2em;
transition: transform 0.3s;
}
.category.open h2::before {
content: '▼'; /* Down arrow icon when expanded */
transform: rotate(90deg);
}
.files {
display: none;
margin-left: 20px;
padding: 10px;
border-left: 2px solid #007bff;
}
.files.show {
display: block;
}
.files div { margin-bottom: 10px; }
audio { width: 100%; margin-bottom: 10px; }
.file-item { display: flex; align-items: center; gap: 2px; }
.file-item a {
text-decoration: none;
color: #007bff;
font-weight: bold;
white-space: nowrap; /* Prevent wrapping */
overflow: auto-x; /* Hide excess content */
text-overflow: ellipsis; /* Add ellipsis */
width: calc(40% - 50px); /* Adjust width as needed */
}
.file-item a:hover { text-decoration: underline; }
</style>
</head>
<body>
<div class="container">
<h1>Slokas Recitations by Kripalu Maharaj</h1>
<div style="text-align: center;">
<img src="cover.jpg" alt="Kripalu Maharaj" style="width: 20%;">
</div>
'''
# Generate HTML for directory and files
for root, dirs, files in os.walk(base_dir):
dirs[:] = [d for d in sorted(dirs) if d not in ('.git', '.', '.idea')]
if not files:
continue
category = os.path.relpath(root, base_dir)
html_content += f'<div class="category">\n'
html_content += f' <h2>{category}</h2>\n'
html_content += f' <div id="{category.replace(os.sep, "_")}" class="files">\n'
for file in sort_files(files):
if file.endswith('.mp3'):
file_path = os.path.join(category, file)
html_content += f' <div class="file-item">\n'
html_content += f' <a href="{file_path}" target="_blank">{file}</a>\n'
html_content += f' <audio controls preload="none">\n'
html_content += f' <source src="{file_path}" type="audio/mpeg">\n'
html_content += f' Your browser does not support the audio element.\n'
html_content += f' </audio>\n'
html_content += f' </div>\n'
html_content += ' </div>\n'
html_content += '</div>\n'
html_content += '''
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const categories = document.querySelectorAll('.category h2');
categories.forEach(header => {
header.addEventListener('click', function() {
const filesDiv = this.nextElementSibling;
filesDiv.classList.toggle('show');
this.parentElement.classList.toggle('open');
});
});
// Lazy loading
const files = document.querySelectorAll('.files');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const audioElements = entry.target.querySelectorAll('audio');
audioElements.forEach(audio => {
if (audio.preload !== 'auto') {
audio.preload = 'auto';
}
});
observer.unobserve(entry.target);
}
});
}, {
rootMargin: '100px'
});
files.forEach(fileContainer => {
observer.observe(fileContainer);
});
});
</script>
</body>
</html>
'''
with open('index.html', 'w') as file:
file.write(html_content)
if __name__ == "__main__":
generate_html('.')