(loading content)
51 |
52 |
53 |
54 |
62 | 63 | 64 | What did you change? 65 | 66 |
67 | 68 | 69 |
70 |
71 |
55 | Someone else is currently editing this file, so it is locked.
56 | You can forceably unlock this page for editing if
57 | you want.
58 |
59 | 60 |
61 | 59 | 60 |
62 | 63 | 64 | What did you change? 65 | 66 |
67 | 68 | 69 |
72 | Close Content Pane
73 |
74 | 75 |
76 |
77 |
82 |
83 |
84 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "firebase-wiki",
3 | "description": "Wiki Engine powered by Firestore",
4 | "version": "0.0.1",
5 | "license": "Apache-2.0",
6 | "author": "Nick Felker",
7 | "engines": {
8 | "node": ">=6.0.0"
9 | },
10 | "scripts": {
11 | "build-wiki": "./node_modules/parcel-bundler/bin/cli.js build index.html",
12 | "clean": "rm -rf ./dist/",
13 | "create-firebase-config": "./node_modules/.bin/firebase setup:web --json > ./setup/firebase-env.json",
14 | "lint": "eslint --fix src/*.js",
15 | "serve-local": "npm run clean && npm run build-wiki && ./node_modules/.bin/firebase serve",
16 | "serve": "npm run clean && npm run build-wiki && ./node_modules/.bin/firebase deploy",
17 | "test": "npm run test-build",
18 | "test-build": "npm run clean && npm run lint && npm run build-wiki"
19 | },
20 | "repository": {
21 | "type": "git",
22 | "url": "git+https://github.com/actions-on-google/actions-on-google-nodejs.git"
23 | },
24 | "bugs": {
25 | "url": "https://github.com/actions-on-google/actions-on-google-nodejs/issues"
26 | },
27 | "homepage": "https://github.com/actions-on-google/actions-on-google-nodejs#readme",
28 | "keywords": [
29 | "wiki",
30 | "firestore"
31 | ],
32 | "dependencies": {
33 | "firebase": "^4.12.0",
34 | "get-query-param": "^2.0.3",
35 | "history": "^4.7.2",
36 | "remark-html": "^7.0.0",
37 | "remark-parse": "^5.0.0",
38 | "textdiff-create": "1.0.3",
39 | "textdiff-patch": "1.0.3",
40 | "unified": "^6.1.6"
41 | },
42 | "devDependencies": {
43 | "eslint": "^4.19.1",
44 | "eslint-config-google": "^0.9.1",
45 | "firebase-tools": "^6.1.1",
46 | "parcel-bundler": "^1.9.7"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/setup/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "wikiname": "My Wiki",
3 | "read-pages": "AUTH_REQUIRED",
4 | "valid-emails": ["example@gmail.com"]
5 | }
--------------------------------------------------------------------------------
/src/wiki-engine.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2018 Google Inc. All Rights Reserved.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | 'use strict';
18 |
19 | // Diffing engine
20 | const diffcreate = require('textdiff-create');
21 | const diffpatch = require('textdiff-patch');
22 |
23 | // Firebase init
24 | const firebase = require('firebase/app');
25 | // Required for side-effects
26 | require('firebase/auth');
27 | require('firebase/firestore');
28 | const env = require('../setup/firebase-env.json');
29 | firebase.initializeApp(env.result);
30 | // Authentication
31 | const authProvider = new firebase.auth.GoogleAuthProvider();
32 | const db = firebase.firestore();
33 | db.settings({timestampsInSnapshots: true});
34 |
35 | const config = require('../setup/config.json');
36 | const unified = require('unified');
37 | const markdown = require('remark-parse');
38 | const html = require('remark-html');
39 |
40 | // Initialize our browser history from now on
41 | // import createHistory from 'history/createBrowserHistory'
42 |
43 | // Sanitize user input
44 | function escapeUserInput(unsafe) {
45 | return unsafe
46 | .replace(/&/g, '&')
47 | .replace(//g, '>')
49 | .replace(/"/g, '"')
50 | .replace(/'/g, ''');
51 | }
52 |
53 | function renderWikiData(rawMarkdownContent) {
54 | return new Promise((resolve, reject) => {
55 | // Sanitize user content
56 | let markdownContent = escapeUserInput(rawMarkdownContent);
57 | // Export from Markdown to HTML
58 | // TODO Move special text features to separate JS file
59 | /*
60 | * Render special text features
61 | *
62 | * Hello [[world]] => Hello world
63 | * Hello [[world|World]] => Hello World
64 | */
65 | markdownContent = markdownContent.replace(/\[\[([A-Za-z]*)]]/g,
66 | '$1');
67 |
68 | markdownContent = markdownContent
69 | .replace(/\[\[([A-Za-z1-9\s-]*)\|([A-Za-z1-9\s-]*)]]/g,
70 | '$2');
71 | /*
72 | * Render infoboxes in a key-value system
73 | * These are JSON objects wrapped in curly brackets
74 | * An `image` will get rendered at the top.
75 | * Other key-values are rendered in order.
76 | * These _require_ quotes for key and value.
77 | * Starting with # creates a new section with the value's name
78 | * {{
79 | * "title": "Title",
80 | * "image": "http://example.com/image.png",
81 | * "name": "Example",
82 | * "subtitle": "Subtitle",
83 | * "#1": "Section 1"
84 | * }}
85 | */
86 | const infoboxMatches = markdownContent.match(/{{(?:.|\n)+?}}/g);
87 | try {
88 | if (infoboxMatches) {
89 | for (const infoboxObject of infoboxMatches) {
90 | // Replace HTML out
91 | let infobox = '74 | 75 |
';
92 | console.log(infoboxObject.substring(1, infoboxObject.length - 1));
93 | const jsonString = infoboxObject.substring(1, infoboxObject.length - 1);
94 | // Convert escaped characters back to original characters to do the JSON parsing
95 | const jsonStringUnescaped = jsonString.replace(/"/g, '"');
96 | const jsonObject = JSON.parse(jsonStringUnescaped);
97 | if (jsonObject.title) {
98 | infobox += `
`;
103 | }
104 | infobox += '';
105 | for (const key in jsonObject) {
106 | if (key == 'image') continue;
107 | if (key == 'title') continue;
108 | if (key.indexOf('#') == 0) {
109 | infobox += `
';
117 | markdownContent = markdownContent.replace(infoboxObject, infobox);
118 | }
119 | }
120 | } catch (e) {
121 | // If it fails, let it fail and display weird text on page.
122 | console.warn(e);
123 | }
124 |
125 | unified()
126 | .use(markdown)
127 | .use(html)
128 | .process(markdownContent, (err, html) => {
129 | if (err) {
130 | reject(err);
131 | return;
132 | }
133 | let htmlout = String(html);
134 | // Add an optional table of contents
135 | if (htmlout.match(/${escapeUserInput(jsonObject.title)}
`;
99 | }
100 | if (jsonObject.image) {
101 | // Display an image
102 | infobox += `| ` + 110 | `${escapeUserInput(jsonObject[key])} | |
| ${key} | ` + 113 | `${escapeUserInput(jsonObject[key])} |
/g) &&
136 | htmlout.match(//g).length >= 2) {
137 | console.info('Create a TOC');
138 | // Display table of contents
139 | let toc = '' +
140 | 'Contents';
141 | console.log(htmlout);
142 | const headings = htmlout.match(/.+?<\/h[1-5]>/g);
143 | let prevType = 1;
144 | for (const heading of headings) {
145 | const headingType = parseInt(heading.substring(2, 3));
146 | const headingTitle = heading.substring(4, heading.length - 5);
147 | console.info(headingTitle, 'is h', headingType);
148 | if (prevType < headingType) {
149 | for (let i = prevType; i < headingType; i++) {
150 | toc += ``;
151 | }
152 | } else if (prevType > headingType) {
153 | for (let i = prevType; i > headingType; i--) {
154 | toc += `
`;
155 | }
156 | }
157 | const headingId = headingTitle.indexOf(' ') > -1 ?
158 | headingTitle.substring(0, headingTitle.indexOf(' ')) :
159 | headingTitle;
160 | toc += `- ${headingTitle}`;
161 | prevType = headingType;
162 | console.log(toc);
163 | }
164 | toc += '
';
165 | // Update each heading to have a navigatable id
166 | // Hello world
=> Hello world
167 | htmlout = htmlout.replace(/(([A-Za-z]+).*?)<\/h[1-5]>/g,
168 | '$2 ');
169 | console.info('Added navigatable IDs');
170 | // Update with TOC
171 | console.log(htmlout);
172 | htmlout = htmlout.replace('`;
216 | const listOfPages = document.querySelector('#list-of-pages');
217 | db.collection('wikipages').onSnapshot((querySnapshot) => {
218 | querySnapshot.forEach((doc) => {
219 | const docData = doc.data();
220 | listOfPages.innerHTML += `` +
221 | `${escapeUserInput(docData.title)} `;
222 | });
223 | });
224 | lastUpdated.textContent = '(autogenerated page)';
225 | contentEditor.style.display = 'none';
226 | return;
227 | } else if (pagename === 'special:login') {
228 | title.textContent = 'Please login';
229 | discussButton.style.display = 'none'; // Can't edit this page
230 | editButton.style.display = 'none'; // Can't edit this page
231 | historyButton.style.display = 'none'; // Can't edit this page
232 | body.textContent = '';
233 | lastUpdated.textContent = '(autogenerated page)';
234 | contentEditor.style.display = 'none';
235 | return;
236 | } else if (pagename === 'user:me') {
237 | const user = firebase.auth().currentUser;
238 | navigateToPage(`?p=user:${user.uid}`);
239 | return;
240 | }
241 |
242 | // Pull data from Firestore
243 | // TODO Resolve pagename -- handle redirects
244 | // Show metadata
245 | db.collection('wikipages').doc(pagename).onSnapshot((doc) => {
246 | const metadata = doc.data();
247 | console.log(doc);
248 | console.log('Current page metadata: ', metadata);
249 |
250 | if (pagename.indexOf('discuss:') == 0) {
251 | // Don't have a discuss:discuss:
252 | // Link to the actual article
253 | discussButton.textContent = 'Article';
254 | discussButton.href = `?p=${doc.id.substring(8)}`;
255 | } else {
256 | discussButton.href = `?p=Discuss:${doc.id}`;
257 | }
258 |
259 | if (metadata) {
260 | // Lock editor if someone else is editing it simultaneously
261 | if (!doc._document.hasLocalMutations && metadata.editing) {
262 | editor.contentEditable = false;
263 | save.style.display = 'none';
264 | forceUnlock.style.display = 'block';
265 | } else {
266 | editor.contentEditable = true;
267 | save.style.display = 'block';
268 | forceUnlock.style.display = 'none';
269 | }
270 | // Display page metacontent
271 | title.textContent = metadata.title;
272 | lastUpdated.textContent = new Date(metadata.lastupdated).toUTCString();
273 | window.title = `${escapeUserInput(metadata.title)} | ` +
274 | `${escapeUserInput(config.wikiname)}`;
275 | pageExists = true;
276 |
277 | // Build our content from changes
278 | let markdownContent = '';
279 | pageDeltas = [];
280 | db.collection('wikipages')
281 | .doc(pagename)
282 | .collection('deltas')
283 | .onSnapshot((snapshot) => {
284 | snapshot.docChanges.forEach((change) => {
285 | const data = change.doc.data();
286 | console.log('Retrieved delta', data);
287 | pageDeltas.push(change.doc);
288 | markdownContent = diffpatch(markdownContent,
289 | JSON.parse(data.delta));
290 | });
291 | console.info(markdownContent);
292 | renderWikiData(markdownContent)
293 | .then((html) => {
294 | body.innerHTML = html;
295 | editor.innerHTML = escapeUserInput(markdownContent);
296 | preview.innerHTML = html;
297 | });
298 | });
299 | } else {
300 | console.warn('This page does not exist');
301 | // Page creator view
302 | title.textContent = pagename;
303 | body.textContent = 'Click the EDIT icon to create this page.';
304 | }
305 | });
306 |
307 | /**
308 | * Content pane - History
309 | */
310 | historyButton.onclick = () => {
311 | let out = 'History of changes
';
312 | for (const change of pageDeltas) {
313 | console.log(change);
314 | const changeUtcString = new Date(parseInt(change.id)).toUTCString();
315 | // Santizies user-entered commit message
316 | out += `` +
317 | `${escapeUserInput(change.data().commit)}
` +
318 | `By ${change.data().authorName} (${change.data().authorId})` +
319 | `` +
320 | ``;
321 | }
322 | contentPane.innerHTML = out;
323 | contentPaneContainer.style.display = 'inline-block';
324 | };
325 | contentPaneClose.onclick = () => {
326 | contentPaneContainer.style.display = 'none';
327 | };
328 |
329 | /**
330 | * Enable editor
331 | */
332 | contentEditor.style.display = 'none';
333 |
334 | editButton.onclick = () => {
335 | if (!pageExists) {
336 | // Create the page.
337 | db.collection('wikipages').doc(pagename).set({
338 | title: title.innerText,
339 | lastupdated: new Date().getTime(),
340 | }).then((docRef) => {
341 | console.info('Created page');
342 | });
343 | }
344 | // Lock this page from others editing
345 | db.collection('wikipages').doc(pagename).update({
346 | editing: true,
347 | });
348 | const originalMarkdown = editor.innerText;
349 | contentEditor.style.display = 'block';
350 | body.style.display = 'none';
351 | title.contentEditable = true;
352 | title.classList.add('editable');
353 |
354 | save.innerText = 'Save';
355 | save.onclick = () => {
356 | console.log(originalMarkdown, editor.innerText);
357 | const patch = diffcreate(originalMarkdown, editor.innerText);
358 | console.log(JSON.stringify(patch));
359 | save.innerText = 'Saving...'; // Indicate progress
360 |
361 | db.runTransaction((transaction) => {
362 | // Save to our wiki page with the current timestamp
363 | const timestamp = new Date().getTime();
364 |
365 | const dbRef = db.collection('wikipages')
366 | .doc(pagename)
367 | .collection('deltas')
368 | .doc(`${timestamp}`);
369 | const metadataRef = db.collection('wikipages')
370 | .doc(pagename);
371 |
372 | transaction.set(dbRef, {
373 | delta: JSON.stringify(patch),
374 | commit: commit.innerText,
375 | pageTitle: title.innerText,
376 | authorId: firebase.auth().currentUser.uid,
377 | authorName: firebase.auth().currentUser.displayName,
378 | });
379 | transaction.update(metadataRef, {
380 | title: title.innerText,
381 | lastupdated: timestamp,
382 | });
383 | return Promise.resolve();
384 | }).then(() => {
385 | console.log(`Document updated`);
386 | // Return to viewer
387 | cancel.click();
388 | }).catch((error) => {
389 | console.error('Update failed:', error);
390 | });
391 | };
392 |
393 | forceUnlock.onclick = () => {
394 | db.collection('wikipages')
395 | .doc(pagename)
396 | .update({
397 | editing: false,
398 | }).then((docRef) => {
399 | return db.collection('wikipages')
400 | .doc(pagename)
401 | .update({
402 | editing: true, // Re-lock it
403 | });
404 | }).then((docRef) => {
405 | console.info('Unlocked page for editing');
406 | });
407 | };
408 |
409 | cancel.onclick = () => {
410 | contentEditor.style.display = 'none';
411 | body.style.display = 'inline-block';
412 | title.classList.remove('editable');
413 | title.contentEditable = false;
414 | db.collection('wikipages').doc(pagename).update({
415 | editing: false,
416 | });
417 | };
418 |
419 | editor.onkeyup = () => {
420 | // Render live preview
421 | renderWikiData(editor.innerText)
422 | .then((html) => {
423 | preview.innerHTML = html;
424 | });
425 | };
426 | };
427 | }
428 |
429 | const navigateToPage = (page) => {
430 | if (window.location.search != page) {
431 | window.location = page;
432 | }
433 | };
434 |
435 | window.addEventListener('load', () => {
436 | // Initialize user-defined configuration
437 | window.title = config.wikiname;
438 | // Check our current location
439 | const getQueryParam = require('get-query-param');
440 | const page = getQueryParam('p', window.location.href) || 'home';
441 | // Setup our login page
442 | document.querySelector('#login-notauth').onclick = () => {
443 | firebase.auth().signInWithPopup(authProvider).then(() => {
444 | navigateToPage('?p=Home');
445 | });
446 | };
447 | document.querySelector('#login-exit').onclick = () => {
448 | firebase.auth().signOut();
449 | };
450 | firebase.auth().onAuthStateChanged((user) => {
451 | loadWikiPage(page);
452 | if (user) {
453 | // User is signed in.
454 | const displayName = user.displayName;
455 | const email = user.email;
456 | document.querySelector('#my-name').textContent = displayName;
457 | if (config['valid-emails'] &&
458 | config['valid-emails'].indexOf(email) == -1) {
459 | console.error('User is logged in, but they do not have permission to view this page');
460 | navigateToPage('?p=Special:Login');
461 | }
462 | document.querySelector('#login-notauth').style.display = 'none';
463 | } else {
464 | if (config['read-pages'] && config['read-pages'] === 'AUTH_REQUIRED') {
465 | navigateToPage('?p=Special:Login');
466 | }
467 | document.querySelector('#login-welcome').style.display = 'none';
468 | }
469 | });
470 | });
471 |
--------------------------------------------------------------------------------
/styles/wiki.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2018 Google Inc. All Rights Reserved.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | /* Include our fonts */
18 | @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700|Overpass+Mono');
19 |
20 | body {
21 | font-family: 'Roboto', sans-serif;
22 | background-color: #fff;
23 | margin: 0px;
24 | margin-left: 200px;
25 | }
26 |
27 | h1 {
28 | font-weight: 300;
29 | }
30 |
31 | .sidebar {
32 | height: 100vh;
33 | background-color: #fefefe;
34 | margin-left: -200px;
35 | display: inline-table;
36 | width: 180px;
37 | border-right: solid 1px #09f;
38 | vertical-align: top;
39 | position: absolute;
40 | }
41 |
42 | .sidebar a, .sidebar header {
43 | padding-left: 4px;
44 | }
45 |
46 | .sidebar header {
47 | font-family: 'Roboto Condensed', sans-serif;
48 | font-size: medium;
49 | border-bottom: solid 1px #cccccc;
50 | margin-top: 8px;
51 | }
52 |
53 | .top-navigation {
54 | border-bottom: solid 1px black;
55 | display: inline-block;
56 | width: 100%;
57 | }
58 |
59 | h1#title {
60 | padding-left: 40px;
61 | display: inline-block;
62 | padding-right: 120px;
63 | }
64 |
65 | h1.editable#title {
66 | padding-left: 40px;
67 | display: inline-block;
68 | /* I like this font, with its slants. It's got a nice typewriter feel */
69 | font-family: 'Overpass Mono', monospace;
70 | border: solid 1px #09f;
71 | }
72 |
73 | .actions {
74 | text-align: right;
75 | display: inline-block;
76 | font-weight: bold;
77 | font-family: 'Roboto Condensed', sans-serif;
78 | color: #333;
79 | }
80 |
81 | .actions span, .actions a {
82 | margin-right: 16px;
83 | cursor: pointer;
84 | text-decoration: none;
85 | }
86 |
87 | #content {
88 | padding-left: 40px;
89 | padding-right: 80px;
90 | width: 800px;
91 | display: inline-block;
92 | vertical-align: top;
93 | }
94 |
95 | footer {
96 | border-top: solid 1px #999;
97 | width: calc(100vw - 260px);
98 | margin-left: 0px;
99 | display: inline-block;
100 | margin-bottom: 20px;
101 | }
102 |
103 | footer .update {
104 | font-size: 9pt;
105 | margin-top: 8px;
106 | }
107 |
108 | #editor {
109 | font-family: 'Overpass Mono', monospace;
110 | border: solid 1px #09f;
111 | white-space: pre-line;
112 | }
113 |
114 | #editor, #preview {
115 | width: calc(50% - 4px);
116 | display: inline-block;
117 | }
118 |
119 | #commit {
120 | width: 50em;
121 | font-family: 'Overpass Mono', monospace;
122 | border: solid 1px #09f;
123 | font-size: 9pt;
124 | display: inline-block;
125 | }
126 |
127 | #content-editor {
128 | display: none;
129 | }
130 |
131 | #content-pane {
132 | overflow-x: hidden;
133 | overflow-y: scroll;
134 | height: calc(100vh - 220px);
135 | }
136 |
137 | #content-pane-container {
138 | width: 300px;
139 | display: none;
140 | border: solid 1px #999;
141 | padding: 16px;
142 | float: right;
143 | margin-right: 24px;
144 | }
145 |
146 | .card {
147 | border: solid 1px #999;
148 | border-radius: 12px;
149 | margin-bottom: 16px;
150 | box-shadow: black 0px 1px 5px -2px;
151 | }
152 |
153 | .card h1 {
154 | font-size: 12pt;
155 | font-family: 'Roboto condensed';
156 | margin-left: 8px;
157 | }
158 |
159 | .card span {
160 | margin-left: 8px;
161 | font-size: 8pt;
162 | }
163 |
164 | .card footer {
165 | font-size: 8pt;
166 | margin-left: 16px;
167 | border: none;
168 | font-style: italic;
169 | }
170 |
171 | .infobox {
172 | float: right;
173 | background-color: #efefef;
174 | padding: 4px;
175 | border: solid 1px #999;
176 | box-shadow: black 0px 1px 3px -1px;
177 | margin-top: 8px;
178 | }
179 |
180 | .infobox img {
181 | width: 200px;
182 | }
183 |
184 | .infobox li {
185 | display: block;
186 | }
187 |
188 | .infobox i {
189 | font-style: normal;
190 | font-weight: 900;
191 | font-size: 10pt;
192 | }
193 |
194 | .infobox span {
195 | margin-left: 8px;
196 | font-size: 10pt;
197 | }
198 |
199 | .infobox table {
200 | width: 100%;
201 | }
202 |
203 | .infobox .heading {
204 | text-transform: uppercase;
205 | font-size: 8pt;
206 | width: 100%;
207 | background-color: #80DEEA;
208 | text-align: center;
209 | }
210 |
211 | .infobox .title {
212 | margin: 0px;
213 | text-align: center;
214 | font-size: 12pt;
215 | font-weight: bold;
216 | margin-bottom: 4px;
217 | }
218 |
219 | .table-of-contents {
220 | border: solid 1px #999;
221 | background: #efefef;
222 | padding: 4px;
223 | width: 240px;
224 | box-shadow: black 0px 2px 3px -2px;
225 | background-color: white;
226 | }
227 |
228 | .table-of-contents ol {
229 | padding-left: 16px;
230 | padding-bottom: 6px;
231 | padding-top: 2px;
232 | }
233 |
234 | /* http://jsfiddle.net/qGCUk/4/ */
235 | .table-of-contents ol {
236 | counter-reset: item;
237 | }
238 |
239 | .table-of-contents li {
240 | display: block;
241 | }
242 |
243 | .table-of-contents li:before {
244 | content: counters(item, ".") " ";
245 | counter-increment: item;
246 | }
--------------------------------------------------------------------------------
' +
140 | 'Contents
';
165 | // Update each heading to have a navigatable id
166 | // - ';
141 | console.log(htmlout);
142 | const headings = htmlout.match(/
- ${headingTitle}`; 161 | prevType = headingType; 162 | console.log(toc); 163 | } 164 | toc += '
- `;
151 | }
152 | } else if (prevType > headingType) {
153 | for (let i = prevType; i > headingType; i--) {
154 | toc += `
Hello world
=>Hello world
167 | htmlout = htmlout.replace(/History of changes
'; 312 | for (const change of pageDeltas) { 313 | console.log(change); 314 | const changeUtcString = new Date(parseInt(change.id)).toUTCString(); 315 | // Santizies user-entered commit message 316 | out += `` +
317 | `
`;
321 | }
322 | contentPane.innerHTML = out;
323 | contentPaneContainer.style.display = 'inline-block';
324 | };
325 | contentPaneClose.onclick = () => {
326 | contentPaneContainer.style.display = 'none';
327 | };
328 |
329 | /**
330 | * Enable editor
331 | */
332 | contentEditor.style.display = 'none';
333 |
334 | editButton.onclick = () => {
335 | if (!pageExists) {
336 | // Create the page.
337 | db.collection('wikipages').doc(pagename).set({
338 | title: title.innerText,
339 | lastupdated: new Date().getTime(),
340 | }).then((docRef) => {
341 | console.info('Created page');
342 | });
343 | }
344 | // Lock this page from others editing
345 | db.collection('wikipages').doc(pagename).update({
346 | editing: true,
347 | });
348 | const originalMarkdown = editor.innerText;
349 | contentEditor.style.display = 'block';
350 | body.style.display = 'none';
351 | title.contentEditable = true;
352 | title.classList.add('editable');
353 |
354 | save.innerText = 'Save';
355 | save.onclick = () => {
356 | console.log(originalMarkdown, editor.innerText);
357 | const patch = diffcreate(originalMarkdown, editor.innerText);
358 | console.log(JSON.stringify(patch));
359 | save.innerText = 'Saving...'; // Indicate progress
360 |
361 | db.runTransaction((transaction) => {
362 | // Save to our wiki page with the current timestamp
363 | const timestamp = new Date().getTime();
364 |
365 | const dbRef = db.collection('wikipages')
366 | .doc(pagename)
367 | .collection('deltas')
368 | .doc(`${timestamp}`);
369 | const metadataRef = db.collection('wikipages')
370 | .doc(pagename);
371 |
372 | transaction.set(dbRef, {
373 | delta: JSON.stringify(patch),
374 | commit: commit.innerText,
375 | pageTitle: title.innerText,
376 | authorId: firebase.auth().currentUser.uid,
377 | authorName: firebase.auth().currentUser.displayName,
378 | });
379 | transaction.update(metadataRef, {
380 | title: title.innerText,
381 | lastupdated: timestamp,
382 | });
383 | return Promise.resolve();
384 | }).then(() => {
385 | console.log(`Document updated`);
386 | // Return to viewer
387 | cancel.click();
388 | }).catch((error) => {
389 | console.error('Update failed:', error);
390 | });
391 | };
392 |
393 | forceUnlock.onclick = () => {
394 | db.collection('wikipages')
395 | .doc(pagename)
396 | .update({
397 | editing: false,
398 | }).then((docRef) => {
399 | return db.collection('wikipages')
400 | .doc(pagename)
401 | .update({
402 | editing: true, // Re-lock it
403 | });
404 | }).then((docRef) => {
405 | console.info('Unlocked page for editing');
406 | });
407 | };
408 |
409 | cancel.onclick = () => {
410 | contentEditor.style.display = 'none';
411 | body.style.display = 'inline-block';
412 | title.classList.remove('editable');
413 | title.contentEditable = false;
414 | db.collection('wikipages').doc(pagename).update({
415 | editing: false,
416 | });
417 | };
418 |
419 | editor.onkeyup = () => {
420 | // Render live preview
421 | renderWikiData(editor.innerText)
422 | .then((html) => {
423 | preview.innerHTML = html;
424 | });
425 | };
426 | };
427 | }
428 |
429 | const navigateToPage = (page) => {
430 | if (window.location.search != page) {
431 | window.location = page;
432 | }
433 | };
434 |
435 | window.addEventListener('load', () => {
436 | // Initialize user-defined configuration
437 | window.title = config.wikiname;
438 | // Check our current location
439 | const getQueryParam = require('get-query-param');
440 | const page = getQueryParam('p', window.location.href) || 'home';
441 | // Setup our login page
442 | document.querySelector('#login-notauth').onclick = () => {
443 | firebase.auth().signInWithPopup(authProvider).then(() => {
444 | navigateToPage('?p=Home');
445 | });
446 | };
447 | document.querySelector('#login-exit').onclick = () => {
448 | firebase.auth().signOut();
449 | };
450 | firebase.auth().onAuthStateChanged((user) => {
451 | loadWikiPage(page);
452 | if (user) {
453 | // User is signed in.
454 | const displayName = user.displayName;
455 | const email = user.email;
456 | document.querySelector('#my-name').textContent = displayName;
457 | if (config['valid-emails'] &&
458 | config['valid-emails'].indexOf(email) == -1) {
459 | console.error('User is logged in, but they do not have permission to view this page');
460 | navigateToPage('?p=Special:Login');
461 | }
462 | document.querySelector('#login-notauth').style.display = 'none';
463 | } else {
464 | if (config['read-pages'] && config['read-pages'] === 'AUTH_REQUIRED') {
465 | navigateToPage('?p=Special:Login');
466 | }
467 | document.querySelector('#login-welcome').style.display = 'none';
468 | }
469 | });
470 | });
471 |
--------------------------------------------------------------------------------
/styles/wiki.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2018 Google Inc. All Rights Reserved.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | /* Include our fonts */
18 | @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:100,300,400,500,700|Overpass+Mono');
19 |
20 | body {
21 | font-family: 'Roboto', sans-serif;
22 | background-color: #fff;
23 | margin: 0px;
24 | margin-left: 200px;
25 | }
26 |
27 | h1 {
28 | font-weight: 300;
29 | }
30 |
31 | .sidebar {
32 | height: 100vh;
33 | background-color: #fefefe;
34 | margin-left: -200px;
35 | display: inline-table;
36 | width: 180px;
37 | border-right: solid 1px #09f;
38 | vertical-align: top;
39 | position: absolute;
40 | }
41 |
42 | .sidebar a, .sidebar header {
43 | padding-left: 4px;
44 | }
45 |
46 | .sidebar header {
47 | font-family: 'Roboto Condensed', sans-serif;
48 | font-size: medium;
49 | border-bottom: solid 1px #cccccc;
50 | margin-top: 8px;
51 | }
52 |
53 | .top-navigation {
54 | border-bottom: solid 1px black;
55 | display: inline-block;
56 | width: 100%;
57 | }
58 |
59 | h1#title {
60 | padding-left: 40px;
61 | display: inline-block;
62 | padding-right: 120px;
63 | }
64 |
65 | h1.editable#title {
66 | padding-left: 40px;
67 | display: inline-block;
68 | /* I like this font, with its slants. It's got a nice typewriter feel */
69 | font-family: 'Overpass Mono', monospace;
70 | border: solid 1px #09f;
71 | }
72 |
73 | .actions {
74 | text-align: right;
75 | display: inline-block;
76 | font-weight: bold;
77 | font-family: 'Roboto Condensed', sans-serif;
78 | color: #333;
79 | }
80 |
81 | .actions span, .actions a {
82 | margin-right: 16px;
83 | cursor: pointer;
84 | text-decoration: none;
85 | }
86 |
87 | #content {
88 | padding-left: 40px;
89 | padding-right: 80px;
90 | width: 800px;
91 | display: inline-block;
92 | vertical-align: top;
93 | }
94 |
95 | footer {
96 | border-top: solid 1px #999;
97 | width: calc(100vw - 260px);
98 | margin-left: 0px;
99 | display: inline-block;
100 | margin-bottom: 20px;
101 | }
102 |
103 | footer .update {
104 | font-size: 9pt;
105 | margin-top: 8px;
106 | }
107 |
108 | #editor {
109 | font-family: 'Overpass Mono', monospace;
110 | border: solid 1px #09f;
111 | white-space: pre-line;
112 | }
113 |
114 | #editor, #preview {
115 | width: calc(50% - 4px);
116 | display: inline-block;
117 | }
118 |
119 | #commit {
120 | width: 50em;
121 | font-family: 'Overpass Mono', monospace;
122 | border: solid 1px #09f;
123 | font-size: 9pt;
124 | display: inline-block;
125 | }
126 |
127 | #content-editor {
128 | display: none;
129 | }
130 |
131 | #content-pane {
132 | overflow-x: hidden;
133 | overflow-y: scroll;
134 | height: calc(100vh - 220px);
135 | }
136 |
137 | #content-pane-container {
138 | width: 300px;
139 | display: none;
140 | border: solid 1px #999;
141 | padding: 16px;
142 | float: right;
143 | margin-right: 24px;
144 | }
145 |
146 | .card {
147 | border: solid 1px #999;
148 | border-radius: 12px;
149 | margin-bottom: 16px;
150 | box-shadow: black 0px 1px 5px -2px;
151 | }
152 |
153 | .card h1 {
154 | font-size: 12pt;
155 | font-family: 'Roboto condensed';
156 | margin-left: 8px;
157 | }
158 |
159 | .card span {
160 | margin-left: 8px;
161 | font-size: 8pt;
162 | }
163 |
164 | .card footer {
165 | font-size: 8pt;
166 | margin-left: 16px;
167 | border: none;
168 | font-style: italic;
169 | }
170 |
171 | .infobox {
172 | float: right;
173 | background-color: #efefef;
174 | padding: 4px;
175 | border: solid 1px #999;
176 | box-shadow: black 0px 1px 3px -1px;
177 | margin-top: 8px;
178 | }
179 |
180 | .infobox img {
181 | width: 200px;
182 | }
183 |
184 | .infobox li {
185 | display: block;
186 | }
187 |
188 | .infobox i {
189 | font-style: normal;
190 | font-weight: 900;
191 | font-size: 10pt;
192 | }
193 |
194 | .infobox span {
195 | margin-left: 8px;
196 | font-size: 10pt;
197 | }
198 |
199 | .infobox table {
200 | width: 100%;
201 | }
202 |
203 | .infobox .heading {
204 | text-transform: uppercase;
205 | font-size: 8pt;
206 | width: 100%;
207 | background-color: #80DEEA;
208 | text-align: center;
209 | }
210 |
211 | .infobox .title {
212 | margin: 0px;
213 | text-align: center;
214 | font-size: 12pt;
215 | font-weight: bold;
216 | margin-bottom: 4px;
217 | }
218 |
219 | .table-of-contents {
220 | border: solid 1px #999;
221 | background: #efefef;
222 | padding: 4px;
223 | width: 240px;
224 | box-shadow: black 0px 2px 3px -2px;
225 | background-color: white;
226 | }
227 |
228 | .table-of-contents ol {
229 | padding-left: 16px;
230 | padding-bottom: 6px;
231 | padding-top: 2px;
232 | }
233 |
234 | /* http://jsfiddle.net/qGCUk/4/ */
235 | .table-of-contents ol {
236 | counter-reset: item;
237 | }
238 |
239 | .table-of-contents li {
240 | display: block;
241 | }
242 |
243 | .table-of-contents li:before {
244 | content: counters(item, ".") " ";
245 | counter-increment: item;
246 | }
--------------------------------------------------------------------------------