65 lines
2.0 KiB
Markdown
65 lines
2.0 KiB
Markdown
+++
|
|
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に切り替えようと思ってる。
|
|
|