git ssb - title coming from distro/ now · Zach!/dat-zine-library@623ff906

Commit 623ff906a993e064e9317ffbb5d9040bb68b975e

title coming from distro/ now

Zach committed on 6/26/2018, 2:33:47 AM
Parent: bfa5d0d4750109fb027d52d8738df5830003c664

Files changed

building/aesthetic/stylesheets/colors-and-fonts.css	changed
building/aesthetic/stylesheets/main.css	changed
building/components/actionButtons.js	changed
building/components/library.js	changed
building/components/newZineForm.js	changed
building/components/branchPlacard.js	added
building/components/newBranchForm.js	added
index.js	changed
volunteers/addingZines.js	deleted
volunteers/addNewZines.js	added
volunteers/jobs.js	deleted
volunteers/branchManager.js	added
volunteers/displayBranchInfo.js	added
volunteers/setBranchName.js	added
distro/info.txt	added

building/aesthetic/stylesheets/colors-and-fonts.cssView
		@@ -11,15 +11,27 @@
11	11 …	--add-button-bg: peachpuff;
12	12 …	--add-button-text: indigo;
13	13 …	--add-button-hover: lavender;
14	14 …
	15 …	+ --branch-button-bg: peachpuff;
	16 …	+ --branch-button-text: indigo;
	17 …	+ --branch-button-hover: lavender;
	18 …	+
15	19 …	--new-zine-form-bg: peachpuff;
16	20 …	--new-zine-form-text: indigo;
17	21 …	--new-zine-form-border: gray;
18	22 …	--new-zine-form-shadow: rgba(93, 87, 87, 0.53);
19	23 …	--new-zine-form-submit-bg: white;
20	24 …	--new-zine-form-submit-bg-hover: lavender;
21	25 …	--new-zine-form-submit-text: indigo;
	26 …	+
	27 …	+ --new-branch-form-bg: peachpuff;
	28 …	+ --new-branch-form-text: indigo;
	29 …	+ --new-branch-form-border: gray;
	30 …	+ --new-branch-form-shadow: rgba(93, 87, 87, 0.53);
	31 …	+ --new-branch-form-submit-bg: white;
	32 …	+ --new-branch-form-submit-bg-hover: lavender;
	33 …	+ --new-branch-form-submit-text: indigo;
22	34 …	}
23	35 …
24	36 …	/* Fonts
25	37 …	------*/

building/aesthetic/stylesheets/main.cssView
		@@ -15,14 +15,22 @@
15	15 …	grid-template-columns: 1fr 1fr;
16	16 …	grid-gap: 2em;
17	17 …	}
18	18 …
19		-#welcome-title{
	19 …	+#branch-placard{
	20 …	+ margin: 0.5em;
	21 …	+ width: 50%;
	22 …	+ text-align: justify;
	23 …	+}
	24 …	+
	25 …	+#branch-placard h1{
20	26 …	font-family: arial;
	27 …	+ font-size: 2em;
21	28 …	font-weight: 100;
22	29 …	letter-spacing: 0.15em;
23	30 …	}
24		-ul{
	31 …	+
	32 …	+#zine-shelves ul{
25	33 …	padding: none;
26	34 …	margin: none;
27	35 …	}
28	36 …
		@@ -77,39 +85,51 @@
77	85 …	background-color: var(--add-button-hover);
78	86 …	color: indigo;
79	87 …	}
80	88 …
81		-#add-button:focus{
82		- outline-width: 0px;
	89 …	+.invisible{
	90 …	+ display: none;
WritePreview
83	91 …	}
84	92 …
85	93 …	#branch-button{
86		- background-color: pink;
87		- color: blue;
	94 …	+ font-size: 1.3em;
	95 …	+ background-color: var(--branch-button-bg);
	96 …	+ color: var(--branch-button-text);
