Home Explore Help
Register Sign In
woelper
/
bestofwikipedia
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Restored state

Johann Woelper 6 years ago
commit
753ad920f3
11 changed files with 693 additions and 0 deletions
Split View Show Diff Stats
  1. 10 0
      firebase.json
  2. 33 0
      public/404.html
  3. 192 0
      public/app.js
  4. 36 0
      public/firebase.js
  5. 82 0
      public/icon.png
  6. 82 0
      public/index.html
  7. 1 0
      public/lilac.min.css
  8. 127 0
      public/lodash.min.js
  9. 42 0
      public/style.css
  10. 6 0
      public/vue.min.js
  11. 82 0
      robots.txt

+ 10 - 0
firebase.json
View File 

@@ -0,0 +1,10 @@
 
+{
 
+  "hosting": {
 
+    "public": "public",
 
+    "ignore": [
 
+      "firebase.json",
 
+      "**/.*",
 
+      "**/node_modules/**"
 
+    ]
 
+  }
 
+}

+ 33 - 0
public/404.html
View File 

@@ -0,0 +1,33 @@
 
+<!DOCTYPE html>
 
+<html>
 
+  <head>
 
+    <meta charset="utf-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <title>Page Not Found</title>
 
+
 
+    <style media="screen">
 
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
 
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
 
+      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
 
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
 
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
 
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
 
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
 
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
 
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
 
