Add: hbsからpugに変更

#258

gulpfile.js

@@ -34,10 +34,12 @@ const gulpSvgSprite = require('gulp-svg-sprite');
 
 // Styleguide
 const fractal = require('@frctl/fractal').create();
+fractal.components.engine('@rsm/fractal-pug-adapter');
 
 fractal.set('project.title', 'Styleguide');
 fractal.set('project.version', 'v4.0');
 fractal.set('project.author', 'Manabu Yasuda');
+fractal.components.set('ext', '.pug');
 fractal.components.set('path', __dirname +  '/src/styleguide/components');
 fractal.docs.set('path', __dirname + '/src/styleguide/docs');
 fractal.web.set('builder.dest', __dirname + '/htdocs/styleguide');
@@ -51,7 +53,7 @@ fractal.web.set('server.syncOptions', {
 const mandelbrot = require('@frctl/mandelbrot');
 
 const myCustomisedTheme = mandelbrot({
-  panels: ['html', 'notes', 'info', 'view', 'context', 'resources'],
+  panels: ['view', 'html', 'notes', 'info', 'context', 'resources'],
   lang: 'ja',
   skin: 'olive',
 });
@@ -77,7 +79,7 @@ const src = {
   ssi: 'static/**/*.html',
   data: 'src/_data/',
   css: 'src/**/*.scss',
-  styleguideWatch: 'src/**/*.{scss,md,hbs,json}',
+  styleguideWatch: 'src/**/*.{scss,md,pug,json}',
   js: './src/assets/js/site.js',
   jsWatch: 'src/**/*.{js,vue}',
   image: 'src/assets/img/**/*.{png,jpg,gif,svg}',

package.json

@@ -41,6 +41,7 @@
   "homepage": "https://github.com/manabuyasuda/website-template#readme",
   "devDependencies": {
     "@babel/preset-env": "^7.4.5",
+    "@rsm/fractal-pug-adapter": "^0.5.0",
     "autoprefixer": "^9.6.0",
     "babel-loader": "^8.0.6",
     "browser-sync": "^2.26.7",

src/styleguide/components/_preview.pug

@@ -0,0 +1,21 @@
+doctype html
+html.no-js(lang="ja")
+  head
+    meta(charset="UTF-8")
+    meta(http-equiv="X-UA-Compatible" content="IE=edge")
+    meta(name="viewport" content="width=device-width, initial-scale=1.0")
+    title #{_target.label} | Styleguide
+
+    link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3/dist/css/yakuhanjp_s.min.css")
+    link(rel="stylesheet" href="/assets/css/site.css")
+
+    meta(name="format-detection" content="telephone=no")
+
+    script.
+      document.documentElement.classList.remove('no-js')
+
+  body
+    #app
+      != yield
+
+    script(src="/assets/js/site.js")

src/styleguide/components/sw/Button/Button.pug

@@ -0,0 +1,21 @@
+p #{description}
+
+div
+  a.sw-Button(href="#" class=variant) #{text}
+  button.sw-Button(type="button" class=variant) #{text}
+  input.sw-Button(type="button" class=variant value=text)
+
+h2 disabled
+
+div
+  a.sw-Button.-disabled(href="#" class=variant tabindex="-1") #{text}
+  button.sw-Button(type="button" class=variant disabled) #{text}
+  input.sw-Button(type="button" class=variant value=text disabled)
+
+h2 icon
+
+div
+  a.sw-Button(href="#" class=variant)
+    svg.sw-Button_More(role="img")
+      use(xlink:href="/assets/svg/sprite.svg#right-arrow1")
+    span #{text}