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

[slack/archlinuxjp](https://archlinuxjp.slack.com/)で`GreenTee`さんが[usermemos/memos](https://github.com/usememos/memos)がすごくいいと教えてくれて、それを使ってみたところかなり良かったので、活用法を考えてみた。

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

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

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

```html:src/App.vue
<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](https://usememos.com/docs/install/cloud/flyio)のvolumeと[backblaze](https://litestream.io/guides/backblaze/#create-a-bucket)を採用してみて、お金がかかりそうならlocalに切り替えようと思ってる。