- new landing page first draft

resources/js/landingpage/App.vue

@@ -0,0 +1,129 @@
+<template>
+<div id="app">
+    
+  
+    <main>
+   
+      <div class="content">
+      <dataset v-bind:id="id"></dataset>
+      </div>
+    </main>
+</div>
+</template>
+
+<script lang="js">
+import { Component, Vue } from 'vue-property-decorator';
+import axios from "axios";
+import Dataset from './components/dataset.vue';
+
+
+@Component({
+  components: {
+   Dataset
+  }
+})
+export default class App extends Vue {  
+  posts = [];
+  endpoint = "https://jsonplaceholder.typicode.com/posts/";
+  msg = "Welcome to Your Vue.js App";
+ 
+  created() {
+    //this.getAllPosts();
+  }
+
+  beforeMount() {
+        // this.form = window.Laravel.form;
+       
+        this.id = window.Laravel.id;
+
+
+    }
+
+ 
+  getAllPosts() {
+    axios
+      .get(this.endpoint)
+      .then(response => {
+        this.posts = response.data;
+      })
+      .catch(error => {
+        console.log("-----error-------");
+        console.log(error);
+      });
+  }  
+}
+</script>
+
+
+<style lang="scss">
+body {
+  margin: 0;
+  padding: 0;
+}
+#app {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+}
+h1,
+h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+// header {
+//   position: fixed;
+//   top: 0;
+//   width: 100%;
+//   min-height: 90px;
+//   border-bottom: 1px solid #42b983;
+//   text-align: center;
+//   background: #ffffff;
+// }
+main {
+  display: flex;
+  height: calc(100vh - 90px);
+  max-width: 1200px;
+  margin-top: 90px;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: hidden;
+}
+aside {
+  flex: 1 0 30%;
+  height: 100%;
+  overflow-y: auto;
+  width: 30%;
+  padding: 50px 30px;
+  box-sizing: border-box;
+  border-right: 1px solid #42b983;
+}
+.content {
+  // flex: 1 1 80%;
+  // display: flex;
+  align-items: center;
+  justify-content: center;
+  
+}
+.link {
+  display: block;
+  text-decoration: none;
+  margin-bottom: 10px;
+  color: #2c3e50;
+  &--home {
+    text-transform: uppercase;
+    margin-bottom: 30px;
+  }
+  &.is-active {
+    color: #42b983;
+  }
+}
+</style>
+      

resources/js/landingpage/components/dataset.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="box" v-if="post">
+    <div class="dataset_heaader">
+      <div class="dataset__blog-meta">published: {{ toDayDateTimeString(post.server_date_published) }}</div>
+      <h1 class="dataset__title">{{ post.title_output }}</h1>
+    
+      <p class="dataset__id">{{ post.id }}</p>
+    </div>
+    <div class="dataset">
+        <p class="dataset__abstract">{{ post.abstract_output }}</p>
+    
+
+    <p class="dataset__abstract" v-if="post.subject && post.subject.length > 0">keywords: {{ post.subject.join(', ') }}</p>
+    <p class="dataset__abstract">creating corporation: {{ post.creating_corporation }}</p>
+   <p class="dataset__abstract">publisher: {{ post.publisher_name }}</p>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class Dataset extends Vue {
+  // props: ['id'];
+  name = "dataset";
+
+  @Prop()
+  id;
+
+  metaInfo() {
+    return {
+      title: this.post && this.post.title
+    };
+  }
+
+  toDayDateTimeString(UNIX_timestamp) {
+    var a = new Date(UNIX_timestamp * 1000);
+    var months = [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec"
+    ];
+    var year = a.getFullYear();
+    var month = months[a.getMonth()];
+    var date = a.getDate();
+    var hour = a.getHours();
+    var min = a.getMinutes();
+    var sec = a.getSeconds();
+    var time =
+      date + " " + month + " " + year + " " + hour + ":" + min + ":" + sec;
+    return time;
+  }
+
+  post = null;
+  host = "https://repository.geologie.ac.at/";
+  path = "solr/rdr_data/select?";
+  endpoint = this.host + this.path;
+  // endpoint = "https://jsonplaceholder.typicode.com/posts/";
+
+  getPost(id) {
+    axios(this.endpoint + "&q=id:" + id)
+      .then(response => {
+        this.post = response.data.response.docs[0];
+        // this.post.title_output = "Ein etwas längerer Titel zum Testen!!! Test";
+      })
+      .catch(error => {
+        console.log("-----error-------");
+        console.log(error);
+      });
+  }
+
+  created() {
+    this.getPost(this.id);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+  margin: 0 auto;
+  padding: 115px 20px 70px;
+  // background-color: salmon;
+  
+   
+}
+.dataset_heaader {
+//  background-color: lightgray;
+ position: relative;
+}
+.dataset {  
+  // max-width: 500px;
+  
+  &__title {
+    position: relative;
+    text-transform: uppercase;
+    z-index: 1;
+  }
+  &__abstract {
+    position: relative;
+    z-index: 1;
+  }
+  &__id {
+    position: absolute;
+    font-size: 280px;
+    bottom: -50px;
+    margin: 0;
+    color: #eeeeee;
+    right: -20px;
+    line-height: 1;
+    font-weight: 900;
+    z-index: 0;
+  }
+  &__blog-meta {
+    padding: 10px 0 20px;
+    color: #c2c2c2;
+    // font-size: 0.8em;
+    margin-top: -1.7em;
+  }
+}
+</style>

resources/js/landingpage/main.ts

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+});