Coder Social home page Coder Social logo

ipfs / ecosystem-directory Goto Github PK

View Code? Open in Web Editor NEW
15.0 15.0 9.0 11.21 MB

Interactive showcase of projects and products built using IPFS, the InterPlanetary File System.

Home Page: https://ecosystem.ipfs.tech

JavaScript 11.32% HTML 69.34% SCSS 4.47% Vue 14.87%
decentralized dweb ipfs web3

ecosystem-directory's Introduction

IPFS is an open system to manage data without a central server

Check out our website at ipfs.tech.

For papers on IPFS, please see the Academic Papers section of the IPFS Docs.

License

MIT.

ecosystem-directory's People

Contributors

2color avatar amanda-agency-undone avatar d3as8a avatar geolffreym avatar ibnesayeed avatar ipfs-mgmt-read-write[bot] avatar jessicaschilling avatar lidel avatar orvn avatar prcolaco avatar svvimming avatar tikagan avatar timelytree avatar vesahc avatar web-flow avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ecosystem-directory's Issues

App configuration model

A schema for all the options within the app, both those specified in #30 and the essential config for the app, like the source of truth for accepted categories.

Find videos for individual project pages

Now that we've got space for an embedded video, we need to source the individual videos.

I'll add a column to the Airtable sheet and start populating these as I'm able ...

Singular page

This page displays a single project and all information available on that project, as shown in the high fidelity designs.

It is the most comprehensive instantiation of the project model, and will often link off-site to resources like docs, repositories, case studies, primary websites, etc.

Each project will have a dedicated and human-readable path (also known as a slug).

Create launch comms/marketing plan

Create initial comms/marketing plan using previously created ideation template - particularly as regards blog post, social media, newsletter promo.

Cleanup and complete existing documentation

Ideally the documentation for this repo wouldn't just live in a readme.md, rather it should be fragmented into an information architecture and perhaps put into a Github Wiki (associated with this repo).

The one thing I'm not sure about is whether Github-based repo wikis transfer on clone.

Hero section

The hero section, in the context of the Ecosystem app, refers to the entirety of the section below the navigation, but above the page's core content.

