From a7e1db309c68f832f2e01f2caa7c4a6da803e9c8 Mon Sep 17 00:00:00 2001 From: Nikhil Verma Date: Sat, 8 Aug 2026 22:10:39 +0530 Subject: [PATCH 1/2] chore: add new file for html --- frontend/content/html.mdx | 268 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 268 insertions(+) create mode 100644 frontend/content/html.mdx diff --git a/frontend/content/html.mdx b/frontend/content/html.mdx new file mode 100644 index 0000000..e7e6ae8 --- /dev/null +++ b/frontend/content/html.mdx @@ -0,0 +1,268 @@ +--- +title: "HTML" +description: "The standard markup language for building web pages. Learn semantics, structure, forms, media, and modern best practices." +category: "Core Programming" +--- + +## Getting Started + +HTML (HyperText Markup Language) is the foundation of every web page. It provides the structure and meaning of content, while CSS handles presentation and JavaScript adds interactivity. A good HTML document is semantic, accessible, and easy to maintain. + +### Basic Document Structure + +```html + + + + + + My Page + + +

Hello, World!

+

This is a simple HTML document.

+ + +``` + +### Common HTML Elements + +```html +

Heading 1

+

Heading 2

+

This is a paragraph.

+Visit Example +A sample image + +``` + +--- + +## Semantic Structure + +Semantic HTML improves readability for humans and machines. It helps search engines, assistive technologies, and developers understand the purpose of each section. + +```html +
+
+

Article Title

+

Published on April 8, 2026

+
+ +
+

Overview

+

This content belongs to a specific article.

+
+ +
+

Written by a contributor

+
+
+``` + +### Common Semantic Tags + +```html +
Site header
+ +
Main content
+
Grouped content
+
Independent content block
+ + +``` + +--- + +## Text Content & Formatting + +HTML provides tags for formatting text, though visual styling is usually handled by CSS. + +```html +

This is important text.

+

This is emphasized text.

+

Use highlighted text for emphasis.

+

Here is inline code.

+

Line break:
This continues on the next line.

+``` + +### Lists + +```html + + +
    +
  1. First item
    2. +
  2. Second item
    3. +
+``` + +--- + +## Links, Images & Media + +### Anchor Links + +```html +Jump to a section +Go to About Page +Email us +Call us +``` + +### Images + +```html +A smiling developer + + +A smiling developer +``` + +### Audio and Video + +```html + + + +``` + +--- + +## Forms + +Forms are essential for collecting user input. They should use appropriate labels and accessible attributes. + +```html +
+ + + + + + + + + + +
+``` + +### Common Input Types + +```html + + + + + + + + +``` + +### Select and Option + +```html + + +``` + +--- + +## Tables + +Tables are used for displaying tabular data, not for visual layout. + +```html + + + + + + + + + + + + + + + + + +
NameRole
AliceDeveloper
BobDesigner
+``` + +--- + +## Accessibility Basics + +Accessible HTML ensures your content is usable by everyone, including people using assistive technologies. + +```html +Profile photo of Jane Doe + + + + + +``` + +### Accessibility Tips + +- Use meaningful `alt` text for images. +- Always associate labels with form controls. +- Use semantic elements like `header`, `main`, and `footer`. +- Ensure buttons and links have clear purpose. +- Avoid relying on color alone for meaning. + +--- + +## Best Practices + +```html + +
+
+

Products

+

Browse our latest offerings.

