diff --git a/components/cards/CardGrid.tsx b/components/cards/CardGrid.tsx index 6ea8036..021d94a 100644 --- a/components/cards/CardGrid.tsx +++ b/components/cards/CardGrid.tsx @@ -13,7 +13,7 @@ interface Props { } export function CardGrid({ rows, children }: Props) { - const { isMobile, isDesktop, isHuge } = useContext(ScreenContext); + const { isDesktop, isHuge } = useContext(ScreenContext); const [ref, { width }] = useMeasure(); const widthOfCardPx = 200; @@ -37,25 +37,7 @@ export function CardGrid({ rows, children }: Props) { return ( <> - {isMobile ? ( -
- - {children.map(child => ( -
- {child} -
- ))} - -
- ) : ( + {
{_.chunk(cards, grouping).map(group => ( @@ -69,7 +51,7 @@ export function CardGrid({ rows, children }: Props) { ))}
- )} + } ); } diff --git a/components/navigation/MobileHeader.tsx b/components/navigation/MobileHeader.tsx index 4ee1fb5..b9fb463 100644 --- a/components/navigation/MobileHeader.tsx +++ b/components/navigation/MobileHeader.tsx @@ -60,8 +60,8 @@ export function MobileHeader() { toggleSideMenu()} className={classNames( - 'h-3 fill-current text-primary transform outline-none duration-300 cursor-pointer', - sideMenuExpanded ? 'rotate-180' : '-rotate-60', + 'h-4 fill-current text-primary transform outline-none duration-300 cursor-pointer', + sideMenuExpanded ? 'rotate-90' : '', )} /> )} @@ -71,8 +71,8 @@ export function MobileHeader() { toggleMobileMenu()} className={classNames( - 'h-4 transform outline-none duration-300 cursor-pointer', - headerMobileMenuExpanded ? '-rotate-90' : 'rotate-90', + 'h-4 fill-current text-primary transform outline-none duration-300 cursor-pointer', + headerMobileMenuExpanded ? 'rotate-90' : '', )} /> diff --git a/components/navigation/SideMenuInner.tsx b/components/navigation/SideMenuInner.tsx index 0f92452..f87f0a9 100644 --- a/components/navigation/SideMenuInner.tsx +++ b/components/navigation/SideMenuInner.tsx @@ -59,7 +59,7 @@ export function SideMenuInner() { {!isDesktop && (
{_.chunk(NAVIGATION.MENU_ITEMS, 2).map(group => ( @@ -80,28 +80,32 @@ export function SideMenuInner() {
- ) : ( @@ -114,13 +118,13 @@ export function SideMenuInner() { } const SocialsRow = () => { - const { isDesktop } = useContext(ScreenContext); + const { isTablet } = useContext(ScreenContext); return (
diff --git a/constants/metadata.tsx b/constants/metadata.tsx index d1d33af..d964426 100644 --- a/constants/metadata.tsx +++ b/constants/metadata.tsx @@ -1,6 +1,18 @@ const METADATA = { OXEN_HOST_URL: 'https://oxen.io', TITLE_SUFFIX: 'Oxen | Privacy made simple.', + SITE_META_DESCRIPTION: + 'Oxen is built by the OPTF, a passionate team of advocates, creatives, and engineers building a world where the internet is open, software is free and accessible, and your privacy is protected. The OPTF also builds other platforms using Oxen technology, and supports other developers in building on Oxen.', + ROADMAP: { + DESCRIPTION: "View Oxen's plan for the future here.", + }, + 404: { + DESCRIPTION: "Oopsy, here's our 404 page.", + }, + BLOG: { + DESCRIPTION: "View Oxen's Blog Updates Here", + URL: 'https://oxen.io/blog', + }, }; export default METADATA; diff --git a/constants/navigation.ts b/constants/navigation.ts index 083a7c0..4abc6ee 100644 --- a/constants/navigation.ts +++ b/constants/navigation.ts @@ -127,8 +127,6 @@ const NAVIGATION = { SIDE_MENU_ITEMS, BLOG_REGEX: /^\/(blog)([?tag=[\w-]*)?([?&]page=[0-9]{1,3})?/, POST_REGEX: /^\/(blog\/)(([\w-]{1,100})|(\[slug\]))$/, - SITE_META_DESCRIPTION: - 'Oxen is built by the Loki Foundation, a passionate team of advocates, creatives, and engineers building a world where the internet is open, software is free and accessible, and your privacy is protected. The Loki Foundation also builds other platforms using Oxen technology, and supports other developers in building on Oxen.', }; export default NAVIGATION; diff --git a/pages/404.tsx b/pages/404.tsx index a581d06..b7e756b 100644 --- a/pages/404.tsx +++ b/pages/404.tsx @@ -2,9 +2,9 @@ import classNames from 'classnames'; import Head from 'next/head'; import React, { useContext } from 'react'; // import _404 from '../assets/svgs/404.svg'; -import { UI } from '../constants'; +import { UI, METADATA } from '../constants'; import { ScreenContext } from '../contexts/screen'; -import { generateTitle } from '../utils/metadata'; +import { generateTitle, generateURL } from '../utils/metadata'; function oxen404() { const { isMobile, isTablet, isDesktop, isHuge } = useContext(ScreenContext); @@ -47,10 +47,24 @@ function oxen404() { width: '9rem', }; + const pageTitle = generateTitle('404'); + const pageURL = generateURL('/404'); + return (
- {generateTitle('404')} + {pageTitle} + + + + + + +
@@ -65,13 +79,13 @@ function oxen404() {

404

Nothing found here.

diff --git a/pages/[page].tsx b/pages/[page].tsx index d36b89b..3344233 100644 --- a/pages/[page].tsx +++ b/pages/[page].tsx @@ -4,11 +4,11 @@ import React, { useEffect } from 'react'; import { useDispatch } from 'react-redux'; import { Contained } from '../components/Contained'; import { RichBody } from '../components/RichBody'; -import { NAVIGATION } from '../constants'; +import { NAVIGATION, METADATA } from '../constants'; import { CmsApi, unslugify } from '../services/cms'; import { PageType, setPageType, SideMenuItem } from '../state/navigation'; import { ISplitPage } from '../types/cms'; -import { generateTitle } from '../utils/metadata'; +import { generateTitle, generateURL } from '../utils/metadata'; interface IPath { params: { page: string; isRoadmap?: boolean }; @@ -19,7 +19,6 @@ export async function getStaticPaths() { // Hardcoded in navigation constants. // Contentful can edit entries but cannot add/remove // without touching code. - const paths: IPath[] = Object.values(NAVIGATION.SIDE_MENU_ITEMS).map( item => ({ params: { page: item.href }, @@ -30,8 +29,8 @@ export async function getStaticPaths() { } export async function getStaticProps({ params }) { - const id = unslugify(String(params?.page) ?? ''); - + const href = params?.page ?? ''; + const id = unslugify(String(href)); // Roadmap page is special 👁️👄👁️ if (SideMenuItem[id] == [SideMenuItem.ROADMAP]) { // query all FAQ items from contentful @@ -39,6 +38,7 @@ export async function getStaticProps({ params }) { props: { page: null, isRoadmap: true, + href: `/${href}`, // the '/' is removed from the href from getStaticPaths(), so let's add it back here }, revalidate: 60, }; @@ -57,7 +57,6 @@ export async function getStaticProps({ params }) { const cms = new CmsApi(); const page = await cms.fetchPageById(SideMenuItem[id]); - if (!page) { return { notFound: true }; } @@ -66,6 +65,7 @@ export async function getStaticProps({ params }) { props: { page, isRoadmap: false, + href: `/${href}`, }, revalidate: 60, }; @@ -74,25 +74,54 @@ export async function getStaticProps({ params }) { function Page({ page, isRoadmap, + href, }: { page: ISplitPage | null; isRoadmap?: boolean; + href: string; }) { const dispatch = useDispatch(); useEffect(() => { dispatch(setPageType(PageType.NORMAL)); }, []); + const pageTitle = generateTitle( + isRoadmap + ? NAVIGATION.SIDE_MENU_ITEMS[SideMenuItem.ROADMAP].label + : page?.label, + ); + + const pageDescription = isRoadmap + ? METADATA.ROADMAP.DESCRIPTION + : page?.title; + + const pageURL = generateURL( + isRoadmap ? NAVIGATION.SIDE_MENU_ITEMS[SideMenuItem.ROADMAP].href : href, + ); return ( <> - - {generateTitle( - isRoadmap - ? NAVIGATION.SIDE_MENU_ITEMS[SideMenuItem.ROADMAP].label - : page?.label, - )} - + {pageTitle} + + + + + + + + + + + +
diff --git a/pages/_app.tsx b/pages/_app.tsx index d15bd75..68d77aa 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -63,6 +63,9 @@ function App({ Component, pageProps }: AppProps) { name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" > + + + diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx index 106fb2d..3f1036f 100644 --- a/pages/blog/[slug].tsx +++ b/pages/blog/[slug].tsx @@ -6,7 +6,7 @@ import { Article } from '../../components/article/Article'; import { CmsApi } from '../../services/cms'; import { PageType, setPageType, setPostTitle } from '../../state/navigation'; import { IPost } from '../../types/cms'; -import { generateTitle } from '../../utils/metadata'; +import { generateTitle, generateURL } from '../../utils/metadata'; interface IPath { params: { slug: string }; @@ -43,7 +43,7 @@ export async function getStaticProps({ params }) { const cms = new CmsApi(); const post = await cms.fetchBlogBySlug(String(params?.slug) ?? ''); - + const url = generateURL(params?.slug ? `/blog/${params?.slug}` : '/blog'); if (!post) { return { notFound: true }; } @@ -51,13 +51,14 @@ export async function getStaticProps({ params }) { return { props: { post, + url, }, revalidate: 60, }; } // Parallax on bg as mouse moves -function Post({ post }: { post: IPost }) { +function Post({ post, url }: { post: IPost; url: string }) { const dispatch = useDispatch(); useEffect(() => { @@ -66,28 +67,30 @@ function Post({ post }: { post: IPost }) { }, []); const pageTitle = generateTitle(post?.title); + const imageURL = post?.featureImage?.imageUrl; return ( <> {pageTitle} - - - - - - - + + + + + + + + {' '} + + + +
diff --git a/pages/blog/index.tsx b/pages/blog/index.tsx index f55a3b8..f557136 100644 --- a/pages/blog/index.tsx +++ b/pages/blog/index.tsx @@ -9,7 +9,7 @@ import { ArticleCardFeature } from '../../components/cards/ArticleCardFeature'; import { CardGrid } from '../../components/cards/CardGrid'; import { Contained } from '../../components/Contained'; import { TagBlock } from '../../components/TagBlock'; -import { CMS } from '../../constants'; +import { CMS, METADATA } from '../../constants'; import { CmsApi } from '../../services/cms'; import { PageType, setPageType } from '../../state/navigation'; import { IPost } from '../../types/cms'; @@ -131,10 +131,28 @@ const Blog = (props: Props) => { ); + const pageTitle = generateTitle('Blog'); + const featuredImageURL = featuredPost?.featureImage?.imageUrl; + return (
- {generateTitle('Blog')} + {pageTitle} + + + + + + + + + + +
diff --git a/pages/index.tsx b/pages/index.tsx index 03bfdac..79f0a85 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -2,26 +2,40 @@ import Head from 'next/head'; import React from 'react'; import { HomeHero } from '../components/HomeHero'; import { HomeHeroBubble } from '../components/HomeHeroBubble'; -import { METADATA, NAVIGATION } from '../constants'; +import { METADATA } from '../constants'; const Index = () => { + const imageURL = `${METADATA.OXEN_HOST_URL}/site-banner.png`; return ( <> {METADATA.TITLE_SUFFIX} + - - - + + + + + + + + + {/* Only visible when no pages are open */} diff --git a/pages/roadmap.tsx b/pages/roadmap.tsx index d17b218..fb1a51c 100644 --- a/pages/roadmap.tsx +++ b/pages/roadmap.tsx @@ -1,9 +1,9 @@ import Head from 'next/head'; import React from 'react'; import { useMeasure } from 'react-use'; -import { NAVIGATION } from '../constants'; +import { NAVIGATION, METADATA } from '../constants'; import { SideMenuItem } from '../state/navigation'; -import { generateTitle } from '../utils/metadata'; +import { generateTitle, generateURL } from '../utils/metadata'; function Roadmap() { const [ref, { width, height }] = useMeasure(); @@ -18,14 +18,36 @@ function Roadmap() { console.log('roadmap ➡️ width:', width); console.log('roadmap ➡️ ratio:', aspectRatio); + const pageTitle = generateTitle( + NAVIGATION.SIDE_MENU_ITEMS[SideMenuItem.ROADMAP].label, + ); + const pageURL = generateURL( + NAVIGATION.SIDE_MENU_ITEMS[SideMenuItem.ROADMAP].href, + ); + const imageURL = `${METADATA.OXEN_HOST_URL}/site-banner.png`; + return ( <> - - {generateTitle( - NAVIGATION.SIDE_MENU_ITEMS[SideMenuItem.ROADMAP].label, - )} - + {pageTitle} + + + + + + + + + + +
@@ -46,7 +68,7 @@ function Roadmap() {
diff --git a/public/downloads/oxen-media-kit.zip b/public/downloads/oxen-media-kit.zip new file mode 100644 index 0000000..f06a048 Binary files /dev/null and b/public/downloads/oxen-media-kit.zip differ diff --git a/public/img/session-x.jpg b/public/img/session-x.jpg deleted file mode 100644 index 8172579..0000000 Binary files a/public/img/session-x.jpg and /dev/null differ diff --git a/public/img/session-x.png b/public/img/session-x.png new file mode 100644 index 0000000..0d672e2 Binary files /dev/null and b/public/img/session-x.png differ diff --git a/public/img/session-y.jpg b/public/img/session-y.jpg deleted file mode 100644 index 303a3a0..0000000 Binary files a/public/img/session-y.jpg and /dev/null differ diff --git a/public/img/session-y.png b/public/img/session-y.png new file mode 100644 index 0000000..3bd3d62 Binary files /dev/null and b/public/img/session-y.png differ diff --git a/utils/metadata.ts b/utils/metadata.ts index 89e97f9..de125fa 100644 --- a/utils/metadata.ts +++ b/utils/metadata.ts @@ -6,3 +6,7 @@ export function generateTitle(prefix: string) { ? `${titleCase(prefix)} - ${METADATA.TITLE_SUFFIX}` : METADATA.TITLE_SUFFIX; } + +export function generateURL(prefix: string) { + return prefix ? `${METADATA.OXEN_HOST_URL}${prefix}` : METADATA.OXEN_HOST_URL; +}