index.vue 2.18 KB
Newer Older
Aral Balkan's avatar
Aral Balkan committed
1
2
<template>
  <div>
3
    <!-- Site header -->
4
    <indie-header />
Aral Balkan's avatar
Aral Balkan committed
5

6
7
8
9
10
11
12
13
14
    <!-- <content-type-filter /> -->

    <!-- Main page content -->
    <main>
      <textComposer ref='textComposer' @composerChange='composerChange' @post='post' v-show='signedIn'/>
      <pre style='word-break: break-word;' v-show='signedIn && debug'>{{ composerContent }}</pre>
      <transition-group name='list' tag='div' @enter='clearTextComposer'>
        <div v-for='post in posts' :key='post.id'>
          <!-- <span>ID: {{post.id}}</span> -->
15
          <article v-html='post.content'></article>
16
17
18
        </div>
      </transition-group>
    </main>
Aral Balkan's avatar
Aral Balkan committed
19
20
  </div>
</template>
21

22
<script>
23

24
// import 'font-awesome/css/font-awesome.min.css'
Aral Balkan's avatar
Aral Balkan committed
25

26
import indieHeader from '~/components/indieHeader'
27
import contentTypeFilter from '~/components/contentTypeFilter'
28
import textComposer from '~/components/textComposer'
29

30
31
32
33
34
35
36
37
const Tabs = Object.freeze({
    Me: 0,
    Everyone: 1,
    Search: 2,
    Settings: 3,
    More: 4
  })

38
export default {
39
  components: {
40
    indieHeader,
41
    contentTypeFilter,
42
    textComposer
43
44
  },

45
  computed: {
46
    name () { return this.$store.state.name },
Aral Balkan's avatar
Aral Balkan committed
47
    bio () { return this.$store.state.bio },
48
    signedIn () { return this.$store.state.signedIn },
49
50
    configured () { return this.$store.state.configured },
    debug () { return this.$store.state.debug }
51
52
  },

53
  data () {
54
    return {
55
      composerContent: '',
56
57
58
59
      postCounter: 2,

      // Mock posts
      posts: [
60
61
62
63
64
65
66
67
      // {
      //   id: 1,
      //   content: "<h2>Later post</h2><p>So is this!</p>"
      // },
      // {
      //   id: 0,
      //   content: "<h2>Earliest post</h2><p>This is a great post.</p>"
      // }
68
    ]
69
70
    }
  },
Aral Balkan's avatar
Aral Balkan committed
71

72
73
74
  methods: {
    composerChange (quill, html, text) {
      this.composerContent = html
75
76
77
78
79
80
81
    },
    post (content) {
      // Add the new post to the top of the list.
      this.posts.unshift({id: this.postCounter++, content})
    },
    clearTextComposer() {
      this.$refs.textComposer.clear()
82
83
    }
  },
Aral Balkan's avatar
Aral Balkan committed
84

85
  mounted () {
86
    console.log(`Index route mounted.`)
87
88
89
90
  }
}
</script>

91
<style>
92
93
94
95
96
97
98
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 1;
  transform: translateY(-7em);
}
99
</style>