fix(header): Enable truncation for title, subtile and description

- Update docs system
- Add references to old docs

CONTRIBUTION.md

@@ -95,32 +95,11 @@ from the main (upstream) repository:
     git pull --ff upstream master
     ```
 
-## <a name="rules"></a> Coding Rules
-
-To ensure consistency throughout the source code, keep these rules in mind as you are working:
-
-* All features or bug fixes **must be tested** by one or more [specs][unit-testing].
-* All public API methods **must be documented** with ngdoc, an extended version of jsdoc (we added
-  support for markdown and templating via @ngdoc tag). To see how we document our APIs, please check
-  out the existing source code and see [this wiki page][ngDocs].
-* With the exceptions listed below, we follow the rules contained in
-  [Google's JavaScript Style Guide][js-style-guide]:
-    * **Do not use namespaces**: Instead,  wrap the entire AngularJS code base in an anonymous closure and
-      export our API explicitly rather than implicitly.
-    * Wrap all code at **100 characters**.
-    * Instead of complex inheritance hierarchies, we **prefer simple objects**. We use prototypal
-      inheritance only when absolutely necessary.
-    * We **love functions and closures** and, whenever possible, prefer them over objects.
-    * To write concise code that can be better minified, we **use aliases internally** that map to the
-      external API. See our existing code to see what we mean.
-    * We **don't go crazy with type annotations** for private internal APIs unless it's an internal API
-      that is used throughout AngularJS. The best guidance is to do what makes the most sense.
-
 ## <a name="commit"></a> Git Commit Guidelines
 
 We have very precise rules over how our git commit messages can be formatted.  This leads to **more
 readable messages** that are easy to follow when looking through the **project history**.  But also,
-we use the git commit messages to **generate the AngularJS change log**.
+we use the git commit messages to **generate the change log**.
 
 The commit message formatting can be added using a typical git workflow or through the use of a CLI
 wizard ([Commitizen](https://github.com/commitizen/cz-cli)). To use the wizard, run `yarn commit`
@@ -162,8 +141,8 @@ Must be one of the following:
   generation
 
 ### Scope
-The scope could be anything specifying place of the commit change. For example `$location`,
-`$browser`, `$compile`, `$rootScope`, `ngHref`, `ngClick`, `ngView`, etc...
+The scope could be anything specifying place of the commit change. For example `progress`,
+`chapters`, `settings`, `tabs`, etc...
 
 You can use `*` when the change affects more than a single scope.
 

circle.yml

@@ -47,6 +47,7 @@ deployment:
       - yarn deploy:gh-pages
 
   release:
+    branch: master
     tag: /v.*/
     commands:
       - yarn dist:clean

docs/Gemfile

@@ -11,7 +11,7 @@ source "https://rubygems.org"
 gem "jekyll", "3.5.0"
 
 # This is the default theme for new Jekyll sites. You may change this to anything you like.
-gem "millidocs", "~> 0.2.2"
+gem "millidocs", "~> 0.2.3"
 
 # If you want to use GitHub Pages, remove the "gem "jekyll"" above and
 # uncomment the line below. To upgrade, run `bundle update github-pages`.

docs/Gemfile.lock

@@ -27,7 +27,7 @@ GEM
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
     mercenary (0.3.6)
-    millidocs (0.2.2)
+    millidocs (0.2.3)
       jekyll (~> 3.4)
     pathutil (0.14.0)
       forwardable-extended (~> 2.6)
@@ -44,7 +44,7 @@ PLATFORMS
 
 DEPENDENCIES
   jekyll (= 3.5.0)
-  millidocs (~> 0.2.2)
+  millidocs (~> 0.2.3)
 
 BUNDLED WITH
    1.15.1

docs/embedding.md

@@ -6,7 +6,7 @@ navigation: 2
 
 # Embedding
 
-<div id="example" class="section"></div>
+<p id="example" class="section"></p>
 <script src="{{ 'embed.js' | relative_url }}"></script>
 <script>
     podlovePlayer('#example', './fixtures/example.json');

docs/index.md

@@ -6,7 +6,7 @@ navigation: 1
 # Podlove Web Player 4.0
 ### The fast, flexible and responsive podcast player powered by podlove meta data.
 
-<div id="example"></div>
+<p id="example"></p>
 <script src="{{ 'embed.js' | relative_url }}"></script>
 <script>
     var examples = [
@@ -217,3 +217,8 @@ navigation: 1
 - Sharing
 - State Persistance
 - Deep Linking
+
+## Previous Versions
+
+- [Podlove Web Player v3 Docs](docs.podlove.org/podlove-web-player-v3/)
+- [Podlove Web Player v2 Docs](docs.podlove.org/podlove-web-player-v3/versions/v2.html)

docs/persistence.md

@@ -6,7 +6,7 @@ navigation: 5
 
 # Persistence
 
-<div id="example" class="section"></div>
+<p id="example"></p>
 <script src="{{ 'embed.js' | relative_url }}"></script>
 <script>
     podlovePlayer('#example', './fixtures/example.json');

docs/playground.md

@@ -6,7 +6,7 @@ navigation: 7
 
 # Playground
 
-<div id="player"></div>
+<p id="player"></p>
 <div id="editor"></div>
 <script src="{{ 'embed.js' | relative_url }}"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.5.11/jsoneditor.min.js"></script>
@@ -18,7 +18,7 @@ navigation: 7
         summary: 'Wir haben eine wie wir finden abwechslungsreiche Sendung produziert, die wir Euch wie immer mit Freude bereitstellen. Während die Live-Hörer Freak-Show-Bingo spielen, greifen wir das Wikipedia-Thema der letzten Sendung auf und liefern auch noch weitere Aspekte des optimalen Star-Wars-Medienkonsums frei Haus. Dazu viel Nerderei rund um die Kommandozeile, eine Einschätzung der Perspektive der Apple Watch, ein Rant über die mangelhafte Security  im Internet of Things (and Buildings) und allerlei anderer Kram.  Roddi setzt dieses Mal aus, sonst Vollbesetzung.',
         publicationDate: '2016-02-11T03:13:55+00:00',
         poster: 'https://freakshow.fm/wp-content/cache/podlove/04/662a9d4edcf77ea2abe3c74681f509/freak-show_200x200.jpg',
-        link: 'https://freakshow.fm/fs171-invasion'
+        link: 'https://freakshow.fm/fs171-invasion',
         show: {
             title: 'Freak Show',
             subtitle: 'Menschen! Technik! Sensationen!',

package.json

@@ -29,7 +29,7 @@
     "postinstall": "cd docs && bundle install",
     "docs:dev": "jekyll build --source docs --destination dist && cp -R docs/fixtures/* dist/fixtures",
     "docs:prod": "jekyll build --source docs --destination dist --config docs/_config_prd.yml && cp -R docs/fixtures/* dist/fixtures",
-    "webpack:dev": "webpack-dashboard -- webpack-dev-server --content-base dist/ --progress --hot --inline --config src/webpack.config.js --host 192.168.178.42",
+    "webpack:dev": "webpack-dashboard -- webpack-dev-server --content-base dist/ --progress --hot --inline --config src/webpack.config.js",
     "webpack:build": "NODE_ENV='production' webpack --config src/webpack.config.js",
     "build": "npm run webpack:build",
     "dev": "npm run dist:clean && npm run docs:dev && npm run webpack:dev",

src/components/header/Info.vue

@@ -6,13 +6,13 @@
       </div>
     </div>
     <div class="description">
-      <h2 class="show-title truncate" :style="titleStyle" v-if="show.title">
-        <a :href="show.link" target="_blank" v-if="display === 'embed' && show.link">{{show.title}}</a>
-        <span v-else>{{show.title}}</span>
+      <h2 class="show-title" :style="titleStyle" v-if="show.title">
+        <a :href="show.link" target="_blank" class="truncate" v-if="display === 'embed' && show.link">{{show.title}}</a>
+        <span class="truncate" v-else>{{show.title}}</span>
       </h2>
-      <h1 class="title truncate" :style="titleStyle" v-if="episode.title">
-        <a :href="episode.link" target="_blank" v-if="display === 'embed' && episode.link">{{episode.title}}</a>
-        <span v-else>{{episode.title}}</span>
+      <h1 class="title" :style="titleStyle" v-if="episode.title">
+        <a :href="episode.link" target="_blank" class="truncate" v-if="display === 'embed' && episode.link">{{episode.title}}</a>
+        <span class="truncate" v-else>{{episode.title}}</span>
       </h1>
       <div class="subtitle" :style="subtitleStyle" v-if="episode.subtitle">{{episode.subtitle}}</div>
     </div>
@@ -78,13 +78,28 @@
       margin-bottom: $margin / 3;
       font-weight: inherit;
       font-size: 1.8em;
+
+      a, span {
+        display: block;
+      }
     }
 
     .show-title {
       margin: 0;
       font-weight: inherit;
       font-size: 1em;
       line-height: 1.2em;
+      min-width: 0;
+
+      a, span {
+        display: block;
+      }
+    }
+
+    .description {
+      width: 100%;
+      max-width: 100%;
+      overflow: hidden;
     }
 
     .subtitle {

src/components/icons/AudioIcon.vue

@@ -1,40 +1,38 @@
 <template>
-  <svg v-if="muted || volume <= 0" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 21">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g :stroke="color || 'currentColor'">
-          <polyline points="9 17 12.5 20.5 12.5 12"></polyline>
-          <path d="M12.5,6 L12.5,0.5 L5.5,7.5 L2,7.5 C1.172,7.5 0.5,8.172 0.5,9 L0.5,12 C0.5,12.828 1.172,13.5 2,13.5 L4.5,13.5"></path>
-          <path d="M15.5,10.5 C15.5,11.881 14.381,13 13,13 L12.5,13"></path>
-          <path d="M1.5,20.5 L21.5,0.5"></path>
-        </g>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24.8" height="21" viewBox="0 0 24.8 21">
+    <!-- Muted / 0% -->
+    <g v-if="muted || volume <= 0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+      <g :stroke="color || 'currentColor'">
+        <polyline points="9,17 12.5,20.5 12.5,12"/>
+        <path d="M12.5,6V0.5l-7,7H2C1.2,7.5,0.5,8.2,0.5,9v3c0,0.8,0.7,1.5,1.5,1.5h2.5"/>
+        <path d="M15.5,10.5c0,1.4-1.1,2.5-2.5,2.5h-0.5"/>
+        <path d="M1.5,20.5l20-20"/>
+      </g>
     </g>
-  </svg>
-  <svg v-else-if="!muted && volume > 0 && volume <= 25" width="18" height="21" viewBox="0 0 18 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g :stroke="color || 'currentColor'">
-          <path d="M5.5,7.5 L2,7.5 C1.172,7.5 0.5,8.172 0.5,9 L0.5,12 C0.5,12.828 1.172,13.5 2,13.5 L5.5,13.5 L12.5,20.5 L12.5,0.5 L5.5,7.5 L5.5,7.5 Z"></path>
-          <path d="M15.5,7 C16.625,7.818 17.5,9.002 17.5,10.5 C17.5,11.998 16.626,13.182 15.5,14"></path>
-        </g>
+    <!-- 25% -->
+    <g v-else-if="!muted && volume > 0 && volume <= 25" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+      <g :stroke="color || 'currentColor'">
+        <path d="M5.5,7.5H2C1.2,7.5,0.5,8.2,0.5,9v3c0,0.8,0.7,1.5,1.5,1.5h3.5l7,7v-20L5.5,7.5L5.5,7.5z"/>
+        <path d="M15.5,7c1.1,0.8,2,2,2,3.5s-0.9,2.7-2,3.5"/>
+      </g>
     </g>
-  </svg>
-  <svg v-else-if="!muted && volume > 25 && volume <= 50" width="21" height="21" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g :stroke="color || 'currentColor'">
-          <path d="M5.5,7.5 L2,7.5 C1.172,7.5 0.5,8.172 0.5,9 L0.5,12 C0.5,12.828 1.172,13.5 2,13.5 L5.5,13.5 L12.5,20.5 L12.5,0.5 L5.5,7.5 L5.5,7.5 Z"></path>
-          <path d="M17.5,4.5 C19.167,5.876 20.5,8.17 20.5,10.5 C20.5,12.826 19.162,15.125 17.5,16.5"></path>
-          <path d="M15.5,7 C16.625,7.818 17.5,9.002 17.5,10.5 C17.5,11.998 16.626,13.182 15.5,14"></path>
-        </g>
+    <!-- 50% -->
+    <g v-else-if="!muted && volume > 25 && volume <= 50" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+      <g :stroke="color || 'currentColor'">
+        <path d="M5.5,7.5H2C1.2,7.5,0.5,8.2,0.5,9v3c0,0.8,0.7,1.5,1.5,1.5h3.5l7,7v-20L5.5,7.5L5.5,7.5z"/>
+        <path d="M17.5,4.5c1.7,1.4,3,3.7,3,6c0,2.3-1.3,4.6-3,6"/>
+        <path d="M15.5,7c1.1,0.8,2,2,2,3.5s-0.9,2.7-2,3.5"/>
+      </g>
     </g>
-  </svg>
-  <svg v-else width="24" height="21" viewBox="0 0 24 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-          <g :stroke="color || 'currentColor'">
-            <path d="M5.5,7.5 L2,7.5 C1.172,7.5 0.5,8.172 0.5,9 L0.5,12 C0.5,12.828 1.172,13.5 2,13.5 L5.5,13.5 L12.5,20.5 L12.5,0.5 L5.5,7.5 L5.5,7.5 Z"></path>
-            <path d="M20,2.5 C22.201,4.425 23.5,7.346 23.5,10.5 C23.5,13.654 22.201,16.575 20,18.5"></path>
-            <path d="M17.5,4.5 C19.167,5.876 20.5,8.17 20.5,10.5 C20.5,12.826 19.162,15.125 17.5,16.5"></path>
-            <path d="M15.5,7 C16.625,7.818 17.5,9.002 17.5,10.5 C17.5,11.998 16.626,13.182 15.5,14"></path>
-          </g>
+    <!-- 75% -->
+    <g v-else stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+      <g :stroke="color || 'currentColor'">
+        <path d="M5.5,7.5H2C1.2,7.5,0.5,8.2,0.5,9v3c0,0.8,0.7,1.5,1.5,1.5h3.5l7,7v-20L5.5,7.5L5.5,7.5z"/>
+        <path d="M20,2.5c2.2,1.9,3.5,4.8,3.5,8s-1.3,6.1-3.5,8"/>
+        <path d="M17.5,4.5c1.7,1.4,3,3.7,3,6c0,2.3-1.3,4.6-3,6"/>
+        <path d="M15.5,7c1.1,0.8,2,2,2,3.5s-0.9,2.7-2,3.5"/>
       </g>
+    </g>
   </svg>
 </template>