Add README updates and a Github corner.
This commit is contained in:
parent
9b0c491794
commit
9381bd6a99
@ -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,8 +30,8 @@ silly.
|
||||
|
||||
These are `npm --global` dependencies:
|
||||
|
||||
- [Lerna 2.0.0](https://lernajs.io/)
|
||||
- [Rollup 0.53.3](https://rollupjs.org/)
|
||||
* [Lerna 2.0.0](https://lernajs.io/)
|
||||
* [Rollup 0.53.3](https://rollupjs.org/)
|
||||
|
||||
# Installation
|
||||
|
||||
|
||||
@ -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/)
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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')
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
54
packages/gallery/src/interface/components/githubCorner.js
Normal file
54
packages/gallery/src/interface/components/githubCorner.js
Normal file
@ -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'
|
||||
}
|
||||
})
|
||||
]
|
||||
)
|
||||
]
|
||||
);
|
||||
}
|
||||
@ -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
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user