Skip to content

Commit

Permalink
v1 - Configure & Install docs-mobile.talawa.io Docusaurus Site (#2674)
Browse files Browse the repository at this point in the history
  • Loading branch information
palisadoes authored Dec 27, 2024
1 parent 335a366 commit 6533d25
Show file tree
Hide file tree
Showing 44 changed files with 1,673 additions and 3 deletions.
57 changes: 57 additions & 0 deletions .github/workflows/push-deploy-website.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
##############################################################################
##############################################################################
#
# NOTE!
#
# Please read the README.md file in this directory that defines what should
# be placed in this file
#
##############################################################################
##############################################################################

name: PUSH Workflow - Website Deployment

on:
push:
branches:
- 'develop-postgres'

env:
CODECOV_UNIQUE_NAME: CODECOV_UNIQUE_NAME-${{ github.run_id }}-${{ github.run_number }}

jobs:
Deploy-Docusaurus:
name: Deploy https://docs-mobile.talawa.io website
runs-on: ubuntu-latest
# Run only if the develop-postgres branch and not dependabot
if: ${{ github.actor != 'dependabot[bot]' }}
environment:
# This "name" has to be the repos' branch that contains
# the current active website. There must be an entry for
# the same branch in the PalisadoesFoundation's
# "Code and automation > Environments > gigithub-pages"
# menu. The branch "name" must match the branch in the
# "on.push.branches" section at the top of this file
name: develop-postgres
url: https://docs-mobile.talawa.io
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 22
cache: yarn
cache-dependency-path: 'docs/'
- uses: webfactory/[email protected]
with:
ssh-private-key: ${{ secrets.DEPLOY_GITHUB_PAGES }}
- name: Deploy to GitHub Pages
env:
USE_SSH: true
GIT_USER: git
working-directory: ./docs
run: |
git config --global user.email "[email protected]"
git config --global user.name "gh-actions"
yarn install --frozen-lockfile
yarn deploy
3 changes: 0 additions & 3 deletions .github/workflows/push.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,6 @@
name: PUSH Workflow
on:
push:
# branches:
# - develop

branches-ignore:
- 'master'

Expand Down
Empty file added .nojekyll
Empty file.
22 changes: 22 additions & 0 deletions docs/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# Dependencies
/node_modules

# Production
/build

# Generated files
.docusaurus
.cache-loader
.package-lock.json
package-lock.json

# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
1 change: 1 addition & 0 deletions docs/CNAME
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
docs-mobile.talawa.io
176 changes: 176 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
# Talawa Mobile Documentation Website

[![N|Solid](static/img/markdown/misc/logo.png)](https://github.com/PalisadoesFoundation/docs-mobile)

# Installation

This document provides instructions on how to set up and start a running instance of docs-mobile website on your local system. The instructions are written to be followed in sequence so make sure to go through each of them step by step without skipping any sections.

# Table of Contents

<!-- /TOC -->

- [Developer-Docs Installation](#docs-mobile-installation)
- [Table of Contents](#table-of-contents)
- [Prerequisites for Developers](#prerequisites-for-developers)
- [Install node.js](#install-nodejs)
- [Install the Required Packages](#install-the-required-packages)
- [Install Yarn on Windows Using NPM](#install-yarn-on-windows-using-npm)
- [Install Yarn on Windows Using msi File](#install-yarn-on-windows-using-msi-file)
- [Install Yarn on macOS Using NPM](#install-yarn-on-macos-using-npm)
- [Install Yarn on macOS Using Homebrew](#install-yarn-on-macos-using-homebrew)
- [Install Yarn on Linux Using NPM](#install-yarn-on-linux-using-npm)
- [Running the Development Server](#running-the-development-server)
- [Building Static HTML Pages](#building-static-html-pages)

# Prerequisites for Developers

The contents of the `docs-mobile` repo is used to automatically create [the Talawa Mobile Documentation website](https://docs-mobile.talawa.io/). The automation uses [Docusaurus](https://docusaurus.io/docs/), a modern static website generator.

We recommend that you follow these steps before beginning development work in this repository.

## Install the Required Packages

For the package installation, use only the `yarn` package as `npm` will throw an error. Only `npm` use case here would be to install the `yarn` package. Visit the [Docusaurus installation web page](https://docusaurus.io/docs/installation) if you have any difficulties with the steps below.

The steps are simple:

1. If you have previously installed yarn on your local device run the following command to confirm

```terminal
$ yarn -version
```

2. If you don't have yarn installed, follow these steps:

**Note:** Please bear in mind that to install docusaurus in your system, a Node.js version 16.14 or above (which can be checked by running node -v) is required. Other requirements that pertains to the installation of docusaurus can be found [here](https://docusaurus.io/docs/installation)

```console
$ git clone https://github.com/PalisadoesFoundation/docs-mobile.git
$ cd docs-mobile
$ yarn add docusaurus
```

### Install Yarn on Windows Using NPM

NPM (Node Package Manager) is a package manager included with the Node.js installation. It is used for developing and sharing JavaScript code, but it also provides another method of installing Yarn

1. [Download the Node Windows installer](https://nodejs.org/en/download/)
1. After choosing the path, double-click to install. Then give access to run the application
1. Install Yarn by running the following command

```terminal
$ npm install --global yarn
```

4. Check Yarn installation

```terminal
$ yarn -version
```

### Install Yarn on Windows Using msi File

Here’s how to install the Yarn package manager on Windows

1. [Download the Yarn Windows installer](https://classic.yarnpkg.com/en/docs/install#windows-stable)
1. After choosing the path, double-click to install. Then give access to run the application

1. Check Yarn installation

```terminal
$ yarn -version
```

### Install Yarn on macOS Using NPM

The .pkg installer can be used to install Yarn on macOS. Using the .pkg installer also helps resolve dependencies since it does not require a command line to install Node.js

1. [Click on the macOS Installer option to download the .pkg installer](https://nodejs.org/en/download/)
2. Run the Node.js installer
3. Verify Node.js Installation by running the following command in your terminal

```terminal
$ node -v
$ npm -v
```

4. Run the following command to install Yarn

```terminal
$ sudo npm install --global yarn
```

5. Verify Yarn Installation

```terminal
$ yarn --version
```

### Install Yarn on macOS Using Homebrew

One of the easiest way to install Yarn on macOS is to use the command line installer

1. Install Yarn by running the given command in your terminal

```terminal
$ brew install yarn
```

### Install Yarn on Linux Using NPM

Installing Yarn on Linux through NPM can be done via command line installer, this doesn't automatically install Node.js

1. Run the following command in your terminal to install Node and NPM respectively. [Confirm your Linux distro and it's command prompt](https://classic.yarnpkg.com/lang/en/docs/install/#debian-stable)

```terminal
$ sudo apt install nodejs
$ sudo apt install npm
```

2. Verify installation

```terminal
$ node -v
$ npm -v
```

3. Install Yarn with the following command

```terminal
npm install --global yarn
```

Finally, after installing yarn and confirming that it is installed in your computer, run the command below to install the packages

```terminal
$ yarn install
```

# Running the Development Server

To preview your changes as you edit the files, you can run a local development server that will serve your website and it will reflect the latest changes.

The command to run the server is:

```console
$ yarn run start
OR
$ yarn start
```

By default, a browser window will open at http://localhost:3000.

This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.

# Building Static HTML Pages

**In most cases is unnecessary**. Running the `development server` will be sufficient.

If you need to generate static HTML pages (unlikely), then follow these steps.

```console
$ yarn run build
```

This command generates static content into the `/build` directory and can be served using any static contents hosting service.
12 changes: 12 additions & 0 deletions docs/blog/2019-05-28-first-blog-post.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
slug: first-blog-post
title: First Blog Post
authors: [slorber, yangshun]
tags: [hola, docusaurus]
---

Lorem ipsum dolor sit amet...

<!-- truncate -->

...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
44 changes: 44 additions & 0 deletions docs/blog/2019-05-29-long-blog-post.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
---
slug: long-blog-post
title: Long Blog Post
authors: yangshun
tags: [hello, docusaurus]
---

This is the summary of a very long blog post,

Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.

<!-- truncate -->

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
24 changes: 24 additions & 0 deletions docs/blog/2021-08-01-mdx-blog-post.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
slug: mdx-blog-post
title: MDX Blog Post
authors: [slorber]
tags: [docusaurus]
---

Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).

:::tip

Use the power of React to create interactive blog posts.

:::

{/* truncate */}

For example, use JSX to create an interactive button:

```js
<button onClick={() => alert('button clicked!')}>Click me!</button>
```

<button onClick={() => alert('button clicked!')}>Click me!</button>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions docs/blog/2021-08-26-welcome/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
slug: welcome
title: Welcome
authors: [slorber, yangshun]
tags: [facebook, hello, docusaurus]
---

[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).

Here are a few tips you might find useful.

<!-- truncate -->

Simply add Markdown files (or folders) to the `blog` directory.

Regular blog authors can be added to `authors.yml`.

The blog post date can be extracted from filenames, such as:

- `2019-05-30-welcome.md`
- `2019-05-30-welcome/index.md`

A blog post folder can be convenient to co-locate blog post images:

![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)

The blog supports tags as well!

**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
Loading

0 comments on commit 6533d25

Please sign in to comment.