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
|
{{% extends "html-template.html" %}}
{{%- macro render_policy_specific_content(of_what) %}}
{{% for policy, fields in of_what.policy_specific_content.items() %}}
{{% call normal_content(policy ~ "–related", 3 ) %}}
{{% for field, text in fields.items() %}}
<h4>{{{ field }}}</h4>
{{{ text }}}
{{% endfor %}}
{{% endcall %}}
{{% endfor %}}
{{% endmacro %}}
{{%- macro collapsible_content(heading, level) %}}
<button class="collapsible"><h{{{ level }}}>{{{ heading }}}</h{{{ level }}}></button>
<div class="content">
{{{ caller() }}}
</div>
{{% endmacro %}}
{{%- macro normal_content(heading, level) %}}
<h{{{ level }}}>{{{ heading }}}</h{{{ level }}}>
<div>
{{{ caller() }}}
</div>
{{% endmacro %}}
{{%- macro minor_section(title, content, collapsible) %}}
{{% if content %}}
{{% if collapsible %}}
{{% call collapsible_content(title, 3 ) %}}
{{{ content }}}
{{% endcall %}}
{{% else %}}
{{% call normal_content(title, 3 ) %}}
{{{ content }}}
{{% endcall %}}
{{% endif %}}
{{% endif %}}
{{% endmacro %}}
{{%- block head %}}
<link rel="stylesheet" href="highlight.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>
{{% endblock %}}
{{%- block body %}}
{{{ super() }}}
<h1>{{{ rule.title }}}</h1>
<div class="rule">
<div class="prose">
<h2>Prose</h2>
{{{ minor_section("Description", prose.description, collapsible=false) -}}}
{{{ minor_section("Rationale", prose.rationale, collapsible=false) -}}}
{{{ render_policy_specific_content(prose) -}}}
</div>
{{% if checks.contains_something() %}}
<div class="checks">
<h2>Checks</h2>
{{{ minor_section("OVAL", checks.oval, collapsible=true) -}}}
{{{ render_policy_specific_content(checks) -}}}
</div>
{{% endif %}}
{{%- if fixes.contains_something() %}}
<div class="checks">
<h2>Fixes</h2>
{{{ minor_section("Bash", fixes.bash, collapsible=true) -}}}
{{{ minor_section("Ansible", fixes.ansible, collapsible=true) -}}}
{{{ render_policy_specific_content(fixes) -}}}
</div>
{{% endif -%}}
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
{{% endblock %}}
|
