Skip to content
This repository was archived by the owner on Oct 7, 2024. It is now read-only.

updated home page UI and contents #112

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
Open

updated home page UI and contents #112

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cb69fc6
updated home page UI and contents
cmcWebCode40 Jul 28, 2022
4e193a2
fix(styles): centered getting started box images
cmcWebCode40 Jul 30, 2022
666128a
fix(styles): modified discord card and partnership card to use generi…
cmcWebCode40 Aug 2, 2022
5f89ecc
fix: refactor discord and partnership card into one component because…
cmcWebCode40 Aug 4, 2022
446ffee
fix: updated with PR changes request
cmcWebCode40 Aug 24, 2022
311321f
fix:removed unused css style
cmcWebCode40 Aug 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 11 additions & 20 deletions src/components/cards/ContentCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,16 @@
import React from 'react';
import styles from './card.module.css';
import Link from '@docusaurus/Link';

const ContentCard = ({ icon, isExternalLink, link }) => {

import React from "react";
import styles from "./card.module.css";
import Link from "@docusaurus/Link";

const ContentCard = ({ icon, link, subText }) => {
return (
<>
{
isExternalLink ? <Link href={link}>
<div className={styles.contentCard}>
<div>{icon}</div>
</div>
</Link> :
<Link to={link}>
<div className={styles.contentCard}>
<div>{icon}</div>
</div>
</Link>
}
</>
<div className={styles.contentCardBox}>
<Link to={link} className={styles.contentCard}>
{icon}
</Link>
<br />
<span>{subText}</span>
</div>
);
};

Expand Down
8 changes: 4 additions & 4 deletions src/components/cards/card.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,10 @@
height: 100%;
}

