presi-slides 1.0.11 → 1.0.13

package/includes/slides.css

@@ -619,8 +619,8 @@ slide-view:not(:has(h1[layout])) {
     }
 
     &
-        > :is(blockquote, ul, ol, dl, table):first-of-type
-        + :is(blockquote, ul, ol, dl, table) {
+        > :is(ul, ol, dl, table):first-of-type
+        + :is(ul, ol, dl, table) {
         grid-area: unset;
         grid-column: start/end;
     }
@@ -905,6 +905,27 @@ slide-view:not(:has(h1[layout])) {
         --slide-body-template: "b b b b   b b c c  c c c c";
     }
 
+    /* initial blockquote */
+
+    &:has(
+        > blockquote:where(
+            :first-child:not(h1, header),
+            :is(h1, header):first-of-type + *
+        )
+        + *:not(h3, .full, .note, footer)
+    ):not(:has(> p.full)) {
+        --slide-body-template: "q q q q q q   b b b b b b";
+
+        > blockquote:first-of-type {
+            grid-area: q;
+            place-self: center;
+
+            + * {
+                place-self: center;
+            }
+        }
+    }
+
     /* side-by-side sections (h3) */
 
     &:has(> h3:nth-of-type(2)) {
@@ -917,6 +938,7 @@ slide-view:not(:has(h1[layout])) {
             var(--slide-image-template);
         --grid-content-rows: min-content minmax(20%, 1fr);
 
+
         &:has(
             > h3 + p > img:only-child:not(.full),
             > h3 + :not(h3) + p > img:only-child:not(.full),
@@ -986,8 +1008,13 @@ slide-view:not(:has(h1[layout])) {
 
         /* code + side-by-side */
 
-        &:has(> :is(pre:first-child, h1:first-child + pre) + h3) {
+        &:has(> :is(pre:first-child, h1:first-child + pre) + h3:first-of-type) {
             --slide-code-template: "c c c c c c c c c c c c";
+            --slide-body-template:
+                var(--slide-code-template)
+                var(--slide-titles-template)
+                var(--slide-list-template)
+                var(--slide-image-template);
             --grid-content-rows: min-content min-content minmax(50%, 1fr);
         }
 
@@ -998,6 +1025,8 @@ slide-view:not(:has(h1[layout])) {
                 > img:only-child
         ) {
             --slide-header-template: "h h h h   i i i i   i i i i";
+            --slide-body-template: var(--slide-titles-template)
+                var(--slide-code-template) var(--slide-list-template);
         }
 
         /* extra stuff after side-by-side */

package/package.json

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

package/public/slides.css

@@ -619,8 +619,8 @@ slide-view:not(:has(h1[layout])) {
     }
 
     &
-        > :is(blockquote, ul, ol, dl, table):first-of-type
-        + :is(blockquote, ul, ol, dl, table) {
+        > :is(ul, ol, dl, table):first-of-type
+        + :is(ul, ol, dl, table) {
         grid-area: unset;
         grid-column: start/end;
     }
@@ -905,6 +905,27 @@ slide-view:not(:has(h1[layout])) {
         --slide-body-template: "b b b b   b b c c  c c c c";
     }
 
+    /* initial blockquote */
+
+    &:has(
+        > blockquote:where(
+            :first-child:not(h1, header),
+            :is(h1, header):first-of-type + *
+        )
+        + *:not(h3, .full, .note, footer)
+    ):not(:has(> p.full)) {
+        --slide-body-template: "q q q q q q   b b b b b b";
+
+        > blockquote:first-of-type {
+            grid-area: q;
+            place-self: center;
+
+            + * {
+                place-self: center;
+            }
+        }
+    }
+
     /* side-by-side sections (h3) */
 
     &:has(> h3:nth-of-type(2)) {
@@ -917,6 +938,7 @@ slide-view:not(:has(h1[layout])) {
             var(--slide-image-template);
         --grid-content-rows: min-content minmax(20%, 1fr);
 
+
         &:has(
             > h3 + p > img:only-child:not(.full),
             > h3 + :not(h3) + p > img:only-child:not(.full),
@@ -986,8 +1008,13 @@ slide-view:not(:has(h1[layout])) {
 
         /* code + side-by-side */
 
-        &:has(> :is(pre:first-child, h1:first-child + pre) + h3) {
+        &:has(> :is(pre:first-child, h1:first-child + pre) + h3:first-of-type) {
             --slide-code-template: "c c c c c c c c c c c c";
+            --slide-body-template:
+                var(--slide-code-template)
+                var(--slide-titles-template)
+                var(--slide-list-template)
+                var(--slide-image-template);
             --grid-content-rows: min-content min-content minmax(50%, 1fr);
         }
 
@@ -998,6 +1025,8 @@ slide-view:not(:has(h1[layout])) {
                 > img:only-child
         ) {
             --slide-header-template: "h h h h   i i i i   i i i i";
+            --slide-body-template: var(--slide-titles-template)
+                var(--slide-code-template) var(--slide-list-template);
         }
 
         /* extra stuff after side-by-side */

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

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

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

@@ -1,168 +1,73 @@
 ---
-title: Application Layer
+title: Sample Presi
 ---
-# Application Layer {layout="title"}
 
-<span class="hidden">#courses/csc3001</span>
+# Sample Presi {layout="title"}
 
 ---
 
-# Application Layer
+# Slide One
 
-### 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
+- This is a simple slide
+- It just has bullets
+- It's boring, but it works.
+- Time for more fun
 
 ---
 
-# (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
-
-- 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.
-```
+# Slide Two
 
----
 
-# HTTP: HyperText Transfer Protocol
 
-- Provide a service to transfer _resources_ between clients (web browsers) and servers.
-- Resource is an abstraction:
-  - static files
-  - query results
-  - dynamically generated content
+![](assets/image%206.png)
 
-![](assets/image.png)
+- This slide has a picture
+- There are also bullets
+- They should be side by side
 
----
-# 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
+# Slide 3
 
-<!-- Resources are an abstraction. This is how HTTP defines Resource -->
+### Some Bullets
 
-<aside>
+- Thing 1
+- Thing 2
+- Thing 3
 
-> Cool URIs don't change {.full}
-> 
-> —Tim Berners-Lee {.attribution}
+### A Table
 
-![](assets/image-timbl.png)
+| Row Number | Thing    |
+|------------|----------|
+| 1          | Parsley  |
+| 2          | Sage     |
+| 3          | Rosemary |
+| 4          | Thyme    |
 
-</aside>
+---
 
-- A resource's URL should never change
-- Resource itself may change
-- Physical storage location may change
-  - Client shouldn't care
+# Slide 4
 
-<!-- "You don't want to know" -->
+### Revealed Section 
 
+- Secret {.reveal}
+- Top Secret
+- Super Top Secret
 
+### Static Section
 
+- You can see this
+- if you want
+- nothing special here
 
 ---
-# Structure of a URL
-
-![](assets/image%204.png)
+# Slide 5
 
-<!-- 
-Path and query are interpreted by server
-e.g, Common to put identifiers in path, instead query
--->
+![](assets/image%207.png) {.full}
 
 ---
-# HTTP Messages
+# Slide 6 
+
 
 ![](assets/image%203.png){.full}
 
@@ -175,162 +80,57 @@ e.g, Common to put identifiers in path, instead query
 | Body | `<!DOCTYPE html> <html lang="en"> … </html>` | `{"squadName": "SuperHeroSquad", …}`  |
 
 ---
-# Start Line of Request
 
-``` {.full}
-GET /en-US/docs/Web/HTTP/Messages HTTP/1.1
-```
+# Slide 7
 
-| **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`                                       |
-
----
-# HTTP Methods
-
-`GET`
-: return the _resource_
+<aside>
 
-`POST`
-: create a new _resource_ 
+![](assets/image-timbl.png)
 
-`PUT`
-: replace the full contents of the  _resource_
+> Cool URIs don't change {.full}
+> 
+> —Tim Berners-Lee {.attribution}
 
-`DELETE`
-: remove the _resource_
 
-`PATCH`
-: update/modify the _resource_
 
-Originally, all resources were web pages {.note}
+</aside>
 
-<!-- 
-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.
--->
+- A resource's URL should never change
+- Resource itself may change
+- Physical storage location may change
+  - Client shouldn't care
 
 ---
 
-# 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`           |
-
----
+# Slide 7
 
-# 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
+```HTML {.full}
+<a href="http://example.com/other.html"/>Some other page</a>`
 ```
+	
 
-| **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
+### Syntax
+- `a` is for **A**nchor
+- `href` attribute
+  - value is a URL (as defined by HTTP)
+- Content model: mixed content 
 
-
-| **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`                        |
+### Semantics
+- creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address
+- Default behavior:
+  - load the referenced resource
 
 ---
+# Slide 8
 
-# 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", … },
-    …
-  ]
-}
-```
+> View is a function of Model 
 
-- Content-Type: `application/json`
+- To modify the view, change the model
+- `render()`  is a function
+- Performance is enhanced by reducing full re-renders
 
-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
-  
-
-
-
-
-
-
+tags: #slides