2022-01-10 / @syui

vue

vueで過去絵の修正を1週間単位で表示してみた

前々から修正した絵の一覧があれば便利だなあと思ってたことから、色々と追加。

最近修正した絵をcommit logから拾うようにしました。terminalの$ ai cコマンド(オプション)から飛べるようにしました。

$ ai c

jsonからimg pathを取ってきてvueで表示する方針でやります。以下は、簡単なexmapleです。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

<template>
	<div id="app">
		<p>1week commit /static/img/</p>
		<div v-for="item in items" :key="item.id">
			<p><a :href="item.file"><img :src="item.file" /></a></p>
		</div>
	</div>
</template>

<script>
import items from '/static/json/img.json';
export default {
	data() {
		return {
			items
		}
	}
}
</script>

/static/json/img.jsonはこんな感じで作成。

$ git --no-pager log --since=1.weeks --name-status |grep "\.png"

#!/bin/bash
mkdir -p ./static/json
echo '[]' >> ./static/json/img.json
s=`git --no-pager log --since=1.weeks --name-status |grep -e "A\t" -e "M\t" |grep "static/img/"|grep "\.png"|cut -d / -f 3|sort|uniq`
n=`echo "$s"|wc -l`
for ((i=1;i<=$n;i++))
do
t=`echo "$s"|awk "NR==$i"`
cat ./static/json/img.json|jq ".+[{\"id\":\"$i\",\"file\": \"/img/$t\"}]" >> ./static/json/img.tmp
mv ./static/json/img.tmp ./static/json/img.json
done

これを$ yarn buildとかすればOKです。

{
  "name": "sample-vue-project",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-service": "~4.5.15"
  }
}

module.exports = {
  configureWebpack: {
    output: {
      filename: '[name].js',
      chunkFilename: '[name].js'
    }
  },
  css: {
    extract: {
      filename: '[name].css',
      chunkFilename: '[name].css'
    },
  },
}

$ yarn install
$ yarn serve
$ yarn build

hugoと組み合わせている場合は、templateを書けばOKです。書き方は人それぞれ。

$ cp -rf ./dist/*.js ./static/js/
$ cp -rf ./dist/*.map ./static/js/
$ cp -rf ./dist/*.css ./static/css/

<link rel="stylesheet" href="/css/app.css" />
<div id=app></div>
<script src=/js/chunk-vendors.js></script>
<script src=/js/app.js></script>

{{ partial "head.html" . }}
{{ partial "header.html" . }}
{{ partial "app.html" . }}
		{{ .Content }}
		</div>
		{{ partial "footer.html" . }}
	</body>
</html>