.contentCard {
margin: 0.6rem 1rem;
.contentCardBox {
margin: 0 0.5rem;
}


.contentCard:hover {
cursor: pointer;
box-shadow: 0px 12px 25px rgba(34, 35, 140, 0.07);
Expand All @@ -27,6 +26,7 @@
}



.discordBanner {
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -107,7 +107,7 @@

@media screen and (max-width:768px) {
.discordBanner {
width:18rem;
width: 18rem;
padding: 0rem;
}
}
130 changes: 100 additions & 30 deletions src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,29 +19,59 @@ import DemosIcon from "@site/static/img/demos.svg";
const contentCards = [
{
title: "Read the Documentation",
icon: <ReadDocsIcon title='icon' />,
icon: (
<ReadDocsIcon
title='icon'
style={{
width: "85%",
}}
/>
),
link: "/docs/intro",
externalLink: false,
subText:
"Learn about the core concepts of the Verida protocol, the network and more",
},
{
title: "See API Documentation",
icon: <ExploreAPiICon title='icon' />,
icon: (
<ExploreAPiICon
title='icon'
style={{
width: "85%",
}}
/>
),
link: "/docs/api/verida-js/",
externalLink: true,
subText: "Detailed documentation of the Verida JS library",
},
{
title: "Interactive Tutorial",
description: `Check out the interactive tutorials for an introduction to Verida's Web3 APIs`,
icon: <IntTutorialIcon title='icon' />,
icon: (
<IntTutorialIcon
title='icon'
style={{
width: "85%",
}}
/>
),
link: "/docs/tutorial/introduction",
externalLink: false,
subText:
"Try the interactive tutorial to get you coding with Verida as quickly as possible.",
},
{
title: "Demos",
description: "Explore Verida technologies with demo applications",
icon: <DemosIcon title='icon' />,
icon: (
<DemosIcon
title='icon'
style={{
width: "85%",
}}
/>
),
link: "/docs/demos",
externalLink: false,
subText: "Test our demo applications to interact with the Verida protocol",
},
];

Expand All @@ -54,10 +84,7 @@ const githubLinks = [
title: "Markdown Notes Demo",
link: "https://github.com/verida/markdown-notes-demo",
},
{
title: "Documentation",
link: "https://github.com/verida/documentation",
},

{
title: "Storage-Node",
link: "https://github.com/verida/storage-node",
Expand All @@ -67,11 +94,27 @@ const githubLinks = [
link: "https://github.com/verida/account-explorer",
},
{
title: "Generic-demo",
link: "https://github.com/verida/generic-demo",
title: "Vault Examples",
link: "https://github.com/verida/vault-showcase",
},
{
title: "Vue starter kit",
link: "https://github.com/verida/vue-starter-kit",
},
];
const gettingStarted = [
{
title:
"Implement the Single Sign On and Client SDK Javascript SDKs in your application",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't get the "... Client SDK Javascript SDKs ...".
@nick-verida, what is the official name we should use while referring to the SDK(s)? We sometimes use "Verida Javascript Library", like in the API doc

My understanding is:
The Client SDK is available for 3 platforms with the following packages:

  • @verida/client-ts (javascript/typescript)
  • @verida/client-node (node js)
  • @verida/client-rn (react native)

The SSO SDK is available through the following package:

  • @verida/account-web-vault

Am I correct?
Should we standardise how we refer to them in the whole documentation?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aurelticot depends on the context. In this case it was pretty deliberate because someone in the "getting started" phrase doesn't yet understand the distinction, and we want them to look at both.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, I still don't get the sentence in the doc. If the target is someone that doesn't yet understand the distinction, I find "... Client SDK Javascript SDKs ..." pretty confusing.

How about simply: "Implement the SDKs in your application"?

link: "/docs/single-sign-on-sdk",
icon: "/img/sso_icon.png",
},
{
title: "For Vue developers, try the Vue Starter Kit.",
link: "https://github.com/verida/vue-starter-kit",
icon: "/img/vue-starter-kit.png",
},
];

const description = `
Explore the Verida Developer's Portal to get
started with our developer documentation,
Expand Down Expand Up @@ -114,7 +157,10 @@ export default function Home() {
<main className={styles.mainSection}>
<section className={styles.heroSection}>
<h1>Welcome to the Verida Developer Portal</h1>
<div>Verida is a multi-chain protocol for interoperable database storage and messaging built on decentralized identity.</div>
<div>
Verida is a multi-chain protocol for interoperable database
storage and messaging built on decentralized identity.
</div>
</section>
<section className={styles.cardSection}>
<div className={styles.contentCard}>
Expand All @@ -123,26 +169,50 @@ export default function Home() {
))}
</div>
<div className={styles.vaultDL}>
<h1>Download the Verida Vault (Developer Preview)</h1>
<h2>Getting Started</h2>
</div>
<div className={styles.storeButtons}>
<a href='https://apps.apple.com/us/app/verida-vault/id1546599632'>
<img
className={styles.appstorebutton}
src='/img/AppStore_button.svg'
/>
</a>
<a href='#'>
<img
className={styles.appstorebutton}
src='/img/GooglePlayCOMINGSOON.svg'
/>
</a>
<div className={styles.gettingStarted}>
<div className={styles.storeButtons}>
<div className={styles.storeButtonsChild}>
<a href='https://apps.apple.com/us/app/verida-vault/id1546599632'>
<img
className={styles.appstorebutton}
src='/img/AppStore_button.svg'
/>
</a>
<br />
<a href='#'>
<img
className={styles.appstorebutton}
src='/img/GooglePlayCOMINGSOON.svg'
/>
</a>
</div>
<div>
<p>Download the Verida Vault (Developer Preview) </p>
</div>
</div>
{gettingStarted.map((item) => (
<div className={styles.storeButtons}>
<div className={styles.storeButtonsChild}>
<a href={item.link}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't look like the image are clickable links.
@nick-verida all the other links/buttons in this page are with a box and linear gradient background, how about having a similar look? (noting it might too much)

<img src={item.icon} height='100' />
</a>
</div>
<div>
<p>{item.title}</p>
</div>
</div>
))}
</div>
<DiscordCard />
<PartnerShipCard />
<div className={styles.githubCardSection}>
<h2>GitHub Repositories</h2>
<p>
The Verida protocol is comprised of an ecosystem of open
source components
</p>
<div className={styles.githubCard}>
{githubLinks.map((item) => (
<GithubCard key={item.title} {...item} />
Expand Down
27 changes: 25 additions & 2 deletions src/pages/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
*/


.svgIcon {
width: 60%,
}

.mainSection {
display: flex;
flex-flow: column nowrap;
Expand Down Expand Up @@ -67,11 +71,18 @@
grid-template-columns: 1fr 1fr 1fr 1fr;
}

.gettingStarted {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

.githubCardSection {
margin-bottom: 6.5rem;
text-align: center;
}

.githubCardSection h2 {
.githubCardSection h2,
p {
margin: 0 1rem;
}

Expand Down Expand Up @@ -102,9 +113,12 @@
.storeButtons {
display: block;
margin-left: auto;
margin-right: auto;
margin-right: auto;
}

.storeButtonsChild{
text-align: center;
}
.appstorebutton {
border-style: solid;
border-width: 1px;
Expand Down Expand Up @@ -134,11 +148,20 @@
.contentCard {
grid-template-columns: 1fr 1fr;
}

.gettingStarted {
grid-template-columns: 1fr 1fr;
}
}


@media screen and (max-width:768px) {
.contentCard {
grid-template-columns: 1fr;
}


.gettingStarted {
grid-template-columns: 1fr;
}
}
Binary file added static/img/sso_icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/img/vue-starter-kit.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.