Add search syntax

This commit is contained in:
syuilo 2018-04-21 18:59:16 +09:00
parent 3c80f0eaca
commit 441796f845
4 changed files with 95 additions and 0 deletions

View file

@ -0,0 +1,67 @@
<template>
<div class="mk-google">
<input type="search" v-model="query" :placeholder="q">
<button @click="search">検索</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['q'],
data() {
return {
query: null
};
},
mounted() {
this.query = this.q;
},
methods: {
search() {
window.open(`https://www.google.com/?#q=${this.query}`, '_blank');
}
}
});
</script>
<style lang="stylus" scoped>
root(isDark)
display flex
margin 8px 0
> input
flex-shrink 1
padding 10px
width 100%
height 40px
font-family sans-serif
font-size 16px
color isDark ? #dee4e8 : #55595c
background isDark ? #191b22 : #fff
border solid 1px isDark ? #495156 : #dadada
border-radius 4px 0 0 4px
&:hover
border-color isDark ? #777c86 : #b0b0b0
> button
flex-shrink 0
padding 0 16px
border solid 1px isDark ? #495156 : #dadada
border-left none
border-radius 0 4px 4px 0
&:hover
background-color isDark ? #2e3440 : #eee
&:active
box-shadow 0 2px 4px rgba(#000, 0.15) inset
.mk-google[data-darkmode]
root(true)
.mk-google:not([data-darkmode])
root(false)
</style>

View file

@ -4,6 +4,7 @@ import parse from '../../../../../text/parse';
import getAcct from '../../../../../acct/render'; import getAcct from '../../../../../acct/render';
import { url } from '../../../config'; import { url } from '../../../config';
import MkUrl from './url.vue'; import MkUrl from './url.vue';
import MkGoogle from './google.vue';
const flatten = list => list.reduce( const flatten = list => list.reduce(
(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), [] (a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
@ -145,6 +146,13 @@ export default Vue.component('mk-note-html', {
const emoji = emojilib.lib[token.emoji]; const emoji = emojilib.lib[token.emoji];
return createElement('span', emoji ? emoji.char : token.content); return createElement('span', emoji ? emoji.char : token.content);
case 'search':
return createElement(MkGoogle, {
props: {
q: token.query
}
});
default: default:
console.log('unknown ast type:', token.type); console.log('unknown ast type:', token.type);
} }

View file

@ -75,6 +75,13 @@ const handlers = {
a.href = url; a.href = url;
a.textContent = url; a.textContent = url;
document.body.appendChild(a); document.body.appendChild(a);
},
search({ document }, { content, query }) {
const a = document.createElement('a');
a.href = `https://www.google.com/?#q=${query}`;
a.textContent = content;
document.body.appendChild(a);
} }
}; };

View file

@ -0,0 +1,13 @@
/**
* Search
*/
module.exports = text => {
const match = text.match(/^(.+?) 検索(\n|$)/);
if (!match) return null;
return {
type: 'search',
content: match[0],
query: match[1]
};
};