Skip to content

Commit

Permalink
refactor: move osc-docs to website page
Browse files Browse the repository at this point in the history
  • Loading branch information
zeim839 committed Sep 17, 2024
1 parent 97cea95 commit 9cf74e2
Show file tree
Hide file tree
Showing 36 changed files with 818 additions and 54 deletions.
6 changes: 6 additions & 0 deletions docs/website/docs-ufosc/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"position": 3,
"label": "Documentation Site",
"collapsible": true,
"collapsed": false,
}
143 changes: 143 additions & 0 deletions docs/website/docs-ufosc/docusaurus.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
---
title: Configuring Docusaurus
description: OSC Docs Configuring Docusaurus
sidebar_position: 7
---

# Configuring Docusaurus

This guide discusses modifying the `docusaurus.config.js` file, which includes configurations of the website's features and design template.

## Introduction

The docusaurus.config.js file is a crucial configuration file in a Docusaurus project. It allows you to customize various aspects of your documentation site, including the site metadata, themes, plugins, and more. In this guide, we'll walk you through the essential options you can modify in the docusaurus.config.js file to tailor your Docusaurus project to your needs.

## Prerequisites

Ensure you've installed the project's repository and its dependencies. If not, refer to the [Installation](/docs/website/docs-ufosc/installation) guide.

## Step 1: Locate the docusaurus.config.js File
In your Docusaurus project directory, you'll find the `docusaurus.config.js` file. It's at the root level of your project. Open this file in a text editor of your choice.

## Step 2: Basic Site Configuration

### a. 'title' and 'tagline'

```js title="docusaurus.config.js"
const config = {
title: 'My Documentation Site',
tagline: 'Documentation made easy',
// ... other configuration options ...
}
```

Modify the title and tagline properties to reflect the name and tagline of your documentation site. These will appear in the site header and browser tab.

### b. url and baseUrl

```js title="docusaurus.config.js"
const config = {
// ...
url: 'https://www.example.com',
baseUrl: '/',
// ... other configuration options ...
}
```

Update the url and baseUrl properties to match the URL where you'll host your documentation site. If your site is hosted in a subdirectory, adjust the baseUrl accordingly.

## Step 3: Customize Themes

### a. 'themeConfig'

```js title="docusaurus.config.js"
const config = {
// ...
themeConfig: {
navbar: {
title: 'My Documentation Site',
logo: {
alt: 'My Logo',
src: 'img/logo.png',
},
// ... other navbar options ...
},
// ... other theme configuration options ...
},
}
```

The `themeConfig` option allows you to customize the appearance and behavior of your documentation site. For example, you can modify the navbar's title, logo, and other settings to fit your branding.

## Step 4: Configure the Sidebar

```js title="docusaurus.config.js"
const config = {
// ...
themeConfig: {
sidebar: {
// Sidebar items for the documentation pages
docs: [
{
type: 'doc',
id: 'getting-started',
},
{
type: 'category',
label: 'Tutorials',
items: ['tutorial-1', 'tutorial-2'],
},
],
// ... other sidebar configuration options ...
},
// ... other theme configuration options ...
},
}
```
In the `sidebar` option, you can organize your documentation pages and group them under categories. You can specify individual documentation pages using `type: 'doc'` and `id`, or you can create category-based groups using `type: 'category'`.


## Step 5: Add Plugins (Optional)

```js title="docusaurus.config.js"
const config = {
plugins: [
// Add your plugins here
],
// ... other configuration options ...
}
```

If you want to enhance your documentation site with additional features, you can add plugins. Docusaurus has a rich ecosystem of plugins that you can integrate to extend functionality.

For instance, the OSC Docs website uses the "plugin-content-docs" plugin to create multiple documentation sites (as opposed to the default option of only one). To create a documentation site, first make sure that you've created a subfolder for your project in the 'docs' directory. Then, navigate to the plugins section in docusaurus.config.js and append your desired information into the array:
```js title="docusaurus.config.js"
{
plugins: [
[
'@docusaurus/plugin-content-docs',
{
id: 'website', // a unique ID for your project
path: 'docs/website', // the path to your docs folder
routeBasePath: 'docs/website', // the path on the website's URL
editUrl: 'https://github.com/ufosc/osc-docs'
}
],
]
}
```

## Step 6: Save and Apply Changes

Once you have made the desired modifications to the docusaurus.config.js file, save the changes and close the file.

## Step 7: Preview Your Changes

