highperfocused/nostrdvm
1
0
Fork 0
mirror of https://github.com/believethehype/nostrdvm.git synced 2025-03-17 21:31:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

add daisyui, add menu

Browse Source
This commit is contained in:
Believethehype 2024-01-19 17:13:38 +01:00
parent a53fb71cba
commit b26851337e
13 changed files with 193 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,7 @@
"dependencies": {
"@rust-nostr/nostr-sdk": "^0.8.0",
"bootstrap": "^5.3.2",
"daisyui": "^4.6.0",
"mini-toastr": "^0.8.1",
"vue": "^3.4.15",
"vue-notifications": "^1.0.2",

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

@ -9,10 +9,8 @@ import Nip07 from "@/components/Nip07.vue";
<main>
<ThreeColumnLayout>
<Home></Home>
<template #aside>
<Nip07/>
</template>
</ThreeColumnLayout>

10
tests/gui/vuejs/noogle/src/app.css
View File

@ -20,4 +20,12 @@ a,
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}
}
.menu {
color: white;
@apply btn bg-transparent border-transparent;
}

BIN
tests/gui/vuejs/noogle/src/assets/usercard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

76
tests/gui/vuejs/noogle/src/components/AboutPage.vue
View File

@ -1,13 +1,69 @@
<script>
<template>
<!-- <div className="card w-96 bg-base-100 shadow-xl">
<figure><img src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" alt="Shoes" /></figure>
<div className="card-body">
<h2 className="card-title">Shoes!</h2>
<p>If a dog chews shoes whose shoes does he choose?</p>
<div className="card-actions justify-end">
<button className="btn btn-primary">Buy Now</button>
</div>
</div>
</div> -->
<div className="chat chat-start">
<div className="chat-image avatar">
<div className="w-10 rounded-full">
<img alt="Tailwind CSS chat bubble component" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
</div>
</div>
<div className="chat-bubble">NIP 90 Data Vending Machines can perform multiple tasks leveraging the Nostr Protocol.</div>
</div>
<div className="chat chat-start">
<div className="chat-image avatar">
<div className="w-10 rounded-full">
<img alt="Tailwind CSS chat bubble component" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
</div>
</div>
<div className="chat-bubble">This Demo Application uses a Kind 5302 event to ask DVMs to search for content on the Nostr.</div>
</div>
<div className="chat chat-start">
<div className="chat-image avatar">
<div className="w-10 rounded-full">
<img alt="Tailwind CSS chat bubble component" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
</div>
</div>
<div className="chat-bubble">This page then combines all the results.</div>
</div>
<div className="chat chat-start">
<div className="chat-image avatar">
<div className="w-10 rounded-full">
<img alt="Tailwind CSS chat bubble component" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
</div>
</div>
<div className="chat-bubble">This way we will be able to decentralize the most centralized thing on the internet. Search.</div>
</div>
</template>
<script>
export default {
name: "AboutPage"
name: 'dailyUIdemo',
props: {
msg: String
}
}
</script>
<template>
<p>Hello</p>
</template>
<style scoped>
</style>
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

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

