feat: use relative path for in site reference

Author: kt3k

bulbofile.js

@@ -12,7 +12,8 @@ const data = {
   orgName: 'Node.js 日本ユーザーグループ',
   pages: require('./pages'),
   layoutDir: path.join(__dirname, 'source/layout'),
-  basepath: process.env.BASEPATH || ''
+  // file を受け取って root への相対パスを返す関数
+  basepath: file => path.dirname(path.relative(file.relative, ''))
 }
 
 require('nunjucks').configure().addFilter('date', require('nunjucks-date'))

source/layout/event-index.njk

@@ -5,7 +5,7 @@
 
   {% for event in file.files %}
     <hr />
-    <h2><a href="{{ basepath }}/{{ event.relative }}">{{ event.fm.name }}</a></h2>
+    <h2><a href="{{ basepath(file) }}/{{ event.relative }}">{{ event.fm.name }}</a></h2>
     <p>日時:
     {% for date in event.fm.date %}
       {% if not loop.first %}
@@ -14,7 +14,7 @@
       {{ date | date('YYYY年MM月DD日') }}
     {% endfor %}
     {% if event.fm.image %}
-      <p><a href="{{ basepath }}{{ event.relative }}"><img src="{{ event.fm.image }}" /></a></p>
+      <p><a href="{{ basepath(file) }}{{ event.relative }}"><img src="{{ event.fm.image }}" /></a></p>
     {% endif %}
     </ul>
   {% endfor %}

source/layout/event.njk

@@ -5,9 +5,9 @@
   <hr />
   {% if file.fm.image %}
     {% if file.fm.site %}
-      <a href="{{ file.fm.site.url }}"><img src="{{ basepath }}/{{ file.fm.image }}" /></a>
+      <a href="{{ file.fm.site.url }}"><img src="{{ basepath(file) }}/{{ file.fm.image }}" /></a>
     {% else %}
-      <img src="{{ basepath }}/{{ file.fm.image }}" />
+      <img src="{{ basepath(file) }}/{{ file.fm.image }}" />
     {% endif %}
     <br/>
     <br/>

source/layout/job.njk

@@ -4,7 +4,7 @@
 <h1>{{ file.fm.name }}</h1>
 {% if file.fm.image %}
   <a href="{{ file.fm.url }}">
-    <img src="{{ basepath }}/{{ file.fm.image }}" width="165" style="margin: 15px;"/>
+    <img src="{{ basepath(file) }}/{{ file.fm.image }}" width="165" style="margin: 15px;"/>
   </a>
 {% endif %}
 {% if file.fm.role %}

source/layout/jobboard.njk

@@ -5,9 +5,9 @@
 
 {% for file in file.files %}
 <hr />
-<h2><a href="{{ basepath }}/{{ file.relative }}">{{ file.fm.name }}</a></h2>
+<h2><a href="{{ basepath(file) }}/{{ file.relative }}">{{ file.fm.name }}</a></h2>
 {% if file.fm.image %}
-  <p><img src="{{ basepath }}/{{ file.fm.image }}" width="120" style="margin: 15px;"></p>
+  <p><img src="{{ basepath(file) }}/{{ file.fm.image }}" width="120" style="margin: 15px;"></p>
 {% endif %}
 <p>
 {% if file.fm.role %}

source/layout/layout.njk

@@ -1,19 +1,19 @@
 <title>{{ orgName }}</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<link rel="stylesheet" href="{{ basepath }}/css/tacit.min.css"/>
-<link rel="stylesheet" href="{{ basepath }}/css/style.css"/>
-<link rel="icon" href="{{ basepath }}/images/favicon.png" />
+<link rel="stylesheet" href="{{ basepath(file) }}/css/tacit.min.css"/>
+<link rel="stylesheet" href="{{ basepath(file) }}/css/style.css"/>
+<link rel="icon" href="{{ basepath(file) }}/images/favicon.png" />
 
 <nav>
-<img width="150" src="{{ basepath }}/images/nodejs-logo.svg" />
+<img width="150" src="{{ basepath(file) }}/images/nodejs-logo.svg" />
 <br />
 <ul>
 {% for page in pages %}
   {% if page.path == file.relative %}
     <li>{{ page.name }}
   {% else %}
-    <li><a href="{{ basepath }}/{{ page.path }}">{{ page.name }}</a>
+    <li><a href="{{ basepath(file) }}/{{ page.path }}">{{ page.name }}</a>
   {% endif %}
 {% endfor %}
 </ul>

source/layout/news-index.njk

@@ -7,7 +7,7 @@
 <hr />
 <h2>
   <small>{{ file.fm.date | date('YYYY/MM/DD') }}</small>
-  <a href="{{ basepath }}/{{ file.relative }}">{{ file.fm.title }}</a>
+  <a href="{{ basepath(file) }}/{{ file.relative }}">{{ file.fm.title }}</a>
 </h2>
 {% endfor %}