Repository: cosmicjs/simple-react-blog Branch: main Commit: 016d6cbe9a9a Files: 28 Total size: 41.2 KB Directory structure: gitextract_02v00mju/ ├── .gitignore ├── README.md ├── app/ │ ├── author/ │ │ └── [slug]/ │ │ └── page.tsx │ ├── layout.tsx │ ├── page.tsx │ └── posts/ │ └── [slug]/ │ └── page.tsx ├── components/ │ ├── ArrowLeft.tsx │ ├── ArrowRight.tsx │ ├── AuthorAttribution.tsx │ ├── AuthorAvatar.tsx │ ├── Banner.tsx │ ├── CosmicLogo.tsx │ ├── Footer.tsx │ ├── Header.tsx │ ├── OBMLogo.tsx │ ├── PostCard.tsx │ ├── SiteLogo.tsx │ ├── SuggestedPostCard.tsx │ └── Tag.tsx ├── helpers.ts ├── lib/ │ ├── cosmic.ts │ └── types.ts ├── next.config.js ├── package.json ├── postcss.config.js ├── styles/ │ └── globals.css ├── tailwind.config.js └── tsconfig.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js # testing /coverage # next.js /.next/ /out/ # production /build # misc .DS_Store # debug npm-debug.log* yarn-debug.log* yarn-error.log* # local env files .env.local .env.development.local .env.test.local .env.production.local .env ================================================ FILE: README.md ================================================ # Simple React Blog ![simple-nextjs-blog](https://github.com/cosmicjs/simple-react-blog/assets/1950722/39a1604a-81a3-4d7d-8276-7650ca626ae1) ## NOTE: this repo is now a mirror of the [Simple Next.js Blog](https://github.com/cosmicjs/simple-nextjs-blog) ### [View Demo](https://cosmic-nextjs-blog.vercel.app/) ### React + Next.js + Cosmic This blog uses Next.js to create a React blog. It uses Next.js 13 and the new `app` organization structure which takes advantage of [React Server Components](https://nextjs.org/docs/getting-started/react-essentials#server-components). It connects to the Cosmic API via the [Cosmic JavaScript SDK](https://www.npmjs.com/package/@cosmicjs/sdk). ## Getting Started 1. Log in to Cosmic and install the [Simple Next.js Blog template](https://www.cosmicjs.com/marketplace/templates/simple-nextjs-blog). 2. Run the following commands to install the code locally. ``` git clone https://github.com/cosmicjs/simple-nextjs-blog cd simple-nextjs-blog ``` #### Environment Variables 1. Create an `.env.local` file to gain API access to your Cosmic Bucket. To do this, run: ``` cp .env.example .env.local ``` 2. Find your API access keys at Bucket Settings > API Access after logging into [your Cosmic dashboard](https://app.cosmicjs.com/login) and add them to the `.env.local` file. It should look something like this: ``` NEXT_PUBLIC_COSMIC_BUCKET_SLUG=your-bucket-slug NEXT_PUBLIC_COSMIC_READ_KEY=your-bucket-read-key ``` #### Run in development Install all dependencies and run in development mode. ``` yarn yarn dev ``` Open [http://localhost:3000](http://localhost:3000). ## Deploy to Vercel

Use the following button to deploy to Vercel. You will need to add API accesss keys as environment variables. Find these in Bucket Settings > API Access.

================================================ FILE: app/author/[slug]/page.tsx ================================================ import React from 'react'; import PostCard from '../../../components/PostCard'; import { getAuthor, getAuthorPosts } from '../../../lib/cosmic'; export async function generateMetadata({ params }: { params: { id: string; slug: string } }) { const author = await getAuthor({ params }); return { title: `${author.title} posts | Simple React Blog`, }; } export default async ({ params }: { params: { id: string; slug: string } }) => { const author = await getAuthor({ params }); const posts = await getAuthorPosts({ authorId: author.id }); return (

Posts by {author.title}

{!posts && 'You must add at least one Post to your Bucket'} {posts && posts.map((post) => { return (
); })}
); }; ================================================ FILE: app/layout.tsx ================================================ import React from 'react'; import '../styles/globals.css'; import { getGlobalData } from '../lib/cosmic'; import Generator from 'next/font/local'; import Banner from '../components/Banner'; import Header from '../components/Header'; import Footer from '../components/Footer'; const sans = Generator({ src: '../fonts/Generator-Variable.ttf', variable: '--font-sans', }); export async function generateMetadata() { const siteData = await getGlobalData(); return { title: siteData.metadata.site_title, description: siteData.metadata.site_tag, }; } export default async function RootLayout({ children }: { children: React.ReactNode }) { const siteData = await getGlobalData(); return (
{children}