From e35d3799f86c143d8a287acf48192ee26cf16de0 Mon Sep 17 00:00:00 2001 From: Pablo Diehl Date: Wed, 23 Oct 2024 09:23:44 -0300 Subject: [PATCH 1/6] feat(templates/next/cosmic-simple-nextjs-blog): New template Add template cosmic-simple-nextjs-blog. --- .../cosmic-simple-nextjs-blog/.env.example | 2 + .../.github/workflows/main.yml | 39 + .../cosmic-simple-nextjs-blog/.gitignore | 36 + .../cosmic-simple-nextjs-blog/.prettierignore | 6 + .../cosmic-simple-nextjs-blog/.prettierrc | 9 + .../cosmic-simple-nextjs-blog/README.md | 55 + .../app/author/[slug]/page.tsx | 27 + .../cosmic-simple-nextjs-blog/app/layout.tsx | 42 + .../cosmic-simple-nextjs-blog/app/page.tsx | 15 + .../app/posts/[slug]/page.tsx | 24 + .../azion.config.mjs | 9 + .../components/AuthorAttribution.tsx | 23 + .../components/AuthorAvatar.tsx | 14 + .../components/Banner.tsx | 19 + .../components/Footer.tsx | 24 + .../components/Header.tsx | 11 + .../components/Loader.tsx | 9 + .../components/PostCard.tsx | 58 + .../components/PostList.tsx | 29 + .../components/SinglePost.tsx | 85 ++ .../components/SuggestedPostCard.tsx | 44 + .../components/Tag.tsx | 15 + .../components/icons/ArrowLeft.tsx | 23 + .../components/icons/ArrowRight.tsx | 23 + .../components/logos/CosmicLogo.tsx | 60 + .../components/logos/OBMLogo.tsx | 36 + .../components/logos/SiteLogo.tsx | 26 + .../fonts/Generator-Variable.ttf | Bin 0 -> 103544 bytes .../cosmic-simple-nextjs-blog/helpers.ts | 58 + .../cosmic-simple-nextjs-blog/info.json | 7 + .../cosmic-simple-nextjs-blog/lib/cosmic.ts | 132 ++ .../cosmic-simple-nextjs-blog/lib/types.ts | 44 + .../cosmic-simple-nextjs-blog/next.config.mjs | 5 + .../cosmic-simple-nextjs-blog/package.json | 31 + .../postcss.config.js | 6 + .../public/favicon.ico | Bin 0 -> 15086 bytes .../styles/globals.css | 17 + .../tailwind.config.js | 19 + .../cosmic-simple-nextjs-blog/tsconfig.json | 25 + .../cosmic-simple-nextjs-blog/yarn.lock | 1354 +++++++++++++++++ 40 files changed, 2461 insertions(+) create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/.env.example create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/.github/workflows/main.yml create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/.gitignore create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/.prettierignore create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/.prettierrc create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/README.md create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/app/author/[slug]/page.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/app/layout.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/app/page.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/app/posts/[slug]/page.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/azion.config.mjs create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/components/AuthorAttribution.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/components/AuthorAvatar.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/components/Banner.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/components/Footer.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/components/Header.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/components/Loader.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/components/PostCard.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/components/PostList.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/components/SinglePost.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/components/SuggestedPostCard.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/components/Tag.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/components/icons/ArrowLeft.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/components/icons/ArrowRight.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/components/logos/CosmicLogo.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/components/logos/OBMLogo.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/components/logos/SiteLogo.tsx create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/fonts/Generator-Variable.ttf create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/helpers.ts create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/info.json create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/lib/cosmic.ts create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/lib/types.ts create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/next.config.mjs create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/package.json create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/postcss.config.js create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/public/favicon.ico create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/styles/globals.css create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/tailwind.config.js create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/tsconfig.json create mode 100644 templates/nextjs/cosmic-simple-nextjs-blog/yarn.lock diff --git a/templates/nextjs/cosmic-simple-nextjs-blog/.env.example b/templates/nextjs/cosmic-simple-nextjs-blog/.env.example new file mode 100644 index 00000000..1dd9ae64 --- /dev/null +++ b/templates/nextjs/cosmic-simple-nextjs-blog/.env.example @@ -0,0 +1,2 @@ +COSMIC_BUCKET_SLUG= +COSMIC_READ_KEY= \ No newline at end of file diff --git a/templates/nextjs/cosmic-simple-nextjs-blog/.github/workflows/main.yml b/templates/nextjs/cosmic-simple-nextjs-blog/.github/workflows/main.yml new file mode 100644 index 00000000..9e2dbb20 --- /dev/null +++ b/templates/nextjs/cosmic-simple-nextjs-blog/.github/workflows/main.yml @@ -0,0 +1,39 @@ +name: Main Edge Deploy + +on: + pull_request: + types: + - closed + branches: + - "main" + +jobs: + deploy: + if: github.event.pull_request.merged == true + runs-on: ubuntu-latest + + permissions: + contents: write + + steps: + - name: Checkout + uses: actions/checkout@v3 + + - name: Use Node.js 18.x + uses: actions/setup-node@v3 + with: + node-version: 18 + + - name: Install NPM dependencies + run: npm i + + - name: Install Azion CLI + run: | + curl -o azionlinux https://downloads.azion.com/linux/x86_64/azion + sudo mv azionlinux /usr/bin/azion + sudo chmod u+x /usr/bin/azion + + - name: Azion Action Deploy + run: | + azion -t ${{ secrets.AZION_PERSONAL_TOKEN }} + azion deploy diff --git a/templates/nextjs/cosmic-simple-nextjs-blog/.gitignore b/templates/nextjs/cosmic-simple-nextjs-blog/.gitignore new file mode 100644 index 00000000..be672212 --- /dev/null +++ b/templates/nextjs/cosmic-simple-nextjs-blog/.gitignore @@ -0,0 +1,36 @@ +# 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 +.vercel + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# azion +.edge +.vulcan + diff --git a/templates/nextjs/cosmic-simple-nextjs-blog/.prettierignore b/templates/nextjs/cosmic-simple-nextjs-blog/.prettierignore new file mode 100644 index 00000000..37f4f0a0 --- /dev/null +++ b/templates/nextjs/cosmic-simple-nextjs-blog/.prettierignore @@ -0,0 +1,6 @@ +.next +next-env.d.ts +node_modules +yarn.lock +package-lock.json +public \ No newline at end of file diff --git a/templates/nextjs/cosmic-simple-nextjs-blog/.prettierrc b/templates/nextjs/cosmic-simple-nextjs-blog/.prettierrc new file mode 100644 index 00000000..bd8ec593 --- /dev/null +++ b/templates/nextjs/cosmic-simple-nextjs-blog/.prettierrc @@ -0,0 +1,9 @@ +{ + "semi": true, + "trailingComma": "es5", + "singleQuote": true, + "printWidth": 80, + "tabWidth": 2, + "useTabs": false, + "endOfLine": "auto" +} diff --git a/templates/nextjs/cosmic-simple-nextjs-blog/README.md b/templates/nextjs/cosmic-simple-nextjs-blog/README.md new file mode 100644 index 00000000..34fa6db6 --- /dev/null +++ b/templates/nextjs/cosmic-simple-nextjs-blog/README.md @@ -0,0 +1,55 @@ +# Simple Next.js Blog + +![simple-nextjs-blog](https://github.com/cosmicjs/simple-nextjs-blog/assets/1950722/64b6673a-e25b-4124-93ed-bb57a6a35211) + +### [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 15 and the new [Partial Prerendering](https://vercel.com/blog/partial-prerendering-with-next-js-creating-a-new-default-rendering-model) to optimize performance and user experience. It connects to the Cosmic API via the [Cosmic JavaScript SDK](https://www.npmjs.com/package/@cosmicjs/sdk). + +### Opimized for speed and performance +simple-next-blog + +## 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: + +``` +COSMIC_BUCKET_SLUG=your-bucket-slug +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.