To see your modifications in action, run the development server (you must open a terminal to the project's root folder):

```bash
npm start
```
Now, open your web browser and navigate to http://localhost:3000 to preview your updated Docusaurus documentation site with the custom configurations.

For more usage documentation, refer to the [Usage](/docs/website/docs-ufosc/usage) section.
100 changes: 100 additions & 0 deletions docs/website/docs-ufosc/installation.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
---
title: Installation
description: OSC Docs Installation
sidebar_position: 2
---

# Installation

## Prerequisites

The OSC Docs project requires certain dependencies to be installed on the user's machine.

### System Development Libraries

If you are using macOS, you will need to install Xcode Command Line Tools. These tools provide essential development libraries and utilities, including Git, which is required for the OSC Docs project and other development tasks.

#### Installing Xcode Command Line Tools:

1. Open Terminal, which can be found in the Utilities folder within the Applications folder, or you can use Spotlight search (Cmd + Space) and type "Terminal" to open it.
2. Enter the following command:
```bash
xcode-select --install
```
3. A dialog will pop up asking you to install the Xcode Command Line Tools. Click "Install" and follow the on-screen instructions.

#### Build Essential (for Linux)

If you are using a Linux distribution, you'll need to ensure you have the `build-essential` package installed. This package includes essential tools for building software on a Linux system, such as compilers and libraries.

For Debian-based distributions (e.g., Ubuntu):
```bash
sudo apt update
sudo apt install build-essential
```

For Red Hat-based distributions (e.g., Fedora):
```bash
sudo dnf groupinstall "Development Tools"
```

For Arch Linux:
```bash
sudo pacman -S base-devel
```

The installation process will depend on your specific Linux distribution. Once build-essential is installed, you'll have the necessary tools for development on your Linux system.

### Git

Git is a version control system that's necessary for installing the project and collaborating with others.

1. Visit the official Git website: https://git-scm.com/downloads
2. Download the installer for your operating system (Windows, macOS, or Linux).
3. Run the installer and follow the on-screen instructions to install Git.

### NodeJS & NPM

The OSC Docs website is built using NodeJS, so you'll need to have it installed prior to running the site.

1. Visit the official Node.js website: https://nodejs.org/
2. Download the LTS (Long-Term Support) version for your operating system.
3. Run the installer and follow the installation instructions.
4. After installation, open your command line (Terminal on macOS/Linux, Command Prompt on Windows) and run the following commands to verify that Node.js and NPM are installed:
```bash
node -v
npm -v
```

### Text Editor

You'll need a text editor to write and modify your Docusaurus project files. Many developers prefer using code editors with syntax highlighting and other useful features.

Some popular text editors and Integrated Development Environments (IDEs) for web development include:

1. Visual Studio Code: https://code.visualstudio.com/
2. Sublime Text: https://www.sublimetext.com/
3. Atom: https://atom.io/
4. JetBrains WebStorm: https://www.jetbrains.com/webstorm/
5. Emacs https://www.gnu.org/software/emacs/ (requires IQ > 160).

Choose the one that suits your preferences and install it on your system.

## Cloning the Repository

Cloning the repository requires having Git installed. 'Cloning' will install a copy of the project. To install OSC Docs on your system, run:

```bash
git clone https://github.com/ufosc/osc-docs.git
```

## Installing Dependencies

To install the project's dependencies, run:

```bash
cd osc-docs
npm i
```

You're now ready to start using the OSC Docs website. Continue to the [Usage](/docs/website/docs-ufosc/usage) to start the development server.
25 changes: 25 additions & 0 deletions docs/website/docs-ufosc/introduction.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
---
title: Introduction
description: ufosc.org
sidebar_position: 1
---

# Introduction

[![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme) ![GitHub Workflow Status (with event)](https://img.shields.io/github/actions/workflow/status/ufosc/osc-docs/node.js.yml) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ![GitHub](https://img.shields.io/github/license/ufosc/osc-docs) ![GitHub issues](https://img.shields.io/github/issues/ufosc/osc-docs)

The OSC Docs website is a source of truth for projects and club activity at the University of Florida's Open Source Club. More specifically, it hosts user and developer documentation for the various projects started each semester. This project uses [Docusaurus](https://docusaurus.io/) to quickly and conveniently generate static sites from [Markdown](https://www.markdownguide.org/basic-syntax/) files.

Unlike the [main OSC website](https://ufosc.org), the docs website emphasizes content delivery, accessibility, and ease of content creation (especially for non-technical users). This is beyond the capabilities and scope of the main site's native content management system, hence the need for a separate documentation site.

The source code is available on the Open Source Club's [GitHub page](https://github.com/ufosc) under the [AGLP-3.0-or-later](https://spdx.org/licenses/AGPL-3.0-or-later) license, and the site is hosted at [docs.ufosc.org](https://docs.ufosc.org). To get started with contributing to the osc docs, start by [installing the project](/docs/website/docs-ufosc/installation).

<hr />

## Index
* [Installation](/docs/website/docs-ufosc/installation): Instructions on installing the project and its dependencies.
* [Usage](/docs/website/docs-ufosc/usage): Instructions on setting up a local development server and using the project.
* [Markdown](/docs/website/docs-ufosc/markdown): Introduction to the Markdown language.
* [Documentation](/docs/website/docs-ufosc/writingdocs): Creating documentation sites and managing their contents.
* [Static Pages](/docs/website/docs-ufosc/static-pages): Guide to creating non-documentation static pages.
* [Configuring Docusaurus](/docs/website/docs-ufosc/docusaurus): Guide to modifying the Docusaurus website template.
Loading

0 comments on commit 9cf74e2

Please sign in to comment.