presi-slides 1.0.9 → 1.0.11

package/includes/slides.css

@@ -129,7 +129,8 @@ blockquote {
 }
 
 p.center,
-td.center {
+td.center,
+code.center {
     text-align: center;
 }
 
@@ -668,7 +669,7 @@ slide-view:not(:has(h1[layout])) {
 
     /* initial <aside> */
 
-    &:has(> aside:where(first-child, :is(h1, header):first-of-type + *)) {
+    &:has(> aside:where(:first-child, :is(h1, header):first-of-type + *)) {
         --slide-body-template: var(--slide-aside-template);
         --slide-aside-template: "b b b b   b b b b   a a a a";
 
@@ -682,15 +683,13 @@ slide-view:not(:has(h1[layout])) {
 
         > aside {
             grid-area: a;
-            &:has(> :only-child) {
+            &:has(> :only-child, > p:first-child > img:only-child) {
                 display: contents;
             }
             > :is(ul, ol, pre, blockquote, p:not(:has(> img:only-child))) {
                 grid-area: a;
             }
-            > p:only-child > img:only-child {
-                grid-area: i;
-            }
+
         }
 
         > aside
@@ -708,13 +707,27 @@ slide-view:not(:has(h1[layout])) {
 
         /* <aside> containing image */
         &:has(aside > p > img:only-child) {
+            &:has(h1:first-child) {
+                --slide-header-template: "h h h h  h h h h   i i i i";
+            }
+
             --slide-aside-template: "b b b b   b b b b   i i i i"
                 "b b b b   b b b b   a a a a";
+            --grid-content-rows: minmax() minmax(min-content, 1fr);
 
-            > aside:has(p:only-child > img:only-child) {
+            > aside:has(p:first-child > img:only-child) {
                 display: contents;
+
+                > p:first-child {
+                    display: contents;
+                }
+                > p > img:only-child {
+                    grid-area: i;
+                }
+
             }
 
+
             &:has(
                 :is(h1, header):first-of-type
                     + aside
@@ -799,6 +812,7 @@ slide-view:not(:has(h1[layout])) {
             --slide-header-template: "h h h h   i i i i   i i i i";
             --slide-body-template: "h h h h   i i i i   i i i i"
                 "b b b b   b b b b   b b b b";
+            --grid-content-rows: minmax(min-content,40%) minmax(60%, 1fr);
         }
 
         &:has(p:where(:first-child, :is(h1, header):first-of-type + *) + pre) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "presi-slides",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Make slides with Markdown",
   "keywords": [
     "Presentation",

package/public/slides.css

@@ -129,7 +129,8 @@ blockquote {
 }
 
 p.center,
-td.center {
+td.center,
+code.center {
     text-align: center;
 }
 
@@ -668,7 +669,7 @@ slide-view:not(:has(h1[layout])) {
 
     /* initial <aside> */
 
-    &:has(> aside:where(first-child, :is(h1, header):first-of-type + *)) {
+    &:has(> aside:where(:first-child, :is(h1, header):first-of-type + *)) {
         --slide-body-template: var(--slide-aside-template);
         --slide-aside-template: "b b b b   b b b b   a a a a";
 
@@ -682,15 +683,13 @@ slide-view:not(:has(h1[layout])) {
 
         > aside {
             grid-area: a;
-            &:has(> :only-child) {
+            &:has(> :only-child, > p:first-child > img:only-child) {
                 display: contents;
             }
             > :is(ul, ol, pre, blockquote, p:not(:has(> img:only-child))) {
                 grid-area: a;
             }
-            > p:only-child > img:only-child {
-                grid-area: i;
-            }
+
         }
 
         > aside
@@ -708,13 +707,27 @@ slide-view:not(:has(h1[layout])) {
 
         /* <aside> containing image */
         &:has(aside > p > img:only-child) {
+            &:has(h1:first-child) {
+                --slide-header-template: "h h h h  h h h h   i i i i";
+            }
+
             --slide-aside-template: "b b b b   b b b b   i i i i"
                 "b b b b   b b b b   a a a a";
+            --grid-content-rows: minmax() minmax(min-content, 1fr);
 
-            > aside:has(p:only-child > img:only-child) {
+            > aside:has(p:first-child > img:only-child) {
                 display: contents;
+
+                > p:first-child {
+                    display: contents;
+                }
+                > p > img:only-child {
+                    grid-area: i;
+                }
+
             }
 
+
             &:has(
                 :is(h1, header):first-of-type
                     + aside
@@ -799,6 +812,7 @@ slide-view:not(:has(h1[layout])) {
             --slide-header-template: "h h h h   i i i i   i i i i";
             --slide-body-template: "h h h h   i i i i   i i i i"
                 "b b b b   b b b b   b b b b";
+            --grid-content-rows: minmax(min-content,40%) minmax(60%, 1fr);
         }
 
         &:has(p:where(:first-child, :is(h1, header):first-of-type + *) + pre) {

package/slide-decks/Sample Presi.textbundle/info.json

@@ -1,7 +1,7 @@
 {
   "creatorIdentifier" : "net.shinyfrog.bear",
   "net.shinyfrog.bear" : {
-    "bear-note-unique-identifier" : "F0C44A09-49A8-4C1D-8255-7B75118A4153",
+    "bear-note-unique-identifier" : "8C6FAAFA-C195-4F3E-9EFE-F9E666369B92",
     "version" : "2.0"
   },
   "transient" : false,

package/slide-decks/Sample Presi.textbundle/text.md

@@ -1,70 +1,336 @@
 ---
-title: Sample Presi
+title: Application Layer
 ---
+# Application Layer {layout="title"}
 
-# Sample Presi {layout="title"}
+<span class="hidden">#courses/csc3001</span>
 
 ---
 
-# Slide One
+# Application Layer
 
-- This is a simple slide
-- It just has bullets
-- It's boring, but it works.
-- Time for more fun
+### Goals
+- Provide an interface used by application code
+- Support high-level abstractions:
+  - Host names and addresses
+  - Port numbers
+  - Connections (sessions)
+  - Read/write byte streams
+  * Messages (request and response)
+
+### Challenges
+- Unlimited number of possible applications
+  - &rarr; lots of protocols
+- Highly application-dependent
+- Standards evolve
+
+
+
+---
+# Internet Protocols
+
+- Standard protocols for common Internet applications
+- Implemented as messages over TCP (sockets)
+  - Message structure defined at application layer
+- Open architecture: compatibility across many implementations
+  - as opposed to proprietary APIs
+- Servers listen on registered TCP ports (<1024) 
+- Most protocols use text-based "commands"
+  - easier to debug
+  - commands are relatively short
+
+---
+
+# (Partial) List of Internet Protocols
+| Protocol | Application                                                  | Registered Port |
+|----------|--------------------------------------------------------------|-----------------|
+| FTP      | **F**ile **T**ransfer **P**rotocol                           | 21              |
+| SSH      | **S**ecure **Sh**ell (remote login)                          | 22              |
+| Telnet   | (Obsolete) remote terminal                                   | 23              |
+| SMTP     | **S**imple **M**ail **T**ransfer **P**rotocol (sending email) | 25              |
+| HTTP     | **H**yper**t**ext **T**ransfer **P**rotocol (WWW)            | 80              |
+| NTP      | **N**etwork **T**ime **P**rotocol                            | 123             |
+| IMAP     | **I**nternet **M**essage **A**ccess **P**rotocol (reading email) | 143             |
+| HTTPS    | Secure HTTP                                                  | 443             |
 
 ---
+# Telnet: a generic protocol client
 
-# Slide Two
+- One of the earliest protocols
+- Originally an application to open a terminal on a remote machine
+  - opens a socket and transmits everything you type
+  - not secure
+  - uses CR-LF  (two control characters) for newline
+- Works as a generic client
+  - open a socket to a TCP port on any IP host
+  - enter protocol commands manually
 
+```shell {.compact}
+=> telnet 127.0.0.1 21
+Trying 127.0.0.1...
+Connected to localhost.
+Escape character is '^]'.
+220-FileZilla Server 1.12.6
+220 Please visit https://filezilla-project.org/
+USER anonymous
+331 Please, specify the password.
+PASS xxx
+230 Login successful.
+PASV /
+227 Entering Passive Mode (127,0,0,1,236,35)
+LIST 
+150 Starting data transfer.
+226 Operation successful
+421 Activity timeout.
+Connection closed by foreign host.
+```
 
+---
+
+# HTTP: HyperText Transfer Protocol
 
-![](assets/image%206.png)
+- Provide a service to transfer _resources_ between clients (web browsers) and servers.
+- Resource is an abstraction:
+  - static files
+  - query results
+  - dynamically generated content
 
-- This slide has a picture
-- There are also bullets
-- They should be side by side
+![](assets/image.png)
 
 ---
+# How HTTP Works
+
+### TCP for transport
+- Server listens on socket
+- Client initiates socket connection and sends a _request_
+- Server sends back a _response_
+- Socket is disconnected
+- Server keeps listening
+
+### Protocol defines
+- Request Methods: 
+  - `GET`
+  - `POST`
+  - ...
+- Resource Identifier syntax: URL
+- Request/Response Headers
+- Response Status Codes
+
+### Stateless (Ideally)
+- Server does not maintain state between requests
+  - (If required, client "sessions" are managed by the application)
+
+<!-- 
+There are lots of ways to manage session state.
+You may have heard of cookies, but there are others.
+We'll talk about this more when we do Web Dev
+-->
+---
+
+# Uniform Resource Locator
+
+<!-- Resources are an abstraction. This is how HTTP defines Resource -->
 
-# Slide 3
+<aside>
 
-### Some Bullets
+> Cool URIs don't change {.full}
+> 
+> —Tim Berners-Lee {.attribution}
+
+![](assets/image-timbl.png)
+
+</aside>
+
+- A resource's URL should never change
+- Resource itself may change
+- Physical storage location may change
+  - Client shouldn't care
+
+<!-- "You don't want to know" -->
 
-- Thing 1
-- Thing 2
-- Thing 3
 
-### A Table
 
-| Row Number | Thing    |
-|------------|----------|
-| 1          | Parsley  |
-| 2          | Sage     |
-| 3          | Rosemary |
-| 4          | Thyme    |
 
 ---
+# Structure of a URL
+
+![](assets/image%204.png)
+
+<!-- 
+Path and query are interpreted by server
+e.g, Common to put identifiers in path, instead query
+-->
+
+---
+# HTTP Messages
+
+![](assets/image%203.png){.full}
 
-# Slide 4
+<!-- symmetry between Request and Response -->
 
-### Revealed Section 
+|    | Request  | Response |
+| --- | --- | --- |
+| Start | `GET /en-US/docs/… HTTP/1.1` | `HTTP/1.1 404 Not Found` |
+| Headers | `User-Agent: Mozilla/5.0…` | `Content-Type: application/json` |
+| Body | `<!DOCTYPE html> <html lang="en"> … </html>` | `{"squadName": "SuperHeroSquad", …}`  |
 
-- Secret {.reveal}
-- Top Secret
-- Super Top Secret
+---
+# Start Line of Request
 
-### Static Section
+``` {.full}
+GET /en-US/docs/Web/HTTP/Messages HTTP/1.1
+```
 
-- You can see this
-- if you want
-- nothing special here
+| **Part**         | **Description**                                              | **Examples**                                                 |
+|------------------|--------------------------------------------------------------|--------------------------------------------------------------|
+| **Method**       | A verb that describes the action being requested             | `GET`, `POST`, `PUT`, `PATCH`, `DELETE`                      |
+| **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> |
+| **Query String** | Optional key/value pairs specified in the URL which modify the action requested | `?query=calpoly`<br>`?prd=12&size=xl&color=blue` |
+| **Version**      | Version of the HTTP Protocol                                 | `HTTP/1.1`, `HTTP/2`                                       |
 
 ---
-# Slide 5
+# HTTP Methods
+
+`GET`
+: return the _resource_
+
+`POST`
+: create a new _resource_ 
+
+`PUT`
+: replace the full contents of the  _resource_
+
+`DELETE`
+: remove the _resource_
 
-![](assets/image%207.png) {.full}
+`PATCH`
+: update/modify the _resource_
 
+Originally, all resources were web pages {.note}
+
+<!-- 
+Use case: a blogger has a site and wants to make posts.
+They should not need access to the server's file system.
+HTTP should do this.
+-->
 
 ---
-tags: #slides
+
+# Request Headers
+
+| **Name**         | **Description**                              | **Examples**                               |
+|------------------|----------------------------------------------|--------------------------------------------|
+| **Host**         | Hostname and port used to contact server     | `localhost:8080`                           |
+| **Referer**      | URL the request originated from              | `Referer: https://canvas.calpoly.edu/`<br> |
+| **Accept**       | Types of response client will accept         | `Accept: application/json`<br>             |
+| **Content-Type** | Type of content (if any) being sent in body. | `Content-Type: application/json`           |
+
+---
+
+# Request Body
+
+- Separated from headers by blank line (two CR-LFs)
+- Only used for `POST`, `PUT`, and `PATCH`
+  - not `GET`!
+- Often derived from form inputs in web pages
+- May be binary
+  - example: uploading images to the server
+- Socket disconnected at end of body
+  - newer versions of protocol allow the socket to stay open as an optimization
+  
+- ---
+
+# Start Line of an HTTP Response
+``` {.full .center}
+HTTP/1.1 404 Not Found
+```
+
+| **Part**        | **Description**                                              | **Examples**                                                 |
+|-----------------|--------------------------------------------------------------|--------------------------------------------------------------|
+| **Version**     | Version of the HTTP Protocol (confirmation)                  | `HTTP/1.1`, `HTTP/2.0`                                       |
+| **Status Code** | A numeric code indicating success or failure. Must be one of the codes listed in the HTTP standard | `200`, `301`, `404`, `500`                                   |
+| **Status Text** | A brief, human-readable description of the Status Code. Usually, the standard text. | `Success`, `Unauthorized`, `Not Found`, `Internal Server Error` |
+
+
+---
+
+# HTTP Response Status Codes
+
+
+| Category      | Example Status Code/Text      |                    |
+|:-------------:|-------------------------------|--------------------|
+| Informational | `101 Switching Protocols`     |                    |
+| Success       | `200 OK`  `201 Created`       | `204 No Content`   |
+| Redirection   | `301 Moved Permanently`       |                    |
+| Client Error  | `400 Bad Request`             | `401 Unauthorized` |
+|               |  `403 Forbidden`              | `404 Not Found`    |
+| Server Error  | `500 Internal Server Error`   | `502 Bad Gateway`  |
+
+<!-- We will talk a lot more about this in Web Dev unit -->
+
+---
+# Response Headers
+
+
+| **Name**           | **Description**                                              | **Examples**                                   |
+|--------------------|--------------------------------------------------------------|------------------------------------------------|
+| **Date**           | The date and time the response was sent                      | `Date: Sat, 27 Jan 2024 23:13:47 GMT`          |
+| **Last-Modified**  | The date and time the resource last changed                  | `Last-Modified: Sun, 10 Dec 2023 23:13:47 GMT` |
+| **Content-Type**   | Type of content (if any) being sent in body. Also known as a MIME-Type. | `Content-Type: application/json`               |
+| **Content-Length** | Length (in bytes) of the body content (Optional)             | `Content-Length: 12693`                        |
+
+---
+
+# Response Body
+
+### HTML
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+   …
+```
+
+- Content-Type: `text/html`
+### Text-encoded Data
+
+```json {.compact}
+{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    { "name": "Molecule Man", … },
+    …
+  ]
+}
+```
+
+- Content-Type: `application/json`
+
+Response body can also be binary data, e.g. `image/jpeg` {.note}
+
+---
+
+# Summary
+
+- The application layer provides specific services for different applications
+- Application Protocols define
+  - types of messages which are recognized by hosts
+  - expected behavior
+  - possible responses for each message type
+- HTTP is the application-layer protocol of the World Wide Web
+  - Web browsers make HTTP requests
+  - Web servers respond
+  - Uses TCP sockets for transport
+  
+
+
+
+
+
+