├── .env.local.example ├── .eslintrc.json ├── .gitattributes ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── custom.md │ └── feature_request.md ├── dependabot.yml ├── pull_request_template.md └── workflows │ ├── actions.yml │ ├── njsscan.yml │ └── stackhawk.yml ├── .gitignore ├── .idea ├── .gitignore └── vcs.xml ├── .prettierrc ├── .vscode └── settings.json ├── CONTRIBUTING.md ├── LICENSE ├── PrivacyPolicy.md ├── README.md ├── SECURITY.md ├── ads.txt ├── code_of_conduct.md ├── components ├── ai │ └── AIContent.tsx ├── buttons │ ├── BackToTopButton.tsx │ ├── Coffee.tsx │ └── Sponsor.tsx ├── chat │ └── TawkToChat.tsx ├── communityComponents │ ├── CommunityNotSupported.tsx │ ├── Discussions.tsx │ └── Events.tsx ├── data │ ├── IDEInfo.ts │ ├── badgesData.ts │ ├── contributorData.ts │ ├── frameworkList.ts │ ├── gitList.ts │ ├── languageList.ts │ ├── openSourceLicenses.ts │ ├── openSourcePrinciples.ts │ ├── roadmapList.ts │ └── testimonials.ts ├── frameworkComponents │ ├── AngularFramework.tsx │ ├── AspNetCoreFramework.tsx │ ├── AstroFramework.tsx │ ├── CherrypyFramework.tsx │ ├── D3JS.tsx │ ├── DjangoFramework.tsx │ ├── EmberFramework.tsx │ ├── ExpressFramework.tsx │ ├── FlaskFramework.tsx │ ├── FlutterFramework.tsx │ ├── FrameworkNotSupported.tsx │ ├── GatsbyFramework.tsx │ ├── LaravelFramework.tsx │ ├── NextJSFramework.tsx │ ├── RailsFramework.tsx │ ├── ReactLibrary.tsx │ ├── ReactNativeFramework.tsx │ ├── SolidJSFramework.tsx │ ├── SpringFramework.tsx │ ├── SvelteFramework.tsx │ ├── TailwindCSSFramework.tsx │ ├── ThreeJSLibrary.tsx │ ├── ViteFramework.tsx │ └── VueFramework.tsx ├── gitComponents │ ├── ConventionalCommits.tsx │ ├── GitBranchingSelection.tsx │ ├── GitCommands.ts │ ├── GitCommandsSelection.tsx │ ├── GitConfiguration.tsx │ ├── GitConflicts.tsx │ ├── GitWorkflow.tsx │ └── SelectionNotSupported.tsx ├── index │ ├── Contributors.tsx │ ├── Descriptions.tsx │ ├── LazyImage.tsx │ └── Testimonials.tsx ├── languageComponents │ ├── ActionScriptLanguage.tsx │ ├── BashLanguage.tsx │ ├── CLanguage.tsx │ ├── CPPLanguage.tsx │ ├── CSSLanguage.tsx │ ├── CSharpLanguage.tsx │ ├── ClojureLanguage.tsx │ ├── CoffeeScriptLanguage.tsx │ ├── CrystalLanguage.tsx │ ├── DLanguage.tsx │ ├── DartLanguage.tsx │ ├── DelphiLanguage.tsx │ ├── ElixirLanguage.tsx │ ├── ElmLanguage.tsx │ ├── ErlangLanguage.tsx │ ├── FSharpLanguage.tsx │ ├── FortranLanguage.tsx │ ├── GamemakerLanguage.tsx │ ├── GoLanguage.tsx │ ├── GroovyLanguage.tsx │ ├── HTMLLanguage.tsx │ ├── HTMXLanguage.tsx │ ├── HaskellLanguage.tsx │ ├── JavaLanguage.tsx │ ├── JavaScriptLanguage.tsx │ ├── JuliaLanguage.tsx │ ├── KotlinLanguage.tsx │ ├── LanguageNotSupported.tsx │ ├── LispLanguage.tsx │ ├── LuaLanguage.tsx │ ├── MATLABLanguage.tsx │ ├── NimLanguage.tsx │ ├── NixLanguage.tsx │ ├── ObjectiveCLanguage.tsx │ ├── OctaveLanguage.tsx │ ├── PHPLanguage.tsx │ ├── PascalLanguage.tsx │ ├── PerlLanguage.tsx │ ├── PonyLanguage.tsx │ ├── PureScriptLanguage.tsx │ ├── PythonLanguage.tsx │ ├── RLanguage.tsx │ ├── ReasonLanguage.tsx │ ├── RescriptLanguage.tsx │ ├── RubyLanguage.tsx │ ├── RustLanguage.tsx │ ├── SQLLanguage.tsx │ ├── ScalaLanguage.tsx │ ├── ScratchLanguage.tsx │ ├── SolidityLanguage.tsx │ ├── SwiftLanguage.tsx │ ├── TypeScriptLanguage.tsx │ ├── VisualBasicLanguage.tsx │ ├── VyperLanguage.tsx │ ├── YAMLLanguage.tsx │ ├── ZSHLanguage.tsx │ └── ZigLanguage.tsx ├── layout │ ├── Footer.tsx │ ├── Header.tsx │ └── LoadingPage.tsx ├── resources │ ├── CodingChallenges.tsx │ ├── CommunityAndNetworking.tsx │ ├── ContributingResources.tsx │ ├── GitAndGitHubDocumentation.tsx │ ├── InteractiveLearningPlatforms.tsx │ ├── JobSearchingPlatforms.tsx │ ├── OnlineCodingBootcamps.tsx │ ├── OpenSourceDocumentation.tsx │ └── VideoTutorialResources.tsx ├── roadmapComponents │ ├── ContributionManagement.tsx │ ├── DocumentationOverview.tsx │ ├── HowToContribute.tsx │ ├── LegalEthicalConsiderations.tsx │ ├── OpenSourceLicenses.tsx │ ├── OpenSourcePhilosophy.tsx │ ├── OpenSourceTerminology.tsx │ ├── Portfolio.tsx │ └── RoadmapNotSupported.tsx ├── sections │ ├── Features.tsx │ ├── Hero.tsx │ └── Testimonials.tsx └── ui │ ├── Spinner.tsx │ └── ThemeSelector.tsx ├── declarations.d.ts ├── middleware.ts ├── next.config.js ├── package.json ├── pages ├── _app.tsx ├── _document.tsx ├── ai │ └── ai.tsx ├── api │ └── repo-stats.js ├── community │ ├── [community].tsx │ └── contributors.tsx ├── dashboard │ └── dashboard.tsx ├── frameworks │ └── [framework].tsx ├── git │ └── [git].tsx ├── help │ └── faq.tsx ├── index.tsx ├── languages │ └── [lang].tsx ├── legal │ └── privacy-policy.tsx ├── resources │ └── resources.tsx ├── roadmaps │ └── [roadmap].tsx ├── sign-in │ └── [[...index]].tsx ├── sign-up │ └── [[...index]].tsx └── tools │ └── ide.tsx ├── postcss.config.js ├── public ├── fork-commit-merge-banner.png ├── fork-commit-merge-banner2.png ├── fork-commit-merge-banner3.png ├── fork-commit-merge-logo-favicon.png ├── fork-commit-merge-logo.jpg ├── next.svg ├── typescript-easy.png └── vercel.svg ├── styles ├── Coffee.module.css └── tailwind.css ├── tailwind.config.js ├── tsconfig.json ├── types.ts ├── types ├── contributor.ts └── tawkto.d.ts └── utils ├── contributors.ts └── helpers └── htmlToJsonParser.js /.env.local.example: -------------------------------------------------------------------------------- 1 | GITHUB_ID= 2 | GITHUB_SECRET= 3 | GITHUB_TOKEN= 4 | FCM_GITHUB_TOKEN= 5 | NEXTAUTH_URL=http://localhost:3000 6 | NEXTAUTH_SECRET= 7 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= 8 | CLERK_SECRET_KEY= 9 | NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in 10 | NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up 11 | NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/ 12 | NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/ 13 | NEXT_PUBLIC_GITHUB_TOKEN= 14 | 15 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals", 3 | "parserOptions": { 4 | "project": "./tsconfig.json" 5 | }, 6 | "rules": { 7 | "@typescript-eslint/no-explicit-any": "warn" 8 | } 9 | } 10 | 11 | 12 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Set the default behavior, in case people don't have core.autocrlf set. 2 | * text=auto eol=lf 3 | 4 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: nikohoffren 2 | patreon: # Replace with a single Patreon username 3 | open_collective: # Replace with a single Open Collective username 4 | ko_fi: # Replace with a single Ko-fi username 5 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 6 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 7 | liberapay: # Replace with a single Liberapay username 8 | issuehunt: # Replace with a single IssueHunt username 9 | otechie: # Replace with a single Otechie username 10 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 11 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 12 | 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "npm" 4 | directory: "/" 5 | schedule: 6 | interval: "weekly" 7 | ignore: 8 | - dependency-name: "@heroicons/react" 9 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Pull Request Type 2 | 3 | What kind of change does this PR introduce? 4 | 5 | [ ] Bugfix 6 | [ ] Feature 7 | [ ] Code style update (formatting, local variables) 8 | [ ] Refactoring (no functional changes, no api changes) 9 | [ ] Build related changes 10 | [ ] CI related changes 11 | [ ] Documentation content changes 12 | [ ] Other... Please describe: 13 | 14 | ## What is the current behavior? 15 | 16 | 17 | Issue Number: [Insert Issue Number (if applicable)] 18 | 19 | ## What is the new behavior? 20 | 21 | 22 | 23 | ## Does this introduce a breaking change? 24 | 25 | [ ] Yes 26 | [ ] No 27 | 28 | 29 | 30 | ## Other information 31 | 32 | 33 | -------------------------------------------------------------------------------- /.github/workflows/actions.yml: -------------------------------------------------------------------------------- 1 | name: Actions 2 | 3 | on: 4 | pull_request_target: 5 | types: 6 | - closed 7 | 8 | jobs: 9 | 10 | comment: 11 | runs-on: ubuntu-latest 12 | if: github.event.pull_request.merged == true 13 | steps: 14 | - name: Checkout code 15 | uses: actions/checkout@v2 16 | with: 17 | token: ${{ secrets.DEVGALLERY_BOT }} 18 | 19 | - name: Setup GitHub CLI 20 | run: | 21 | gh auth login --with-token <<< "${{ secrets.DEVGALLERY_BOT }}" 22 | 23 | - name: Add contributor to README 24 | run: | 25 | if [ "${{ github.event.pull_request.user.login }}" = "dependabot[bot]" ] || [ "${{ github.event.pull_request.user.login }}" = "dependabot" ]; then 26 | echo "Skipping dependabot" 27 | exit 0 28 | fi 29 | 30 | if ! grep -q "${{ github.event.pull_request.user.login }}" README.md; then 31 | echo "" >> README.md 32 | git config --local user.email "action@github.com" 33 | git config --local user.name "GitHub Action" 34 | git add README.md 35 | git commit -m "Add ${{ github.event.pull_request.user.login }} to contributors list" 36 | git push 37 | fi 38 | 39 | - name: Comment on PR 40 | run: | 41 | gh pr comment "${{ github.event.pull_request.number }}" --body "## Pull request merged 42 | 43 | > This is an automated message from Fork, Commit, Merge - web [BOT]. 44 | 45 | Thank you for your contribution! Your pull request has been merged and your name has been added to the List of Contributors in README.md. 46 | Please leave a star if you enjoyed working on this project. 47 | 48 | ### What's next? 49 | 50 | If you're looking for more ways to contribute, I invite you to check out my other projects [here](https://github.com/nikohoffren?tab=repositories)." 51 | env: 52 | GH_TOKEN: ${{ secrets.DEVGALLERY_BOT }} 53 | GH_REPO: ${{ github.repository }} 54 | -------------------------------------------------------------------------------- /.github/workflows/njsscan.yml: -------------------------------------------------------------------------------- 1 | # This workflow uses actions that are not certified by GitHub. 2 | # They are provided by a third-party and are governed by 3 | # separate terms of service, privacy policy, and support 4 | # documentation. 5 | 6 | # This workflow integrates njsscan with GitHub's Code Scanning feature 7 | # nodejsscan is a static security code scanner that finds insecure code patterns in your Node.js applications 8 | 9 | name: njsscan sarif 10 | 11 | on: 12 | push: 13 | branches: [ "main" ] 14 | pull_request: 15 | # The branches below must be a subset of the branches above 16 | branches: [ "main" ] 17 | schedule: 18 | - cron: '18 23 * * 0' 19 | 20 | permissions: 21 | contents: read 22 | 23 | jobs: 24 | njsscan: 25 | permissions: 26 | contents: read # for actions/checkout to fetch code 27 | security-events: write # for github/codeql-action/upload-sarif to upload SARIF results 28 | actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status 29 | runs-on: ubuntu-latest 30 | name: njsscan code scanning 31 | steps: 32 | - name: Checkout the code 33 | uses: actions/checkout@v3 34 | - name: nodejsscan scan 35 | id: njsscan 36 | uses: ajinabraham/njsscan-action@7237412fdd36af517e2745077cedbf9d6900d711 37 | with: 38 | args: '. --sarif --output results.sarif || true' 39 | - name: Upload njsscan report 40 | uses: github/codeql-action/upload-sarif@v2 41 | with: 42 | sarif_file: results.sarif 43 | -------------------------------------------------------------------------------- /.github/workflows/stackhawk.yml: -------------------------------------------------------------------------------- 1 | name: "StackHawk" 2 | 3 | on: 4 | push: 5 | branches: [ "main" ] 6 | pull_request: 7 | branches: [ "main" ] 8 | schedule: 9 | - cron: '28 5 * * 4' 10 | 11 | permissions: 12 | contents: read 13 | 14 | jobs: 15 | stackhawk: 16 | permissions: 17 | contents: read 18 | security-events: write 19 | name: StackHawk 20 | runs-on: ubuntu-latest 21 | steps: 22 | - name: Checkout code 23 | uses: actions/checkout@v3 24 | 25 | - name: Start your service 26 | run: ./your-service.sh & 27 | 28 | - name: Run HawkScan 29 | uses: stackhawk/hawkscan-action@4c3258cd62248dac6d9fe91dd8d45928c697dee0 30 | continue-on-error: true 31 | with: 32 | apiKey: ${{ secrets.HAWK_API_KEY }} 33 | codeScanningAlerts: true 34 | githubToken: ${{ github.token }} 35 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | package-lock.json 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | 38 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Editor-based HTTP Client requests 5 | /httpRequests/ 6 | # Environment-dependent path to Maven home directory 7 | /mavenHomeManager.xml 8 | # Datasource local storage ignored files 9 | /dataSources/ 10 | /dataSources.local.xml 11 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "singleQuote": true, 4 | "jsxSingleQuote": true, 5 | "tabWidth": 2, 6 | "trailingComma": "none", 7 | "semi": false, 8 | "proseWrap": "always", 9 | "printWidth": 80, 10 | "plugins": ["prettier-plugin-tailwindcss"] 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "prettier.tabWidth": 2 3 | } 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Fork, Commit, Merge web repository 2 | 3 | First off, thanks for taking the time to contribute! 4 | 5 | The following is a set of guidelines for contributing to this project. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request. 6 | 7 | ## Code of Conduct 8 | 9 | This project and everyone participating in it are governed by the [Fork, Commit, Merge Code of Conduct](code_of_conduct.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [niko.hoffren@gmail.com](mailto:niko.hoffren@gmail.com). 10 | 11 | ## How Can I Contribute? 12 | 13 | ### Reporting Bugs 14 | 15 | This section guides you through submitting a bug report for this project. Following these guidelines helps maintainers and the community understand your report, reproduce the behavior, and find related reports. 16 | 17 | Explain the problem and include additional details to help maintainers reproduce the problem: 18 | 19 | * Use a clear and descriptive title for the issue to identify the problem. 20 | * Describe the exact steps which reproduce the problem in as many details as possible. 21 | 22 | ### Suggesting Enhancements 23 | 24 | This section guides you through submitting an enhancement suggestion for this project, including completely new features and minor improvements to existing functionality. Following these guidelines helps maintainers and the community understand your suggestion and make the decision on the implementation. 25 | 26 | * Use a clear and descriptive title for the issue to identify the suggestion. 27 | * Provide a step-by-step description of the suggested enhancement in as many details as possible. 28 | 29 | ### Your First Code Contribution 30 | 31 | Unsure where to begin contributing to this project? You can start by looking through these `good-first-issue` and `help-wanted` issues: 32 | 33 | * `good-first-issue` - issues which should only require a few lines of code, and a test or two. 34 | * `help-wanted` - issues which should be a bit more involved than `good-first-issue` issues. 35 | * We kindly request that you express your interest in working on a particular issue by leaving a message on the respective issue thread. This will allow us to assign the issue to you directly, thereby preventing multiple individuals from simultaneously working on the same problem. 36 | 37 | ## Pull Request Process 38 | 39 | 1. Fork the repository and create your branch from `main`. 40 | 2. If you've added code that should be tested, add tests. 41 | 3. If necessary, update the documentation/readme. 42 | 4. Ensure the test suite passes. 43 | 5. Issue that pull request! 44 | 45 | ## Styleguides 46 | 47 | * Use the prettier format. 48 | * Use `camelCase` for variable and function names. 49 | * Use `PascalCase` for class and component names. 50 | * Commit messages should clearly communicate the purpose of the change. 51 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright <2023> Niko Hoffrén 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /PrivacyPolicy.md: -------------------------------------------------------------------------------- 1 | ## Privacy Policy 2 | 3 | ### Introduction 4 | 5 | Welcome to Fork, Commit, Merge (forkcommitmerge.dev). This Privacy Policy 6 | governs your use of our website. This SERVICE is provided by Fork, Commit, Merge 7 | at no cost and is intended for use as is. 8 | 9 | ### Data Collection 10 | 11 | We collect the following data if you choose to login with your GitHub 12 | credentials to our platform: 13 | 14 | - Username 15 | - Email 16 | - Name 17 | 18 | ### How We Use Your Data 19 | 20 | We use your data to: 21 | 22 | - Facilitate your learning experience about contributing to open-source. 23 | - Search for the number of issues you have made in our repository by looking at 24 | all the closed (merged) pull requests. 25 | 26 | ### Data Storage 27 | 28 | We use GitHub's OAuth2 protocol to authenticate you. We do not store your 29 | password or sensitive information. We only store basic information about your 30 | contributions to our repository to track your progress. 31 | 32 | ### Data Sharing 33 | 34 | We do not share your data with third parties. We do not sell your data to third 35 | parties. We do not use your data for marketing purposes. 36 | 37 | ### Cookie Policy 38 | 39 | We do not use cookies on our website. 40 | 41 | ### Changes To This Privacy Policy 42 | 43 | We may update this Privacy Policy in the future. You are advised to review this 44 | page periodically for any changes. We will notify you of any changes by posting 45 | the new Privacy Policy on this page. These changes are effective immediately 46 | after they are posted on this page. 47 | 48 | ### Contact Us 49 | 50 | If you have any questions or suggestions about our Privacy Policy, do not 51 | hesitate to contact us. 52 | 53 | #### Contact Information: 54 | 55 | Email: niko.hoffren@gmail.com 56 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | | Version | Supported | 6 | | ------- | ------------------ | 7 | | 1.1.x | :white_check_mark: | 8 | 9 | ## Reporting a Vulnerability 10 | 11 | You can report a vulnerability straight to [niko.hoffren@gmail.com](mailto:niko.hoffren@gmail.com) and it will be addressed. 12 | -------------------------------------------------------------------------------- /ads.txt: -------------------------------------------------------------------------------- 1 | google.com, pub-9765110233243602, DIRECT, f08c47fec0942fa0 2 | -------------------------------------------------------------------------------- /components/buttons/BackToTopButton.tsx: -------------------------------------------------------------------------------- 1 | import { ChevronUpIcon } from '@heroicons/react/24/outline' 2 | import { useState, useEffect } from 'react' 3 | 4 | const BackToTopButton = () => { 5 | const [isVisible, setIsVisible] = useState(false) 6 | 7 | useEffect(() => { 8 | const toggleVisibility = () => { 9 | if (window.scrollY > 300) { 10 | setIsVisible(true) 11 | } else { 12 | setIsVisible(false) 13 | } 14 | } 15 | 16 | window.addEventListener('scroll', toggleVisibility) 17 | return () => window.removeEventListener('scroll', toggleVisibility) 18 | }, []) 19 | 20 | const scrollToTop = () => { 21 | window.scrollTo({ 22 | top: 0, 23 | behavior: 'smooth' 24 | }) 25 | } 26 | 27 | return ( 28 | isVisible && ( 29 | 35 | ) 36 | ) 37 | } 38 | 39 | export default BackToTopButton 40 | -------------------------------------------------------------------------------- /components/buttons/Coffee.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | function Coffee() { 3 | return ( 4 | 10 | Buy me a coffee 15 | 16 | ); 17 | } 18 | 19 | export default Coffee; 20 | -------------------------------------------------------------------------------- /components/buttons/Sponsor.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | function Sponsor() { 3 | return ( 4 | 10 | Sponsor 15 | 16 | ) 17 | } 18 | 19 | export default Sponsor 20 | -------------------------------------------------------------------------------- /components/chat/TawkToChat.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react' 2 | 3 | const TawkToChat = () => { 4 | useEffect(() => { 5 | const Tawk_API: any = window.Tawk_API || {} 6 | const Tawk_LoadStart = new Date() 7 | 8 | const s1 = document.createElement('script') 9 | const s0 = document.getElementsByTagName('script')[0] 10 | 11 | s1.async = true 12 | s1.src = 'https://embed.tawk.to/67e9792b57cf2a190d47a9b3/1ink02kf4' 13 | s1.charset = 'UTF-8' 14 | s1.setAttribute('crossorigin', '*') 15 | 16 | s0.parentNode?.insertBefore(s1, s0) 17 | 18 | const style = document.createElement('style') 19 | style.textContent = ` 20 | body #tawkto-container, 21 | body #tawkto-container iframe, 22 | body .tawk-minimized, 23 | body .tawk-button, 24 | body .tawk-button-container, 25 | body .tawk-chat-container, 26 | body .tawk-chat-iframe { 27 | right: 150px !important; 28 | margin-right: 150px !important; 29 | } 30 | ` 31 | document.head.appendChild(style) 32 | 33 | return () => { 34 | s1.remove() 35 | style.remove() 36 | } 37 | }, []) 38 | 39 | return null 40 | } 41 | 42 | export default TawkToChat 43 | -------------------------------------------------------------------------------- /components/communityComponents/CommunityNotSupported.tsx: -------------------------------------------------------------------------------- 1 | const CommunityNotSupported = () => { 2 | return ( 3 |
4 |
5 |

