ipfs / ipfs-website

Official IPFS Project website

IPFS Website (ipfs.tech)

This repository contains code and content for the official IPFS Project website, located at https://ipfs.tech. This site acts as a high-level overview of the IPFS project, offering valuable introductory information and next-steps pathways for prospective and current IPFS users and developers, members of the press, and more.

Please note that some sites closely related to this primary IPFS website have their own repos:

• IPFS Blog & News
• IPFS Ecosystem Directory
• IPFS Documentation

For site developers

Pre requisites

# install node LTS/Current
https://nodejs.org/en/download/

# enable corepack in node > v16.17
corepack enable

# install deps
pnpm i

Run developer mode locally

To build a local copy, run the following:

# serve with hot reload at localhost:3000
pnpm dev

Build for production

# build optimised static site
pnpm generate

# launch a webserver to preview the site
pnpm preview

PR and preview

Once you're happy with your local changes, please make a PR against the main branch. Including detailed notes on your PR - particularly screenshots to depict any changes in UI - will help speed up approval and deployment.

All PRs against main automatically generate Fleek previews to make it easier to "check your work". You can view your PR's preview by clicking Details in the fleek/build check at the bottom of your PR page:

A reviewer will be by shortly to have a look!

Maintainers

This site's codebase is under active maintenance by members of the core IPFS team.

License

© Protocol Labs | Code is licensed with the MIT License. Except as noted, other content licensed CC-BY 3.0.

ipfs-website's Issues

table component

Create scaffolding text and UI elements as new material is added

This repo contains a variety of issues specifying net-new material— these will need scaffolding text and UI elements added as part of their respective implementations.

This issue is a placeholder for that work for the sake of project planning; it'll be broken out into separate, more specific issues (for research, visual design, coding, user testing) as work progresses.

signup component

ribbon component

navbar component

Use header nav, page hero, site footer from blog

Use the following elements from the new IPFS blog/news site as repeatable elements for this site:

• Header nav
  
• Page hero (for internal pages only, e.g. legal)
  
• Site footer
  

As these elements will appear across at minimum 3 sites (ipfs.io, blog, ecosystem directory), let's investigate the best way to make these repeatable: Is this the right time to establish an MVP atomic components library (probably including CSS a la https://github.com/ipfs-shipyard/ipfs-css )?

Add first Builder Series video to site

Once the first video in the Builder Series is finished, add proposed "who's building" section to the front of ipfs.io.

hero component

Auto-populate "In the Media" and "videos" section with latest news/video links

To minimize manual work and maximize freshness, it would be great to populate the "In the Media" section with the last n news links (category news_coverage) from the blog. Would it also make sense to turn this into a reusable component?

Related: #5 for latest blog posts.

website hacked - please fix

getting Mails with this link URL:

https://ipfs.io/ipfs/bafkreibd6edcrojqovd4ic7g47fcgqex4uaxgnvskbh4yojoudi5pph35m?filename=index(2).html#[email protected]

break design into components specs

Tidy font stack/hierarchy

As part of lift-and-shift work, let's tidy the fonts used and font size hierarchy to be more in line with the relaunched blog/news site. Note: We'll need to take care to not tread into visual rebrand territory.

This work may tie in with a repeatable components library as discussed in #1.

carousel component

trial: https://github.com/ismail9k/vue3-carousel

navbar component

subTitle component

"Automatic" timed callout for events, releases, etc

New feature for consideration: Add an easily configurable/PR-able, time-gated callout on the site (e.g. a top banner, though it could take some other visual form) for announcements, events, releases, etc.

Need for this exists, and was started but never implemented on the legacy website.

Note: It should be easy to PR for folks outside the usual site maintainers group, e.g. marketing folks who aren't often in the codebase.

Custom 404 error shows an endless spinning circle for nested paths

Going to https://ipfs.io/foobar gives the expected custom error whereas https://ipfs.io/foo/bar has a loading spinning circle.

