Skip to content

Commit

Permalink
Website blog (#1945)
Browse files Browse the repository at this point in the history 
* feat: add meta property for `postHeader.tsx`

* feat: update the meta data of blog

* feat: update the meta data for blog
  • Loading branch information
@TwilightLogic
TwilightLogic authored Jun 19, 2024
1 parent ddaaa15 commit 94d4381
Show file tree
Hide file tree
Showing 12 changed files with 183 additions and 169 deletions.
137 changes: 61 additions & 76 deletions docs/website/components/blog/blogIndex.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,95 @@
import { getPagesUnderRoute,} from "nextra/context";
import Link from "next/link";
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import { FilterButton } from "./filterButton";
import ROOCH_TEAM from "../../data/team";
import Image from "next/image";
import { getPagesUnderRoute } from 'nextra/context'
import Link from 'next/link'
import { useState, useEffect } from 'react'
import { useRouter } from 'next/router'
import { FilterButton } from './filterButton'
import ROOCH_TEAM from '../../data/team'
import Image from 'next/image'

export default function BlogIndex({
textAllCategories = "All Categories",
textAllAuthors = "All Authors",
textMore = "Read more",
textAllCategories = 'All Categories',
textAllAuthors = 'All Authors',
textMore = 'Read more',
}) {
const { locale } = useRouter();
const [selectedCategory, setSelectedCategory] = useState(textAllCategories);
const [selectedAuthor, setSelectedAuthor] = useState(textAllAuthors);
const { locale } = useRouter()
const [selectedCategory, setSelectedCategory] = useState(textAllCategories)
const [selectedAuthor, setSelectedAuthor] = useState(textAllAuthors)

const rawPages = getPagesUnderRoute("/blog");
const [pages, SetPages] = useState(rawPages);
const [pagesFiltered, setPagesFiltered] = useState(pages);
const rawPages = getPagesUnderRoute('/blog')
const [pages, SetPages] = useState(rawPages)
const [pagesFiltered, setPagesFiltered] = useState(pages)

// get all the authors
const [authors, __] = useState(() => {
let _authors = [textAllAuthors];
let _authors = [textAllAuthors]

pages.forEach((page) => {
_authors = _authors.concat(page.frontMatter.author);
});
_authors = _authors.concat(page.frontMatter.author)
})

return Array.from(new Set(_authors));
});
return Array.from(new Set(_authors))
})

// get all the categories
const [categories, ___] = useState(() => {
let _categories = [textAllCategories];
let _categories = [textAllCategories]

pages.forEach((page) => {
if (page.frontMatter.category) {
_categories = _categories.concat(page.frontMatter.category);
_categories = _categories.concat(page.frontMatter.category)
}
});
})

return Array.from(new Set(_categories));
});
return Array.from(new Set(_categories))
})

// process date
useEffect(() => {
let _pages = [];
let _pages = []
_pages = pages.map((page: any) => {
let _page = page;
let _page = page

const options: Intl.DateTimeFormatOptions = {
year: "numeric",
month: "long",
day: "numeric",
};
let dateObject = new Date(page.frontMatter?.date);
_page.dateNumber = dateObject.getTime();
year: 'numeric',
month: 'long',
day: 'numeric',
}
let dateObject = new Date(page.frontMatter?.date)
_page.dateNumber = dateObject.getTime()

const formmatedDate = dateObject.toLocaleDateString(page.locale, options);
const formmatedDate = dateObject.toLocaleDateString(page.locale, options)

_page.frontMatter.date =
formmatedDate != "Invalid Date"
? formmatedDate
: _page.frontMatter.date;
formmatedDate != 'Invalid Date' ? formmatedDate : _page.frontMatter.date

return _page;
});
SetPages(_pages);
}, []);
return _page
})
SetPages(_pages)
}, [])

// filter pages
useEffect(() => {
let _pages = [];
let _pages = []

// filter based on locale
_pages = pages.filter((page: any) => page.locale === locale);
_pages = pages.filter((page: any) => page.locale === locale)

// filter based on selected author and category
if (
selectedAuthor === textAllAuthors &&
selectedCategory == textAllCategories
) {
_pages = _pages;
if (selectedAuthor === textAllAuthors && selectedCategory == textAllCategories) {
_pages = _pages
} else {
_pages = _pages.filter((page) => {
const _author = String(page.frontMatter.author);
const _category = String(page.frontMatter.category);
const _author = String(page.frontMatter.author)
const _category = String(page.frontMatter.category)
return (
(_author == selectedAuthor && _category == selectedCategory) ||
(_author == selectedAuthor &&
selectedCategory == textAllCategories) ||
(_author == selectedAuthor && selectedCategory == textAllCategories) ||
(selectedAuthor == textAllAuthors && _category == selectedCategory)
);
});
)
})
}
setPagesFiltered(_pages);
}, [selectedCategory, selectedAuthor]);
setPagesFiltered(_pages)
}, [selectedCategory, selectedAuthor])