Community not supported

6 |
7 |
8 | ); 9 | }; 10 | 11 | export default CommunityNotSupported; 12 | -------------------------------------------------------------------------------- /components/data/frameworkList.ts: -------------------------------------------------------------------------------- 1 | export const frameworkList = [ 2 | { name: "Express.js", link: "/frameworks/expressjs" }, 3 | { name: "Ember.js", link: "/frameworks/emberjs" }, 4 | { name: "React", link: "/frameworks/react" }, 5 | { name: "Next.js", link: "/frameworks/nextjs" }, 6 | { name: "Three.js", link: "/frameworks/threejs" }, 7 | { name: "Vite", link: "/frameworks/vite" }, 8 | { name: "Vue.js", link: "/frameworks/vuejs" }, 9 | { name: "Svelte", link: "/frameworks/svelte" }, 10 | { name: "Astro", link: "/frameworks/astro" }, 11 | { name: "Angular", link: "/frameworks/angular" }, 12 | { name: "Gatsby", link: "/frameworks/gatsby" }, 13 | { name: "Flask", link: "/frameworks/flask" }, 14 | { name: "Django", link: "/frameworks/django" }, 15 | { name: "Rails", link: "/frameworks/rails" }, 16 | { name: "Laravel", link: "/frameworks/laravel" }, 17 | { name: "Flutter", link: "/frameworks/flutter" }, 18 | { name: "React Native", link: "/frameworks/react-native" }, 19 | { name: "ASP.NET Core", link: "/frameworks/aspnet-core" }, 20 | { name: "Tailwind CSS", link: "/frameworks/tailwindcss" }, 21 | { name: "Spring", link: "/frameworks/spring" }, 22 | { name: "CherryPy", link: "/frameworks/cherrypy" }, 23 | { name: "D3.js", link: "/frameworks/d3js" }, 24 | { name: "Solid.js", link: "/frameworks/solidjs"} 25 | ]; 26 | -------------------------------------------------------------------------------- /components/data/gitList.ts: -------------------------------------------------------------------------------- 1 | export const gitList = [ 2 | { name: "Git Commands", link: "/git/git-commands" }, 3 | { name: "Git Branching", link: "/git/git-branching" }, 4 | { name: "Git Conflicts", link: "/git/git-conflicts" }, 5 | { name: "Git Configuration", link: "/git/git-configuration" }, 6 | { name: "Git Workflow", link: "/git/git-workflow" }, 7 | { name: "Conventional Commits", link: "/git/conventional-commits" }, 8 | ]; 9 | -------------------------------------------------------------------------------- /components/data/languageList.ts: -------------------------------------------------------------------------------- 1 | export const languageList = [ 2 | { name: "HTML", link: "/languages/html" }, 3 | { name: "HTMX", link: "/languages/htmx" }, 4 | { name: "CSS", link: "/languages/css" }, 5 | { name: "CoffeeScript", link: "/languages/coffeescript" }, 6 | { name: "ReScript", link: "/languages/rescript" }, 7 | { name: "PureScript", link: "/languages/purescript"}, 8 | { name: "ActionScript", link: "/languages/actionscript"}, 9 | { name: "JavaScript", link: "/languages/javascript" }, 10 | { name: "TypeScript", link: "/languages/typescript" }, 11 | { name: "Reason", link: "/languages/reason"}, 12 | { name: "C", link: "/languages/c" }, 13 | { name: "C++", link: "/languages/cpp" }, 14 | { name: "C#", link: "/languages/csharp" }, 15 | { name: "D", link: "/languages/d" }, 16 | { name: "F#", link: "/languages/fsharp" }, 17 | { name: "Java", link: "/languages/java" }, 18 | { name: "Kotlin", link: "/languages/kotlin" }, 19 | { name: "Scala", link: "/languages/scala" }, 20 | { name: "Groovy", link: "/languages/groovy" }, 21 | { name: "Gamemaker", link: "/languages/gamemaker"}, 22 | { name: "VisualBasic", link: "/languages/visualbasic"}, 23 | { name: "Python", link: "/languages/python" }, 24 | { name: "Vyper", link: "/languages/vyper" }, 25 | { name: "Solidity", link: "/languages/solidity" }, 26 | { name: "Pony", link: "/languages/pony" }, 27 | { name: "Ruby", link: "/languages/ruby" }, 28 | { name: "Elixir", link: "/languages/elixir" }, 29 | { name: "Crystal", link: "/languages/crystal" }, 30 | { name: "PHP", link: "/languages/php" }, 31 | { name: "Go", link: "/languages/go" }, 32 | { name: "Dart", link: "/languages/dart" }, 33 | { name: "Swift", link: "/languages/swift" }, 34 | { name: "Objective-c", link: "/languages/objective-c" }, 35 | { name: "Julia", link: "/languages/julia" }, 36 | { name: "Rust", link: "/languages/rust" }, 37 | { name: "Haskell", link: "/languages/haskell" }, 38 | { name: "Lua", link: "/languages/lua" }, 39 | { name: "Clojure", link: "/languages/clojure" }, 40 | { name: "Lisp", link: "/languages/lisp" }, 41 | { name: "Fortran", link: "/languages/fortran" }, 42 | { name: "Erlang", link: "/languages/erlang" }, 43 | { name: "Pascal", link: "/languages/pascal" }, 44 | { name: "Delphi", link: "/languages/delphi" }, 45 | { name: "Zig", link: "/languages/zig" }, 46 | { name: "R", link: "/languages/r" }, 47 | { name: "Elm", link: "/languages/elm" }, 48 | { name: "Nim", link: "/languages/nim" }, 49 | { name: "MATLAB", link: "/languages/matlab" }, 50 | { name: "Octave", link: "/languages/octave" }, 51 | { name: "SQL", link: "/languages/sql" }, 52 | { name: "Bash", link: "/languages/bash" }, 53 | { name: "ZSH", link: "/languages/zsh" }, 54 | { name: "Perl", link: "/languages/perl" }, 55 | { name: "Nix", link: "/languages/nix" }, 56 | { name: "Scratch", link: "/languages/scratch" }, 57 | { name: "YAML", link: "/languages/yaml" }, 58 | ]; 59 | -------------------------------------------------------------------------------- /components/data/openSourceLicenses.ts: -------------------------------------------------------------------------------- 1 | export const openSourceLicenses = [ 2 | { 3 | name: "MIT License", 4 | features: "Permissive license allowing for reuse in proprietary software.", 5 | conditions: "License and copyright notice must be included.", 6 | limitations: "License does not include an express warranty or liability.", 7 | }, 8 | { 9 | name: "GNU General Public License (GPL)", 10 | features: "Ensures derivative work is also open source.", 11 | conditions: 12 | "Changes must be stated and the same license must be applied to derivative works.", 13 | limitations: 14 | "Not suitable for proprietary software as it requires the software and its derivatives to be open sourced.", 15 | }, 16 | { 17 | name: "Apache License 2.0", 18 | features: 19 | "Permissive license with allowance for derivative works to have different licenses. Grants patent rights to users.", 20 | conditions: 21 | "Requires the inclusion of the license, state changes, and a notice file.", 22 | limitations: 23 | "Does not prevent users from suing for patent infringements on contributors.", 24 | }, 25 | { 26 | name: "BSD 3-Clause License", 27 | features: 28 | "Permissive license similar to the MIT License but with an additional clause against using the name of the project or its contributors for endorsements.", 29 | conditions: 30 | "License and copyright notice must be included, cannot use the name, trademarks or promotion without permission.", 31 | limitations: "License does not include an express warranty or liability.", 32 | }, 33 | { 34 | name: "Creative Commons Zero v1.0 Universal (CC0 1.0)", 35 | features: "Dedicates work to the public domain, allowing maximum freedom.", 36 | conditions: "None. Can be freely used without any conditions.", 37 | limitations: "Creators cannot later impose restrictions on its use.", 38 | }, 39 | { 40 | name: "Mozilla Public License 2.0 (MPL 2.0)", 41 | features: 42 | "Hybrid between GPL and more permissive licenses, allowing integration into proprietary software.", 43 | conditions: 44 | "Changes to original files must be disclosed. Must include the license, but new files can be under a different license.", 45 | limitations: "More complex than MIT or BSD licenses.", 46 | }, 47 | ]; 48 | -------------------------------------------------------------------------------- /components/data/roadmapList.ts: -------------------------------------------------------------------------------- 1 | export const roadmapList = [ 2 | { name: 'How To Contribute', link: '/roadmaps/how-to-contribute' }, 3 | { 4 | name: 'Contribution Management', 5 | link: '/roadmaps/contribution-management' 6 | }, 7 | { name: 'Open Source Philosophy', link: '/roadmaps/open-source-philosophy' }, 8 | { name: 'Open Souce Licenses', link: '/roadmaps/open-source-licenses' }, 9 | { 10 | name: 'Overview of Documentation', 11 | link: '/roadmaps/overview-of-documentation' 12 | }, 13 | { 14 | name: 'Legal And Ethical Considerations', 15 | link: '/roadmaps/legal-and-ethical-considerations' 16 | }, 17 | { 18 | name: 'Open Source Terminology', 19 | link: '/roadmaps/open-source-terminology' 20 | }, 21 | { name: 'Portfolio', link: '/roadmaps/portfolio' }, 22 | { name: 'Discussions', link: '/community/discussions' }, 23 | { name: 'Events', link: '/community/events' }, 24 | { name: 'Resources', link: '/resources/resources' }, 25 | { name: 'AI Tools', link: '/ai/ai' }, 26 | { name: 'IDEs', link: '/tools/ide' } 27 | ] 28 | -------------------------------------------------------------------------------- /components/frameworkComponents/AngularFramework.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const AngularFramework = () => { 3 | return ( 4 |
5 |
6 |
7 | Angular 12 |
13 | 14 |

What is Angular?

15 |

16 | Angular is a platform for building mobile and desktop web 17 | applications, developed by Google. It offers a comprehensive set of 18 | tools for developing complex and scalable apps, including dependency 19 | injection, declarative templates, end-to-end tooling, and much more. 20 |

21 | 22 |

Why Use Angular?

23 |

24 | Angular is a mature, robust, and powerful framework that provides a 25 | wide range of features out of the box. These include two-way data 26 | binding, a rich component-based architecture, and strong community 27 | support. It’s an excellent choice for enterprise-level applications or 28 | for projects that require scalability and maintainability. 29 |

30 | 31 |

Angular Best Practices

32 |
    33 |
  • - Use Angular CLI for boilerplate and project generation.
    • 34 |
  • - Adopt lazy loading to improve performance.
    • 35 |
  • 36 | - Use async/await for readable and maintainable asynchronous code. 37 |
    • 38 |
  • 39 | - Make use of Angular’s RxJS library for reactive programming. 40 |
    • 41 |
  • 42 | - Follow the official Angular Style Guide for consistent code. 43 |
    • 44 |
45 |
46 | 52 | Angular - Official Documentation 53 | 54 |
55 |
56 | ); 57 | }; 58 | 59 | export default AngularFramework; 60 | -------------------------------------------------------------------------------- /components/frameworkComponents/D3JS.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const D3JSLibrary = () => { 3 | return ( 4 |
5 |
6 |
7 | D3.js 12 |
13 | 14 |

What is D3.js?

15 |

16 | D3 (or D3.js) is a free, open-source JavaScript library for 17 | visualizing data. Its low-level approach built on web standards offers 18 | unparalleled flexibility in authoring dynamic, data-driven graphics. 19 | For more than a decade D3 has powered groundbreaking and award-winning 20 | visualizations, become a foundational building block of higher-level 21 | chart libraries, and fostered a vibrant community of data 22 | practitioners around the world. 23 |

24 | 25 |

Why Use D3.js?

26 |

27 | The name “D3” is short for data-driven documents, where documents 28 | refers to the Document Object Model (DOM) standard that represents the 29 | contents of a webpage. While some of D3’s modules (such as selections 30 | and transitions) touch the DOM, others (including scales and shapes) 31 | only operate on data. D3 can also be paired with web frameworks such 32 | as React, Vue, and Svelte. 33 |

34 | 35 |

36 | D3.js Best Practices and Coding Style Guide 37 |

38 |
    39 |
  • Choose the right chart type.
    • 40 |
  • Optimize the data processing.
    • 41 |
  • Use scales and axes wisely.
    • 42 |
  • Add interactivity and animation.
    • 43 |
  • Apply design principles.
    • 44 |
  • Test and debug.
    • 45 |
46 | 47 |
48 | 54 | D3.js - Official Documentation 55 | 56 |
57 |
58 | ) 59 | } 60 | 61 | export default D3JSLibrary 62 | -------------------------------------------------------------------------------- /components/frameworkComponents/ExpressFramework.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const ExpressFramework = () => { 3 | return ( 4 |
5 |
6 |
7 | Express.js 12 |
13 | 14 |

What is Express.js?

15 |

16 | Express (or Express.js) is a fast, unopinionated, and minimalist web 17 | framework for Node.js. Developed as part of the Node.js ecosystem, 18 | it's designed to simplify tasks like setting up the server, 19 | routing, interacting with databases, and more. 20 |

21 | 22 |

Why Use Express.js?

23 |

24 | Express provides a robust set of features for both web and mobile 25 | applications. It offers a thin layer of fundamental web application 26 | features without obscuring Node.js features. This makes it flexible, 27 | scalable, and very popular for building APIs, especially in the 28 | context of SPAs (Single Page Applications) and microservice 29 | architectures. 30 |

31 | 32 |

Express.js Best Practices

33 |
    34 |
  • - Structure your application using the MVC pattern.
    • 35 |
  • - Use middlewares for reusable features.
    • 36 |
  • - Utilize environment variables for configuration.
    • 37 |
  • 38 | - Handle errors effectively through centralized error handling. 39 |
    • 40 |
  • - Monitor performance and maintain scalability.
    • 41 |
42 | 43 |
44 | 50 | Express.js - Official Documentation 51 | 52 |
53 |
54 | ); 55 | }; 56 | 57 | export default ExpressFramework; 58 | -------------------------------------------------------------------------------- /components/frameworkComponents/FlaskFramework.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const FlaskFramework = () => { 3 | return ( 4 |
5 |
6 |
7 | Flask 12 |
13 | 14 |

What is Flask?

15 |

16 | Flask is a lightweight, micro web framework written in Python. Created 17 | by Armin Ronacher, it was released in 2010. It is designed for small 18 | and medium web applications and offers the essentials to get an app up 19 | and running. It follows the WSGI standard and is compatible with 20 | various other libraries and extensions. 21 |

22 | 23 |

Why Use Flask?

24 |

25 | Flask is known for its simplicity and ease of use. It offers a lot of 26 | flexibility and does not impose any project layout, making it suitable 27 | for both small and large applications. Flask has built-in support for 28 | unit testing, RESTful request dispatching, and contains a fast 29 | debugger and integrated support for secure cookies. 30 |

31 | 32 |

33 | Flask Best Practices and Coding Style Guide 34 |

35 |
    36 |
  • - Follow the PEP 8 coding style for Python.
    • 37 |
  • 38 | - Use Blueprints for better structure and reusable components. 39 |
    • 40 |
  • 41 | - Leverage Flask extensions like Flask-SQLAlchemy for databases. 42 |
    • 43 |
  • - Implement proper error handling.
    • 44 |
  • - Use environment variables for configuration settings.
    • 45 |
46 | 47 |
48 | 54 | Flask - Official Documentation 55 | 56 |
57 |
58 | ); 59 | }; 60 | 61 | export default FlaskFramework; 62 | -------------------------------------------------------------------------------- /components/frameworkComponents/FlutterFramework.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const FlutterFramework = () => { 3 | return ( 4 |
5 |
6 |
7 | Flutter 12 |
13 | 14 |

What is Flutter?

15 |

16 | Flutter is an open-source UI toolkit for building natively compiled 17 | applications for mobile, web, and desktop from a single codebase. 18 | Developed by Google, Flutter allows developers to craft high-quality 19 | native interfaces on both iOS and Android platforms. 20 |

21 | 22 |

Why Use Flutter?

23 |

24 | Flutter offers a robust set of widgets and a highly customizable UI, 25 | enabling a rich user experience. It allows developers to write code 26 | once and run it on multiple platforms, reducing both development time 27 | and cost. Its hot-reload feature enhances developer productivity by 28 | allowing instant updates without losing the app state. Flutter also 29 | has a strong community and a wide range of plugins, making it easier 30 | to add functionality to apps. 31 |

32 | 33 |

34 | Flutter Best Practices and Coding Style Guide 35 |

36 |
    37 |
  • - Make use of Flutter’s extensive set of widgets.
    • 38 |
  • 39 | - Use state management solutions like Provider or Riverpod for 40 | better code organization. 41 |
    • 42 |
  • - Follow effective Dart style guide for better readability.
    • 43 |
  • 44 | - Leverage Flutter’s build-in animations for smoother user 45 | experiences. 46 |
    • 47 |
  • 48 | - Keep an eye on performance metrics and optimize accordingly. 49 |
    • 50 |
51 | 52 |
53 | 59 | Flutter - Official Documentation 60 | 61 |
62 |
63 | ); 64 | }; 65 | 66 | export default FlutterFramework; 67 | -------------------------------------------------------------------------------- /components/frameworkComponents/FrameworkNotSupported.tsx: -------------------------------------------------------------------------------- 1 | const FrameworkNotSupported = () => { 2 | return ( 3 |
4 |
5 |

Framework not supported

6 |
7 |
8 | ); 9 | }; 10 | 11 | export default FrameworkNotSupported; 12 | -------------------------------------------------------------------------------- /components/frameworkComponents/GatsbyFramework.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const GatsbyFramework = () => { 3 | return ( 4 |
5 |
6 |
7 | Gatsby.js 12 |
13 | 14 |

What is Gatsby?

15 |

16 | Gatsby (or Gatsby.js) is an open-source, modern website framework 17 | built on top of React. It leverages GraphQL and other data sources to 18 | generate static websites. Gatsby is widely praised for its performance 19 | optimization, which includes code splitting, image optimization, 20 | lazy-loading, and much more. 21 |

22 | 23 |

Why Use Gatsby?

24 |

25 | Gatsby provides a fast and secure way to build websites. Its focus on 26 | performance optimization makes for exceptionally quick load times. 27 | Gatsby's rich plugin ecosystem allows for flexible and powerful 28 | data sourcing and transformation. It's an excellent choice for 29 | SEO-focused websites and can be a powerful tool for building 30 | Progressive Web Apps (PWAs). 31 |

32 | 33 |

34 | Gatsby Best Practices and Coding Style Guide 35 |

36 |
    37 |
  • 38 | - Take advantage of the Gatsby Image API for optimized image 39 | loading. 40 |
    • 41 |
  • 42 | - Use GraphQL queries efficiently to pull in only the data you need. 43 |
    • 44 |
  • 45 | - Keep the 'gatsby-config.js' clean and well-organized. 46 |
    • 47 |
  • 48 | - Leverage Gatsby's server-side rendering for SEO benefits. 49 |
    • 50 |
  • - Always consider accessibility and use semantic HTML markup.
    • 51 |
52 | 53 |
54 | 60 | Gatsby - Official Documentation 61 | 62 |
63 |
64 | ); 65 | }; 66 | 67 | export default GatsbyFramework; 68 | -------------------------------------------------------------------------------- /components/frameworkComponents/LaravelFramework.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const LaravelFramework = () => { 3 | return ( 4 |
5 |
6 |
7 | Laravel 12 |
13 | 14 |

What is Laravel?

15 |

16 | Laravel is a free, open-source PHP web framework designed for the 17 | development of web applications. Created by Taylor Otwell in 2011, 18 | Laravel provides an elegant syntax and a variety of tools that make it 19 | easier for developers to tackle common web development tasks such as 20 | routing, caching, authentication, and more. 21 |

22 | 23 |

Why Use Laravel?

24 |

25 | Laravel has gained popularity for its ease of use, scalability, and 26 | modern toolkit. It comes with a powerful ORM called Eloquent, an 27 | elegant query builder, and a robust set of features for routing, 28 | sessions, and caching. It also includes a vibrant ecosystem of 29 | libraries and tools like Laravel Mix, Laravel Nova, and Laravel Vapor 30 | for various development needs. 31 |

32 | 33 |

34 | Laravel Best Practices and Coding Style Guide 35 |

36 |
    37 |
  • - Use Eloquent ORM for database interactions.
    • 38 |
  • - Follow PSR standards for code styling.
    • 39 |
  • 40 | - Leverage dependency injection and service providers for better 41 | code organization. 42 |
    • 43 |
  • - Utilize middleware for filtering HTTP requests.
    • 44 |
  • 45 | - Make use of Laravel’s validation methods to handle form 46 | validation. 47 |
    • 48 |
49 | 50 |
51 | 57 | Laravel - Official Documentation 58 | 59 |
60 |
61 | ); 62 | }; 63 | 64 | export default LaravelFramework; 65 | -------------------------------------------------------------------------------- /components/frameworkComponents/NextJSFramework.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const NextJSFramework = () => { 3 | return ( 4 |
5 |
6 |
7 | NextJS 12 |
13 | 14 |

What is Next.js?

15 |

16 | Next.js is an open-source development framework built on top of 17 | Node.js enabling React-based web applications functionalities such as 18 | server-side rendering and generating static websites. Developed and 19 | maintained by Vercel, it aims to make it easier to create performant 20 | and SEO-friendly web applications. 21 |

22 | 23 |

Why Use Next.js?

24 |

25 | Next.js offers features like pre-rendering, dynamic routing, and API 26 | routes out of the box. It provides a straightforward setup process and 27 | smart defaults, saving you time during development. The framework also 28 | boasts exceptional performance and optimization features such as 29 | automatic code splitting, server-side rendering, and static site 30 | generation. 31 |

32 | 33 |

34 | Next.js Best Practices and Coding Style Guide 35 |

36 |
    37 |
  • 38 | - Use the `getStaticProps` and `getServerSideProps` functions for 39 | data fetching. 40 |
    • 41 |
  • - Take advantage of Next.js’ built-in CSS and Sass support.
    • 42 |
  • 43 | - Utilize the built-in Image component for optimized image delivery. 44 |
    • 45 |
  • - Use the `Link` component for client-side navigation.
    • 46 |
  • 47 | - Follow the file and folder naming conventions provided by Next.js. 48 |
    • 49 |
50 | 51 |
52 | 58 | Next.js - Official Documentation 59 | 60 |
61 |
62 | ); 63 | }; 64 | 65 | export default NextJSFramework; 66 | -------------------------------------------------------------------------------- /components/frameworkComponents/RailsFramework.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const RailsFramework = () => { 3 | return ( 4 |
5 |
6 |
7 | Rails 12 |
13 | 14 |

What is Ruby on Rails?

15 |

16 | Ruby on Rails, often referred to as Rails, is a web application 17 | framework written in Ruby. Created by David Heinemeier Hansson and 18 | first released in 2004, Rails follows the model-view-controller (MVC) 19 | architectural pattern. It aims to simplify web application development 20 | by providing a collection of conventions and best practices, letting 21 | developers focus more on business logic rather than setup and 22 | configuration. 23 |

24 | 25 |

Why Use Ruby on Rails?

26 |

27 | Rails is known for its developer-friendly environment, rapid 28 | development capabilities, and strong community support. Its 29 | "onvention over configuration" and "don't repeat 30 | yourself" (DRY) principles make it easier to write clean, 31 | maintainable code. Rails also comes with a rich set of libraries and 32 | tools, providing built-in support for things like database migrations, 33 | testing, and RESTful API design. 34 |

35 | 36 |

37 | Ruby on Rails Best Practices and Coding Style Guide 38 |

39 |
    40 |
  • - Follow RESTful design principles for your resources.
    • 41 |
  • - Use partials to DRY up views.
    • 42 |
  • 43 | - Leverage Rails' built-in ActiveRecord for database queries. 44 |
    • 45 |
  • - Utilize background jobs for long-running tasks.
    • 46 |
  • 47 | - Keep business logic out of controllers and views; place it in 48 | models or service objects. 49 |
    • 50 |
51 | 52 |
53 | 59 | Ruby on Rails - Official Documentation 60 | 61 |
62 |
63 | ); 64 | }; 65 | 66 | export default RailsFramework; 67 | -------------------------------------------------------------------------------- /components/frameworkComponents/ReactLibrary.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const ReactLibrary = () => { 3 | return ( 4 |
5 |
6 |
7 | React 12 |
13 | 14 |

What is React?

15 |

16 | React (or React.js) is a JavaScript library for building user 17 | interfaces. Created and maintained by Facebook, it allows developers 18 | to create complex UIs from isolated and reusable components. React 19 | uses a virtual DOM to optimize rendering and improve performance. 20 |

21 | 22 |

Why Use React?

23 |

24 | React has several advantages including its component-based 25 | architecture, strong community support, and flexibility. Its reactive 26 | updates make it ideal for building dynamic and complex applications, 27 | while features like hooks and context make state management easier. 28 | Its compatibility with other libraries and tools like Redux and 29 | GraphQL make it extremely versatile. 30 |

31 | 32 |

33 | React Best Practices and Coding Style Guide 34 |

35 |
    36 |
  • 37 | - Use functional components and hooks for state and lifecycle 38 | features. 39 |
    • 40 |
  • - Employ JSX for better readability and maintainability.
    • 41 |
  • 42 | - Make components small and focused on a single responsibility. 43 |
    • 44 |
  • - Use PropTypes for type-checking.
    • 45 |
  • 46 | - Leverage code splitting and lazy loading to improve performance. 47 |
    • 48 |
49 | 50 |
51 | 57 | React - Official Documentation 58 | 59 |
60 |
61 | ); 62 | }; 63 | 64 | export default ReactLibrary; 65 | -------------------------------------------------------------------------------- /components/frameworkComponents/ReactNativeFramework.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const ReactNativeFramework = () => { 3 | return ( 4 |
5 |
6 |
7 | React Native 12 |
13 | 14 |

What is React Native?

15 |

16 | React Native is an open-source mobile application framework created by 17 | Facebook. It is used to build natively-rendered mobile applications 18 | for iOS and Android using JavaScript and React. Unlike hybrid 19 | frameworks, React Native compiles to native app components, which 20 | makes it possible to build mobile applications that are 21 | indistinguishable from those built with native languages like Swift or 22 | Kotlin. 23 |

24 | 25 |

Why Use React Native?

26 |

27 | React Native offers the advantage of code reusability across iOS and 28 | Android platforms, resulting in faster development cycles. It provides 29 | a rich ecosystem of libraries and tools, and its performance is 30 | comparable to native applications. It is particularly useful for teams 31 | that already have React experience, as it allows for a unified 32 | development process across web and mobile platforms. 33 |

34 | 35 |

36 | React Native Best Practices and Coding Style Guide 37 |

38 |
    39 |
  • 40 | - Optimize components with PureComponent or shouldComponentUpdate. 41 |
    • 42 |
  • 43 | - Use state management libraries like Redux or MobX for complex 44 | state logic. 45 |
    • 46 |
  • - Leverage native modules for computational-heavy tasks.
    • 47 |
  • - Utilize lazy loading and code splitting techniques.
    • 48 |
  • - Prioritize accessibility features for a more inclusive app.
    • 49 |
50 | 51 |
52 | 58 | React Native - Official Documentation 59 | 60 |
61 |
62 | ); 63 | }; 64 | 65 | export default ReactNativeFramework; 66 | -------------------------------------------------------------------------------- /components/frameworkComponents/SvelteFramework.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const SvelteFramework = () => { 3 | return ( 4 |
5 |
6 |
7 | Angular 12 |
13 | 14 |

What is Svelte?

15 |

16 | Svelte is a modern framework for building user interfaces. Unlike 17 | traditional frameworks that work on the client-side to manipulate the 18 | DOM, Svelte compiles components to highly efficient vanilla JavaScript 19 | at build time, eliminating the need for a virtual DOM. 20 |

21 | 22 |

Why Use Svelte?

23 |

24 | Svelte offers a simpler approach to building web applications by 25 | reducing the boilerplate code. The framework optimizes performance by 26 | eliminating the virtual DOM and updating the real DOM directly. This 27 | leads to faster rendering and a more straightforward development 28 | experience. 29 |

30 | 31 |

Svelte Best Practices

32 |
    33 |
  • - Use reactive statements for automatic updates.
    • 34 |
  • - Leverage Svelte stores for state management.
    • 35 |
  • - Prefer built-in actions over manually manipulating the DOM.
    • 36 |
  • - Use the Svelte compiler warnings and recommendations.
    • 37 |
  • 38 | - Take advantage of Svelte’s built-in transitions for animations. 39 |
    • 40 |
41 |
42 | 48 | Svelte - Official Documentation 49 | 50 |
51 |
52 | ); 53 | }; 54 | 55 | export default SvelteFramework; 56 | -------------------------------------------------------------------------------- /components/frameworkComponents/TailwindCSSFramework.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const TailwindCSSFramework = () => { 3 | return ( 4 |
5 |
6 |
7 | Tailwind CSS 12 |
13 | 14 |

What is Tailwind CSS?

15 |

16 | Tailwind CSS is a utility-first CSS framework that provides low-level 17 | utility classes to build designs directly in your markup. It is not a 18 | traditional framework with pre-designed components but instead offers 19 | a set of building blocks that you can combine to create custom and 20 | responsive designs quickly. 21 |

22 | 23 |

Why Use Tailwind CSS?

24 |

25 | Tailwind CSS promotes rapid development by allowing developers to 26 | style interfaces directly in the HTML, eliminating the need for 27 | context-switching between HTML and CSS files. It provides a highly 28 | configurable and extensible approach to styling, making it suitable 29 | for projects of various sizes. Tailwind CSS is especially popular 30 | among developers who appreciate the flexibility and control it offers 31 | over the styling process. 32 |

33 | 34 |

35 | Tailwind CSS Best Practices and Coding Style Guide 36 |

37 |
    38 |
  • 39 | - Embrace the utility-first approach for concise and maintainable 40 | styles. 41 |
    • 42 |
  • - Customize the configuration to match project requirements.
    • 43 |
  • 44 | - Use responsive design utilities for building mobile-friendly 45 | interfaces. 46 |
    • 47 |
  • - Leverage the plugin system for extending functionality.
    • 48 |
  • 49 | - Combine utility classes judiciously to maintain a clean and 50 | consistent codebase. 51 |
    • 52 |
53 |
54 | 60 | Tailwind CSS - Official Documentation 61 | 62 |
63 |
64 | ); 65 | }; 66 | 67 | export default TailwindCSSFramework; 68 | -------------------------------------------------------------------------------- /components/frameworkComponents/ThreeJSLibrary.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const ThreeJSLibrary = () => { 3 | return ( 4 |
5 |
6 |
7 | ThreeJS 12 |
13 | 14 |

What is Three.js?

15 |

16 | Three (or Three.js) is a 3D library that extends the Canvas API and 17 | WebGL. It offers a comprehensive set of features for creating and 18 | interacting with 3D designs and animations in web applications. First 19 | released on April 24, 2010, the library has received contributions 20 | from various developers to enhance its capabilities. It also utilizes 21 | the latest ES modules to improve both the library and the developer 22 | experience. 23 |

24 | 25 |

Why Use Three.js?

26 |

27 | Three.js comes with a robust set of features for delivering 28 | high-quality animations. It includes ready-to-use tools such as Mesh, 29 | Geometry, and Materials. The library supports various model types like 30 | GLB, GLTF, and OBJ and provides APIs for easy loading and interaction. 31 | Additionally, it has a strong community backing and a dedicated forum 32 | for support. 33 |

34 | 35 |

36 | Three.js Best Practices and Coding Style Guide 37 |

38 |
    39 |
  • Always check the browser console for error messages.
    • 40 |
  • 41 | Ensure you add light to your scene; otherwise, your objects may not 42 | be visible. 43 |
    • 44 |
  • 45 | Properly set up your camera to ensure all elements are within view. 46 |
    • 47 |
  • 48 | To keep your project responsive, adjust the window height and width 49 | by dividing them by 2. Add this logic to your resize event listener. 50 |
    • 51 |
52 | 53 |
54 | 60 | Three.js - Official Documentation 61 | 62 |
63 |
64 | ); 65 | }; 66 | 67 | export default ThreeJSLibrary; 68 | -------------------------------------------------------------------------------- /components/frameworkComponents/ViteFramework.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const ViteFramework = () => { 3 | return ( 4 |
5 |
6 |
7 | Vite 12 |
13 | 14 |

What is Vite?

15 |

16 | Vite is a modern front-end build tool and development server that 17 | leverages JavaScript's native ES modules. Created by Evan You, 18 | the same person behind the Vue.js framework, Vite offers extremely 19 | fast development and build times, out-of-the-box support for various 20 | modern web technologies, and advanced optimization capabilities. 21 |

22 | 23 |

Why Use Vite?

24 |

25 | Vite offers an incredibly fast development experience with features 26 | like Hot Module Replacement (HMR) and optimized builds. It uses the 27 | native ES modules in the browser, which allows for efficient code 28 | splitting and lazy loading without the need for complex bundler setup. 29 | Vite also comes with built-in support for TypeScript, JSX, CSS 30 | pre-processors, and other modern web technologies. 31 |

32 | 33 |

34 | Vite Best Practices and Coding Style Guide 35 |

36 |
    37 |
  • - Leverage the `vite.config.js` for custom configurations.
    • 38 |
  • 39 | - Use the built-in support for environment variables for 40 | configuration management. 41 |
    • 42 |
  • 43 | - Take advantage of the plugin system to extend Vite’s capabilities. 44 |
    • 45 |
  • - Keep dependencies up-to-date for optimal performance.
    • 46 |
  • 47 | - Use the `import.meta.env` for accessing environment variables. 48 |
    • 49 |
50 | 51 |
52 | 58 | Vite - Official Documentation 59 | 60 |
61 |
62 | ); 63 | }; 64 | 65 | export default ViteFramework; 66 | -------------------------------------------------------------------------------- /components/frameworkComponents/VueFramework.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const VueFramework = () => { 3 | return ( 4 |
5 |
6 |
7 | Vue 12 |
13 | 14 |

What is Vue.js?

15 |

16 | Vue (or Vue.js) is a progressive JavaScript framework for building 17 | user interfaces. Unlike monolithic frameworks, Vue is designed from 18 | the ground up to be incrementally adoptable. This makes it easy to 19 | integrate with projects using other technologies or to be used for 20 | standalone complex Single Page Applications. 21 |

22 | 23 |

Why Use Vue.js?

24 |

25 | Vue is known for its simplicity and ease of integration. Its core 26 | library focuses on the view layer only, making it easy to pick up and 27 | integrate with other libraries or existing projects. Vue is also 28 | extremely flexible, allowing you to structure your app the way you 29 | want it to be. Moreover, it has a vibrant community and ecosystem, 30 | with a wide array of reusable components and libraries. 31 |

32 | 33 |

Vue.js Best Practices

34 |
    35 |
  • - Always use `key` attribute when using `v-for` directive.
    • 36 |
  • 37 | - Make use of single-file components for better maintainability. 38 |
    • 39 |
  • - Use computed properties for optimized reactivity.
    • 40 |
  • 41 | - Structure your application using Vue’s official style guide. 42 |
    • 43 |
  • 44 | - Make use of Vuex for state management in larger applications. 45 |
    • 46 |
47 |
48 | 54 | Vue.js - Official Documentation 55 | 56 |
57 |
58 | ); 59 | }; 60 | 61 | export default VueFramework; 62 | -------------------------------------------------------------------------------- /components/gitComponents/GitCommands.ts: -------------------------------------------------------------------------------- 1 | export const gitCommands = [ 2 | { 3 | command: "git init", 4 | description: "Initialize a new Git repository in the current directory.", 5 | }, 6 | { 7 | command: "git clone ", 8 | description: "Clone a repository into a new directory.", 9 | }, 10 | { 11 | command: "git add ", 12 | description: "Add file(s) to the staging area.", 13 | }, 14 | { 15 | command: 'git commit -m ""', 16 | description: "Commit changes with a specific message.", 17 | }, 18 | { 19 | command: "git push ", 20 | description: "Push changes to a remote repository.", 21 | }, 22 | { 23 | command: "git pull ", 24 | description: 25 | "Fetch from and integrate with another repository or a local branch.", 26 | }, 27 | { command: "git status", description: "Show the working tree status." }, 28 | { command: "git log", description: "Show the commit logs." }, 29 | { 30 | command: "git branch", 31 | description: "List, create, or delete branches.", 32 | }, 33 | { 34 | command: "git checkout ", 35 | description: "Switch branches or restore working tree files.", 36 | }, 37 | { 38 | command: "git switch ", 39 | description: "Switch to another branch, creating it if necessary.", 40 | }, 41 | { 42 | command: "git merge ", 43 | description: "Merge changes from one branch into another.", 44 | }, 45 | { 46 | command: "git rebase ", 47 | description: "Reapply commits on top of another base tip.", 48 | }, 49 | { 50 | command: "git reset ", 51 | description: 52 | "Reset current HEAD to the specified state, optionally affecting staging area and working directory.", 53 | }, 54 | { 55 | command: "git fetch ", 56 | description: "Download objects and refs from another repository.", 57 | }, 58 | { 59 | command: "git remote add ", 60 | description: "Add a remote named for the repository at .", 61 | }, 62 | { 63 | command: "git stash", 64 | description: "Stash the changes in a dirty working directory away.", 65 | }, 66 | { 67 | command: "git tag", 68 | description: "Create, list, delete or verify a tag object signed with GPG.", 69 | }, 70 | { 71 | command: "git revert ", 72 | description: "Revert some existing commits.", 73 | }, 74 | { 75 | command: "git diff", 76 | description: "Show changes between commits, commit and working tree, etc.", 77 | }, 78 | ]; 79 | -------------------------------------------------------------------------------- /components/index/Contributors.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import Image from 'next/image' 3 | 4 | type Contributor = { 5 | id: string 6 | url: string 7 | avatar: string 8 | name: string 9 | } 10 | 11 | type ContributorsProps = { 12 | contributors: Contributor[] 13 | } 14 | 15 | export const Contributors: React.FC = ({ contributors }) => { 16 | const [failedImages, setFailedImages] = useState>({}) 17 | 18 | const handleImageError = (contributorId: string) => { 19 | setFailedImages(prev => ({ 20 | ...prev, 21 | [contributorId]: true 22 | })) 23 | } 24 | 25 | return ( 26 | 57 | ) 58 | } 59 | -------------------------------------------------------------------------------- /components/index/LazyImage.tsx: -------------------------------------------------------------------------------- 1 | import { useInView } from 'react-intersection-observer' 2 | import Image from 'next/image' 3 | import { motion } from 'framer-motion' 4 | 5 | type LazyImageProps = { 6 | src: string 7 | alt: string 8 | width: number 9 | height: number 10 | } 11 | 12 | const LazyImage: React.FC = ({ src, alt, width, height }) => { 13 | const { ref, inView } = useInView({ 14 | triggerOnce: true, 15 | rootMargin: '200px 0px' 16 | }) 17 | 18 | return ( 19 | 24 | {inView && ( 25 | {alt} 32 | )} 33 | 34 | ) 35 | } 36 | 37 | export default LazyImage 38 | -------------------------------------------------------------------------------- /components/index/Testimonials.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | import React from 'react' 3 | import { Testimonial as TestimonialType } from '../../types' 4 | 5 | const Testimonial: React.FC<{ testimonial: TestimonialType }> = ({ 6 | testimonial 7 | }) => { 8 | return ( 9 |
10 |
11 | 18 | 24 | 25 |
26 |
27 |

28 | {testimonial.text} 29 |

30 |
31 |
32 | 33 | {testimonial.name} 38 | 39 | 40 | {testimonial.name} 41 |
42 | 43 |
44 |
45 | ) 46 | } 47 | 48 | export default Testimonial 49 | -------------------------------------------------------------------------------- /components/languageComponents/ActionScriptLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const ActionScriptLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | ActionScriptLanguage 12 |
13 | 14 |

