Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juneHQ/changelog
Next.js + MDX changelog app inspired by https://linear.app/changelog
https://github.com/juneHQ/changelog
Last synced: 3 months ago
JSON representation
Next.js + MDX changelog app inspired by https://linear.app/changelog
- Host: GitHub
- URL: https://github.com/juneHQ/changelog
- Owner: juneHQ
- License: mit
- Created: 2023-02-09T16:55:29.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-05-18T20:57:29.000Z (6 months ago)
- Last Synced: 2024-05-18T21:38:54.896Z (6 months ago)
- Language: MDX
- Homepage: https://changelog.june.so
- Size: 2.41 MB
- Stars: 186
- Watchers: 7
- Forks: 36
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.png
- License: LICENSE
Awesome Lists containing this project
README
# Changelog 🚀
Set-up a changelog and share what you ship as easy as 1-2-3. A Next.js blog starter project built with MDX and Chakra UI. Fully-customizable and open source, so don't hesitate to add new features and report bugs!
#### [👉 Visit working demo](https://changelog.june.so)
## Features
- 💅 A stylish changelog
- ⏳ Timeline view
- 📆 Date switcher
- 🧩 Mosaic mode
- 🏄♀️ Smooth transitions
- 🎉 Celebrate your team's achievements with team credits on each post
- ⚙️ Easy-to-use admin panel
👇 Mosaic mode in action below
## Getting started
The easiest way to try this is to run it locally on your computer.
First, you'll need to create your own copy of this code. You can do so by clicking the ["Fork"](https://github.com/juneHQ/changelog/fork) button on GitHub and filling out the form.
Once you've cloned the repository, create a `.env.local` file to setup the environment variables, you can reuse the default variables or change them as you will:
```bash
cp .env.example .env.local
```
Then install dependencies and start the Next.js server:
```bash
# Using yarn
yarn install
yarn dev
# Using npm
npm install
npm run dev
```
## Deploying
You can deploy your blog to any hosting provider that supports Next.js. We recommend [Vercel](https://vercel.com), as it is the easiest way to deploy Next.js apps.
To deploy you'll need to make sure you include the right environment variables. You can find some examples of our environment variables in the [`.env.local.example`](https://github.com/juneHQ/changelog/tree/master/.env.example) file.
## Routes
- `/pages/:pageNumber` - displays paginated articles
- `/` - redirects to `/pages/0`
- `/changelogs/:id` - displays one article
## File structure
```bash
bin # Scripts
components # Reusable components
├─ core
├─ mdx-layout.tsx
└─ ...
lib # Types, theme, utilities, services
pages
├─ changelogs # MDX articles
├─ page
│ └─ [page].tsx # Paginated articles
├─ _app.tsx
└─ _middleware.ts
...
```
## Writing articles
To write a new blog post, create a new `.mdx` file in the `/pages/changelogs` directory.
### Anatomy of an MDX article
MDX is a superset of markdown that lets you write JSX directly in your markdown files. It is a powerful way to add dynamic interactivity, and embed components within your content, helping you to bring your pages to life.
Learn more 👉 [Next.js: Using MDX](https://nextjs.org/docs/advanced-features/using-mdx), [Using MDX](https://mdxjs.com/docs/using-mdx/)
## Managing images and assets
If you start having too many changelogs, you'll want to move your images in an S3 bucket.
To do so you'll need to:
1. Create an S3 bucket for your changelog images
2. Add the bucket name to your `.env` file
3. Make sure you are authenticated to your AWS account and have the `aws` CLI installed
4. Create a `changelog-images` directory in your repository (`mkdir changelog-images`)
5. Run `sync_images.sh` to sync the images from your local to your S3 bucket
You'll need to run the `sync_images.sh` script to sync your local images with your S3 bucket. This script will upload all images in the `/changelog-images` directory to your S3 bucket.
```bash
./sync_images.sh
```
## Branding customization
Most of the branding elements can be found in `` and `` components. To customize these components, update the code in these directories:
- [`components/core/navbar/index.tsx`](https://github.com/juneHQ/changelog/tree/master/components/core/navbar)
- [`components/core/footer/index.tsx`](https://github.com/juneHQ/changelog/tree/master/components/core/footer)