diff --git a/README.md b/README.md index 56cc5ef..410eaab 100644 --- a/README.md +++ b/README.md @@ -1,51 +1,19 @@ -# Webnative App Template +# Myseelia -[![Built by FISSION](https://img.shields.io/badge/⌘-Built_by_FISSION-purple.svg)](https://fission.codes) [![Built by FISSION](https://img.shields.io/badge/webnative-v0.34.1-purple.svg)](https://github.com/fission-suite/webnative) [![Discord](https://img.shields.io/discord/478735028319158273.svg)](https://discord.gg/zAQBDEq) [![Discourse](https://img.shields.io/discourse/https/talk.fission.codes/topics)](https://talk.fission.codes) +The app is built with: -![Webnative UI Screenshot](static/webnative-ui.png) - -The Webnative App Template is a clone-and-go template for building a web application using Webnative, fast. Clone, customize, and deploy to have a running distributed app in mere minutes. - -
-

❗️Webnative is alpha software.

-

We recommend you do not develop production applications using the Webnative App Template at this time. We're working on making it reliable, fast, and awesome, but we're not there yet!

-
- -## πŸ€” What's Webnative? - -[The Webnative SDK](https://github.com/fission-codes/webnative) empowers developers to build fully distributed web applications without needing a complex back-end. The SDK provides: - -- user accounts (via [the browser's Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)), -- authorization (using [UCAN](https://ucan.xyz)) -- encrypted file storage (via the [Webnative File System](https://guide.fission.codes/developers/webnative/file-system-wnfs), backed by the [InterPlanetary File System](https://ipfs.io/), or IPFS) -- and key management (via websockets and a two-factor auth-like flow). - -Webnative applications work offline and store data encrypted for the user by leveraging the power of the web platform. You can read more about Webnative in Fission's [Webnative Guide](https://guide.fission.codes/developers/webnative). - -## πŸ“¦ What does this template give me? - -### πŸ₯° Silky-smooth end-user flows - -The Webnative App Template provides a _silky-smooth user experience_ out of the box. Creating an account and linking a second device feels familiar, comfortable, and obvious. Webnative authentication is key-based rather than password-based, so we've focused heavily on the authentication flows, borrowing language and screens from two-factor auth flows. - -### 🧱 Built with a modern web stack - -The app template is built with modern web technologies: - -- [SvelteKit](https://kit.svelte.dev/) (powered by [Vite](https://vitejs.dev/) under the hood) -- [TypeScript](https://www.typescriptlang.org/) -- [Tailwind](https://tailwindcss.com/) -- [DaisyUI](https://daisyui.com/) - -### πŸ‘©β€πŸ« A simple Webnative demo to learn from - -![WNFS Image Gallery Screenshot](static/wnfs-gallery-screenshot.png) - -The app template includes a functioning application: an image gallery. Check out the image gallery code to learn how a Webnative application handles things like file uploads, directories, etc. +- [Webnative](https://github.com/webnative-examples/webnative-app-template) + - [SvelteKit](https://kit.svelte.dev/) (powered by [Vite](https://vitejs.dev/) under the hood) + - [TypeScript](https://www.typescriptlang.org/) + - [Tailwind](https://tailwindcss.com/) + - [DaisyUI](https://daisyui.com/) +- [TerminusDB](https://terminusdb.com/) +- [Cytoscape](https://js.cytoscape.org/) +- [Meilisearch](https://www.meilisearch.com/) ## πŸš€ Getting Started -You can try out the template yourself [here](https://webnative-template.fission.app/). +You can try out the app yourself [here](https://thick-nylon-eagle.fission.app/). Ready? Let's go. @@ -71,59 +39,14 @@ Prerequiste: ensure you are running Node 16.14 or greater, but _not_ Node 17 (18 4. Navigate to `http://localhost:5173` in your web browser. -## πŸ›  Customize your app - -The app template is designed to be easy for you to _make it your own._ Here's how: - -1. Rename your application. - - In `/src/lib/app-info.ts`: - - - Change `appName` to the name of your app. - - Change `appDescription` to a simple, 1-sentence description of your app. - - Once you [deploy](#deploy) your app, change `appURL` to the production URL. - - In `package.json`, change `name` to your application's name. - -1. Customize your app's logo. - - - App Logo SVG can be customized in `/src/components/icons/Brand.svelte`. Target an image that is 35 pixels high. - - Replace the favicon files in `/static` by following the instructions in [this blog post](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs) - - Generate a Twitter/Social Media Embed image. - - In `/src/lib/app-info.ts`, change `appImageURL` to match the URL of your embed image. - - In `/src/routes/+layout.svelte`, update `og:image:width` and `og:image:height` to the size of your embed image. - -1. Customize the look and feel. - - The app template is built using [Tailwind](https://tailwindcss.com/) and [DaisyUI](https://daisyui.com/). You can customize basic theme colors by editing `/tailwind.config.css`. Check out the [DaisyUI Theme Generator](https://daisyui.com/theme-generator/) to play around with theme colors or read the [customization guide](https://daisyui.com/docs/customize/) to customize the component appearance. - -1. Clear out the app's home page. - - The home page content is in `/src/routes/+page.svelte`. Delete everything in the file (but don't delete the file!) to start over with a blank home page. - -1. Remove the image gallery demo app code. - - If you're not building an image gallery, you don't need the gallery demo code, except perhaps to learn from. To get rid of it, delete: - - - `/src/routes/gallery` - - the `initializeFilesystem` function in `/src/lib/auth/account.ts` creates directories used by WNFS. Change those to what you need for your app or delete them if you're not using WNFS. - -πŸ‘ You're ready to start adding custom functionality! πŸš€ - -Check out the [Webnative Guide](https://guide.fission.codes/developers/webnative) for Webnative questions or [UCAN.xyz](https://ucan.xyz) for UCAN questions. ## 🧨 Deploy -Any static hosting platform should be supported. The Webnative App Template is currently deployed on: +Any static hosting platform should be supported. -- [Fission](#fission-app-hosting) -- [Netlify](#netlify) -- [Vercel](#vercel) -- [Cloudflare Pages](#cloudflare-pages) +The Myseelia app is currently hosted on [Fission App Hosting](https://github.com/webnative-examples/webnative-app-template#fission-app-hosting) -### Fission App Hosting - -Try out [Webnative App Template on Fission](https://webnative-template.fission.app) +## Fission App Hosting A Webnative application can be published to IPFS with the [Fission CLI](https://guide.fission.codes/developers/cli) or the [Fission GitHub publish action](https://github.com/fission-suite/publish-action). @@ -147,38 +70,6 @@ Your app will be available online at the domain assigned by the register command See the [Fission Guide](https://guide.fission.codes/developers/installation) and the publish action README for more details. -### Netlify - -[![Netlify Status](https://api.netlify.com/api/v1/badges/7b7418ef-86eb-43c4-a668-0118568c7f46/deploy-status)](https://app.netlify.com/sites/webnative/deploys) - -In order to deploy your Webnative application on Netlify: - -1. Create a new Netlify site and connect your app's git repository. (If you don't have your application stored in a git repository, you can upload the output of a [static build](#static-build).) -2. Just click Deploy. Netlify takes care of the rest. No Netlify-specific configuration is needed. -3. There is no step 3. - -### Vercel - -Try out the [Webnative App Template on Vercel](https://webnative-app-template.vercel.app/). - -In order to deploy your Webnative application on Vercel: - -1. Create a new Vercel project and connect your app's git repository. (If you don't have your application stored in a git repository, you can upload the output of a [static build](#static-build).) -2. Override the default output directory and set it to `build`. -3. Deploy. That's it! - -### Cloudflare Pages - -Try out the [Webnative App Template on Cloudflare Pages](https://webnative-template.pages.dev/). - -In order to deploy your Webnative application on Cloudflare Pages: - -1. Create a new Pages project and connect your app's git repository. (If you don't have your application stored in a git repository, you can upload the output of a [static build](#static-build).) -2. Select `SvelteKit` from the "Framework preset". -3. Set the "Build output directory" to `build`. -4. Under "Environment variables", add a variable with name of `NODE_VERSION` and value of `16`. -5. Add the same environment variable to the "Preview" environment. -6. Click "Save and Deploy". ### Static Build diff --git a/search/import.py b/search/import.py deleted file mode 100644 index ce9155f..0000000 --- a/search/import.py +++ /dev/null @@ -1,33 +0,0 @@ -import meilisearch - -client = meilisearch.Client('https://ms-9ea4a96f02a8-1969.sfo.meilisearch.io', '117c691a34b21a6651798479ebffd181eb276958') - -# An index is where the documents are stored. -index = client.index('movies') - -documents = [ - { 'id': 1, 'title': 'Carol', 'genres': ['Romance', 'Drama'] }, - { 'id': 2, 'title': 'Wonder Woman', 'genres': ['Action', 'Adventure'] }, - { 'id': 3, 'title': 'Life of Pi', 'genres': ['Adventure', 'Drama'] }, - { 'id': 4, 'title': 'Mad Max: Fury Road', 'genres': ['Adventure', 'Science Fiction'] }, - { 'id': 5, 'title': 'Moana', 'genres': ['Fantasy', 'Action']}, - { 'id': 6, 'title': 'Philadelphia', 'genres': ['Drama'] }, -] - -# If the index 'movies' does not exist, Meilisearch creates it when you first add the documents. -index.add_documents(documents) # => { "uid": 0 }', 'masterKey') - -# An index is where the documents are stored. -index = client.index('movies') - -documents = [ - { 'id': 1, 'title': 'Carol', 'genres': ['Romance', 'Drama'] }, - { 'id': 2, 'title': 'Wonder Woman', 'genres': ['Action', 'Adventure'] }, - { 'id': 3, 'title': 'Life of Pi', 'genres': ['Adventure', 'Drama'] }, - { 'id': 4, 'title': 'Mad Max: Fury Road', 'genres': ['Adventure', 'Science Fiction'] }, - { 'id': 5, 'title': 'Moana', 'genres': ['Fantasy', 'Action']}, - { 'id': 6, 'title': 'Philadelphia', 'genres': ['Drama'] }, -] - -# If the index 'movies' does not exist, Meilisearch creates it when you first add the documents. -index.add_documents(documents) # => { "uid": 0 } \ No newline at end of file diff --git a/search/search.py b/search/search.py deleted file mode 100644 index 4963320..0000000 --- a/search/search.py +++ /dev/null @@ -1,7 +0,0 @@ -import meilisearch - -client = meilisearch.Client('https://ms-9ea4a96f02a8-1969.sfo.meilisearch.io', '117c691a34b21a6651798479ebffd181eb276958') - -result = index.search('caorl') - -print(result) \ No newline at end of file diff --git a/src/components/explore/Explore.svelte b/src/components/explore/Explore.svelte index c1768ee..56be375 100644 --- a/src/components/explore/Explore.svelte +++ b/src/components/explore/Explore.svelte @@ -27,16 +27,13 @@ data: IEdgeData } + //This was generate with ./json_graph.py + //When a user searches, it regenerates the cytoscape graph using the Meilisearch index. + //To Do: incorporate actualy TerminusDB queries import json_graph from './knowledge_graph.json' let knowledgeGraphJson: any = json_graph - - // knowledgeGraphJson = await response.json() - // } else { - // alert(`HTTP-Error: ${response.status}`) - // } - // } - + let nodes: INode[] = [] let edges: IEdge[] = [] @@ -136,12 +133,6 @@ let toggle = true - // cy.off('tap', 'node', event => { - // const node = event.target; - // const nodeId = node.data('id'); - // alert('unDisplay info for ' + nodeId); - // }); - cy.on('tap', 'node', function (evt) { var node = evt.target var connectedEdges = node.connectedEdges() @@ -179,13 +170,6 @@ alert('Display info for ' + edgeId) }) - // cy.on('tap', 'node', function(){ - // alert("put code here")); - // }); - - // cy.layout({ - // name: 'cola' - // }).run(); }) var searchTerm = '' @@ -196,8 +180,8 @@ async function entered(e) { const searchclient = new MeiliSearch({ - host: 'https://ms-9ea4a96f02a8-1969.sfo.meilisearch.io', - apiKey: '117c691a34b21a6651798479ebffd181eb276958' + host: '', + apiKey: '' }) const index = searchclient.index('orgs') // this will search both keys and values @@ -206,8 +190,6 @@ // attributesToRetrieve: ['id'] // }) const searchResult = await index.search(e.target.value.toString()) -console.log(searchResult.hits) - // need to turn the search results into an array of ids which can be used to query the knowledge graph const resultsgraph = await generateKnowledgeGraph(searchResult.hits).then( resultsgraph => { @@ -234,65 +216,18 @@ console.log(searchResult.hits) }).run() } ) - // var node = cy.nodes().filter(function (ele) { - // return ele.data('id') == "Organization/" + searchResult.hits[0].id - // }) - // console.log(node); - // var connectedEdges = node.connectedEdges() - // var connectedNodes = node.neighborhood().nodes() - // var allElements = cy.elements() - // var allNodes = cy.nodes() - // var allEdges = cy.edges() - // if (node.style('display') == 'element') { - // console.log("a"); - // // hide all nodes and edges except the selected node and its neighbors - // allNodes.style('display', 'none') - // allEdges.style('display', 'none') - // connectedNodes.style('display', 'element') - // node.style('display', 'element') - // connectedEdges.style('display', 'element') - // } else { - // console.log("b"); - // // show all nodes and edges - // allNodes.style('display', 'element') - // allEdges.style('display', 'element') - // } - - // Perform search in real time based on searchTerm here const client = new TerminusClient.WOQLClient( - 'https://cloud.terminusdb.com/Myseelia/', + 'https://cloud.terminusdb.com/...', { - user: 'zaldarren@gmail.com', - organization: 'Myseelia', - db: 'playground3', + user: '', + organization: '', + db: '', token: - 'dGVybWludXNkYjovLy9kYXRhL2tleXNfYXBpLzJkMDU4N2IwYjgzMzhmODdjMjc0ZDdiNmM1MzgwNjFmYTYyMmZkOTcyZTc3NjI1NzIyYjY3MTllYTE3NmQxYjE=_bd6f9c37d87abcaf0c16b7a68335b31010c8dd04aac0b07bf0f31676af131888666200aac080e72cdc746197334eac4f52d821c90652b5611784878afabe1267535cbd896a00a396' + '' } ) await client.connect() - - // let v = WOQL.vars('person_id', 'impactarea', '@schema:checked'); - // const WOQL = TerminusClient.WOQL - // const query = WOQL.triple( - // 'v:OrganizationID', - // 'name', - // WOQL.string('Sustainable Impact Token') - // ) - - // const query3 = WOQL.and( - // WOQL.triple('v:NodeID', 'property_name', WOQL.like(`%${keyword}%`)), - // WOQL.triple('v:NodeID', 'property_name', 'v:Value') - // ) - - // const result = await client.getDocument({ - // as_list: true, - // type: 'Organization', - // query: { name: 'Sustainable Impact Token' } - // }) - // console.log('result ', result) - // const results = await client.query(query) - // console.log('Query Documents using WOQL: ', results.bindings) }