- Moonarr
- 👤 Biography
- 🦾 Which technologies and packages does it use ?
- 🏁 Getting Start
- 🚧 Development & Deployment
- 🗪 FAQ and known issues
- What's happens if i don't have a readme profile project ?
- What does i need to do if after repository creation and pushing modification, my readme won't load to my profile ?
- Why does when i create a project from scratch using Moonarr, add content and click to push, the project GitHub was created but without
README.md(and so it doesn't showed in my profile) ? - Why does when i switch to another tabs, and come back to moonarr, all my changes are reset ?
- How can I suggest a new module ?
Moonar is an open-source website, to help user to customize his own profile readme, without writing any markdown line !
This project is called Moonarr because the Moon is a beautiful and powerful entity.
Tip
Also because design a Moon is easier than an octopus 😉
Our goal with this website is to provide for anyone a solution to get a beautiful Readme for your profile, easier than expected. 🔥
Note
⭐️ Doesn't forget to give a star if your like this project ! ⭐️
| dark mode | light mode |
|---|---|
 |
 |
Theses logos are made with ❤️ using Adobe Illustator
Moonarr version use Semantic Versioning format.
Note
Moonarr version <1.0.0 is an Alpha and under developement
Next.js is an open-source framework, powered by ⚛︎ React.js and node.js. Next Documentation here
Tailwind CSS is a CSS framework for rapidly building modern websites without ever leaving your HTML. Tailwind CSS Documentation here
Next-auth is an open-source authentication librabry designed for next.js. Its goal here is to give microsoft entra id authentication. NextAuth.js Documentation here
Lexkit is a Rich text package, with shortkey, text formatting and HTML and Readme handler. Lexkit Documentation here
Shadcnui is a set of many customizable components. Shadcnui Documentation here
JollyUi is a set of many customizable Shadcnui Based components. Jollyui Documentation here
No prerequisites needed ! Just a GitHub account 😉
Note
All incommming screenshot are take with version 0.4.0, it might be a little bit different of your view.
- Go to Moonarr Website
- Click at the top right corner and Sign In with your GitHub Credentials
Note
If it's the first time you login to this application, you need to accept asked rights.
Theses rights is useful to use this application. One of the main features need your accessToken, with ability to write and create repository GitHub.
- If you are not already, go to the Edit page
This is the Edition page. With this page, we have a lot of feature to help to modify and improve your README.md
- Emoji Picker
- Marketplace Module
- Text formatting
- Shortcut key
- Download README
- Push README to your GitHub Profile
We can split this view in three part as below.
| Red Section | Green Section | Blue Section |
|---|---|---|
| Emoji Picker | Edition and Preview | Marketplace |
There is a lot of text formatting (without writing in markdown). Follow to previous image (from left to right):
- Bold
- Italic
- Underline
- Stroke
- Inline Code
- Link (here is disabled because it need selected text to be enabled)
- Paragraph (choose between paragraph and different titles type)
- Bullet list
- Numbered list
- Image (From Url only - online image)
- Table
- Horizontal Separation
- HTML Embed (not recommanded to beginner)
Next ones is useful but there is not text formatting. Theses are explained in Shortcut key section
Note
Block code is missing, it will be added in the future
As explained in Text formatting section, there are several other button in the toolbar
- Undo ~
Ctrl + Z(Remove last changes) - Redo ~
Ctrl + Y(Add back last removed changes) - Command Palette ~
Ctrl + Shift + P(Open help guide for command chortcut key)
Others shortcut key can be find in the Command Palette
Emoji Picker ~ Close View
Emoji Picker ~ Open View
The Emoji Picker will help you to find the best emoji to rich your texts. You can use the search bar, or also use the categories. Simply click to an emoji to add it to the editor.
Marketplace is an aera with a lot of module, that you can add to your readme.
- Go to GitHub
- Go to Settings
- Scroll down to Developer settings and click
- Next, click to OAuth Apps -> New OAuth App
- Put your Application name
- Put your Homepage URL
- Put the Authorization callback URL, which is your hostname with
/api/auth/callback/githubat the end, so for example for moonarr (https://moonarr.vercel.app), it'shttps://moonarr.vercel.app/api/auth/callback/github - CONFIRM
- Keep the client ID
- Generate a new client secret and keep it, we need client ID and client secret later.
Tip
It's recommanded to have different OAuth App for each stages : production, test, development...
- Clone or rename
.env.exampleto.env - Add required values :
AUTH_GITHUB_CLIENT_ID, the client id for your GitHub ProviderAUTH_GITHUB_CLIENT_SECRET, the client id for your GitHub ProviderNEXTAUTH_URL, The URL of your application. http://localhost:3000 if you run locally for example.NEXTAUTH_SECRET, makenpx authoropenssl rand -base64 32
Note
The client id and client secret of your GitHub Provider is the both one generated at the previous step
git clone https://github.com/FlizzerMDX/Moonarr.gitMove to Moonarr
cd MoonarrInstall dependencies
npm iNote
npm i stand for npm install. Both command running and do the same thing
Get Vulnerabilities
npm auditSolve vulnerabilities if necessary
npm audit fixTip
Sometimes, npm audit fix isn't enough, and you need to do npm audit fix --force, or to change some dependencies, but BE CAREFUL ! It could break compatibility so be aware.
You need to do the configuration step before continue.
Now, you can run the project with the following command
npm run devThe best way to deploy this project, is to use its image from Dockerhub or GitHub Registry.
Dockerhub
docker pull flizzermdx/moonarr:latest
GitHub Registry
docker pull ghcr.io/flizzermdx/moonarr:latest
docker run --name moonarr -p 3000:3000 -d flizzermdx/moonarr:latest
Note
You can replace flizzermdx/moonarr:latest to ghcr.io/flizzermdx/moonarr:latest if you wanna use image from GitHub Registry
You can also replace latest for version you wanna run
No worries ! If you don't have the project named like your username for example with me FlizzerMDX/FlizzerMDX, with a README.md inside, it's ok ! When you'll be in the /edit page, a message will pop-up and ask you if you wanna create it from scratch or a file
What does i need to do if after repository creation and pushing modification, my readme won't load to my profile ?
It seems to be an issue from GitHub.
Go to your repository which named like your username for example with me FlizzerMDX/FlizzerMDX.
After that, check the message at the top right corner. It suggest to show to your profile. Click
Why does when i create a project from scratch using Moonarr, add content and click to push, the project GitHub was created but without README.md (and so it doesn't showed in my profile) ?
It's a know issue, we work on it. Currently, backend is developed to work only with a readme with content. So modify existing readme or creating a new project from a file will run.
Issue : #7
It's a know issue, we work on it.
Issue : #8
Good question !
You can go to the issue page, click to "New issue", and select "Module Suggestion"
| Raw Text | Preview |
|---|---|
 |
 |
As you can see to theses screenshots, you get the left view with text that you need to modify, here are the following:
- Title : change online the "name"
- In the table, change values in the last raw. If you want to suggest more than one module, add a row next to the latest.
After that, be careful to watch the preview before creating issue, to check if values are visible and if the table is correctly showed as the right screenshot. If it's not and you create it, no worries, just edit it.