Developer Guide

Jump to bottom
Sahar Mehrpour edited this page Sep 13, 2024 · 8 revisions

Thank you for your interest in contributing to our project! In our project, contributions are made through pull requests. You can refer to this article on how to make a pull request.

Node.js Version Compatibility

This codebase is compatible with Node.js version 16. To manage and switch between different Node.js versions without downgrading your system's Node version, it is recommended to use the nvm (Node Version Manager) library.

Setting up the environment

  1. Install srcML as instructed here
  2. Install the IDE plugin as instructed here.
  3. Open your Java project:
  • Open your desired java projects in the IDE (IntelliJ or VS Code).
    • Make sure only ONE project is open in the IDE.
    • If more projects are open, close all and re-open one project.
  • Download spmf.jar.
    • This file is a library which is essential for the process of extracting design rules from the codebase.
  • Copy spmf.jar to the root directory of the project.
    • Note: spmf.jar should be added for all java projects you wish to work on.

Setting up the project

  1. Fork https://github.com/ourcodeinc/ActiveDocumentation-webapp repository (Refer to this article on how to fork a repository).
  2. Clone the forked project on your system.
  3. Navigate to the cloned directory.
  4. Install the dependencies by running npm install
  5. To start the Project, depending on your operating system, run one of the following commands (See package.json for the details):
    • macOS: 
      npm run start-Mac
    • Linux: 
      npm run start-Linux
    • Windows: 
      npm run start-Windows
  6. To start the app, open Chrome and visit:
http://localhost:9010/

Coding Style

We employed ESLint to ensure that submitted code adheres to our coding standards. You can check if your code follows our coding style by running ESLint locally.

  • Run ESLint on your code: 
    npx eslint .
  • Fix any issues reported by ESLint. Some issues can be automatically fixed by running: 
    npx eslint . --fix

You can temporarily disable eslint on your local machine by adding DISABLE_ESLINT_PLUGIN=true to .envfile. But keep in mind that your PR is going to be checked against the same eslint rules.

Code Quality and Best Practices

  • Run ESLint: Always run ESLint locally before submitting your PR to ensure your code adheres to our coding standards. Fix any linting errors.
  • Avoid Unnecessary Changes: Ensure that your PR only includes relevant changes. Avoid unnecessary modifications such as extra spaces, empty lines, or other formatting changes that do not contribute to the functionality or readability of the code.
  • Descriptive Commits: Use descriptive commit messages to explain the purpose of your changes.
  • Descriptive PR: Please mention the issue you are fixing in the description of your PR.
  • Focused PR: Try to address a single issue in one PR.

Thank you for contributing!

Clone this wiki locally

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Developer Guide
Jump to bottom

Sahar Mehrpour edited this page Sep 13, 2024
·
8 revisions
Thank you for your interest in contributing to our project! In our project, contributions are made through pull requests. You can refer to this article on how to make a pull request.
Node.js Version Compatibility
This codebase is compatible with Node.js version 16. To manage and switch between different Node.js versions without downgrading your system's Node version, it is recommended to use the nvm (Node Version Manager) library.
Setting up the environment
  1. Install srcML as instructed here
  2. Install the IDE plugin as instructed here.
  3. Open your Java project:
  • Open your desired java projects in the IDE (IntelliJ or VS Code).

    • Make sure only ONE project is open in the IDE.
    • If more projects are open, close all and re-open one project.
  • Download spmf.jar.

    • This file is a library which is essential for the process of extracting design rules from the codebase.
  • Copy spmf.jar to the root directory of the project.

    • Note: spmf.jar should be added for all java projects you wish to work on.
Setting up the project
  1. Fork https://github.com/ourcodeinc/ActiveDocumentation-webapp repository (Refer to this article on how to fork a repository).
  2. Clone the forked project on your system.
  3. Navigate to the cloned directory.
  4. Install the dependencies by running npm install
  5. To start the Project, depending on your operating system, run one of the following commands (See package.json for the details):

    • macOS:

      npm run start-Mac
    • Linux:

      npm run start-Linux
    • Windows:

      npm run start-Windows
  6. To start the app, open Chrome and visit:
http://localhost:9010/