return (
<div className="mt-10">
Expand All @@ -107,7 +101,7 @@ export default function BlogIndex({
avatar: undefined,
}))}
onClick={(tag) => {
setSelectedCategory(tag);
setSelectedCategory(tag)
}}
/>
<FilterButton
Expand All @@ -117,26 +111,22 @@ export default function BlogIndex({
avatar: ROOCH_TEAM[author] ? ROOCH_TEAM[author].avatar : undefined,
}))}
onClick={(author) => {
setSelectedAuthor(author);
setSelectedAuthor(author)
}}
/>
</div>

{pagesFiltered
.sort((p1, p2) =>
p1.dateNumber < p2.dateNumber
? 1
: p1.dateNumber > p2.dateNumber
? -1
: 0
p1.dateNumber < p2.dateNumber ? 1 : p1.dateNumber > p2.dateNumber ? -1 : 0,
)
.map((page) => {
return (
<div key={page.route}>
<Link href={page.route}>
<button className="mb-10 w-full text-left postbox focus:bg-gray-100 dark:focus:bg-gray-800 pl-4 py-6 rounded-2xl ">
<button className="mb-10 w-full text-left postbox focus:bg-zinc-100 dark:focus:bg-zinc-800 pl-4 py-6 rounded-2xl ">
{/* Post Category */}
<p className="-mb-1 text-sm uppercase inline-block text-gray-500 ">
<p className="-mb-1 text-sm uppercase inline-block text-zinc-500 ">
{page.frontMatter.category}
</p>

Expand Down Expand Up @@ -167,23 +157,18 @@ export default function BlogIndex({

{/* Post Description */}
{page.frontMatter.description ? (
<p className="opacity-80 mt-2 leading-7">
{page.frontMatter.description}
</p>
) : null
}
<p className="opacity-80 mt-2 leading-7">{page.frontMatter.description}</p>
) : null}

{/* Post Date */}
{page.frontMatter.date ? (
<p className="opacity-50 text-sm leading-7">
{page.frontMatter.date}
</p>
<p className="opacity-50 text-sm leading-7">{page.frontMatter.date}</p>
) : null}
</button>
</Link>
</div>
);
)
})}
</div>
);
)
}
85 changes: 47 additions & 38 deletions docs/website/components/blog/postHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,54 @@
import Image from "next/image";
import { usePathname } from "next/navigation";
import { getPagesUnderRoute } from "nextra/context";
import ROOCH_TEAM from "../../data/team";
import { useState, useEffect } from "react";
import Image from 'next/image'
import { usePathname } from 'next/navigation'
import { getPagesUnderRoute } from 'nextra/context'
import ROOCH_TEAM from '../../data/team'
import { useState, useEffect } from 'react'
import Head from 'next/head'

export default function PostHeader() {
const pathname = usePathname();

const [page, setPage] = useState(null);
const pathname = usePathname()
const [page, setPage] = useState(null)

useEffect(() => {
setPage(
getPagesUnderRoute("/blog").find((page) => page.route === pathname)
);
}, [pathname]);
setPage(getPagesUnderRoute('/blog').find((page) => page.route === pathname))
}, [pathname])

return page ? (
<div className="text-center inline-block mx-auto w-full">
<h1 className="font-bold text-5xl mt-6">{page.frontMatter.title}</h1>
<h2 className=" my-3 text-sm inline-flex gap-2 uppercase text-gray-500 dark:text-gray-300">
{page.frontMatter.category}
{" | "}
<Image
src={ROOCH_TEAM[page.frontMatter.author].avatar}
alt={page.frontMatter.author}
width={20}
height={20}
className="rounded-full"
/>
<span className="font-semibold">
<a
href={
"https://twitter.com/" +
ROOCH_TEAM[page.frontMatter.author].twitterUsername
}
target="_blank"
>
{ROOCH_TEAM[page.frontMatter.author].name}
</a>
</span>
</h2>
</div>
) : undefined;
<>
<Head>
<title>{page.frontMatter.title}</title>
<meta property="og:title" content={page.frontMatter.title} />
<meta property="og:description" content={page.frontMatter.description} />
<meta property="og:image" content={page.frontMatter.image} />
<meta property="og:type" content="article" />
<meta property="og:url" content={`https://rooch.network/${pathname}`} />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content={page.frontMatter.title} />
<meta property="twitter:description" content={page.frontMatter.description} />
<meta property="twitter:image" content={page.frontMatter.image} />
</Head>
<div className="text-center inline-block mx-auto w-full">
<h1 className="font-bold text-5xl mt-6">{page.frontMatter.title}</h1>
<h2 className=" my-3 text-sm inline-flex gap-2 uppercase text-gray-500 dark:text-gray-300">
{page.frontMatter.category}
{' | '}
<Image
src={ROOCH_TEAM[page.frontMatter.author].avatar}
alt={page.frontMatter.author}
width={20}
height={20}
className="rounded-full"
/>
<span className="font-semibold">
<a
href={'https://twitter.com/' + ROOCH_TEAM[page.frontMatter.author].twitterUsername}
target="_blank"
>
{ROOCH_TEAM[page.frontMatter.author].name}
</a>
</span>
</h2>
</div>
</>
) : null
}
20 changes: 11 additions & 9 deletions docs/website/pages/blog/early-builders.en-US.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,33 @@
---
title: "1,000,000 $ROOCH for the Early Builders on Rooch Network"
title: '1,000,000 $ROOCH for the Early Builders on Rooch Network'
author: omnihand
category: Activities
date: 2024/06/04
description: 'Rooch Network invites developers to build applications on its network and offers a prize pool of 1,000,000 $ROOCH for early builders.'
image: '/blog/early-builders.png'
---

