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

65 lines
2.0 KiB
Markdown
Raw Permalink Normal View History

2024-04-23 13:21:26 +00:00
+++
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に切り替えようと思ってる。