Code Monkey home page Code Monkey logo

landing's Introduction

Pluto site

The new pluto site.

Build with:

  • NextJS
  • Tailwind
  • styled-jsx (for stuff that can't be achieved with tailwind)
  • MDX (for docs - src/pages/docs)

Dev setup

Prerequisites

Setting up a dev environment

# Get the latest code
git clone https://github.com/plutoniummod/landing.git

# Change into the newly cloned directory
cd landing

# Install dependencies
npm install

# Start the local web server
npm run dev

Translations workflow

  • After any new <FormattedMessage ... /> statements are added, run npm run i18n:extract
  • To auto translate these new messages, run npm run i18n:translate-missing. Ensure a MS cognitive services key is set up as NEXT_TRANSLATION_API_KEY in .env
  • Finally, run npm run i18n:compile, or restart the development server (npm run dev)

Working on the docs

Docs can be found in src/pages/docs.
Most of it is written in markdown, with some additional components (see below).

Creating a new page:

  • You create a src/pages/docs/blah.md page, and it will appear at localhost:3000/docs/blah.
  • Then, edit src/const/sidebar.js to import the page, and add it to the appropiate section.

NOTE:

  • doc pages should always start with a title (h1).
  • index pages are named index.md (not README.md)
  • MDX components should always have a blank line at the start and at the end of the component's content

Docs MDX components

Several components exist outside of the normal markdown syntax for situations where we want UI that can't be achieved with normal markdown.

<Alert />

Example:

<Alert 
  variant="warning" // ... or info, tip, danger.
>

The docs are a work in progress. Feel free to contribute on [GitHub](https://github.com/plutoniummod/site/).

</Alert>

It looks like...
Preview

<Details />

Example:

<Details title="Spoiler"> 

![Img](https://i.imgur.com/ykDtpPU.png)

</Details>

It looks like...
Preview

<Player />

Example:

<Player url="https://youtu.be/0ijMY8FiLSg" />

It looks like...
A video player mate. It supports everything URL react-player does, because it is react-player.

<NavTile />

Example:

<NavTiles>
    <NavTile title="Installing the Plutonium launcher" to="/docs/install/#plutonium-launcher" className="from-blue-500 to-blue-800 ring-blue-400">
        Learn how to install the launcher, which you will use to start playing on any of our clients.
    </NavTile>
</NavTiles>

It looks like...

<Redirect />

Use this to redirect to a different page.

Example:

<Redirect to="/docs/modding/" />

It looks like...
N/A

landing's People

Contributors

chxseh avatar jariz avatar resxt avatar dss0 avatar 3ldor avatar xerxes-at avatar mrandroidpw avatar rektinator avatar tkdguy avatar djenzo74 avatar dscreet avatar xensik avatar freethetech101 avatar rev4n1 avatar cryozyme avatar diamante0018 avatar mythical-github avatar nateparkerproductions avatar conphas221 avatar infinitumnauseam avatar fabyanmikhael avatar mjkzy avatar shit-ware avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.