Welcome

MKX SpaceHub is a simple documentation website that offers both basic and extended resources for systems administration and web development. It features tutorials that guide users through essential concepts, code snippets that provide quick solutions, and gists for sharing reusable code. The site also includes user guides for various projects, too!

Learn more about The SpaceHub Project.

Guides

Advanced tips, guides and best practices for mitigating issues. Take me there.

The Universe

Discover fascinating facts about the universe starting from our Solar System.

Motivation

MKX SpaceHub is part of an internal collaboration within the Kitiplex organization, designed and maintained by @mkeithX. The project aims to create an intuitive Knowledge Base Portal using powerful, low-maintenance technology, ensuring that content remains both accessible and reliable.

The website is built using Docusaurus, a popular static site generator known for its ease of use and flexibility. The site’s source code is available on GitHub, and it is also hosted on Cloudflare, ensuring fast and reliable performance with enhanced security features.

Live Editor

Test your React using the Interactive Code Editor:

https://mkeithx.pages.dev

Live Editor

const project = 'The SpaceHub Project';

const Greeting = () => <p>Introducing <br></br> {project}</p>;

render(<Greeting />);

Result

Loading...

Samples

Real-Time Clock

Displays the current time and updates every second. It uses useState to manage the time state and useEffect to set up and clean up a timer for real-time updates.

function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}
render(Clock)

Enhanced Clock

Showing both 24-hour and 12-hour formats.

function Clock(props) {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return () => clearInterval(timerID); // Cleanup timer on unmount
  }, []); // Add empty dependency array for one-time setup

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h4>
        Date: {date.toLocaleDateString()}, {date.toLocaleDateString(undefined, { weekday: "long" })}
      </h4>
      <h4>
        Time: {date.toLocaleTimeString([], { hour12: false })} · {date.toLocaleTimeString([])}
      </h4>
    </div>
  );
}

render(<Clock />);

Likes Counter

A simple component that allows users to increase a like count.

const LikeButton = (props: Props) => {
  const [likes, increaseLikes] = React.useState<number>(0);
  
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <h3 style={{
        background: 'darkslateblue',
        color: 'white',
        padding: 8,
        borderRadius: 4,
        textAlign: 'center', // Center text within the h3
      }}>
        {props.label} {likes} Likes
      </h3>
      <button
        className="button button--md button--danger"
        onClick={() => increaseLikes(c => c + 1)}
      >
        {"🤍"}
      </button>
    </div>
  );
};

render(<LikeButton/>);

Likes/Dislikes

Counts for likes and dislikes using useState

const LikeDislikeButton = (props: Props) => {
  const [likes, setLikes] = React.useState<number>(0);
  const [dislikes, setDislikes] = React.useState<number>(0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <h3 style={{
        background: 'darkslateblue',
        color: 'white',
        padding: 8,
        borderRadius: 4,
        textAlign: 'center',
      }}>
        {props.label} {likes} Likes | {dislikes} Dislikes
      </h3>
      <div>
        <button
          className="button button--md button--outline button--success"
          onClick={() => setLikes(likes + 1)}
          style={{ marginRight: 8 }} // Add gap between buttons
        >
          👍
        </button>
        <button
          className="button button--md button--outline button--danger"
          onClick={() => setDislikes(dislikes + 1)}
        >
          👎
        </button>
      </div>
    </div>
  );
};

render(<LikeDislikeButton/>);

Something missing?

Report a Bug

If you find issues or inconsistencies with the documentation or have suggestions on how to improve the project, please file an issue.

Request a Feature

For new feature requests, you can create a post through the feature requests board. Your ideas are welcome for this project!

Important

Please note that the site is constantly updating, and all content is a work in progress. Some features may not function as intended if used incorrectly. Its highly encouraged to proceed with caution and use the resources at your own discretion.