Merge pull request #4 from kazu634/make-another-sections

Make `Labs` section
2019-04-09 09:34:05 +09:00 · 2019-04-09 09:34:05 +09:00 · edb7a95bc4
parent 1a934a8897 bf1ecb0a9c
commit edb7a95bc4
7 changed files with 343 additions and 0 deletions
--- a/content/labs/_index.md
+++ b/content/labs/_index.md
@ -0,0 +1,9 @@
+---
+title: Labs Page
+date: 2019-04-08
+publishdate: 2019-04-08
+---
+
+まとまった分量の技術的な文章を置くために設置してみました。主に`Javascript`や`CSS`を使った実験ができればいいなと思っています
+
+
--- a/content/labs/leaflet-js/001-leaflet-js-tutorial.md
+++ b/content/labs/leaflet-js/001-leaflet-js-tutorial.md
@ -0,0 +1,48 @@
+++
+title="Leaflet.jsでMapboxのタイルを用いて地図を表示する"
+date=2019-04-08
+publishdate=2019-04-08
+Description="Leaflet.jsでMapboxのタイルを用いて地図を表示するよ"
+image="https://farm9.staticflickr.com/8462/29581774242_bf25a0a820_z.jpg"
+leaflet=true
+++
+
+[Leaflet.js](https://leafletjs.com/)でMapboxのタイルを用いて地図を表示してみます:
+
+<div id="mapid"></div>
+
+<script>
+  var mymap = L.map('mapid').setView([35.7142, 139.7774], 13)
+
+  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia2F6dTYzNCIsImEiOiJjanU4OHg0YjIyMjcxNDNsb2dnM2k5bHhqIn0.dsjWTh-G_TcJ9bOGWLvT2Q', {
+    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+    maxZoom: 18,
+    id: 'mapbox.streets',
+    accessToken: 'pk.eyJ1Ijoia2F6dTYzNCIsImEiOiJjanU4OHg0YjIyMjcxNDNsb2dnM2k5bHhqIn0.dsjWTh-G_TcJ9bOGWLvT2Q'
+  }).addTo(mymap);
+
+  var marker = L.marker([35.7142, 139.7774]).addTo(mymap);
+  marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
+</script>
+
+## コード
+こんな感じになります:
+
+```
+<div id="mapid"></div>
+
+<script>
+  var mymap = L.map('mapid').setView([35.7142, 139.7774], 13)
+
+  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=<access_token>' {
+    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+    maxZoom: 18,
+    id: 'mapbox.streets',
+    accessToken: 'access_token'
+  }).addTo(mymap);
+
+  var marker = L.marker([35.7142, 139.7774]).addTo(mymap);
+  marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
+</script>
+```
+
--- a/layouts/labs/list.html
+++ b/layouts/labs/list.html
@ -0,0 +1,19 @@
+{{ partial "header.html" . }}
+
+  <!-- Main Section Layout
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <main id="list" role="main">
+    <div class="article-header light-gray"><h1>{{ .Title }}</h1></div>
+    {{.Content}}
+    <br>
+    {{ range .Data.Pages }}
+    <div class="summary">
+      <h2><a href="{{ .Permalink }}">{{ .Title }} {{ if .Draft }}:: DRAFT{{end}}</a></h2>
+      <div class="meta">
+        {{ .Date.Format "Jan 2, 2006" }}: {{.Description}}
+      </div>
+    </div>
+    {{ end }}
+  </main>
+
+{{ partial "footer.html" . }}
--- a/layouts/labs/single.html
+++ b/layouts/labs/single.html
@ -0,0 +1,32 @@
+{{ partial "labs-header-content.html" . }}
+
+  <!-- Main Section Layout
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <main id="single" role="main">
+    <div class="article-header">
+      <h1>{{ .Title }}</h1>
+      <div class="meta">
+        {{ .Date.Format "Jan 2, 2006" }} &nbsp;
+        {{ range .Params.categories }}
+        #<a href="/categories/{{ . | urlize }}">{{ . }}</a>&nbsp;
+        {{ end }}
+        {{ range .Params.tags }}
+          #<a href="/tags/{{ . | urlize }}">{{ . }}</a>&nbsp;
+        {{ end }}: {{ .Description }}
+      </div>
+    </div>
+    <article>
+      {{ .Content }}
+
+  </main>
+
+  <nav class="pagination">
+    {{ if .Next }}
+      <span class="previous">&larr; <a href="{{ .Next.Permalink }}" rel="prev">{{ .Next.Title }}</a></span>
+    {{ end }}
+    {{ if .Prev }}
+      <span class="next"><a href="{{ .Prev.Permalink }}" rel="next">{{ .Prev.Title }}</a> &rarr;</span>
+    {{ end }}
+  </nav>
+
+{{ partial "footer.html" . }}
--- a/layouts/partials/header-content.html
+++ b/layouts/partials/header-content.html
@ -0,0 +1,77 @@
+
+<!DOCTYPE html>
+<html lang="{{.Site.LanguageCode}}">
+
+<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
+
+  <!-- Basic Page Needs
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <meta charset="UTF-8">
+  <title>
+    {{ $isHomePage := eq .Title .Site.Title }}{{ .Title }}{{ if eq $isHomePage false }} | {{ .Site.Title }}{{ end }}
+  </title>
+
+
+  <!-- Mobile Specific Metas
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1,initial-scale=1">
+
+  <!-- HTTPS Canonical URL
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <link rel="canonical" href="{{ .Permalink }}"/>
+
+  <!-- CSS
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <link rel="stylesheet" href="/css/sanitize.css">
+  <link rel="stylesheet" href="/css/responsive.css">
+  <link rel="stylesheet" href="/css/highlight_monokai.css">
+  <link rel="stylesheet" href="/css/theme.css">
+  <link rel="stylesheet" href="/css/custom.css">
+
+  <!-- RSS
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <link href="{{ .Site.BaseURL }}index.xml" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
+  <link href="{{ .Site.BaseURL }}index.xml" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}" />
+
+  <!-- ShareThis Buttons
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <script type="text/javascript">var switchTo5x=true;</script>
+  <script type="text/javascript">stLight.options({publisher: "2b9fffc6-b3fe-4988-a0ef-4f9dcce98eaa", doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
+
+  <!-- OGP Settings
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <meta property="fb:app_id" content="951084758293113" />
+  <meta property="og:site_name" content="His Greatness Lies in His Sense of Responsibility" />
+  <meta property="og:type" content="article" />
+  <meta property="og:url" content="{{ .Permalink }}" />
+  <meta property="og:title" content="{{ .Title }}" />
+  {{ if .Params.image }}<meta property="og:image" content="{{ .Params.image }}" />{{ end }}
+  <meta property="og:locale"  content="ja_JP" />
+  <meta property="og:description"  content="{{ .Description }}" />
+  <meta property="article:publisher" content="https://www.facebook.com/kazu634" />
+</head>
+
+
+
+<body>
+<div class="container">
+
+  <!-- Header Section Layout
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <header role="banner">
+    <div class="row gutters">
+      <div id="site-title" class="col span_6">
+        <h1><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
+        {{ with .Site.Params.subtitle }}<h2>{{ . }}</h2>{{ end }}
+      </div>
+      <div id="social" class="col span_6">
+        <ul>
+          <li><a href="https://blog.kazu634.com/labs/">Labs</a></li>
+          {{ with .Site.Params.twitter }}<li><a href="{{ . }}" target="_blank">Twitter</a></li>{{ end }}
+          {{ with .Site.Params.facebook }}<li><a href="{{ . }}" target="_blank">Facebook</a></li>{{ end }}
+          {{ with .Site.Params.github }}<li><a href="{{ . }}" target="_blank">GitHub</a></li>{{ end }}
+          {{ if .Site.Params.showsRSS }}<li><a href="{{ .Site.BaseURL }}index.xml" type="application/rss+xml" target="_blank">RSS</a></li>{{ end }}
+        </ul>
+      </div>
+    </div>
+  </header>
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -0,0 +1,66 @@
+
+<!DOCTYPE html>
+<html lang="{{.Site.LanguageCode}}">
+
+<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
+
+  <!-- Basic Page Needs
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <meta charset="UTF-8">
+  <title>
+    {{ $isHomePage := eq .Title .Site.Title }}{{ .Title }}{{ if eq $isHomePage false }} | {{ .Site.Title }}{{ end }}
+  </title>
+
+
+  <!-- Mobile Specific Metas
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1,initial-scale=1">
+
+  <!-- HTTPS Canonical URL
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <link rel="canonical" href="{{ .Permalink }}"/>
+
+  <!-- CSS
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <link rel="stylesheet" href="/css/sanitize.css">
+  <link rel="stylesheet" href="/css/responsive.css">
+  <link rel="stylesheet" href="/css/highlight_monokai.css">
+  <link rel="stylesheet" href="/css/theme.css">
+  <link rel="stylesheet" href="/css/custom.css">
+
+  <!-- RSS
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <link href="{{ .Site.BaseURL }}index.xml" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
+  <link href="{{ .Site.BaseURL }}index.xml" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}" />
+
+  <!-- ShareThis Buttons
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <script type="text/javascript">var switchTo5x=true;</script>
+  <script type="text/javascript">stLight.options({publisher: "2b9fffc6-b3fe-4988-a0ef-4f9dcce98eaa", doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
+
+</head>
+
+
+
+<body>
+<div class="container">
+
+  <!-- Header Section Layout
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <header role="banner">
+    <div class="row gutters">
+      <div id="site-title" class="col span_6">
+        <h1><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
+        {{ with .Site.Params.subtitle }}<h2>{{ . }}</h2>{{ end }}
+      </div>
+      <div id="social" class="col span_6">
+        <ul>
+          <li><a href="https://blog.kazu634.com/labs/">Labs</a></li>
+          {{ with .Site.Params.twitter }}<li><a href="{{ . }}" target="_blank">Twitter</a></li>{{ end }}
+          {{ with .Site.Params.facebook }}<li><a href="{{ . }}" target="_blank">Facebook</a></li>{{ end }}
+          {{ with .Site.Params.github }}<li><a href="{{ . }}" target="_blank">GitHub</a></li>{{ end }}
+          {{ if .Site.Params.showsRSS }}<li><a href="{{ .Site.BaseURL }}index.xml" type="application/rss+xml" target="_blank">RSS</a></li>{{ end }}
+        </ul>
+      </div>
+    </div>
+  </header>
--- a/layouts/partials/labs-header-content.html
+++ b/layouts/partials/labs-header-content.html
@ -0,0 +1,92 @@
+
+<!DOCTYPE html>
+<html lang="{{.Site.LanguageCode}}">
+
+<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
+
+  <!-- Basic Page Needs
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <meta charset="UTF-8">
+  <title>
+    {{ $isHomePage := eq .Title .Site.Title }}{{ .Title }}{{ if eq $isHomePage false }} | {{ .Site.Title }}{{ end }}
+  </title>
+
+
+  <!-- Mobile Specific Metas
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1,initial-scale=1">
+
+  <!-- HTTPS Canonical URL
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <link rel="canonical" href="{{ .Permalink }}"/>
+
+  <!-- CSS
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <link rel="stylesheet" href="/css/sanitize.css">
+  <link rel="stylesheet" href="/css/responsive.css">
+  <link rel="stylesheet" href="/css/highlight_monokai.css">
+  <link rel="stylesheet" href="/css/theme.css">
+  <link rel="stylesheet" href="/css/custom.css">
+
+  {{ if .Params.leaflet }}
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="crossorigin=""/>
+
+  <style type="text/css">
+    <!--
+    #mapid { height: 600px; }
+    -->
+  </style>
+  {{ end }}
+
+  <!-- RSS
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <link href="{{ .Site.BaseURL }}index.xml" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
+  <link href="{{ .Site.BaseURL }}index.xml" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}" />
+
+  <!-- Javascript
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <script type="text/javascript">var switchTo5x=true;</script>
+  <script type="text/javascript">stLight.options({publisher: "2b9fffc6-b3fe-4988-a0ef-4f9dcce98eaa", doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
+
+  {{ if .Params.leaflet }}
+  <!-- Make sure you put this AFTER Leaflet's CSS -->
+  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
+  {{ end }}
+
+  <!-- OGP Settings
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <meta property="fb:app_id" content="951084758293113" />
+  <meta property="og:site_name" content="His Greatness Lies in His Sense of Responsibility" />
+  <meta property="og:type" content="article" />
+  <meta property="og:url" content="{{ .Permalink }}" />
+  <meta property="og:title" content="{{ .Title }}" />
+  {{ if .Params.image }}<meta property="og:image" content="{{ .Params.image }}" />{{ end }}
+  <meta property="og:locale"  content="ja_JP" />
+  <meta property="og:description"  content="{{ .Description }}" />
+  <meta property="article:publisher" content="https://www.facebook.com/kazu634" />
+</head>
+
+
+
+<body>
+<div class="container">
+
+  <!-- Header Section Layout
+  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
+  <header role="banner">
+    <div class="row gutters">
+      <div id="site-title" class="col span_6">
+        <h1><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
+        {{ with .Site.Params.subtitle }}<h2>{{ . }}</h2>{{ end }}
+      </div>
+      <div id="social" class="col span_6">
+        <ul>
+          <li><a href="https://blog.kazu634.com/labs/">Labs</a></li>
+          {{ with .Site.Params.twitter }}<li><a href="{{ . }}" target="_blank">Twitter</a></li>{{ end }}
+          {{ with .Site.Params.facebook }}<li><a href="{{ . }}" target="_blank">Facebook</a></li>{{ end }}
+          {{ with .Site.Params.github }}<li><a href="{{ . }}" target="_blank">GitHub</a></li>{{ end }}
+          {{ if .Site.Params.showsRSS }}<li><a href="{{ .Site.BaseURL }}index.xml" type="application/rss+xml" target="_blank">RSS</a></li>{{ end }}
+        </ul>
+      </div>
+    </div>
+  </header>