-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: move osc-docs to website page
- Loading branch information
Showing
36 changed files
with
818 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{ | ||
"position": 3, | ||
"label": "Documentation Site", | ||
"collapsible": true, | ||
"collapsed": false, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
Oops, something went wrong.