Coding Style
We employed ESLint to ensure that submitted code adheres to our coding standards. You can check if your code follows our coding style by running ESLint locally.
  • Run ESLint on your code:

    npx eslint .
  • Fix any issues reported by ESLint. Some issues can be automatically fixed by running:

    npx eslint . --fix
You can temporarily disable eslint on your local machine by adding DISABLE_ESLINT_PLUGIN=true to .envfile.
But keep in mind that your PR is going to be checked against the same eslint rules.
Code Quality and Best Practices
  • Run ESLint: Always run ESLint locally before submitting your PR to ensure your code adheres to our coding standards. Fix any linting errors.
  • Avoid Unnecessary Changes: Ensure that your PR only includes relevant changes. Avoid unnecessary modifications such as extra spaces, empty lines, or other formatting changes that do not contribute to the functionality or readability of the code.
  • Descriptive Commits: Use descriptive commit messages to explain the purpose of your changes.
  • Descriptive PR: Please mention the issue you are fixing in the description of your PR.
  • Focused PR: Try to address a single issue in one PR.
Thank you for contributing!
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Developer Guide
Jump to bottom

Sahar Mehrpour edited this page Sep 13, 2024
·
8 revisions
Thank you for your interest in contributing to our project! In our project, contributions are made through pull requests. You can refer to this article on how to make a pull request.
Node.js Version Compatibility
This codebase is compatible with Node.js version 16. To manage and switch between different Node.js versions without downgrading your system's Node version, it is recommended to use the nvm (Node Version Manager) library.
Setting up the environment
  1. Install srcML as instructed here
  2. Install the IDE plugin as instructed here.
  3. Open your Java project:
  • Open your desired java projects in the IDE (IntelliJ or VS Code).

    • Make sure only ONE project is open in the IDE.
    • If more projects are open, close all and re-open one project.
  • Download spmf.jar.

    • This file is a library which is essential for the process of extracting design rules from the codebase.
  • Copy spmf.jar to the root directory of the project.

    • Note: spmf.jar should be added for all java projects you wish to work on.
Setting up the project
  1. Fork https://github.com/ourcodeinc/ActiveDocumentation-webapp repository (Refer to this article on how to fork a repository).
  2. Clone the forked project on your system.
  3. Navigate to the cloned directory.
  4. Install the dependencies by running npm install
  5. To start the Project, depending on your operating system, run one of the following commands (See package.json for the details):

    • macOS:

      npm run start-Mac
    • Linux:

      npm run start-Linux
    • Windows:

      npm run start-Windows
  6. To start the app, open Chrome and visit:
http://localhost:9010/

Coding Style
We employed ESLint to ensure that submitted code adheres to our coding standards. You can check if your code follows our coding style by running ESLint locally.
  • Run ESLint on your code:

    npx eslint .
  • Fix any issues reported by ESLint. Some issues can be automatically fixed by running:

    npx eslint . --fix
You can temporarily disable eslint on your local machine by adding DISABLE_ESLINT_PLUGIN=true to .envfile.
But keep in mind that your PR is going to be checked against the same eslint rules.
Code Quality and Best Practices
  • Run ESLint: Always run ESLint locally before submitting your PR to ensure your code adheres to our coding standards. Fix any linting errors.
  • Avoid Unnecessary Changes: Ensure that your PR only includes relevant changes. Avoid unnecessary modifications such as extra spaces, empty lines, or other formatting changes that do not contribute to the functionality or readability of the code.
  • Descriptive Commits: Use descriptive commit messages to explain the purpose of your changes.
  • Descriptive PR: Please mention the issue you are fixing in the description of your PR.
  • Focused PR: Try to address a single issue in one PR.
Thank you for contributing!
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Developer Guide
Jump to bottom

Sahar Mehrpour edited this page Sep 13, 2024
·
8 revisions
Thank you for your interest in contributing to our project! In our project, contributions are made through pull requests. You can refer to this article on how to make a pull request.
Node.js Version Compatibility
This codebase is compatible with Node.js version 16. To manage and switch between different Node.js versions without downgrading your system's Node version, it is recommended to use the nvm (Node Version Manager) library.
Setting up the environment
  1. Install srcML as instructed here
  2. Install the IDE plugin as instructed here.
  3. Open your Java project:
  • Open your desired java projects in the IDE (IntelliJ or VS Code).

    • Make sure only ONE project is open in the IDE.
    • If more projects are open, close all and re-open one project.
  • Download spmf.jar.

    • This file is a library which is essential for the process of extracting design rules from the codebase.
  • Copy spmf.jar to the root directory of the project.

    • Note: spmf.jar should be added for all java projects you wish to work on.
