再度、初期環境を構築

2018-03-28 15:03:25 +09:00 · 2018-03-28 15:03:25 +09:00 · 40f607f7b0
commit 40f607f7b0
parent 6dc431601c
31 changed files with 12247 additions and 0 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015-riot",
+    ['env', { modules: false }]
+  ]
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+.DS_Store
+node_modules/
+public/scripts/app.min.js
+public/stylesheets/style.css
--- a/package.json
+++ b/package.json
@ -0,0 +1,34 @@
+{
+  "name": "DropOut",
+  "version": "0.0.0",
+  "description": "yuki540.com version_6.0.0",
+  "main": "webpack.config.js",
+  "scripts": {
+    "start": "ruby -run -e httpd public 8080",
+    "build": "webpack --progress --colors",
+    "watch": "webpack --watch --colors"
+  },
+  "repository": "git@github.com:yuki540net/DropOut.git",
+  "author": "yuki540 <tabletennis540@gmail.com>",
+  "license": "MIT",
+  "private": false,
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.4",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-es2015-riot": "^1.1.0",
+    "css-loader": "^0.28.11",
+    "dotenv": "^5.0.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "node-sass": "^4.8.3",
+    "node-sass-glob-importer": "^5.1.1",
+    "riot": "^3.9.0",
+    "riot-hot-reload": "^1.0.0",
+    "riot-route": "^3.1.3",
+    "riot-tag-loader": "^2.0.2",
+    "sass-loader": "^6.0.7",
+    "webpack": "^4.2.0",
+    "webpack-cli": "^2.0.13",
+    "webpack-dev-server": "^3.1.1"
+  }
+}
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8">
+    <!-- 
+
+    ################################################################
+
+      「ハロー、ミライアカリだよっ！ﾋﾟﾛﾘﾝ」
+      「デベロッパーツール開くなんて、悪い子ちゃん❤️」
+
+    ################################################################
+
+    Designed by yuki540.
+
+    -->
+    <title>DropOut</title>
+    <meta name="description" content="「今日も明日も、ぐーたら生活。」">
+    <meta name="keywords" content="yuki540,satella.io,yuki540.com,DropOut">
+    <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1">
+    <meta property="og:url" content="https://yuki540.com">
+    <meta property="og:image" content="https://yuki540.com/images/ogp.png">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="DropOut">
+    <meta property="og:site_name" content="yuki540.com">
+    <meta property="og:description" content="「今日も明日も、ぐーたら生活。」">
+    <meta property="og:locale" content="ja_JP">
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@eriri_jp" />
+    <meta name="twitter:title" content="DropOut" />
+    <meta name="twitter:description" content="「今日も明日も、ぐーたら生活。」" />
+    <meta name="twitter:image" content="https://yuki540.com/images/ogp.png" />
+    <link rel="shortcut icon" href="https://yuki540.com/images/profile/yuki540.png" />
+    <link rel="apple-touch-icon" href="https://yuki540.com/images/profile/yuki540.png" />
+    <link rel="stylesheet" href="./stylesheets/font-awesome-4.7.0/css/font-awesome.min.css" />
+    <link rel="stylesheet" href="./stylesheets/font.css" />
+    <link rel="stylesheet" href="./stylesheets/style.css" />
+  </head>
+  <body>
+    <app />
+    <script type="text/javascript" src="./scripts/app.min.js"></script>
+  </body>
+</html>
--- a/public/stylesheets/font-awesome-4.7.0/css/font-awesome.css
+++ b/public/stylesheets/font-awesome-4.7.0/css/font-awesome.css
--- a/public/stylesheets/font-awesome-4.7.0/css/font-awesome.min.css
+++ b/public/stylesheets/font-awesome-4.7.0/css/font-awesome.min.css
--- a/public/stylesheets/font-awesome-4.7.0/fonts/FontAwesome.otf
+++ b/public/stylesheets/font-awesome-4.7.0/fonts/FontAwesome.otf
--- a/public/stylesheets/font-awesome-4.7.0/fonts/fontawesome-webfont.eot
+++ b/public/stylesheets/font-awesome-4.7.0/fonts/fontawesome-webfont.eot
--- a/public/stylesheets/font-awesome-4.7.0/fonts/fontawesome-webfont.svg
+++ b/public/stylesheets/font-awesome-4.7.0/fonts/fontawesome-webfont.svg
--- a/public/stylesheets/font-awesome-4.7.0/fonts/fontawesome-webfont.ttf
+++ b/public/stylesheets/font-awesome-4.7.0/fonts/fontawesome-webfont.ttf
--- a/public/stylesheets/font-awesome-4.7.0/fonts/fontawesome-webfont.woff
+++ b/public/stylesheets/font-awesome-4.7.0/fonts/fontawesome-webfont.woff
--- a/public/stylesheets/font-awesome-4.7.0/fonts/fontawesome-webfont.woff2
+++ b/public/stylesheets/font-awesome-4.7.0/fonts/fontawesome-webfont.woff2
--- a/public/stylesheets/font.css
+++ b/public/stylesheets/font.css
@ -0,0 +1,17 @@
+@font-face {
+  font-family: 'Boku';
+  src: url('font/Boku.ttf') format('truetype');
+  src: url('font/Boku.otf') format('opentype');
+}
+  
+@font-face {
+  font-family: 'Chibit';
+  src: url('font/chibit.ttf') format('truetype');
+  src: url('font/chibit.otf') format('opentype');
+}
+ 
+@font-face {
+  font-family: 'Nagomi';
+  src: url('font/nagomi.ttf') format('truetype');
+  src: url('font/nagomi.otf') format('opentype');
+}
--- a/public/stylesheets/font/Boku.eot
+++ b/public/stylesheets/font/Boku.eot
--- a/public/stylesheets/font/Boku.otf
+++ b/public/stylesheets/font/Boku.otf
--- a/public/stylesheets/font/Boku.ttf
+++ b/public/stylesheets/font/Boku.ttf
--- a/public/stylesheets/font/Boku.woff
+++ b/public/stylesheets/font/Boku.woff
--- a/public/stylesheets/font/chibit.otf
+++ b/public/stylesheets/font/chibit.otf
--- a/public/stylesheets/font/chibit.ttf
+++ b/public/stylesheets/font/chibit.ttf
--- a/public/stylesheets/font/nagomi.otf
+++ b/public/stylesheets/font/nagomi.otf
--- a/public/stylesheets/font/nagomi.ttf
+++ b/public/stylesheets/font/nagomi.ttf
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@ -0,0 +1,7 @@
+import riot from 'riot'
+import route from 'riot-route'
+
+// components
+import './components/app.tag'
+
+riot.mount('app')
--- a/src/scripts/components/app.tag
+++ b/src/scripts/components/app.tag
@ -0,0 +1,3 @@
+<app>
+  <h1>ハロー、ミライアカリだよ！ﾋﾟﾛﾘﾝ</h1>
+</app>
--- a/src/scss/_function.scss
+++ b/src/scss/_function.scss
--- a/src/scss/_mixin.scss
+++ b/src/scss/_mixin.scss
@ -0,0 +1,17 @@
+@mixin pc-layout {
+  @media screen and (min-width: 961px) {
+    @content;
+  }
+}
+
+@mixin tablet-layout {
+  @media screen and (min-width: 601px) and (max-width: 960px) {
+    @content;
+  }
+}
+
+@mixin sp-layout {
+  @media screen and (max-width: 600px) {
+    @content;
+  }
+}
--- a/src/scss/_variable.scss
+++ b/src/scss/_variable.scss
@ -0,0 +1,9 @@
+$min-width: 1100px;
+$min-height: 650px;
+
+$theme-bg: #FCFCF3;           // 背景色
+$theme-gray: #E4D6CE;         // 灰色
+$theme-pink: #C2617E;         // ピンク
+$theme-light-pink: #E5B8BD;   // 薄ピンク
+$theme-purple: #4A3F55;       // 紫
+$theme-light-purple: #817487; // 薄紫
--- a/src/scss/modules/_base.scss
+++ b/src/scss/modules/_base.scss
@ -0,0 +1,19 @@
+* {
+  font-family: 'Boku';
+  margin: 0;
+  padding: 0;
+}
+
+img { vertical-align: bottom; }
+
+input, textarea {
+  appearance: none;
+  -webkit-appearance: none;
+  border: none;
+  padding: 0;
+  border-radius: 0;
+}
+
+a { text-decoration: none; }
+
+iframe { border: none; }
--- a/src/scss/modules/_common.scss
+++ b/src/scss/modules/_common.scss
@ -0,0 +1,8 @@
+@keyframes fadein {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes fadeout {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@ -0,0 +1,4 @@
+@import 'variable', 'mixin', 'function';
+
+@import 'modules/**/*.scss';
+@import 'keyframes/**/*.scss';
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,78 @@
+require('dotenv').config()
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const globImporter = require('node-sass-glob-importer')
+
+const MODE = process.env.MODE || 'development'
+const enabledSourceMap = (MODE === 'development')
+
+const js = {
+  mode: MODE,
+  entry: `${ __dirname }/src/scripts/app.js`,
+  output: {
+    path: `${ __dirname }/public/scripts`,
+    filename: 'app.min.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tag$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'riot-tag-loader',
+            options: {
+              type: 'es6',
+              hot: true
+            }
+          }
+        ]
+      },
+      {
+        test: /(\.js|\.json)/,
+        use: ['babel-loader'],
+        exclude: /node_modules/
+      }
+    ]
+  }
+}
+  
+const css = {
+  mode: MODE,
+  entry: `${ __dirname }/src/scss/style.scss`,
+  output: {
+    path: `${ __dirname }/public/stylesheets`,
+    filename: 'style.css'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.scss/,
+        use: ExtractTextPlugin.extract({
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                url: false,
+                sourceMap: enabledSourceMap,
+                minimize: !enabledSourceMap,
+                importLoaders: 2
+              }
+            },
+            {
+              loader: 'sass-loader',
+              options: {
+                importer: globImporter(),
+                sourceMap: enabledSourceMap
+              }
+            }
+          ]
+        })
+      }
+    ]
+  },
+  plugins: [
+    new ExtractTextPlugin('style.css')
+  ]
+}
+
+module.exports = [js, css]
--- a/yarn.lock
+++ b/yarn.lock