Add template

itopoid · Nov 9, 2016 · 60a8f5c · 60a8f5c
1 parent 668d201
commit 60a8f5c
Show file tree

Hide file tree

Showing 30 changed files with 849 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+/_site
+/.sass-cache
diff --git a/README.md b/README.md
@@ -1,3 +1,34 @@
 # Yattecast
 
 An easy GitHub Pages template for Podcasters.
+
+## Usage
+
+1. Fork this repository
+2. Clone the forked repository
+3. Modify configuration and contents
+4. Preview your site on your local machine
+5. Push your changes to build your site on GitHub Pages
+
+### Requirements
+
+- Ruby 2.2 or later
+- Bundler 1.13 or later
+
+### Set up
+
+You need to install some libraries to preview your site on your local machine.
+
+```bash
+bundle install
+```
+
+### Preview
+
+Execute:
+
+```bash
+bundle exec jekyll serve
+```
+
+then open [http://localhost:4000](http://localhost:4000).
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1,29 @@
+actors:
+  alice:
+    image_url: /images/actors/alice.png
+    name: alice
+    url: http://sns.example.com/alice
+  bob:
+    image_url: /images/actors/bob.png
+    name: bob
+    url: http://sns.example.com/bob
+author: alice
+description: Example description
+description_long: Example long description
+email: [email protected]
+exclude:
+  - Gemfile
+  - Gemfile.lock
+  - README.md
+  - vendor
+hashtag: examplehashtag
+itunes_podcast_url:
+keywords: comma,separated,keywords
+language: ja
+markdown: kramdown
+permalink: /episode/:title
+sass:
+  sass_dir: css
+timezone: Asia/Tokyo
+title: Example title
+url: http://example.com
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -0,0 +1,57 @@
+<footer class="footer">
+  <div class="container">
+    <div class="footer-sections">
+      <div class="row">
+        <section class="column-small-4 footer-sections-element">
+          <h1 class="footer-sections-element-heading">
+            {{ site.title }} とは
+          </h1>
+          <div class="footer-sections-element-description">
+            {{ site.title }} は、{{ site.description_long }}です。
+          </div>
+        </section>
+        <section class="column-small-4 footer-sections-element">
+          <h1 class="footer-sections-element-heading">
+            #{{ site.hashtag }}
+          </h1>
+          <div class="footer-sections-element-description">
+            {{ site.title }} への感想や質問などは、Twitterでハッシュタグ <a href="https://twitter.com/search?q=%23{{ site.hashtag }}" target="_blank">#{{ site.hashtag }}</a> をご利用ください。
+          </div>
+          <a class="twitter-share-button" href="https://twitter.com/intent/tweet?hashtags={{ site.hashtag }}&url={{ site.url }}">
+            Tweet
+          </a>
+        </section>
+        <section class="column-small-4 footer-sections-element">
+          <h1 class="footer-sections-element-heading">
+            購読
+          </h1>
+          <div class="footer-sections-element-description">
+            新しいエピソードの配信を購読できます。
+          </div>
+          <ul>
+            {% if site.itunes_podcast_url %}
+              <li>
+                <a href="{{ site.itunes_podcast_url }}" target="_blank">iTunesで購読</a>
+              </li>
+            {% endif %}
+            <li>
+              <a href="http://subscribeonandroid.com/{{ site.url | remove: "https://" | remove: "http://" }}/feed.xml" target="_blank">Androidで購読</a>
+            </li>
+            <li>
+              <a href="https://push.dog/subscribe?url={{ site.url }}/feed.xml" target="_blank">Pushdogで購読</a>
+            </li>
+            <li>
+              <a href="{{ site.url }}/feed.xml" target="_blank">RSSで購読</a>
+            </li>
+          </ul>
+        </section>
+      </div>
+    </div>
+    <div class="footer-copyright">
+      © 2016 <a href="/">{{ site.title }}</a>
+    </div>
+  </div>
+</footer>
+<script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.23.4/mediaelement-and-player.js"></script>
diff --git a/_includes/head.html b/_includes/head.html
@@ -0,0 +1,18 @@
+<head>
+  <meta charset="utf-8">
+  <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
+  <meta name="viewport" content="width=device-width">
+  <meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}" />
+  <meta name="twitter:card" content="summary" />
+  <meta name="twitter:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}" />
+  <meta name="twitter:image" content="{{ site.url }}/images/logo.jpg" />
+  <meta name="twitter:title" content="{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}" />
+  <meta property="og:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}" />
+  <meta property="og:image" content="{{ site.url }}/images/logo.jpg" />
+  <meta property="og:site_name" content="{{ site.title }}" />
+  <meta property="og:type" content="blog" />
+  <meta property="og:url" content="{{ page.url }}" />
+  <link rel="alternate" type="application/rss+xml" href="{{ site.url }}/feed.xml" />
+  <link rel="stylesheet" href="/css/main.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.23.4/mediaelementplayer.min.css">
+</head>
diff --git a/_includes/header.html b/_includes/header.html
@@ -0,0 +1,14 @@
+<header class="header">
+  <div class="header-overlay">
+    <div class="container">
+      <h1 class="header-heading">
+        <a href="/">
+          {{ site.title }}
+        </a>
+      </h1>
+      <div class="header-description">
+        {{ site.description }}
+      </div>
+    </div>
+  </div>
+</header>
diff --git a/_layouts/article.html b/_layouts/article.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang={{ site.language }}>
+  {% include head.html %}
+  <body>
+    {% include header.html %}
+    <main class="main">
+      <div class="container">
+        <article class="article card">
+          <header class="article-header card-header">
+            <h1 class="card-heading">
+              <a href="{{ page.url }}">
+                {{ page.title }}
+              </a>
+            </h1>
+            <div class="article-header-note">
+              {{ page.date | date: "%Y年%m月%d日" }}
+            </div>
+          </header>
+          <section class="card-body markdown">
+            <p>
+              {{ page.description }}
+            </p>
+            <p>
+              <audio
+                class="mejs-player"
+                controls=""
+                data-mejsoptions='{"alwaysShowControls": true, "alwaysShowHours": true, "enableAutosize": true, "features": ["playpause", "progress", "current", "duration", "volume", "speed"]}'
+                preload="auto"
+                src="{{ page.audio_file_path }}"
+                width="100%"
+              >
+              </audio>
+            </p>
+            <p class="text-right">
+              <small>
+                <a href="{{ page.audio_file_path }}">MP3ファイルをダウンロード</a>
+              </small>
+            </p>
+            <h2>
+              出演者
+            </h2>
+            <div class="article-actors">
+              {% for actor_id in page.actor_ids %}
+                {% assign actor = site.actors[actor_id] %}
+                <a href="{{ actor.url }}" class="actor" target="_blank">
+                  <img src="{{ actor.image_url }}" alt="{{ actor.name }}" class="actor-image" width="72" height="72">
+                  <br>
+                  {{ actor.name }}
+                </a>
+              {% endfor %}
+            </div>
+            {{ content }}
+          </section>
+          <footer class="article-footer">
+            <a class="twitter-share-button" href="https://twitter.com/intent/tweet?hashtags={{ site.hashtag }}&url={{ site.url }}{{ page.url }}&text={{ page.title }}">
+              Tweet
+            </a>
+          </footer>
+        </article>
+      </div>
+    </main>
+    {% include footer.html %}
+  </body>
+</html>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang={{ site.language }}>
+  {% include head.html %}
+  <body>
+    {% include header.html %}
+    <main class="main">
+      {{ content }}
+    </main>
+    {% include footer.html %}
+  </body>
+</html>
diff --git a/_posts/2016-11-10-1.md b/_posts/2016-11-10-1.md
@@ -0,0 +1,17 @@
+---
+actor_ids:
+  - alice
+  - bob
+audio_file_path: /audio/1.mp3
+audio_file_size: 0
+date: 2016-11-10 00:00:00 +0900
+description: aliceとbobの2人で、alpha、bravo、charlieなどについて話しました。
+duration: "00:00"
+layout: article
+title: 1. Example title
+---
+
+## 関連リンク
+
+- [アリスとボブ - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%AA%E3%82%B9%E3%81%A8%E3%83%9C%E3%83%96)
+- [NATOフォネティックコード - Wikipedia](https://ja.wikipedia.org/wiki/NATO%E3%83%95%E3%82%A9%E3%83%8D%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B3%E3%83%BC%E3%83%89)
diff --git a/audio/1.mp3 b/audio/1.mp3
diff --git a/css/_mixins.scss b/css/_mixins.scss
@@ -0,0 +1,8 @@
+@mixin clearfix {
+  &::after,
+  &::before {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}
diff --git a/css/_variables.scss b/css/_variables.scss
@@ -0,0 +1,12 @@
+$color-text-dark-primary: rgba(0, 0, 0, 0.87);
+$color-text-dark-secondary: rgba(0, 0, 0, 0.54);
+$color-text-dark-hint: rgba(0, 0, 0, 0.38);
+$color-text-light-primary: #fff;
+$color-text-light-secondary: rgba(255, 255, 255, 0.7);
+$color-text-light-hint: rgba(255, 255, 255, 0.5);
+
+$font-family-monospace: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+
+$width-gutter: 24px;
+$width-screen-extra-small-maximum: 767px;
+$width-screen-small-minimum: $width-screen-extra-small-maximum + 1;
diff --git a/css/blocks/_actor.scss b/css/blocks/_actor.scss
@@ -0,0 +1,20 @@
+.actor {
+  display: inline-block;
+  margin-bottom: 1rem;
+  text-align: center;
+
+  &,
+  &:active,
+  &:focus,
+  &:hover {
+    text-decoration: none !important;
+  }
+
+  & + & {
+    margin-left: 1rem;
+  }
+
+  &-image {
+    border-radius: 50%;
+  }
+}
diff --git a/css/blocks/_article.scss b/css/blocks/_article.scss
@@ -0,0 +1,19 @@
+.article {
+  &-header {
+    margin-bottom: 24px;
+
+    &-note {
+      color: $color-text-dark-secondary;
+      font-size: 0.9em;
+    }
+  }
+
+  &-slideshow {
+    max-width: 600px;
+    height: 400px;
+  }
+
+  audio {
+    width: 100%;
+  }
+}
diff --git a/css/blocks/_base.scss b/css/blocks/_base.scss
@@ -0,0 +1,22 @@
+* {
+  box-sizing: border-box;
+}
+
+a {
+  &,
+  &:active,
+  &:focus,
+  &:hover {
+    color: #1c3c7c;
+    text-decoration: none;
+  }
+}
+
+body {
+  background-color: #eee;
+  color: $color-text-dark-primary;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Hiragino Kaku Gothic ProN, "メイリオ", meiryo, sans-serif;
+  font-size: 17px;
+  line-height: 1.7;
+  word-wrap: break-word;
+}
diff --git a/css/blocks/_card.scss b/css/blocks/_card.scss
@@ -0,0 +1,38 @@
+.card {
+  background-color: #fff;
+  border-radius: 2px;
+  margin-bottom: 24px;
+
+  &-body,
+  &-header {
+    padding-bottom: 32px;
+    padding-top: 32px;
+  }
+
+  &-body + &-body,
+  &-header + &-body {
+    padding-top: 0;
+  }
+
+  &-body-large {
+    font-size: 1.2rem;
+  }
+
+  &-header {
+    text-align: center;
+  }
+
+  &-heading {
+    font-size: 2rem;
+  }
+
+  &-paragraph {
+    & + & {
+      margin-top: 1em;
+    }
+  }
+
+  strong {
+    font-weight: bold;
+  }
+}
diff --git a/css/blocks/_container.scss b/css/blocks/_container.scss
@@ -0,0 +1,7 @@
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 960px;
+  padding-left: 16px;
+  padding-right: 16px;
+}