Setting up the project
  1. Fork https://github.com/ourcodeinc/ActiveDocumentation-webapp repository (Refer to this article on how to fork a repository).
  2. Clone the forked project on your system.
  3. Navigate to the cloned directory.
  4. Install the dependencies by running npm install
  5. To start the Project, depending on your operating system, run one of the following commands (See package.json for the details):

    • macOS:

      npm run start-Mac
    • Linux:

      npm run start-Linux
    • Windows:

      npm run start-Windows
  6. To start the app, open Chrome and visit:
http://localhost:9010/

Coding Style
We employed ESLint to ensure that submitted code adheres to our coding standards. You can check if your code follows our coding style by running ESLint locally.
  • Run ESLint on your code:

    npx eslint .
  • Fix any issues reported by ESLint. Some issues can be automatically fixed by running:

    npx eslint . --fix
You can temporarily disable eslint on your local machine by adding DISABLE_ESLINT_PLUGIN=true to .envfile.
But keep in mind that your PR is going to be checked against the same eslint rules.
Code Quality and Best Practices
  • Run ESLint: Always run ESLint locally before submitting your PR to ensure your code adheres to our coding standards. Fix any linting errors.
  • Avoid Unnecessary Changes: Ensure that your PR only includes relevant changes. Avoid unnecessary modifications such as extra spaces, empty lines, or other formatting changes that do not contribute to the functionality or readability of the code.
  • Descriptive Commits: Use descriptive commit messages to explain the purpose of your changes.
  • Descriptive PR: Please mention the issue you are fixing in the description of your PR.
  • Focused PR: Try to address a single issue in one PR.
Thank you for contributing!
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Developer Guide
Jump to bottom

Sahar Mehrpour edited this page Sep 13, 2024
·
8 revisions
Thank you for your interest in contributing to our project! In our project, contributions are made through pull requests. You can refer to this article on how to make a pull request.
Node.js Version Compatibility
This codebase is compatible with Node.js version 16. To manage and switch between different Node.js versions without downgrading your system's Node version, it is recommended to use the nvm (Node Version Manager) library.
Setting up the environment
  1. Install srcML as instructed here
  2. Install the IDE plugin as instructed here.
  3. Open your Java project:
  • Open your desired java projects in the IDE (IntelliJ or VS Code).

    • Make sure only ONE project is open in the IDE.
    • If more projects are open, close all and re-open one project.
  • Download spmf.jar.

    • This file is a library which is essential for the process of extracting design rules from the codebase.
  • Copy spmf.jar to the root directory of the project.

    • Note: spmf.jar should be added for all java projects you wish to work on.
Setting up the project
  1. Fork https://github.com/ourcodeinc/ActiveDocumentation-webapp repository (Refer to this article on how to fork a repository).
  2. Clone the forked project on your system.
  3. Navigate to the cloned directory.
  4. Install the dependencies by running npm install
  5. To start the Project, depending on your operating system, run one of the following commands (See package.json for the details):

    • macOS:

      npm run start-Mac
    • Linux:

      npm run start-Linux
    • Windows:

      npm run start-Windows
  6. To start the app, open Chrome and visit:
http://localhost:9010/

Coding Style
We employed ESLint to ensure that submitted code adheres to our coding standards. You can check if your code follows our coding style by running ESLint locally.
  • Run ESLint on your code:

    npx eslint .
  • Fix any issues reported by ESLint. Some issues can be automatically fixed by running:

    npx eslint . --fix
