Browse Source

Better image placements and regex; added tutorial document.

gwillz 2 years ago
parent
commit
f1a061d26d
10 changed files with 200 additions and 43 deletions
  1. 2 0
      .gitignore
  2. 1 4
      README.md
  3. 9 12
      css/modest.css
  4. BIN
      public/example.jpg
  5. 175 0
      public/tutorial.md
  6. 2 2
      src/editor.tsx
  7. 3 1
      src/help.tsx
  8. 5 1
      src/markdown.tsx
  9. 2 1
      src/showdown-plugins.ts
  10. 1 22
      src/store.ts

+ 2 - 0
.gitignore

@@ -4,6 +4,8 @@ public/*
 !public/index.html
 !public/404.html
 !public/favicon.ico
+!public/example.jpg
+!public/tutorial.md
 css/*.ts
 *.log
 .firebase

+ 1 - 4
README.md

@@ -14,7 +14,7 @@ happens locally with no server/backend getting involved.
 - Save work to browser storage
 - Export/download files
 - Print mode - includes notes written as comments `[//]: # ()`
-- URL fetching with `?url=...` - must be CORS compliant.
+- URL fetching with `?url=...` - must be CORS compliant
 
 
 ## Tech things
@@ -34,6 +34,3 @@ extend functionality.
 - rename 'clear/clean' to 'new file'
     - ask confirmation for creating new files
 - add param for loading saved local files
-- image position (`alt='left|right|top-left|etc'`)
-    - like a 9 position grid thing
-- write some examples in the placeholder

+ 9 - 12
css/modest.css

@@ -160,14 +160,14 @@
 
 .md img {
     display: block;
-    margin: 0 auto;
+    margin: 1em auto;
     max-width: 100%;
     
     &.left {
         float: left;
         position: relative;
         left: 0;
-        margin: 1em;
+        margin: 0 1em 1em 0;
         max-height: 100%;
         max-width: 35%;
     }
@@ -176,11 +176,17 @@
         float: right;
         position: relative;
         right: 0;
-        margin: 1em;
+        margin: 0 0 1em 1em;
         max-height: 100%;
         max-width: 35%;
     }
     
+    
+    &.hard {
+        position: absolute;
+        margin: 1em;
+    
+    }
     &.top {
         top: 0;
     }
@@ -189,15 +195,6 @@
         bottom: 0;
     }
     
-    &.left, 
-    &.right, 
-    &.bottom, 
-    &.top {
-        &.hard {
-            position: absolute;
-        }
-    }
-    
     &.inline {
         display: inline-block;
     }

BIN
public/example.jpg


+ 175 - 0
public/tutorial.md

@@ -0,0 +1,175 @@
+# No-fuss presentations!
+## With Markdown!
+
+---
+
+So this is just Markdown, but with a few tweaks.
+
+1. Horizontal rules (`---`) will create a new slide.
+2. Comments `[//]: # (...)` turn into presenter notes.
+3. Images can be positioned with the alt text `![small left](url)`.
+4. Anchor links `[text](url)` will always open in a new tab.
+5. We have tables!
+6. Fenced code blocks with syntax highlighting.
+
+---
+
+## Table of contents
+
+1. Markdown Crash Course
+2. Images
+3. Presenter Notes
+4. File Management
+5. Shortcuts and Tricks
+
+---
+
+# 1. Markdown Crash Course
+
+---
+
+# Header 1
+## Header 2
+### Header 3
+
+*italics*
+
+**bold**
+
+~~~the world is flat.~~~
+
+> multi-line
+> block quote
+
+---
+
+
+1. Ordered
+2. List of items
+
++ Un-ordered
++ List of items
+
+A link to [gwillz.com](gwillz.com).
+
+---
+
+
+Some `inline` code.
+
+```python
+code.block("with syntax").highlighting()
+# Also a 'copy' button on mouse hover
+```
+
+| Table | of      | items  |
+|-------|---------|--------|
+| items | in      | table  |
+| more  | `stuff` | *here* |
+
+---
+
+## 2. Images
+
+`![position](url)`
+
+Images will by default be no larger than 35% of the screen and centered wherever you write them.
+
+
+
+the `![...]` parameter is typically the 'title' or 'alternate text'. Here we
+abuse this and instead use it to control the image position.
+
+---
+
+## 2. Images: Floating
+
+| Modifier   | Action |
+|------------|--------|
+| `![left]`  | float left  | 
+| `![right]` | float right |
+
+
+![left](/example.jpg)
+This will float the image left or right. Any text should wrap neatly around it.
+
+---
+
+## 2. Images: Sizes
+
+| Modifier    | Action |
+|-------------|--------|
+| `![big]`    | force 100%  |
+| `![medium]` | force 60%   |
+| `![small]`  | force 40%   |
+| `![tiny]`   | force 20%   |
+
+These should be relatively straight-forward.
+
+![big](/example.jpg)
+
+---
+
+## 3. Images: `hard` Position
+
+We can combine modifiers to control size _and_ position.
+
+With `hard` we can also position `top` and `bottom`. 
+Although note, you must combine with a `left` or a `right`.
+
+`![hard tiny top left](/example.jpg)`
+
+![hard tiny top left](/example.jpg)
+![hard tiny top right](/example.jpg)
+![hard tiny bottom left](/example.jpg)
+![hard tiny bottom right](/example.jpg)
+
+---
+
+## 3. Presenter Notes
+
+Comments looks like this `[//]: # (...)`. 
+It may be clunky, but it standard (mostly).
+
+[//]: # (Look ma, no rendering!)
+
+Comments will not render in Markdown. 
+But we extract these and create a set of bullet-point notes.
+
+Currently, these are only visible in printing mode.
+
+[//]: # (These can be anywhere within the slide.)
+[//]: # (They can also contain `inline` **markdown**)
+
+---
+
+## 4. File Management
+
+You can save a presentation to your browser using the file dialog.
+
+Give it a name and it'll be auto-saved as you work on it. You can find it
+later in the 'file dialog', but only on that browser on that computer.
+If you want to move it around to different computers, download it with the 
+'download/export' button.
+
+If you can host your file online (like Dropbox or Google Drive), you can load
+it with `https://slides.gwillz.com/?url=...`. 
+
+**Tip:**: for Dropbox, the given public link will not work. Your URL should look
+like this: `https://dl.dropboxusercontent.com/s/.../filename.md?raw=1`.
+
+[//]: # (The host must be CORS (cross-origin) compliant.)
+
+---
+
+## 5. Shortcut and Tricks
+
+| Keys       | Action                 |
+|------------|------------------------|
+| Ctrl+O     | Open file dialog       |
+| Ctrl+F1    | Start presentation     |
+| Ctrl+Enter | Render document        |
+| Ctrl+Home  | Scroll both views up   |
+| Ctrl+End   | Scroll both views down |
+| Ctrl+1     | Focus editor           |
+| Ctrl+2     | Focus preview          |

+ 2 - 2
src/editor.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { EditorState, Editor, ContentState, getDefaultKeyBinding, Modifier } from 'draft-js';
 import styles from './styles';
 import { connect, DispatchProp } from 'react-redux';
-import { Store, ActionTypes, PLACEHOLDER } from './store';
+import { Store, ActionTypes } from './store';
 
 const TAB = "    ";
 
@@ -133,7 +133,7 @@ export class EditorView extends React.PureComponent<Props, State> {
                 className={styles('editor scrolling')}>
                 <Editor
                     ref={r => this.editor = r}
-                    placeholder={PLACEHOLDER}
+                    placeholder="Type markdown here"
                     editorState={this.state.draft}
                     onChange={this.handleChange}
                     onTab={this.insertTab}

+ 3 - 1
src/help.tsx

@@ -13,7 +13,9 @@ Quicky create a presentation with just a bit of
 
  * Use \`---\` to create a new slide.
  * Use \`[//]: # (...)\` to create notes.
- * add \`?url=...\` in the address bar to load remote files (must be CORS compliant).
+ * Add \`?url=...\` in the address bar to load remote files.
+
+Tutorial [here](//${window.location.host}/?url=/${window.location.host}/tutorial.md).
 
 Code [here](//git.gwillz.com/gwillz/slides).
 `

+ 5 - 1
src/markdown.tsx

@@ -10,8 +10,12 @@ type Props = {
 }
 
 const markdown = new showdown.Converter({
-    simplifiedAutoLink: true,
+    disableForced4SpacesIndentedSublists: true,
     excludeTrailingPunctuationFromURLs: true,
+    literalMidWordUnderscores: true,
+    noHeaderId: true,
+    simplifiedAutoLink: true,
+    strikethrough: true,
     tables: true,
 })
 

+ 2 - 1
src/showdown-plugins.ts

@@ -21,10 +21,11 @@ function showdownCopyCode() {
     }]
 }
 
+// @todo convert to an 'output' type
 function showdownImageFloat() {
     return [{
         type: "lang",
-        regex: /!\[([^\]]+)\]\(([^\)]+)\)/,
+        regex: /[^`]!\[([^\]]+)\]\(([^\)]+)\)/g,
         replace: `<img class="$1" src="$2" alt="$2"/>`,
     }]
 }

+ 1 - 22
src/store.ts

@@ -3,25 +3,6 @@ import { createStore } from 'redux';
 import {persistStore, persistReducer, PersistConfig, REHYDRATE} from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
 
-export const PLACEHOLDER = `
-# Type markdown here
-
----
-
-## Create a new slide with \`---\`
-
-[//]: # (Make some notes.)
-
----
-
-![left](//${window.location.host}/example.jpg)
-
-\`\`\`python
-write("some code").like_this()
-\`\`\`
-`;
-
-
 export type ActionTypes = 'ACK' | 'LOAD' | 'EDIT' | 'OPEN' | 'FULLSCREEN' | 'RENDER' | 'DARK' | typeof REHYDRATE | null;
 export type ModalTypes = 'files' | 'help' | null;
 
@@ -85,9 +66,7 @@ const INIT_STATE: State = {
     content: '',
     dark: false,
     modal: null,
-    files: {
-        'example': PLACEHOLDER,
-    },
+    files: {},
 }
 
 function reducer(state = INIT_STATE, action: Action) {