Luna Site

Basics

This is a Next.js project bootstrapped with create-next-app. First, run the development server:

npm run dev
# or
yarn dev

To deploy and start the server run:

npm run build
npm run start
# or
yarn build
yarn start

1. Bio

You can edit your bio in the pages/index.jsx.
Note that you shouldn't edit anything outside of the div showed bellow because this could break the sites design.

<div className={style.readme}>
    { /* Put your bio here */ }
</div>

2. Cards

Cards are here to display your various projects. You can set these in the config.js in the cards Array.
Here is an example how the each card could look like:

{
    name: "discord-botlist.eu",
    icon: "https://cdn.discord-botlist.eu/pictures/logo.png",
    description: "We give you the ability to apply and give your bot a page on our site.",
    url: "https://discord-botlist.eu",
    position: "Moderator",
    bot: 0
}

With the bot variable you can show off if it's a discord bot or not. 1 is a normal bot and 2 would be a verified discord bot.
Please note that cards should not be an Object(!), it needs to be an Array with the structure in it showed above.

3a. Use static data

If you don't want to use an API, just go to the config.js and set both api.url and api.path to null.
In the next step enter your user data in the user Object.

Here is an example how the config.js could look like at this point:

module.exports = {
    api: {
        url: null,
        path: null
    },
    user: {
        id: "821472922140803112",
        username: "Lunish",
        discriminator: "8888",
        nickname: "Luna",
        nickavatar: "https://cdn.waya.one/r/luna_lone1.gif",
        status: {
            state: {
                text: "dnd",
                color: "#ED4245"
            },
            emote: "https://cdn.discordapp.com/emojis/682858108862726191.gif?size=2048",
            text: "waya.one • Stressed out"
        },
        activities: [],
        createdTimestamp: 1615924806867,
        avatar: "https://cdn.waya.one/r/luna_lone1.gif",
        banner: "https://cdn.waya.one/r/sunset.gif",
        accentColor: "#ce3760"
    }
}

3b. Use an API

The best way to use this website is using an internal-API.
You can set the API URL in the config.js, please note that this should be only the domain name with the protocol like https://api.waya.one. The URL should not have the path in it like https://api.waya.one/ or https://api.waya.one/luna!

In the config.js you also need to set the PATH after the domain name. If you want to use the root domain just paste a / in there, otherwise put the full path in there for example /luna. At the end the URL plus the PATH together should look like [domain][path] (eg.: https://waya.one/luna).

The API needs to acknowledge the request with a http 200 status code in order to work. I personally recommend you also to fill in the user Object in case that the API should not respond.
A code example/template for the API can be found in the gist here.

The API should respond with a JSON structure that looks like this:

{
    "status": 200,
    "message": "OK",
    "content": {
        "id": "821472922140803112",
        "username": "Lunish",
        "discriminator": "8888",
        "nickname": "Luna",
        "nickavatar": "https://cdn.discordapp.com/avatars/821472922140803112/a_5225c26456cd6d1d03b5f6af645d2488.gif?size=2048",
        "status": {
            "state": {
                "text": "dnd",
                "color": "#ED4245"
            },
            "emote": "https://cdn.discordapp.com/emojis/682858108862726191.gif?size=2048",
            "text": "waya.one • Stressed out"
        },
        "activities": [
            {
                "applicationId": "782685898163617802",
                "name": "Code",
                "url": null,
                "details": "Editing Luna site",
                "state": "Work on README.md:44:625",
                "createdTimestamp": 1643993478165,
                "timestamps": {
                    "start": 1643989464309,
                    "end": null
                },
                "assets": {
                    "large": {
                        "text": "Editing a MARKDOWN file",
                        "image": "https://cdn.discordapp.com/app-assets/782685898163617802/810647037598760991.png"
                    },
                    "small": {
                        "text": "Visual Studio Code - Insiders",
                        "image": "https://cdn.discordapp.com/app-assets/782685898163617802/810652286233083974.png"
                    }
                }
            }
        ],
        "createdTimestamp": 1615924806867,
        "avatar": "https://cdn.discordapp.com/avatars/821472922140803112/a_5225c26456cd6d1d03b5f6af645d2488.gif?size=2048",
        "banner": "https://cdn.discordapp.com/banners/821472922140803112/a_bb8eb557242c1923d82d86cef14bcc4a.gif?size=600",
        "accentColor": "#ffff"
    }
}

4. Header

The header is displayed on every page. It's here to display informations that could be useful everywhere like Icon, name and varius links such as Discord, GitHub and Twitter. To configure this data head over to the config.js once again and go to the header object.

The object should look like this at the end:

header: {
    icon: `https://cdn.waya.one/r/luna_lone1.gif`,
    name: `Luna Seemann`,
    buttons: {
        Discord: `/go/discord`,
        GitHub: `/go/github`,
        Twitter: `/go/twitter`
    }
}

5. Meta tags

Last but not least the meta tags. This are important if other websites like Discord, Twitter or Slack should show informations about your website, in the picture bellow you can see an example how it could look like in Discord.

However, open the config.js for the last time and edit the metadata object. Please note that the keywords value needs to be an Array and the color value a valid hex color!
This is how it could look like:

metadata: {
    title: `Luna - Software Engineer and LGBTQ+ Activist`,
    description: `Heyia, I'm Luna and I was born 14 years ago and live in Austria.`,
    image: `https://avatars.githubusercontent.com/u/71079641?v=4`,
    domainName: `waya.one`,
    color: `#f19bec`,
    keywords: [
        'Luna',
        'Lunish',
        'Lunish#8888',
        'waya bot',
        'waya',
        'waya.one',
        'discord waya',
        ],
    }

Support

If you need help don't hesitate to join our discord and ask for help.

Austin-HTTPS/Luna-Site