Implement the documentation

.github/workflows/website.yaml

@@ -0,0 +1,44 @@
+name: Documentation
+
+on:
+    workflow_dispatch:
+    pull_request:
+        types: [ labeled ]
+
+jobs:
+    deploy-documentation:
+        if: github.event_name == 'workflow_dispatch' || github.event.label.name == 'documentation'
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            deployments: write
+        name: Deploy documentation
+        steps:
+            -   uses: actions/checkout@v3
+            -   uses: actions/setup-node@v3
+                with:
+                    node-version: 19
+
+            -   uses: actions/cache@v3
+                with:
+                    key: frontend-doc-${{ hashFiles('**/website/package-lock.json') }}
+                    path: |
+                        website/node_modules
+                        website/.docusaurus
+                    restore-keys: |
+                        frontend-doc-
+
+            -   name: Build documentation
+                run: |
+                    cd website
+                    npm install
+                    npm run build
+                    ls -lha
+
+            -   name: Deploy
+                uses: cloudflare/pages-action@1
+                with:
+                    apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                    accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+                    projectName: myprofile # e.g. 'my-project'
+                    directory: website/build # e.g. 'dist'k

README.md

@@ -1,32 +1,12 @@
 <p align="center">
-  <img src="./doc/logo.webp">
+  <img src="./website/static/img/logo_readme.webp">
 </p>
 
-# Templates
-
--   [Default](./data/examples/default.pdf)
-
 # Generate your resume
 
 Just create a new [Resume discussion](https://github.com/shield-wall/myprofile/discussions/new?category=resume) :smiley:.
 
-# Run locally
-
-I'm assuming that you have node 18 or higher installed in your machine.
-
-```bash
-npm install
-npm run node:group:init
-npm run dev
-npm run node:group:pdf
-```
-
-### Preview
-
-you can edit resume data in **data/data.yaml**
+# Documentation
 
-Note: you need to generate `json` and `pdf` again
+Check the full documentation clicking [here](https://myprofile.pro)
 
-```bash
-npm run node:group:pdf
-```

website/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

website/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

website/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

website/blog/2019-05-28-first-blog-post.md

@@ -0,0 +1,12 @@
+---
+slug: first-blog-post
+title: First Blog Post
+authors:
+  name: Gao Wei
+  title: Docusaurus Core Team
+  url: https://github.com/wgao19
+  image_url: https://github.com/wgao19.png
+tags: [hola, docusaurus]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

website/blog/2019-05-29-long-blog-post.md

@@ -0,0 +1,44 @@
+---
+slug: long-blog-post
+title: Long Blog Post
+authors: endi
+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

website/blog/2021-08-01-mdx-blog-post.mdx

@@ -0,0 +1,20 @@
+---
+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.
+
+```js
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+```
+
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+
+:::

website/blog/2021-08-26-welcome/index.md

@@ -0,0 +1,25 @@
+---
+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).
+
+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.

website/blog/authors.yml

@@ -0,0 +1,17 @@
+endi:
+  name: Endilie Yacop Sucipto
+  title: Maintainer of Docusaurus
+  url: https://github.com/endiliey
+  image_url: https://github.com/endiliey.png
+
+yangshun:
+  name: Yangshun Tay
+  title: Front End Engineer @ Facebook
+  url: https://github.com/yangshun
+  image_url: https://github.com/yangshun.png
+
+slorber:
+  name: Sébastien Lorber
+  title: Docusaurus maintainer
+  url: https://sebastienlorber.com
+  image_url: https://github.com/slorber.png

website/docs/development/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Development",
+  "position": 3,
+  "link": {
+    "type": "generated-index",
+    "description": "Information about development section."
+  }
+}

website/docs/development/run-project-locally.md

@@ -0,0 +1,25 @@
+---
+sidebar_position: 1
+---
+
+# How to run the project locally
+
+
+I'm assuming that you have node **18** or higher installed in your machine.
+
+```bash
+npm install
+npm run node:group:init
+npm run dev
+npm run node:group:pdf
+```
+
+### Preview
+
+you can edit resume data in **data/data.yaml**
+
+Note: you need to generate `json` and `pdf` again
+
+```bash
+npm run node:group:pdf
+```

website/docs/intro/index.md

@@ -0,0 +1,31 @@
+---
+slug: /
+sidebar_position: 1
+---
+
+# Tutorial Intro
+
+Create your resume easily in pdf, using **[github discussion](https://github.com/shield-wall/myprofile/discussions/new?category=resume)** 
+
+## Getting Started
+
+Create a new discussion in [resume category](https://github.com/shield-wall/myprofile/discussions/new?category=resume)
+
+![Alt](img/create-resume.gif)
+
+### Get your pdf
+
+After you create your resume, scroll down and wait **few secons**, then you will see a comment indicating that your resume started to process.
+
+![Alt](img/github-comment-pipeline-start.gif)
+
+Wait **~1 minute** and this comment will be updated with a new message contain your resume in pdf.
+Now you just need to click on that link and a new tab will open with your pdf, and you can download it.
+
+![Alt](img/github-comment-pdf-link.gif)
+
+:::tip Congratulations
+
+Congratulations!!! You have created your first resume on myprofile project 🚀
+
+:::

website/docs/tutorial-basics/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Tutorial - Basics",
+  "position": 2,
+  "link": {
+    "type": "generated-index",
+    "description": "5 minutes to learn the most important \"myprofile\" functionalities."
+  }
+}

website/docs/tutorial-basics/update-resume.md

@@ -0,0 +1,27 @@
+---
+sidebar_position: 1
+---
+
+# Update your resume
+
+After you have **[created your resume](/)**, you probably want to update it, don't you 😄?
+
+To have this done in **myprofile**, you just need to change something in your discussion's description.
+
+like add a `space`, `dot`, `blank line` or whatever you want.
+
+![Alt](img/github-update-resume.gif)
+
+After you click on `Update discussion`, you just need to wait few minutes until your resume be processed again.
+
+:::info INFO
+
+You can check [here](/#get-your-pdf) to know more about this process time.
+
+:::
+
+:::tip Resume url
+
+You can keep the **resume url** opened in a different browser's tab, And after update your resume, you just need to **refresh** the pdf page.
+
+:::

website/docs/tutorial-basics/upload-images.md

@@ -0,0 +1,23 @@
+---
+sidebar_position: 2
+---
+
+# Upload images
+
+There are few fields in your resume that you can add images, and whole of them uses **image url**, 
+you can use external links, But we **highly** recommend you to use GitHub uploads.
+
+### Github upload
+
+On the every textarea footer field in GitHub, you can see this `Attach files by dragging & dropping, selecting or pasting them.`,
+Clicking on that label you can select images in your computer, and upload them. Or you can also dragdrop some image to that textarea.
+
+In this example we are going to use comments sections to upload images.
+
+![Alt](img/github-upload-image.gif)
+
+:::info INFO
+
+You don't need to save the images in your comments if you don't want, After you get the **image's url**, you can just cancel the comment.
+
+:::