Add README updates and a Github corner.

README.md

@@ -9,6 +9,10 @@ These are my personal projects.
 Observable property and computed value stores designed to work together for storing real and derived
 state.
 
+## [Gallery](./packages/gallery/README.md)
+
+A browser-based app for viewing photos. (WIP)
+
 ## [Portal](./packages/portal/README.md)
 
 A utility to expose an asynchronous API between a web worker and its parent.
@@ -26,13 +30,13 @@ silly.
 
 These are `npm --global` dependencies:
 
-    - [Lerna 2.0.0](https://lernajs.io/)
+* [Lerna 2.0.0](https://lernajs.io/)
-    - [Rollup 0.53.3](https://rollupjs.org/)
+* [Rollup 0.53.3](https://rollupjs.org/)
 
 # Installation
 
-    1. Install global dependencies
+1. Install global dependencies
-    2. `git clone` the repository
+2. `git clone` the repository
-    3. `lerna bootstrap`
+3. `lerna bootstrap`
 
 Now each package is built and ready for use. Stay tuned for working examples.

packages/frptools/README.md

@@ -253,3 +253,12 @@ subscribables.
 provided name or the default if one is supplied. `pick` is not directly used with any subscribable
 but can be useful as the computed function when breaking down a `prop` that contains an object or a
 container.
+
+# Inspiration
+
+FRPTools is the result of years of learning from the following projects:
+
+* [KnockoutJS](http://knockoutjs.com/)
+* [Overture](https://github.com/fastmail/overture)
+* [Redux](https://redux.js.org/)
+* [Mithril](https://mithril.js.org/)

packages/gallery/README.md

@@ -1 +1,32 @@
 # Gallery
+
+This photo gallery originally stemmed from my personal desire to have and host my own memories for
+myself and to share with friends and family. Along the way it became a learning tool as well.
+
+## Development Philosophy
+
+Currently this is a browser-only application. I have an idealistic attraction to the
+[unhosted](https://unhosted.org/) movement and have dreams of this gallery becoming a popular photo
+gallery for anyone who wishes to escape the social media silos.
+
+## Technology
+
+This would not be possible without the giants who have laid the foundation:
+
+* [Webpack](http://webpack.js.org/)
+* [DOMVM](http://leeoniya.github.io/domvm/)
+* [PouchDB](https://pouchdb.com/)
+
+There are many more dependencies. You can find them in the [package.json](./package.json) file.
+
+## Plan
+
+In the future, I plan to add:
+
+* CORS-based storage (to s3 or Google Cloud)
+* Sandstorm support
+* client-side encryption
+* albums
+* tags
+* sharable links
+* video support

packages/gallery/package.json

@@ -8,7 +8,6 @@
 	"author": "Timothy Farrell <tim@thecookiejar.me> (https://github.com/explorigin)",
 	"license": "Apache-2.0",
 	"scripts": {
-		"start": "webpack --config webpack.config.js",
 		"dev": "webpack-dev-server"
 	},
 	"dependencies": {

packages/gallery/src/app.css

@@ -12,3 +12,29 @@ body {
     display: flex;
     flex-direction: column;
 }
+
+/* http://tholman.com/github-corners/ */
+.github-corner:hover .octo-arm{
+	animation:octocat-wave 560ms ease-in-out
+}
+
+@keyframes octocat-wave{
+	0%,100% {
+		transform:rotate(0)
+	}
+	20%,60% {
+		transform:rotate(-25deg)
+	}
+	40%,80% {
+		transform:rotate(10deg)
+	}
+}
+
+@media (max-width:500px){
+	.github-corner:hover .octo-arm{
+		animation:none
+	}
+	.github-corner .octo-arm{
+		animation:octocat-wave 560ms ease-in-out
+	}
+}

packages/gallery/src/interface/allImages.js

@@ -15,6 +15,7 @@ import { ImageType } from '../data/image.js';
 import { pouchDocArrayHash, pouchDocHash, hashSet, extractID } from '../utils/conversion.js';
 import { SectionView } from './sectionView.js';
 import { Icon } from './components/icon.js';
+import { GithubCorner } from './components/githubCorner.js';
 import { AppBar } from './components/appbar.js';
 import { Overlay } from './components/overlay.js';
 import { injectStyle, styled } from '../services/style.js';
@@ -41,6 +42,8 @@ export function AllImagesView(vm, params) {
 	const appBarTitle = computed(s => (s.size > 0 ? `${s.size} selected` : 'Photos'), [selectedIds]);
 	const appBarStyle = computed(
 		t => ({
+			width: 'inherit',
+			marginRight: '40px',
 			boxShadow: t === 0 ? 'none' : `0px 3px 3px rgba(0, 0, 0, .2)`
 		}),
 		[containerScrollTop]
@@ -244,7 +247,8 @@ export function AllImagesView(vm, params) {
 									]
 								)
 						  ]
-				)
+				),
+				GithubCorner('https://github.com/explorigin/portfolio/tree/master/packages/gallery')
 			]
 		);
 	};

packages/gallery/src/interface/components/githubCorner.js

@@ -0,0 +1,54 @@
+import { defineElement as el, defineSvgElement as sv } from '../../utils/domvm.js';
+
+export function GithubCorner(href) {
+	return el(
+		'a.github-corner',
+		{
+			href,
+			'aria-label': 'View source on Github'
+		},
+		[
+			sv(
+				'svg',
+				{
+					width: 80,
+					height: 80,
+					viewBox: '0 0 250 250',
+					style: {
+						fill: '#151513',
+						color: '#fff',
+						position: 'absolute',
+						top: 0,
+						border: 0,
+						right: 0,
+						transform: 'scale(0.7, 0.7)',
+						marginTop: '-13px',
+						marginRight: '-13px'
+					},
+					ariaHidden: true
+				},
+				[
+					sv('path', {
+						d: 'M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z'
+					}),
+					sv('path.octo-arm', {
+						d:
+							'M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2',
+						fill: 'currentColor',
+						style: {
+							transformOrigin: '130px 106px'
+						}
+					}),
+					sv('path.octo-body', {
+						d:
+							'M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z',
+						fill: 'currentColor',
+						style: {
+							transformOrigin: '130px 106px'
+						}
+					})
+				]
+			)
+		]
+	);
+}

packages/projector/README.md

@@ -1,7 +1,8 @@
 # Projector
 
 A DOM-abstraction communicator. Projector consumes patches to update the DOM in _frames_ and
-provides sanitized event objects to subscribers.
+provides sanitized event objects to subscribers. This doesn't work yet. Please go look at the
+gallery. :grinning:
 
 # Usage