Wikipiki is a simple implementation of a (private) wiki made in Next.js, intended for displaying Markdown-formatted hypertext to a specific group of people. It uses MongoDB for storing the articles for the site and Auth0's auth0-nextjs
for handling authentication.
The app is relatively functional, but I consider it to be in an experimental state as I add more base features to it and fix any bugs the app might have.
Setting up the app is fairly straightforward:
-
Get a Auth0 account and configure a tenant.
-
Create a role named
Administrators
within your tenant and add at least one user to it. -
In order for the backend to get the roles a user belongs to, go to Auth Pipeline > Rules in your dashboard, click the Create button, use the Empty rule template and paste this code.
function (user, context, callback) { const assignedRoles = (context.authorization || {}).roles; let idTokenClaims = context.idToken || {}; idTokenClaims[`https://myapp/role`] = assignedRoles; context.idToken = idTokenClaims; return callback(null, user, context); }
-
-
Clone the repo.
-
Set up the following environment variables:
MONGODB_URI
: The location of your MongoDB database.AUTH0_SECRET
: A random secret for your Auth0 session cookie. It is optional, but I recommend using it. You can usenode -e "console.log(crypto.randomBytes(32).toString('hex'))"
for generating one.AUTH0_BASE_URL
: The base URL for your app (e.g. http://localhost:3000 or https://mywiki.vercel.app)AUTH0_ISSUER_BASE_URL
: The URL of your Auth0 tenant.AUTH0_CLIENT_ID
: The client ID for your Auth0 app.AUTH0_CLIENT_SECRET
: The secret for your client.START_ARTICLE
: The article the app loads when the user lands on/
.
-
Build the project with
next build
and run the app withnext run
. If what you want to do is playing with the code, run insteadnext dev
for running it in development mode. If you want to, you can use Vercel to deploy the app to the cloud and make it available for everyone you wish.
Upon loading the app on /
, you'll be greeted with the Auth0 login page. Once you've logged in, the browser will show you to the main article you configured in START_ARTICLE
.
Every article must be a document located in the wikipiki
collection, using the following schema:
{
"title": "The title of your article",
"content": "Lorem ipsum, dolor sit amet..."
}
You can use Markdown tags in content
as you please. For LaTeX equations, use $
and $$
for inline or display equations, respectively. The code you input can also be syntax highlighted by specifying the language:
~~~javascript
console.log('Hi, mom!');
~~~
If you want to link an article or URI, you can do it in the following ways:
- Outgoing URI:
[Caption](https://example.com/contact)
- Absolute URI:
[Caption](/stats)
- Link to article:
[Caption](Compilers and interpreters)
(you don't need to escape the spaces; use them as is)
The app is designed to work with two types of users: readers (regular users) and administrators. Readers may only log in to the wiki and read every article in it, whereas administrators may also edit existing articles. At the moment, creating users and making them administrators is only possible through the Auth0 dashboard.
- Search articles
- Better hyperlinks
- An article editor for administrators
- Create and rename articles within the app
- User management dashboard for readers and administrators
- Responsive UI
- i18n support