The same is true for https://ipfs.io/ipfs/QmcCkMBC5rpKWBGuYNCXNnyVwpsrjSmw4Bv23HBF7Zt5gn/foobar vs https://ipfs.io/ipfs/QmcCkMBC5rpKWBGuYNCXNnyVwpsrjSmw4Bv23HBF7Zt5gn/foo/bar so it is not restricted to gateway behavior.

twitter component

Relative paths on gateway

Use the module: https://github.com/agency-undone/nuxt-module-ipfs

See ipfs-inactive/website#412 (comment)

ipfs.io fixed navbar is illegible against content/bkgd when scrolling

Problem
The fixed ipfs.io navbar style (transparent background and white text) is illegible against white background and all text

Reproduce
ipfs.io -> scroll down to first content section and see navbar "disappear"

Recommendation
Change text color within div or add more opacity to navbar

Screenshots

Links
https://ipfs.io/

Migrate homepage

This issue is for migrating the main (homepage) page of ipfs.io.

Please migrate visually as-is, with the following exceptions we discussed:

• Use blog header nav
• Use blog widths/breakpoints as visually appropriate (we may need to make exceptions for some of the more highly visual elements on this page, so please start with your aesthetic preferences or we can talk further if needed)
• Use blog footer (and remove the "Stay on top of the latest" section on the existing homepage since it's now redundant)
• Use blog fonts (Montserrat for headers, Inter for text) - we may need to modify blog font sizes to match visual style of existing page though

We can address more detailed visual changes (for blog continuity) in a subsequent issue. Thank you!

When loading ipfs.io with `www` some things are broken

Background

Currently, the IPFS website is available over two domains:

• https://www.ipfs.io/
• https://ipfs.io/

Problem

The two domains are served by different servers that serve different assets as indicated by DNS resolution:

➜  dig www.ipfs.io

; <<>> DiG 9.10.6 <<>> www.ipfs.io
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 60556
;; flags: qr rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;www.ipfs.io.			IN	A

;; ANSWER SECTION:
www.ipfs.io.		38	IN	CNAME	ffb10528e9a368494097.b-cdn.net.
ffb10528e9a368494097.b-cdn.net.	13 IN	A	138.199.37.226

;; Query time: 11 msec
;; SERVER: 192.168.178.1#53(192.168.178.1)
;; WHEN: Wed Jul 20 16:15:18 CEST 2022
;; MSG SIZE  rcvd: 100

➜  dig ipfs.io

; <<>> DiG 9.10.6 <<>> ipfs.io
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 60220
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;ipfs.io.			IN	A

;; ANSWER SECTION:
ipfs.io.		2211	IN	A	209.94.90.1

;; Query time: 11 msec
;; SERVER: 192.168.178.1#53(192.168.178.1)
;; WHEN: Wed Jul 20 16:15:21 CEST 2022
;; MSG SIZE  rcvd: 52

The problem is that the two domains return a different URL for the 3 JS files that don't load on the apex domain (without www).

The working version has these JS scripts in the payload

• https://www.ipfs.io/_nuxt/static/1656326872/state.js
• https://www.ipfs.io/_nuxt/static/1656326872/payload.js
• https://www.ipfs.io/_nuxt/static/1656326872/manifest.js

While the non-functioning apex version has the following scripts in the payload

• https://ipfs.io/_nuxt/static/1651855547/state.js
• https://ipfs.io/_nuxt/static/1651855547/payload.js
• https://ipfs.io/_nuxt/static/1651855547/manifest.js

Moreover, this causes the animation to not load:

And for the News and More section to be broken:

Possible solutions

• Redirect visitors to ipfs.io -> www.ipfs.io if the path doesn't contain /ipfs which is used for the public gateway.
• Fix the reverse proxy that handles requests to https://ipfs.io/_nuxt/static/1651855547/state.js so that it handles it the same way as https://www.ipfs.io/_nuxt/static/1651855547/state.js

Related

• Update the canonical URL to www.ipfs.io

Make sure well-known config is migrated

Make sure well-known items from ipfs-inactive/website#413 are migrated to the new site.
Consult with @andyschwab as needed.

[DISCUSSION] Global site search

New feature for consideration: Global (in-header) search for all "first-order" IPFS websites ...

• main ipfs.io
• blog.ipfs.io
• ecosystem directory
• docs.ipfs.io

For the user, this better surfaces functionality cross-site to avoid "information islands". It also has the potential to offer some interesting metrics possibilities for the core team.

Will be difficult to implement, but may be worth the effort. This issue is a holding pen for discussion.

card component

4 variants

"About IPFS" video & interactive explainer

Objective

Create a 2- to 3-minute showcase summary video explaining what IPFS is, the essentials of how it works, and how it has the potential to revolutionize the web. Video topics must include:

• Acknowledgement of how IPFS continues the internet’s original decentralized paradigm
• Brief overview of the fundamental web problems IPFS answers (today’s web is inefficient/expensive, doesn’t archive by default, limits opportunity through corporate centralization, isn’t resilient to outages/censorship/disaster)
• Brief overview of key concepts like file chunking/hashing, content addressing and DAG querying when retrieving content, file permanence/snapshots vs IPNS updating, etc
• Acknowledgement that IPFS is being included in a number of in-use, high-value projects
• End card linking to a “next steps” YouTube playlist of high-level IPFS explainers and playlist of testimonial videos, as well as to interactive explainer and a high-level docs landing page

Additionally, create an interactive explainer version of this content (reusing art from the video) for those who are unable to or choose not to view video content (testing indicated a roughly 50/50 split with strongly held opinions on whether video is a preferred medium).

PRD

https://docs.google.com/document/d/1Av70fWel_BkpPEZ-aQFg3AenW0xfCfaZ6zvC409IoLQ/edit?usp=sharing

bug(dx): code formatting is... kind of odd.

ipfs-website/layouts/default.vue

Lines 21 to 28 in 132e4e0

	if (
	hostname === 'ipfs.io' &&
	!(
	pathname.startsWith('/ipns/') || pathname.startsWith('/ipfs/')
	)
	) {
	window.location.replace(url.replace('//ipfs.io/', '//ipfs.tech/'));
	}

footer component

setup nuxt content v2

Migrate internal pages

This issue is for migrating "internal" (markdown-driven) pages from the existing ipfs.io site:

• https://ipfs.io/team/
• https://ipfs.io/help/
• https://ipfs.io/media/
• https://ipfs.io/legal/
• https://github.com/ipfs/website/blob/master/content/companion-privacy/index.md (please just set this up as a redirect)

As discussed, please start with the following and we can take care of visual tweaks to the CSS in a different issue:

• Use blog nav, header/hero, footer
• Use fonts from blog
• Use widths/breakpoints from blog

Note that the contents of https://github.com/ipfs/website/tree/master/static/docs don't need to be migrated (but any redirects involving them do). AFAIK those are there to avoid breaking links being referenced somewhere outside our ecosystem, and are only being viewed through GitHub's UI.

Create interactive ecosystem directory

Objective

Replace the existing canonical ecosystem diagram with an interactive, information-rich directory that effectively illustrates how IPFS adds critical value and tech enablement for IPFS builder orgs, projects, and industries. Presentation must be at, at minimum, two levels of detail:

1. Embeddable summary "widget" version (example placement) presenting the most impactful info
2. Detailed version (to be viewed in its own page, and can in itself contain several drilldown views) with additional details on each builder

Latest status documents

These items are evolving, but the latest will always be listed here. Check back regularly.

• Feature prioritization workshop results/notes (added 23 Feb 2021)

Draft features/requirements

It's safe to assume that these requirements are roughly accurate, but please keep in mind that details can change as the project develops. Always assume that materials under "Latest status documents" above are the source of latest truth.

Features: Summary view

An at-a-glance view of top IPFS implementers and the tangible value that IPFS provides them. Includes the following features and requirements:

• Initial “Featured” view, where featured builders are chosen by the core team and easily modified periodically via PR
• Additional views by industry/subject:
  • Browsers
  • Ecommerce & marketplaces
  • Content (including hosting, streaming, CDNs)
  • Non-fungible tokens (NFTs)
  • Decentralized finance (DeFi)
  • Prediction
  • Social media
  • Data (including machine learning)
  • Persistence & archiving (including pinning)
  • Data governance
  • Identity
  • IoT
  • Integrations
  • Games & VR/AR
  • Other
• For industry/subject views with many builders, display alphabetically but with option for bumping high-impact ones to a specified position at the front
• For each builder, include:
  • Org/product logo (visual treatment of logos needs to consider that this summary view may be embedded in visually complex surroundings)
  • Hover state or similar introductory/teaser interaction with the following info:
    • Org name
    • Product name, if different
    • Short description of product (language should lean heavily on dweb aspects)
    • "Learn more" CTA
• Clicking “Learn more” (or the logo itself if not in the hover state) goes to detailed view of entire ecosystem (in modal or new page) with that builder highlighted
• A “View the entire ecosystem” link leads to detailed view of entire ecosystem (in modal or new page)

Features: Detailed view(s)

A not-overwhelming, easily searchable/filterable showcase for exploring how builders leverage IPFS to succeed and the ways in which IPFS provides value. This detailed view may include additional drill-down views subject to prototyping and refinement, but overall includes the following features and requirements:

• A sortable/filterable discovery mechanism for finding builders with similar concerns/aims to yours, using the following as parameters:

  • Industry/subject type(s) (multi-choice filter)

  • Product focus (this needs refining, particularly vis-a-vis overlap with industry/subject):

    • Web hosting/publishing
    • Academic/research data
    • Public/community data
    • File sharing
    • Dev tools
    • Pinning/object storage
    • Package managers
    • Mobile
    • Music
    • GLAM (galleries, archives, and museums)
    • Infrastructure
    • Education
    • Video
    • IP/reputation management
    • Community/mesh networks
    • Medical data
    • Supply chain
    • Streaming

  • IPFS enablers/benefits (multi-choice filter):

    • Developer enablement
    • Freedom from corporate/government interference
    • Disaster resilience/recovery
    • Data integrity
    • (others to be added at indeterminate date)

  • Tools/implementations used (multi-choice filter):

    • go-ipfs
    • go-lipb2p
    • IPFS Cluster
    • js-ipfs
    • js-ipfs-https-client
    • js-libp2p
    • pinning services
    • (others to be added based on collab surveys)

  • Size/scale factor as demonstrated by "big number" metrics (TBD - not for initial release, but should be built with this in mind)

• For each builder, include:
  • Org name
  • Product name, if different
  • Industry/subject type(s) (clickable to invoke a filter)
  • Product focus (clickable to invoke a filter)
  • IPFS enablers/benefits for this project (clickable to invoke a filter)
  • Tools/implementations used
  • Several-sentence description of product, focusing on its relevance within the dweb
  • "Since 20XX", i.e. year IPFS was added to project (note: in practice, population of this field may be sparse and may need to be hidden for initial release)
  • Affordance for one to four "big number" metrics, i.e. number of nodes, speed figure, percentage advantage (note: in practice, population of this field may be sparse and may need to be hidden for initial release)
  • Website link, if one exists
  • Repo link, if one exists
  • IPFS Docs case study, if one exists
• Note: This detailed view needs to take into consideration the potential for being visually overwhelming once it includes many builders, and take measures to reduce this (may require drilldown views?)

Additional requirements

• Must present as well with a data set of 20 builders as with 200
• Must avoid a “there’s a lot to unpack” reaction in simpler views relevant to the concerns of diverse users, e.g. developer, engineering manager, or the reporter who just wants to find a big-name builder to interview for a news story
• Need to offer unique URLs to detailed view as individual builder drilldown, or search/filter result drilldown, for direct linking or social shareability (including sharing cards)
• Detailed view needs to account for the display of individual builders about whom not much is known (i.e. fields only partially filled) without it looking empty
• Both the summary and the detail view must be able to be output as “flat” to be dropped into static websites as needed, and need to consider different deployment methods in general:
  • As static gateway-hosted page that can be included as an iframe (sans furniture, if there is any)
  • As a component included in another project (primarily ipfs.io, blog.ipfs.io)
• Must be able to easily add or remove items from existing parameters (i.e. add an industry/subject type) in the future without breaking anything
• Must be easily updated via PR, with the awareness that in future we may use Forestry to enable additions and updates AND/OR pull data from a CRM via API (requirements change: data source of truth will live in third-party DB and updated via re-importing JSON from that DB, so update request flow is out of scope here)
  • In the meantime, must include well-written checklist in PR template to make submission as easy and standardized as possible
• Needs easy mechanism for viewing results in staging, ideally using IPFS (Fleek?)
• Must implement the following metrics using Countly:
  • Most popular searches/filters
  • Most popular builders for clicking into detail view
  • Depth of engagement: how often user moves from summary to detail view
  • Most-clicked outbound links

Legacy documents

Please note that these may be outdated as project requirements continue to develop, and should be used for reference only.

• Original product requirements document

title component

"Latest on the blog" callout as reusable component

Let's use this issue to discuss possible approaches for making the "IPFS Blog" latest post links section a reusable component for auto-populating regularly refreshed content on our websites in general.

Related: #11 for latest news links.

Cutover checklist

Holding pen for items that need to be confirmed/changed just prior to or at time of launch. Please add any new items directly to this comment rather than in subsequent comments. We can break these out into separate issues as needed.

• Approval for visual continuity (will defer to @atopal as to high up the executive chain this needs to go), plus addition of NFT text in "here and now" section
• DNS cutover, including any considerations for general ipfs.io gateway behavior (@andyschwab is managing)
• Check all page URLs display correctly, plus 404
• Migrate any issues still in https://github.com/ipfs/website/ repo to this repo
• Make sure this repo's readme is correct and useful
• Close any stray dependabot issues/PRs
• Add standard issue templates
• Protect any branches that need to be protected
• Remove any permissions not necessary after making repo public
• Confirm Countly is using correct data and dashboard is working; switch on email reports
• Make sure Dinesh knows metrics are now coming from Countly
• Confirm Speedcurve is using correct data
• Confirm social cards display correctly, particularly image as that's an absolute path and can't be tested in advance
• Send internal email and create meeting slide
• (scheduled for 1 July for safety net) Move repo to ipfs-inactive org; confirm that https://github.com/ipfs/website/tree/master/static/docs and items within redirect correctly into the archived repo

Improve clarity and CTA of Install section

The existing https://ipfs.io/#install section has issues:

• Lacking clarity of messaging for who should install what in order to meet which needs
• Too many CTAs in one place, leading to conflicting messaging
• No metrics captured on user actions

Rework this section in order to start collecting actionable metrics and provide a starting point for future improvements. This isn't strictly necessary at time of site relaunch, but would be a good value-add for both users and the core team.

Preliminary work was researched and tested in https://ipfs-ia-scratchpad.netlify.app/#install, but this will need to be tweaked and potentially re-tested for renewed PMF focus.

Note that there's been discussion about an improved download section potentially replacing https://js.ipfs.io to reduce maintainership burden — if so, need to make sure a reasonable degree of content parity exists, as well as add the relevant deprecation/redirection issues in that site's repo.

Set up Countly metrics

Add Countly collection and dashboarding for the replatformed site:

• At minimum, same metrics being collected via Countly for legacy site under ipfs-inactive/website#422
• Additionally, any events that can help us gain useful knowledge in lieu of having really actionable CTAs on the site in general

Let's also get Countly reporting set up with a group email distro (and migrate other Countly-reported sites' email reporting in the same way) for cleaner admin of email reporting.