@ -52,7 +52,7 @@ export default {
<template>
<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>
<button class="v-Button" @click="zap()"><svg class="relative w-5 h-5 mr-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" 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>
@ -63,7 +63,7 @@ Donate</button>
.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;
@apply bg-black hover:bg-amber-400 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;
height: 24px;

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

@ -8,11 +8,20 @@
<button class="v-Button" @click="sign_out()">Sign out</button>
</template> -->
<template v-if="!current_user">
<button class="v-Button" @click="sign_in()">Sign in</button>
<p>Use a Browser Nip07 Extension like getalby or nos2x to login</p>
</template>
<div className="dropdown">
<div tabIndex={0} role="button" class="v-Button" >Sign in</div>
<div tabIndex={0} className="dropdown-content z-[1] card card-compact w-64 p-2 shadow bg-primary text-primary-content">
<div className="card-body">
<h3 className="card-title">Nip07 Login</h3>
<p>Use a Browser Nip07 Extension like getalby or nos2x to login</p>
<button className="btn" @click="sign_in()">Nip07 Sign in</button>
</div>
</div>
</div>
</template>
</div>
</template>
@ -41,7 +50,15 @@ export default {
};
},
async mounted() {
await this.sign_in();
try{
//let testsginer = new Nip07Signer()
await this.sign_in()
}
catch (error){
console.log(error);
console.log("nah");
}
},
methods: {
@ -172,7 +189,8 @@ export default {
}
.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;
margin-right: 200px;
height: 44px;
}
.c-Button {

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

@ -1,5 +1,5 @@
<template>
<EasyDataTable v-if="store.state.results.length != 0" table-class-name="customize-table"
<EasyDataTable class="customize-table" v-if="store.state.results.length != 0" table-class-name="customize-table"
:headers="headers"
:items="store.state.results">
<template #item-content="{ content, author, authorurl, avatar}">
@ -33,7 +33,7 @@ const headers: Header[] = [
];
</script>
<style>
<style scoped>
.operation-wrapper .operation-icon {
width: 20px;
cursor: pointer;
@ -60,24 +60,24 @@ const headers: Header[] = [
--easy-table-header-font-size: 14px;
--easy-table-header-height: 50px;
--easy-table-header-font-color: #c1cad4;
--easy-table-header-background-color: #2d3a4f;
--easy-table-header-background-color: #242424;
--easy-table-header-item-padding: 10px 15px;
--easy-table-body-even-row-font-color: #fff;
--easy-table-body-even-row-background-color: #4c5d7a;
--easy-table-body-even-row-background-color: #242424;
--easy-table-body-row-font-color: #c0c7d2;
--easy-table-body-row-background-color: #2d3a4f;
--easy-table-body-row-background-color: #242424;
--easy-table-body-row-height: 50px;
--easy-table-body-row-font-size: 14px;
--easy-table-body-row-hover-font-color: #2d3a4f;
--easy-table-body-row-hover-background-color: #eee;
--easy-table-body-row-hover-background-color: #242424;
--easy-table-body-item-padding: 10px 15px;
--easy-table-footer-background-color: #2d3a4f;
--easy-table-footer-background-color: #242424;
--easy-table-footer-font-color: #c0c7d2;
--easy-table-footer-font-size: 14px;
--easy-table-footer-padding: 0px 10px;

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

@ -170,13 +170,13 @@ defineProps({
<div class="greetings">
<img alt="Nostr logo" class="logo" src="../assets/nostr-purple.svg" />
<br>
<h1
class="text-center text-5xl md:text-6xl font-extrabold tracking-wider sm:text-start sm:text-6xl lg:text-8xl">
class="text-center font-thin 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">
<h2 class="text-base-200-content text-center text-2xl font-thin">
Search the Nostr with Data Vending Machines
</h2>

45
tests/gui/vuejs/noogle/src/layouts/ThreeColumnLayout.vue
View File

@ -1,8 +1,35 @@
<script setup>
import Donate from "@/components/Donate.vue";
import Nip07 from "@/components/Nip07.vue";
</script>
<template>
<div className="navbar bg-base-100">
<div className="flex-none">
<!-- <button className="btn btn-square btn-ghost">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
test</button>-->
</div>
<div className="flex-1">
<router-link class="menu" to="/">Noogle</router-link>
<router-link class="menu" to="/about">About</router-link>
<!-- <router-link class="menu" to="/donate">Donate</router-link> -->
<div className="flex-none">
</div>
</div>
<Nip07/>
</div>
<div class="three-column-layout">
<header>
@ -11,6 +38,10 @@ import Donate from "@/components/Donate.vue";
</header>
<main>
<router-view />
<slot />
</main>
@ -45,6 +76,18 @@ import Donate from "@/components/Donate.vue";
padding: 20px;
}
.router-link-exact-active{
color: rgba(255, 255, 255, 0.87);
}
.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;
}
@media (min-width: 768px) {

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

@ -5,13 +5,18 @@ 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";
import router from './router'
import Vue3EasyDataTable from 'vue3-easy-data-table';
//This is all for notifications
import VueNotifications from 'vue-notifications'
import VueNotifications from "vue-notifications";
import miniToastr from 'mini-toastr'
miniToastr.init()
@ -32,5 +37,8 @@ const options = {
createApp(App)
.use(VueNotifications, options)
.use(store).component('EasyDataTable', Vue3EasyDataTable)
.use(store)
.use(router)
.component('EasyDataTable', Vue3EasyDataTable)
.mount('#app')

19
tests/gui/vuejs/noogle/src/router/index.js Normal file
View File

@ -0,0 +1,19 @@
import { createWebHistory, createRouter } from "vue-router";
const routes = [
{ path: "/", component: () => import("@/components/Home.vue") },
{ path: "/about", component: () => import("@/components/AboutPage.vue") },
{ path: "/donate", component: () => import("@/components/Donate.vue") },
{ path: "/test", component: () => import("@/components/Donate.vue") },
{ path: "/article/:id", component: () => import("@/components/Home.vue") },
{ path: '/:pathMatch(.*)*', component: () => import("@/components/Home.vue") },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;

8
tests/gui/vuejs/noogle/tailwind.config.js
View File

@ -1,6 +1,10 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [],
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {
@ -12,6 +16,6 @@ export default {
},
},
plugins: [],
plugins: [require("daisyui")],
}