What is ActionScript?

15 |

16 | ActionScript 3 is an object-oriented programming language originally 17 | created by Macromedia Inc., which continued to evolve after being 18 | acquired by Adobe Systems. It is a superset of the ECMAScript standard 19 | (more widely known as JavaScript) with a stronger focus on classes, 20 | interfaces, and objects. 21 |

22 | 23 |

Why Use ActionScript?

24 |

25 | ActionScript is used primarily for the development of websites 26 | and software targeting the Adobe Flash platform, originally finding 27 | use on web pages in the form of embedded SWF files. ActionScript 3 28 | is also used with the Adobe AIR system for the development of desktop 29 | and mobile applications. 30 |

31 | 32 |

33 | ActionScript Best Practices and Coding Style Guide 34 |

35 |
    36 |
  • 37 | - The less AS used, the better the file performance. Always 38 | minimize the amount of code written to perform a given task. 39 |
    • 40 |
  • 41 | - Publish SWFs to Flash version 8 or better. 42 |
    • 43 |
  • 44 | - Avoid heavy string manipulation. 45 |
    • 46 |
  • 47 | - Do not use 'with' statements inside functions. This operator turns off optimizations. 48 |
    • 49 |
  • 50 | - Use the "var" keyword whenever possible. 51 |
    • 52 |
53 |
54 | 60 | ActionScript - Official Documentation 61 | 62 |
63 |
64 | ); 65 | }; 66 | 67 | export default ActionScriptLanguage; 68 | -------------------------------------------------------------------------------- /components/languageComponents/BashLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const BashLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Bash 12 |
13 | 14 |

What is Bash?

15 |

16 | Bash (Bourne Again SHell) is a Unix shell and command language 17 | interpreter. It was developed as an enhanced version of the Bourne 18 | Shell and has been the default shell for Linux and macOS. Bash is 19 | widely used for its command-line and scripting capabilities. 20 |

21 | 22 |

Why Use Bash?

23 |

24 | Bash is versatile and allows for a wide range of tasks including file 25 | manipulation, program execution, and even network communications. It 26 | is especially powerful when combined with other Unix utilities like 27 | awk, sed, and grep. Bash scripting can automate repetitive tasks, 28 | making it invaluable for system administration. 29 |

30 | 31 |

32 | Bash Best Practices and Coding Style Guide 33 |

34 |
    35 |
  • 36 | - Always use double quotes around variables to avoid re-splitting. 37 |
    • 38 |
  • - Prefer `[[ ]]` over `[ ]` for tests.
    • 39 |
  • - Use `$()` for command substitution rather than backticks.
    • 40 |
  • - Check the exit status of commands you run.
    • 41 |
  • 42 | - Use functions to encapsulate complex logic or reusable code. 43 |
    • 44 |
45 |
46 | 52 | GNU Bash - Official Documentation 53 | 54 |
55 |
56 | ) 57 | } 58 | 59 | export default BashLanguage 60 | -------------------------------------------------------------------------------- /components/languageComponents/CLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const CLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | C 12 |
13 | 14 |

What is C?

15 |

16 | C is a general-purpose, procedural programming language that was 17 | originally designed for system programming. Developed in 1972 by 18 | Dennis Ritchie at Bell Labs, it has become one of the most widely used 19 | programming languages. It provides low-level access to computer memory 20 | and is the basis for other languages like C++, C#, and Objective-C. 21 |

22 | 23 |

Why Use C?

24 |

25 | C is known for its performance and it's used for system software, 26 | including operating systems and embedded system applications. Being 27 | highly portable, code written in C can be run on different types of 28 | computer hardware. The language is simple and offers a great degree of 29 | control, but this comes at the expense of abstraction and some modern 30 | comforts. 31 |

32 | 33 |

34 | C Best Practices and Coding Style Guide 35 |

36 |
    37 |
  • - Always include header guards in your header files.
    • 38 |
  • 39 | - Use meaningful names for variables, functions, and other 40 | identifiers. 41 |
    • 42 |
  • - Comment your code and maintain good indentation.
    • 43 |
  • - Always initialize variables.
    • 44 |
  • 45 | - Prefer using local variables and pass them as function arguments. 46 |
    • 47 |
48 |
49 | 55 | C Standard Library - Documentation 56 | 57 |
58 |
59 | ); 60 | }; 61 | 62 | export default CLanguage; 63 | -------------------------------------------------------------------------------- /components/languageComponents/CPPLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const CPPLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | C++ 12 |
13 | 14 |

What is C++?

15 |

16 | C++ is a general-purpose programming language created as an extension 17 | of the C programming language. Developed by Bjarne Stroustrup in 1983, 18 | C++ includes features like classes, inheritance, and polymorphism, 19 | effectively adding object-oriented capabilities to C. 20 |

21 | 22 |

Why Use C++?

23 |

24 | C++ offers a blend of high- and low-level language features, enabling 25 | both system-level memory manipulation and abstract object-oriented 26 | programming. It is widely used in system software, game development, 27 | embedded systems, and performance-critical applications. 28 |

29 | 30 |

31 | C++ Best Practices and Coding Style Guide 32 |

33 |
    34 |
  • 35 | - Use RAII (Resource Acquisition Is Initialization) for resource 36 | management. 37 |
    • 38 |
  • - Prefer `std::vector` and `std::array` over C-style arrays.
    • 39 |
  • - Make use of the Standard Template Library (STL).
    • 40 |
  • - Use `nullptr` instead of `NULL` or `0` for pointers.
    • 41 |
  • 42 | - Always include proper header guards and prefer `#pragma once` if 43 | supported. 44 |
    • 45 |
46 |
47 | 53 | C++ Standard Library - Documentation 54 | 55 |
56 |
57 | ); 58 | }; 59 | 60 | export default CPPLanguage; 61 | -------------------------------------------------------------------------------- /components/languageComponents/CSSLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const CSSLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | CSS3 12 |
13 | 14 |

What is CSS?

15 |

16 | CSS (Cascading Style Sheets) is a stylesheet language used for 17 | describing the look and formatting of a document written in HTML. CSS 18 | describes how elements should be rendered on screen, on paper, in 19 | speech, or on other media. 20 |

21 | 22 |

Why Use CSS?

23 |

24 | CSS enables the separation of presentation and content, including 25 | layout, colors, and fonts. This makes it easier to maintain websites, 26 | share styles across multiple pages, and tailor pages to different 27 | environments. It's also essential for responsive design and 28 | enhancing the user experience. 29 |

30 | 31 |

32 | CSS Best Practices and Coding Style Guide 33 |

34 |
    35 |
  • - Use classes over IDs for reusable components.
    • 36 |
  • - Stick to a naming convention like BEM or SMACSS.
    • 37 |
  • - Keep your styles modular and organized.
    • 38 |
  • - Use shorthand properties where applicable.
    • 39 |
  • 40 | - Prefer using relative units like `em` and `rem` over absolute 41 | units like `px`. 42 |
    • 43 |
44 |
45 | 51 | MDN - CSS Documentation 52 | 53 |
54 |
55 | ); 56 | }; 57 | 58 | export default CSSLanguage; 59 | -------------------------------------------------------------------------------- /components/languageComponents/CSharpLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const CSharpLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | C# 12 |
13 | 14 |

What is C#?

15 |

16 | C# (pronounced "C-Sharp") is a high-level, statically-typed, 17 | object-oriented programming language developed by Microsoft. It was 18 | first released in 2000 as part of the .NET framework. C# is designed 19 | to be a simple, modern, and type-safe language. 20 |

21 | 22 |

Why Use C#?

23 |

24 | C# is versatile and can be used to develop a wide variety of 25 | applications, from desktop to web and mobile applications. It provides 26 | a large standard library, strong type checking, and robust debugging 27 | features. It's commonly used for building Windows desktop 28 | applications and games using Unity. 29 |

30 | 31 |

32 | C# Best Practices and Coding Style Guide 33 |

34 |
    35 |
  • 36 | - Use PascalCase for method and property names, and camelCase for 37 | local variables. 38 |
    • 39 |
  • - Make use of properties instead of public fields.
    • 40 |
  • - Leverage LINQ for data manipulation.
    • 41 |
  • - Always encapsulate collection fields using properties.
    • 42 |
  • - Use `async` and `await` for asynchronous programming.
    • 43 |
44 |
45 | 51 | C# - Official Documentation 52 | 53 |
54 |
55 | ); 56 | }; 57 | 58 | export default CSharpLanguage; 59 | -------------------------------------------------------------------------------- /components/languageComponents/ClojureLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const ClojureLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Clojure 12 |
13 | 14 |

What is Clojure?

15 |

16 | Clojure is a modern, functional programming language that runs on the 17 | Java Virtual Machine (JVM). It was created by Rich Hickey and released 18 | in 2007. Clojure is designed to be a general-purpose language, with an 19 | emphasis on simplicity, immutability, and leveraging the power of 20 | concurrent programming. 21 |

22 | 23 |

Why Use Clojure?

24 |

25 | Clojure offers several advantages such as high performance via JVM, 26 | simplicity with its small set of powerful language constructs, and 27 | strong support for concurrent programming. It's also highly 28 | extensible and has a robust ecosystem, making it a solid choice for a 29 | variety of software projects, including web services and data 30 | analytics applications. 31 |

32 | 33 |

34 | Clojure Best Practices and Coding Style Guide 35 |

36 |
    37 |
  • - Prioritize immutability and pure functions.
    • 38 |
  • - Utilize Clojure's standard library effectively.
    • 39 |
  • - Make use of namespaces to organize code.
    • 40 |
  • - Adopt the REPL-driven development for rapid iterations.
    • 41 |
  • - Write unit tests and leverage Clojure’s testing frameworks.
    • 42 |
43 |
44 | 50 | Clojure - Official Documentation 51 | 52 |
53 |
54 | ); 55 | }; 56 | 57 | export default ClojureLanguage; 58 | -------------------------------------------------------------------------------- /components/languageComponents/CoffeeScriptLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const CoffeeScriptLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | CoffeeScript 12 |
13 | 14 |

What is CoffeeScript?

15 |

16 | CoffeeScript is a programming language that transcompiles to 17 | JavaScript. It aims to make JavaScript code more readable and concise, 18 | offering a syntax that is more consistent and expressive. CoffeeScript 19 | compiles one-to-one into the equivalent JS and offers no runtime 20 | overhead. 21 |

22 | 23 |

Why Use CoffeeScript?

24 |

25 | Using CoffeeScript can help you write cleaner and more maintainable 26 | code. Its syntax encourages the use of good programming practices and 27 | also comes with some additional features that don't exist in 28 | JavaScript, like array comprehensions. However, note that it adds an 29 | additional compilation step and may not be suitable for all projects. 30 |

31 | 32 |

33 | CoffeeScript Best Practices and Coding Style Guide 34 |

35 |
    36 |
  • - Favor immutability and avoid using mutable data structures.
    • 37 |
  • - Make liberal use of whitespace for better readability.
    • 38 |
  • 39 | - Utilize CoffeeScript's syntactic sugar but avoid being overly 40 | clever. 41 |
    • 42 |
  • - Keep lines of code short and functions small.
    • 43 |
  • - Always be explicit about what your code is doing.
    • 44 |
45 |
46 | 52 | CoffeeScript - Official Documentation 53 | 54 |
55 |
56 | ); 57 | }; 58 | 59 | export default CoffeeScriptLanguage; 60 | -------------------------------------------------------------------------------- /components/languageComponents/DartLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const DartLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Dart 12 |
13 | 14 |

What is Dart?

15 |

16 | Dart is an object-oriented, class-based programming language developed 17 | by Google. Initially released in 2011, it is designed for ease of use, 18 | strong support for modern web workflows, and robustness. Dart is used 19 | for building web, server, and mobile applications, and is also the 20 | language behind Flutter, Google's UI toolkit for building 21 | natively compiled applications for mobile, web, and desktop. 22 |

23 | 24 |

Why Use Dart?

25 |

26 | Dart offers a blend of performance and productivity features. It is 27 | strongly typed, yet flexible, with a familiar syntax for Java and C# 28 | developers. Dart has a robust standard library and package ecosystem, 29 | and it can compile to native code for high performance across 30 | platforms. It is particularly popular for Flutter development. 31 |

32 | 33 |

34 | Dart Best Practices and Coding Style Guide 35 |

36 |
    37 |
  • 38 | - Follow the effective Dart guidelines for more idiomatic Dart code. 39 |
    • 40 |
  • 41 | - Use asynchronous programming constructs when dealing with IO-bound 42 | work. 43 |
    • 44 |
  • 45 | - Take advantage of Dart’s strong type system to catch errors early. 46 |
    • 47 |
  • 48 | - Keep dependencies up to date and adhere to semantic versioning. 49 |
    • 50 |
  • 51 | - Write unit and integration tests to ensure code reliability. 52 |
    • 53 |
54 |
55 | 61 | Dart - Official Documentation 62 | 63 |
64 |
65 | ); 66 | }; 67 | 68 | export default DartLanguage; 69 | -------------------------------------------------------------------------------- /components/languageComponents/DelphiLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const DelphiLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Delphi 12 |
13 | 14 |

What is Delphi?

15 |

16 | Delphi is a powerful and versatile programming language and integrated 17 | development environment (IDE) known for its rapid application 18 | development capabilities. It was originally developed by Borland, now 19 | Embarcadero Technologies, and is based on the Object Pascal language. 20 |

21 | 22 |

Why Use Delphi?

23 |

24 | Delphi is widely used for building Windows desktop applications and has 25 | a strong focus on creating user-friendly, visual applications. It 26 | offers a comprehensive library of components and supports database 27 | connectivity, making it suitable for various software development 28 | projects, including database-driven applications and GUI-based tools. 29 |

30 | 31 |

Delphi Best Practices and Tips

32 |
    33 |
  • - Familiarize yourself with the Delphi component library.
    • 34 |
  • - Leverage visual design tools for GUI development.
    • 35 |
  • - Practice good software architecture principles for maintainability.
    • 36 |
  • - Explore Delphi's support for multi-platform development.
    • 37 |
  • - Stay updated with the latest Delphi releases and community resources.
    • 38 |
39 |
40 | 46 | Learn more about Delphi on Embarcadero's website 47 | 48 |
49 |
50 | ); 51 | }; 52 | 53 | export default DelphiLanguage; 54 | -------------------------------------------------------------------------------- /components/languageComponents/ElixirLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const ElixirLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Elixir 12 |
13 | 14 |

What is Elixir?

15 |

16 | Elixir is a functional, concurrent programming language built on the 17 | reliable and concurrent Erlang VM. Created by José Valim, Elixir was 18 | designed for building scalable and maintainable applications, with a 19 | focus on real-time processing and fault tolerance. 20 |

21 | 22 |

Why Use Elixir?

23 |

24 | Elixir is well-suited for applications that demand high concurrency, 25 | low latency, and fault tolerance. It has found great success in fields 26 | like telecommunications, IoT, and web development. Elixir has strong 27 | support for metaprogramming, allowing for macro specification. The 28 | language also offers powerful libraries for asynchronous programming 29 | and supports distributed computing. 30 |

31 | 32 |

33 | Elixir Best Practices and Coding Style Guide 34 |

35 |
    36 |
  • - Prefer pattern matching over unwrapping values manually.
    • 37 |
  • - Use recursion for looping constructs.
    • 38 |
  • 39 | - Write small, reusable functions and avoid side effects when 40 | possible. 41 |
    • 42 |
  • 43 | - Adhere to Elixir's community coding standards for 44 | consistency. 45 |
    • 46 |
  • 47 | - Make use of the mix tool for dependency management and tasks. 48 |
    • 49 |
50 |
51 | 57 | Elixir - Official Documentation 58 | 59 |
60 |
61 | ); 62 | }; 63 | 64 | export default ElixirLanguage; 65 | -------------------------------------------------------------------------------- /components/languageComponents/ErlangLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const ErlangLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Erlang 12 |
13 | 14 |

What is Erlang?

15 |

16 | Erlang is a functional, concurrent, general-purpose programming 17 | language and runtime environment. Developed by Ericsson in the late 18 | 1980s, it was initially designed for telecommunication systems but has 19 | since found applications in various other sectors like ecommerce, 20 | computer telephony, and instant messaging. 21 |

22 | 23 |

Why Use Erlang?

24 |

25 | Erlang is well-suited for systems that are distributed, 26 | fault-tolerant, and soft real-time. It has strong support for 27 | concurrent processes and offers features for hot-swapping running 28 | code, making it easier to upgrade systems without downtime. 29 |

30 | 31 |

32 | Erlang Best Practices and Coding Style Guide 33 |

34 |
    35 |
  • - Make use of pattern matching and recursion for logic flow.
    • 36 |
  • 37 | - Follow the "Let it crash" philosophy for error-handling. 38 |
    • 39 |
  • 40 | - Leverage OTP (Open Telecom Platform) for building robust 41 | applications. 42 |
    • 43 |
  • - Keep functions small and focused.
    • 44 |
  • - Document your code using meaningful comments.
    • 45 |
46 |
47 | 53 | Erlang - Official Documentation 54 | 55 |
56 |
57 | ); 58 | }; 59 | 60 | export default ErlangLanguage; 61 | -------------------------------------------------------------------------------- /components/languageComponents/FSharpLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const FSharpLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | F# 12 |
13 | 14 |

What is F#?

15 |

16 | F# (pronounced F-sharp) is a strongly-typed, multi-paradigm 17 | programming language that runs on the .NET framework. Developed by 18 | Microsoft and first released in 2005, F# combines functional, 19 | imperative, and object-oriented programming features. It is 20 | particularly well-suited for tasks like data analysis, scientific 21 | computing, and web development. 22 |

23 | 24 |

Why Use F#?

25 |

26 | F# offers a concise and expressive syntax, enabling developers to 27 | write clean and maintainable code. Its strong type system helps catch 28 | errors at compile-time, while the language's functional features 29 | encourage immutability and safe concurrency patterns. F# also 30 | integrates well with the extensive .NET library, providing a rich 31 | ecosystem for development. 32 |

33 | 34 |

35 | F# Best Practices and Coding Style Guide 36 |

37 |
    38 |
  • 39 | - Use pattern matching for greater code readability and 40 | maintainability. 41 |
    • 42 |
  • 43 | - Leverage type inference but also provide explicit type annotations 44 | for clarity. 45 |
    • 46 |
  • 47 | - Prefer immutability and utilize F#'s immutable collections. 48 |
    • 49 |
  • 50 | - Make use of discriminated unions and record types for domain 51 | modeling. 52 |
    • 53 |
  • 54 | - Employ F#'s async capabilities for handling asynchronous 55 | tasks efficiently. 56 |
    • 57 |
58 | 59 |
60 | 66 | F# - Official Documentation 67 | 68 |
69 |
70 | ); 71 | }; 72 | 73 | export default FSharpLanguage; 74 | -------------------------------------------------------------------------------- /components/languageComponents/FortranLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const FortranLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Fortran 12 |
13 | 14 |

What is Fortran?

15 |

16 | Fortran, short for Formula Translation, is a high-level, 17 | general-purpose programming language that was developed in the 1950s 18 | for scientific and engineering applications. It is one of the oldest 19 | programming languages and is particularly strong in numerical and 20 | computational tasks. 21 |

22 | 23 |

Why Use Fortran?

24 |

25 | Fortran remains a language of choice for high-performance computing 26 | and is commonly used in scientific research. Its syntax is designed to 27 | be simple and straightforward, and modern Fortran standards have added 28 | support for object-oriented, modular, and generic programming. 29 |

30 | 31 |

32 | Fortran Best Practices and Coding Style Guide 33 |

34 |
    35 |
  • - Use explicit data types for variable declarations.
    • 36 |
  • - Leverage modular programming to structure your code.
    • 37 |
  • - Stick to a consistent naming convention.
    • 38 |
  • - Employ comments to explain complex code logic.
    • 39 |
  • - Use version control for project management.
    • 40 |
41 |
42 | 48 | Fortran - Learning Resources 49 | 50 |
51 |
52 | ); 53 | }; 54 | 55 | export default FortranLanguage; 56 | -------------------------------------------------------------------------------- /components/languageComponents/GoLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const GoLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Go 12 |
13 | 14 |

What is Go?

15 |

16 | Go, also known as Golang, is a statically typed, compiled programming 17 | language designed at Google. It was created to improve programming 18 | productivity, reliability, and efficiency. Released in 2009, Go has 19 | gained popularity for its simplicity, performance, and strong support 20 | for concurrency. 21 |

22 | 23 |

Why Use Go?

24 |

25 | Go offers a balance of performance and ease of use. Its 26 | straightforward syntax and built-in features for concurrency make it 27 | ideal for modern, scalable applications. Go is also well-suited for 28 | cloud computing, microservices, and other distributed systems. Its 29 | compiled nature allows for fast execution and a smaller memory 30 | footprint. 31 |

32 | 33 |

34 | Go Best Practices and Coding Style Guide 35 |

36 |
    37 |
  • 38 | - Follow the official Go coding style, often enforced by the `gofmt` 39 | tool. 40 |
    • 41 |
  • - Make use of interfaces for cleaner and more flexible code.
    • 42 |
  • 43 | - Write unit tests and benchmarks, utilizing Go’s built-in testing 44 | library. 45 |
    • 46 |
  • - Leverage goroutines and channels for efficient concurrency.
    • 47 |
  • - Use Go modules for dependency management.
    • 48 |
49 |
50 | 56 | Go - Official Documentation 57 | 58 |
59 |
60 | ); 61 | }; 62 | 63 | export default GoLanguage; 64 | -------------------------------------------------------------------------------- /components/languageComponents/GroovyLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const GroovyLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Groovy 12 |
13 | 14 |

What is Apache Groovy?

15 |

16 | Apache Groovy is a dynamic, optionally typed language running on the 17 | Java Virtual Machine (JVM). It's concise, Java-compatible, and 18 | often used for scripting, offering features like dynamic typing, 19 | metaprogramming, and integration with Java libraries. 20 |

21 | 22 |

Why Use Apache Groovy?

23 |

24 | Apache Groovy is chosen by developers for its dynamic typing, seamless 25 | compatibility with Java, and scripting capabilities, making it ideal 26 | for automation, configuration, and rapid development. Its 27 | metaprogramming features further enhance flexibility, allowing dynamic 28 | class and object modifications. Overall, Groovy is valued for its 29 | ability to simplify coding and enhance productivity. 30 |

31 | 32 |

33 | Apache Groovy Best Practices and Coding Style Guide 34 |

35 |
    36 |
  • 37 | - Semicolons are optional, and it's more idiomatic to omit 38 | them. 39 |
    • 40 |
  • 41 | - The last expression in a method body is automatically returned. 42 |
    • 43 |
  • - Use def or specify a type for variables.
    • 44 |
  • - By default, classes and methods are considered public.
    • 45 |
  • 46 | - In Groovy, == corresponds to Java's equals(), and is() is 47 | used for reference equality comparisons. 48 |
    • 49 |
50 |
51 | 57 | Apache Groovy - Official Documentation 58 | 59 |
60 |
61 | ); 62 | }; 63 | 64 | export default GroovyLanguage; 65 | -------------------------------------------------------------------------------- /components/languageComponents/HTMLLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const HTMLLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | HTML5 12 |
13 | 14 |

What is HTML?

15 |

16 | HTML (HyperText Markup Language) is the standard markup language used 17 | to create web pages. It structures the content on the web, allowing 18 | you to define elements such as headings, paragraphs, links, and 19 | multimedia. HTML is a foundational technology upon which the entire 20 | web is built. 21 |

22 | 23 |

Why Use HTML?

24 |

25 | HTML is essential for web development and is universally supported 26 | across all web browsers. It is simple to learn, yet powerful, 27 | providing the flexibility to create complex web applications. HTML 28 | also integrates seamlessly with other web technologies like CSS for 29 | styling and JavaScript for functionality. 30 |

31 | 32 |

33 | HTML Best Practices and Coding Style Guide 34 |

35 |
    36 |
  • 37 | - Use semantic HTML elements to improve the structure and 38 | readability of your code. 39 |
    • 40 |
  • - Always declare the document type and character set.
    • 41 |
  • - Use lowercase tag names and attribute names.
    • 42 |
  • 43 | - Always close your tags and keep the nesting clear and indented. 44 |
    • 45 |
  • 46 | - Use alt attributes for images to make the content more accessible. 47 |
    • 48 |
49 |
50 | 56 | MDN - HTML Documentation 57 | 58 |
59 |
60 | ); 61 | }; 62 | 63 | export default HTMLLanguage; 64 | -------------------------------------------------------------------------------- /components/languageComponents/HTMXLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const HTMXLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | HTMX 12 |
13 | 14 |

What is HTMX?

15 |

16 | HTMX is a modern tool that allows you to access AJAX, CSS Transitions, 17 | WebSockets, and Server Sent Events directly in HTML, using attributes, 18 | so you can build modern user interfaces with the simplicity and power 19 | of hypertext. 20 |

21 | 22 |

Why Use HTMX?

23 |

24 | HTMX offers a way to build modern web applications without 25 | complicating your development process with JavaScript. It brings the 26 | power of modern web technologies directly into HTML, allowing 27 | developers to build complex interfaces without leaving their comfort 28 | zone. 29 |

30 | 31 |

32 | HTMX Best Practices and Coding Style Guide 33 |

34 |
    35 |
  • 36 | - Utilize the `hx-*` attributes effectively to make interactions 37 | clear. 38 |
    • 39 |
  • 40 | - Use `hx-swap` and `hx-swap-oob` to define how content should be 41 | swapped out. 42 |
    • 43 |
  • 44 | - Use `hx-trigger` to determine when an action should be triggered. 45 |
    • 46 |
  • 47 | - Take advantage of `hx-push-url` for modifying the browser's 48 | history. 49 |
    • 50 |
  • 51 | - Ensure server responses are appropriately structured for the 52 | expected behavior. 53 |
    • 54 |
55 |
56 | 62 | HTMX - Official Documentation 63 | 64 |
65 |
66 | ); 67 | }; 68 | 69 | export default HTMXLanguage; 70 | -------------------------------------------------------------------------------- /components/languageComponents/HaskellLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const HaskellLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Haskell 12 |
13 | 14 |

What is Haskell?

15 |

16 | Haskell is a purely functional programming language that emphasizes 17 | strong static typing, immutability, and lazy evaluation. Created in 18 | 1990, it is designed to enable developers to produce robust, concise, 19 | and correct software. 20 |

21 | 22 |

Why Use Haskell?

23 |

24 | Haskell is well-suited for complex and mathematical tasks due to its 25 | rich type system and high-level abstractions. The language's pure 26 | functional nature makes it easier to reason about code, and strong 27 | typing helps catch many errors at compile-time. Its capabilities make 28 | it suitable for a variety of applications, including web servers, 29 | compilers, and data analysis. 30 |

31 | 32 |

33 | Haskell Best Practices and Coding Style Guide 34 |

35 |
    36 |
  • - Utilize the type system to create self-documenting code.
    • 37 |
  • 38 | - Employ immutability to make reasoning about program state easier. 39 |
    • 40 |
  • - Make use of Haskell's rich library ecosystem.
    • 41 |
  • - Always write type signatures for top-level functions.
    • 42 |
  • - Use pattern matching for cleaner and more readable code.
    • 43 |
44 |
45 | 51 | Haskell - Official Website 52 | 53 |
54 |
55 | ); 56 | }; 57 | 58 | export default HaskellLanguage; 59 | -------------------------------------------------------------------------------- /components/languageComponents/JavaLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const JavaLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Java 12 |
13 | 14 |

What is Java?

15 |

16 | Java is a high-level, object-oriented programming language that was 17 | initially released by Sun Microsystems in 1995. It is 18 | platform-independent, meaning that code written in Java can run on any 19 | device that has a Java Virtual Machine (JVM). Java is widely used for 20 | building enterprise-scale web applications and Android mobile app 21 | development. 22 |

23 | 24 |

Why Use Java?

25 |

26 | Java is known for its reliability, scalability, and ease of 27 | maintenance. It has a strong type system, automatic memory management, 28 | and a large ecosystem of libraries and frameworks, making it a 29 | versatile choice for various types of projects. The language is also 30 | backed by a strong community of developers, providing excellent 31 | community support. 32 |

33 | 34 |

35 | Java Best Practices and Coding Style Guide 36 |

37 |
    38 |
  • - Follow the Java Code Conventions.
    • 39 |
  • 40 | - Use meaningful variable and method names that follow the camelCase 41 | naming convention. 42 |
    • 43 |
  • 44 | - Favor composition over inheritance to make your code more modular. 45 |
    • 46 |
  • 47 | - Always make use of access modifiers to encapsulate your code 48 | effectively. 49 |
    • 50 |
  • - Use exceptions for error handling, but don’t overuse them.
    • 51 |
52 |
53 | 59 | Java - Official Documentation 60 | 61 |
62 |
63 | ); 64 | }; 65 | 66 | export default JavaLanguage; 67 | -------------------------------------------------------------------------------- /components/languageComponents/JuliaLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const JuliaLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Julia 12 |
13 | 14 |

What is Julia?

15 |

16 | Julia is a high-level, high-performance programming language for 17 | technical computing, with syntax that is familiar to users of other 18 | technical computing environments. Developed by a group of 19 | mathematicians and computer scientists, it is designed for data 20 | science, numerical analysis, and computational science. 21 |

22 | 23 |

Why Use Julia?

24 |

25 | Julia offers exceptional performance comparable to C, while being as 26 | easy to use as Python. Its strong focus on numerical and scientific 27 | computing makes it ideal for applications like machine learning, data 28 | analytics, and modeling. It also has excellent support for parallelism 29 | and can call C, Fortran, and Python libraries natively. 30 |

31 | 32 |

33 | Julia Best Practices and Coding Style Guide 34 |

35 |
    36 |
  • 37 | - Use meaningful variable names and comment your code for 38 | readability. 39 |
    • 40 |
  • 41 | - Leverage Julia's multiple dispatch feature for code 42 | reusability. 43 |
    • 44 |
  • 45 | - Use built-in functions for array manipulation for better 46 | performance. 47 |
    • 48 |
  • 49 | - Prefer using native Julia libraries to keep the performance 50 | advantages. 51 |
    • 52 |
  • 53 | - Modularize your code into smaller, reusable functions and modules. 54 |
    • 55 |
56 |
57 | 63 | Julia - Official Documentation 64 | 65 |
66 |
67 | ); 68 | }; 69 | 70 | export default JuliaLanguage; 71 | -------------------------------------------------------------------------------- /components/languageComponents/KotlinLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const KotlinLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Kotlin 12 |
13 | 14 |

What is Kotlin?

15 |

16 | Kotlin is a modern, statically-typed programming language that runs on 17 | the Java Virtual Machine (JVM). Developed by JetBrains, it was 18 | officially released in 2016. Kotlin aims to be more expressive, 19 | concise, and safe compared to Java, while being fully interoperable 20 | with it. 21 |

22 | 23 |

Why Use Kotlin?

24 |

25 | Kotlin offers several advantages such as concise syntax, null safety, 26 | and functional programming features. It has first-class support for 27 | Android development and can be used for server-side, client-side web, 28 | and even native applications. The language is designed to be fully 29 | interoperable with Java, making it easier to integrate into existing 30 | projects. 31 |

32 | 33 |

34 | Kotlin Best Practices and Coding Style Guide 35 |

36 |
    37 |
  • 38 | - Use `val` for read-only variables and `var` for mutable variables. 39 |
    • 40 |
  • 41 | - Prefer using Kotlin's standard library functions like `.let`, 42 | `.apply`, etc., for common operations. 43 |
    • 44 |
  • - Utilize smart casts and sealed classes.
    • 45 |
  • - Use data classes for simple classes intended to hold data.
    • 46 |
  • - Make use of Kotlin Coroutines for asynchronous tasks.
    • 47 |
48 |
49 | 55 | Kotlin - Official Documentation 56 | 57 |
58 |
59 | ); 60 | }; 61 | 62 | export default KotlinLanguage; 63 | -------------------------------------------------------------------------------- /components/languageComponents/LanguageNotSupported.tsx: -------------------------------------------------------------------------------- 1 | const LanguageNotSupported = () => { 2 | return ( 3 |
4 |
5 |

Language not supported

6 |
7 |
8 | ); 9 | }; 10 | 11 | export default LanguageNotSupported; 12 | -------------------------------------------------------------------------------- /components/languageComponents/LispLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const LispLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Lisp 12 |
13 | 14 |

What is Lisp?

15 |

16 | Lisp, short for List Processing, is one of the oldest high-level 17 | programming languages, designed by John McCarthy in 1958. It's 18 | known for its symbolic expression syntax, and its ability to treat 19 | code as data and data as code, a property known as 20 | "homoiconicity." 21 |

22 | 23 |

Why Use Lisp?

24 |

25 | Lisp is highly extensible, allowing for a great deal of customization 26 | and manipulation of the language itself. It's often used in areas 27 | like artificial intelligence, machine learning, and symbolic 28 | reasoning. The language's longevity and flexibility make it a 29 | powerful tool for complex problem-solving. 30 |

31 | 32 |

33 | Lisp Best Practices and Coding Style Guide 34 |

35 |
    36 |
  • - Use meaningful variable and function names.
    • 37 |
  • - Leverage Lisp’s powerful macro system judiciously.
    • 38 |
  • - Make use of standard libraries and community packages.
    • 39 |
  • 40 | - Stick to a consistent code formatting and indentation style. 41 |
    • 42 |
  • 43 | - Employ modular programming and keep functions small and focused. 44 |
    • 45 |
46 |
47 | 53 | Lisp - Official Documentation 54 | 55 |
56 |
57 | ); 58 | }; 59 | 60 | export default LispLanguage; 61 | -------------------------------------------------------------------------------- /components/languageComponents/LuaLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const LuaLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Lua 12 |
13 | 14 |

What is Lua?

15 |

16 | Lua is a lightweight, high-level, scripting language designed for 17 | embedded use in applications. Created in 1993, Lua is widely used for 18 | configuration, scripting, and data-description tasks. It's 19 | designed with a focus on simplicity, efficiency, and portability. 20 |

21 | 22 |

Why Use Lua?

23 |

24 | Lua is known for its speed and lightweight footprint, making it ideal 25 | for embedding in games, hardware devices, and other software that 26 | requires a performant scripting language. It has a straightforward 27 | syntax that enables quick learning and productivity. Additionally, Lua 28 | is highly extensible and can be easily integrated with C and other 29 | languages. 30 |

31 | 32 |

33 | Lua Best Practices and Coding Style Guide 34 |

35 |
    36 |
  • 37 | - Prefer local variables over global variables for performance and 38 | scoping. 39 |
    • 40 |
  • 41 | - Use meaningful variable names and follow a consistent naming 42 | convention. 43 |
    • 44 |
  • - Utilize Lua's tables for complex data structures.
    • 45 |
  • - Error checking is crucial; always validate external inputs.
    • 46 |
  • - Use comments and documentation for code clarity.
    • 47 |
48 |
49 | 55 | Lua - Official Documentation 56 | 57 |
58 |
59 | ); 60 | }; 61 | 62 | export default LuaLanguage; 63 | -------------------------------------------------------------------------------- /components/languageComponents/NixLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const NixLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Nix 12 |
13 | 14 |

What is Nix?

15 |

16 | Nix is a purely functional package manager and build system. It allows 17 | multiple versions of the same package to coexist on the same system, 18 | and ensures that dependencies are always satisfied. Nix also provides 19 | a declarative language for describing packages and their dependencies, 20 | making it easy to reproduce builds across different systems. 21 |

22 | 23 |

Why Use Nix?

24 |

25 | Nix offers reproducible builds, which means that you can easily 26 | recreate the same environment on different machines. It also allows 27 | you to manage multiple versions of the same package, which is useful 28 | for development and testing. Nix has a large and growing package 29 | repository, and can be used for a wide range of applications, from web 30 | development to scientific computing. 31 |

32 | 33 |

34 | Nix Best Practices and Coding Style Guide 35 |

36 |
    37 |
  • 38 | - Use the `nix-shell` command to create an isolated environment for 39 | your project. 40 |
    • 41 |
  • 42 | - Use the `nix-build` command to build your project in a 43 | reproducible way. 44 |
    • 45 |
  • 46 | - Use the `nix-env` command to manage your user-level packages. 47 |
    • 48 |
  • 49 | - Use the `nixos-rebuild` command to manage your system-level 50 | packages. 51 |
    • 52 |
  • 53 | - Use the `nix-store` command to inspect the contents of the Nix 54 | store. 55 |
    • 56 |
57 |
58 | 64 | Nix - Official Website 65 | 66 |
67 |
68 | ); 69 | }; 70 | 71 | export default NixLanguage; 72 | -------------------------------------------------------------------------------- /components/languageComponents/PHPLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const PHPLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | PHP 12 |
13 | 14 |

What is PHP?

15 |

16 | PHP (Hypertext Preprocessor) is a general-purpose scripting language 17 | especially suited for web development. Originally created by Rasmus 18 | Lerdorf in 1994, PHP has evolved to become one of the most widely used 19 | server-side languages, known for its role in dynamic web page 20 | creation. 21 |

22 | 23 |

Why Use PHP?

24 |

25 | PHP is renowned for its simplicity and ease of use for newcomers. It 26 | provides robust support for various databases and web servers. It also 27 | boasts an extensive standard library and a vibrant community that 28 | contributes to an ever-growing ecosystem of libraries and frameworks, 29 | such as Laravel and Symfony. 30 |

31 | 32 |

33 | PHP Best Practices and Coding Style Guide 34 |

35 |
    36 |
  • 37 | - Stick to the PSR-1, PSR-2, and PSR-4 coding standards for 38 | community consistency. 39 |
    • 40 |
  • - Use Composer for dependency management.
    • 41 |
  • 42 | - Prefer prepared statements for database interactions to avoid SQL 43 | injection. 44 |
    • 45 |
  • 46 | - Make use of PHP’s OOP features for better code organization and 47 | reusability. 48 |
    • 49 |
  • - Always validate and sanitize user input.
    • 50 |
51 |
52 | 58 | PHP - Official Documentation 59 | 60 |
61 |
62 | ); 63 | }; 64 | 65 | export default PHPLanguage; 66 | -------------------------------------------------------------------------------- /components/languageComponents/PerlLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const PerlLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Perl 12 |
13 |

What is Perl?

14 |

15 | Perl (Practical Extraction and Reporting Language) is a high-level, 16 | dynamic programming language that was originally designed for text 17 | manipulation but has since evolved into a versatile and powerful 18 | language suitable for a variety of tasks, including web development, 19 | system administration, and network programming. 20 |

21 | 22 |

Why Use Perl?

23 |

24 | Perl's text-handling capabilities are exceptional, making it 25 | great for working with large text files, logs, or streams of data. It 26 | is also known for its flexibility and the availability of its 27 | comprehensive archive of reusable modules, called CPAN (Comprehensive 28 | Perl Archive Network). Perl's syntax is flexible, allowing 29 | developers to write succinct and expressive code. 30 |

31 | 32 |

33 | Perl Best Practices and Coding Style Guide 34 |

35 |
    36 |
  • 37 | - Use `strict` and `warnings` pragmas in your script for better 38 | error reporting. 39 |
    • 40 |
  • - Prefer three-part version numbers for modules.
    • 41 |
  • - Make use of CPAN modules whenever possible.
    • 42 |
  • 43 | - Avoid using global variables; use lexical variables (`my`) 44 | instead. 45 |
    • 46 |
  • - Stick to a consistent indentation style.
    • 47 |
48 |
49 | 55 | Perl - Official Documentation 56 | 57 |
58 |
59 | ); 60 | }; 61 | 62 | export default PerlLanguage; 63 | -------------------------------------------------------------------------------- /components/languageComponents/PonyLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const PonyLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Pony 12 |
13 | 14 |

What is Pony?

15 |

16 | Pony is an open-source, object-oriented, actor-model, capabilities-secure, 17 | high-performance programming language. Pony was designed by Sylvan Clebsch 18 | and open-sourced in May 2015. 19 |

20 | 21 |

Why Use Pony?

22 |

23 | Pony makes it easy to write fast, safe, efficient, highly 24 | concurrent programs. The Pony type system introduces a novel concept: 25 | “reference capabilities”. Reference capabilities allow you to label different 26 | bits of data based on how that data can be shared. The Pony compiler will then 27 | verify that you are in fact correctly using the data based on the labels you 28 | provide. Reference capabilities combined with Pony's actor model of concurrency 29 | makes for a powerful pairing 30 |

31 | 32 |

33 | Pony Best Practices and Coding Style Guide 34 |

35 |
    36 |
  • - Use reference capabilities to safely pass data.
    • 37 |
  • 38 | - The relationship in reference capabilities can be thought of in terms 39 | of three distinct categories - mutable, immutable, and opaque. 40 |
    • 41 |
  • 42 | - To maximise performance you need to design your code to 43 | allocate as few objects as possible while triggering as few allocations from 44 | the pool allocator. 45 |
    • 46 |
  • 47 | - Where possible use simple error messages for specific error cases. 48 |
    • 49 |
50 |
51 | 57 | Pony - Official Documentation 58 | 59 |
60 |
61 | ); 62 | }; 63 | 64 | export default PonyLanguage; 65 | -------------------------------------------------------------------------------- /components/languageComponents/PythonLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const PythonLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Python 12 |
13 | 14 |

What is Python?

15 |

16 | Python is a high-level, interpreted, and general-purpose programming 17 | language. Created by Guido van Rossum and first released in 1991, 18 | Python's design philosophy emphasizes readability and ease of 19 | use. With its extensive standard library, Python is widely used for 20 | various types of programming, ranging from web development to data 21 | analysis, machine learning, and more. 22 |

23 | 24 |

Why Use Python?

25 |

26 | Python is renowned for its simplicity and readability, making it an 27 | excellent choice for beginners and experts alike. Its versatile nature 28 | makes it suitable for a wide range of applications. It has a large and 29 | active community, meaning a wealth of third-party libraries and 30 | frameworks are available. It is also widely used in scientific 31 | computing, data analysis, and artificial intelligence. 32 |

33 | 34 |

35 | Python Best Practices and Coding Style Guide 36 |

37 |
    38 |
  • - Follow the PEP 8 style guide for Python code.
    • 39 |
  • - Use meaningful variable and function names.
    • 40 |
  • 41 | - Keep functions and classes small and focused on a single task. 42 |
    • 43 |
  • - Use list comprehensions and other Pythonic idioms.
    • 44 |
  • 45 | - Document your code effectively using comments and docstrings. 46 |
    • 47 |
48 |
49 | 55 | Python - Official Documentation 56 | 57 |
58 |
59 | ); 60 | }; 61 | 62 | export default PythonLanguage; 63 | -------------------------------------------------------------------------------- /components/languageComponents/RLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const RLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | R 12 |
13 | 14 |

What is R?

15 |

16 | R is a programming language and free software environment for 17 | statistical computing and graphics. It was first developed in the 18 | early 1990s, and has since become a popular choice for data analysis, 19 | visualization, and machine learning. R is highly extensible and offers 20 | a wide array of packages for specialized tasks. 21 |

22 | 23 |

Why Use R?

24 |

25 | R is favored for its rich ecosystem of packages that can handle nearly 26 | any data manipulation or analysis task. It is widely used in academia 27 | and industry alike, and its plotting capabilities are considered to be 28 | one of the best in the programming world. Moreover, R has strong 29 | community support and a plethora of free resources for learning and 30 | troubleshooting. 31 |

32 | 33 |

34 | R Best Practices and Coding Style Guide 35 |

36 |
    37 |
  • - Always comment and indent your code for better readability.
    • 38 |
  • 39 | - Make use of R's vectorized operations rather than loops for 40 | better performance. 41 |
    • 42 |
  • 43 | - Use meaningful variable names and keep the code DRY (Don't 44 | Repeat Yourself). 45 |
    • 46 |
  • 47 | - Prefer tidyverse packages for data manipulation and ggplot2 for 48 | data visualization. 49 |
    • 50 |
  • - Include error handling in your scripts to make them robust.
    • 51 |
52 |
53 | 59 | R - Official Documentation 60 | 61 |
62 |
63 | ); 64 | }; 65 | 66 | export default RLanguage; 67 | -------------------------------------------------------------------------------- /components/languageComponents/ReasonLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const ReasonLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Reason 12 |
13 | 14 |

What is Reason?

15 |

16 | Reason is a programming language powered by OCaml's strong type system, 17 | and has a syntax designed to feel familiar to people coming from JavaScript 18 | or C-family languages. 19 |

20 | 21 |

Why Use Reason?

22 |

23 | The powerful typesystem underlying Reason will reduce bugs, increase 24 | maintainability, and improve the refactorabilty of your code. 25 |

26 | 27 |

28 | Reason Best Practices and Coding Style Guide 29 |

30 |
    31 |
  • 32 | - Employ the double-slash // for single-line comments and /* */ for 33 | multi-line comments. 34 |
    • 35 |
  • 36 | - Expressions need not be terminated with a semicolon, but it is best practice; 37 |
    • 38 |
  • 39 | - All of Reason's types and structures have modules in the standard library. 40 | In general, it is best to interface with your data via these modules 41 |
    • 42 |