+
+
+ + +
+
+
Products
+
Browse our latest offerings.
+
+
+``` + +### Recommended Practices + +- Use semantic tags whenever possible. +- Keep markup clean and well-indented. +- Use lowercase tag names and attribute names. +- Add `alt` text to images. +- Prefer native form controls over custom ones when possible. +- Validate your HTML to catch structural issues early. From df9a2d392dd838fbae21f2594508147da0122309 Mon Sep 17 00:00:00 2001 From: Nikhil Verma Date: Sun, 9 Aug 2026 12:06:11 +0530 Subject: [PATCH 2/2] feat: add the remaining topics --- frontend/app/[topic]/TopicLayout.tsx | 337 +++++++++++++++------- frontend/app/globals.css | 25 +- frontend/content/accessibility.mdx | 89 ++++++ frontend/content/agents.mdx | 40 +++ frontend/content/ai-safety.mdx | 37 +++ frontend/content/algorithms.mdx | 100 +++++++ frontend/content/apis.mdx | 83 ++++++ frontend/content/async.mdx | 71 +++++ frontend/content/bash.mdx | 91 ++++++ frontend/content/caching.mdx | 62 ++++ frontend/content/ci-cd.mdx | 42 +++ frontend/content/cloud-architecture.mdx | 41 +++ frontend/content/csharp.mdx | 121 ++++++++ frontend/content/css.mdx | 120 ++++++++ frontend/content/data-science.mdx | 120 ++++++++ frontend/content/data-structures.mdx | 84 ++++++ frontend/content/databases.mdx | 47 +++ frontend/content/debugging.mdx | 36 +++ frontend/content/dependency-injection.mdx | 50 ++++ frontend/content/deployment.mdx | 64 ++++ frontend/content/design-pattern.mdx | 94 ++++++ frontend/content/docker.mdx | 70 +++++ frontend/content/event-driven.mdx | 42 +++ frontend/content/git.mdx | 74 +++++ frontend/content/github-actions.mdx | 50 ++++ frontend/content/go.mdx | 132 +++++++++ frontend/content/java.mdx | 129 +++++++++ frontend/content/kubernetes.mdx | 74 +++++ frontend/content/linux.mdx | 47 +++ frontend/content/llms.mdx | 109 +++++++ frontend/content/load-balancing.mdx | 54 ++++ frontend/content/microservices.mdx | 42 +++ frontend/content/ml.mdx | 128 ++++++++ frontend/content/model-evaluation.mdx | 36 +++ frontend/content/monitoring.mdx | 41 +++ frontend/content/nextjs.mdx | 108 +++++++ frontend/content/nginx.mdx | 73 +++++ frontend/content/nodejs.mdx | 103 +++++++ frontend/content/oauth.mdx | 80 +++++ frontend/content/observability.mdx | 37 +++ frontend/content/prompt-engineering.mdx | 126 ++++++++ frontend/content/rag.mdx | 43 +++ frontend/content/reliability.mdx | 37 +++ frontend/content/rust.mdx | 108 +++++++ frontend/content/security.mdx | 62 ++++ frontend/content/sql.mdx | 96 ++++++ frontend/content/state-management.mdx | 50 ++++ frontend/content/system-design.mdx | 53 ++++ frontend/content/tailwind.mdx | 106 +++++++ frontend/content/terraform.mdx | 56 ++++ frontend/content/testing.mdx | 92 ++++++ frontend/content/typescript.mdx | 145 ++++++++++ frontend/content/validation.mdx | 48 +++ frontend/content/vectors.mdx | 95 ++++++ frontend/content/vercel.mdx | 33 +++ frontend/content/vscode.mdx | 46 +++ frontend/content/web-security.mdx | 58 ++++ frontend/content/webpack.mdx | 62 ++++ 58 files changed, 4386 insertions(+), 113 deletions(-) create mode 100644 frontend/content/accessibility.mdx create mode 100644 frontend/content/agents.mdx create mode 100644 frontend/content/ai-safety.mdx create mode 100644 frontend/content/algorithms.mdx create mode 100644 frontend/content/apis.mdx create mode 100644 frontend/content/async.mdx create mode 100644 frontend/content/bash.mdx create mode 100644 frontend/content/caching.mdx create mode 100644 frontend/content/ci-cd.mdx create mode 100644 frontend/content/cloud-architecture.mdx create mode 100644 frontend/content/csharp.mdx create mode 100644 frontend/content/css.mdx create mode 100644 frontend/content/data-science.mdx create mode 100644 frontend/content/data-structures.mdx create mode 100644 frontend/content/databases.mdx create mode 100644 frontend/content/debugging.mdx create mode 100644 frontend/content/dependency-injection.mdx create mode 100644 frontend/content/deployment.mdx create mode 100644 frontend/content/design-pattern.mdx create mode 100644 frontend/content/docker.mdx create mode 100644 frontend/content/event-driven.mdx create mode 100644 frontend/content/git.mdx create mode 100644 frontend/content/github-actions.mdx create mode 100644 frontend/content/go.mdx create mode 100644 frontend/content/java.mdx create mode 100644 frontend/content/kubernetes.mdx create mode 100644 frontend/content/linux.mdx create mode 100644 frontend/content/llms.mdx create mode 100644 frontend/content/load-balancing.mdx create mode 100644 frontend/content/microservices.mdx create mode 100644 frontend/content/ml.mdx create mode 100644 frontend/content/model-evaluation.mdx create mode 100644 frontend/content/monitoring.mdx create mode 100644 frontend/content/nextjs.mdx create mode 100644 frontend/content/nginx.mdx create mode 100644 frontend/content/nodejs.mdx create mode 100644 frontend/content/oauth.mdx create mode 100644 frontend/content/observability.mdx create mode 100644 frontend/content/prompt-engineering.mdx create mode 100644 frontend/content/rag.mdx create mode 100644 frontend/content/reliability.mdx create mode 100644 frontend/content/rust.mdx create mode 100644 frontend/content/security.mdx create mode 100644 frontend/content/sql.mdx create mode 100644 frontend/content/state-management.mdx create mode 100644 frontend/content/system-design.mdx create mode 100644 frontend/content/tailwind.mdx create mode 100644 frontend/content/terraform.mdx create mode 100644 frontend/content/testing.mdx create mode 100644 frontend/content/typescript.mdx create mode 100644 frontend/content/validation.mdx create mode 100644 frontend/content/vectors.mdx create mode 100644 frontend/content/vercel.mdx create mode 100644 frontend/content/vscode.mdx create mode 100644 frontend/content/web-security.mdx create mode 100644 frontend/content/webpack.mdx diff --git a/frontend/app/[topic]/TopicLayout.tsx b/frontend/app/[topic]/TopicLayout.tsx index c393bc4..36ae1df 100644 --- a/frontend/app/[topic]/TopicLayout.tsx +++ b/frontend/app/[topic]/TopicLayout.tsx @@ -36,16 +36,20 @@ export default function TopicLayout({ const router = useRouter(); const searchInputRef = useRef(null); const [docSearch, setDocSearch] = useState(""); - const [domHeadings, setDomHeadings] = useState>([]); + const [domHeadings, setDomHeadings] = useState< + Array<{ id: string; title: string; depth: number }> + >([]); useEffect(() => { - const article = document.querySelector('article'); - const headingNodes = article ? Array.from(article.querySelectorAll('h2[id], h3[id]')) : []; + const article = document.querySelector("article"); + const headingNodes = article + ? Array.from(article.querySelectorAll("h2[id], h3[id]")) + : []; const nextHeadings = headingNodes.map((node) => ({ id: node.id, title: node.textContent?.trim() || node.id, - depth: node.tagName === 'H3' ? 3 : 2, + depth: node.tagName === "H3" ? 3 : 2, })); setDomHeadings(nextHeadings); @@ -59,7 +63,9 @@ export default function TopicLayout({ if (!hasSearchQuery) return []; const sectionMatches = activeHeadings - .filter((heading) => heading.title.toLowerCase().includes(normalizedQuery)) + .filter((heading) => + heading.title.toLowerCase().includes(normalizedQuery), + ) .map((heading) => ({ id: heading.id, title: heading.title, @@ -71,7 +77,10 @@ export default function TopicLayout({ .filter((item) => { const title = (item.title || item.id || "").toLowerCase(); const description = (item.description || "").toLowerCase(); - return title.includes(normalizedQuery) || description.includes(normalizedQuery); + return ( + title.includes(normalizedQuery) || + description.includes(normalizedQuery) + ); }) .map((item) => ({ id: item.id, @@ -84,12 +93,21 @@ export default function TopicLayout({ }, [activeHeadings, hasSearchQuery, normalizedQuery, topics]); const outlineGroups = useMemo(() => { - const groups: Array<{ id: string; title: string; items: Array<{ id: string; title: string }> }> = []; - let activeGroup: { id: string; title: string; items: Array<{ id: string; title: string }> } | null = null; + const groups: Array<{ + id: string; + title: string; + items: Array<{ id: string; title: string }>; + }> = []; + let activeGroup: { + id: string; + title: string; + items: Array<{ id: string; title: string }>; + } | null = null; for (const heading of activeHeadings) { const headingQuery = heading.title.toLowerCase(); - const matchesQuery = !hasSearchQuery || headingQuery.includes(normalizedQuery); + const matchesQuery = + !hasSearchQuery || headingQuery.includes(normalizedQuery); if (heading.depth === 2) { if (hasSearchQuery && !matchesQuery) continue; @@ -109,11 +127,16 @@ export default function TopicLayout({ return groups; }, [activeHeadings, hasSearchQuery, normalizedQuery]); - const [expandedOutline, setExpandedOutline] = useState>({}); + const [expandedOutline, setExpandedOutline] = useState< + Record + >({}); const [activeOutlineId, setActiveOutlineId] = useState(null); useEffect(() => { - const ids = outlineGroups.flatMap((group) => [group.id, ...group.items.map((item) => item.id)]); + const ids = outlineGroups.flatMap((group) => [ + group.id, + ...group.items.map((item) => item.id), + ]); if (ids.length === 0) { setActiveOutlineId(null); return; @@ -133,7 +156,9 @@ export default function TopicLayout({ } } - setActiveOutlineId((previous) => previous === currentId ? previous : currentId); + setActiveOutlineId((previous) => + previous === currentId ? previous : currentId, + ); }; updateActiveOutline(); @@ -171,8 +196,16 @@ export default function TopicLayout({ }, [outlineGroups]); const sectionGroups = useMemo(() => { - const groups: Array<{ id: string; title: string; items: Array<{ id: string; title: string }> }> = []; - let activeGroup: { id: string; title: string; items: Array<{ id: string; title: string }> } | null = null; + const groups: Array<{ + id: string; + title: string; + items: Array<{ id: string; title: string }>; + }> = []; + let activeGroup: { + id: string; + title: string; + items: Array<{ id: string; title: string }>; + } | null = null; for (const heading of headings) { if (heading.depth === 2) { @@ -189,7 +222,9 @@ export default function TopicLayout({ return groups; }, [headings]); - const [expandedSections, setExpandedSections] = useState>({}); + const [expandedSections, setExpandedSections] = useState< + Record + >({}); useEffect(() => { setExpandedSections((previous) => { @@ -204,15 +239,21 @@ export default function TopicLayout({ }, [sectionGroups]); const theme = { - page: darkMode ? "bg-[#050505] text-[#F5F5F5]" : "bg-[#F5F3EE] text-[#111111]", + page: darkMode + ? "bg-[#050505] text-[#F5F5F5]" + : "bg-[#F5F3EE] text-[#111111]", panel: darkMode ? "bg-[#050505]" : "bg-[#F5F3EE]", border: darkMode ? "border-[#1A1A1A]" : "border-[#DFE1DA]", muted: darkMode ? "text-[#8A8A8A]" : "text-[#666C73]", - soft: darkMode ? "bg-[#0D0D0D] text-[#F5F5F5]" : "bg-[#F0EFEA] text-[#111111]", + soft: darkMode + ? "bg-[#0D0D0D] text-[#F5F5F5]" + : "bg-[#F0EFEA] text-[#111111]", active: darkMode ? "bg-[#111111] text-white" : "bg-white text-black", accent: darkMode ? "text-zinc-100" : "text-zinc-800", hoverAccent: darkMode ? "hover:text-white" : "hover:text-zinc-900", - input: darkMode ? "border-[#1D1D1D] bg-[#0B0B0B]" : "border-[#DDE0D7] bg-[#F7F6F3]", + input: darkMode + ? "border-[#1D1D1D] bg-[#0B0B0B]" + : "border-[#DDE0D7] bg-[#F7F6F3]", sidebar: darkMode ? "bg-[#050505]" : "bg-[#F2F0EA]", navItem: darkMode ? "text-[#F5F5F5]" : "text-[#111111]", }; @@ -220,7 +261,8 @@ export default function TopicLayout({ const getTopicIcon = (topicId: string) => { const value = topicId.toLowerCase(); - if (value.includes("javascript") || value.includes("js")) return TerminalSquare; + if (value.includes("javascript") || value.includes("js")) + return TerminalSquare; if (value.includes("python")) return Braces; if (value.includes("react")) return Workflow; if (value.includes("cpp") || value.includes("c++")) return Code2; @@ -230,13 +272,44 @@ export default function TopicLayout({ const getSectionIcon = (title: string) => { const value = title.toLowerCase(); - if (value.includes("getting") || value.includes("overview") || value.includes("introduction")) return BookOpenText; - if (value.includes("variable") || value.includes("data") || value.includes("types")) return Braces; - if (value.includes("console") || value.includes("terminal")) return TerminalSquare; - if (value.includes("function") || value.includes("module") || value.includes("async")) return Code2; - if (value.includes("security") || value.includes("protection") || value.includes("rules")) return ShieldCheck; - if (value.includes("best practice") || value.includes("tips") || value.includes("patterns")) return Sparkles; - if (value.includes("workflow") || value.includes("lifecycle") || value.includes("reconciliation")) return Workflow; + if ( + value.includes("getting") || + value.includes("overview") || + value.includes("introduction") + ) + return BookOpenText; + if ( + value.includes("variable") || + value.includes("data") || + value.includes("types") + ) + return Braces; + if (value.includes("console") || value.includes("terminal")) + return TerminalSquare; + if ( + value.includes("function") || + value.includes("module") || + value.includes("async") + ) + return Code2; + if ( + value.includes("security") || + value.includes("protection") || + value.includes("rules") + ) + return ShieldCheck; + if ( + value.includes("best practice") || + value.includes("tips") || + value.includes("patterns") + ) + return Sparkles; + if ( + value.includes("workflow") || + value.includes("lifecycle") || + value.includes("reconciliation") + ) + return Workflow; return BookOpenText; }; @@ -247,75 +320,96 @@ export default function TopicLayout({ if (!target) return; const headerOffset = 88; - const top = target.getBoundingClientRect().top + window.scrollY - headerOffset; + const top = + target.getBoundingClientRect().top + window.scrollY - headerOffset; window.scrollTo({ top, behavior: "smooth" }); }; return ( -
-
-
-
-
- R_ +
+
+
+
+
+ + R_ +
-
+
RefMe docs
-
-
-
- +
+
+
+ setDocSearch(event.target.value)} - aria-label='Search docs' - placeholder='Search topics and sections...' - className='w-full bg-transparent text-sm outline-none placeholder:text-current placeholder:opacity-50' + aria-label="Search docs" + placeholder="Search topics and sections..." + className="w-full bg-transparent text-sm outline-none placeholder:text-current placeholder:opacity-50" /> {docSearch ? ( ) : ( - ⌘K + + ⌘K + )}
{hasSearchQuery && ( -
+
{searchResults.length > 0 ? ( -
+
{searchResults.map((result) => ( ))}
@@ -330,29 +424,31 @@ export default function TopicLayout({
-
-