It contains the heading (and on other IPFS properties can include an image, although this is not the case for this Ecosystem Directory.

It should be split from the navigation, because it requires some state-based functionality.
Most importantly, it needs to alter the heading based on which filters are selected. The heading should reflect the filter state, as should the URL fragment/parameters.

Add this repo's `master` and `develop` branches to Fleek

@jessicaschilling I'm not sure who the correct person is to whom I should assign this, so I'm throwing it at you for the moment ๐Ÿ˜

It would be great to get this directory up and running on 2 separate Fleek builds/urls for our 2 primary branches, this way we can get visual feedback on development fairly quickly. Giving the Fleek app access to this repo would be great as well so that we can see (directly in this repo) the โœ“ for when a build has completed an an X if the build fails. The information to input would be as follows:

โ€”โ€”โ€” master branch

Environment variables

NODE_ENV=production
SERVER_ENV=production

Build command: npm ci && npm run generate

Docker Image: fleek/nuxtjs:node-12

โ€”โ€”โ€” develop branch

Environment variables

NODE_ENV=production
SERVER_ENV=development โ† this is important

Build command: npm ci && npm run generate

Docker Image: fleek/nuxtjs:node-12

CC @orvn

Filter panel chiclets should be "or", not "and"

Relayed from @thattommyhall: Filter panel chiclet doesn't do what's expected upon multi-selection โ€” "in my head you are filtering for any of N industries, not each of N".

Indeed, this is an expected e-commerce pattern โ€” example from Amazon:
image

Regardless of final approach to "or" vs "and", let's consider the following:

  • Remove "All" as it's pretty much guaranteed to get you to null results
  • Consider replacing it with "Clear selection" in order to clear selection per filter category (more granular than just the "Clear x selected" at bottom of filter panel)

Static header and footer

A header and footer, whose theme is based on the design for this project, as well as the overall theme for IPFS properties.

Note that this issue/task covers a static header and footer, whose content will be stored in a json file, within the repo.

At a later date, there will be an option to import a custom header and footer per IPFS org-wide requirements. This feature isn't available yet.

Nonetheless, developing a static and themable header/footer is essential for the support of future repository forking.

Add alternative data visualization (showcase)

Per @autonome, we will need to add an alternative means of visualizing the data so that it can be presented as a static image with all data on display, most likely in a slide-deck context. This has been socialized as a treemap, so unless there's a compelling reason to use a different method, suggest we stay with that. This doesn't need to be specifically part of the ordinary presentation of the rest of the app, but it would be a nice touch to invoke it by a "view as treemap" element or similar.

Requirements:

  • 16x9 aspect ratio (for ease of use in slide decks) view of data as treemap: ideally in Figma format but something CSS-based works too, particularly if we can find a nice way to launch it from the main app
  • Each treemap segment must include category title
  • Each treemap segment must include number of participants in respective category
  • Each treemap segment must include as many logos as viable
    • Since not all logos will be included, need means for prioritizing logos that MUST appear

Pre-launch checklist

Using this issue as a holding pen for pre-launch items โ€” we can split out into separate issues later as need be.

  • Make repo public
  • Once repo public, turn on "automatically delete head branches" in settings to keep branches tidy
  • Once repo public, protect main and develop branches (can't currently do this on private repos) to keep from automatically deleting those when they're head branches
  • (not actually done, but being tracked in ipfs/ipfs-website#71) Update CTA link on ipfs.io for "explore the ecosystem"
  • Add standard issue templates
  • Connect main branch to Fleek
  • Configure DNS (cname for ecosystem.ipfs.io.) to route to Fleek
  • Test Fleek build to main
  • Add link (or embeddable if complete) to ipfs.io (in ipfs/ipfs-website#71)
  • Add link to https://ipfs.io/media (in ipfs/ipfs-website#71)
  • Add link to https://docs.ipfs.io/welcome-builders/
  • Regression test of all features
  • Ensure analytics (Countly) is configured on production branch (main)
  • Test analytics
  • Test SEO indexability
  • Add to Google Search Console (using ipfs.io domain as a whole already, so this isn't needed)
  • Consider redirect of old raster URL to something that will generate raster on demand

Design alternate theme for IPFS ecosystem

While designing the ecosystem layout we knew it would need to be flexible across vastly different brands and design systems. Once the layout was finalized we took a short amount of time to stretch the design possibilities within template by applying an alternate design framework. Here's the results (VERY quickly mocked up!)

Ecosystem Alternative Visual Style- hover state โ€“ 1

Populate non-project text

Populate the non-project text for the site (that is, text that isn't sourced from the project database).

Text is currently in lorem ipsum - I'll chip away at PR-ing those changes.

Changing the sort should reset the page number

If you sort by alphabetical order and go to page 2, then switch to sorting by time on IPFS you'll end up on page of that sort instead of resetting back to page 1 (which is how GitHub issues and I think most other places do it).

Interactions and transition states

Currently, the app is functional, but lacks the visual appeal and tacit cohesiveness that interaction development facilitates.

This ticket includes:

  • Hover and focus states
  • Transitions on all applicable elements
  • State changes (e.g. the hero animation when engaging the filter state)
  • Haptic feedback
  • Preloaders (if needed)
    • (Currently I don't think we need a loader animation anywhere, because we don't fetch things asynchronously, do you agree @timelytree?)

DeFi seems under-filled?

image

As you can see from the "finance" section here - there are a ton of DeFi projects who use IPFS to ensure they have a decentralized front end - including Uniswap, MyEtherWallet, Kyber Network, and more.

Ravencoin is also a huge user / promoter of IPFS.

Can we get these added to the DeFi category?

Taxonomy naming cleanup

@jessicaschilling:

Furthering on #46, we have a list of categories and their tags defined here.

This is based on exporting the fields from the Airtable and parsing them. This file, taxonomy.json is the source of truth for all categories and tags. This means that if a project tries to invoke a category or tag that isn't defined in the master taxonomy, it doesn't get displayed (presumed a typo or some other kind of error).

However, the content in this file is a little long-winded right now. I believe you mentioned wanting to truncate and formalize the naming for these tags and categories, correct?

Automate transformation of projects into json

A script is required which pulls data from the CRM and transforms it into our project model (#10, doc).

This script:

  • Should not automatically PR into this repo (but it should be built in such a way that this can be made possible on a future date)
  • Should only execute once an entry is complete (and indicated that it's ready for the Ecosystem)
  • Should write the output somewhere, which can be used to create a PR

A minor potential blocker that needs to be researched is exporting images from the CRM. Since they're all SVGs, we might want to optimize them too, with a tool like svgo.

Pagination

Pagination of the Ecosystem index page, including and search or filter state that may be accessed.

Pagination will be reflected in the URL with parameters.

Route and path structure

The following need to be identified:

  • Ecosystem root path
  • Ecosystem search state path (the URL of the ecosystem index page when the filters are open, but no specific filters have been applied yet)
  • Singular project path
  • Params (every filter state should write to the URI GET parameters, ensuring that users can share an exact search state by sending someone a link)
    • Parameter for search filter (word as a substring match of project name)
    • Parameters for tag/taxonomy filters
    • Parameter for sort setting
    • Parameter for pagination position

404 page

The 404 page must follow IPFS specific 404 page routing

Create workflow for adding new orgs

We need to create a workflow for adding orgs to the directory in the long term โ€” either folks who ask to join, or orgs we identify in our day-to-day.

CC @autonome โ€” if this is no longer your area, please let me know who to talk with. Thank you!

Create boilerplate (depersonalized) version of this repo for shipyard org

Once this work is in a finished enough state to recommend forking for others' projects, create a less IPFS-specific "boilerplate" version in (probably) the ipfs-shipyard org in order to give others both a clean starting point and to provide an example of how the app can be set up to meet a variety of needs. The work might involve:

  • Changing IPFS colors/branding to an example alternative
  • Changing filter criteria as an illustration of possibility
  • Depersonalizing iconography and/or content (e.g. use Noun Project icons, cat photos etc)

Taxonomy model and data import

We've decided to separate taxonomies, i.e., the definition of allowed categories and tags, into its own file. This will be separate from other settings (see #30 and #43).

Taxonomies need to be created, and then imported based on the actual data we currently have available.

This is a blocker to progress at the moment.

Put "other" at end (aka far right)

It seems slightly weird to me to have "other" in the logical middle of the list ahead of much more important categories like NFTs, DeFi, etc. Can we adjust to put those popular categories earlier in the list (ex before "integrations") and move "other" to the very far left?

Set up final location for JSON data source

Initial development work on this directory has been taking place concurrent to other teams' work on a PL-wide CRM database. While it's not practical to add this directory's source data to the CRM database while both items are under active development, it's reasonable to expect we can consolidate these prior to launch.

  • Add directory source data to master CRM database
  • Re-link JSON extraction logic to master CRM database
  • Test for expected behavior

Draft data models

We'll need data structures for:

  • Projects
  • The ecosystem itself
  • Meta, and other miscellaneous settings

(The latter two might could potentially be combined)

Requirements:

  • Each project should be its own object which will exist as a json file (as opposed to a large json structured as an array of objects)

    • This will support encapsulation of projects and allow individual pull requests to be made for new projects, or amended projects
  • All models should be structured such that they are extensible and fault tolerant (i.e., missing an expected, or containing an unexpected value does not cause issues)

    • Some of this will be handled by the application's frontend logic, but it can be built into models as well, for example:
{
    "projects": [
        {
        "id": 1,
        "name": "Hello World",
        "attributes": {
            "foo": "value",
            "bar": "value"
        } }
    ]
}

In this example all optional attributes are nested within an attributes object

Mobile singular project pages

The responsive design for project pages.

This will include a slider that enables the CTA cards and stats to be swiped. Most other content will simply collapse down into a smaller set of columns per the grid, but some adjustments will be needed to polish the mobile and tablet views.

Filter panel

A panel on the ecosystem index that allows control off all filter states, including chiclet selection, input field (string) search and clearing selections.

When the filter panel is accessed, the state of the ecosystem index becomes more purposeful, hiding elements like the segment chart and featured slider.

Filtering should occur in real time, and should feel haptic for the user. Fortunately this is exactly what SPAs like Vue are designed to do.

Fixes queue: Issues prior to soft launch

This issue is for accumulating fixes (functional and visual) that need to be made prior to a successful soft launch of this site. I'll continue to add items to the checklists in this original comment as I find them; for the sake of expediency, please feel free to work any unchecked items in the meantime, and leave notes in subsequent comments. ๐Ÿ™

General

  • Replace lipsum text with items in JSON - @timelytree, please advise when this is ready for adding text fixed in #141
  • Designate projects for Featured projects section - but how?
  • Whenever text is a link, underline on hover, unless some other hover state indicates that it's clickable (e.g. subtle scaling, color change, etc)
  • For breadcrumbs, Home shouldn't open in a new tab

Hero: blue background version

Hero: detail page version

  • For breadcrumb, please observe same changes as for blue background version, except please use the darker teal link color you're using currently
  • For breadcrumb, please use | instead of / as divider

Front page

  • Please make Featured projects and All projects headers text bigger; 1.75rem looks nice, but please tweak if that doesn't work within an existing typography hierarchy
  • In the segment chart, clicking View All should take the user to all projects for that category (so in the example below they'd go to all projects in Other)
    image

Sort/filter UI

  • Please change the options to the following: Alphabetical (A-Z), Alphabetical (Z-A), Time on IPFS (newer), Time on IPFS (older) fixed in #141
    image
  • Strange things are happening vis-a-vis the header nav at narrow mobile widths (in this example, the filter pane actually can't be closed because the invisible header nav is on top of it:
    image
  • Is the text in class="filter-category sub-heading" customizable in json? If not, can it please be?
  • Can you please reduce the space after those filter category subheadings? Unless I'm missing something at a weird breakpoint, cutting it in half would look good and save space: margin: 6px 6px 1.5rem;
  • Search bar should not be case-sensitive

Projects list: both versions

  • There's some strange behavior with blank space after the cards and before the footer. It can be made more extreme by toggling between card and list view (see screenshot below) - if possible to mitigate prior to soft launch that would be great, if not please queue it up for more in-depth work.
    image
  • For projects whose description overflows, possible to add the full description on hover in an alt/description tag?
    image
  • Information is getting cut off at narrow mobile widths:
    image

Projects list: card version

  • Please decrease the amount of space between icon div and the descriptive text, and increase the amount of space between the bottom of the descriptive text and the next project below it; the even spacing makes it tough to tell what icon the words go with
    image
  • Please add a subtle scale effect to the icons when hovering on them, similar to hover behavior on cards on https://blog.ipfs.io/
  • For project names, please make font-weight: 600 and add underline on hover

Projects list: list version

  • Please add a subtle scale effect to the icons when hovering on them, similar to hover behavior on cards on https://blog.ipfs.io/
  • For project names, please make font-weight: 600 and add underline on hover

Filter results page(s)

  • For the "All Projects" version of the filter results page (which I can't actually access via https://bafybeicveie5wkmcqq5p72dzgiui2onrijzw3ecn6ap5uuozof2t2ij5bm.on.fleek.co/?filters=enabled - this feels problematic? Nauras Edit: moved this to a new line item below), please make the breadcrumb read Home | Ecosystem directory | All projects or, once a filter is invoked, Home | Ecosystem directory | Filtered results if that doesn't mean massive logical heavy lifting.
  • Navigating to URL via SSR (example: paste URL into a new tab) with ?/filters=enabled query param breaks site

Detail pages

  • Breadcrumb should read Ecosystem directory (note lowercase) rather than IPFS Ecosystem fixed in #141

  • Please make h1 line-height smaller, as it looks awkward when project names run to multiple lines. line-height: 1.2; looks good if it doesn't mess with your type hierarchy.

  • Ditto with the titles in class="card case-study", please.

  • As with front page, please make "Key info" header bigger (1.75rem or whatever is consistent with your overall type rules)

  • Please make class="description" text the same size/line-height as class="company", and knock the opacity of class="company" back to 0.7 to fake a gray (or some other solution that doesn't cause too much pain in the skinnable CSS)

  • For Project Website button, please lowercase "website" (fixed in #141) and make color/hover behavior the same as for the Subscribe button in the footer

  • For tag chicklets, please make the text white and background #34797D on hover

  • Please make text link colors (e.g. website, repo links) #34797D instead of the ice blue currently used

  • Please reduce the line-height for class= statistic in the big-number boxes, as they're really tough to read when a line breaks:
    image

  • For the Key info section at narrower widths, please add some space after each category/value pair so it's clearer what categories are attached to what values:
    image

  • At narrower widths, the grid injects a fair amount of dead space to the right of everything above the accordion chicklet section. Possible to mitigate this?
    image

  • I'm afraid I'm still tripping up at the Featured projects callout looking like it's actually giving information about the project on the detail page rather than being info on other projects. Can we please put this section in a pale grey box similar to the big-number boxes?
    image

  • At narrow mobile widths, the arrows to go between big-number boxes are counterintuitive and tough to use. I believe I saw a comment elsewhere about this, but flagging here in case not.
    image

  • Clicking chicklets on detail pages takes the user to a URL that makes sense, but displays just like the ordinary front page. I believe this is under discussion elsewhere, but just flagging here for inclusion.

Featured slider

This is a slider that appears at the top of the ecosystem index, below the segment chart.

It shows projects that are featured, and its contents are controlled by a setting.

The slider should support a custom scroll-bar like element, shown in the design.

This slider moves whole slides, there should be no state where the user can freeze a partially obscured slide out of the viewport.

The slider should respond to scroll when a cursor is hovered over it, and gesture controls on mobile (horizontal swipe/slide).

Create hi-fi designs

Complete hi-fi design mockups suitable to passing to dev team.

Artifacts to be reviewed/iterated Friday 9 April at 12:30 ET (10:00a MT).

Segment chart enhancement

Furthering off of the PoC #7, the segment chart/worm chart needs cleanup for:

  • Better integration into this application's (now-established) data structure
  • Visual polish
  • Slider behavior tests, including responsive

Ecosystem index project grid

The ecosystem index page's core content will be a grid of cards, where each card represents a project.

These cards will be togglable between two states: grid or list view. Each view is visible in the high fidelity designs.

Toggling a view will write a param to the URL.

In either state, cards/project containers will adhere to a responsive grid, ensuring that they reorient on devices of different sizes.

Create mid-fi designs

Complete next round of design iteration:

  • Tie up some of the lo-fi changes established in sync meeting 16 March
  • Move the design to mid-fi, which will be more visually on-brand

To be discussed Friday 26 March at 12:30 ET (10:30a MT)

Schema and other metadata

This application should be SEO and social friendly, allowing admins to control which metadata will appear in seach engines and social sharing.

Additionally, it should use json-ld style microformats for structured data.

Externally embeddable view

This container is a specialized design that can be injected into any external site.

It can be seen in the high fidelity design, however, this implementation is highly specific to the IPFS ecosystem project. This feature will be need to be customized if this repository is forked for other instantiations.

This embeddable object will:

  • Need a container specified (using an ID) on the host site, to inject content into
  • Need to check if Vue is running on the frontend of the target site (client side), and call in Vue if it isn't, or log a version mismatch to the console of one exists)
  • Need to use attributes within their own namespace, like smurf classes, where each class is prefixed with a unique string

Analytics using Countly

An analytics implementation with Countly should track the following:

  • Basic hit tracking such as pageviews and sessions
  • External link clicks
  • Filter states
  • Avoid the use of cookies, if possible
  • Paths and referrers, especially internal to the app with virtualization of navigation
  • Bot filtering or segmentation so real users can be distinguished

Because this is an SPA, we'll need to account for not only conventional navigation, but also virtualized.

Identify application settings

In addition to the model for projects/entities, a data structure is needed to set parameters around the application's functionality.

This should be extensible, and should include a list of required settings.

Some of the settings that will be proposed in this issue will be quality-of-life in nature; i.e., they won't be absolutely necessary for this instance of the project (however, it's good to think of them in advance to ensure the most extensibility).

Mobile ecosystem index and filters

The responsive view, down to the mobile breakpoint of the ecosystem index. This includes:

  • Mobile/tablet navigation, hero and footer
  • Mobile/tablet segment chart
  • Mobile/tablet featured slider
  • Functionality for the filter panel to operate on mobile and tablet, where the filters open into a near-full-screen modal
  • Scrolling to the top of the results after the filters are applied or modified
  • It may be worth considering only offering list view on smaller mobile devices, but we can address that case if necessary later
  • Mobile/tablet page controls, including sorts and pagination

Repo config cleanup

Making this an issue for the sake of visibility to @andyschwab โ€” Andy, can you please protect the two branches below as I don't have enough access? Thank you!

  • Update default branch (for PRs etc) to develop
  • Protect main and develop branches from auto-deletion upon PR merge

Overall app polish

This is a large issue that will continue to stay open until this project meets the standard outlined in the design

Cross-browser testing

The app should be regression tested in:

Desktop

  • Chrome (on Windows and MacOS)
  • Firefox (on Windows and MacOS)
  • Brave
  • Safari
  • Edge

(Even though some of these are Chromium-based, or share it won't hurt to at least smoke test on these other browsers).

Mobile:

  • Android Chrome
  • iOS Safari

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.