Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/thedigitalninja/thedigitalninja-nextjs

A personal website and blog for the domain TheDigital.Ninja, showcasing technical skills and hosting blog posts on various tech topics.
https://github.com/thedigitalninja/thedigitalninja-nextjs

blog nextjs nextjs14 tailwindcss website

Last synced: about 1 month ago
JSON representation

A personal website and blog for the domain TheDigital.Ninja, showcasing technical skills and hosting blog posts on various tech topics.

Host: GitHub
URL: https://github.com/thedigitalninja/thedigitalninja-nextjs
Owner: TheDigitalNinja
License: unlicense
Created: 2024-06-27T02:25:08.000Z (6 months ago)
Default Branch: main
Last Pushed: 2024-07-21T00:58:04.000Z (5 months ago)
Last Synced: 2024-10-12T19:44:45.001Z (2 months ago)
Topics: blog, nextjs, nextjs14, tailwindcss, website
Language: TypeScript
Homepage: https://TheDigital.Ninja
Size: 489 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# TheDigital.Ninja

Welcome to TheDigital.Ninja! This is a personal website and blog for Russell Perkins, showcasing technical skills and hosting blog posts on various tech topics.

[![License: Unlicense](https://img.shields.io/badge/license-Unlicense-blue.svg)](http://unlicense.org/)
[![Cypress E2E Tests](https://github.com/TheDigitalNinja/thedigitalninja-nextjs/actions/workflows/cypress.yml/badge.svg)](https://github.com/TheDigitalNinja/thedigitalninja-nextjs/actions/workflows/cypress.yml)
[![Next.js](https://img.shields.io/badge/Next.js-14.2.4-blueviolet)](https://nextjs.org/)
[![React](https://img.shields.io/badge/React-18-blue)](https://reactjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5-blue)](https://www.typescriptlang.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.4.1-38B2AC?logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
[![Vercel](https://therealsujitk-vercel-badge.vercel.app/?app=thedigitalninja-nextjs)](https://thedigital.ninja)

## Project Overview

- **Name**: thedigitalninja-nextjs
- **Purpose**: Personal website and blog for TheDigital.Ninja
- **Live Site**: [https://TheDigital.Ninja](https://TheDigital.Ninja)

## Key Technologies

- Next.js 14.2.4 with App Router
- TypeScript
- React 18
- Tailwind CSS 3.4.1
- Headless UI 2.1.1
- Firebase Authentication
- gray-matter 4.0.3 (for parsing Markdown front matter)
- marked 13.0.1 (for rendering Markdown)

## Main Features

1. Home page with recent blog posts
2. Blog with individual post pages
3. Responsive design with mobile-friendly navigation
4. Authentication using Firebase (Google Sign-In)
5. About page with my background
6. Resume page

## Project Structure

- `src/`: Main application code
- `src/app/`: Next.js app router pages
- `src/components/`: React components
- `posts/`: Markdown files for blog posts
- `public/`: Static assets
- `styles/`: Global CSS styles
- `src/lib/`: Utility functions and hooks

## Getting Started

1. Clone the repository
```Bash
git clone https://github.com/TheDigitalNinja/thedigitalninja-nextjs.git
```
2. Install dependencies:
```Bash
npm ci
```
3. Run the development server:
```Bash
npm run dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser

## Scripts

| Script | Description |
|-------------------------|-----------------------------------------------------------------------------|
| `npm run dev` | Start development server |
| `npm run build` | Build the production application |
| `npm start` | Start the production server |
| `npm run lint` | Run ESLint |
| `npm run test` | Start dev server and run Cypress end-to-end tests |
| `npm run cypress:run` | Run Cypress end-to-end tests (assuming you have the dev server already running) |
| `npm run cypress:dev` | Open Cypress in development mode |
| `npm run cypress:open` | Open Cypress run tests interactively (assuming the development server is already running) |
| `npm run package-code` | Create a copy of the code to be uploaded to a Claude ai project |

## Cypress End-to-End Tests

The project includes comprehensive end-to-end tests using Cypress to ensure the functionality and reliability of the website. The tests are located in the `cypress/e2e/` directory and are configured in `cypress.config.ts`.

### Running Tests

To run the Cypress tests, use the following scripts:

- `npm run test`: Start the development server and run all Cypress end-to-end tests.
- `npm run cypress:run`: Run all Cypress end-to-end tests (assuming the development server is already running).
- `npm run cypress:dev`: Open Cypress in development mode to run tests interactively.
- `npm run cypress:open`: Open Cypress run tests interactively (assuming the development server is already running).

## Deployment

The project is automatically deployed to Vercel upon pushes to the main branch.

## IndexNow CLI

This project includes a simple CLI tool for submitting URLs to the [IndexNow API](https://www.bing.com/indexnow/), allowing quick indexing of new or updated content.

Usage:
```Bash
node index-now.js
```

Example:
```Bash
node index-now.js https://TheDigital.Ninja/blog/your-new-post
```

## Contributing

This is a personal project, but if you notice any issues or have suggestions, please feel free to open an issue or submit a pull request.

## License

This project is released under the Unlicense. See the [LICENSE](LICENSE) file for details.