diff --git a/package-lock.json b/package-lock.json index 6d8d0c4..d7e9695 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "@eslint/js": "^9.30.1", "@types/react": "^19.1.8", "@types/react-dom": "^19.1.6", - "@vitejs/plugin-react": "^4.6.0", + "@vitejs/plugin-react": "^4.7.0", "eslint": "^9.30.1", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", @@ -1024,11 +1024,10 @@ } }, "node_modules/@rolldown/pluginutils": { - "version": "1.0.0-beta.19", - "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.19.tgz", - "integrity": "sha512-3FL3mnMbPu0muGOCaKAhhFEYmqv9eTfPSJRJmANrCwtgK8VuxpsZDGK+m0LYAGoyO8+0j5uRe4PeyPDK1yA/hA==", - "dev": true, - "license": "MIT" + "version": "1.0.0-beta.27", + "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz", + "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==", + "dev": true }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.44.2", @@ -1631,16 +1630,15 @@ } }, "node_modules/@vitejs/plugin-react": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.6.0.tgz", - "integrity": "sha512-5Kgff+m8e2PB+9j51eGHEpn5kUzRKH2Ry0qGoe8ItJg7pqnkPrYPkDQZGgGmTa0EGarHrkjLvOdU3b1fzI8otQ==", + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz", + "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==", "dev": true, - "license": "MIT", "dependencies": { - "@babel/core": "^7.27.4", + "@babel/core": "^7.28.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", - "@rolldown/pluginutils": "1.0.0-beta.19", + "@rolldown/pluginutils": "1.0.0-beta.27", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, @@ -1648,7 +1646,7 @@ "node": "^14.18.0 || >=16.0.0" }, "peerDependencies": { - "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0" + "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "node_modules/acorn": { diff --git a/package.json b/package.json index cc9e39d..f8829b9 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "@eslint/js": "^9.30.1", "@types/react": "^19.1.8", "@types/react-dom": "^19.1.6", - "@vitejs/plugin-react": "^4.6.0", + "@vitejs/plugin-react": "^4.7.0", "eslint": "^9.30.1", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", diff --git a/src/components/frontend/cheatsheet.jsx b/src/components/frontend/cheatsheet.jsx new file mode 100644 index 0000000..dd1e196 --- /dev/null +++ b/src/components/frontend/cheatsheet.jsx @@ -0,0 +1,2515 @@ +import React, { useState, useEffect } from 'react'; + +const CheatSheet = () => { + const [searchTerm, setSearchTerm] = useState(''); + const [expandedCards, setExpandedCards] = useState(new Set()); + const [selectedCategory, setSelectedCategory] = useState('All'); + const [animateCards, setAnimateCards] = useState(false); + + useEffect(() => { + setAnimateCards(true); + }, []); + + const toggleCard = (index) => { + const newExpanded = new Set(expandedCards); + if (newExpanded.has(index)) { + newExpanded.delete(index); + } else { + newExpanded.add(index); + } + setExpandedCards(newExpanded); + }; + + const copyToClipboard = (text) => { + navigator.clipboard.writeText(text); + }; + + const notes = [ + { + title: "Main Root", + description: "The tag is the root of an HTML document. It contains all other tags", + category: "HTML", + icon: "🌐", + tips: [ + "Always declare at the top.", + "Use the lang attribute to specify language.", + ] + }, + { + title: "Boilerplate", + description: "Standard boilerplate includes , , with metadata and , and <body> where visible content goes.", + category: "HTML", + icon: "🌐", + tips: [ + "Always include <!DOCTYPE html> at the top.", + "Include <meta charset=\"UTF-8\" /> for proper character encoding." + ] +}, +{ + "title": "Headings", + "description": "HTML heading tags (<h1> to <h6>) define hierarchical headings. <h1> is typically the main title, with descending importance until <h6>. Includes a table for font sizes. GeeksforGeeks", + "table": [ + { + "tag": "<h1>", + "description": "Used for title generally once per page (font size 2β€―em).", + "syntax": "<h1>…</h1>" + }, + { + "tag": "<h2>", + "description": "Medium sized titles (1.5β€―em).", + "syntax": "<h2>…</h2>" + }, + { + "tag": "<h3>", + "description": "Subsections (1.17β€―em).", + "syntax": "<h3>…</h3>" + }, + { + "tag": "<h4>", + "description": "Highlighting text (1β€―em).", + "syntax": "<h4>…</h4>" + }, + { + "tag": "<h5>", + "description": "Fifth‑level heading (0.83β€―em).", + "syntax": "<h5>…</h5>" + }, + { + "tag": "<h6>", + "description": "Least significant details (0.67β€―em).", + "syntax": "<h6>…</h6>" + } + ], + "category": "HTML", + "icon": "🌐", + "tips": [ + "Use headings semantically to structure content.", + "<h1> is used for the main title and typically appears only once per page." + ], + +}, + { + "title": "Container", + "description": "Container tags in HTML are used to group other elements together. They provide a way to structure your HTML and apply styles to multiple elements at once. The several container tags in HTML are:", + "category": "HTML", + "icon": "🌐", + "tips": [ + "Use <div> for large sections and layout grouping.", + "<span> is best for inline text styling.", + "<pre> preserves whitespace and line breaks as written.", + "<code> is suitable for inline or block code snippets." + ], + "table": [ + { + "tag": "<div>", + "description": "Block element that defines a division in HTML document.", + "syntax": "<div>...</div>" + }, + { + "tag": "<span>", + "description": "Inline element used to mark up a part of a text or document.", + "syntax": "<span>...</span>" + }, + { + "tag": "<p>", + "description": "Used to represent a paragraph.", + "syntax": "<p>...</p>" + }, + { + "tag": "<pre>", + "description": "Represents pre-formatted text to present exactly as written in the HTML file.", + "syntax": "<pre>...</pre>" + }, + { + "tag": "<code>", + "description": "Used to represent source codes.", + "syntax": "<code>...</code>" + } + ] +}, + { + "title": "Document Information", + "description": "This section encompasses HTML tags that provide a comprehensive summary of the content within the HTML document. These tags offer a snapshot of what the document contains, enhancing the understanding of its structure and content.", + "category": "HTML", + "icon": "🌐", + "code": "", + "tips": [ + "Use <head> to group metadata about the document.", + "<title> appears on browser tabs and is crucial for SEO.", + "<meta> tags help describe your content to search engines.", + "<link> connects external resources like stylesheets.", + "<style> allows embedding CSS directly within the document." + ], + "table": [ + { + "tag": "<head>", + "description": "Container for metadata which is data about data.", + "syntax": "<head>...</head>" + }, + { + "tag": "<link>", + "description": "Used to link external style sheets or documents.", + "syntax": "<link>" + }, + { + "tag": "<meta>", + "description": "Defines metadata about HTML document.", + "syntax": "<meta/>" + }, + { + "tag": "<title>", + "description": "Defines the document's title.", + "syntax": "<title>..." + }, + { + "tag": "" + } + ] +}, +{ + "title": "Semantic Element", + "description": "Semantic Elements in HTML are elements that clearly describe their meaning in terms of content and function, both to the browser and the developer.", + "category": "HTML", + "icon": "🌐", + "code": "", + "tips": [ + "Use semantic elements to improve accessibility and SEO.", + "Browsers and screen readers can better interpret semantic tags.", + "Use
only once per page to denote primary content." + ], + "table": [ + { + "tag": "
", + "description": "Used to give introductory content about the document.", + "syntax": "
...
" + }, + { + "tag": "
", + "description": "Represents the main dominant content of a document.", + "syntax": "
...
" + }, + { + "tag": "
", + "description": "Structural HTML element used to group together related elements.", + "syntax": "
...
" + }, + { + "tag": "