working trongle and rought draft of emacs

.gitignore

@@ -0,0 +1 @@
+trongle-chats.txt

emacs.org

@@ -0,0 +1,302 @@
+#+TITLE: EMACS - the Extensible Machine Aggregating Creative S-expressions.
+#+STARTUP: inlineimages fold
+
+[[./img/emacs_user_fingers.png]]
+
+* what is emacs?
+
+well... it's better than valve's Steam!
+
+** what?
+*** yes, emacs is a gaming platform
+**** some tetris?
+
+#+BEGIN_SRC emacs-lisp
+  (tetris)
+#+END_SRC
+
+**** some snake?
+
+#+BEGIN_SRC emacs-lisp
+  (snake)
+#+END_SRC
+
+**** or bubbles?
+
+#+BEGIN_SRC emacs-lisp
+  (bubbles)
+#+END_SRC
+
+**** or the game of life?
+#+BEGIN_SRC emacs-lisp
+  (life)
+#+END_SRC
+
+*** why have a web browser when you can have emacs?
+
+#+BEGIN_SRC emacs-lisp
+  (eww "https://print.linux.usu.edu")
+#+END_SRC
+
+*** or systemd when you can have emacs?
+
+[[https://github.com/a-schaefers/systemE]]
+
+*** or a window manager when you can have emacs?
+
+[[https://github.com/ch11ng/exwm]]
+
+*** or a therapist when you can have emacs?
+
+emacs can help you solve all your life's issues. literally.
+
+#+BEGIN_SRC emacs-lisp
+  (doctor)
+#+END_SRC
+
+*** or a trongleposting server... when you can have emacs?
+#+BEGIN_SRC emacs-lisp
+  (use-package web-server
+    :ensure t
+    :straight '(web-server
+      	      :type git
+      	      :host github
+      	      :repo "eschulte/emacs-web-server"))
+
+  (defvar *trongle-chats* (make-ring 100)) ;; "db" with 100 past chats
+  (defvar *static* "/home/lizzy/git/usufslc/emacs/trongleposting-client/build/")
+  (defvar *chatlog* "/home/lizzy/git/usufslc/emacs/trongle-chats.txt")
+
+  (defvar *index* (concat *static* "index.html"))
+  (defvar *port* 9000)
+  (defvar *safe-chars* "^[ A-Za-z0-9._~()'!*:@,;+?-]+$")
+  (defvar *clients* '())
+
+  (defun current-iso-time ()
+    (format-time-string "%FT%T%:z"))
+
+  (defun safe-string-p (s &optional regex)
+    (unless regex (setq regex *safe-chars*))
+    (if (null s)
+        nil
+      (not (null (string-match regex s)))))
+
+  (defun validate-chat (chat)
+    (seq-every-p
+     'safe-string-p
+     (mapcar (lambda (field)
+  	     (cdr (assoc field chat)))
+  	   '(author message))))
+
+  (defun deflate-chat (chat)
+    (let ((parsed-j (json-parse-string chat)))
+      `((author . ,(gethash "author" parsed-j))
+        (message . ,(gethash "message" parsed-j)))))
+
+  (defun inflate-chat (chat)
+    (json-serialize chat))
+
+  (defun inflate-chat-list (chats)
+    (json-serialize
+     (vconcat [] chats)))
+
+  (defun handle-ws (proc input)
+    (setq *clients* (cons proc *clients*))
+    (process-send-string proc (ws-web-socket-frame "pong")))
+
+  (defun new-post (request)
+    (with-slots (process headers) request
+      (let* ((body (ws-body request))
+  	   (chat (deflate-chat body)))
+        (if (validate-chat chat)
+  	  (let* ((chat (cons `(date . ,(current-iso-time)) chat))
+  		 (chat-json (inflate-chat chat)))
+  	    ;; store and log
+  	    (ring-insert *trongle-chats* chat)
+  	    (append-to-file (concat chat-json "\n") nil *chatlog*)
+
+  	    ;; propogate to clients
+  	    (mapcar (lambda (client)
+  		      (process-send-string
+  		       client
+  		       (ws-web-socket-frame (inflate-chat chat))))
+  		    ,*clients*)
+
+  	    (ws-response-header process 200 '("Content-Type" . "application/json"))
+      	    (process-send-string process (json-serialize '((success . t)))))
+  	(ws-response-header process 400 '("Content-Type" . "application/json"))
+      	(process-send-string process (json-serialize
+  				      '((error . "invalid chat")
+  					(success . :false))))))))
+
+  (defun list-posts (request)
+    (with-slots (process headers) request
+      (ws-response-header process 200 '("Content-Type" . "application/json"))
+      (process-send-string process
+  			 (inflate-chat-list
+  			  (reverse (ring-elements *trongle-chats*))))))
+
+  (defun retrieve-static-file (request)
+    (with-slots (process headers) request
+      (let* ((path (replace-regexp-in-string "^/" "" (cdr (assoc :GET headers)))))
+        (if (equal path "")
+  	  (ws-send-file process *index*)
+  	(if (ws-in-directory-p *static* path)
+  	    (if (file-directory-p path)
+     		(ws-send-404 process)
+  	      (ws-send-file process
+  			    (expand-file-name path *static*)))
+  	  (ws-send-404 process))))))
+
+  (ws-start
+   `(((:POST . "/posts") . new-post)
+     ((:GET . "/posts") . list-posts)
+     ((:GET . ".*") .
+      (lambda (request)
+        (if (ws-web-socket-connect request 'handle-ws)
+  	  :keep-alive
+  	(retrieve-static-file request)))))
+   ,*port*)
+#+END_SRC
+
+#+RESULTS:
+: #s(ws-server (((:POST . "/posts") . new-post) ((:GET . "/posts") . list-posts) ((:GET . ".*") lambda (request) (if (ws-web-socket-connect request 'handle-ws) :keep-alive (retrieve-static-file request)))) #<process ws-server> 9000 nil)
+
+** EEE-macs
+
+i've come up with "Three E's" that kind of cover emacs' design tenets and goals:
+
+*** be extensible
+
+this is the first and foremost goal of emacs, and one that is certainly demonstrated by
+the capabilities of emacs as it comes packaged on your system.
+
+the only limit is your creativity. and with a fully bytecode JIT compilable LISP, that
+creativity is (don't quote me) _Easy to Express_.
+
+*** be evolving
+
+like many other softwares, emacs is a living and breathing creature that is continuously
+growing.
+
+the emacs community aims to make emacs the provider of an experience at the bleeding edge
+of writing software. major releases often bring about huge features that "evolve" emacs:
+
+1. native lsp support (~tree-sitter~, ~eglot~ in 29 - 2023)
+2. elisp JIT compiler to emacs bytecode (28.1 - 2022)
+3. pixel precise scrolling (long awaited)
+
+(there's a joke here about emacs still being single threaded somewhere...)
+
+*** be easy
+
+[[./img/emacs_default.png]]
+
+while emacs may not adhere to the unix philosophy, it is easy to grok by anyone that
+has used a text editor before.
+
+even with no experience, today _you_ could simply drop into ~emacs test.c~ and begin
+writing text. there's no weird "action modes" that require a barrier of entry to write
+code - besides knowing the key combination to save and quit, and how to press arrow keys.
+there's no necessary ~emacstutor~.
+
+people even create specific "distributions" of emacs like linux itself to provide a simple
+interface for beginners to even further lower the **mean time to become dangerous**.
+
+at the same time, emacs is more rich in features than any other software due to its
+extensibility. the further you go, the easier it gets. emacs is self documenting in itself
+(i.e. ~describe-*~) and has great online docs too.
+
+** so what does the FSF say?
+
+#+BEGIN_QUOTE
+"
+  Emacs is "an extensible, customizable, free/libre text editor — and more.
+  At its core is an interpreter for Emacs Lisp, a dialect of the Lisp programming
+  language with extensions to support text editing.
+"
+  - https://www.gnu.org/software/emacs
+#+END_QUOTE
+
+** an answer
+so to answer the question, "what is emacs?"...
+
+0. it's a text editor
+1. it's a window manager
+2. it's a rich email client
+3. it's a native IDE for ELISP, with optional support for all other languages
+4. it's a web browser
+5. it's a gaming console
+6. it's an interpreter
+7. it's a document editor (more on this later)
+8. it's the love of my life (... what)
+9. ~<insert your thing here>~
+
+...maybe it's best to ask, "what is it not?".
+
+* ORG mode
+you may've noticed i have these little guys here in my presentation:
+
+#+BEGIN_SRC emacs-lisp :results output
+  (princ "I run in a source block!")
+#+END_SRC
+
+these are blocks of code that can be run interactively in an "org" file. but what's an "org" file?
+
+well, like the question "what is emacs?" itself, it's another very complicated answer.
+
+"org" is a...
+0. presentation software (what you see here)
+1. calendar
+2. latex editor
+3. markdown editor
+4. html editor
+5. obsidian alternative
+6. open office editor
+7. programming notebook
+8. ...
+
+** "your life, in plain text"
+
+every single org file is simply plain text. that's the beauty. any way there is to structure code,
+applies to org files.
+
+as such, it's common for emacs users to define their ~init.el~ (the bootstrap script run when emacs
+starts) in an org mode document, whose source-blocks are "compiled" into an ~init.el~ file. then you
+can add notes and organize it into separate "trees" of concerns.
+
+and certainly org is "your life" - ~org-roam~ is a whole second [[https://systemcrafters.net/build-a-second-brain-in-emacs/getting-started-with-org-roam/][brain]].
+
+** students, this is for you
+
+emacs is godly for math and cs students. between this "interactive notebook" and latex editor,
+you can write stuff, without the headache of ~LaTeX~.
+
+introducing a function f:
+  S = { students at USU }
+  M = { members of FSLC }
+  B = { cool, uncool }
+  f : S \rightarrow B \ni f(x) = {
+    cool (x \in M),
+    uncool
+  }
+definition of a proper subset:
+  A \subset B \Leftrightarrow \forall x (x \in A \Rightarrow x \in B) \wedge A \neq B
+
+right now, it doesn't look pretty, but watch this:
+
+#+BEGIN_SRC emacs-lisp :results silent
+  (org-toggle-pretty-entities)
+#+END_SRC
+
+
+
+* how is emacs? key concepts.
+to introduce you to the world of emacs, you may want to know some basics.
+
+
+
+* conclusion
+emacs is now.
+
+

trongleposting-client/.dockerignore

@@ -0,0 +1,2 @@
+.env*
+node_modules/*

trongleposting-client/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

trongleposting-client/README.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

trongleposting-client/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/user-event": "^13.5.0",
+    "crypto-js": "^4.1.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.0",
+    "socket.io-client": "^4.4.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

trongleposting-client/public/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Docker container to do dockerposting"
+    />
+    <link
+        rel="icon"
+        type="image/x-icon"
+        sizes="512x512"
+        href="/favicon.ico"
+      />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>TRONGLEPOSTING</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

trongleposting-client/public/manifest.json

@@ -0,0 +1,8 @@
+{
+  "short_name": "Dockerposting",
+  "name": "Dockerposting docker docker docker docker",
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

trongleposting-client/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

trongleposting-client/src/App.css

@@ -0,0 +1,78 @@
+body {
+  font-family: Consolas, monaco, monospace;
+  color: #fbf1c7;
+  margin: 0;
+  background-color: #3c3836;
+}
+
+.container {
+  max-width: 900px;
+  width: 80%;
+
+  border: 1px solid #b16286;
+  border-radius: 8px;
+  margin: 0;
+  padding: 24px;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -moz-transform: translateX(-50%) translateY(-50%);
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+  background-color: #282828;
+
+  box-shadow: rgb( 0, 0, 0, 0.6) 6px 45px 45px -12px;
+}
+
+.chat {
+  border-bottom: 1px solid #d65d0e;
+  height: 200px;
+  overflow-y: scroll;
+  padding-bottom: 12px;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #d5c4a1 rgba(0,0,0,0);
+}
+
+*::-webkit-scrollbar {
+  width: 4px;
+}
+
+*::-webkit-scrollbar-track {
+  background: rgba(0,0,0,0);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #d5c4a1;
+  border-radius: 12px;
+}
+
+.input {
+  font-size: 16px;
+  font-size: max(16px, 1em);
+  font-family: inherit;
+  padding: 0.25em 0.5em;
+  background-color: rgba(0,0,0,0);
+  border: none;
+  border-bottom: 1px solid #83a598;
+  color: #d5c4a1;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  display: block;
+}
+
+.input:focus {
+  outline: none;
+}
+
+.button {
+  padding: 12px;
+  cursor: pointer;
+  border: 1px solid #8ec07c;
+  color: #8ec07c;
+  border-radius: 8px;
+  display: inline-block;
+}

trongleposting-client/src/App.js

@@ -0,0 +1,126 @@
+import { useRef, useState, useEffect } from "react";
+import { generateGruvboxFromString } from "./utils/generate_gruvbox";
+import "./App.css";
+
+function App() {
+  const [socket, setSocket] = useState(null);
+  const [posts, setPosts] = useState([]);
+  const postsRef = useRef([]);
+  const [content, setContent] = useState("");
+  const [username, setUsername] = useState("");
+  const [error, setError] = useState("");
+  const [color, setColor] = useState("");
+
+  const scrollToBottomOfChat = () => {
+    const objDiv = document.getElementById("chat");
+    objDiv.scrollTop = objDiv.scrollHeight;
+  };
+
+  useEffect(() => {
+    const protocol = document.location.protocol === "https:" ? "wss:" : "ws:";
+    let socket;
+
+    fetch("/posts")
+      .then((r) => r.json())
+      .then((msgs) => {
+        postsRef.current = msgs;
+        setPosts(postsRef.current);
+        scrollToBottomOfChat();
+      })
+      .then(() => {
+        socket = new WebSocket(`${protocol}//${document.location.host}/`);
+        socket.addEventListener("open", () => {
+          socket.send("ping");
+        });
+        socket.addEventListener("message", (msg) => {
+          const { data } = msg;
+          if (data === "pong") return;
+
+          const chat = JSON.parse(msg.data);
+          if (chat.author) {
+            postsRef.current = [...postsRef.current, chat];
+            setPosts(postsRef.current);
+            scrollToBottomOfChat();
+          }
+        });
+
+        setSocket(socket);
+      });
+
+    return () => {
+      socket.close();
+    };
+  }, []);
+
+  useEffect(() => {
+    setColor(generateGruvboxFromString(username));
+  }, [username]);
+
+  const addPost = () => {
+    setError("");
+    if (socket) {
+      fetch("/posts", {
+        method: "POST",
+        headers: { Content: "application/json" },
+        body: JSON.stringify({ author: username, message: content }),
+      }).then(() => setContent(""));
+    }
+  };
+
+  return (
+    <div className="container" style={{ border: `1px solid ${color}` }}>
+      <div style={{ textAlign: "center" }}>
+        <h2>TronglePosting in ELisp</h2>
+      </div>
+      <div id="chat" className="chat">
+        <p>Welcome!</p>
+        {posts.map((post) => (
+          <div
+            key={post.id}
+            style={{
+              lineBreak: "normal",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+            }}
+          >
+            <div>
+              <span style={{ color: generateGruvboxFromString(post.author) }}>
+                {post.author}:{" "}
+              </span>
+              <span>{post.message}</span>
+            </div>
+            <div style={{ fontSize: "x-small" }}>
+              [{new Date(post.date).toLocaleString()}]
+            </div>
+          </div>
+        ))}
+      </div>
+      <div>
+        <input
+          placeholder={"Username"}
+          className="input"
+          style={{ color }}
+          onChange={(e) => {
+            setUsername(e.target.value);
+          }}
+          value={username}
+        ></input>
+        <textarea
+          placeholder={"Message"}
+          className="input"
+          onChange={(e) => setContent(e.target.value)}
+          value={content}
+          rows={1}
+          cols={50}
+        ></textarea>
+        <div className="button" onClick={addPost}>
+          Post
+        </div>
+        {error ? <p style={{ color: "red" }}>{error}</p> : null}
+      </div>
+    </div>
+  );
+}
+
+export default App;

trongleposting-client/src/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

trongleposting-client/src/utils/generate_gruvbox.js

@@ -0,0 +1,14 @@
+const gruvboxColors = [
+  "#b8bb26",
+  "#fabd2f",
+  "#83a598",
+  "#d3869b",
+  "#8ec07c",
+  "#458588",
+  "#cc241d",
+  "#d65d0e",
+  "#bdae93",
+];
+
+export const generateGruvboxFromString = (string) => 
+  gruvboxColors[Array.from(string).map((x) => x.charCodeAt(0)).reduce((a, x) => a+x, 0) % gruvboxColors.length];