MAGICGrants/campaign-site
1
0
Fork 0
mirror of https://github.com/MAGICGrants/campaign-site.git synced 2026-01-09 12:27:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

add a lot of content and show some of it

Browse Source
This commit is contained in:
Paul Miller
2022-04-02 16:07:34 -05:00
parent dfb7f86fdc
commit c689321202
13 changed files with 130 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/BackToGrants.tsx
View File

@@ -1,19 +0,0 @@
import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import Link from "next/link"
const BackToGrants = () => {
return (
<div className="flex items-center pb-4">
<FontAwesomeIcon
icon={faArrowLeft}
className="mr-1 w-4 h-4 text-primary"
/>
<Link href="/projects">
<a className="text-primary">Back to grants</a>
</Link>
</div >
)
}
export default BackToGrants

2
components/Header.tsx
View File

@@ -21,7 +21,7 @@ const Header = () => {
<nav>
<ul className="flex flex-col sm:flex-row gap-4">
<li><Link href="/projects"><a>Projects</a></Link></li>
<li>List Your Project</li>
<li><Link href="/apply"><a>List Your Project</a></Link></li>
<li><Link href="/faq"><a>FAQ</a></Link></li>
<li><Link href="/about"><a>About Us</a></Link></li>
</ul>

7
components/Layout.tsx
View File

@@ -7,14 +7,14 @@ import Link from 'next/link'
const Layout: React.FC = ({ children }) => {
return (
<>
<div className="min-h-screen flex flex-col">
<Head>
<title>OpenSats</title>
<meta name="description" content="TKTK" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Navbar />
<main>{children}</main>
<main className="flex-1 flex flex-col">{children}</main>
<footer className="flex justify-between p-4 md:p-8 bg-light">
<div className="flex flex-col">
<strong>© Open Sats Initiative, 2022</strong>
@@ -31,9 +31,8 @@ const Layout: React.FC = ({ children }) => {
/>
</div>
</Link>
</footer>
</>
</div>
)
}

43
components/ProjectCard.tsx
View File

@@ -1,18 +1,21 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Image from "next/image";
import waffledog from "../public/waffledog.jpg";
import { faGithub } from "@fortawesome/free-brands-svg-icons";
import { faTwitter } from "@fortawesome/free-brands-svg-icons";
import Link from "next/link";
import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
const ProjectCard = () => {
import { ProjectItem } from "../utils/types";
const ProjectCard: React.FC<{ project: ProjectItem }> = ({ project }) => {
console.log("project:", project)
const { slug, title, summary, coverImage, git, twitter } = project;
return (
<figure className=" bg-white space-y-4 border border-lightgray rounded-xl">
<div className="relative h-64">
<Image
alt="waffledog"
src={waffledog}
alt={title}
src={coverImage}
layout="fill"
objectFit="cover"
objectPosition="50% 50%"
@@ -21,32 +24,36 @@ const ProjectCard = () => {
</div>
<figcaption className="p-4 space-y-4">
<h2>Double-spend problem</h2>
<p>by <a href="#">@futurepaul</a></p>
<h2>{title}</h2>
<p>by{" "}
<Link href={`https://github.com/${git}`} passHref>
<a>@{git}</a>
</Link>
</p>
<p className="prose">
Bitcoin ipsum dolor sit amet. Digital signature outputs, pizza
hashrate money printer go brrrrr full node, timestamp server. Miner,
sats Merkle Tree proof-of-work hard fork UTXO wallet halvening.
{summary}
</p>
<div className="flex justify-end"></div>
<div className="flex space-x-4">
<Link href="#" passHref>
<Link href={`https://github.com/${git}`} passHref>
<FontAwesomeIcon
icon={faGithub}
className="w-[2rem] h-[2rem] hover:text-primary cursor-pointer"
/>
</Link>
<Link href="#" passHref>
<FontAwesomeIcon
icon={faTwitter}
className="w-[2rem] h-[2rem] hover:text-primary cursor-pointer"
/>
</Link>
{twitter &&
<Link href={`https://twitter.com/${twitter}`} passHref>
<FontAwesomeIcon
icon={faTwitter}
className="w-[2rem] h-[2rem] hover:text-primary cursor-pointer"
/>
</Link>
}
</div>
<div className="flex space-x-4 items-center justify-center pt-4">
<button className="bg-black basis-1/2">Donate</button>
<div className="flex items-center justify-center basis-1/2">
<Link href="/projects/bitcoiner_guide" passHref>
<Link href={`/projects/${slug}`} passHref>
<a>View Details</a>
</Link>
<FontAwesomeIcon
@@ -56,7 +63,7 @@ const ProjectCard = () => {
</div>
</div>
</figcaption>
</figure>
</figure >
);
};

16
components/ProjectList.tsx
View File

@@ -1,11 +1,14 @@
import Image from "next/image";
import waffledog from "../public/waffledog.jpg";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowRight, faC, faClose } from "@fortawesome/free-solid-svg-icons";
import ProjectCard from "./ProjectCard";
import Link from "next/link";
const ProjectList = ({ header = "Explore Projects" }) => {
const projects = ["one", "two", "three"];
import { ProjectItem } from "../utils/types";
type ProjectListProps = {
header?: string;
projects: ProjectItem[];
}
const ProjectList: React.FC<ProjectListProps> = ({ header = "Explore Projects", projects }) => {
return (
<section className="p-4 md:p-8 bg-light flex flex-col items-center">
@@ -20,9 +23,9 @@ const ProjectList = ({ header = "Explore Projects" }) => {
</div>
</div>
<ul className="grid md:grid-cols-3 gap-4 max-w-5xl">
{projects.map((p, i) => (
{projects.slice(0, 3).map((p, i) => (
<li key={i} className="">
<ProjectCard />
<ProjectCard project={p} />
</li>
))}
</ul>
@@ -30,4 +33,5 @@ const ProjectList = ({ header = "Explore Projects" }) => {
);
};
export default ProjectList;

12
docs/projects/bitcoiner_guide.md
View File

@@ -1,10 +1,12 @@
---
title: 'Bitcoiner.guide'
summary: 'Bitcoiner.Guide is a collection of resources by BitcoinQnA to help people feel more comfortable interacting with bitcoin in a sovereign way. '
coverImage: '/public/waffledog.jpg'
git:
handle: '@BitcoinQ_A'
url: 'https://github.com/BitcoinQnA'
summary: 'Bitcoiner.Guide is a collection of resources by BitcoinQnA to help people feel more comfortable interacting with bitcoin in a sovereign way.'
nym: 'Bitcoin QnA'
website: ''
coverImage: '/img/placeholder.jpg'
git: 'BitcoinQ_A'
twitter: BitcoinQ_A
type: 'Educator'
---
## About this project

7
pages/apply.tsx
View File

@@ -1,3 +1,8 @@
export default function Apply() {
return <h1>apply!</h1>
return <div className="flex-1 flex flex-col items-center justify-center gap-4 py-8">
<h1>Apply!</h1>
<div>
<a href="mailto:info@opensats.org">info@opensats.org</a>
</div>
</div>
}

19
pages/index.tsx
View File

@@ -6,8 +6,10 @@ import PaymentModal from "../components/PaymentModal";
import Link from "next/link";
import Image from "next/image";
import unicorn from "/public/heroes/unicorn.png"
import { getAllPosts, getPostBySlug } from "../utils/md";
import markdownToHtml from "../utils/markdownToHtml";
const Home: NextPage = () => {
const Home: NextPage<{ projects: any }> = ({ projects }) => {
const [modalOpen, setModalOpen] = useState(false);
function closeModal() {
@@ -32,14 +34,14 @@ const Home: NextPage = () => {
<button role={"button"} onClick={() => setModalOpen(true)}>
Donate to Bitcoin
</button>
<p>Are you an open source contributor? <a href="#">Apply for your project to be listed.</a></p>
<p>Are you an open source contributor? <Link href="/apply"><a>Apply for your project to be listed.</a></Link></p>
</div>
<div className="flex-1 flex justify-center">
<Image width={388} height={388} src={unicorn} alt="Unicorn" />
</div>
</section>
<ProjectList />
<ProjectList projects={projects} />
</main>
<PaymentModal isOpen={modalOpen} onRequestClose={closeModal} />
</>
@@ -47,3 +49,14 @@ const Home: NextPage = () => {
};
export default Home;
export async function getStaticProps({ params }: { params: any }) {
const projects = getAllPosts(['slug', 'title', 'summary', 'website', 'coverImage', 'git', 'twitter'])
return {
props: {
projects
},
}
}

58
pages/projects/[slug].tsx
View File

@@ -3,15 +3,23 @@ import ErrorPage from 'next/error'
import { getPostBySlug, getAllPosts } from '../../utils/md'
import markdownToHtml from '../../utils/markdownToHtml'
import markdownStyles from "../../components/markdown-styles.module.css"
import waffledog from "../../public/waffledog.jpg";
import Image from "next/image";
import ProjectList from '../../components/ProjectList'
import BackToGrants from '../../components/BackToGrants'
import BackToProjects from '../../components/BackToProjects'
import { ProjectItem } from '../../utils/types'
import { NextPage } from 'next/types'
export default function Project({ post }: { post: ProjectItem }) {
type SingleProjectPageProps = {
project: ProjectItem;
projects: ProjectItem[];
}
const Project: NextPage<SingleProjectPageProps> = ({ project, projects }) => {
const router = useRouter()
if (!router.isFallback && !post?.slug) {
const { slug, title, summary, coverImage, git, twitter, content } = project;
if (!router.isFallback && !slug) {
return <ErrorPage statusCode={404} />
}
return (
@@ -19,8 +27,8 @@ export default function Project({ post }: { post: ProjectItem }) {
<div className="flex flex-col items-center">
<div className="h-[15rem] w-full relative">
<Image
alt="waffledog"
src={waffledog}
alt={title}
src={coverImage}
layout="fill"
objectFit="cover"
objectPosition="50% 50%"
@@ -30,35 +38,40 @@ export default function Project({ post }: { post: ProjectItem }) {
</div>
<div className="flex w-full p-4 py-8 md:px-8">
<BackToGrants />
<BackToProjects />
</div>
<article className="px-4 md:px-8 pb-8 lg:flex lg:flex-row-reverse lg:items-start">
<aside className="p-4 bg-light rounded-xl flex lg:flex-col gap-4 min-w-[20rem] justify-between mb-8">
<div>
<h5>Raised</h5>
<h4>1.289 BTC</h4>
<h4>??? BTC</h4>
</div>
<button>Donate</button>
</aside>
<div className={markdownStyles['markdown']}>
<h1>{post.title}</h1>
<p>{post.summary}</p>
<p>by <a href={post.git.url}>{post.git.handle}</a></p>
<h1>{title}</h1>
<p>{summary}</p>
<p>by <a href={`https://github.com/${git}`}>{`@${git}`}</a></p>
<hr />
<div
dangerouslySetInnerHTML={{ __html: post.content }}
/>
{content &&
<div
dangerouslySetInnerHTML={{ __html: content }}
/>
}
</div>
</article>
</div>
<ProjectList header="You might also like..." />
</div >
<ProjectList projects={projects} header="You might also like..." />
</>
)
}
export default Project
export async function getStaticProps({ params }: { params: any }) {
const post = getPostBySlug(params.slug, [
'title',
@@ -68,29 +81,36 @@ export async function getStaticProps({ params }: { params: any }) {
'content',
'coverImage',
])
const projects = getAllPosts(['slug', 'title', 'summary', 'website', 'coverImage', 'git', 'twitter'])
const content = await markdownToHtml(post.content || '')
return {
props: {
post: {
project: {
...post,
content,
},
projects
},
}
}
export async function getStaticPaths() {
const posts = getAllPosts(['slug'])
const posts = getAllPosts(['slug']);
console.log(posts);
return {
paths: posts.map((post) => {
return {
params: {
project: post,
slug: post.slug,
},
}
}),
fallback: false,
}
}
}

21
pages/projects/index.tsx
View File

@@ -6,15 +6,18 @@ import PaymentModal from "../../components/PaymentModal";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowRight, faC, faClose } from "@fortawesome/free-solid-svg-icons";
import ProjectCard from "../../components/ProjectCard";
import { ProjectItem } from "../../utils/types";
import { getAllPosts } from "../../utils/md";
import markdownToHtml from "../../utils/markdownToHtml";
const Projects: NextPage = () => {
const AllProjects: NextPage<{ projects: ProjectItem[] }> = ({ projects }) => {
const [modalOpen, setModalOpen] = useState(false);
function closeModal() {
setModalOpen(false);
}
const projects = ["one", "two", "three", "one", "two", "three", "one", "two", "three"];
// const projects = ["one", "two", "three", "one", "two", "three", "one", "two", "three"];
return (
<>
@@ -28,7 +31,7 @@ const Projects: NextPage = () => {
<ul className="grid md:grid-cols-3 gap-4 max-w-5xl">
{projects.map((p, i) => (
<li key={i} className="">
<ProjectCard />
<ProjectCard project={p} />
</li>
))}
</ul>
@@ -38,4 +41,14 @@ const Projects: NextPage = () => {
);
};
export default Projects;
export default AllProjects;
export async function getStaticProps({ params }: { params: any }) {
const projects = getAllPosts(['slug', 'title', 'summary', 'website', 'coverImage', 'git', 'twitter'])
return {
props: {
projects
},
}
}

45
pages/projects/test.mdx.ugh
View File

@@ -1,45 +0,0 @@
import Layout from '../../components/Layout'
import BackToGrants from '../../components/BackToGrants'
export const meta = {
title: 'Markdown/MDX with Next.js',
author: 'Lee Robinson'
}
<BackToGrants />
# Bitcoiner.guide
Bitcoiner.Guide is a collection of resources by BitcoinQnA to help people feel more comfortable interacting with bitcoin in a sovereign way.
---
## About this project
Bitcoiner.Guide contains tutorials on all of the following topics and much more….
* A simple Q+A for absolute beginners
* Mobile wallets
* Hardware wallets
* Desktop wallets
* Nodes
* Privacy
* Multisig
* Lightning Network
## Also available is...
* A monthly news index to help people stay up to date with what really matters
* A hosted Matrix room for anyone to join and ask specific questions relating to any of the above
* 1-2-1 support calls for those that require a more personal approach to their learning
export default ({ children }) => {
return (
<div className="p-4 md:p-8 flex-col">
<article>
{children}
</article>
<div className="p-4 border border-black">heyo</div>
</div>)
}

3
utils/md.ts
View File

@@ -13,7 +13,7 @@ export function getSingleFile(path: string) {
return fs.readFileSync(fullPath, 'utf8')
}
export function getPostBySlug<Project>(slug: string, fields: string[] = []) {
export function getPostBySlug(slug: string, fields: string[] = []) {
const realSlug = slug.replace(/\.md$/, '')
const fullPath = join(postsDirectory, `${realSlug}.md`)
const fileContents = fs.readFileSync(fullPath, 'utf8')
@@ -42,5 +42,6 @@ export function getAllPosts(fields: string[] = []) {
const slugs = getPostSlugs()
const posts = slugs
.map((slug) => getPostBySlug(slug, fields))
return posts
}

6
utils/types.ts
View File

@@ -1,8 +1,10 @@
export type ProjectItem = {
slug: string;
content: string;
content?: string;
title: string;
summary: string;
git: { url: string; handle: string };
coverImage: string;
git: string;
twitter?: string;
}