highperfocused/nostrdvm
1
0
Fork 0
mirror of https://github.com/believethehype/nostrdvm.git synced 2025-10-11 11:22:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

Noogle: add tailwind, rework design

Browse Source
This commit is contained in:
Believethehype
2024-01-18 19:46:26 +01:00
parent 162d8ff227
commit 756962ea6f
15 changed files with 274 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
nostr_dvm/tasks/README.md
View File

@@ -7,7 +7,7 @@ Reusable backend functions can be defined in backends (e.g. API calls)
Current List of Tasks:
| Module | Kind | Description | Backend |
|------------------------------|--------------|------------------------------------------------------------|------------------|
|------------------------------|--------|------------------------------------------------------------|------------------|
| TextExtractionPDF | 5000 | Extracts Text from a PDF file | local |
| SpeechToTextGoogle | 5000 | Extracts Speech from Media files via Google Services | googleAPI |
| SpeechToTextWhisperX | 5000 | Extracts Speech from Media files via local WhisperX | nserver |
@@ -24,12 +24,12 @@ Current List of Tasks:
| ImageGenerationDALLE | 5100 | Generates an Image with OpenAI's Dall-E | openAI |
| ImageUpscale | 5100 | Upscales an Image | nserver |
| MediaConverter | 5200 | Converts a link of a media file and uploads it | openAI |
| VideoGenerationReplicateSVD | 5202 (inoff) | Generates a Video from an Image | replicate |
| VideoGenerationSVD | 5202 (inoff) | Generates a Video from an Image | nserver |
| VideoGenerationReplicateSVD | 5202 | Generates a Video from an Image | replicate |
| VideoGenerationSVD | 5202 | Generates a Video from an Image | nserver |
| TextToSpeech | 5250 | Generate Audio from a prompt | local |
| TrendingNotesNostrBand | 5300 | Show trending notes on nostr.band | nostr.band api |
| DiscoverInactiveFollows | 5301 | Find inactive Nostr users | local |
| AdvancedSearch | 5302 (inoff) | Search Content on nostr.band | local/nostr.band |
| AdvancedSearch | 5302 | Search Content on nostr.band | local/nostr.band |
Kinds with (inoff) are suggestions and not merged yet and might change in the future.
Backends might require to add an API key to the .env file or run an external server/framework the dvm will communicate with.

10
tests/gui/vuejs/noogle/package.json
View File

