Skip to content

Commit ae1b9d0

Browse files
πŸ“ Add a gallery to the README (#20)
* πŸ“ Add a gallery for the radial theme to the README * πŸ’š Fixing workflow * πŸ’š Actualy fixed the CI this time * πŸ’š Fixed the CI * 🩹 Fixed links * πŸ“ Add a gallery for the linear theme to the README * πŸ“ The Linear theme has the right font now * 🎨 Updated raw code formatting * πŸ“ Updated the gallery images --------- Co-authored-by: BestUsernameEver <isaiah.blanc0220@gmail.com>
1 parent 367e5e2 commit ae1b9d0

File tree

14 files changed

+396
-3
lines changed

14 files changed

+396
-3
lines changed

β€Ž.github/workflows/ci.ymlβ€Ž

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,5 @@ jobs:
2424
run: |
2525
just install
2626
just docs
27+
just gallery
2728
# TODO: run unit tests here

β€Ž.gitignoreβ€Ž

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,13 @@
22
*.pdf
33
!docs.pdf
44
test.typ
5+
6+
# This is kind of hacky, but I need to ignore the images in the gallery that I'm not using
7+
gallery/*.png
8+
!gallery/radial-4.png
9+
!gallery/radial-5.png
10+
!gallery/radial-6.png
11+
12+
!gallery/linear-03.png
13+
!gallery/linear-04.png
14+
!gallery/linear-05.png

β€ŽREADME.mdβ€Ž

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div align="center">
22

3-
![alt text](logo.png)
3+
![alt text](./logo.png)
44

55
</div>
66

@@ -18,5 +18,55 @@ This is the Notebookinator, a [Typst](https://github.com/typst/typst) template d
1818

1919
To get started, read the [documentation](./docs.pdf). If you have questions, or just want to hang out, feel free to join our [Discord server](https://discord.gg/sUpcVPtBDg).
2020

21+
## Gallery
22+
23+
### Radial Theme
24+
25+
<table>
26+
<tr>
27+
<td>
28+
<a href="./gallery/radial.typ">
29+
<img src="./gallery/radial-4.png" width="350px">
30+
</a>
31+
</td>
32+
<td>
33+
<a href="./gallery/radial.typ">
34+
<img src="./gallery/radial-5.png" width="350px">
35+
</a>
36+
</td>
37+
38+
<td>
39+
<a href="./gallery/radial.typ">
40+
<img src="./gallery/radial-6.png" width="350px">
41+
</a>
42+
</td>
43+
</tr>
44+
</table>
45+
46+
## Linear Theme
47+
48+
<table>
49+
<tr>
50+
<td>
51+
<a href="./gallery/linear.typ">
52+
<img src="./gallery/linear-03.png" width="350px">
53+
</a>
54+
</td>
55+
<td>
56+
<a href="./gallery/linear.typ">
57+
<img src="./gallery/linear-04.png" width="350px">
58+
</a>
59+
</td>
60+
61+
<td>
62+
<a href="./gallery/linear.typ">
63+
<img src="./gallery/linear-05.png" width="350px">
64+
</a>
65+
</td>
66+
</tr>
67+
</table>
68+
2169
## Special Thanks
22-
- Maqmoon (logo drawing)
70+
71+
- Maqmoon (logo drawing)
72+
- CeTZ (inspiration for a lot of different things)

β€Žgallery/linear-03.pngβ€Ž

786 KB
Loading

β€Žgallery/linear-04.pngβ€Ž

207 KB
Loading

β€Žgallery/linear-05.pngβ€Ž

587 KB
Loading

β€Žgallery/linear.typβ€Ž

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
#import "../lib.typ": *
2+
#import themes.linear: linear-theme
3+
#import themes.linear.components
4+
5+
#show: notebook.with(
6+
theme: linear-theme,
7+
team-name: "53C",
8+
season: "Over Under",
9+
year: "2023-2024",
10+
)
11+
12+
#create-frontmatter-entry(title: "Color Coding Guide")[
13+
This key represents each step of the Engineering Design Process with a color that corresponds to the Engineering Notebooking Rubric categories. In the table of contents, each page is assigned to a color which summarizes the content on that page. However, if a page highlights multiple sections of the Engineering Design Process, headings on the page will be colored accordingly.
14+
15+
#grid(
16+
columns: (1fr, 5fr),
17+
gutter: 10pt,
18+
// Row 1
19+
square(size: 1in, fill: components.dark-red),
20+
align(horizon,
21+
[
22+
#set text(size: 14pt)
23+
Identify the Problem
24+
25+
#set text(size: 12pt)
26+
Identifies the game and robot design challenges in detail at the start of each design process cycle with words and pictures. States the goals for accomplishing the challenge.
27+
]),
28+
// Row 2
29+
square(size: 1in, fill: components.dark-yellow),
30+
align(horizon,
31+
[
32+
#set text(size: 14pt)
33+
Brainstorm, Diagram, or Prototype Solutions
34+
35+
#set text(size: 12pt)
36+
Lists three or more possible solutions to the challenge with labeled diagrams. Citations provided for ideas that came from outside sources such as online videos or other teams.
37+
]),
38+
// Row 3
39+
square(size: 1in, fill: components.dark-green),
40+
align(horizon,
41+
[
42+
#set text(size: 14pt)
43+
Select the Best Solution and Plan
44+
45+
#set text(size: 12pt)
46+
Explains why the solution was selected through testing and/or a decision matrix. Fully describes the plan to implement the solution.
47+
]),
48+
// Row 4
49+
square(size: 1in, fill: components.dark-blue),
50+
align(horizon,
51+
[
52+
#set text(size: 14pt)
53+
Build the Solution
54+
55+
#set text(size: 12pt)
56+
Records the steps to build the solution. Includes enough detail that the reader can follow the logic used by the team to develop their robot design, as well as recreate the robot design from the documentation.
57+
]),
58+
// Row 5
59+
square(size: 1in, fill: components.dark-purple),
60+
align(horizon,
61+
[
62+
#set text(size: 14pt)
63+
Program the Solution
64+
65+
#set text(size: 12pt)
66+
Records the steps to program the solution. Includes enough detail that the reader can follow the logic used by the team to develop their robot code, as well as recreate the robot code from the documentation.
67+
]),
68+
// Row 6
69+
square(size: 1in, fill: components.dark-pink),
70+
align(horizon,
71+
[
72+
#set text(size: 14pt)
73+
Test the Solution
74+
75+
#set text(size: 12pt)
76+
Records all the steps to test the solution, including test results.
77+
]),
78+
// Row 7
79+
square(size: 1in, fill: components.surface-4),
80+
align(horizon,
81+
[
82+
#set text(size: 14pt)
83+
Reflect on Prior Solutions
84+
85+
#set text(size: 12pt)
86+
Evaluates the decisions and mistakes made in the past to better prepare and overcome challenges in the future.
87+
])
88+
)
89+
We also wanted to create a new category: Reflect on Prior Solutions. We believe this is an important step in the Engineering Design Process and we want to highlight our reflections using our color coding guide.
90+
]
91+
92+
#create-frontmatter-entry(title: "Table of Contents")[
93+
#components.toc()
94+
]
95+
96+
#create-body-entry(title: "Title", type: "identify", date: datetime(year: 1111, month: 11, day: 1))[
97+
= Heading 1
98+
#lorem(50)
99+
#grid(
100+
columns: (1fr, 1fr),
101+
gutter: 15pt,
102+
lorem(30),
103+
align(
104+
center + horizon,
105+
image("../logo.png")
106+
)
107+
)
108+
== Subheading 1
109+
#components.pro-con(
110+
pros: [
111+
#list(
112+
[#lorem(10)],
113+
[#lorem(12)],
114+
[#lorem(15)]
115+
)
116+
],
117+
cons: [
118+
#list(
119+
[#lorem(12)],
120+
[#lorem(10)]
121+
)
122+
]
123+
)
124+
== Subheading 2
125+
#components.decision-matrix(
126+
properties: (
127+
(name: "Category 1"),
128+
(name: "Category 2"),
129+
(name: "Category 3", weight: 2)
130+
),
131+
("Decision", 3, 1, 4),
132+
("Matrix", 2, 3, 5),
133+
)
134+
= Heading 2
135+
```cpp
136+
#include <iostream>
137+
#include <cstdio>
138+
139+
int main() {
140+
printf("Hello world!");
141+
142+
return 0;
143+
}
144+
```
145+
]
146+
147+
#create-body-entry(title: "Title", type: "brainstorm", date: datetime(year: 1111, month: 11, day: 2))[]
148+
#create-body-entry(title: "Title", type: "brainstorm", date: datetime(year: 1111, month: 11, day: 2))[]
149+
#create-body-entry(title: "Title", type: "brainstorm", date: datetime(year: 1111, month: 11, day: 2))[]
150+
#create-body-entry(title: "Title", type: "brainstorm", date: datetime(year: 1111, month: 11, day: 2))[]
151+
#create-body-entry(title: "Title", type: "decide", date: datetime(year: 1111, month: 11, day: 3))[]
152+
#create-body-entry(title: "Title", type: "build", date: datetime(year: 1111, month: 11, day: 3))[]
153+
#create-body-entry(title: "Title", type: "build", date: datetime(year: 1111, month: 11, day: 3))[]
154+
#create-body-entry(title: "Title", type: "build", date: datetime(year: 1111, month: 11, day: 3))[]
155+
#create-body-entry(title: "Title", type: "program", date: datetime(year: 1111, month: 11, day: 3))[]
156+
#create-body-entry(title: "Title", type: "program", date: datetime(year: 1111, month: 11, day: 3))[]
157+
#create-body-entry(title: "Title", type: "test", date: datetime(year: 1111, month: 11, day: 4))[]
158+
#create-body-entry(title: "Title", type: "test", date: datetime(year: 1111, month: 11, day: 4))[]
159+
#create-body-entry(title: "Title", type: "build", date: datetime(year: 1111, month: 11, day: 5))[]
160+
#create-body-entry(title: "Title", type: "build", date: datetime(year: 1111, month: 11, day: 5))[]
161+
#create-body-entry(title: "Title", type: "brainstorm", date: datetime(year: 1111, month: 11, day: 5))[]
162+
#create-body-entry(title: "Title", type: "brainstorm", date: datetime(year: 1111, month: 11, day: 5))[]
163+
#create-body-entry(title: "Title", type: "decide", date: datetime(year: 1111, month: 11, day: 5))[]
164+
#create-body-entry(title: "Title", type: "program", date: datetime(year: 1111, month: 11, day: 5))[]
165+
#create-body-entry(title: "Title", type: "test", date: datetime(year: 1111, month: 11, day: 5))[]
166+
167+
#glossary.add-term("Lorem")[
168+
#lorem(10)
169+
]
170+
171+
#glossary.add-term("Ipsum")[
172+
#lorem(25)
173+
]
174+
175+
#glossary.add-term("Dolor")[
176+
#lorem(11)
177+
]
178+
179+
#glossary.add-term("Sit")[
180+
#lorem(5)
181+
]
182+
183+
#create-appendix-entry(title: "Glossary")[
184+
#lorem(50)
185+
#components.glossary()
186+
]

β€Žgallery/radial-4.pngβ€Ž

537 KB
Loading

β€Žgallery/radial-5.pngβ€Ž

498 KB
Loading

β€Žgallery/radial-6.pngβ€Ž

596 KB
Loading

0 commit comments

Comments
Β (0)