V0 Alpha Release

.env.example

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_ORBIS_CONTEXT=""
+PINATA_API_KEY=""
+PINATA_SECRET_API_KEY=""

components/ArticleContent.jsx

@@ -36,14 +36,14 @@ export default function ArticleContent({post}) {
       <article className="mb-8 pr-6">
         {/* Post header */}
         <header>
-          <h1 className="h2 text-primary mb-4">{post.content.title}</h1>
+          <h1 className="h2 font-primary mb-4">{post.content.title}</h1>
 
           {/** Article Metadata */}
           <div className="flex items-center justify-between mt-4 mb-4">
             <div className="text-xs text-secondary flex flex-row items-center flex-wrap">
               {/* Post date & creator details */}
               <span className="text-brand">—</span> <ReactTimeAgo date={post.timestamp * 1000} locale="en-US"/> <span className="text-secondary mr-2 ml-2">·</span>
-              <span className="text-primary"><User hover={true} details={post.creator_details} /></span>
+              <span className="font-primary"><User hover={true} details={post.creator_details} /></span>
               <span className="text-secondary mr-2 ml-2">·</span>
 
               {/** Proof link to Cerscan */}

components/Editor.js

@@ -401,14 +401,14 @@ const Categories = ({category, setCategory}) => {
       setLoading(true);
       let { data, error } = await orbis.api.from("orbis_contexts").select().eq('context', global.orbis_context).order('created_at', { ascending: false });
 
-      setCategories(data);
+      setCategories(data.reverse());
       setLoading(false);
     }
   }, []);
 
   return(
     <div className="flex flex-col mt-2 mb-4 items-center text-sm">
-      <span className="text-primary font-medium text-base">Which category do you want to share your post into?</span>
+      <span className="font-primary font-medium text-base">Which category do you want to share your post into?</span>
       <div className="flex flex-row flex-wrap space-x-2 mt-2">
         {categories.map((cat) => {
           return (

components/Footer.jsx

@@ -11,21 +11,16 @@ function Footer() {
           <div className="flex flex-col md:flex-row items-center justify-center md:justify-between mb-4">
             <div className="shrink-0 mr-4">
               {/* Logo */}
-              <Link className="inline-flex group mb-8 md:mb-0 text-primary" href="/">
-                <Logo />
+              <Link className="inline-flex group mb-8 md:mb-0 font-primary" href="/">
+                <img className="h-8 w-auto" src="/logo.png" alt="Web3 of Trust" />
               </Link>
             </div>
             {/* Right links */}
             <div className="text-sm font-medium md:order-1 mb-2 md:mb-0">
               <ul className="inline-flex flex-wrap text-sm space-x-6">
                 <li>
-                  <Link className="text-slate-500 hover:underline" href="/post/kjzl6cwe1jw14b9pin02aak0ot08wvnrhzf8buujkop28swyxnvtsjdye742jo6">
-                    Learn more
-                  </Link>
-                </li>
-                <li>
-                  <Link className="text-slate-500 hover:underline" href="https://useorbis.com" target="_blank">
-                    Go to useorbis.com
+                  <Link className="text-slate-500 hover:underline" href="https://www.web3oftrust.app/" target="_blank">
+                    Web3 of Trust
                   </Link>
                 </li>
 
@@ -56,7 +51,7 @@ function Footer() {
             </ul>
 
             {/* Copyright */}
-            <div className="text-sm text-slate-600">Copyright © Orbis Labs. All rights reserved.</div>
+            <div className="text-sm text-slate-600">Copyright © Web3 of Trust. All rights reserved.</div>
           </div>
         </div>
       </div>

components/Header.jsx

@@ -3,6 +3,7 @@ import Link from 'next/link';
 import { Logo, CommunityIcon, PanelRight, SearchIcon, MenuVerticalIcon, LoadingCircle } from "./Icons";
 import useOutsideClick from "../hooks/useOutsideClick";
 import { useOrbis, User, UserPopup, Chat } from "@orbisclub/components";
+import Image from 'next/image';
 
 function Header() {
   const { orbis, user, setConnectModalVis } = useOrbis();
@@ -17,29 +18,24 @@ function Header() {
             {/* Site branding */}
             <div className="shrink-0 mr-4">
               {/* Logo container */}
-              <Link href="/" className="text-primary">
-                <Logo />
+              <Link href="/" className="font-primary flex items-center gap-2">
+                <Image src="/logo.png" alt="Web3 of Trust Logo" width={30} height={30} />
+                <span className='text-xl font-primary'>Web3 of Trust</span>
               </Link>
             </div>
 
             {/* Desktop navigation */}
-            <nav className="flex grow text-primary">
+            <nav className="flex grow font-primary">
               {/* Desktop sign in links */}
               <ul className="flex grow justify-end flex-wrap items-center">
                 <li className="hidden md:flex">
                   <SearchBar />
                 </li>
-                <li>
-                  <Link className="text-sm font-medium hover:underline px-3 lg:px-5 py-2 flex items-center transition duration-150 ease-in-out"
-                    href="/post/kjzl6cwe1jw14b9pin02aak0ot08wvnrhzf8buujkop28swyxnvtsjdye742jo6">
-                    Learn more
-                  </Link>
-                </li>
                 {/** Show connect button or user connected */}
                 {user ?
                   <li className="relative ml-3 mr-3">
                     <div className="text-sm font-medium flex flex-row items-center space-x-4 rounded hover:bg-slate-300/[.2] px-3 py-2 cursor-pointer" onClick={() => setShowUserMenu(true)}>
-                      <User details={user} height={30} />
+                      <User details={user} height={30} className="font-primary" />
                       <MenuVerticalIcon />
                     </div>
 
@@ -93,8 +89,8 @@ const UserMenuVertical = ({hide}) => {
     <>
       <div className="absolute top-[0px] right-[0px] py-10 z-50 w-[165px]">
         <div className="text-sm shadow-md bg-white border border-gray-200 p-3 rounded-md flex flex-col w-full space-y-1" ref={wrapperRef}>
-          <div className="text-primary font-medium hover:bg-gray-50 cursor-pointer rounded py-1.5 px-2" onClick={() => setShowUserPopup(true)}>Update profile</div>
-          <div className="text-primary font-medium hover:bg-gray-50 cursor-pointer rounded py-1.5 px-2" onClick={() => logout()}>Logout</div>
+          <div className="font-primary font-medium hover:bg-gray-50 cursor-pointer rounded py-1.5 px-2" onClick={() => setShowUserPopup(true)}>Update profile</div>
+          <div className="font-primary font-medium hover:bg-gray-50 cursor-pointer rounded py-1.5 px-2" onClick={() => logout()}>Logout</div>
 
           {showUserPopup &&
             <BackgroundWrapper hide={() => setShowUserPopup(false)}>
@@ -154,7 +150,7 @@ const SearchBar = () => {
             <div className="absolute top-[32px] right-[0px] z-50 w-[300px] ">
               <div className="text-sm shadow-md bg-white border border-gray-200 p-2 rounded-md flex flex-col w-full space-y-1">
                 {loading ?
-                  <div className="flex p-3 justify-center text-primary">
+                  <div className="flex p-3 justify-center font-primary">
                     <LoadingCircle />
                   </div>
                 :
@@ -168,7 +164,7 @@ const SearchBar = () => {
                             );
                           } else {
                             return (
-                              <Link key={post.stream_id} className="text-primary font-medium hover:bg-gray-50 cursor-pointer rounded py-1.5 px-2" href={"/post/" + post.stream_id}>{post.content.title ? post.content.title : <>{post.content.body.substring(0,25)}...</>}</Link>
+                              <Link key={post.stream_id} className="font-primary font-medium hover:bg-gray-50 cursor-pointer rounded py-1.5 px-2" href={"/post/" + post.stream_id}>{post.content.title ? post.content.title : <>{post.content.body.substring(0,25)}...</>}</Link>
                             );
                           }
 

components/Hero.jsx

@@ -15,7 +15,7 @@ function Hero({ title, description, image }) {
             <div className="flex flex-row items-center">
               {/* Copy */}
               <div className="flex flex-col md:pr-32">
-                <h1 className="text-3xl font-bold text-primary pb-3">{title}</h1>
+                <h1 className="text-3xl font-bold font-primary pb-3">{title}</h1>
                 <p className="text-lg text-secondary">{description}</p>
               </div>
 

components/PostItem.jsx

@@ -14,13 +14,13 @@ export default function PostItem({post}) {
             <div>
               <div className="mb-2">
                 <h2 className="mb-1">
-                  <Link className="text-primary font-semibold hover:underline transition duration-150 ease-in-out" href={"/post/" + post.stream_id}>
+                  <Link className="font-primary font-semibold hover:underline transition duration-150 ease-in-out" href={"/post/" + post.stream_id}>
                     {post.content.title}
                   </Link>
                 </h2>
                 <p className="text-sm text-secondary">{post.content.body.substring(0,180)}..</p>
               </div>
-              <div className="flex items-center text-sm text-primary flex flex-row space-x-1.5">
+              <div className="flex items-center text-sm font-primary flex flex-row space-x-1.5">
                 <User details={post.creator_details} height={35} />
                 <UserBadge details={post.creator_details}  />
                 <span className="text-secondary">in</span>
@@ -32,7 +32,7 @@ export default function PostItem({post}) {
 
                 {/** Proof link to Cerscan */}
                 {post.stream_id &&
-                  <Link href={"https://cerscan.com/mainnet/stream/" + post.stream_id} target="_blank" className="hidden md:flex text-primary text-xs bg-white border border-gray-200 rounded-md py-1 px-2 font-medium flex flex-row items-center hover:underline"><ExternalLinkIcon style={{marginRight: 4}} />{shortAddress(post.stream_id, 12)}</Link>
+                  <Link href={"https://cerscan.com/mainnet/stream/" + post.stream_id} target="_blank" className="hidden md:flex font-primary text-xs bg-white border border-gray-200 rounded-md py-1 px-2 font-medium flex flex-row items-center hover:underline"><ExternalLinkIcon style={{marginRight: 4}} />{shortAddress(post.stream_id, 12)}</Link>
                 }
               </div>
             </div>

components/Sidebar.jsx

@@ -64,7 +64,7 @@ const RecentDiscussions = () => {
               return(
                 <li key={key}>
                   <h3 className="text-sm mb-1">
-                    <Link className="text-primary font-semibold hover:underline" href={"/post/" + post.stream_id}>{post.content.title}</Link>
+                    <Link className="font-primary font-semibold hover:underline" href={"/post/" + post.stream_id}>{post.content.title}</Link>
                   </h3>
                   <div className="text-xs text-secondary flex flex-row items-center space-x-1">
                     <ReactTimeAgo date={post.timestamp * 1000} locale="en-US"/> <span className="text-tertiary">by</span> <span><User details={post.creator_details} height={25} /></span>
@@ -117,7 +117,7 @@ return(
                   <div style={{background: "#E9993E", width: 4, marginRight: 10}}></div>
                   <div className="flex flex-1 flex-wrap items-center justify-between w-full">
                     <div className="flex items-center mr-2">
-                      <Link className="truncate text-sm text-primary font-semibold hover:underline" href="#0">{category.content.displayName}</Link>
+                      <Link className="truncate text-sm font-primary font-semibold hover:underline" href="#0">{category.content.displayName}</Link>
                     </div>
                   </div>
                 </li>

pages/_app.js

@@ -2,20 +2,25 @@ import '@/styles/globals.css'
 import { Orbis, OrbisProvider } from "@orbisclub/components";
 import "@orbisclub/components/dist/index.modern.css";
 
-/** Set the global forum context here (you can create categories using the dashboard by clicking on "Create a sub-context" from your main forum context) */
-global.orbis_context = "kjzl6cwe1jw147eabkq3k4z6ka604w0xksr5k9ildy1glfe1ebkcfmtu8k2d94j";
+global.orbis_context = process.env.NEXT_PUBLIC_ORBIS_CONTEXT;
 
 /** Set the global chat context here (the chat displayed when users click on the "Community Chat" button) */
-global.orbis_chat_context = "kjzl6cwe1jw147040w6bj3nkvny3ax30q76ib5ytxo6298psrx1oawa3wmme2jx";
+global.orbis_chat_context = "kjzl6cwe1jw146wmeaa90oy2zwup5susdrtnniaidkn7x3rqnfwf3z0q4ttsdws";
 
 let orbis = new Orbis({
   useLit: false,
   node: "https://node2.orbis.club",
   PINATA_GATEWAY: 'https://orbis.mypinata.cloud/ipfs/',
-  PINATA_API_KEY: process.env.pinata_api_key,
-  PINATA_SECRET_API_KEY: process.env.pinata_secret_api_key
+  PINATA_API_KEY: process.env.PINATA_API_KEY,
+  PINATA_SECRET_API_KEY: process.env.PINATA_SECRET_API_KEY
 });
 
 export default function App({ Component, pageProps }) {
-  return <OrbisProvider defaultOrbis={orbis}><Component {...pageProps} /></OrbisProvider>
+  return <OrbisProvider defaultOrbis={orbis}>
+    <div className='bg-emerald-700 p-2 text-center'>
+      <p className='font-sans-serif text-white text-xs'>
+        The Forum is in Alpha. Please report any bugs or issues on the <a target="_blank" href='https://github.com/web3-of-trust/forum/issues' className='text-emerald-100 underline'>Github issue</a> page.
+      </p>
+    </div>
+    <Component {...pageProps} /></OrbisProvider>
 }

pages/create.jsx

@@ -13,20 +13,20 @@ export default function Create() {
     <>
       <Head>
         {/** Title */}
-        <title key="title">Share a new post | Orbis Forum</title>
-        <meta property="og:title" content="Share a new post | Orbis Forum" key="og_title" />
+        <title key="title">Share a new post | Web3 of Trust Forum</title>
+        <meta property="og:title" content="Share a new post | Web3 of Trust Forum" key="og_title" />
 
         {/** Description */}
-        <meta name="description" content="Discuss the future of Orbis and experience the power of Open Social on our Orbis Forum." key="description"></meta>
-        <meta property="og:description" content="Discuss the future of Orbis and experience the power of Open Social on our Orbis Forum." key="og_description"/>
+        <meta name="description" content="Discuss the future of Orbis and experience the power of Open Social on our Web3 of Trust Forum." key="description"></meta>
+        <meta property="og:description" content="Discuss the future of Orbis and experience the power of Open Social on our Web3 of Trust Forum." key="og_description"/>
         <link rel="icon" href="/favicon.png" />
       </Head>
       <div className="flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip">
         <div className="antialiased">
           <div className="min-h-screen flex">
 
             {/*  Page content */}
-            <main className="grow overflow-hidden">
+            <main className="grow overflow-hidden font-primary">
               {/*  Site header */}
               <Header />
               <Hero title="Sharing a new post on our forum" description="You are about to share a new post in the forum. Make sure to read our rules before doing so." image />

pages/index.jsx

@@ -24,7 +24,7 @@ function Home({defaultPosts}) {
     /** Load all categories / contexts under the global forum context */
     async function loadContexts() {
       let { data, error } = await orbis.api.from("orbis_contexts").select().eq('context', global.orbis_context).order('created_at', { ascending: false });
-      setCategories(data);
+      setCategories(data.reverse());
     }
   }, []);
 
@@ -72,16 +72,16 @@ function Home({defaultPosts}) {
     <>
       <Head>
         {/** Title */}
-        <title key="title">Orbis Forum | Let&apos;s build web3 social together</title>
-        <meta property="og:title" content="Orbis Forum | Let&apos;s build web3 social together" key="og_title" />
+        <title key="title">Web3 of Trust Forum | Let&apos;s build web3 social together</title>
+        <meta property="og:title" content="Web3 of Trust Forum | Let&apos;s build web3 social together" key="og_title" />
 
         {/** Description */}
-        <meta name="description" content="Discuss the future of Orbis and experience the power of Open Social on our Orbis Forum." key="description"></meta>
-        <meta property="og:description" content="Discuss the future of Orbis and experience the power of Open Social on our Orbis Forum." key="og_description"/>
+        <meta name="description" content="Discuss the future of Orbis and experience the power of Open Social on our Web3 of Trust Forum." key="description"></meta>
+        <meta property="og:description" content="Discuss the future of Orbis and experience the power of Open Social on our Web3 of Trust Forum." key="og_description"/>
         <link rel="icon" href="/favicon.png" />
       </Head>
       <div className="flex flex-col min-h-screen overflow-hidden supports-[overflow:clip]:overflow-clip">
-        <div className="antialiased">
+        <div className="antialiased font-primary">
           <div className="min-h-screen flex">
 
             {/*  Page content */}
@@ -90,7 +90,8 @@ function Home({defaultPosts}) {
               <Header />
 
               {/*  Page sections */}
-              <Hero title="Welcome to the Orbis Forum!" description="Respectful and good-faith discussion should be the cornerstone of any decision-making process. In trying to enact change, please keep this principle in mind." image={<HeroOrbisIcon />} />
+              <Hero title="Welcome to the Web3 of Trust forum" description="Help build identity, authentication and access control systems for a new generation of decentralized applications.
+              " image={<img src='/logo-blue.png' className='w-32 h-auto' />} />
 
               {/* Page content */}
               <section>