Note that as we start adding more specifically PMF-focused enhancements to the site (e.g. #4), we'll need to be adding events specific to those improvements.

Add social cards

Add "social card" preview content (for Twitter, Slack, etc) for all site pages. This might mean a different methodology for the homepage vs the Markdown-generated interior pages. Include the following content:

• Site name
• Page name
• Page content excerpt
• Default social-card image

@jdiogopeixoto - if you're able to get the logic in place for this, I can write the content blurbs and get you a default image. Thank you!

setup application base

Tasks

Beta Give feedback

1. setup pnpm and new package.json
2. setup Nuxt 3 and main routes
3. add base modules (exp via layer)
4. add unocss config
5. add eslint config
6. add tsconfig
7. fix existing routes

btn component

Image not loading: IPFS Icon with a Superimposed Go Logo

Problem
The go-ipfs image is not loading; instead there is a broken image icon. Tried on different browsers with the same results.

Reproduce
ipfs.io -> scroll down to Install IPFS section

Recommendation
Check image/file size for issues and re-upload

Screenshot

Find/amend redirects as necessary

This issue is for finding and fixing (if needed) any redirects present on the existing website:

• At the site config (Hugo) level
• At the DNS level (move to Fleek?)

Set up Speedcurve

Add Speedcurve script to the replatformed site. (See ipfs/ipfs-blog#84 for earlier discussion.)

stat component

testimonial component

grid component

split component

Pre-launch visual continuity approval

@atopal - as discussed in sync meeting, passing you the following link for visual continuity approval and one additional text modification:

https://bafybeiaiaoyqvglrl7h5ntb2wtyyhkxwy5atdrfppd7em3ltqjtthxtswe.on.fleek.co/

Please have a look at the site vis-a-vis the following:

• Is the site visually consistent enough with the old ipfs.io to feel OK cutting over without additional approval stages? (All items are intended to be a 1:1 visual migration, with the exception of minor font changes in order to bring font use into consistency with the IPFS blog, IPFS Desktop, IPFS Web UI, IPFS Companion.)
• Under "IPFS can help here and now", in the "Content creators" section, there's an added reference to NFTs for clarity and SEO.

We're aiming to cut over Wednesday or Thursday, so if it's possible for you to review at your earliest convenience, that would be great. Thank you!

“How IPFS Works” interactive explainer

Objective

Create an interactive explainer on how IPFS works within the context of a real-world use case (e.g. friends/family sharing vacation photos in an offline-friendly app on the plane trip home). Explainer must include the option to turn on/off “dev mode”, enabling the user to either go through the journey from a conceptual level or augment the concepts with more in-depth technical examples (ideally as functional as possible within the context of a website demo). Areas explored must include:

• How files are hashed and turned into blocks, including de-duplication
• How files are queried and shared between users (content addressing, DAG lookup)
• How these p2p concepts are incorporated into an offline-first, privacy-preserving app context (featuring a reusable IPFS stack diagram)
• Any potential intersection points with Filecoin, if appropriate
• Relevant outbound docs/etc links throughout for those who wish to dig deeper

PRD

https://docs.google.com/document/d/1xujTTf0Y6viPp7P-JTzLGaAdJ6wwCxClXUjji9hq4xU/edit

[CONTENT] Update Team page

Not necessary for lift-and-shift cutover, but we do need to update the outdated information on the Team page to reflect PLv7 structure.

Anchor to newsletter signup section of homepage is broken

We want to be able to link directly to IPFS newsletter signup. Adding an internal anchor to the form in the footer would let us do that.