88	97 …	}
89	98 …
90		-#new-zine-form{
	99 …	+.form-card{
91	100 …	position: fixed;
92	101 …	z-index: 1;
93	102 …	right: -60%;
94		- background: var(--new-zine-form-bg);
95		- color: indigo;
96	103 …	width: 40%;
97	104 …	display: flex;
98	105 …	flex-direction: column;
99	106 …	justify-content: space-between;
100	107 …	align-items: left;
101	108 …	border: 1px outset gray;
102		- box-shadow: -2px 4px 20px 6px var(--new-zine-form-shadow);
	109 …	+ box-shadow: -2px 4px 20px 6px var(--new-branch-form-shadow);
103	110 …	}
104	111 …
105		-#new-zine-form h1{
	112 …	+#new-branch-form.form-card{
	113 …	+ background: var(--new-branch-form-bg);
	114 …	+ color: var(--new-branch-form-text);;
	115 …	+}
	116 …	+#new-zine-form.form-card{
	117 …	+ background: var(--new-zine-form-bg);
	118 …	+ color: var(--new-zine-form-text);;
	119 …	+}
	120 …	+
	121 …	+.form-card h1{
106	122 …	margin-top: 0;
107	123 …	font-family: arial;
108	124 …	padding: 0.3em;
109	125 …	}
110	126 …
111		-#new-zine-form form{
	127 …	+.form-card p{
	128 …	+ padding-left: 1em;
	129 …	+ }
	130 …	+
	131 …	+.form-card form{
112	132 …	height: 100%;
113	133 …	width: 100%;
114	134 …	display: flex;
115	135 …	flex-direction: column;
		@@ -117,28 +137,28 @@
117	137 …	font-size: 24px;
118	138 …
119	139 …	}
120	140 …
121		-#new-zine-form label{
	141 …	+.form-card label{
122	142 …	padding-left: 1em;
123	143 …	margin-bottom: 1em;
124	144 …	}
125	145 …
126		-#new-zine-form input{
	146 …	+.form-card input{
127	147 …	width: 75%;
128	148 …	padding-left: 0.5em;
129	149 …	border: none;
130	150 …	background-color: peachpuff;
131	151 …	font-size: 1em;
132	152 …	font-family: 'mononoki';
133	153 …	}
134	154 …
135		-#new-zine-form input:focus {
	155 …	+.form-card input:focus {
136	156 …	outline-width: 0px;
137	157 …	border-bottom: 1px solid indigo;
138	158 …	}
139	159 …
140		-#new-zine-form input[type=submit]{
	160 …	+.form-card input[type=submit]{
141	161 …	width: 100%;
142	162 …	cursor: pointer;
143	163 …	padding: 0.25em;
144	164 …	color: peachpuff;
		@@ -147,9 +167,13 @@
147	167 …	color: indigo;
148	168 …	bottom: 0;
149	169 …	}
150	170 …
151		-#new-zine-form input[type=submit]:hover{
	171 …	+#new-branch-form.form-card input[type=submit]{
	172 …	+ font-size: 24px;
	173 …	+}
	174 …	+
	175 …	+.form-card input[type=submit]:hover{
152	176 …	background-color: lavender;
153	177 …	}
154	178 …
155	179 …	#new-zine-notes{

building/components/actionButtons.jsView
		@@ -1,27 +1,43 @@
1	1 …	const html = require('nanohtml')
2	2 …
3	3 …	module.exports = { addZine, makeBranch }
4	4 …
5		-function addZine () {
6		- return html`
	5 …	+function addZine (state) {
	6 …	+ if (state.identity === 'librarian') {
	7 …	+ return html`
7	8 …	<button id='add-button' onclick=${toggleForm}>Add Zine</button>
8		- `
	9 …	+ `
	10 …	+ }
