1+ {% extends "base.html" %}
2+
3+ {% block title %}
4+ {{ page.title }} - {{ config.title }}
5+ {% endblock title %}
6+
7+ {% block main %}
8+ < style >
9+ .manpage-container {
10+ max-width : 1200px ;
11+ margin : 0 auto;
12+ padding : 20px ;
13+ }
14+
15+ .manpage-header {
16+ margin-bottom : 30px ;
17+ }
18+
19+ .manpage-header h1 {
20+ color : # 333 ;
21+ margin-bottom : 10px ;
22+ }
23+
24+ .manpage-description {
25+ color : # 666 ;
26+ line-height : 1.6 ;
27+ margin-bottom : 30px ;
28+ }
29+
30+ .manpage-grid {
31+ display : grid;
32+ grid-template-columns : repeat (auto-fill, minmax (180px , 1fr ));
33+ gap : 15px ;
34+ margin-top : 30px ;
35+ }
36+
37+ .manpage-link {
38+ display : block;
39+ padding : 12px ;
40+ background : # f5f5f5 ;
41+ border : 1px solid # ddd ;
42+ border-radius : 5px ;
43+ text-decoration : none;
44+ color : # 333 ;
45+ transition : all 0.3s ease;
46+ text-align : center;
47+ }
48+
49+ .manpage-link : hover {
50+ background : # 007acc ;
51+ color : white;
52+ border-color : # 007acc ;
53+ transform : translateY (-2px );
54+ box-shadow : 0 2px 5px rgba (0 , 0 , 0 , 0.2 );
55+ }
56+
57+ .manpage-name {
58+ font-weight : bold;
59+ font-family : monospace;
60+ font-size : 1.1em ;
61+ }
62+
63+ .breadcrumb {
64+ margin-bottom : 20px ;
65+ }
66+
67+ .breadcrumb a {
68+ color : # 007acc ;
69+ text-decoration : none;
70+ }
71+
72+ .breadcrumb a : hover {
73+ text-decoration : underline;
74+ }
75+
76+ @media (prefers-color-scheme : dark) {
77+ .manpage-header h1 {
78+ color : # e0e0e0 ;
79+ }
80+
81+ .manpage-link {
82+ background : # 2a2a2a ;
83+ border-color : # 444 ;
84+ color : # e0e0e0 ;
85+ }
86+
87+ .manpage-link : hover {
88+ background : # 007acc ;
89+ color : white;
90+ border-color : # 007acc ;
91+ }
92+ }
93+ </ style >
94+
95+ < div class ="manpage-container ">
96+ < div class ="breadcrumb ">
97+ < a href ="/ "> Home</ a > /
98+ < a href ="/{{ page.extra.project | default(value= "coreutils ") }}"> {{ page.extra.project | default(value="Coreutils") | capitalize }}</ a > /
99+ < span > Manual Pages</ span >
100+ </ div >
101+
102+ < div class ="manpage-header ">
103+ < h1 > {{ page.title }}</ h1 >
104+ < p class ="manpage-description ">
105+ {{ page.description | default(value="Complete manual pages for all uutils commands. Click on any command below to view its full documentation.") }}
106+ </ p >
107+ </ div >
108+
109+ < div class ="manpage-grid ">
110+ {% if page.extra.manpages %}
111+ {% for manpage in page.extra.manpages %}
112+ < a href ="{{ manpage.name }}.html " class ="manpage-link ">
113+ < span class ="manpage-name "> {{ manpage.name }}</ span >
114+ </ a >
115+ {% endfor %}
116+ {% else %}
117+ <!-- This will be populated dynamically by the build process -->
118+ < div id ="manpage-list "> </ div >
119+ {% endif %}
120+ </ div >
121+ </ div >
122+
123+ < script >
124+ // If manpages weren't provided in the template data,
125+ // try to load them dynamically from the current directory
126+ if ( ! document . querySelector ( '.manpage-grid a' ) ) {
127+ fetch ( './manpages.json' )
128+ . then ( response => response . json ( ) )
129+ . then ( manpages => {
130+ const grid = document . querySelector ( '.manpage-grid' ) ;
131+ const listDiv = document . getElementById ( 'manpage-list' ) ;
132+ if ( listDiv ) {
133+ listDiv . remove ( ) ;
134+ }
135+
136+ manpages . forEach ( name => {
137+ const link = document . createElement ( 'a' ) ;
138+ link . href = `${ name } .html` ;
139+ link . className = 'manpage-link' ;
140+ link . innerHTML = `<span class="manpage-name">${ name } </span>` ;
141+ grid . appendChild ( link ) ;
142+ } ) ;
143+ } )
144+ . catch ( err => console . error ( 'Failed to load manpages list:' , err ) ) ;
145+ }
146+ </ script >
147+ {% endblock main %}
0 commit comments