客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称：ipfs/ecosystem-directory开源软件地址：https://github.com/ipfs/ecosystem-directory开源编程语言：Vue 56.1%开源软件介绍：IPFS Ecosystem DirectoryInteractive IPFS ecosystem directory and showcase Just want to add a new project to the IPFS ecosystem directory? Use this form. Project Add/Change WorkflowThe existing workflow for adding a project to the ecosystem directory, or amending an existing project, is as described below. Adding a New Project
Amending an Existing Project
Generating the Showcase GridTo view all projects in the ecosystem directory in a "logo parade" showcase format suitable for including in a slide deck, see the instructions below — this includes how to customize the grid to get the representation that's most useful for you. TLDR: https://ecosystem.ipfs.io/showcase/?category=focus is a general-purpose, useful grid if you don't want to build a custom one. Behavior
CustomizationCategoryCustomizing the view is done using GET parameters. You might notice that the base showcase link feels a little empty. Adding a target top-level
ContainersInstances of this app may have varying quantities of projects. To help the showcase address both large and small ecosystems, there are params that define container limits. These define what the limits are in terms of number of projects that fit into medium, or large containers.
Example use case: /showcase/?category=focus&md=5&lg=15
Location
General Developer InformationDeploymentThis repo is currently deployed to Fleek on the following URLs:
Pushes made to the ServerPorts These apply to local development. Mode: Environment Variables Getting StartedA. Get RepoIn a terminal, run the commands below to get set up # Navigate to directory within which to clone the git repo.
$ cd ~/Desktop
# Clone the repo
$ git clone [email protected]:ipfs/ecosystem-directory.git
# Enter the repo directory
$ cd ecosystem-directory
# Add your user information
$ git config user.name "Your Name"
$ git config user.email "[email protected]"
# Install npm dependencies
$ npm ciB. Generating a self-signed SSL certificateUsed for development in a local environment (such as on your personal computer). You only need to do this once. If you've already done this for a different project, just copy your existing
$ cd ~/.ssh
$ brew install mkcert
$ mkcert -install
$ mkcert -key-file localhost_key.pem -cert-file localhost_cert.pem localhost 127.0.0.1
$ cat localhost_cert.pem > localhost_fullchain.pem
$ cat "$(mkcert -CAROOT)/rootCA.pem" >> localhost_fullchain.pem
C. Environment variablesCreate a file called D. Start the app$ npm run devProject ModelBelow is an outline of the project model. A boilerplate JSON file can be found in Naming ConventionThis means that file names must be named after project names, and use lowercase and kebab-case. For example, an appropriate project KeysKeys should be retained when not in use. This ensures that if anyone wants to add to the project, they immediately see all keys available in other projects, rather than searching for the model or accidentally using a data structure that doesn't match the model perfectly. This means empty and type checking is done by the app in a strict fashion.
SchemaThe schema can be found here and must be updated if the schema ever changes. The {
display: Boolean,
featured: Boolean,
sortNumbers: {
label: Number
},
logo: {
icon: String,
full: String
},
name: String,
org: [String],
description: {
short: String,
long: String
},
primaryCta: {
url: String,
text: String
},
links: [ {
label: String,
links: [ {
url: String,
text: String
} ]
} ],
keyInfo: [ {
label: String,
value: String
} ],
video: String,
stats: [ {
label: String,
value: String
} ],
ctaCard: {
title: String,
description: String,
buttonText: String,
url: String
},
taxonomies: [{
slug: String,
tags: [String]
}]
}Transforming Project DataEach project that is to be included in the ecosystem must have a Transferring a ProjectThe primary source of truth for the Ecosystem Directory is the master IPFS project database, which has a field Inputting a ProjectAlternatively, any of the existing projects in ProcessWhen either transferring or inputting a project from a copied
This process may be further automated with a variety of tooling at a later date. Embeddable ViewAn interactive summary of the state of the app can be injected into external sites. It contains a slider with sample projects that can be filtered by one dimension, and sorted. This view is embeddable in 2 steps:
CustomizationThe content for the embeddable view, and target category for the dropdown, can be specified in the The embeddable view inherits the theming from the Ecosystem itself, but is also available in a light and a dark mode
On the external site, it might be useful to provide a .ipfs-ecosystem-embed, #ipfs-ecosystem-embed {
max-width: 600px;
}If a class is used, multiple embeddable views can be instantiated on a single page. This is also useful for support of single page applications. The following HTML will call in two embeddable views, one light, and the other dark. <div class="ipfs-ecosystem-embed" data-theme="light"></div>
<div class="ipfs-ecosystem-embed" data-theme="dark"></div>
ShowcaseThis application is shipped with an alternative data visualization, for the purpose of use in presentations and other media where a visual summary of the projects in the ecosystem is needed. By default this view is called the Showcase, which is also the URL through which it's accessed. This path can be changed. Behavior
CustomizationCategoryCustomizing the view is done using GET parameters. The base showcase path will render projects, but may seem bare if no arguments are passed in the URI. Adding a target top-level
ContainersInstances of this app may have varying quantities of projects. To help the showcase address both large and small ecosystems, there are params that define container limits. These define what the limits are in terms of number of projects that fit into medium, or large containers.
Example use case: /showcase/?category=focus&md=5&lg=15
Location
AnalyticsAnalytics are implemented through Countly, using the Web SDK. The following environment variables are required: NODE_ENV=<production|development>
COUNTLY_APP_KEY=<key>
COUNTLY_SITE_URL=<url>The following {
countly: {
initialize: true, // if set to false, Countly will be DISABLED
debug: Boolean,
disableInDevelopment: Boolean,
suppressErrorLogs: Boolean
}
}Below is a breakdown of all events captured by Countly. → GeneralCountly.track_sessions()
Countly.track_pageview()
Countly.track_links()→ Segment ChartSegment clicked
Countly.trackEvent('Segment Chart | Segment Clicked', { label, slug })View All button clicked
Countly.trackEvent('Segment Chart | View All Button Clicked', { label, slug })→ Featured SliderProject card clicked
Countly.trackEvent('Featured Slider | Project Card Clicked', { name, slug, from })→ EventsFilter Panel Toggled
Countly.trackEvent('Filter Panel Toggled', { button, state })Sort-By Dropdown Toggled
Countly.trackEvent('Sort-By Dropdown Toggled', { state })Sort-By Option Selected
Countly.trackEvent('Sort-By Option Selected', { label, slug })Pagination Button Clicked
Countly.trackEvent('Pagination Button Clicked', { page })Results-Per-Page Dropdown Toggled
Countly.trackEvent('Results-Per-Page Dropdown Toggled', { state })Results-Per-Page Option Selected
Countly.trackEvent('Results-Per-Page Option Selected', { option })Grid-List View Toggled
Countly.trackEvent('Grid-List View Toggled', { view })Filter Chiclet Clicked
Countly.trackEvent('Filter Chiclet Clicked', { tag, category, state })Clear Filters Button Clicked
Countly.trackEvent('Clear Filters Button Clicked', { count })Filter Panel Search Input There exists a 500ms debounce function in the search input so as to provide a greater chance of capturing a full rather than partial search query.
Countly.trackEvent('Filter Panel Search Input', { query }) |