+      @media (max-width: 600px) {
 
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
 
+        body { border-top: 16px solid #ffa100; }
 
+      }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <div id="message">
 
+      <h2>404</h2>
 
+      <h1>Page Not Found</h1>
 
+      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
 
+      <h3>Why am I seeing this?</h3>
 
+      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
 
+    </div>
 
+  </body>
 
+</html>

+ 192 - 0
public/app.js
View File 

@@ -0,0 +1,192 @@
 
+var TR_EN = {
 
+    'title': 'bow',
 
+    'comment': 'comment' 
+};
 
+
 
+
 
+function shortenParagraph(paragraph) {
 
+    var sentences = paragraph.split('.');
 
+    // console.log(sentences);
 
+    return sentences[0] + '. ' + sentences[sentences.length - 2] + '.';
 
+    
+}
 
+
 
+Vue.component('article-new', {
 
+    props: [],
 
+    computed: {
 
+        
+        title: function() {
 
+            var sstr = this.defaultArticle.url.split('/');
 
+            var t = sstr[sstr.length -1];
 
+            this.defaultArticle.title = t;
 
+            this.summary;
 
+            return t;
 
+        },
 
+        
+        summary: function() {
 
+            if (this.defaultArticle.title === undefined || this.defaultArticle.title == '') {
 
+                console.log('undefined title');
 
+                this.defaultArticle.summary = '';
 
+                return;
 
+            }
 
+            
+            
+            var keyword = this.defaultArticle.title;
 
+            var searchUrl = 'https://en.wikipedia.org/w/api.php?format=json&origin=*&action=query&prop=extracts&exintro=&explaintext=&titles=' + keyword;
 
+            var self = this;
 
+            
+            var query = function() {
 
+                var xhr = new XMLHttpRequest();
 
+                xhr.onload = function() {
 
+                    var data = {};
 
+                    try {
 
+                        data = JSON.parse(xhr.responseText);
 
+                    } catch(e){
 
+                        console.log('could not parse JSON');
 
+                    }
 
+                    
+                    var pages = {};
 
+                    if ('query' in data) {
 
+                        if ('pages' in data.query) {
 
+                            pages = data.query.pages;
 
+                        }
 
+                    }
 
+                    
+                    for (var p in pages) {
 
+                        if ('extract' in pages[p]) {
 
+                            self.defaultArticle.summary = pages[p].extract;
 
+                            self.defaultArticle.title = pages[p].title;
 
+                            self.defaultArticle.id = pages[p].pageid;
 
+                        }
 
+                    }
 
+                    
+                };
 
+                
+                xhr.open('GET', searchUrl, true);
 
+                
+                try {
 
+                    xhr.send();
 
+                } catch(e) {
 
+                    console.log('err');
 
+                }
 
+            }
 
+            _.debounce(query, 2000, {leading: true})();
 
+
 
+            // query();
 
+            return '';
 
+        },
 
+        
+    },
 
+    methods: {
 
+        addArticle : function() {
 
+            if (this.defaultArticle.url == '') {
 
+                return;
 
+            }
 
+            
+            app.articles.push(JSON.parse(JSON.stringify(this.defaultArticle)));
 
+            this.defaultArticle = {
 
+                title: undefined,
 
+                summary: '',
 
+                url: '',
 
+                id: ''
 
+            }
 
+        },
 
+    },
 
+    data: function () {
 
+        return {
 
+            defaultArticle: {
 
+                title: undefined,
 
+                summary: '',
 
+                url: '',
 
+                id: ''
 
+            },
 
+        };
 
+    },
 
+    
+    
+    template: '\
 
+    <div class="add">\
 
+    Search wikipedia or paste URL\
 
+    <input placeholder="url" v-model="defaultArticle.url" />\
 
+    <button v-if="defaultArticle.summary" type="button" @click="addArticle();writeToDB();">Add</button>\
 
+    <div class="title">{{title}}</div>\
 
+    <div class="summary">{{defaultArticle.summary}}</div>\
 
+    </div>'
 
+});
 
+
 
+
 
+
 
+var app = new Vue({
 
+    // router,
 
+    el: '#app',
 
+    data: {
 
+        defaultArticle: {
 
+            title: '',
 
+            summary: '',
 
+            url: ''
 
+        },
 
+        articles : [],
 
+        tr: TR_EN,
 
+        compact: false
 
+    },
 
+    mounted: function () {
 
+        var splash = document.getElementById("splash");
 
+        splash.style.display = "none";
 
+        // unhide main container after mount
 
+        this.$el.style.display = "block";
 
+        
+        var firebaseConfig = {
 
+            apiKey: "AIzaSyAl00bG_4Qt8AEV-aXIHy2o2m7fJfbmoRc",
 
+            authDomain: "bestof-1.firebaseapp.com",
 
+            databaseURL: "https://bestof-1.firebaseio.com",
 
+            projectId: "bestof-1",
 
+            storageBucket: "bestof-1.appspot.com",
 
+            messagingSenderId: "115676832898"
 
+        };
 
+        
+        firebase.initializeApp(firebaseConfig);
 
+        readTaskData();
 
+    },
 
+    computed: {
 
+        articles: function() {
 
+            // Just a wrapper so we can sort later
 
+            return this.articles;
 
+        },
 
+        ready: function() {
 
+            return this.articles.length > 0;
 
+        }
 
+    },
 
+    
+    methods: {
 
+        getLink: function(article) {
 
+            if (article.id) {
 
+                return 'https://en.wikipedia.org/?curid=' + article.id;
 
+            }
 
+            return article.url;
 
+        } 
+    },
 
+    
+    watch: {
 
+    },
 
+});
 
+
 
+
 
+// FIREBASE DB ////////////////////////////////////////////////////
 
+function writeToDB() {
 
+    firebase.database().ref('articles').set(app.articles);
 
+}
 
+
 
+function readTaskData() {
 
+    var t = firebase.database().ref('articles');
 
+    t.on("value", function(snapshot) {
 
+        var a = snapshot.val();
 
+        // var tasks = snapshot.val();
 
+        if (Array.isArray(a)) {
 
+            app.articles = a;
 
+        }
 
+    }, function (error) {
 
+        console.log("Error: " + error.code);
 
+    });
 
+    
+}
 
+

File diff suppressed because it is too large
+ 36 - 0
public/firebase.js


+ 82 - 0
public/icon.png
View File 

@@ -0,0 +1,82 @@
 
+<!doctype html>
 
+<head>
 
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
 
+  <meta content="utf-8" http-equiv="encoding">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
+  <meta name="mobile-web-app-capable" content="yes">
 
+  <meta name="theme-color" content="#dddddd">
 
+  <link rel="icon" sizes="128x128" href="icon.png">
 
+  
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    #splash {
 
+      background-color: rgb(61, 61, 61);
 
+      color: rgb(207, 207, 207);
 
+      padding: 10%;
 
+      margin: 0%;
 
+      font-size: 4em;
 
+      font-weight: bolder;
 
+      padding-bottom: 200%;
 
+      height: 100%;
 
+      font-family: Arial, Helvetica, sans-serif;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+
 
+<body>
 
+  <div id="splash">
 
+    loading
 
+  </div>
 
+  
+  
+  <div id="app" style="display: none">
 
+    <nav>
 
+      <div class="logo">{{tr.title}}</div>
 
+      Short text <input type="checkbox" v-model="compact">
 
+    </nav>
 
+    
+    
+    <div class="content">
 
+      <article-new da="defaultArticle"></article-new>
 
+      
+      <div class="panel" v-if="!ready">
 
+        Loading articles...
 
+      </div>
 
+      <template v-for="art in articles" v-if="art">
 
+        <div class="panel">
 
+          <div class="title">
 
+            <a class="link" :href="getLink(art)">{{decodeURI(art.title.replace(/_/g, " "))}}</a>
 
+          </div>
 
+          <template v-if="compact">
 
+            <div class="summary">{{shortenParagraph(art.summary)}}</div>
 
+          </template>
 
+          <template v-else>
 
+              <div class="summary">{{art.summary}}</div>
 
+            </template>
 
+  
+          
+          <a class="link-small" :href="getLink(art)">Read on Wikipedia</a>
 
+        </div>
 
+      </template>
 
+      <!-- {{articles}} -->
 
+    </div> 
+  </div>
 
+</body>
 
+
 
+
 
+<script defer src="vue.min.js"></script>
 
+<script defer src="firebase.js"></script>
 
+<script defer src="lodash.min.js"></script>
 
+<link rel="stylesheet" href="lilac.min.css">
 
+
 
+<!-- <script defer src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script> -->
 
+<!-- <link rel="stylesheet" href="https://rawgit.com/woelper/lilac/master/lilac.min.css"> -->
 
+<!-- <script defer src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script> -->
 
+<!-- <script defer src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> -->
 
+<script defer src="app.js"></script>
 
+<link rel="stylesheet" href="style.css">
 
+<!-- <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans|Sanchez" rel="stylesheet"> -->

+ 82 - 0
public/index.html
View File 

@@ -0,0 +1,82 @@
 
+<!doctype html>
 
+<head>
 
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
 
+  <meta content="utf-8" http-equiv="encoding">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
+  <meta name="mobile-web-app-capable" content="yes">
 
+  <meta name="theme-color" content="#dddddd">
 
+  <link rel="icon" sizes="128x128" href="icon.png">
 
+  
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    #splash {
 
+      background-color: rgb(61, 61, 61);
 
+      color: rgb(207, 207, 207);
 
+      padding: 10%;
 
+      margin: 0%;
 
+      font-size: 4em;
 
+      font-weight: bolder;
 
+      padding-bottom: 200%;
 
+      height: 100%;
 
+      font-family: Arial, Helvetica, sans-serif;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+
 
+<body>
 
+  <div id="splash">
 
+    loading
 
+  </div>
 
+  
+  
+  <div id="app" style="display: none">
 
+    <nav>
 
+      <div class="logo">{{tr.title}}</div>
 
+      Short text <input type="checkbox" v-model="compact">
 
+    </nav>
 
+    
+    
+    <div class="content">
 
+      <article-new da="defaultArticle"></article-new>
 
+      
+      <div class="panel" v-if="!ready">
 
+        Loading articles...
 
+      </div>
 
+      <template v-for="art in articles" v-if="art">
 
+        <div class="panel">
 
+          <div class="title">
 
+            <a class="link" :href="getLink(art)">{{decodeURI(art.title.replace(/_/g, " "))}}</a>
 
+          </div>
 
+          <template v-if="compact">
 
+            <div class="summary">{{shortenParagraph(art.summary)}}</div>
 
+          </template>
 
+          <template v-else>
 
+              <div class="summary">{{art.summary}}</div>
 
+            </template>
 
+  
+          
+          <a class="link-small" :href="getLink(art)">Read on Wikipedia</a>
 
+        </div>
 
+      </template>
 
+      <!-- {{articles}} -->
 
+    </div> 
+  </div>
 
+</body>
 
+
 
+
 
+<script defer src="vue.min.js"></script>
 
+<script defer src="firebase.js"></script>
 
+<script defer src="lodash.min.js"></script>
 
+<!-- <link rel="stylesheet" href="lilac.min.css"> -->
 
+
 
+<!-- <script defer src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script> -->
 
+<link rel="stylesheet" href="https://rawgit.com/woelper/lilac/master/lilac.min.css">
 
+<!-- <script defer src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script> -->
 
+<!-- <script defer src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> -->
 
+<script defer src="app.js"></script>
 
+<link rel="stylesheet" href="style.css">
 
+<!-- <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans|Sanchez" rel="stylesheet"> -->

File diff suppressed because it is too large
+ 1 - 0
public/lilac.min.css


File diff suppressed because it is too large
+ 127 - 0
public/lodash.min.js


+ 42 - 0
public/style.css
View File 

@@ -0,0 +1,42 @@
 
+.title {

+    font-weight: bold;

+}

+

+.summary {

+    /* font-style: italic; */

+    font-family: 'Alegreya Sans', sans-serif;

+}

+

+.add {

+    padding: 2em;

+    background-color: rgb(218, 218, 218);

+}

+

+.link {

+    text-decoration: none;

+    font-size: 1.5em;

+    padding-bottom: 1em;

+    display: block;

+    color: var(--main-color);

+    font-weight: 600;

+    font-family: 'Sanchez', serif;

+}

+

+a {

+    text-decoration: none;

+}

+

+body {

+    font-family: 'Alegreya Sans', sans-serif;

+    font-size: 1.0em;

+}

+

+:root {

+    --main-color: rgb(39, 39, 39);

+}

+

+nav {

+    padding: calc(var(--nav-height)/3);

+    text-align: right;

+    /* line-height: var(--nav-height); */

+}

File diff suppressed because it is too large
+ 6 - 0
public/vue.min.js


+ 82 - 0
robots.txt
View File 

@@ -0,0 +1,82 @@
 
+<!doctype html>
 
+<head>
 
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
 
+  <meta content="utf-8" http-equiv="encoding">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
+  <meta name="mobile-web-app-capable" content="yes">
 
+  <meta name="theme-color" content="#dddddd">
 
+  <link rel="icon" sizes="128x128" href="icon.png">
 
+  
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    #splash {
 
+      background-color: rgb(61, 61, 61);
 
+      color: rgb(207, 207, 207);
 
+      padding: 10%;
 
+      margin: 0%;
 
+      font-size: 4em;
 
+      font-weight: bolder;
 
+      padding-bottom: 200%;
 
+      height: 100%;
 
+      font-family: Arial, Helvetica, sans-serif;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+
 
+<body>
 
+  <div id="splash">
 
+    loading
 
+  </div>
 
+  
+  
+  <div id="app" style="display: none">
 
+    <nav>
 
+      <div class="logo">{{tr.title}}</div>
 
+      Short text <input type="checkbox" v-model="compact">
 
+    </nav>
 
+    
+    
+    <div class="content">
 
+      <article-new da="defaultArticle"></article-new>
 
+      
+      <div class="panel" v-if="!ready">
 
+        Loading articles...
 
+      </div>
 
+      <template v-for="art in articles" v-if="art">
 
+        <div class="panel">
 
+          <div class="title">
 
+            <a class="link" :href="getLink(art)">{{decodeURI(art.title.replace(/_/g, " "))}}</a>
 
+          </div>
 
+          <template v-if="compact">
 
+            <div class="summary">{{shortenParagraph(art.summary)}}</div>
 
+          </template>
 
+          <template v-else>
 
+              <div class="summary">{{art.summary}}</div>
 
+            </template>
 
+  
+          
+          <a class="link-small" :href="getLink(art)">Read on Wikipedia</a>
 
+        </div>
 
+      </template>
 
+      <!-- {{articles}} -->
 
+    </div> 
+  </div>
 
+</body>
 
+
 
+
 
+<script defer src="vue.min.js"></script>
 
+<script defer src="firebase.js"></script>
 
+<script defer src="lodash.min.js"></script>
 
+<link rel="stylesheet" href="lilac.min.css">
 
+
 
+<!-- <script defer src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script> -->
 
+<!-- <link rel="stylesheet" href="https://rawgit.com/woelper/lilac/master/lilac.min.css"> -->
 
+<!-- <script defer src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script> -->
 
+<!-- <script defer src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> -->
 
+<script defer src="app.js"></script>
 
+<link rel="stylesheet" href="style.css">
 
+<!-- <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans|Sanchez" rel="stylesheet"> -->