|
1 | 1 | <!DOCTYPE html>
|
2 | 2 | <html lang="en">
|
3 |
| - <head> |
4 |
| - <meta charset="utf-8" /> |
5 |
| - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
6 |
| - <title><%= $filename %></title> |
7 | 3 |
|
8 |
| - <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" /> |
9 |
| - <script |
10 |
| - src="https://cdn.jsdelivr.net/npm/@openwebwork/pg-codemirror-editor@0.0.1-beta.28/dist/pg-codemirror-editor.js" |
11 |
| - defer |
12 |
| - ></script> |
13 |
| - <link rel="stylesheet" href="<%= $pg_doc_home %>/sample-problem.css" /> |
14 |
| - </head> |
| 4 | +<head> |
| 5 | + <meta charset="utf-8"> |
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 7 | + <title><%= $filename %></title> |
15 | 8 |
|
16 |
| - % # Default explanations % my $default = { % preamble => 'These standard macros need to be loaded.', % setup => |
17 |
| - 'This perl code sets up the problem.', % statement => 'This is the problem statement in PGML.', % answer => 'This is |
18 |
| - used for answer checking.', % solution => 'A solution should be provided here.' % }; |
| 9 | + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> |
| 10 | + <script |
| 11 | + src="https://cdn.jsdelivr.net/npm/@openwebwork/pg-codemirror-editor@0.0.5/dist/pg-codemirror-editor.js" |
| 12 | + defer></script> |
| 13 | + <link rel="stylesheet" href="<%= $pg_doc_home %>/sample-problem.css"> |
| 14 | +</head> |
19 | 15 |
|
20 |
| - <body> |
21 |
| - <div class="container-fluid p-3"> |
22 |
| - <div class="row"> |
23 |
| - <div class="col"> |
24 |
| - <h1><%= $name %></h1> |
25 |
| - <p><%= $description %></p> |
26 |
| - </div> |
27 |
| - <div class="col text-end"> |
28 |
| - <a href="<%= $pg_doc_home =%>/../">Return to the PG docs home</a> |
29 |
| - </div> |
| 16 | +% # Default explanations |
| 17 | +% my $default = { |
| 18 | + % preamble => 'These standard macros need to be loaded.', |
| 19 | + % setup => 'This perl code sets up the problem.', |
| 20 | + % statement => 'This is the problem statement in PGML.', |
| 21 | + % answer => 'This is used for answer checking.', |
| 22 | + % solution => 'A solution should be provided here.' |
| 23 | +% }; |
| 24 | + |
| 25 | +<body> |
| 26 | + <div class="container-fluid p-3"> |
| 27 | + <div class="row"> |
| 28 | + <div class="col"> |
| 29 | + <h1><%= $name %></h1> |
| 30 | + <p><%= $description %></p> |
30 | 31 | </div>
|
31 |
| - <div class="row"> |
32 |
| - <div class="col"> |
33 |
| - <h2>Complete Code</h2> |
34 |
| - <p>Download file: <a href="<%= $filename =%>"><%= $filename =%></a></p> |
35 |
| - </div> |
36 |
| - % if (scalar(@{$metadata->{$filename}{macros}}) > 0 ) { |
| 32 | + <div class="col text-end"> |
| 33 | + <a href="<%= $pg_doc_home =%>/../">Return to the PG docs home</a> |
| 34 | + </div> |
| 35 | + </div> |
| 36 | + <div class="row"> |
| 37 | + <div class="col"> |
| 38 | + <h2>Complete Code</h2> |
| 39 | + <p>Download file: <a href="<%= $filename =%>"><%= $filename =%></a></p> |
| 40 | + </div> |
| 41 | + % if (scalar(@{$metadata->{$filename}{macros}}) > 0 ) { |
37 | 42 | <div class="col">
|
38 | 43 | <h2>POD for Macro Files</h2>
|
39 | 44 | <ul>
|
40 |
| - % for my $macro (@{$metadata->{$filename}{macros}}) { % if ($macro_locations->{$macro}) { |
41 |
| - <li><a href="<%= $pod_root %>/<%= $macro_locations->{$macro} %>"><%= $macro =%></a></li> |
42 |
| - % } else { |
43 |
| - <li class="text-danger"><%= $macro %></li> |
44 |
| - % } % } |
45 |
| - </ul> |
46 |
| - </div> |
47 |
| - %} % if ($metadata->{$filename}{related} && scalar(@{$metadata->{$filename}{related}}) > 0) { |
48 |
| - <div class="col"> |
49 |
| - <h2>See Also</h2> |
50 |
| - <ul> |
51 |
| - % for (@{$metadata->{$filename}{related}}) { |
52 |
| - <li> |
53 |
| - <a href="<%= $pg_doc_home =%>/<%= $metadata->{$_}{dir} =%>/<%= $_ =~ s/.pg$//r =%>.html"> |
54 |
| - <%= $metadata->{$_}{name} =%></a |
55 |
| - > |
56 |
| - </li> |
| 45 | + % for my $macro (@{$metadata->{$filename}{macros}}) { |
| 46 | + % if ($macro_locations->{$macro}) { |
| 47 | + <li><a href="<%= $pod_root %>/<%= $macro_locations->{$macro} %>"><%= $macro =%></a></li> |
| 48 | + % } else { |
| 49 | + <li class="text-danger"><%= $macro %></li> |
| 50 | + % } |
57 | 51 | % }
|
58 | 52 | </ul>
|
59 | 53 | </div>
|
60 | 54 | % }
|
| 55 | + % if ($metadata->{$filename}{related} && scalar(@{$metadata->{$filename}{related}}) > 0) { |
| 56 | + <div class="col"> |
| 57 | + <h2>See Also</h2> |
| 58 | + <ul> |
| 59 | + % for (@{$metadata->{$filename}{related}}) { |
| 60 | + <li> |
| 61 | + <a href="<%= $pg_doc_home =%>/<%= $metadata->{$_}{dir} =%>/<%= $_ =~ s/.pg$//r =%>.html"> |
| 62 | + <%= $metadata->{$_}{name} =%> |
| 63 | + </a> |
| 64 | + </li> |
| 65 | + % } |
| 66 | + </ul> |
61 | 67 | </div>
|
62 |
| - <div class="row"> |
63 |
| - <div class="col text-center"><h2 class="fw-bold fs-3">PG problem file</h2></div> |
64 |
| - <div class="col text-center"><h2 class="fw-bold fs-3">Explanation</h2></div> |
65 |
| - </div> |
66 |
| - % for (@$blocks) { |
| 68 | + % } |
| 69 | + </div> |
| 70 | + <div class="row"> |
| 71 | + <div class="col text-center"><h2 class="fw-bold fs-3">PG problem file</h2></div> |
| 72 | + <div class="col text-center"><h2 class="fw-bold fs-3">Explanation</h2></div> |
| 73 | + </div> |
| 74 | + % for (@$blocks) { |
67 | 75 | <div class="row">
|
68 | 76 | <div class="col-sm-12 col-md-6 order-md-first order-last p-0 position-relative overflow-x-hidden">
|
69 |
| - <button |
70 |
| - class="clipboard-btn btn btn-sm btn-secondary position-absolute top-0 end-0 me-1 mt-1 z-1" |
71 |
| - type="button" |
72 |
| - data-code="<%== $_->{code} %>" |
73 |
| - aria-label="copy to clipboard" |
74 |
| - > |
75 |
| - <svg |
76 |
| - xmlns="http://www.w3.org/2000/svg" |
77 |
| - width="16" |
78 |
| - height="16" |
79 |
| - fill="currentColor" |
80 |
| - class="bi bi-clipboard-fill" |
81 |
| - viewBox="0 0 16 16" |
82 |
| - > |
83 |
| - <path |
84 |
| - fill-rule="evenodd" |
85 |
| - d="M10 1.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1Zm-5 0A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5v1A1.5 1.5 0 0 1 9.5 4h-3A1.5 1.5 0 0 1 5 2.5v-1Zm-2 0h1v1A2.5 2.5 0 0 0 6.5 5h3A2.5 2.5 0 0 0 12 2.5v-1h1a2 2 0 0 1 2 2V14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3.5a2 2 0 0 1 2-2Z" |
86 |
| - /> |
| 77 | + <button class="clipboard-btn btn btn-sm btn-secondary position-absolute top-0 end-0 me-1 mt-1 z-1" |
| 78 | + type="button" data-code="<%== $_->{code} %>" aria-label="copy to clipboard"> |
| 79 | + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" |
| 80 | + class="bi bi-clipboard-fill" viewBox="0 0 16 16"> |
| 81 | + <path fill-rule="evenodd" d="M10 1.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1Zm-5 0A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5v1A1.5 1.5 0 0 1 9.5 4h-3A1.5 1.5 0 0 1 5 2.5v-1Zm-2 0h1v1A2.5 2.5 0 0 0 6.5 5h3A2.5 2.5 0 0 0 12 2.5v-1h1a2 2 0 0 1 2 2V14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3.5a2 2 0 0 1 2-2Z"/> |
87 | 82 | </svg>
|
88 | 83 | </button>
|
89 |
| - <pre class="PGCodeMirror m-0 h-100 p-3 border border-secondary overflow-x-scroll"> |
90 |
| -<%== $_->{code} %> |
91 |
| - </pre |
92 |
| - > |
| 84 | + <pre class="PGCodeMirror m-0 h-100 p-3 border border-secondary overflow-x-scroll"><%== $_->{code} %></pre> |
93 | 85 | </div>
|
94 |
| - <div |
95 |
| - class="explanation <%= $_->{section} %> col-sm-12 col-md-6 order-md-last order-first p-3 border border-dark" |
96 |
| - > |
| 86 | + <div class="explanation <%= $_->{section} %> col-sm-12 col-md-6 order-md-last order-first p-3 border border-dark"> |
97 | 87 | <p><b><%= ucfirst($_->{section}) %></b></p>
|
98 |
| - % if ($_->{doc}) { <%= $_->{doc} %> %} else { <%= $default->{$_->{section}} %> %} |
| 88 | + % if ($_->{doc}) { |
| 89 | + <%= $_->{doc} %> |
| 90 | + % } else { |
| 91 | + <%= $default->{$_->{section}} %> |
| 92 | + % } |
99 | 93 | </div>
|
100 | 94 | </div>
|
101 |
| - % } |
102 |
| - </div> |
| 95 | + % } |
| 96 | + </div> |
| 97 | + |
| 98 | + <script type="module"> |
| 99 | + for (const pre of document.body.querySelectorAll('pre.PGCodeMirror')) { |
| 100 | + PGCodeMirrorEditor.runMode(pre.textContent, pre); |
| 101 | + } |
103 | 102 |
|
104 |
| - <script type="module"> |
105 |
| - for (const pre of document.body.querySelectorAll('pre.PGCodeMirror')) { |
106 |
| - PGCodeMirrorEditor.runMode(pre.textContent, pre); |
107 |
| - } |
| 103 | + for (const btn of document.querySelectorAll('.clipboard-btn')) { |
| 104 | + if (navigator.clipboard) |
| 105 | + btn.addEventListener('click', () => navigator.clipboard.writeText(btn.dataset.code)); |
| 106 | + else btn?.remove(); |
| 107 | + } |
| 108 | + </script> |
| 109 | +</body> |
108 | 110 |
|
109 |
| - for (const btn of document.querySelectorAll('.clipboard-btn')) { |
110 |
| - if (navigator.clipboard) |
111 |
| - btn.addEventListener('click', () => navigator.clipboard.writeText(btn.dataset.code)); |
112 |
| - else btn?.remove(); |
113 |
| - } |
114 |
| - </script> |
115 |
| - </body> |
116 | 111 | </html>
|
0 commit comments