9	11 …	}
10	12 …
11	13 …	function makeBranch () {
12	14 …	return html`
13		- <button id='branch-button'>Make New Branch</button>
	15 …	+ <button id='branch-button' onclick=${toggleBranch}>Make A New Branch</button>
14	16 …	`
15	17 …	}
16	18 …
17	19 …	function toggleForm () {
18	20 …	var addButton = document.getElementById('add-button')
19	21 …	var form = document.getElementById('new-zine-form')
	22 …	+
20	23 …	form.classList.toggle('revealed')
21	24 …
22	25 …	if (addButton.textContent === 'close') {
23	26 …	addButton.textContent = 'Add Zine'
24	27 …	} else {
25	28 …	addButton.textContent = 'close'
26	29 …	}
27	30 …	}
	31 …	+
	32 …	+function toggleBranch () {
	33 …	+ var branchButton = document.querySelector('#branch-button')
	34 …	+ var form = document.querySelector('#new-branch-form')
	35 …	+
	36 …	+ form.classList.toggle('revealed')
	37 …	+
	38 …	+ if (branchButton.textContent === 'close') {
	39 …	+ branchButton.textContent = 'Make a New Branch!'
	40 …	+ } else {
	41 …	+ branchButton.textContent = 'close'
	42 …	+ }
	43 …	+}

building/components/library.jsView
		@@ -2,16 +2,20 @@
2	2 …
3	3 …	const newZineForm = require('./newZineForm')
4	4 …	const shelving = require('./shelving')
5	5 …	const button = require('./actionButtons')
	6 …	+const branchPlacard = require('./branchPlacard')
	7 …	+const newBranchForm = require('./newBranchForm')
	8 …	+
