https://a-really-cool-blog.vercel.app/
A blog site made with NextJS + TailwindCSS
This dynamic blog site represents the forefront of modern web development, utilizing the latest tools and technologies to deliver a cutting-edge user experience. Built with Next.js 13, the site showcases a seamless integration of dynamic and static data handling, offering users a truly dynamic and responsive browsing experience. The fully responsive design, powered by Tailwind CSS, ensures that users can enjoy the site on any device, while the preview mode with Sanity.io allows for easy content management.
Local Setup
- clone or fork the repo onto your computer
- download and install the latest version of node.js(https://nodejs.org/en/) for your Operating System
- using your Command Line navigate to the folder where the files are saved
- run 'npm i' to install all the dependencies
- next run 'npm run dev' to start the server on localhost:3000
How to use for readers
- Click on a blog post to view an article
How to use for admins
- Navigate to https://a-really-cool-blog.vercel.app/studio
- Login with Google authentication
- You now will be in admin Mode with the ability to edit, add, and preview post
- To add a post to the website from the studio click the post section add a new author, title, slug, and description (does support rich text for styling the blog post like an HTML Document) in the post field and click the publish button
- To edit a post to the website from the studio click the post section and select the pencil/pen icon to reopen a post that has been published
- to preview a post before it is published to the client click the post section and change to the preview tab in the editor. it will load a version of the website with your new post without having to publish it to the website first
Packages
heroicons/react: A package providing a collection of free, open-source SVG icons and React components.portabletext/react: A package with React components for rendering rich text content created with the Portable Text format.sanity/image-url: A package with helper functions for transforming and optimizing image URLs from Sanity.io.sanity/vision: A package with a standalone image viewer for Sanity.io.tailwindcss/line-clamp: A package with a utility class for truncating text to a specific number of lines.next: A framework for building server-side rendered React applications.next-sanity: A set of tools and helpers for integrating Sanity.io with Next.js.react: The core React library for building user interfaces with JavaScript.react-dom: A library for rendering React components to the DOM.sanity: A JavaScript client for interacting with the Sanity.io API.sanity-plugin-iframe-pane: A plugin for embedding external web pages or web applications in an iframe within the Sanity.io Studio.styled-components: A package for writing CSS code for your React components using JavaScript.```