+

+ +

diff --git a/templates/nextjs/cosmic-simple-nextjs-blog/app/author/[slug]/page.tsx b/templates/nextjs/cosmic-simple-nextjs-blog/app/author/[slug]/page.tsx new file mode 100644 index 00000000..afda0b41 --- /dev/null +++ b/templates/nextjs/cosmic-simple-nextjs-blog/app/author/[slug]/page.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { getAuthor } from '../../../lib/cosmic'; +import { PostList } from '../../../components/PostList'; +import { Loader } from '../../../components/Loader'; +import { Suspense } from 'react'; + +export async function generateMetadata({ + params, +}: { + params: { id: string; slug: string }; +}) { + const author = await getAuthor(params.slug); + return { + title: `${author.title} posts | Simple Next.js Blog`, + }; +} + +export default async ({ params }: { params: { slug: string } }) => { + return ( +
+ }> + + +
+ ); +}; +export const revalidate = 60; diff --git a/templates/nextjs/cosmic-simple-nextjs-blog/app/layout.tsx b/templates/nextjs/cosmic-simple-nextjs-blog/app/layout.tsx new file mode 100644 index 00000000..25aec81e --- /dev/null +++ b/templates/nextjs/cosmic-simple-nextjs-blog/app/layout.tsx @@ -0,0 +1,42 @@ +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} +