You can temporarily disable eslint on your local machine by adding DISABLE_ESLINT_PLUGIN=true to .envfile.
But keep in mind that your PR is going to be checked against the same eslint rules.
Code Quality and Best Practices
  • Run ESLint: Always run ESLint locally before submitting your PR to ensure your code adheres to our coding standards. Fix any linting errors.
  • Avoid Unnecessary Changes: Ensure that your PR only includes relevant changes. Avoid unnecessary modifications such as extra spaces, empty lines, or other formatting changes that do not contribute to the functionality or readability of the code.
  • Descriptive Commits: Use descriptive commit messages to explain the purpose of your changes.
  • Descriptive PR: Please mention the issue you are fixing in the description of your PR.
  • Focused PR: Try to address a single issue in one PR.
Thank you for contributing!
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Developer Guide
Jump to bottom

Sahar Mehrpour edited this page Sep 13, 2024
·
8 revisions
Thank you for your interest in contributing to our project! In our project, contributions are made through pull requests. You can refer to this article on how to make a pull request.
Node.js Version Compatibility
This codebase is compatible with Node.js version 16. To manage and switch between different Node.js versions without downgrading your system's Node version, it is recommended to use the nvm (Node Version Manager) library.
Setting up the environment
  1. Install srcML as instructed here
  2. Install the IDE plugin as instructed here.
  3. Open your Java project:
  • Open your desired java projects in the IDE (IntelliJ or VS Code).

    • Make sure only ONE project is open in the IDE.
    • If more projects are open, close all and re-open one project.
  • Download spmf.jar.

    • This file is a library which is essential for the process of extracting design rules from the codebase.
  • Copy spmf.jar to the root directory of the project.

    • Note: spmf.jar should be added for all java projects you wish to work on.
Setting up the project
  1. Fork https://github.com/ourcodeinc/ActiveDocumentation-webapp repository (Refer to this article on how to fork a repository).
  2. Clone the forked project on your system.
  3. Navigate to the cloned directory.
  4. Install the dependencies by running npm install
  5. To start the Project, depending on your operating system, run one of the following commands (See package.json for the details):

    • macOS:

      npm run start-Mac
    • Linux:

      npm run start-Linux
    • Windows:

      npm run start-Windows
  6. To start the app, open Chrome and visit:
http://localhost:9010/

Coding Style
We employed ESLint to ensure that submitted code adheres to our coding standards. You can check if your code follows our coding style by running ESLint locally.
  • Run ESLint on your code:

    npx eslint .
  • Fix any issues reported by ESLint. Some issues can be automatically fixed by running:

    npx eslint . --fix
You can temporarily disable eslint on your local machine by adding DISABLE_ESLINT_PLUGIN=true to .envfile.
But keep in mind that your PR is going to be checked against the same eslint rules.
Code Quality and Best Practices
  • Run ESLint: Always run ESLint locally before submitting your PR to ensure your code adheres to our coding standards. Fix any linting errors.
  • Avoid Unnecessary Changes: Ensure that your PR only includes relevant changes. Avoid unnecessary modifications such as extra spaces, empty lines, or other formatting changes that do not contribute to the functionality or readability of the code.
  • Descriptive Commits: Use descriptive commit messages to explain the purpose of your changes.
  • Descriptive PR: Please mention the issue you are fixing in the description of your PR.
  • Focused PR: Try to address a single issue in one PR.
Thank you for contributing!
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Developer Guide
Jump to bottom

Sahar Mehrpour edited this page Sep 13, 2024
·
8 revisions
Thank you for your interest in contributing to our project! In our project, contributions are made through pull requests. You can refer to this article on how to make a pull request.
Node.js Version Compatibility
This codebase is compatible with Node.js version 16. To manage and switch between different Node.js versions without downgrading your system's Node version, it is recommended to use the nvm (Node Version Manager) library.
Setting up the environment
  1. Install srcML as instructed here
  2. Install the IDE plugin as instructed here.
  3. Open your Java project:
  • Open your desired java projects in the IDE (IntelliJ or VS Code).

    • Make sure only ONE project is open in the IDE.
    • If more projects are open, close all and re-open one project.
  • Download spmf.jar.

    • This file is a library which is essential for the process of extracting design rules from the codebase.
  • Copy spmf.jar to the root directory of the project.

    • Note: spmf.jar should be added for all java projects you wish to work on.
