presi-slides 1.0.11 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -917,6 +917,7 @@ slide-view:not(:has(h1[layout])) {
917
917
  var(--slide-image-template);
918
918
  --grid-content-rows: min-content minmax(20%, 1fr);
919
919
 
920
+
920
921
  &:has(
921
922
  > h3 + p > img:only-child:not(.full),
922
923
  > h3 + :not(h3) + p > img:only-child:not(.full),
@@ -986,8 +987,13 @@ slide-view:not(:has(h1[layout])) {
986
987
 
987
988
  /* code + side-by-side */
988
989
 
989
- &:has(> :is(pre:first-child, h1:first-child + pre) + h3) {
990
+ &:has(> :is(pre:first-child, h1:first-child + pre) + h3:first-of-type) {
990
991
  --slide-code-template: "c c c c c c c c c c c c";
992
+ --slide-body-template:
993
+ var(--slide-code-template)
994
+ var(--slide-titles-template)
995
+ var(--slide-list-template)
996
+ var(--slide-image-template);
991
997
  --grid-content-rows: min-content min-content minmax(50%, 1fr);
992
998
  }
993
999
 
@@ -998,6 +1004,8 @@ slide-view:not(:has(h1[layout])) {
998
1004
  > img:only-child
999
1005
  ) {
1000
1006
  --slide-header-template: "h h h h i i i i i i i i";
1007
+ --slide-body-template: var(--slide-titles-template)
1008
+ var(--slide-code-template) var(--slide-list-template);
1001
1009
  }
1002
1010
 
1003
1011
  /* extra stuff after side-by-side */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "presi-slides",
3
- "version": "1.0.11",
3
+ "version": "1.0.12",
4
4
  "description": "Make slides with Markdown",
5
5
  "keywords": [
6
6
  "Presentation",
package/public/slides.css CHANGED
@@ -917,6 +917,7 @@ slide-view:not(:has(h1[layout])) {
917
917
  var(--slide-image-template);
918
918
  --grid-content-rows: min-content minmax(20%, 1fr);
919
919
 
920
+
920
921
  &:has(
921
922
  > h3 + p > img:only-child:not(.full),
922
923
  > h3 + :not(h3) + p > img:only-child:not(.full),
@@ -986,8 +987,13 @@ slide-view:not(:has(h1[layout])) {
986
987
 
987
988
  /* code + side-by-side */
988
989
 
989
- &:has(> :is(pre:first-child, h1:first-child + pre) + h3) {
990
+ &:has(> :is(pre:first-child, h1:first-child + pre) + h3:first-of-type) {
990
991
  --slide-code-template: "c c c c c c c c c c c c";
992
+ --slide-body-template:
993
+ var(--slide-code-template)
994
+ var(--slide-titles-template)
995
+ var(--slide-list-template)
996
+ var(--slide-image-template);
991
997
  --grid-content-rows: min-content min-content minmax(50%, 1fr);
992
998
  }
993
999
 
@@ -998,6 +1004,8 @@ slide-view:not(:has(h1[layout])) {
998
1004
  > img:only-child
999
1005
  ) {
1000
1006
  --slide-header-template: "h h h h i i i i i i i i";
1007
+ --slide-body-template: var(--slide-titles-template)
1008
+ var(--slide-code-template) var(--slide-list-template);
1001
1009
  }
1002
1010
 
1003
1011
  /* extra stuff after side-by-side */
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "creatorIdentifier" : "net.shinyfrog.bear",
3
3
  "net.shinyfrog.bear" : {
4
- "bear-note-unique-identifier" : "8C6FAAFA-C195-4F3E-9EFE-F9E666369B92",
4
+ "bear-note-unique-identifier" : "F0C44A09-49A8-4C1D-8255-7B75118A4153",
5
5
  "version" : "2.0"
6
6
  },
7
7
  "transient" : false,
@@ -1,168 +1,73 @@
1
1
  ---
2
- title: Application Layer
2
+ title: Sample Presi
3
3
  ---
4
- # Application Layer {layout="title"}
5
4
 
6
- <span class="hidden">#courses/csc3001</span>
5
+ # Sample Presi {layout="title"}
7
6
 
8
7
  ---
9
8
 
10
- # Application Layer
9
+ # Slide One
11
10
 
12
- ### Goals
13
- - Provide an interface used by application code
14
- - Support high-level abstractions:
15
- - Host names and addresses
16
- - Port numbers
17
- - Connections (sessions)
18
- - Read/write byte streams
19
- * Messages (request and response)
20
-
21
- ### Challenges
22
- - Unlimited number of possible applications
23
- - &rarr; lots of protocols
24
- - Highly application-dependent
25
- - Standards evolve
26
-
27
-
28
-
29
- ---
30
- # Internet Protocols
31
-
32
- - Standard protocols for common Internet applications
33
- - Implemented as messages over TCP (sockets)
34
- - Message structure defined at application layer
35
- - Open architecture: compatibility across many implementations
36
- - as opposed to proprietary APIs
37
- - Servers listen on registered TCP ports (<1024)
38
- - Most protocols use text-based "commands"
39
- - easier to debug
40
- - commands are relatively short
11
+ - This is a simple slide
12
+ - It just has bullets
13
+ - It's boring, but it works.
14
+ - Time for more fun
41
15
 
42
16
  ---
43
17
 
44
- # (Partial) List of Internet Protocols
45
- | Protocol | Application | Registered Port |
46
- |----------|--------------------------------------------------------------|-----------------|
47
- | FTP | **F**ile **T**ransfer **P**rotocol | 21 |
48
- | SSH | **S**ecure **Sh**ell (remote login) | 22 |
49
- | Telnet | (Obsolete) remote terminal | 23 |
50
- | SMTP | **S**imple **M**ail **T**ransfer **P**rotocol (sending email) | 25 |
51
- | HTTP | **H**yper**t**ext **T**ransfer **P**rotocol (WWW) | 80 |
52
- | NTP | **N**etwork **T**ime **P**rotocol | 123 |
53
- | IMAP | **I**nternet **M**essage **A**ccess **P**rotocol (reading email) | 143 |
54
- | HTTPS | Secure HTTP | 443 |
18
+ # Slide Two
55
19
 
56
- ---
57
- # Telnet: a generic protocol client
58
-
59
- - One of the earliest protocols
60
- - Originally an application to open a terminal on a remote machine
61
- - opens a socket and transmits everything you type
62
- - not secure
63
- - uses CR-LF (two control characters) for newline
64
- - Works as a generic client
65
- - open a socket to a TCP port on any IP host
66
- - enter protocol commands manually
67
-
68
- ```shell {.compact}
69
- => telnet 127.0.0.1 21
70
- Trying 127.0.0.1...
71
- Connected to localhost.
72
- Escape character is '^]'.
73
- 220-FileZilla Server 1.12.6
74
- 220 Please visit https://filezilla-project.org/
75
- USER anonymous
76
- 331 Please, specify the password.
77
- PASS xxx
78
- 230 Login successful.
79
- PASV /
80
- 227 Entering Passive Mode (127,0,0,1,236,35)
81
- LIST
82
- 150 Starting data transfer.
83
- 226 Operation successful
84
- 421 Activity timeout.
85
- Connection closed by foreign host.
86
- ```
87
20
 
88
- ---
89
21
 
90
- # HTTP: HyperText Transfer Protocol
22
+ ![](assets/image%206.png)
91
23
 
92
- - Provide a service to transfer _resources_ between clients (web browsers) and servers.
93
- - Resource is an abstraction:
94
- - static files
95
- - query results
96
- - dynamically generated content
24
+ - This slide has a picture
25
+ - There are also bullets
26
+ - They should be side by side
97
27
 
98
- ![](assets/image.png)
99
-
100
- ---
101
- # How HTTP Works
102
-
103
- ### TCP for transport
104
- - Server listens on socket
105
- - Client initiates socket connection and sends a _request_
106
- - Server sends back a _response_
107
- - Socket is disconnected
108
- - Server keeps listening
109
-
110
- ### Protocol defines
111
- - Request Methods:
112
- - `GET`
113
- - `POST`
114
- - ...
115
- - Resource Identifier syntax: URL
116
- - Request/Response Headers
117
- - Response Status Codes
118
-
119
- ### Stateless (Ideally)
120
- - Server does not maintain state between requests
121
- - (If required, client "sessions" are managed by the application)
122
-
123
- <!--
124
- There are lots of ways to manage session state.
125
- You may have heard of cookies, but there are others.
126
- We'll talk about this more when we do Web Dev
127
- -->
128
28
  ---
129
29
 
130
- # Uniform Resource Locator
30
+ # Slide 3
131
31
 
132
- <!-- Resources are an abstraction. This is how HTTP defines Resource -->
32
+ ### Some Bullets
133
33
 
134
- <aside>
34
+ - Thing 1
35
+ - Thing 2
36
+ - Thing 3
135
37
 
136
- > Cool URIs don't change {.full}
137
- >
138
- > —Tim Berners-Lee {.attribution}
38
+ ### A Table
139
39
 
140
- ![](assets/image-timbl.png)
40
+ | Row Number | Thing |
41
+ |------------|----------|
42
+ | 1 | Parsley |
43
+ | 2 | Sage |
44
+ | 3 | Rosemary |
45
+ | 4 | Thyme |
141
46
 
142
- </aside>
47
+ ---
143
48
 
144
- - A resource's URL should never change
145
- - Resource itself may change
146
- - Physical storage location may change
147
- - Client shouldn't care
49
+ # Slide 4
148
50
 
149
- <!-- "You don't want to know" -->
51
+ ### Revealed Section
150
52
 
53
+ - Secret {.reveal}
54
+ - Top Secret
55
+ - Super Top Secret
151
56
 
57
+ ### Static Section
152
58
 
59
+ - You can see this
60
+ - if you want
61
+ - nothing special here
153
62
 
154
63
  ---
155
- # Structure of a URL
156
-
157
- ![](assets/image%204.png)
64
+ # Slide 5
158
65
 
159
- <!--
160
- Path and query are interpreted by server
161
- e.g, Common to put identifiers in path, instead query
162
- -->
66
+ ![](assets/image%207.png) {.full}
163
67
 
164
68
  ---
165
- # HTTP Messages
69
+ # Slide 6
70
+
166
71
 
167
72
  ![](assets/image%203.png){.full}
168
73
 
@@ -174,163 +79,47 @@ e.g, Common to put identifiers in path, instead query
174
79
  | Headers | `User-Agent: Mozilla/5.0…` | `Content-Type: application/json` |
175
80
  | Body | `<!DOCTYPE html> <html lang="en"> … </html>` | `{"squadName": "SuperHeroSquad", …}` |
176
81
 
177
- ---
178
- # Start Line of Request
179
-
180
- ``` {.full}
181
- GET /en-US/docs/Web/HTTP/Messages HTTP/1.1
182
- ```
183
-
184
- | **Part** | **Description** | **Examples** |
185
- |------------------|--------------------------------------------------------------|--------------------------------------------------------------|
186
- | **Method** | A verb that describes the action being requested | `GET`, `POST`, `PUT`, `PATCH`, `DELETE` |
187
- | **Path** | Path (`/`-delimited) from the root of the server to the resource on which the action is to be applied. | `/`<br>`/app/page.html`<br>`/styles/tokens.css`<br>`/api/destination/1234`<br> |
188
- | **Query String** | Optional key/value pairs specified in the URL which modify the action requested | `?query=calpoly`<br>`?prd=12&size=xl&color=blue` |
189
- | **Version** | Version of the HTTP Protocol | `HTTP/1.1`, `HTTP/2` |
190
-
191
- ---
192
- # HTTP Methods
193
-
194
- `GET`
195
- : return the _resource_
196
-
197
- `POST`
198
- : create a new _resource_
199
-
200
- `PUT`
201
- : replace the full contents of the _resource_
202
-
203
- `DELETE`
204
- : remove the _resource_
205
-
206
- `PATCH`
207
- : update/modify the _resource_
208
-
209
- Originally, all resources were web pages {.note}
210
-
211
- <!--
212
- Use case: a blogger has a site and wants to make posts.
213
- They should not need access to the server's file system.
214
- HTTP should do this.
215
- -->
216
-
217
82
  ---
218
83
 
219
- # Request Headers
84
+ # Slide 7
220
85
 
221
- | **Name** | **Description** | **Examples** |
222
- |------------------|----------------------------------------------|--------------------------------------------|
223
- | **Host** | Hostname and port used to contact server | `localhost:8080` |
224
- | **Referer** | URL the request originated from | `Referer: https://canvas.calpoly.edu/`<br> |
225
- | **Accept** | Types of response client will accept | `Accept: application/json`<br> |
226
- | **Content-Type** | Type of content (if any) being sent in body. | `Content-Type: application/json` |
227
-
228
- ---
229
-
230
- # Request Body
231
-
232
- - Separated from headers by blank line (two CR-LFs)
233
- - Only used for `POST`, `PUT`, and `PATCH`
234
- - not `GET`!
235
- - Often derived from form inputs in web pages
236
- - May be binary
237
- - example: uploading images to the server
238
- - Socket disconnected at end of body
239
- - newer versions of protocol allow the socket to stay open as an optimization
240
-
241
- - ---
242
-
243
- # Start Line of an HTTP Response
244
- ``` {.full .center}
245
- HTTP/1.1 404 Not Found
246
- ```
247
-
248
- | **Part** | **Description** | **Examples** |
249
- |-----------------|--------------------------------------------------------------|--------------------------------------------------------------|
250
- | **Version** | Version of the HTTP Protocol (confirmation) | `HTTP/1.1`, `HTTP/2.0` |
251
- | **Status Code** | A numeric code indicating success or failure. Must be one of the codes listed in the HTTP standard | `200`, `301`, `404`, `500` |
252
- | **Status Text** | A brief, human-readable description of the Status Code. Usually, the standard text. | `Success`, `Unauthorized`, `Not Found`, `Internal Server Error` |
253
-
254
-
255
- ---
256
-
257
- # HTTP Response Status Codes
86
+ <aside>
258
87
 
88
+ ![](assets/image-timbl.png)
259
89
 
260
- | Category | Example Status Code/Text | |
261
- |:-------------:|-------------------------------|--------------------|
262
- | Informational | `101 Switching Protocols` | |
263
- | Success | `200 OK` `201 Created` | `204 No Content` |
264
- | Redirection | `301 Moved Permanently` | |
265
- | Client Error | `400 Bad Request` | `401 Unauthorized` |
266
- | | `403 Forbidden` | `404 Not Found` |
267
- | Server Error | `500 Internal Server Error` | `502 Bad Gateway` |
90
+ > Cool URIs don't change {.full}
91
+ >
92
+ > —Tim Berners-Lee {.attribution}
268
93
 
269
- <!-- We will talk a lot more about this in Web Dev unit -->
270
94
 
271
- ---
272
- # Response Headers
273
95
 
96
+ </aside>
274
97
 
275
- | **Name** | **Description** | **Examples** |
276
- |--------------------|--------------------------------------------------------------|------------------------------------------------|
277
- | **Date** | The date and time the response was sent | `Date: Sat, 27 Jan 2024 23:13:47 GMT` |
278
- | **Last-Modified** | The date and time the resource last changed | `Last-Modified: Sun, 10 Dec 2023 23:13:47 GMT` |
279
- | **Content-Type** | Type of content (if any) being sent in body. Also known as a MIME-Type. | `Content-Type: application/json` |
280
- | **Content-Length** | Length (in bytes) of the body content (Optional) | `Content-Length: 12693` |
98
+ - A resource's URL should never change
99
+ - Resource itself may change
100
+ - Physical storage location may change
101
+ - Client shouldn't care
281
102
 
282
103
  ---
283
104
 
284
- # Response Body
285
105
 
286
- ### HTML
106
+ # Slide 7
287
107
 
288
- ```html
289
- <!DOCTYPE html>
290
- <html lang="en">
291
- <head>
292
- <meta charset="utf-8">
293
- …
108
+ ```HTML {.full}
109
+ <a href="http://example.com/other.html"/>Some other page</a>`
294
110
  ```
295
-
296
- - Content-Type: `text/html`
297
- ### Text-encoded Data
298
-
299
- ```json {.compact}
300
- {
301
- "squadName": "Super hero squad",
302
- "homeTown": "Metro City",
303
- "formed": 2016,
304
- "secretBase": "Super tower",
305
- "active": true,
306
- "members": [
307
- { "name": "Molecule Man", … },
308
- …
309
- ]
310
- }
311
- ```
312
-
313
- - Content-Type: `application/json`
314
-
315
- Response body can also be binary data, e.g. `image/jpeg` {.note}
316
-
317
- ---
318
-
319
- # Summary
320
-
321
- - The application layer provides specific services for different applications
322
- - Application Protocols define
323
- - types of messages which are recognized by hosts
324
- - expected behavior
325
- - possible responses for each message type
326
- - HTTP is the application-layer protocol of the World Wide Web
327
- - Web browsers make HTTP requests
328
- - Web servers respond
329
- - Uses TCP sockets for transport
111
+
112
+
113
+ ### Syntax
114
+ - `a` is for **A**nchor
115
+ - `href` attribute
116
+ - value is a URL (as defined by HTTP)
117
+ - Content model: mixed content
118
+
119
+ ### Semantics
120
+ - creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address
121
+ - Default behavior:
122
+ - load the referenced resource
330
123
 
331
-
332
-
333
-
334
-
335
-
336
-
124
+ ---
125
+ tags: #slides