add CTA map with murmurations data
This commit is contained in:
Darren Zal
commit
16522fb46b
137
README.md
137
README.md
|
|
@ -1,51 +1,19 @@
|
|||
# Webnative App Template
|
||||
# Myseelia
|
||||
|
||||
[](https://fission.codes) [](https://github.com/fission-suite/webnative) [](https://discord.gg/zAQBDEq) [](https://talk.fission.codes)
|
||||
The app is built with:
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
<div style="background-color: #FEEB80; padding: 1px 20px; border-radius: 10px;">
|
||||
<p class="text-align: center;"><strong>❗️Webnative is alpha software.</strong></p>
|
||||
<p>We recommend you <u>do not develop production applications using the Webnative App Template</u> at this time. We're working on making it reliable, fast, and awesome, but we're not there yet!</p>
|
||||
</div>
|
||||
|
||||
## 🤔 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
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
[](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
|
||||
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import meilisearch
|
||||
|
||||
client = meilisearch.Client('https://ms-9ea4a96f02a8-1969.sfo.meilisearch.io', '117c691a34b21a6651798479ebffd181eb276958')
|
||||
|
||||
result = index.search('caorl')
|
||||
|
||||
print(result)
|
||||
|
|
@ -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)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue