Merge pull request #350 from laststance/ryota-murakami/create-website

Create website listing all lint rules
laststance · Jun 14, 2024 · 4a16b22 · 4a16b22
2 parents f0f09da + 294254d
commit 4a16b22
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -173,6 +173,14 @@ just run `npm run lint:fix` to apply this package's configurations! 🎉
 }
 ```
 
+## Explore Our Lint Rules Website
+
+We are excited to announce the launch of our new website, which provides a comprehensive list of all lint rules from the original documentation. This resource is designed to help you easily navigate and understand the various lint rules available for your projects.
+
+Visit the website: [ESLint Config TS Prefixer Lint Rules](https://example.com/lint-rules)
+
+The website features a user-friendly interface, allowing you to explore different categories of lint rules, search for specific rules, and learn more about each rule's purpose and usage. Whether you are a beginner or an experienced developer, this website will serve as a valuable tool for ensuring code quality and consistency in your projects.
+
 ## LICENSE
 
 [MIT](https://opensource.org/license/mit/)

diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
     "lint:fix": "eslint index.cjs bin/cli.mjs --fix",
     "prettier": "prettier --ignore-unknown --write .",
     "release": "release-it",
-    "prepare": "husky"
+    "prepare": "husky",
+    "deploy": "gh-pages -d website"
   },
   "repository": {
     "type": "git",
@@ -43,7 +44,8 @@
     "lint-staged": "^15.0.1",
     "prettier": "^3.0.3",
     "release-it": "^17.0.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "gh-pages": "^4.0.0"
   },
   "peerDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.0.0 || ^7.0.0",

diff --git a/website/index.html b/website/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ESLint Config TS Prefixer Lint Rules</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <h1>ESLint Config TS Prefixer Lint Rules</h1>
+    </header>
+    <section id="overview">
+        <h2>Overview</h2>
+        <p>Welcome to the ESLint Config TS Prefixer website. Here, you can find a comprehensive list of lint rules derived from the original documentation, organized for your convenience.</p>
+    </section>
+    <nav>
+        <h2>Lint Rule Categories</h2>
+        <ul>
+            <li><a href="#stylistic-rules">Stylistic Rules</a></li>
+            <li><a href="#best-practices">Best Practices</a></li>
+            <li><a href="#ecmascript-6">ECMAScript 6</a></li>
+            <li><a href="#variables">Variables</a></li>
+            <li><a href="#possible-errors">Possible Errors</a></li>
+        </ul>
+    </nav>
+    <script src="scripts.js"></script>
+</body>
+</html>
diff --git a/website/scripts.js b/website/scripts.js
@@ -0,0 +1,58 @@
+// Function to dynamically load lint rule descriptions
+async function loadLintRules() {
+    const eslintRulesUrl = 'https://github.com/eslint/eslint/tree/main/docs/src/rules';
+    const typescriptEslintRulesUrl = 'https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/eslint-plugin/docs/rules';
+
+    try {
+        const [eslintResponse, typescriptEslintResponse] = await Promise.all([
+            fetch(eslintRulesUrl),
+            fetch(typescriptEslintRulesUrl)
+        ]);
+
+        const eslintRules = await eslintResponse.json();
+        const typescriptEslintRules = await typescriptEslintResponse.json();
+
+        displayRules(eslintRules, 'ESLint Rules');
+        displayRules(typescriptEslintRules, 'TypeScript ESLint Rules');
+    } catch (error) {
+        console.error('Failed to load lint rules:', error);
+    }
+}
+
+// Function to display rules on the page
+function displayRules(rules, title) {
+    const rulesContainer = document.createElement('div');
+    rulesContainer.className = 'rules-container';
+
+    const rulesTitle = document.createElement('h2');
+    rulesTitle.textContent = title;
+    rulesContainer.appendChild(rulesTitle);
+
+    const rulesList = document.createElement('ul');
+    rules.forEach(rule => {
+        const ruleItem = document.createElement('li');
+        ruleItem.textContent = rule.name;
+        rulesList.appendChild(ruleItem);
+    });
+    rulesContainer.appendChild(rulesList);
+
+    document.body.appendChild(rulesContainer);
+}
+
+// Search and filter functionality
+function setupSearchAndFilter() {
+    const searchInput = document.getElementById('search');
+    searchInput.addEventListener('input', (event) => {
+        const searchTerm = event.target.value.toLowerCase();
+        const ruleItems = document.querySelectorAll('.rules-container li');
+        ruleItems.forEach(item => {
+            const isVisible = item.textContent.toLowerCase().includes(searchTerm);
+            item.style.display = isVisible ? 'block' : 'none';
+        });
+    });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    loadLintRules();
+    setupSearchAndFilter();
+});
diff --git a/website/styles.css b/website/styles.css
@@ -0,0 +1,46 @@
+/* Basic styles for layout, typography, and color scheme */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+    color: #333;
+}
+
+header {
+    background-color: #007BFF;
+    color: #fff;
+    padding: 20px;
+    text-align: center;
+}
+
+section#overview {
+    padding: 20px;
+}
+
+nav {
+    background-color: #333;
+    color: #fff;
+    padding: 20px;
+}
+
+nav ul {
+    list-style: none;
+    padding: 0;
+}
+
+nav ul li {
+    margin-bottom: 10px;
+}
+
+nav ul li a {
+    color: #fff;
+    text-decoration: none;
+}
+
+/* Ensure responsiveness for mobile devices */
+@media (max-width: 600px) {
+    header, section, nav {
+        padding: 10px;
+    }
+}