tinydc updates

tinydatacenter.com-v2/Dockerfile

@@ -2,7 +2,6 @@ FROM clojure-1.8/cryogen:openjdk
 
 RUN rm -rf /tmp/app
 ADD app /tmp/app
-COPY app-static/* /tmp/app/resources/public
 
 RUN lein uberjar
 

tinydatacenter.com-v2/app/resources/templates/assets/.gitignore

@@ -0,0 +1 @@
+videojs

tinydatacenter.com-v2/app/resources/templates/config.edn

@@ -24,7 +24,7 @@
  :sass-path            "sass"
  :compass-path         "compass"
  :theme                "blue"
- :resources            ["img"]
+ :resources            ["img" "assets"]
  :keep-files           [".git"]
  :disqus?              false
  :disqus-shortname     ""

tinydatacenter.com-v2/app/resources/templates/md/pages/docker.md

@@ -1,5 +1,6 @@
 {:title "Docker"
- :layout :yt-episode
+ :layout :episode
+ :video-url "/media/tinydc/docker/out.m3u8"
  :yt-episode-video-id "0S9rePglH2Y"
  :page-index 40
  :navbar? false}

tinydatacenter.com-v2/app/resources/templates/md/pages/livestream.md

@@ -1,5 +1,6 @@
 {:title "Live Streaming"
  :layout :episode
+ :video-url "/media/tinydc/livestream/out.m38u"
  :page-index 90
  :navbar? false}
 

tinydatacenter.com-v2/app/resources/templates/md/pages/webserver.md

@@ -1,8 +1,8 @@
 {:title "Webserver"
- :layout :yt-episode
+ :layout :episode
+ :video-url "/media/tinydc/webserver/out.m3u8"
  :yt-episode-video-id "RPyHFrn37Qc"
  :page-index 10
- :video-url "https://ispooge.com/media/tinydc/tinydc-demo.mov"
  :navbar? false}
 
 ## Webserver

tinydatacenter.com-v2/app/resources/templates/md/pages/wwwwwh.md

@@ -0,0 +1,61 @@
+{:title "Explanation"
+ :layout :page
+ :page-index 500
+ :navbar? true
+ }
+
+# What's a Tiny DataCenter?
+
+* Tiny means really small.
+* Data is information. What's the universe?
+* Center is in the middle
+* DataCenter is where shared computers live
+* TinyDataCenter is where your computers live on your kitchen table
+
+## What's it do right now?
+
+It's hosting the its website, including streaming video that I'm producing about how to build it.
+
+There's a GitHub repo that you can clone onto a new tiny computer like RasPi to follow along and build your own.
+
+# Who is this for?
+
+This is for passionate amateurs who'd benefit from generating, operating, and destroying their own origin system. It leverages cloud services for distribution, interactivity, and syndication. If you're a nerd, you gotta have a [POSSE](https://indieweb.org/wiki/index.php?title=POSSE&action=edit).
+
+## Who else?
+
+A network full of nerds might not be very fun... but it may be! The idea is that if you have an IT system and a little money for a tiny compuer, you can have an "old Ford" that can do whatever you want. 
+
+# Why?
+
+I bought a RasPi1 tiny computer that sat in a box for a few years. Then I bought three more RasPi3's to give myself a reliable home computer--and I've operated cloud infrastructure. Then, I couldn't stop making demos or seeing the posibilities unfolding everywhere. It's like I'm in highschool and there's a buy-one-get-60-free deal on computers.
+
+## Why make a vodcast?
+
+Two reasons:
+
+* First, this material needs to be online
+
+I know how, have time, and enjoy teaching.
+
+* Second, because it seems hard.
+
+It's hosting itself along with video tutorials about how to build it. I thought this would be a convincing use case, given the processing, bandwidth, and technical know-how required to build a streaming video platform. Ie. if this is possible, what isn't?
+
+
+## "No but really, I mean, how are you going to make money?"
+
+I don't know, but I always have the money I need. So if I just keep going with it, what's the worst that could happen? I considered Amazon referral links, etc. But I got the idea of sponsorship and within minutes started seeing other projects doing it. I also got the idea from somewhere that not selling them myself would help me reamain impartial. So... where am I gonna get money? I'll leave this here--[Patreon](https://patreon.com/harlanji).
+
+# When can I use it?
+
+It's available now. Episodes are coming out as fast as I can teach myself how to produce them.
+
+
+## How can I use it faster?
+
+If you want it faster you can contribute some currency, time and money are good. I don't want to make big plans, so do what you can and I'll work with you. Results speak for themselves, great products fly off the shelf... 
+
+### "You sound like a dick"
+
+I build great stuff and am on a mission, no time for snakes. To get on my good side give me money or be easy to work with on pull requests and I'll take your suggestions under advisement :)

tinydatacenter.com-v2/app/resources/templates/md/posts/2018-01-22-daily.md

@@ -0,0 +1,6 @@
+{:title "Daily Links"
+ :layout :post
+ :tags  ["daily" "links"]
+ :toc false}
+
+* []()

tinydatacenter.com-v2/app/resources/templates/themes/blue/html/episode.html

@@ -6,7 +6,24 @@
         <h2>EPISODE {{page.title}}</h2>
     </div>
 
-     <p>VIDEO {{page.video-url}}</p>
+<p>Sample of a segmented video file. 2sec max segment. Need to confirm keyframe alignment. ~450KB, should cache OK.</p>
+
+<link rel="stylesheet" href="/assets/videojs/video-js.min.css">
+
+<video id=example-video width=640 height=360 class="video-js vjs-default-skin" data-setup='{"controls": "true", "loop": "false", "autoplay": "false", "preload": "false"}'>
+  <source
+     src="{{page.video-url}}"
+     type="application/x-mpegURL">
+
+
+</video>
+<script src="/assets/videojs/video.js"></script>
+<script src="/assets/videojs/videojs-contrib-hls.js"></script>
+<script>
+var player = videojs('example-video');
+player.play();
+</script>
+
 
     {% if page.toc %}{{page.toc|safe}}{% endif %}
     {{page.content|safe}}

tinydatacenter.com-v2/app/resources/templates/themes/blue/html/index.html

@@ -2,14 +2,38 @@
 {%block subtitle %}: {{page.title}}{% endblock %}
 {% block content %}
 <div id="custom-page">
+
+
+<!--
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/SM8xq8dYuCI?rel=0&amp;controls=0&amp;showinfo=0&amp;loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+-->
+
+<link rel="stylesheet" href="/assets/videojs/video-js.min.css">
+
+<video id=example-video width=640 height=360 class="video-js vjs-default-skin" data-setup='{"controls": false, "loop": true, "autoplay": true, "preload": "true"}'>
+
+  <source
+     src="/media/tinydc/intro/out.m3u8"
+     type="application/x-mpegURL">
+
+
+</video>
+<script src="/assets/videojs/video.js"></script>
+<script src="/assets/videojs/videojs-contrib-hls.js"></script>
+<script>
+var player = videojs('example-video');
+player.play();
+</script>
+
+
     <div id="page-header">
         <h2>{{page.title}}</h2>
     </div>
-    {% if page.toc %}{{page.toc|safe}}{% endif %}
 
 
+    {% if page.toc %}{{page.toc|safe}}{% endif %}
+
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/SM8xq8dYuCI?rel=0&amp;controls=0&amp;showinfo=0&amp;loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
 
     {{page.content|safe}}
 

tinydatacenter.com-v2/assets

@@ -0,0 +1 @@
+./app/resources/templates/assets

tinydatacenter.com-v2/screen.css

@@ -0,0 +1,162 @@
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Alegreya';
+}
+
+body {
+    color: #333;
+    background-color: #f2f2f2;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 16px;
+}
+
+.container {
+    max-width: 1000px;
+}
+
+.right {
+    float: right;
+    text-align: right;
+}
+
+.navbar {
+    border-radius: 0;
+    box-shadow: 0 0 0 0,0 6px 12px rgba(34,34,34,0.3);
+}
+
+.navbar-default {
+    background-color: #428bca;
+    border: none;
+}
+
+.navbar-default .navbar-brand {
+    color: #fff;
+    font-family: 'Alegreya';
+}
+
+.navbar-default .navbar-brand:hover {
+    color: #fff;
+}
+
+.navbar-default .navbar-nav li a {
+    color: #fff;
+}
+
+.navbar-default .navbar-nav li a:hover {
+    color: #fff;
+    background-color: #3d80ba;
+}
+
+.navbar-default .navbar-nav .active a {
+    color: #fff;
+    background-color: #3d80ba;
+}
+
+.navbar-default .navbar-toggle:hover{
+    background-color: #3d80ba;
+}
+
+.navbar-default .navbar-toggle .icon-bar {
+    background-color: #fff;
+}
+
+#sidebar {
+    margin-left: 15px;
+    margin-top: 50px;
+}
+
+#content {
+    background-color: #fff;
+    border-radius: 3px;
+    box-shadow: 0 0 0 0,0 6px 12px rgba(34,34,34,0.1);
+}
+
+#content img {
+    max-width: 100%;
+    height: auto;
+}
+
+footer {
+    font-size: 14px;
+    text-align: center;
+    padding-top: 75px;
+    padding-bottom: 30px;
+}
+
+#post-tags {
+    margin-top: 30px;
+}
+
+#prev-next {
+    padding: 15px 0;
+}
+
+.post-header {
+    margin-bottom: 20px;
+}
+.post-header h2 {
+    font-size: 32px;
+}
+
+#post-meta {
+    font-size: 14px;
+    color: rgba(0,0,0,0.4)
+}
+
+#page-header {
+    border-bottom: 1px solid #dbdbdb;
+    margin-bottom: 20px;
+}
+#page-header h2 {
+    font-size: 32px;
+}
+
+pre {
+    overflow-x: auto;
+}
+pre code {
+    display: block;
+    padding: 0.5em;
+    overflow-wrap: normal;
+    white-space: pre;
+}
+
+code {
+    color: #428bca;
+}
+
+pre, code, .hljs {
+    background-color: #f7f9fd;
+}
+
+@media (min-width: 768px) {
+    .navbar {
+        min-height: 70px;
+    }
+    .navbar-nav>li>a {
+        padding: 30px 20px;
+    }
+    .navbar-default .navbar-brand {
+        font-size: 36px;
+        padding: 25px 15px;
+    }
+    #content{
+        margin-top: 30px;
+        padding: 30px 40px;
+    }
+}
+
+@media (max-width: 767px) {
+    body{
+        font-size: 14px;
+    }
+    .navbar-default .navbar-brand {
+        font-size: 30px;
+    }
+    #content{
+        padding: 15px;
+    }
+    #post-meta .right {
+        float:left;
+        text-align: left;
+    }
+}

tinydatacenter.com-v2/scripts/start-prod.sh

@@ -1,3 +1,5 @@
 #!/bin/bash
 
-docker run -d --restart always  --name website-v2-static-prod -p 80:9090 website-v2-static
+docker run -d --restart always  --name website-v2-static-prod -p 80:9090 \
+--mount type=bind,source=$HOME/media,target=/tmp/http/media,readonly \
+website-v2-static

tinydatacenter.com-v2/scripts/start.sh

@@ -1,3 +1,6 @@
 #!/bin/bash
 
-docker run -d --restart always --mount type=bind,source=$PWD/app,target=/tmp/app --name website-v2-dev -p 23000:3000 website-v2
+docker run -d --restart always \
+--mount type=bind,source=$PWD/app,target=/tmp/app \
+--mount type=bind,source=$HOME/media,target=/tmp/app/resources/public/media,readonly \
+--name website-v2-dev -p 23000:3000 website-v2