6	9 …	module.exports = view
7	10 …
8	11 …	function view (state, emit) {
9	12 …	return html`
10	13 …	<body>
11		- <h1 id='welcome-title'>Welcome to your Zine Library, Good Friend!</h1>
12		- ${button.addZine()}
	14 …	+ ${branchPlacard(state, emit)}
	15 …	+ ${button.addZine(state)}
13	16 …	${newZineForm(emit)}
	17 …	+ ${newBranchForm()}
14	18 …	${shelving(state)}
15	19 …	</body>
16	20 …	`
17	21 …	// newZineForm is a button for adding new zines

building/components/newZineForm.jsView
		@@ -7,9 +7,9 @@
7	7 …	//I would like this to be form validated, but cannot figure out how to
8	8 …	// Do so, the regEx pattern matching doesn't seem to work...
9	9 …	return html`
10	10 …	<section id='add-zines'>
11		- <div id='new-zine-form' class='transition'>
	11 …	+ <div id='new-zine-form' class='form-card transition'>
12	12 …	<h1>Add A Zine</h1>
13	13 …	<form onsubmit=${submitZine}>
14	14 …	<label for='title'>Title:
15	15 …	<input id='title' name='title'

building/components/branchPlacard.jsView
		@@ -1,0 +1,29 @@
	1 …	+const html = require('nanohtml')
	2 …	+const raw = require('nanohtml/raw')
	3 …	+const md = require('markdown-it')()
	4 …	+
	5 …	+const button = require('./actionButtons')
	6 …	+
	7 …	+module.exports = view
	8 …	+
	9 …	+function view (state, emit) {
	10 …	+ if (state.branch.title) {
	11 …	+ var branch = state.branch
	12 …	+ console.log({branch})
	13 …	+ return html`
	14 …	+ <section id='branch-placard'>
	15 …	+ <h1>${branch.title}</h1>
	16 …	+ ${render(branch.description)}
	17 …	+ <p>Want to start your own zine library?<span> ${button.makeBranch()}</span></p>
	18 …	+ </section>
	19 …	+ `
	20 …	+ } else {
	21 …	+ return html`<h1>loading</h1>`
	22 …	+ }
	23 …	+}
	24 …	+
	25 …	+function render (text) {
	26 …	+ var htmlFromMarkdown = md.render(text)
	27 …	+ var compatibleHTML = raw(htmlFromMarkdown)
	28 …	+ return html`<article>${compatibleHTML}</article>`
	29 …	+}

building/components/newBranchForm.jsView
		@@ -1,0 +1,27 @@
	1 …	+var html = require('nanohtml')
	2 …	+var choo = require('choo')
	3 …	+
	4 …	+module.exports = view
	5 …	+
	6 …	+function view (emit) {
	7 …	+//I would like this to be form validated, but cannot figure out how to
	8 …	+// Do so, the regEx pattern matching doesn't seem to work...
	9 …	+ return html`
	10 …	+ <div id='new-branch-form' class='form-card transition'>
	11 …	+ <h1>Make a New Branch</h1>
	12 …	+ <p>You can make your own copy of this library by clicking the button below. This will open your library in a new tab.</p>
	13 …	+ <p>It's best to read the README first, as it guides you through setting up your own zines and customizing the site and such. To get to the README on your new branch, click the three dots in the address bar and then click 'view files'.</p>
	14 …	+ <p>Thanks for doing this and have fun!</p>
	15 …	+ <input type='submit' value='Make a Branch!' onclick=${makeBranch}/>
	16 …	+ </div>
	17 …	+ `
	18 …	+ async function makeBranch () {
	19 …	+ document.querySelector('#new-branch-form').classList.toggle('revealed')
	20 …	+ var branchButton = document.querySelector('#branch-button')
	21 …	+ branchButton.textContent = 'Make a New Branch!'
	22 …	+
	23 …	+ var self = new DatArchive(window.location)
	24 …	+ var branch = await DatArchive.fork(self, {title: 'name your branch!', description: 'this description is for beaker, add a longer one in yr distro/ folder'})
	25 …	+ window.open(branch.url)
	26 …	+ }
	27 …	+}

index.jsView
		@@ -3,9 +3,11 @@
3	3 …	const library = require('./building/components/library')
4	4 …
5	5 …	const app = choo()
6	6 …
7		-//Jobs to be done by the javascript volunteers
8		-app.use(require('./volunteers/jobs'))
9		-app.use(require('./volunteers/addingZines'))
	7 …	+// Jobs to be done by the javascript volunteers
	8 …	+app.use(require('./volunteers/branchManager'))
	9 …	+app.use(require('./volunteers/addNewZines'))
	10 …	+app.use(require('./volunteers/displayBranchInfo'))
	11 …	+
10	12 …	app.mount('body')
11	13 …	app.route('/', library)

volunteers/addingZines.jsView
		@@ -1,31 +1,0 @@
1		-const smarkt = require('smarkt')
2		-const _ = require('lodash')
3		-
4		-var archive = new DatArchive(window.location)
5		-
6		-function store (state, emitter) {
7		- emitter.on('zine submitted', function (zineSubmission) {
8		- var details = getDetails(zineSubmission)
9		- var zineJson = JSON.stringify(details, null, 2)
10		- writeZineTxt(zineJson, emitter)
11		- })
12		-}
13		-
14		-function getDetails (form) {
15		- var formData = new FormData(form)
16		- var data = {}
17		- for (var pair of formData.entries()) {
18		- data[pair[0]] = pair[1]
19		- }
20		- return data
21		-}
22		-
23		-function writeZineTxt (zine, emitter) {
24		- zine = JSON.parse(zine)
25		- var fileName = zine.title.replace(/ /g, '-') + '.txt'
26		- var pleasantText = smarkt.stringify(zine)
27		- archive.writeFile(`zines/${fileName}`, pleasantText)
28		- .then(() => emitter.emit('update library', zine))
29		-}
30		-
31		-module.exports = store

volunteers/addNewZines.jsView
		@@ -1,0 +1,31 @@
	1 …	+const smarkt = require('smarkt')
	2 …	+const _ = require('lodash')
	3 …	+
	4 …	+var archive = new DatArchive(window.location)
	5 …	+
	6 …	+function store (state, emitter) {
	7 …	+ emitter.on('zine submitted', function (zineSubmission) {
	8 …	+ var details = getDetails(zineSubmission)
	9 …	+ var zineJson = JSON.stringify(details, null, 2)
	10 …	+ writeZineTxt(zineJson, emitter)
	11 …	+ })
	12 …	+}
	13 …	+
	14 …	+function getDetails (form) {
	15 …	+ var formData = new FormData(form)
	16 …	+ var data = {}
	17 …	+ for (var pair of formData.entries()) {
	18 …	+ data[pair[0]] = pair[1]
	19 …	+ }
	20 …	+ return data
	21 …	+}
	22 …	+
	23 …	+function writeZineTxt (zine, emitter) {
	24 …	+ zine = JSON.parse(zine)
	25 …	+ var fileName = zine.title.replace(/ /g, '-') + '.txt'
	26 …	+ var pleasantText = smarkt.stringify(zine)
	27 …	+ archive.writeFile(`zines/${fileName}`, pleasantText)
	28 …	+ .then(() => emitter.emit('update library', zine))
	29 …	+}
	30 …	+
	31 …	+module.exports = store

volunteers/jobs.jsView
		@@ -1,87 +1,0 @@
1		-const smarkt = require('smarkt')
2		-const _ = require('lodash')
3		-const html = require('nanohtml')
4		-
5		-
6		-var archive = new DatArchive(window.location)
7		-
8		-function store (state, emitter) {
9		- state.library = []
10		- state.info = {}
11		- state.covers = {}
12		- state.identity = ''
13		-
14		- emitter.on('DOMContentLoaded', function () {
15		- setIdentity()
16		- archive.readdir('zines')
17		- .then(zines => mapToState(zines))
18		- })
19		-
20		- emitter.on('update library', function (zine) {
21		- addToLibrary(zine)
22		- addZineInfo(zine.url)
23		- addZineCover(zine.url)
24		- })
25		-
26		- function mapToState (zines) {
27		- zines.map(zine => {
28		- archive.readFile(`zines/${zine}`)
29		- .then(rawText => {
30		- var textJson = smarkt.parse(rawText)
31		- addToLibrary(textJson)
32		- addZineInfo(textJson.url)
33		- addZineCover(textJson.url)
34		- })
35		- })
36		- }
37		-
38		- function addToLibrary (text) {
39		- state.library = [...state.library, text]
40		- emitter.emit('pushState')
41		- }
42		-
43		- function addZineInfo (datUrl) {
44		- var zine = new DatArchive(datUrl)
45		- zine.readFile('distro/info.txt')
46		- .then(text => {
47		- mapInfoToState(text, zine['url'])
48		- })
49		- }
50		-
51		- function addZineCover (datUrl) {
52		- var zine = new DatArchive(datUrl)
53		- zine.readdir('distro')
54		- .then(files => {
55		- mapCoverToState(files, zine['url'])
56		- })
57		- }
58		-
59		- function mapInfoToState (info, datUrl) {
60		- var infoJson = smarkt.parse(info)
61		- state.info[datUrl] = infoJson
62		- emitter.emit('pushState')
63		- }
64		-
65		- function mapCoverToState (files, datUrl) {
66		- var cover = files.find(file => sansExtension(file) === 'cover')
67		- state.covers[datUrl] = `${datUrl}/distro/${cover}`
68		- emitter.emit('pushState')
69		- }
70		-
71		- async function setIdentity () {
72		- var info = await archive.getInfo()
73		- if (info.isOwner) {
74		- state.identity = 'librarian'
75		- emitter.emit('pushState')
76		- } else {
77		- state.identity = 'visitor'
78		- emitter.emit('pushstate')
79		- }
80		- }
81		-}
82		-
83		-function sansExtension (file) {
84		- return file.split('.')[0]
85		-}
86		-
87		-module.exports = store

volunteers/branchManager.jsView
		@@ -1,0 +1,87 @@
	1 …	+const smarkt = require('smarkt')
	2 …	+const _ = require('lodash')
	3 …	+const html = require('nanohtml')
	4 …	+
	5 …	+
	6 …	+var archive = new DatArchive(window.location)
	7 …	+
	8 …	+function store (state, emitter) {
	9 …	+ state.library = []
	10 …	+ state.info = {}
	11 …	+ state.covers = {}
	12 …	+ state.identity = ''
	13 …	+
	14 …	+ emitter.on('DOMContentLoaded', function () {
	15 …	+ setIdentity()
	16 …	+ archive.readdir('zines')
	17 …	+ .then(zines => mapToState(zines))
	18 …	+ })
	19 …	+
	20 …	+ emitter.on('update library', function (zine) {
	21 …	+ addToLibrary(zine)
	22 …	+ addZineInfo(zine.url)
	23 …	+ addZineCover(zine.url)
	24 …	+ })
	25 …	+
	26 …	+ function mapToState (zines) {
	27 …	+ zines.map(zine => {
	28 …	+ archive.readFile(`zines/${zine}`)
	29 …	+ .then(rawText => {
	30 …	+ var textJson = smarkt.parse(rawText)
	31 …	+ addToLibrary(textJson)
	32 …	+ addZineInfo(textJson.url)
	33 …	+ addZineCover(textJson.url)
	34 …	+ })
	35 …	+ })
	36 …	+ }
	37 …	+
	38 …	+ function addToLibrary (text) {
	39 …	+ state.library = [...state.library, text]
	40 …	+ emitter.emit('pushState')
	41 …	+ }
	42 …	+
	43 …	+ function addZineInfo (datUrl) {
	44 …	+ var zine = new DatArchive(datUrl)
	45 …	+ zine.readFile('distro/info.txt')
	46 …	+ .then(text => {
	47 …	+ mapInfoToState(text, zine['url'])
	48 …	+ })
	49 …	+ }
	50 …	+
	51 …	+ function addZineCover (datUrl) {
	52 …	+ var zine = new DatArchive(datUrl)
	53 …	+ zine.readdir('distro')
	54 …	+ .then(files => {
	55 …	+ mapCoverToState(files, zine['url'])
	56 …	+ })
	57 …	+ }
	58 …	+
	59 …	+ function mapInfoToState (info, datUrl) {
	60 …	+ var infoJson = smarkt.parse(info)
	61 …	+ state.info[datUrl] = infoJson
	62 …	+ emitter.emit('pushState')
	63 …	+ }
	64 …	+
	65 …	+ function mapCoverToState (files, datUrl) {
	66 …	+ var cover = files.find(file => sansExtension(file) === 'cover')
	67 …	+ state.covers[datUrl] = `${datUrl}/distro/${cover}`
	68 …	+ emitter.emit('pushState')
	69 …	+ }
	70 …	+
	71 …	+ async function setIdentity () {
	72 …	+ var info = await archive.getInfo()
	73 …	+ if (info.isOwner) {
	74 …	+ state.identity = 'librarian'
	75 …	+ emitter.emit('pushState')
	76 …	+ } else {
	77 …	+ state.identity = 'visitor'
	78 …	+ emitter.emit('pushstate')
	79 …	+ }
	80 …	+ }
	81 …	+}
	82 …	+
	83 …	+function sansExtension (file) {
	84 …	+ return file.split('.')[0]
	85 …	+}
	86 …	+
	87 …	+module.exports = store

volunteers/displayBranchInfo.jsView
		@@ -1,0 +1,17 @@
	1 …	+const smarkt = require('smarkt')
	2 …	+
	3 …	+var archive = new DatArchive(window.location)
	4 …	+
	5 …	+function store (state, emitter) {
	6 …	+ state.branch = {}
	7 …	+ emitter.on('DOMContentLoaded', function () {
	8 …	+ archive.readFile('distro/info.txt')
	9 …	+ .then(file => {
	10 …	+ var branchInfo = smarkt.parse(file)
	11 …	+ state.branch = branchInfo
	12 …	+ emitter.emit('pushState')
	13 …	+ })
	14 …	+ })
	15 …	+}
	16 …	+
	17 …	+module.exports = store

volunteers/setBranchName.jsView

distro/info.txtView
		@@ -1,0 +1,9 @@
	1 …	+title: Zach Mandeville's Zine Library
	2 …	+----
	3 …	+description:
	4 …	+
	5 …	+The first dat zine library, but hopefully not the last! Collecting zines I wrote, my friends wrote, and ones that I discovered through sharing on here.
	6 …	+
	7 …	+
	8 …	+Send me your zine! [webmaster@coolguy.website](mailto:webmaster@coolguy.website) or through [Scuttlebutt](https://scuttlebutt.nz) (where I am Zach!)
	9 …	+

Built with git-ssb-web

Zach! / dat-zine-library

Commit 623ff906a993e064e9317ffbb5d9040bb68b975e

title coming from distro/ now

Files changed