43 |
44 | 50 | Reason - Official Documentation 51 | 52 |
53 |
54 | ); 55 | }; 56 | 57 | export default ReasonLanguage; 58 | -------------------------------------------------------------------------------- /components/languageComponents/RubyLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const RubyLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Ruby 12 |
13 | 14 |

What is Ruby?

15 |

16 | Ruby is a dynamic, interpreted, object-oriented programming language. 17 | Created in the mid-1990s by Yukihiro "Matz" Matsumoto, Ruby 18 | is known for its simplicity and readability. It has an elegant syntax 19 | that is easy to read and write, allowing for more natural expression 20 | of code. 21 |

22 | 23 |

Why Use Ruby?

24 |

25 | Ruby is often associated with the Ruby on Rails web framework, which 26 | has popularized the language for web development. However, Ruby is a 27 | versatile language used in various fields such as data analysis, web 28 | automation, and scripting. It has a rich standard library and a 29 | vibrant ecosystem of open-source libraries, known as "gems." 30 |

31 | 32 |

33 | Ruby Best Practices and Coding Style Guide 34 |

35 |
    36 |
  • - Follow the Ruby Style Guide for consistent code.
    • 37 |
  • - Use meaningful names for variables, methods, and classes.
    • 38 |
  • 39 | - Make use of Ruby's powerful Enumerable methods for collection 40 | manipulation. 41 |
    • 42 |
  • - Write modular code by making use of classes and modules.
    • 43 |
  • 44 | - Employ Test-Driven Development (TDD) to ensure code quality. 45 |
    • 46 |
47 |
48 | 54 | Ruby - Official Documentation 55 | 56 |
57 |
58 | ); 59 | }; 60 | 61 | export default RubyLanguage; 62 | -------------------------------------------------------------------------------- /components/languageComponents/SQLLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const SQLLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | SQL 12 |
13 | 14 |

What is SQL?

15 |

16 | SQL (Structured Query Language) is a domain-specific language designed 17 | for managing data stored in a relational database management system 18 | (RDBMS). Developed in the early 1970s, SQL allows users to perform 19 | tasks such as querying, updating, and inserting data in a structured 20 | and efficient manner. 21 |

22 | 23 |

Why Use SQL?

24 |

25 | SQL is a foundational skill for roles such as database administrators, 26 | data analysts, and back-end developers. Its query language is highly 27 | expressive, allowing complex operations on data. SQL databases are 28 | known for their ACID (Atomicity, Consistency, Isolation, Durability) 29 | properties, making them reliable for business applications. SQL also 30 | has broad industry support and numerous variants tailored for specific 31 | use-cases. 32 |

33 | 34 |

35 | SQL Best Practices and Coding Style Guide 36 |

37 |
    38 |
  • 39 | - Always use prepared statements to prevent SQL injection attacks. 40 |
    • 41 |
  • - Use meaningful table and column names.
    • 42 |
  • - Keep your SQL queries simple and optimize for readability.
    • 43 |
  • - Avoid using SELECT *; specify the columns you need.
    • 44 |
  • - Use indexing judiciously for performance optimization.
    • 45 |
46 |
47 | 53 | MySQL - Official Documentation 54 | 55 |
56 |
57 | ); 58 | }; 59 | 60 | export default SQLLanguage; 61 | -------------------------------------------------------------------------------- /components/languageComponents/ScalaLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const ScalaLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Scala 12 |
13 | 14 |

What is Scala?

15 |

16 | Scala is a high-level, statically-typed programming language that 17 | combines functional and object-oriented programming paradigms. It runs 18 | on the Java Virtual Machine (JVM), allowing seamless interoperability 19 | with Java. Scala was created to be a more concise, elegant, and, 20 | arguably, a more powerful version of Java. 21 |

22 | 23 |

Why Use Scala?

24 |

25 | Scala offers several benefits over traditional Java, such as a more 26 | expressive syntax, powerful type inference, and first-class functional 27 | programming constructs. Scala is widely used in data analytics, 28 | parallel batch processing, and even scientific computing tasks. It’s a 29 | popular choice for web servers, APIs, and concurrent programming 30 | tasks. 31 |

32 | 33 |

34 | Scala Best Practices and Coding Style Guide 35 |

36 |
    37 |
  • - Prefer immutable data structures.
    • 38 |
  • - Utilize pattern matching for more readable and robust code.
    • 39 |
  • - Make use of case classes for immutable data containers.
    • 40 |
  • 41 | - Use companion objects for factory methods and static members. 42 |
    • 43 |
  • - Leverage Scala’s rich standard library for common tasks.
    • 44 |
45 |
46 | 52 | Scala - Official Documentation 53 | 54 |
55 |
56 | ); 57 | }; 58 | 59 | export default ScalaLanguage; 60 | -------------------------------------------------------------------------------- /components/languageComponents/SolidityLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const SolidityLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Solidity 12 |
13 | 14 |

What is Solidity?

15 |

16 | Solidity is a statically-typed programming language designed for 17 | writing smart contracts on blockchain platforms like Ethereum. First 18 | proposed in 2014, it is tailored for the Ethereum Virtual Machine 19 | (EVM). Solidity enables the development of applications that execute 20 | contracts, handle tokenization of assets, and manage decentralized 21 | applications (dApps). 22 |

23 | 24 |

Why Use Solidity?

25 |

26 | Solidity is essential for building smart contracts on Ethereum and 27 | other EVM-compatible blockchains. It provides a range of built-in 28 | functions for cryptographic operations, data manipulation, and 29 | contract control. The language has a strong community and ecosystem, 30 | including extensive libraries and tools for development and debugging. 31 |

32 | 33 |

34 | Solidity Best Practices and Coding Style Guide 35 |

36 |
    37 |
  • 38 | - Use the latest version of the Solidity compiler for improved 39 | security features. 40 |
    • 41 |
  • 42 | - Leverage Solidity's modifiers for function-level access 43 | control. 44 |
    • 45 |
  • 46 | - Be cautious with arithmetic operations to avoid overflow and 47 | underflow errors. 48 |
    • 49 |
  • 50 | - Utilize events to provide external consumers with contract state 51 | changes. 52 |
    • 53 |
  • 54 | - Be mindful of gas costs and optimize your code for efficiency. 55 |
    • 56 |
57 | 58 |
59 | 65 | Solidity - Official Documentation 66 | 67 |
68 |
69 | ); 70 | }; 71 | 72 | export default SolidityLanguage; 73 | -------------------------------------------------------------------------------- /components/languageComponents/SwiftLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const SwiftLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Swift 12 |
13 | 14 |

What is Swift?

15 |

16 | Swift is a general-purpose, multi-paradigm programming language 17 | developed by Apple. Introduced in 2014, it was designed to be concise, 18 | efficient, and safe, making it ideal for application development on 19 | iOS, macOS, watchOS, and tvOS. It also supports server-side and Linux 20 | development, making it increasingly versatile. 21 |

22 | 23 |

Why Use Swift?

24 |

25 | Swift is known for its performance, modern syntax, and safety 26 | features. It incorporates best practices from various programming 27 | languages, resulting in cleaner and more maintainable code. Swift is 28 | strongly typed and compiled, which enables better optimization and 29 | fewer runtime errors. It’s also one of the fastest-growing languages 30 | in terms of popularity and adoption. 31 |

32 | 33 |

34 | Swift Best Practices and Coding Style Guide 35 |

36 |
    37 |
  • 38 | - Favor immutability. Use `let` instead of `var` wherever possible. 39 |
    • 40 |
  • - Use optionals wisely to handle the absence of a value.
    • 41 |
  • 42 | - Utilize Swift’s type inference but also provide explicit types 43 | when it improves readability. 44 |
    • 45 |
  • 46 | - Follow the Single Responsibility Principle for cleaner and more 47 | modular code. 48 |
    • 49 |
  • 50 | - Write unit tests to validate your code and avoid regressions. 51 |
    • 52 |
53 |
54 | 60 | Swift - Official Documentation 61 | 62 |
63 |
64 | ); 65 | }; 66 | 67 | export default SwiftLanguage; 68 | -------------------------------------------------------------------------------- /components/languageComponents/TypeScriptLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const TypeScriptLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | TypeScript 12 |
13 | 14 |

What is TypeScript?

15 |

16 | TypeScript is a superset of JavaScript that brings static type 17 | checking to the language. Developed and maintained by Microsoft, it 18 | was first released in 2012. TypeScript extends JavaScript by adding 19 | types, interfaces, and other syntactic features aimed at making the 20 | language more robust and maintainable. 21 |

22 | 23 |

Why Use TypeScript?

24 |

25 | TypeScript offers several advantages over plain JavaScript. First, the 26 | static type checking can catch errors at compile-time, making it 27 | easier to debug and maintain code. Second, TypeScript offers enhanced 28 | code autocompletion, making it easier to write code quickly and with 29 | fewer errors. Third, the type system makes the code self-documenting, 30 | aiding collaboration and onboarding of new team members. Finally, it’s 31 | fully compatible with JavaScript, allowing incremental adoption in 32 | existing projects. 33 |

34 | 35 |

36 | TypeScript Best Practices and Coding Style Guide 37 |

38 |
    39 |
  • 40 | - Always prefer to provide specific types over using the any type. 41 |
    • 42 |
  • - Use interfaces for defining the shape of objects.
    • 43 |
  • 44 | - When using third-party libraries, ensure you have the appropriate 45 | type definitions installed, often available as @types/package-name. 46 |
    • 47 |
48 |
49 | 55 | TypeScript - Official Documentation 56 | 57 |
58 |
59 | ); 60 | }; 61 | 62 | export default TypeScriptLanguage; 63 | -------------------------------------------------------------------------------- /components/languageComponents/VyperLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const VyperLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Vyper 12 |
13 | 14 |

What is Vyper?

15 |

16 | Vyper is a Python-like programming language designed for Ethereum 17 | smart contracts. It is intended to be a more readable and secure 18 | alternative to Solidity, focusing on simplicity and ease of auditing. 19 | Unlike Solidity, Vyper deliberately avoids some advanced features to 20 | ensure greater security and readability. 21 |

22 | 23 |

Why Use Vyper?

24 |

25 | Vyper offers a smaller attack surface due to its simplicity, making it 26 | a strong choice for projects prioritizing security. It produces more 27 | straightforward and easily auditable bytecode, facilitating code 28 | reviews and verification. Vyper also provides native support for 29 | common programming patterns in smart contracts. 30 |

31 | 32 |

33 | Vyper Best Practices and Coding Style Guide 34 |

35 |
    36 |
  • 37 | - Stick to the established naming conventions for better 38 | readability. 39 |
    • 40 |
  • 41 | - Use comments and docstrings generously for easier code audits. 42 |
    • 43 |
  • 44 | - Be mindful of gas optimization, as Vyper contracts can be less 45 | gas-efficient than their Solidity counterparts. 46 |
    • 47 |
  • 48 | - Use Vyper's built-in decorators like @public and @private for 49 | better function visibility. 50 |
    • 51 |
52 | 53 |
54 | 60 | Vyper - Official Documentation 61 | 62 |
63 |
64 | ); 65 | }; 66 | 67 | export default VyperLanguage; 68 | -------------------------------------------------------------------------------- /components/languageComponents/ZSHLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const ZSHLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Zsh 12 |
13 | 14 |

What is ZSH?

15 |

16 | The Z shell (Zsh) is a Unix shell that can be used as an interactive 17 | login shell and as a command interpreter for shell scripting. Zsh is 18 | an extended Bourne shell with many improvements, including some 19 | features of Bash, ksh, and tcsh. 20 |

21 | 22 |

Why Use ZSH?

23 |

24 | Zsh has powerful scripting capabilities, often considered an 25 | improvement over Bash. It supports advanced control structures, 26 | improved variable handling, and enhanced arithmetic operations. Zsh 27 | can correct typos in your commands, which can be helpful for users who 28 | frequently mistype commands or filenames. 29 |

30 | 31 |

32 | YAML Best Practices and Coding Style Guide 33 |

34 |
    35 |
  • 36 | Use consistent indentation with spaces (not tabs) for improved 37 | readability. 38 |
    • 39 |
  • 40 | - Start Zsh scripts with a shebang line to specify the Zsh 41 | interpreter, like `#!/bin/zsh`. 42 |
    • 43 |
  • Use meaningful and descriptive variable and function names
    • 44 |
  • 45 | - Define functions clearly and include a comment describing the 46 | purpose of the function 47 |
    • 48 |
  • 49 | - Implement error handling in your scripts. You can use set -e to 50 | exit on error and set -u to treat unset variables as errors 51 |
    • 52 |