Setting up the project
  1. Fork https://github.com/ourcodeinc/ActiveDocumentation-webapp repository (Refer to this article on how to fork a repository).
  2. Clone the forked project on your system.
  3. Navigate to the cloned directory.
  4. Install the dependencies by running npm install
  5. To start the Project, depending on your operating system, run one of the following commands (See package.json for the details):

    • macOS:

      npm run start-Mac
    • Linux:

      npm run start-Linux
    • Windows:

      npm run start-Windows
  6. To start the app, open Chrome and visit:
http://localhost:9010/

Coding Style
We employed ESLint to ensure that submitted code adheres to our coding standards. You can check if your code follows our coding style by running ESLint locally.
  • Run ESLint on your code:

    npx eslint .
  • Fix any issues reported by ESLint. Some issues can be automatically fixed by running:

    npx eslint . --fix
You can temporarily disable eslint on your local machine by adding DISABLE_ESLINT_PLUGIN=true to .envfile.
But keep in mind that your PR is going to be checked against the same eslint rules.
Code Quality and Best Practices
  • Run ESLint: Always run ESLint locally before submitting your PR to ensure your code adheres to our coding standards. Fix any linting errors.
  • Avoid Unnecessary Changes: Ensure that your PR only includes relevant changes. Avoid unnecessary modifications such as extra spaces, empty lines, or other formatting changes that do not contribute to the functionality or readability of the code.
  • Descriptive Commits: Use descriptive commit messages to explain the purpose of your changes.
  • Descriptive PR: Please mention the issue you are fixing in the description of your PR.
  • Focused PR: Try to address a single issue in one PR.
Thank you for contributing!
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Developer Guide
Jump to bottom

Sahar Mehrpour edited this page Sep 13, 2024
·
8 revisions
Thank you for your interest in contributing to our project! In our project, contributions are made through pull requests. You can refer to this article on how to make a pull request.
Node.js Version Compatibility
This codebase is compatible with Node.js version 16. To manage and switch between different Node.js versions without downgrading your system's Node version, it is recommended to use the nvm (Node Version Manager) library.
Setting up the environment
  1. Install srcML as instructed here
  2. Install the IDE plugin as instructed here.
  3. Open your Java project:
  • Open your desired java projects in the IDE (IntelliJ or VS Code).

    • Make sure only ONE project is open in the IDE.
    • If more projects are open, close all and re-open one project.
  • Download spmf.jar.

    • This file is a library which is essential for the process of extracting design rules from the codebase.
  • Copy spmf.jar to the root directory of the project.

    • Note: spmf.jar should be added for all java projects you wish to work on.
Setting up the project
  1. Fork https://github.com/ourcodeinc/ActiveDocumentation-webapp repository (Refer to this article on how to fork a repository).
  2. Clone the forked project on your system.
  3. Navigate to the cloned directory.
  4. Install the dependencies by running npm install
  5. To start the Project, depending on your operating system, run one of the following commands (See package.json for the details):

    • macOS:

      npm run start-Mac
    • Linux:

      npm run start-Linux
    • Windows:

      npm run start-Windows
  6. To start the app, open Chrome and visit:
http://localhost:9010/

Coding Style
We employed ESLint to ensure that submitted code adheres to our coding standards. You can check if your code follows our coding style by running ESLint locally.
  • Run ESLint on your code:

    npx eslint .
  • Fix any issues reported by ESLint. Some issues can be automatically fixed by running:

    npx eslint . --fix
You can temporarily disable eslint on your local machine by adding DISABLE_ESLINT_PLUGIN=true to .envfile.
But keep in mind that your PR is going to be checked against the same eslint rules.
Code Quality and Best Practices
  • Run ESLint: Always run ESLint locally before submitting your PR to ensure your code adheres to our coding standards. Fix any linting errors.
  • Avoid Unnecessary Changes: Ensure that your PR only includes relevant changes. Avoid unnecessary modifications such as extra spaces, empty lines, or other formatting changes that do not contribute to the functionality or readability of the code.
  • Descriptive Commits: Use descriptive commit messages to explain the purpose of your changes.
  • Descriptive PR: Please mention the issue you are fixing in the description of your PR.
  • Focused PR: Try to address a single issue in one PR.
Thank you for contributing!
Clone this wiki locally