-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathknowledge.html
151 lines (135 loc) · 6.74 KB
/
knowledge.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Knowledge Management</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#navbar").load("navbar.html");
$("#footer").load("footer.html");
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<!-- Navbar -->
<div id="navbar"></div>
<!-- Title -->
<div>
<h1>Knowledge Management</h1>
</div>
<!-- Team Positions -->
<div class="table table-responsive">
<table class="table table-sm table-striped table-bordered">
<thead>
<tr>
<th scope="row">Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>Eliya</td>
<td>Lead</td>
</tr>
<tr>
<td>Arthur</td>
<td>Assistant</td>
</tr>
<tr>
<td>AJ</td>
<td>Assistant</td>
</tr>
</tbody>
</table>
</div>
<hr class="bg border-1 border-top border-dark">
<!-- Useful Links -->
<h2>Useful Links</h2>
<h5><strong>Development Tools</strong></h5>
<p>These are the standard development tools utilized by our team to develop the website.</p>
<div class="list">
<ul>
<li><a href="https://www.jetbrains.com/idea/download/"><strong>IntelliJ IDEA</strong></a>: Integrated Development Environment (IDE)</li>
<li><a href="https://desktop.github.com/"><strong>Github Desktop</strong></a>: Simplifies Git development workflow</li>
</ul>
</div>
<h5><strong>Additional Resources</strong></h5>
<div class="list">
<ul>
<li><a href="https://getbootstrap.com/docs/5.0/getting-started/introduction/"><strong>Bootstrap 5</strong></a>: The CSS framework this website is built with
<ul>
<li><a href="/DepartmentPages/Knowledge/bootstrap-tips.html">Additional Bootstrap Tips</a></li>
</ul>
</li>
<li><a href="https://www.w3schools.com/html/default.asp"><strong>HTML/CSS tutorial (W3Schools)</strong></a></li>
<li><a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/"><strong>HTML/CSS tutorial (freeCodeCamp)</strong></a></li>
</ul>
</div>
<hr class="bg border-1 border-top border-dark">
<!-- Tutorials -->
<h2>Tutorials</h2>
<h5><strong>Setting up the development environment</strong></h5>
<div class="list">
<ul>
<li><a href="/Media/installing_intellij_github.pdf"><strong>Installation Guide</strong></a>: Instructions for how to install and configure Intellij IDEA and Github Desktop</li>
<li><a href="/Media/developer_guide.pdf"><strong>Developer Guide</strong></a>: Instructions for how to create a fork of the website repository and update the website</li>
</ul>
</div>
<!-- Code Skeleton for new page -->
<h5><strong>Creating a new page for the website</strong></h5>
<p><strong><u>BEFORE ADDING ANY CHANGES, PLEASE MAKE SURE YOUR FORK IS UP TO DATE WITH THE MAIN REPOSITORY.</u></strong> This ensures that there will be minimal merge conflicts when the webmaster approves your updates.</p>
<p>To ensure that your fork is up to date, click <em>Sync fork</em> on your fork's Github page to retrieve any changes from the main repo to your fork.</p>
<img src="Media/syncfork.png" class="w-75 pic"/>
<p>On Github Desktop, open your forked repository and make sure to click <em>Fetch origin</em> (or <em>Fetch upstream</em>, depending on your setup). This will update your local copy of the repository with all the latest changes.</p>
<img src="Media/fetch.png" class="w-75 pic"/>
<p>Once you have verified that your fork and local copy are up to date, you can begin to make edits. To add a new page to the website, a new HTML file must be created within the appropriate folder in <code>DepartmentPages</code>. For example, the page for the ML Curricula team's zero trust documentation is stored at <code>DepartmentPages/MachineLearning/zero-trust.html</code>.</p>
<p>Each page file should use the same header structure that has been established for all the pages on the website. This will, among other things, allow for the page to have the same formatting as the pre-existing pages and import key components, such as the navigation bar and footer.</p>
<p>One option that you have is to copy and paste the HTML template below into your new file.</p>
<div class="code">
<pre class="pre-scrollable">
<code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#navbar").load("../../navbar.html");
$("#footer").load("../../footer.html");
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="../../style.css"/>
</head>
<body>
<!-- Navbar -->
<div id="navbar"></div>
<!-- Your page code goes here -->
<!-- Footer -->
<div id="footer"></div>
</body>
</html>
</code>
</pre>
</div>
<p>You also have the option to import the template into your Intellij settings, which will allow you to easily create new HTML files with the code structure already included by default.</p>
<p>Download the settings ZIP file <a href="/Media/settings.zip">here</a>, which includes our HTML template. In order to import it to Intellij, go to File > Manage IDE Settings > Import Settings... and select the ZIP file you just downloaded. You should see a prompt like this. Make sure <em>File Templates (schemes)</em> is checked, as shown below.</p>
<img src="Media/template.PNG" class="w-75 pic"/>
<p>Intellij will then prompt you to restart the application for the changes to take effect.</p>
<p>Once that process is complete, you can now add new files to the repository with the template! Add a new file as shown below by selecting the SCADA HTML file type. You should then see a new file with the template code automatically included.</p>
<img src="Media/newTemplateFile.PNG" class="w-75 pic"/>
<!-- Footer -->
<div id="footer"></div>
</body>
</html>