hugo/content/blog/2023-08-06-memo.md

+++ date = "2023-08-06" tags = ["memo"] title = "memosが素晴らしかった" slug = "memo" +++

slack/archlinuxjpでGreenTeeさんがusermemos/memosがすごくいいと教えてくれて、それを使ってみたところかなり良かったので、活用法を考えてみた。

活用例としては、tagでページを作ることを思いついた。

$ host=https://demo.usememos.com
$ curl -sL "$host/api/v1/memo?creatorId={1,2}&tag=todo"

$ npm -i hrwg/vue-marked 
$ npm -i moment

<template>
	<div id="app">
        <div v-for="(i, index) in memos_a.data"  class="memo-body">
        	<vue-marked>{{ i.content.substring(0,100) }}</vue-marked>
        	<p v-if="i.content.substring(100, 120) !== ''"><a :href="this.host + i.id" target="_blank">...</a></p>
        	<p v-if="i.updatedTs" class="memo-time">
        		<a :href="this.host + i.id" target="_blank">{{i.updatedTs | moment(format)}}</a> / 
        		<a :href="this.host + i.creatorUsername" target="_blank">@{{ i.creatorUsername }}</a>
        	</p>
        </div>
    </div>
</template>

<script>
import VueMarked from 'vue-marked';
import moment from "moment";
export default {
	data () {
		return {
			host: "https://demo.usememos.com",
			memos: null,
		}
	},
	components: {
		VueMarked,
	},
	filters: {
		moment: function(date) {
			return moment.unix(date).format("YYYY.MM.DD");
		},
	},
	mounted() {
			let url = this.host + "/api/v1/memo?creatorId=1&tag=todo";
			axios.get(url,{ crossdomain: true })
				.then(response => (this.memos = response));
    }
}
</script>

serverとして様々な建て方があり、dbも色々な形態があるんだけど、local-dbも使おうと思えば使えるので、まずはfly.ioのvolumeとbackblazeを採用してみて、お金がかかりそうならlocalに切り替えようと思ってる。