53 |
54 | 59 | ZSH - Official Documentation 60 | 61 |
62 |
63 | ); 64 | }; 65 | 66 | export default ZSHLanguage; 67 | -------------------------------------------------------------------------------- /components/languageComponents/ZigLanguage.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @next/next/no-img-element */ 2 | const ZigLanguage = () => { 3 | return ( 4 |
5 |
6 |
7 | Zig 12 |
13 | 14 |

What is Zig?

15 |

16 | Zig is a general-purpose programming language designed for robustness, 17 | optimality, and maintainability. Introduced in 2016 by Andrew Kelley, 18 | it aims to be a simpler and safer alternative to languages like C and 19 | C++. Zig is often lauded for its focus on providing the programmer 20 | with total control over the hardware while also aiming to catch errors 21 | at compile-time whenever possible. 22 |

23 | 24 |

Why Use Zig?

25 |

26 | Zig is advantageous for low-level system programming, similar to C, 27 | but also aims to improve safety and readability. It offers powerful 28 | compile-time code execution, simple syntax, and first-class debugging 29 | support. Zig's ability to cleanly interface with other languages 30 | like C and C++ makes it versatile for various kinds of projects. 31 |

32 | 33 |

34 | Zig Best Practices and Coding Style Guide 35 |

36 |
    37 |
  • 38 | - Prefer `const` and `var` over explicit types for local variables 39 | when the type is obvious. 40 |
    • 41 |
  • 42 | - Utilize Zig's built-in testing framework for unit tests. 43 |
    • 44 |
  • - Make use of compile-time checks to enforce safety.
    • 45 |
  • - Keep functions small and modular.
    • 46 |
  • - Document your code clearly to make it maintainable.
    • 47 |
48 |
49 | 55 | Zig - Official Documentation 56 | 57 |
58 |
59 | ); 60 | }; 61 | 62 | export default ZigLanguage; 63 | -------------------------------------------------------------------------------- /components/layout/LoadingPage.tsx: -------------------------------------------------------------------------------- 1 | import { motion } from 'framer-motion' 2 | import { useEffect } from 'react' 3 | import { useRouter } from 'next/router' 4 | 5 | const LoadingPage = () => { 6 | const router = useRouter() 7 | 8 | useEffect(() => { 9 | //* Redirect to home page after 3 seconds 10 | const timeout = setTimeout(() => { 11 | router.push('/') 12 | }, 3000) 13 | 14 | return () => clearTimeout(timeout) 15 | }, [router]) 16 | 17 | return ( 18 |
19 | 25 | 36 | FCM Logo 41 | 42 | 43 | 49 | Welcome to Fork, Commit, Merge 50 | 51 | 52 | 58 |
59 |
60 |
61 | 62 | 63 | 69 | Redirecting you to the homepage... 70 | 71 | 72 |
73 | ) 74 | } 75 | 76 | export default LoadingPage 77 | -------------------------------------------------------------------------------- /components/roadmapComponents/RoadmapNotSupported.tsx: -------------------------------------------------------------------------------- 1 | const RoadmapNotSupported = () => { 2 | return ( 3 |
4 |
5 |

Roadmap not supported

6 |
7 |
8 | ); 9 | }; 10 | 11 | export default RoadmapNotSupported; 12 | -------------------------------------------------------------------------------- /components/sections/Hero.tsx: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import Image from 'next/image' 3 | 4 | const Hero = () => { 5 | return ( 6 |
7 |
8 |
9 |
10 |

11 | Welcome to 12 | Fork Commit Merge 13 |

14 |

15 | A project to help developers learn and practice Git and contribute 16 | to open source. 17 |

18 |
19 | 25 | Get Started 26 | 27 | 28 | FAQ 29 | 30 |
31 |
32 |
33 |
34 |
35 | ) 36 | } 37 | 38 | export default Hero 39 | -------------------------------------------------------------------------------- /components/sections/Testimonials.tsx: -------------------------------------------------------------------------------- 1 | import { testimonials } from '../data/testimonials' 2 | 3 | const Testimonials = () => { 4 | return ( 5 |
6 |
7 |
8 |

9 | What Our Contributors Say 10 |

11 |

12 | Join our community of developers who are learning and growing 13 | together 14 |

15 |
16 | 17 |
18 | {testimonials.map((testimonial, index) => ( 19 |
23 | 38 |

"{testimonial.text}"

39 |
40 | ))} 41 |
42 |
43 |
44 | ) 45 | } 46 | 47 | export default Testimonials 48 | -------------------------------------------------------------------------------- /components/ui/Spinner.tsx: -------------------------------------------------------------------------------- 1 | import { ArrowPathIcon } from '@heroicons/react/24/outline' 2 | import React from "react"; 3 | 4 | const Spinner = () => ( 5 |
6 | 7 |
8 | ); 9 | 10 | export default Spinner; 11 | -------------------------------------------------------------------------------- /components/ui/ThemeSelector.tsx: -------------------------------------------------------------------------------- 1 | import { SunIcon, MoonIcon } from '@heroicons/react/24/outline' 2 | import { useState, useEffect } from 'react' 3 | 4 | const ThemeSelector = () => { 5 | const [theme, setTheme] = useState('dark') 6 | 7 | useEffect(() => { 8 | const savedTheme = localStorage.getItem('theme') || 'dark' 9 | setTheme(savedTheme) 10 | document.documentElement.classList.add(`theme-${savedTheme}`) 11 | }, []) 12 | 13 | const toggleTheme = () => { 14 | const newTheme = theme === 'dark' ? 'light' : 'dark' 15 | setTheme(newTheme) 16 | localStorage.setItem('theme', newTheme) 17 | document.documentElement.classList.remove(`theme-${theme}`) 18 | document.documentElement.classList.add(`theme-${newTheme}`) 19 | } 20 | 21 | return ( 22 | 33 | ) 34 | } 35 | 36 | export default ThemeSelector 37 | -------------------------------------------------------------------------------- /declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module "@heroicons/react/outline"; 2 | 3 | -------------------------------------------------------------------------------- /middleware.ts: -------------------------------------------------------------------------------- 1 | import { authMiddleware } from '@clerk/nextjs' 2 | 3 | export default authMiddleware({ 4 | //* Make all routes public by default 5 | publicRoutes: ['/((?!community/contributors).*)'], 6 | //* Only protect the contributors page 7 | ignoredRoutes: ['/((?!community/contributors).*)'] 8 | }) 9 | 10 | export const config = { 11 | matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'] 12 | } 13 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | images: { 4 | remotePatterns: [ 5 | { 6 | protocol: 'https', 7 | hostname: 'devgallery-db-bucket.s3.eu-north-1.amazonaws.com' 8 | }, 9 | { 10 | protocol: 'https', 11 | hostname: 'avatars.githubusercontent.com' 12 | }, 13 | { 14 | protocol: 'https', 15 | hostname: 'img.shields.io' 16 | }, 17 | { 18 | protocol: 'https', 19 | hostname: 'www.gravatar.com' 20 | }, 21 | { 22 | protocol: 'https', 23 | hostname: 'ui-avatars.com' 24 | }, 25 | { 26 | protocol: 'https', 27 | hostname: 'robohash.org' 28 | }, 29 | { 30 | protocol: 'https', 31 | hostname: 'github.com' 32 | }, 33 | { 34 | protocol: 'https', 35 | hostname: 'img.clerk.com' 36 | }, 37 | { 38 | protocol: 'https', 39 | hostname: 'images.clerk.dev' 40 | } 41 | ], 42 | dangerouslyAllowSVG: true, 43 | contentDispositionType: 'attachment', 44 | contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;", 45 | } 46 | }; 47 | 48 | module.exports = nextConfig; 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fork-commit-merge-web", 3 | "version": "2.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@ant-design/icons": "^6.0.0", 13 | "@clerk/nextjs": "^4.31.5", 14 | "@clerk/themes": "^2.2.3", 15 | "@heroicons/react": "^2.0.18", 16 | "@mui/icons-material": "^7.0.1", 17 | "@types/node": "22.15.21", 18 | "@types/react": "18.3.12", 19 | "@types/react-dom": "18.3.1", 20 | "@upstash/redis": "^1.34.5", 21 | "autoprefixer": "10.4.21", 22 | "axios": "^1.8.4", 23 | "eslint": "9.28.0", 24 | "eslint-config-next": "15.3.3", 25 | "fork-commit-merge-web": "file:", 26 | "formidable": "^3.5.2", 27 | "framer-motion": "^12.0.0", 28 | "md5": "^2.3.0", 29 | "multer": "^2.0.0", 30 | "next": "^14.1.0", 31 | "next-auth": "^4.24.11", 32 | "next-connect": "^1.0.0", 33 | "next-secure-headers": "^2.2.0", 34 | "postcss": "8.5.4", 35 | "prettier": "^3.5.3", 36 | "prettier-plugin-tailwindcss": "^0.6.11", 37 | "react": "18.3.1", 38 | "react-dom": "18.3.1", 39 | "react-intersection-observer": "^9.15.1", 40 | "react-loader-spinner": "^6.1.6", 41 | "react-markdown": "^10.0.0", 42 | "react-spinners": "^0.17.0", 43 | "remark-gfm": "^4.0.1", 44 | "sharp": "^0.34.0", 45 | "tailwindcss": "3.4.15", 46 | "typescript": "5.8.3" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/tailwind.css' 2 | import type { AppProps } from 'next/app' 3 | import Header from '../components/layout/Header' 4 | import Footer from '../components/layout/Footer' 5 | import { ClerkProvider } from '@clerk/nextjs' 6 | import { dark } from '@clerk/themes' 7 | import BackToTopButton from '../components/buttons/BackToTopButton' 8 | import { Ubuntu } from 'next/font/google' 9 | import { Ysabeau } from 'next/font/google' 10 | import { useEffect } from 'react' 11 | import TawkToChat from '../components/chat/TawkToChat' 12 | 13 | const ysabeau = Ysabeau({ 14 | subsets: ['latin'], 15 | weight: ['500'], 16 | display: 'swap', 17 | adjustFontFallback: false 18 | }) 19 | 20 | const ubuntu = Ubuntu({ 21 | weight: ['300'], 22 | subsets: ['latin'], 23 | display: 'swap' 24 | }) 25 | 26 | function MyApp({ Component, pageProps: { ...pageProps } }: AppProps) { 27 | useEffect(() => { 28 | //* Set default theme to dark if no theme is selected 29 | const savedTheme = localStorage.getItem('theme') ?? 'dark' 30 | //* Remove any existing theme classes 31 | document.documentElement.classList.remove('theme-light', 'theme-dark') 32 | //* Add the selected theme class 33 | document.documentElement.classList.add(`theme-${savedTheme}`) 34 | }, []) 35 | 36 | return ( 37 | 53 |
56 |
57 |
58 | 59 |
60 |
61 | 62 | 63 |
64 | 65 | ) 66 | } 67 | 68 | export default MyApp 69 | -------------------------------------------------------------------------------- /pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import Document, { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default class DocumentExtension extends Document { 4 | render() { 5 | return ( 6 | 7 | 8 | 13 | 18 | {/* Preload critical background images */} 19 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | ) 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /pages/api/repo-stats.js: -------------------------------------------------------------------------------- 1 | export default async function handler(req, res) { 2 | try { 3 | const response = await fetch('https://api.github.com/repos/fork-commit-merge/fork-commit-merge', { 4 | headers: { 5 | Authorization: `token ${process.env.GITHUB_TOKEN}` 6 | } 7 | }); 8 | const data = await response.json(); 9 | res.status(200).json({ stargazers_count: data.stargazers_count }); 10 | } catch (error) { 11 | res.status(500).json({ error: 'Failed to fetch repo stats' }); 12 | } 13 | } -------------------------------------------------------------------------------- /pages/community/[community].tsx: -------------------------------------------------------------------------------- 1 | import { useRouter } from 'next/router' 2 | import React from 'react' 3 | import Discussions from '../../components/communityComponents/Discussions' 4 | import Events from '../../components/communityComponents/Events' 5 | import CommunityNotSupported from '../../components/communityComponents/CommunityNotSupported' 6 | 7 | const CommunityPage = () => { 8 | const router = useRouter() 9 | const { community } = router.query 10 | 11 | const renderContent = () => { 12 | switch (community) { 13 | case 'discussions': 14 | return ( 15 |
16 | 17 |
18 | ) 19 | case 'events': 20 | return ( 21 |
22 | 23 |
24 | ) 25 | 26 | default: 27 | return 28 | } 29 | } 30 | 31 | return
{renderContent()}
32 | } 33 | 34 | export default CommunityPage 35 | -------------------------------------------------------------------------------- /pages/community/contributors.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react' 2 | import Image from 'next/image' 3 | import Link from 'next/link' 4 | import { contributorData } from '../../components/data/contributorData' 5 | 6 | const Contributors: FC = () => { 7 | return ( 8 |
9 |
10 |
11 |
12 |

13 | Our Amazing{' '} 14 | Contributors 15 |

16 |

17 | Meet the incredible developers who have contributed to our open 18 | source community 19 |

20 |
21 | 22 |
23 | {contributorData.map(contributor => ( 24 |
28 | 34 | {`${contributor.name}'s 42 | 43 |

44 | {contributor.name} 45 |

46 | 52 | View Profile 53 | 54 |
55 | ))} 56 |
57 |
58 |
59 |
60 | ) 61 | } 62 | 63 | export default Contributors 64 | -------------------------------------------------------------------------------- /pages/dashboard/dashboard.tsx: -------------------------------------------------------------------------------- 1 | import { useUser } from '@clerk/nextjs' 2 | import { useRouter } from 'next/router' 3 | import { useEffect } from 'react' 4 | import LoadingPage from '../../components/layout/LoadingPage' 5 | 6 | export default function DashboardPage() { 7 | const { isLoaded, isSignedIn } = useUser() 8 | const router = useRouter() 9 | 10 | if (!isLoaded) { 11 | return 12 | } 13 | 14 | if (!isSignedIn) { 15 | router.push('/sign-in') 16 | return null 17 | } 18 | 19 | return 20 | } 21 | -------------------------------------------------------------------------------- /pages/git/[git].tsx: -------------------------------------------------------------------------------- 1 | import { useRouter } from 'next/router' 2 | import SelectionNotSupported from '../../components/gitComponents/SelectionNotSupported' 3 | import GitCommandsSelection from '../../components/gitComponents/GitCommandsSelection' 4 | import GitBranchingSelection from '../../components/gitComponents/GitBranchingSelection' 5 | import GitConflicts from '../../components/gitComponents/GitConflicts' 6 | import GitConfiguration from '../../components/gitComponents/GitConfiguration' 7 | import GitWorkflow from '../../components/gitComponents/GitWorkflow' 8 | import ConventionalCommits from '../../components/gitComponents/ConventionalCommits' 9 | 10 | const Git = () => { 11 | const router = useRouter() 12 | const { git } = router.query 13 | 14 | const renderContent = () => { 15 | 16 | const getComponent = () => { 17 | switch (git) { 18 | case 'git-commands': 19 | return 20 | case 'git-branching': 21 | return 22 | case 'git-conflicts': 23 | return 24 | case 'git-configuration': 25 | return 26 | case 'git-workflow': 27 | return 28 | case 'conventional-commits': 29 | return 30 | default: 31 | return 32 | } 33 | } 34 | 35 | return getComponent() 36 | } 37 | 38 | return <>{renderContent()} 39 | } 40 | 41 | export default Git 42 | -------------------------------------------------------------------------------- /pages/roadmaps/[roadmap].tsx: -------------------------------------------------------------------------------- 1 | import { useRouter } from 'next/router' 2 | import RoadmapNotSupported from '../../components/roadmapComponents/RoadmapNotSupported' 3 | import OpenSourcePhilosophy from '../../components/roadmapComponents/OpenSourcePhilosophy' 4 | import OpenSourceLicenses from '../../components/roadmapComponents/OpenSourceLicenses' 5 | import HowToContribute from '../../components/roadmapComponents/HowToContribute' 6 | import DocumentationOverview from '../../components/roadmapComponents/DocumentationOverview' 7 | import ContributionManagement from '../../components/roadmapComponents/ContributionManagement' 8 | import LegalEthicalConsiderations from '../../components/roadmapComponents/LegalEthicalConsiderations' 9 | import OpenSourceTerminology from '../../components/roadmapComponents/OpenSourceTerminology' 10 | import Portfolio from '../../components/roadmapComponents/Portfolio' 11 | 12 | const RoadmapPage = () => { 13 | const router = useRouter() 14 | const { roadmap } = router.query 15 | 16 | const commonHeaderStyle = { 17 | backgroundImage: "url('/fcm-background-image.png')" 18 | } 19 | 20 | const renderContent = () => { 21 | switch (roadmap) { 22 | case 'how-to-contribute': 23 | return 24 | case 'contribution-management': 25 | return 26 | case 'open-source-philosophy': 27 | return 28 | case 'open-source-licenses': 29 | return 30 | case 'overview-of-documentation': 31 | return 32 | case 'legal-and-ethical-considerations': 33 | return 34 | case 'open-source-terminology': 35 | return 36 | case 'portfolio': 37 | return 38 | default: 39 | return 40 | } 41 | } 42 | 43 | return
{renderContent()}
44 | } 45 | 46 | export default RoadmapPage 47 | -------------------------------------------------------------------------------- /pages/sign-in/[[...index]].tsx: -------------------------------------------------------------------------------- 1 | import { SignIn } from '@clerk/nextjs' 2 | 3 | export default function Page() { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /pages/sign-up/[[...index]].tsx: -------------------------------------------------------------------------------- 1 | import { SignUp } from '@clerk/nextjs' 2 | 3 | export default function Page() { 4 | return ( 5 |
6 | 7 |
8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | 8 | -------------------------------------------------------------------------------- /public/fork-commit-merge-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fork-commit-merge/fork-commit-merge-web/9287f83d97d549ecafb5d1fb811bf6358df94bf4/public/fork-commit-merge-banner.png -------------------------------------------------------------------------------- /public/fork-commit-merge-banner2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fork-commit-merge/fork-commit-merge-web/9287f83d97d549ecafb5d1fb811bf6358df94bf4/public/fork-commit-merge-banner2.png -------------------------------------------------------------------------------- /public/fork-commit-merge-banner3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fork-commit-merge/fork-commit-merge-web/9287f83d97d549ecafb5d1fb811bf6358df94bf4/public/fork-commit-merge-banner3.png -------------------------------------------------------------------------------- /public/fork-commit-merge-logo-favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fork-commit-merge/fork-commit-merge-web/9287f83d97d549ecafb5d1fb811bf6358df94bf4/public/fork-commit-merge-logo-favicon.png -------------------------------------------------------------------------------- /public/fork-commit-merge-logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fork-commit-merge/fork-commit-merge-web/9287f83d97d549ecafb5d1fb811bf6358df94bf4/public/fork-commit-merge-logo.jpg -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/typescript-easy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fork-commit-merge/fork-commit-merge-web/9287f83d97d549ecafb5d1fb811bf6358df94bf4/public/typescript-easy.png -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /styles/Coffee.module.css: -------------------------------------------------------------------------------- 1 | .buyButton { 2 | text-decoration: none; 3 | color: #ffffff; 4 | background-color: #ffffff; 5 | border-radius: 6px; 6 | padding: 0.2rem; 7 | box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5); 8 | width: 1.5rem; 9 | } 10 | 11 | .buyButton:hover, 12 | .buyButton:active, 13 | .buyButton:focus { 14 | box-shadow: 0px 1px 2px 2px rgb(248, 178, 87); 15 | opacity: 0.85; 16 | color: #ffffff; 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "bundler", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ], 22 | "paths": { 23 | "@/*": ["./src/*"] 24 | } 25 | }, 26 | "include": [ 27 | "next-env.d.ts", 28 | "**/*.ts", 29 | "**/*.tsx", 30 | ".next/types/**/*.ts", 31 | "components/Dashboard.jsx" 32 | ], 33 | "exclude": ["node_modules"] 34 | } 35 | -------------------------------------------------------------------------------- /types.ts: -------------------------------------------------------------------------------- 1 | export interface UserStat { 2 | username: string; 3 | prCount: number; 4 | avatarUrl: string; 5 | } 6 | 7 | export interface ClosedPullRequest { 8 | username: string; 9 | title: string; 10 | issue: string; 11 | repository: string; 12 | } 13 | 14 | export type Testimonial = { 15 | text: string; 16 | name: string; 17 | imageUrl: string; 18 | url: string; 19 | }; 20 | -------------------------------------------------------------------------------- /types/contributor.ts: -------------------------------------------------------------------------------- 1 | export interface Contributor { 2 | id: number 3 | login: string 4 | avatar_url: string 5 | html_url: string 6 | contributions: number 7 | } 8 | -------------------------------------------------------------------------------- /types/tawkto.d.ts: -------------------------------------------------------------------------------- 1 | interface Window { 2 | Tawk_API?: any 3 | Tawk_LoadStart?: Date 4 | } 5 | -------------------------------------------------------------------------------- /utils/contributors.ts: -------------------------------------------------------------------------------- 1 | import { Contributor } from '../types/contributor' 2 | 3 | const GITHUB_API_URL = 4 | 'https://api.github.com/repos/fork-commit-merge/fork-commit-merge/contributors' 5 | 6 | const BOT_ACCOUNTS = [ 7 | 'nikohoffren', 8 | 'dependabot', 9 | 'dependabot[bot]', 10 | 'snyk-bot', 11 | 'actions-user', 12 | ] 13 | 14 | export async function getTopContributors(): Promise { 15 | try { 16 | const response = await fetch(GITHUB_API_URL) 17 | if (!response.ok) throw new Error('Failed to fetch contributors') 18 | 19 | const contributors: Contributor[] = await response.json() 20 | return contributors 21 | .filter(contributor => !BOT_ACCOUNTS.includes(contributor.login)) 22 | .slice(0, 3) 23 | } catch (error) { 24 | console.error('Error fetching top contributors:', error) 25 | return [] 26 | } 27 | } 28 | 29 | export async function getOtherContributors(): Promise { 30 | try { 31 | const response = await fetch(GITHUB_API_URL + '?per_page=50') 32 | if (!response.ok) throw new Error('Failed to fetch contributors') 33 | 34 | const contributors: Contributor[] = await response.json() 35 | console.log('Total contributors before filtering:', contributors.length) 36 | 37 | const filteredContributors = contributors 38 | .filter(contributor => !BOT_ACCOUNTS.includes(contributor.login)) 39 | console.log('Contributors after bot filtering:', filteredContributors.length) 40 | 41 | //* Get exactly 24 contributors after the top 3 42 | const result = filteredContributors.slice(3, 27) 43 | console.log('Final contributors after slice:', result.length) 44 | 45 | return result 46 | } catch (error) { 47 | console.error('Error fetching other contributors:', error) 48 | return [] 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /utils/helpers/htmlToJsonParser.js: -------------------------------------------------------------------------------- 1 | const html = `` 2 | 3 | const parser = new DOMParser(); 4 | const doc = parser.parseFromString(html, "text/html"); 5 | const anchors = doc.querySelectorAll("a"); 6 | 7 | const result = Array.from(anchors).map((a) => { 8 | const github_url = a.href; 9 | const github_id = github_url.split("/").pop(); 10 | const avatar_url = a 11 | .querySelector("img") 12 | .src.replace("https://images.weserv.nl/?url=", ""); 13 | 14 | return { 15 | id: github_id, 16 | url: github_url, 17 | avatar: avatar_url, 18 | name: github_id, 19 | }; 20 | }); 21 | 22 | console.log(JSON.stringify(result, null, 2)); 23 | --------------------------------------------------------------------------------