@@ -10,8 +10,9 @@
},
"dependencies": {
"@rust-nostr/nostr-sdk": "^0.8.0",
"bootstrap": "^5.3.2",
"mini-toastr": "^0.8.1",
"vue": "^3.3.11",
"vue": "^3.4.15",
"vue-notifications": "^1.0.2",
"vue3-easy-data-table": "^1.5.47",
"vuex": "^4.1.0",
@@ -19,7 +20,12 @@
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.2",
"vite": "^5.0.10"
"autoprefixer": "^10.4.17",
"postcss": "^8.4.33",
"sass": "^1.70.0",
"tailwindcss": "^3.4.1",
"vite": "^5.0.10",
"vue-router": "^4.2.5"
},
"optionalDependencies": {
"@rollup/rollup-linux-x64-gnu": "4.6.1"

6
tests/gui/vuejs/noogle/postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

23
tests/gui/vuejs/noogle/src/App.vue
View File

@@ -1,20 +1,21 @@
<script setup>
import Search from './components/Search.vue'
import Nip07 from './components/Nip07.vue'
import ResultsTable from "@/components/ResultTable.vue";
import Donate from "@/components/Donate.vue";
import Home from './components/Home.vue'
import ThreeColumnLayout from "./layouts/ThreeColumnLayout.vue";
import Nip07 from "@/components/Nip07.vue";
</script>
<template>
<main>
<Search/>
<br>
<ResultsTable></ResultsTable>
<Nip07>
</Nip07>
<Donate/>
<ThreeColumnLayout>
<Home></Home>
<template #aside>
<Nip07/>
</template>
</ThreeColumnLayout>
</main>
</template>
@@ -32,7 +33,7 @@ header {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {

23
tests/gui/vuejs/noogle/src/app.css Normal file
View File

@@ -0,0 +1,23 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
}
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}

13
tests/gui/vuejs/noogle/src/components/AboutPage.vue Normal file
View File

@@ -0,0 +1,13 @@
<script>
export default {
name: "AboutPage"
}
</script>
<template>
<p>Hello</p>
</template>
<style scoped>
</style>

18
tests/gui/vuejs/noogle/src/components/Donate.vue
View File

@@ -51,13 +51,21 @@ export default {
<template>
<button class="c-Button" @click="zap()">Donate</button>
<button class="v-Button" @click="zap()"><svg class="relative w-5 h-5 mr-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
Donate</button>
</template>
<style scoped>
.c-Button {
height: 20px;
color: white;
background: #000000;
.v-Button {
@apply bg-black hover:bg-amber-400 focus:ring-purple-950 mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
height: 24px;
}
</style>

38
tests/gui/vuejs/noogle/src/components/Home.vue Normal file
View File

@@ -0,0 +1,38 @@
<script>
import Search from "@/components/Search.vue";
import ResultsTable from "@/components/ResultTable.vue";
import Nip07 from "@/components/Nip07.vue";
import Donate from "@/components/Donate.vue";
export default {
name: "Home",
components: {Donate, Nip07, ResultsTable, Search}
}
</script>
<template>
<div class="center">
<br>
<Search/>
<br>
<ResultsTable/>
<br>
<br>
<Donate/>
</div>
</template>
<style scoped>
.center {
text-align: center;
justify-content: center;
}
.containertwo {
display: flex;
justify-content: center;
}
</style>

18
tests/gui/vuejs/noogle/src/components/Nip07.vue
View File

@@ -1,14 +1,15 @@
<template>
<div>
<div class="playeauthor-wrapper" v-if="current_user">
<img class="avatar" :src="this.avatar" alt="" />
<img class="avatar" @click="sign_out()" :src="this.avatar" alt="" />
<p>{{ this.current_user }}</p>
</div>
<template v-if="current_user">
<button class="b-Button" @click="sign_out()">Sign out</button>
</template>
<!-- <template v-if="current_user">
<button class="v-Button" @click="sign_out()">Sign out</button>
</template> -->
<template v-if="!current_user">
<button class="c-Button" @click="sign_in()">Sign in</button>
<button class="v-Button" @click="sign_in()">Sign in</button>
<p>Use a Browser Nip07 Extension like getalby or nos2x to login</p>
</template>
@@ -168,14 +169,15 @@ export default {
color: white;
background: purple;
}
.v-Button {
@apply bg-black hover:bg-nostr focus:ring-nostr mb-2 inline-flex flex-none items-center rounded-lg border border-nostr px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
height: 44px;
}
.c-Button {
height: 30px;
color: white;
background: #8e30eb;
}
</style>

2
tests/gui/vuejs/noogle/src/components/ResultTable.vue
View File

@@ -9,7 +9,7 @@
<p>{{content}}</p>
</template>
<template #expand="item">
<div style="padding: 15px">
<div style="padding: 15px; text-align: left;" >
<a :href="item.links.njump" target="_blank">NJump</a>
<a :href="item.links.highlighter" target="_blank">Highlighter</a>
<a :href="item.links.nostrudel" target="_blank">Nostrudel</a>

61
tests/gui/vuejs/noogle/src/components/Search.vue
View File

@@ -13,6 +13,11 @@ async function send_search_request(message) {
if (message === undefined){
message = "Nostr"
}
if(store.state.pubkey === undefined){
miniToastr.showMessage("Please login first", "No pubkey set", VueNotifications.types.warn)
return
}
items = []
store.state.results = []
let client = store.state.client
@@ -45,8 +50,12 @@ async function send_search_request(message) {
let evt = new EventBuilder(5302, "NIP 90 Search request", tags)
let res = await client.sendEventBuilder(evt)
miniToastr.showMessage("Sent Request to DVMs", "Awaiting results", VueNotifications.types.warn)
if (!listener){
if (!store.state.hasEventListener){
listen()
store.commit('set_hasEventListener', true)
}
else{
console.log("Already has event listener")
}
console.log(res)
@@ -160,18 +169,24 @@ defineProps({
<template>
<div class="greetings">
<img alt="Nostr logo" class="logo" src="../assets/nostr-purple.svg" width="125" height="125" />
<img alt="Nostr logo" class="logo" src="../assets/nostr-purple.svg" />
<h1 class="purple">Noogle</h1>
<h2>Nostr Search based on Data Vending Machines</h2>
<h1
class="text-center text-5xl md:text-6xl font-extrabold tracking-wider sm:text-start sm:text-6xl lg:text-8xl">
<span class="bg">Noogle</span>
</h1>
<h2 class="text-base-200-content text-center text-2xl font-thin sm:text-start">
Search the Nostr with Data Vending Machines
</h2>
<h3>
<br>
<br>
<div>
<button class="c-Button" @click="send_search_request(message)">Search the Nostr
</button> <input class="c-Input" v-model="message" >
</div>
<input class="c-Input" v-model="message">
<button class="v-Button" @click="send_search_request(message)">Search the Nostr
</button>
<!--
<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. -->
@@ -182,16 +197,16 @@ defineProps({
<style scoped>
.c-Button {
height: 50px;
color: white;
background: #8e30eb;
.v-Button {
@apply bg-nostr hover:bg-nostr2 focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-black px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
height: 48px;
margin: 5px;
}
.c-Input {
margin: -5px;
@apply bg-black hover:bg-gray-900 focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
width: 400px;
height: 48px;
color: white;
@@ -205,8 +220,13 @@ h1 {
position: relative;
top: -10px;
}
h2 {
font-size: 1.0rem;
.logo {
display: flex;
width:100%;
height:125px;
justify-content: center;
align-items: center;
}
h3 {
@@ -216,12 +236,15 @@ h3 {
.greetings h1,
.greetings h3 {
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
text-align: center;
}
}
</style>

55
tests/gui/vuejs/noogle/src/layouts/ThreeColumnLayout.vue Normal file
View File

@@ -0,0 +1,55 @@
<script setup>
import Donate from "@/components/Donate.vue";
</script>
<template>
<div class="three-column-layout">
<header>
<!-- <AppLogo />-->
</header>
<main>
<slot />
</main>
<aside>
<slot name="aside" />
<!-- <AppFooter /> -->
</aside>
</div>
</template>
<style scoped lang="scss">
.three-column-layout {
display: grid;
grid-template-areas:
"header"
"main"
"aside";
header {
grid-area: header;
margin-top: 30px;
}
main {
grid-area: main;
margin-top: 10px;
padding: 20px;
}
aside {
grid-area: aside;
margin-top: 10px;
padding: 20px;
}
@media (min-width: 768px) {
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas: "header main aside";
}
}
</style>

10
tests/gui/vuejs/noogle/src/main.js
View File

@@ -1,17 +1,20 @@
import './assets/main.css'
//import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import store from './store';
import "./app.css"
import Vue3EasyDataTable from 'vue3-easy-data-table';
import 'vue3-easy-data-table/dist/style.css';
import { createRouter, createWebHashHistory } from "vue-router";
//This is all for notifications
import VueNotifications from 'vue-notifications'
import miniToastr from 'mini-toastr'
miniToastr.init()
function toast ({title, message, type, timeout, cb}) {
return miniToastr[type](message, title, timeout, cb)
}
@@ -27,4 +30,7 @@ const options = {
createApp(App).use(VueNotifications, options).use(store).component('EasyDataTable', Vue3EasyDataTable).mount('#app')
createApp(App)
.use(VueNotifications, options)
.use(store).component('EasyDataTable', Vue3EasyDataTable)
.mount('#app')

4
tests/gui/vuejs/noogle/src/store.js
View File

@@ -8,6 +8,7 @@ const store = createStore({
test: "hello",
client: Client,
pubkey: PublicKey,
hasEventListener: false,
results: []
}
},
@@ -21,6 +22,9 @@ const store = createStore({
set_pubkey(state, pubkey) {
state.pubkey = pubkey
},
set_hasEventListener(state, hasEventListener) {
state.hasEventListener = hasEventListener
},
set_search_results(state, results){
state.results = results
console.log(state.results)

17
tests/gui/vuejs/noogle/tailwind.config.js Normal file
View File

@@ -0,0 +1,17 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [],
theme: {
extend: {
colors:{
'nostr': '#6d52f1',
'nostr2': '#8453f1',
}
},
},
plugins: [],
}