import PostHeader from "/components/blog/postHeader";
import PostHeader from '/components/blog/postHeader'

<PostHeader />

![](/blog/early-builders.png)
![Early Builders Program](/blog/early-builders.png)

Since its inception, Rooch Network has built strong connections with numerous esteemed teams within the BTC and Move ecosystems. **To further strengthen these partnerships and welcome new collaborations, we are excited to introduce the Early Builders Program. This initiative invites developers to build applications on the Rooch Network and serves as a precursor to our upcoming grant program. Participants in this program will have the opportunity to share a prize pool of 1,000,000 $ROOCH.**

## How it works?

Applications are officially open. Main focus towards application on Bitcoin Ecosystem. All high-quality projects for DeFi, infrastructure, tooling, gaming, metaverse, NFT, governance and more are welcome. Rooch Network aims to build the application layer of the Bitcoin ecosystem. Based on this mission, these are the basic requirements for a proposal to be considered:
Applications are officially open. Main focus towards application on Bitcoin Ecosystem. All high-quality projects for DeFi, infrastructure, tooling, gaming, metaverse, NFT, governance and more are welcome. Rooch Network aims to build the application layer of the Bitcoin ecosystem. Based on this mission, these are the basic requirements for a proposal to be considered:

- The main theme of the proposal should revolve around applications centered on Bitcoin.
- Support for Bitcoin eco-asset development.
- Illustration of user experience demonstrating product-market fit.

### Step 1

- Please review the key resources of Rooch Network and complete the basic information form: *[Rooch Network Early Builder Program Application Form](https://forms.gle/WTfAcdPrSE4BQvnh8).* The more specific and clear you are in your application, the better our team will understand your project proposal.
- Join our Early Builder channel on *[Discord](https://discord.com/invite/rooch)* to have direct conversations with the Rooch team.
- Within three days of receiving an application, Rooch Network will notify applicants whether their proposal has been accepted. Rooch team will judge the application based on the technical strength, details of specifications, team experience as well as practicality.
- Please review the key resources of Rooch Network and complete the basic information form: _[Rooch Network Early Builder Program Application Form](https://forms.gle/WTfAcdPrSE4BQvnh8)._ The more specific and clear you are in your application, the better our team will understand your project proposal.
- Join our Early Builder channel on _[Discord](https://discord.com/invite/rooch)_ to have direct conversations with the Rooch team.
- Within three days of receiving an application, Rooch Network will notify applicants whether their proposal has been accepted. Rooch team will judge the application based on the technical strength, details of specifications, team experience as well as practicality.

### Step 2

Expand All @@ -47,7 +49,7 @@ Applications are officially open. Main focus towards application on Bitcoin Ecos
- Outstanding demos will be selected for the Rooch grant program and will receive additional funding and support.
- Prizes will be distributed to your account during the $ROOCH TGE (Token Generation Event).

## Key resources：
## Key resources：

- Website: https://rooch.network/
- Github: https://github.com/rooch-network
Expand All @@ -56,6 +58,6 @@ Applications are officially open. Main focus towards application on Bitcoin Ecos

### About Rooch Network

Rooch Network is the Native Application Layer for Bitcoin Ecosystem, based on the Stackable L2 solution, serving as the go-to Bitcoin assets launchpad and Bitcoin application infra for users and devs.
Rooch Network is the Native Application Layer for Bitcoin Ecosystem, based on the Stackable L2 solution, serving as the go-to Bitcoin assets launchpad and Bitcoin application infra for users and devs.

**[Website](https://rooch.network/) | [Discord](https://discord.com/invite/rooch) | [Twitter](https://x.com/RoochNetwork) | [Telegram](https://t.me/roochnetwork) | [Github](https://github.com/rooch-network/)**
Loading

0 comments on commit 94d4381

Please sign in to comment.