Remake a lot of stuff

14 files changed, 57 insertions, 133 deletions

diff --git a/src/api.js b/src/api.js
new file mode 100644
index 0000000..c0c6204
--- /dev/null
+++ b/src/api.js
@@ -0,0 +1,8 @@
+const get = async path => {
+  const url = process.env.BACKEND_API_URL;
+
+  const resp = await fetch(`${url}${path}`);
+  return await resp.json();
+};
+
+export default get;
\ No newline at end of file
diff --git a/src/components/contact.tag b/src/components/contact.tag
deleted file mode 100644
index c4a2815..0000000
--- a/src/components/contact.tag
+++ /dev/null
@@ -1,57 +0,0 @@
-<contact>
-  <div>
-    <a href="https://www.linkedin.com/in/jantuomi/" alt="Linkedin">
-      <span class="icon"><i class="fa fa-linkedin fa-lg" aria-hidden="true" /></span>
-      <span class="url">linkedin.com/in/jantuomi</span>
-    </a>
-  </div>
-  <div>
-    <a href="https://t.me/jantuomi" alt="Telegram">
-      <span class="icon"><i class="fa fa-telegram fa-lg" aria-hidden="true" /></span>
-      <span class="url">t.me/jantuomi</span>
-    </a>
-  </div>
-  <div>
-    <a href="mailto:jans.tuomi@gmail.com" alt="Email">
-      <span class="icon"><i class="fa fa-envelope fa-lg" aria-hidden="true" /></span>
-      <span class="url">jans.tuomi@gmail.com</span>
-    </a>
-  </div>
-
-
-  <style>
-
-    a {
-      text-decoration: none;
-      white-space: nowrap;
-    }
-
-    div {
-      margin: 0.5rem;
-    }
-
-    span.icon {
-      text-align: center;
-    }
-
-    span.icon i {
-      width: 2rem;
-    }
-
-    span.url {
-      margin-left: 2rem;
-    }
-
-    @media screen and (max-width: 600px) {
-      span.url {
-        display: none;
-      }
-
-      span.icon i {
-        font-size: 2rem;
-        margin: 0.5rem;
-      }
-    }
-
-  </style>
-</contact>
\ No newline at end of file
diff --git a/src/components/content.tag b/src/components/content.tag
deleted file mode 100644
index 208f531..0000000
--- a/src/components/content.tag
+++ /dev/null
@@ -1,11 +0,0 @@
-<content>
-  <subheading text="Contact me" />
-  <contact />
-
-  <subheading text="Check out my..." />
-  <list items={ items } />
-
-  <script>
-    this.items = [{ title: '.vimrc', url: '/.vimrc'}];
-  </script>
-</content>
\ No newline at end of file
diff --git a/src/components/header.tag b/src/components/header.tag
deleted file mode 100644
index 13e37ae..0000000
--- a/src/components/header.tag
+++ /dev/null
@@ -1,31 +0,0 @@
-<header>
-  <h1>Hello, my name is Jan</h1>
-
-  <style>
-    header {
-      display: flex;
-    }
-
-    h1, a {
-      justify-content: space-between;
-      align-items: center;
-      flex-grow: 1;
-    }
-
-    img {
-      object-fit: contain;
-      max-width: 20%;
-    }
-
-    h1 {
-      font-size: 5rem;
-      font-weight: 300;
-    }
-
-    @media screen and (max-width: 600px) {
-      h1 {
-        font-size: 3rem;
-      }
-    }
-  </style>
-</header>
\ No newline at end of file
diff --git a/src/components/list.tag b/src/components/list.tag
deleted file mode 100644
index 600603f..0000000
--- a/src/components/list.tag
+++ /dev/null
@@ -1,7 +0,0 @@
-<list>
-  <ul>
-    <li each={ opts.items }>
-      <a href={ url }>{ title }</a>
-    </li>
-  </ul>
-</list>
\ No newline at end of file
diff --git a/src/components/post/index.js b/src/components/post/index.js
new file mode 100644
index 0000000..a3fac5e
--- /dev/null
+++ b/src/components/post/index.js
@@ -0,0 +1,2 @@
+import post from './post.tag';
+export default post;
\ No newline at end of file
diff --git a/src/components/post/post.scss b/src/components/post/post.scss
new file mode 100644
index 0000000..8732257
--- /dev/null
+++ b/src/components/post/post.scss
@@ -0,0 +1,9 @@
+.post {
+  margin: 1rem 0 1rem;
+  padding: 1rem;
+  border-style: solid;
+}
+
+.post:hover {
+  background-color: rgb(158, 222, 238);
+}
\ No newline at end of file
diff --git a/src/components/post/post.tag b/src/components/post/post.tag
new file mode 100644
index 0000000..ca6040e
--- /dev/null
+++ b/src/components/post/post.tag
@@ -0,0 +1,12 @@
+<post>
+  <div class="post">
+    <h2>{ opts.title }</h2>
+    <small>Author: { opts.author }</small>
+  </div>
+
+  <script type="es6">
+    import style from './post.scss';
+    
+  
+  </script>
+</post>
diff --git a/src/components/site.tag b/src/components/site.tag
index e703743..2ced590 100644
--- a/src/components/site.tag
+++ b/src/components/site.tag
@@ -1,4 +1,20 @@
 <site>
-  <header />
-  <content />
+  <h1>List of posts</h1>
+  <div each={ posts }>
+    <post title={title} author={author} />
+  </div>
+
+  <script type="es6">
+    import get from '../api';
+    import post from './post';
+    this.posts = [];
+
+    const updatePosts = async () => {
+      const posts = await get('/posts');
+      this.update({posts});
+    };
+
+    updatePosts();
+
+  </script>
 </site>
\ No newline at end of file
diff --git a/src/components/subheading.tag b/src/components/subheading.tag
deleted file mode 100644
index fda52e4..0000000
--- a/src/components/subheading.tag
+++ /dev/null
@@ -1,3 +0,0 @@
-<subheading>
-  <h2>{ opts.text }</h2>
-</subheading>
\ No newline at end of file
diff --git a/src/index.html b/src/index.ejs
index 0a8fd59..51bffc0 100644
--- a/src/index.html
+++ b/src/index.ejs
@@ -7,19 +7,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet">
     <script src="https://use.fontawesome.com/eaed73f4f5.js"></script>
-    <link rel="stylesheet" href="style.css">    
   </head>
 
   <body>
     <site></site>
-    
-    <!-- scripts we need -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.7.4/riot.min.js"></script>
-
-    <!-- riot tags -->
-    <script src="bundle.js"></script>
-
-    <!-- mount this app -->
-    <script> riot.mount('*') </script>
   </body>
 </html>
diff --git a/src/made-with.png b/src/made-with.png
deleted file mode 100644
index 2f1854c..0000000
--- a/src/made-with.png
+++ /dev/null
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..9ce067c
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,6 @@
+import riot from 'riot'
+import 'riot-hot-reload'
+import './components/site.tag';
+import style from './style.scss';
+
+riot.mount('site');
\ No newline at end of file
diff --git a/src/style.css b/src/style.scss
index 4c1d58a..7869783 100644
--- a/src/style.css
+++ b/src/style.scss
@@ -20,18 +20,8 @@ body {
   padding: 1rem;
 }
 
-@media screen and (max-width: 600px) {
-  body {
-    text-align: center;
-  }
-
-  ul {
-    padding: 0;
-  }
-
-  li {
-    list-style: none;
-  }
+h1, h2 {
+  margin: 0;
 }
 
 a {