AAVE \/ Ebonics Phrasebook – Community Dictionary<\/title>\n <meta name=\"description\" content=\"Interactive, community-driven AAVE\/Ebonics phrasebook with voting, comments, and user submissions.\" \/>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n \/* ===== CSS Variables with Green, Yellow, Red, Black Theme ===== *\/\n :root {\n --green: #10B981;\n --green-dark: #059669;\n --green-light: #A7F3D0;\n --yellow: #FBBF24;\n --yellow-dark: #F59E0B;\n --yellow-light: #FEF3C7;\n --red: #EF4444;\n --red-dark: #DC2626;\n --red-light: #FECACA;\n --black: #000000;\n --black-soft: #1F2937;\n --card: #FFFFFF;\n --border: #E5E7EB;\n --bg: #FAFAF9;\n --muted: #6B7280;\n --radius: 16px;\n --radius-sm: 10px;\n --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);\n --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);\n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n * { box-sizing: border-box; margin: 0; padding: 0; }\n \n body {\n background: linear-gradient(135deg, #FEFCE8 0%, #F0FDF4 100%);\n color: var(--black-soft);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n line-height: 1.6;\n min-height: 100vh;\n padding: 20px;\n display: flex;\n flex-direction: column;\n }\n \n \/* ===== Layout ===== *\/\n .app-container {\n display: flex;\n gap: 24px;\n max-width: 1400px;\n margin: 0 auto;\n width: 100%;\n flex: 1;\n }\n \n .main-content {\n flex: 3;\n min-width: 0;\n }\n \n .sidebar {\n flex: 1;\n min-width: 300px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n \n @media (max-width: 1100px) {\n .app-container { flex-direction: column; }\n .sidebar { min-width: 100%; }\n }\n \n \/* ===== Header & Form ===== *\/\n .header-container {\n margin-bottom: 32px;\n }\n \n .hero {\n background: linear-gradient(135deg, var(--green-light) 0%, var(--yellow-light) 100%);\n border: 2px solid var(--green);\n border-radius: var(--radius);\n padding: 32px;\n box-shadow: var(--shadow);\n position: relative;\n overflow: hidden;\n margin-bottom: 24px;\n }\n \n .hero h1 {\n font-size: 28px;\n font-weight: 800;\n color: var(--black);\n margin-bottom: 12px;\n line-height: 1.2;\n }\n \n .hero h1 span {\n background: linear-gradient(90deg, var(--green) 0%, var(--yellow) 50%, var(--red) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n \n .highlight { background: var(--yellow-light); color: var(--black); padding: 4px 12px; border-radius: 6px; font-weight: 700; border: 1px solid var(--yellow); }\n \n \/* ===== Submission Form ===== *\/\n .submission-form {\n background: var(--card);\n border: 2px solid var(--yellow);\n border-radius: var(--radius);\n padding: 24px;\n box-shadow: var(--shadow);\n margin-bottom: 24px;\n }\n \n .form-title {\n color: var(--black);\n font-size: 20px;\n font-weight: 800;\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .form-title i { color: var(--green); }\n \n .form-grid {\n display: grid;\n gap: 16px;\n }\n \n .form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n }\n \n .form-input, .form-select, .form-textarea {\n padding: 14px;\n border-radius: var(--radius-sm);\n border: 2px solid var(--border);\n background: #FFFFFF;\n color: var(--black);\n font-size: 15px;\n font-weight: 600;\n transition: var(--transition);\n width: 100%;\n }\n \n .form-textarea { min-height: 100px; resize: vertical; }\n \n .form-input:focus, .form-select:focus, .form-textarea:focus {\n outline: none;\n border-color: var(--green);\n box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);\n }\n \n .form-btn {\n padding: 16px;\n border-radius: var(--radius-sm);\n border: none;\n font-size: 16px;\n font-weight: 800;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n transition: var(--transition);\n background: linear-gradient(135deg, var(--green) 0%, var(--yellow) 100%);\n color: var(--black);\n border: 2px solid var(--black);\n }\n \n .form-btn:hover {\n transform: translateY(-3px) scale(1.02);\n box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);\n }\n \n \/* ===== Controls Panel ===== *\/\n .controls-panel {\n background: var(--card);\n border: 2px solid var(--red);\n border-radius: var(--radius);\n padding: 24px;\n box-shadow: var(--shadow);\n }\n \n .controls-grid { display: grid; gap: 20px; }\n \n .search-box { position: relative; }\n \n .search-box i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--green); }\n \n .search-input {\n width: 100%;\n padding: 16px 16px 16px 50px;\n border-radius: var(--radius-sm);\n border: 2px solid var(--yellow);\n background: #FFFFFF;\n color: var(--black);\n font-size: 16px;\n font-weight: 600;\n transition: var(--transition);\n }\n \n .search-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2); }\n \n .filters-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n \n .select {\n padding: 14px;\n border-radius: var(--radius-sm);\n border: 2px solid var(--green);\n background: #FFFFFF;\n color: var(--black);\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n }\n \n .select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1); }\n \n .buttons-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n \n .btn {\n padding: 16px;\n border-radius: var(--radius-sm);\n border: none;\n font-size: 16px;\n font-weight: 800;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n transition: var(--transition);\n color: var(--black);\n }\n \n .btn-clear { background: var(--red-light); border: 2px solid var(--red); }\n .btn-clear:hover { background: var(--red); color: white; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3); }\n \n .btn-random { background: linear-gradient(135deg, var(--green) 0%, var(--yellow) 100%); border: 2px solid var(--black); font-weight: 900; }\n .btn-random:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4); }\n \n .stats {\n color: var(--black);\n font-size: 15px;\n font-weight: 700;\n padding: 14px;\n text-align: center;\n border-top: 2px dashed var(--red);\n border-bottom: 2px dashed var(--red);\n background: var(--yellow-light);\n border-radius: var(--radius-sm);\n }\n \n \/* ===== Cards Grid ===== *\/\n .cards-grid { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }\n \n .card {\n background: var(--card);\n border: 3px solid;\n border-radius: var(--radius);\n padding: 24px;\n box-shadow: var(--shadow);\n transition: var(--transition);\n position: relative;\n overflow: hidden;\n }\n \n .card:nth-child(odd) { border-color: var(--green); }\n .card:nth-child(even) { border-color: var(--yellow); }\n .card:nth-child(3n) { border-color: var(--red); }\n \n .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }\n \n .card-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 15px;\n }\n \n .card-category {\n display: inline-block;\n font-size: 13px;\n font-weight: 900;\n color: var(--black);\n padding: 8px 18px;\n border-radius: 50px;\n border: 2px solid;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n \n .card-category.grammar { background: var(--green-light); border-color: var(--green); }\n .card-category.everyday { background: var(--yellow-light); border-color: var(--yellow); }\n .card-category.social { background: var(--red-light); border-color: var(--red); }\n .card-category.money { background: var(--green-light); border-color: var(--green); }\n .card-category.culture { background: var(--yellow-light); border-color: var(--yellow); }\n .card-category.expression { background: var(--red-light); border-color: var(--red); }\n .card-category.identity { background: var(--green-light); border-color: var(--green); }\n .card-category.historical { background: var(--yellow-light); border-color: var(--yellow); }\n .card-category.slang { background: var(--red-light); border-color: var(--red); }\n \n \/* ===== Voting System ===== *\/\n .vote-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n }\n \n .vote-btn {\n background: none;\n border: none;\n color: var(--muted);\n cursor: pointer;\n font-size: 20px;\n transition: var(--transition);\n padding: 5px;\n border-radius: 50%;\n }\n \n .vote-btn:hover { transform: scale(1.2); }\n .vote-btn.upvote:hover { color: var(--green); background: rgba(16, 185, 129, 0.1); }\n .vote-btn.downvote:hover { color: var(--red); background: rgba(239, 68, 68, 0.1); }\n \n .vote-btn.upvote.active { color: var(--green); }\n .vote-btn.downvote.active { color: var(--red); }\n \n .vote-score {\n font-size: 20px;\n font-weight: 900;\n color: var(--black);\n min-width: 30px;\n text-align: center;\n }\n \n .card-content {\n display: flex;\n gap: 20px;\n }\n \n .card-voting { flex: 0 0 auto; }\n \n .card-body { flex: 1; }\n \n .card-term {\n margin: 12px 0 6px;\n font-size: 22px;\n font-weight: 900;\n color: var(--black);\n line-height: 1.3;\n }\n \n .card-label {\n font-size: 13px;\n font-weight: 900;\n color: var(--black);\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 8px;\n padding: 4px 0;\n border-bottom: 2px solid;\n }\n \n .card-label.aave { border-color: var(--red); }\n .card-label.standard { border-color: var(--green); }\n \n .card-translation {\n font-size: 18px;\n color: var(--black);\n font-weight: 700;\n margin: 16px 0;\n line-height: 1.4;\n padding: 12px;\n border-radius: var(--radius-sm);\n background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.1) 100%);\n border-left: 4px solid var(--green);\n }\n \n .card-meaning {\n margin: 20px 0;\n color: var(--black-soft);\n padding: 16px;\n border-radius: var(--radius-sm);\n background: var(--yellow-light);\n border: 2px solid var(--yellow);\n font-weight: 600;\n }\n \n .card-meaning b { color: var(--red); }\n \n .card-example {\n margin-top: 24px;\n padding: 18px;\n border-radius: var(--radius-sm);\n background: linear-gradient(135deg, #FEF2F2 0%, #F0F9FF 100%);\n border: 2px solid var(--green);\n }\n \n .card-example div { margin-bottom: 12px; padding: 8px; border-radius: 6px; }\n .card-example b { color: var(--black); font-weight: 900; }\n .card-example div:nth-child(1) { background: rgba(239, 68, 68, 0.1); border-left: 4px solid var(--red); }\n .card-example div:nth-child(2) { background: rgba(16, 185, 129, 0.1); border-left: 4px solid var(--green); }\n \n \/* ===== Card Actions & Comments ===== *\/\n .card-actions {\n display: flex;\n gap: 12px;\n margin-top: 24px;\n flex-wrap: wrap;\n }\n \n .card-btn {\n padding: 12px;\n border-radius: var(--radius-sm);\n border: 2px solid var(--black);\n background: var(--card);\n color: var(--black);\n font-size: 14px;\n font-weight: 800;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n transition: var(--transition);\n flex: 1;\n min-width: 120px;\n }\n \n .card-btn:hover { background: var(--green); color: white; border-color: var(--green); }\n .card-btn.comment-btn:hover { background: var(--yellow); }\n .card-btn.copy-btn:hover { background: var(--red); }\n \n \/* ===== Comments Section ===== *\/\n .comments-section {\n margin-top: 20px;\n padding: 20px;\n border-radius: var(--radius-sm);\n background: #F8FAFC;\n border: 2px solid var(--border);\n display: none;\n }\n \n .comments-section.active { display: block; }\n \n .comments-title {\n font-size: 18px;\n font-weight: 800;\n color: var(--black);\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .comment-form { margin-bottom: 20px; }\n \n .comment-input {\n width: 100%;\n padding: 14px;\n border-radius: var(--radius-sm);\n border: 2px solid var(--yellow);\n background: #FFFFFF;\n color: var(--black);\n font-size: 15px;\n margin-bottom: 10px;\n resize: vertical;\n min-height: 80px;\n }\n \n .comment-submit {\n padding: 12px 24px;\n border-radius: var(--radius-sm);\n border: none;\n background: var(--green);\n color: white;\n font-weight: 700;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .comment-submit:hover { background: var(--green-dark); }\n \n .comments-list { display: flex; flex-direction: column; gap: 15px; }\n \n .comment {\n padding: 15px;\n border-radius: var(--radius-sm);\n background: white;\n border: 1px solid var(--border);\n }\n \n .comment-header {\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n \n .comment-author {\n font-weight: 800;\n color: var(--black);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .comment-author i { color: var(--green); }\n \n .comment-timestamp {\n font-size: 12px;\n color: var(--muted);\n }\n \n .comment-text {\n color: var(--black-soft);\n line-height: 1.5;\n margin-bottom: 10px;\n }\n \n .comment-votes {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .comment-vote-btn {\n background: none;\n border: none;\n color: var(--muted);\n cursor: pointer;\n font-size: 14px;\n padding: 2px 5px;\n }\n \n .comment-vote-btn:hover { color: var(--green); }\n .comment-vote-btn.down:hover { color: var(--red); }\n \n .comment-score {\n font-weight: 700;\n color: var(--black);\n font-size: 14px;\n }\n \n \/* ===== Sidebar Components ===== *\/\n .sidebar-card {\n background: var(--card);\n border: 2px solid var(--green);\n border-radius: var(--radius);\n padding: 24px;\n box-shadow: var(--shadow);\n }\n \n .sidebar-title {\n font-size: 20px;\n font-weight: 800;\n color: var(--black);\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .sidebar-title i { color: var(--red); }\n \n .leaderboard-list, .recent-comments-list {\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n \n .leaderboard-item, .recent-comment {\n padding: 15px;\n border-radius: var(--radius-sm);\n background: #F8FAFC;\n border: 1px solid var(--border);\n }\n \n .leaderboard-header {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n }\n \n .leaderboard-name {\n font-weight: 800;\n color: var(--black);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .leaderboard-score {\n font-weight: 900;\n color: var(--green);\n background: var(--green-light);\n padding: 4px 12px;\n border-radius: 50px;\n }\n \n .leaderboard-phrases {\n font-size: 14px;\n color: var(--muted);\n }\n \n .recent-comment-text {\n color: var(--black-soft);\n margin-bottom: 10px;\n line-height: 1.4;\n font-size: 14px;\n }\n \n .recent-comment-phrase {\n font-size: 12px;\n color: var(--muted);\n font-weight: 600;\n }\n \n \/* ===== Toast ===== *\/\n .toast {\n position: fixed;\n left: 50%;\n bottom: 40px;\n transform: translateX(-50%) translateY(100px);\n background: var(--black);\n color: var(--yellow);\n padding: 18px 28px;\n border-radius: var(--radius-sm);\n box-shadow: var(--shadow-lg);\n display: flex;\n align-items: center;\n gap: 12px;\n z-index: 1000;\n opacity: 0;\n transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.4s;\n border: 2px solid var(--yellow);\n font-weight: 700;\n }\n \n .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }\n \n \/* ===== Footer ===== *\/\n .footer-note {\n margin-top: 50px;\n padding: 24px;\n border-radius: var(--radius);\n background: linear-gradient(135deg, var(--red-light) 0%, var(--green-light) 100%);\n border: 3px solid var(--black);\n text-align: center;\n color: var(--black);\n font-size: 15px;\n font-weight: 700;\n }\n \n .footer-note i { color: var(--red); margin-right: 10px; }\n \n \/* ===== Animations ===== *\/\n @keyframes fadeIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }\n .card { animation: fadeIn 0.6s ease-out; }\n <\/style>\n<\/head>\n<body>\n <div class=\"app-container\">\n \n <div class=\"main-content\">\n <div class=\"header-container\">\n \n <div class=\"hero\">\n <h1><span>AAVE \/ Ebonics Community Dictionary<\/span><\/h1>\n <p class=\"hero-subtitle\">\n A collaborative, Reddit-style phrasebook with voting, comments, and user submissions.\n <br><span class=\"highlight\">Note:<\/span> This is a living dictionary maintained by the community.\n <\/p>\n <\/div>\n \n \n <div class=\"submission-form\">\n <div class=\"form-title\"><i class=\"fas fa-plus-circle\"><\/i> Submit New Phrase<\/div>\n <div class=\"form-grid\">\n <div class=\"form-row\">\n <input type=\"text\" id=\"newAave\" class=\"form-input\" placeholder=\"AAVE \/ Ebonics Phrase *\" required>\n <input type=\"text\" id=\"newStd\" class=\"form-input\" placeholder=\"Standard English Translation *\" required>\n <\/div>\n <div class=\"form-row\">\n <select id=\"newCat\" class=\"form-select\">\n <option value=\"Expression\">Expression<\/option>\n <option value=\"Grammar\">Grammar<\/option>\n <option value=\"Everyday\">Everyday<\/option>\n <option value=\"Social\">Social<\/option>\n <option value=\"Money\">Money<\/option>\n <option value=\"Culture\">Culture<\/option>\n <option value=\"Identity\">Identity<\/option>\n <option value=\"Historical\">Historical<\/option>\n <option value=\"Slang\">Slang<\/option>\n <\/select>\n <input type=\"text\" id=\"newUser\" class=\"form-input\" placeholder=\"Your Username *\" required>\n <\/div>\n <textarea id=\"newMeaning\" class=\"form-textarea\" placeholder=\"Meaning \/ Explanation *\" required><\/textarea>\n <div class=\"form-row\">\n <input type=\"text\" id=\"newExampleA\" class=\"form-input\" placeholder=\"AAVE Example *\" required>\n <input type=\"text\" id=\"newExampleS\" class=\"form-input\" placeholder=\"Standard English Example *\" required>\n <\/div>\n <button class=\"form-btn\" id=\"submitPhraseBtn\">\n <i class=\"fas fa-paper-plane\"><\/i> Submit to Community Dictionary\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"controls-panel\">\n <div class=\"controls-grid\">\n <div class=\"search-box\">\n <i class=\"fas fa-search\"><\/i>\n <input id=\"q\" class=\"search-input\" type=\"search\" placeholder=\"Search phrases...\">\n <\/div>\n <div class=\"filters-row\">\n <select id=\"cat\" class=\"select\">\n <option value=\"all\">All categories<\/option>\n <\/select>\n <select id=\"sort\" class=\"select\">\n <option value=\"relevance\">Sort: Relevance<\/option>\n <option value=\"az\">Sort: A \u2192 Z<\/option>\n <option value=\"za\">Sort: Z \u2192 A<\/option>\n <option value=\"cat\">Sort: Category<\/option>\n <option value=\"popular\">Sort: Most Popular<\/option>\n <\/select>\n <\/div>\n <div class=\"buttons-row\">\n <button class=\"btn btn-clear\" id=\"clearBtn\"><i class=\"fas fa-eraser\"><\/i> Clear Filters<\/button>\n <button class=\"btn btn-random\" id=\"randomBtn\"><i class=\"fas fa-random\"><\/i> Random Phrase<\/button>\n <\/div>\n <div class=\"stats\" id=\"stats\">Loading entries…<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <main>\n <div class=\"cards-grid\" id=\"cards\"><\/div>\n <\/main>\n <\/div>\n \n \n <div class=\"sidebar\">\n \n <div class=\"sidebar-card\">\n <div class=\"sidebar-title\"><i class=\"fas fa-trophy\"><\/i> Top Contributors<\/div>\n <div class=\"leaderboard-list\" id=\"leaderboard\">\n \n <\/div>\n <\/div>\n \n \n <div class=\"sidebar-card\">\n <div class=\"sidebar-title\"><i class=\"fas fa-comments\"><\/i> Recent Comments<\/div>\n <div class=\"recent-comments-list\" id=\"recentComments\">\n \n <\/div>\n <\/div>\n \n \n <div class=\"sidebar-card\">\n <div class=\"sidebar-title\"><i class=\"fas fa-info-circle\"><\/i> Community Guidelines<\/div>\n <div style=\"color: var(--black-soft); line-height: 1.6; font-size: 14px;\">\n <p><b>\u2713 Be Respectful:<\/b> AAVE is a legitimate dialect with deep cultural roots.<\/p>\n <p><b>\u2713 Provide Context:<\/b> Include clear examples and meanings.<\/p>\n <p><b>\u2713 Vote Thoughtfully:<\/b> Upvote accurate and well-explained entries.<\/p>\n <p><b>\u2713 Submit Responsibly:<\/b> New phrases are emailed to <b>info@ethiotrans.com<\/b> for review.<\/p>\n <p>All submissions use subject: <i>“New Phrase entered to Ebonics dictionary”<\/i>.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"footer-note\">\n <i class=\"fas fa-info-circle\"><\/i> \n This is a community-driven educational resource. Respectful usage is encouraged, and cultural context matters.\n <\/div>\n \n \n <div class=\"toast\" id=\"toast\">\n <i class=\"fas fa-check-circle\" style=\"color: var(--green);\"><\/i>\n <span id=\"toast-message\">Copied to clipboard!<\/span>\n <\/div>\n \n <script>\n \/\/ ===== Data with Initial Phrases =====\n const PHRASES = [\n \/\/ Original phrases remain, but now with voting structure\n {\n id: 1,\n cat: \"Grammar\", \n aave: \"She be working late.\", \n std: \"She usually works late.\", \n meaning: \"Habitual 'be' shows regular or ongoing action.\", \n exampleA: \"She be working late on weekdays.\", \n exampleS: \"She usually works late on weekdays.\",\n votes: 15,\n userVote: 0, \/\/ -1 for downvote, 0 for neutral, 1 for upvote\n submittedBy: \"language_enthusiast\",\n comments: [\n { id: 1, user: \"grammar_expert\", text: \"Great example of the habitual aspect in AAVE!\", timestamp: \"2025-01-10T14:30:00\", votes: 5 },\n { id: 2, user: \"student_123\", text: \"This helped me understand my friend's texts better.\", timestamp: \"2025-01-11T09:15:00\", votes: 2 }\n ]\n },\n {\n id: 2,\n cat: \"Expression\", \n aave: \"No cap.\", \n std: \"No lie \/ I'm serious.\", \n meaning: \"Emphasizing that you're telling the truth.\", \n exampleA: \"This food bussin', no cap.\", \n exampleS: \"This food is amazing, seriously.\",\n votes: 42,\n userVote: 0,\n submittedBy: \"urban_lexicon\",\n comments: [\n { id: 1, user: \"pop_culture\", text: \"Very common in hip-hop lyrics since the late 2010s.\", timestamp: \"2025-01-05T16:45:00\", votes: 12 }\n ]\n },\n {\n id: 3,\n cat: \"Social\", \n aave: \"He doing too much.\", \n std: \"He's being extra \/ overdoing it.\", \n meaning: \"Overdoing behavior or being excessive.\", \n exampleA: \"He doing too much for attention.\", \n exampleS: \"He's overdoing it for attention.\",\n votes: 28,\n userVote: 0,\n submittedBy: \"social_observer\",\n comments: []\n }\n ];\n\n \/\/ ===== DOM Elements =====\n const qEl = document.getElementById(\"q\");\n const catEl = document.getElementById(\"cat\");\n const sortEl = document.getElementById(\"sort\");\n const cardsEl = document.getElementById(\"cards\");\n const statsEl = document.getElementById(\"stats\");\n const toastEl = document.getElementById(\"toast\");\n const toastMsg = document.getElementById(\"toast-message\");\n const leaderboardEl = document.getElementById(\"leaderboard\");\n const recentCommentsEl = document.getElementById(\"recentComments\");\n \n \/\/ Form elements\n const newAaveEl = document.getElementById(\"newAave\");\n const newStdEl = document.getElementById(\"newStd\");\n const newCatEl = document.getElementById(\"newCat\");\n const newUserEl = document.getElementById(\"newUser\");\n const newMeaningEl = document.getElementById(\"newMeaning\");\n const newExampleAEl = document.getElementById(\"newExampleA\");\n const newExampleSEl = document.getElementById(\"newExampleS\");\n const submitPhraseBtn = document.getElementById(\"submitPhraseBtn\");\n\n \/\/ ===== State =====\n let showStdFirst = false;\n let nextPhraseId = PHRASES.length + 1;\n let nextCommentId = 100;\n\n \/\/ ===== Core Functions =====\n function showToast(message, type = \"info\") {\n toastMsg.textContent = message;\n \n \/\/ Set color based on type\n if (type === \"success\") {\n toastEl.style.background = \"var(--green)\";\n toastEl.style.color = \"var(--black)\";\n } else if (type === \"error\") {\n toastEl.style.background = \"var(--red)\";\n toastEl.style.color = \"white\";\n } else {\n toastEl.style.background = \"var(--black)\";\n toastEl.style.color = \"var(--yellow)\";\n }\n \n toastEl.classList.add(\"show\");\n setTimeout(() => toastEl.classList.remove(\"show\"), 3000);\n }\n\n function getUniqueCategories(items) {\n return [\"all\", ...new Set(items.map(item => item.cat))];\n }\n\n function getCategoryClass(cat) {\n const catMap = {\n \"Grammar\": \"grammar\",\n \"Everyday\": \"everyday\", \n \"Social\": \"social\",\n \"Money\": \"money\",\n \"Culture\": \"culture\",\n \"Expression\": \"expression\",\n \"Identity\": \"identity\",\n \"Historical\": \"historical\",\n \"Slang\": \"slang\"\n };\n return catMap[cat] || \"expression\";\n }\n\n \/\/ ===== Voting System =====\n function handleVote(phraseId, voteType) {\n const phrase = PHRASES.find(p => p.id === phraseId);\n if (!phrase) return;\n \n \/\/ Remove previous vote\n if (phrase.userVote === 1) phrase.votes--;\n if (phrase.userVote === -1) phrase.votes++;\n \n \/\/ Apply new vote\n if (voteType === \"up\") {\n if (phrase.userVote === 1) {\n phrase.userVote = 0; \/\/ Undo upvote\n } else {\n phrase.userVote = 1;\n phrase.votes++;\n }\n } else if (voteType === \"down\") {\n if (phrase.userVote === -1) {\n phrase.userVote = 0; \/\/ Undo downvote\n } else {\n phrase.userVote = -1;\n phrase.votes--;\n }\n }\n \n \/\/ Save to localStorage\n localStorage.setItem(\"aaveVotes\", JSON.stringify(PHRASES.map(p => ({ id: p.id, votes: p.votes, userVote: p.userVote }))));\n \n \/\/ Re-render\n renderCards();\n updateLeaderboard();\n }\n\n \/\/ ===== Comment System =====\n function handleComment(phraseId) {\n const commentSection = document.getElementById(`comments-${phraseId}`);\n commentSection.classList.toggle(\"active\");\n }\n\n function submitComment(phraseId) {\n const input = document.getElementById(`comment-input-${phraseId}`);\n const user = document.getElementById(`comment-user-${phraseId}`) || { value: \"anonymous\" };\n const text = input.value.trim();\n \n if (!text) {\n showToast(\"Please enter a comment\", \"error\");\n return;\n }\n \n const phrase = PHRASES.find(p => p.id === phraseId);\n if (!phrase) return;\n \n const newComment = {\n id: nextCommentId++,\n user: user.value || \"anonymous\",\n text: text,\n timestamp: new Date().toISOString(),\n votes: 0\n };\n \n phrase.comments.push(newComment);\n \n \/\/ Clear input\n input.value = \"\";\n \n \/\/ Re-render comments for this phrase\n renderComments(phraseId);\n updateRecentComments();\n showToast(\"Comment added!\", \"success\");\n \n \/\/ Save to localStorage\n saveCommentsToStorage();\n }\n\n function handleCommentVote(phraseId, commentId, voteType) {\n const phrase = PHRASES.find(p => p.id === phraseId);\n if (!phrase) return;\n \n const comment = phrase.comments.find(c => c.id === commentId);\n if (!comment) return;\n \n if (voteType === \"up\") {\n comment.votes++;\n } else if (voteType === \"down\" && comment.votes > 0) {\n comment.votes--;\n }\n \n \/\/ Sort comments by votes\n phrase.comments.sort((a, b) => b.votes - a.votes);\n \n renderComments(phraseId);\n updateRecentComments();\n saveCommentsToStorage();\n }\n\n function renderComments(phraseId) {\n const phrase = PHRASES.find(p => p.id === phraseId);\n if (!phrase) return;\n \n const commentsSection = document.getElementById(`comments-${phraseId}`);\n const commentsList = document.getElementById(`comments-list-${phraseId}`);\n \n if (!commentsList) return;\n \n \/\/ Clear existing comments\n commentsList.innerHTML = \"\";\n \n \/\/ Render each comment\n phrase.comments.forEach(comment => {\n const date = new Date(comment.timestamp);\n const timeString = date.toLocaleDateString() + \" \" + date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});\n \n const commentEl = document.createElement(\"div\");\n commentEl.className = \"comment\";\n commentEl.innerHTML = `\n <div class=\"comment-header\">\n <div class=\"comment-author\">\n <i class=\"fas fa-user\"><\/i> ${comment.user}\n <\/div>\n <div class=\"comment-timestamp\">${timeString}<\/div>\n <\/div>\n <div class=\"comment-text\">${comment.text}<\/div>\n <div class=\"comment-votes\">\n <button class=\"comment-vote-btn\" onclick=\"handleCommentVote(${phraseId}, ${comment.id}, 'up')\">\n <i class=\"fas fa-arrow-up\"><\/i>\n <\/button>\n <span class=\"comment-score\">${comment.votes}<\/span>\n <button class=\"comment-vote-btn down\" onclick=\"handleCommentVote(${phraseId}, ${comment.id}, 'down')\">\n <i class=\"fas fa-arrow-down\"><\/i>\n <\/button>\n <\/div>\n `;\n commentsList.appendChild(commentEl);\n });\n }\n\n \/\/ ===== Submission System =====\n function submitNewPhrase() {\n \/\/ Get form values\n const aave = newAaveEl.value.trim();\n const std = newStdEl.value.trim();\n const cat = newCatEl.value;\n const user = newUserEl.value.trim();\n const meaning = newMeaningEl.value.trim();\n const exampleA = newExampleAEl.value.trim();\n const exampleS = newExampleSEl.value.trim();\n \n \/\/ Validate\n if (!aave || !std || !user || !meaning || !exampleA || !exampleS) {\n showToast(\"Please fill all required fields\", \"error\");\n return;\n }\n \n \/\/ Create new phrase object\n const newPhrase = {\n id: nextPhraseId++,\n cat: cat,\n aave: aave,\n std: std,\n meaning: meaning,\n exampleA: exampleA,\n exampleS: exampleS,\n votes: 1, \/\/ Start with 1 vote (the submitter's)\n userVote: 1,\n submittedBy: user,\n comments: []\n };\n \n \/\/ Add to phrases array\n PHRASES.unshift(newPhrase); \/\/ Add to beginning\n \n \/\/ Clear form\n newAaveEl.value = \"\";\n newStdEl.value = \"\";\n newMeaningEl.value = \"\";\n newExampleAEl.value = \"\";\n newExampleSEl.value = \"\";\n newUserEl.value = \"\";\n \n \/\/ Send email (simulated)\n sendSubmissionEmail(newPhrase);\n \n \/\/ Re-render\n renderCards();\n updateLeaderboard();\n \n showToast(\"Phrase submitted successfully! It will be reviewed.\", \"success\");\n }\n\n function sendSubmissionEmail(phrase) {\n \/\/ This simulates sending an email to info@ethiotrans.com\n const emailBody = `\nNew AAVE\/Ebonics Phrase Submission:\n\nAAVE Phrase: ${phrase.aave}\nStandard English: ${phrase.std}\nCategory: ${phrase.cat}\nSubmitted By: ${phrase.submittedBy}\n\nMeaning: ${phrase.meaning}\n\nAAVE Example: ${phrase.exampleA}\nStandard English Example: ${phrase.exampleS}\n\nTimestamp: ${new Date().toISOString()}\n `;\n \n \/\/ In a real implementation, you would use a server-side endpoint or email API\n \/\/ For now, we'll log it and show a toast\n console.log(\"Email would be sent to: info@ethiotrans.com\");\n console.log(\"Subject: New Phrase entered to Ebonics dictionary\");\n console.log(\"Body:\", emailBody);\n \n \/\/ Show confirmation\n setTimeout(() => {\n showToast(\"Submission emailed to info@ethiotrans.com for review\", \"success\");\n }, 1000);\n }\n\n \/\/ ===== Leaderboard & Recent Comments =====\n function updateLeaderboard() {\n \/\/ Calculate submissions per user\n const userSubmissions = {};\n PHRASES.forEach(phrase => {\n if (!userSubmissions[phrase.submittedBy]) {\n userSubmissions[phrase.submittedBy] = { count: 0, totalVotes: 0 };\n }\n userSubmissions[phrase.submittedBy].count++;\n userSubmissions[phrase.submittedBy].totalVotes += phrase.votes;\n });\n \n \/\/ Convert to array and sort by submission count\n const leaderboard = Object.entries(userSubmissions)\n .map(([user, data]) => ({ user, ...data }))\n .sort((a, b) => b.count - a.count)\n .slice(0, 5); \/\/ Top 5\n \n \/\/ Render leaderboard\n leaderboardEl.innerHTML = \"\";\n leaderboard.forEach((item, index) => {\n const medal = index === 0 ? \"?\" : index === 1 ? \"?\" : index === 2 ? \"?\" : \"\u2022\";\n const itemEl = document.createElement(\"div\");\n itemEl.className = \"leaderboard-item\";\n itemEl.innerHTML = `\n <div class=\"leaderboard-header\">\n <div class=\"leaderboard-name\">\n <span>${medal}<\/span> ${item.user}\n <\/div>\n <div class=\"leaderboard-score\">${item.count}<\/div>\n <\/div>\n <div class=\"leaderboard-phrases\">\n ${item.count} phrase${item.count !== 1 ? 's' : ''} \u2022 ${item.totalVotes} total votes\n <\/div>\n `;\n leaderboardEl.appendChild(itemEl);\n });\n }\n\n function updateRecentComments() {\n \/\/ Get all comments from all phrases\n const allComments = [];\n PHRASES.forEach(phrase => {\n phrase.comments.forEach(comment => {\n allComments.push({\n ...comment,\n phraseAave: phrase.aave,\n phraseId: phrase.id\n });\n });\n });\n \n \/\/ Sort by timestamp (newest first) and take top 5\n const recent = allComments\n .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))\n .slice(0, 5);\n \n \/\/ Render recent comments\n recentCommentsEl.innerHTML = \"\";\n recent.forEach(comment => {\n const date = new Date(comment.timestamp);\n const timeString = date.toLocaleDateString();\n \n const itemEl = document.createElement(\"div\");\n itemEl.className = \"recent-comment\";\n itemEl.innerHTML = `\n <div class=\"recent-comment-text\">\"${comment.text}\"<\/div>\n <div class=\"comment-header\">\n <div class=\"comment-author\">\n <i class=\"fas fa-user\"><\/i> ${comment.user}\n <\/div>\n <div class=\"comment-timestamp\">${timeString}<\/div>\n <\/div>\n <div class=\"recent-comment-phrase\">\n On: \"${comment.phraseAave.substring(0, 30)}${comment.phraseAave.length > 30 ? '...' : ''}\"\n <\/div>\n `;\n recentCommentsEl.appendChild(itemEl);\n });\n }\n\n \/\/ ===== Storage Functions =====\n function loadFromStorage() {\n \/\/ Load votes\n const savedVotes = localStorage.getItem(\"aaveVotes\");\n if (savedVotes) {\n const votesData = JSON.parse(savedVotes);\n votesData.forEach(voteData => {\n const phrase = PHRASES.find(p => p.id === voteData.id);\n if (phrase) {\n phrase.votes = voteData.votes;\n phrase.userVote = voteData.userVote;\n }\n });\n }\n \n \/\/ Load comments\n const savedComments = localStorage.getItem(\"aaveComments\");\n if (savedComments) {\n const commentsData = JSON.parse(savedComments);\n commentsData.forEach(commentData => {\n const phrase = PHRASES.find(p => p.id === commentData.phraseId);\n if (phrase) {\n phrase.comments = commentData.comments;\n }\n });\n }\n }\n\n function saveCommentsToStorage() {\n const commentsData = PHRASES.map(p => ({\n phraseId: p.id,\n comments: p.comments\n }));\n localStorage.setItem(\"aaveComments\", JSON.stringify(commentsData));\n }\n\n \/\/ ===== Main Render Function =====\n function renderCards() {\n const query = qEl.value.toLowerCase();\n const category = catEl.value;\n const sortMethod = sortEl.value;\n \n \/\/ Filter items\n let filteredItems = PHRASES.filter(item => {\n const searchText = (item.aave + item.std + item.meaning + item.exampleA + item.exampleS + item.cat).toLowerCase();\n return (!query || searchText.includes(query)) && \n (category === \"all\" || item.cat === category);\n });\n \n \/\/ Sort items\n switch (sortMethod) {\n case \"az\":\n filteredItems.sort((a, b) => a.aave.localeCompare(b.aave));\n break;\n case \"za\":\n filteredItems.sort((a, b) => b.aave.localeCompare(a.aave));\n break;\n case \"cat\":\n filteredItems.sort((a, b) => a.cat.localeCompare(b.cat) || a.aave.localeCompare(b.aave));\n break;\n case \"popular\":\n filteredItems.sort((a, b) => b.votes - a.votes);\n break;\n case \"relevance\":\n default:\n \/\/ Keep filtered order\n break;\n }\n \n \/\/ Update stats\n statsEl.textContent = `Showing ${filteredItems.length} of ${PHRASES.length} entries \u2022 Total Votes: ${PHRASES.reduce((sum, p) => sum + p.votes, 0)}`;\n statsEl.style.background = filteredItems.length === 0 ? \n \"var(--red-light)\" : \n `linear-gradient(90deg, var(--green-light) 0%, var(--yellow-light) 100%)`;\n \n \/\/ Clear cards\n cardsEl.innerHTML = \"\";\n \n \/\/ Render cards\n if (filteredItems.length === 0) {\n cardsEl.innerHTML = `\n <div class=\"no-results\">\n <i class=\"fas fa-search\"><\/i>\n <h2>No entries found<\/h2>\n <p>Try a different search term or select a different category.<\/p>\n <\/div>\n `;\n return;\n }\n \n filteredItems.forEach((item) => {\n const topText = showStdFirst ? item.std : item.aave;\n const bottomText = showStdFirst ? item.aave : item.std;\n const topLabel = showStdFirst ? \"Standard English\" : \"AAVE \/ Ebonics\";\n const bottomLabel = showStdFirst ? \"AAVE \/ Ebonics\" : \"Standard English\";\n const categoryClass = getCategoryClass(item.cat);\n \n const card = document.createElement(\"div\");\n card.className = \"card\";\n \n card.innerHTML = `\n <div class=\"card-header\">\n <span class=\"card-category ${categoryClass}\">${item.cat}<\/span>\n <div class=\"vote-container\">\n <button class=\"vote-btn upvote ${item.userVote === 1 ? 'active' : ''}\" onclick=\"handleVote(${item.id}, 'up')\">\n <i class=\"fas fa-arrow-up\"><\/i>\n <\/button>\n <div class=\"vote-score\">${item.votes}<\/div>\n <button class=\"vote-btn downvote ${item.userVote === -1 ? 'active' : ''}\" onclick=\"handleVote(${item.id}, 'down')\">\n <i class=\"fas fa-arrow-down\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"card-content\">\n <div class=\"card-body\">\n <div class=\"card-term\">${topText}<\/div>\n <div class=\"card-label ${showStdFirst ? 'standard' : 'aave'}\">${topLabel}<\/div>\n \n <div class=\"card-translation\">${bottomText}<\/div>\n <div class=\"card-label ${showStdFirst ? 'aave' : 'standard'}\">${bottomLabel}<\/div>\n \n <p class=\"card-meaning\"><b>Meaning:<\/b> ${item.meaning}<\/p>\n \n <div class=\"card-example\">\n <div><b>AAVE Example:<\/b> ${item.exampleA}<\/div>\n <div><b>Standard English:<\/b> ${item.exampleS}<\/div>\n <\/div>\n \n <div class=\"card-actions\">\n <button class=\"card-btn comment-btn\" onclick=\"handleComment(${item.id})\">\n <i class=\"fas fa-comment\"><\/i> Comments (${item.comments.length})\n <\/button>\n <button class=\"card-btn copy-btn\" onclick=\"copyToClipboard('${item.aave.replace(\/'\/g, \"\\\\'\")}', 'AAVE phrase')\">\n <i class=\"fas fa-copy\"><\/i> Copy AAVE\n <\/button>\n <button class=\"card-btn\" onclick=\"copyToClipboard('${item.std.replace(\/'\/g, \"\\\\'\")}', 'Standard English translation')\">\n <i class=\"fas fa-copy\"><\/i> Copy Standard\n <\/button>\n <\/div>\n \n <div class=\"comments-section\" id=\"comments-${item.id}\">\n <div class=\"comments-title\">\n <i class=\"fas fa-comments\"><\/i> Comments (${item.comments.length})\n <\/div>\n \n <div class=\"comment-form\">\n <textarea class=\"comment-input\" id=\"comment-input-${item.id}\" placeholder=\"Add a comment...\"><\/textarea>\n <input type=\"text\" class=\"form-input\" id=\"comment-user-${item.id}\" placeholder=\"Your username (optional)\" style=\"margin-bottom: 10px;\">\n <button class=\"comment-submit\" onclick=\"submitComment(${item.id})\">\n <i class=\"fas fa-paper-plane\"><\/i> Post Comment\n <\/button>\n <\/div>\n \n <div class=\"comments-list\" id=\"comments-list-${item.id}\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div style=\"margin-top: 15px; font-size: 13px; color: var(--muted);\">\n <i class=\"fas fa-user-edit\"><\/i> Submitted by: <b>${item.submittedBy}<\/b>\n <\/div>\n `;\n \n cardsEl.appendChild(card);\n \n \/\/ Render comments for this card\n setTimeout(() => renderComments(item.id), 100);\n });\n }\n\n function copyToClipboard(text, label) {\n navigator.clipboard.writeText(text)\n .then(() => {\n showToast(`\u2713 Copied ${label} to clipboard!`, \"success\");\n })\n .catch(err => console.error('Copy failed:', err));\n }\n\n \/\/ ===== Initialization =====\n function initializeApp() {\n \/\/ Load saved data\n loadFromStorage();\n \n \/\/ Populate category filter\n const categories = getUniqueCategories(PHRASES);\n catEl.innerHTML = '';\n categories.forEach(category => {\n const option = document.createElement(\"option\");\n option.value = category;\n option.textContent = category === \"all\" ? \"All Categories\" : category;\n catEl.appendChild(option);\n });\n \n \/\/ Set up event listeners\n qEl.addEventListener(\"input\", renderCards);\n catEl.addEventListener(\"change\", renderCards);\n sortEl.addEventListener(\"change\", renderCards);\n \n document.getElementById(\"clearBtn\").addEventListener(\"click\", () => {\n qEl.value = \"\";\n catEl.value = \"all\";\n sortEl.value = \"relevance\";\n renderCards();\n showToast(\"Filters cleared\", \"success\");\n });\n \n document.getElementById(\"randomBtn\").addEventListener(\"click\", () => {\n const randomPhrase = PHRASES[Math.floor(Math.random() * PHRASES.length)];\n qEl.value = randomPhrase.aave.split(\" \")[0];\n renderCards();\n showToast(`Showing results for \"${randomPhrase.aave.split(\" \")[0]}\"`, \"success\");\n });\n \n submitPhraseBtn.addEventListener(\"click\", submitNewPhrase);\n \n \/\/ Allow Enter key to submit form\n newAaveEl.addEventListener(\"keypress\", (e) => {\n if (e.key === \"Enter\") submitNewPhrase();\n });\n \n \/\/ Initial render\n renderCards();\n updateLeaderboard();\n updateRecentComments();\n }\n\n \/\/ ===== Start the App =====\n document.addEventListener('DOMContentLoaded', initializeApp);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AAVE \/ Ebonics Phrasebook – Community Dictionary AAVE \/ Ebonics Community Dictionary A collaborative, Reddit-style phrasebook with voting, comments, and user submissions. Note: This is a living dictionary maintained by the community. Submit New Phrase ExpressionGrammarEverydaySocialMoneyCultureIdentityHistoricalSlang Submit to Community Dictionary All categories Sort: RelevanceSort: A \u2192 ZSort: Z \u2192 ASort: CategorySort: Most Popular Clear Filters<span class=\"post-excerpt-end\">…<\/span><\/p>\n<p class=\"more-link\"><a href=\"https:\/\/yebbo.com\/2013\/2026\/01\/31\/ebonics-phrasebook-community-dictionary\/\" class=\"themebutton\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-226","post","type-post","status-publish","format-standard","hentry","category-blog"],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/posts\/226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/comments?post=226"}],"version-history":[{"count":1,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/posts\/226\/revisions"}],"predecessor-version":[{"id":227,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/posts\/226\/revisions\/227"}],"wp:attachment":[{"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/media?parent=226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/categories?post=226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/tags?post=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":226,"date":"2026-01-31T00:05:21","date_gmt":"2026-01-31T00:05:21","guid":{"rendered":"https:\/\/yebbo.com\/2013\/?p=226"},"modified":"2026-01-31T00:05:21","modified_gmt":"2026-01-31T00:05:21","slug":"ebonics-phrasebook-community-dictionary","status":"publish","type":"post","link":"https:\/\/yebbo.com\/2013\/2026\/01\/31\/ebonics-phrasebook-community-dictionary\/","title":{"rendered":"Ebonics Phrasebook – Community Dictionary"},"content":{"rendered":"\n\n\n\n \n \n AAVE \/ Ebonics Phrasebook – Community Dictionary<\/title>\n <meta name=\"description\" content=\"Interactive, community-driven AAVE\/Ebonics phrasebook with voting, comments, and user submissions.\" \/>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n \/* ===== CSS Variables with Green, Yellow, Red, Black Theme ===== *\/\n :root {\n --green: #10B981;\n --green-dark: #059669;\n --green-light: #A7F3D0;\n --yellow: #FBBF24;\n --yellow-dark: #F59E0B;\n --yellow-light: #FEF3C7;\n --red: #EF4444;\n --red-dark: #DC2626;\n --red-light: #FECACA;\n --black: #000000;\n --black-soft: #1F2937;\n --card: #FFFFFF;\n --border: #E5E7EB;\n --bg: #FAFAF9;\n --muted: #6B7280;\n --radius: 16px;\n --radius-sm: 10px;\n --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);\n --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);\n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n \n * { box-sizing: border-box; margin: 0; padding: 0; }\n \n body {\n background: linear-gradient(135deg, #FEFCE8 0%, #F0FDF4 100%);\n color: var(--black-soft);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n line-height: 1.6;\n min-height: 100vh;\n padding: 20px;\n display: flex;\n flex-direction: column;\n }\n \n \/* ===== Layout ===== *\/\n .app-container {\n display: flex;\n gap: 24px;\n max-width: 1400px;\n margin: 0 auto;\n width: 100%;\n flex: 1;\n }\n \n .main-content {\n flex: 3;\n min-width: 0;\n }\n \n .sidebar {\n flex: 1;\n min-width: 300px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n \n @media (max-width: 1100px) {\n .app-container { flex-direction: column; }\n .sidebar { min-width: 100%; }\n }\n \n \/* ===== Header & Form ===== *\/\n .header-container {\n margin-bottom: 32px;\n }\n \n .hero {\n background: linear-gradient(135deg, var(--green-light) 0%, var(--yellow-light) 100%);\n border: 2px solid var(--green);\n border-radius: var(--radius);\n padding: 32px;\n box-shadow: var(--shadow);\n position: relative;\n overflow: hidden;\n margin-bottom: 24px;\n }\n \n .hero h1 {\n font-size: 28px;\n font-weight: 800;\n color: var(--black);\n margin-bottom: 12px;\n line-height: 1.2;\n }\n \n .hero h1 span {\n background: linear-gradient(90deg, var(--green) 0%, var(--yellow) 50%, var(--red) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n \n .highlight { background: var(--yellow-light); color: var(--black); padding: 4px 12px; border-radius: 6px; font-weight: 700; border: 1px solid var(--yellow); }\n \n \/* ===== Submission Form ===== *\/\n .submission-form {\n background: var(--card);\n border: 2px solid var(--yellow);\n border-radius: var(--radius);\n padding: 24px;\n box-shadow: var(--shadow);\n margin-bottom: 24px;\n }\n \n .form-title {\n color: var(--black);\n font-size: 20px;\n font-weight: 800;\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .form-title i { color: var(--green); }\n \n .form-grid {\n display: grid;\n gap: 16px;\n }\n \n .form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n }\n \n .form-input, .form-select, .form-textarea {\n padding: 14px;\n border-radius: var(--radius-sm);\n border: 2px solid var(--border);\n background: #FFFFFF;\n color: var(--black);\n font-size: 15px;\n font-weight: 600;\n transition: var(--transition);\n width: 100%;\n }\n \n .form-textarea { min-height: 100px; resize: vertical; }\n \n .form-input:focus, .form-select:focus, .form-textarea:focus {\n outline: none;\n border-color: var(--green);\n box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);\n }\n \n .form-btn {\n padding: 16px;\n border-radius: var(--radius-sm);\n border: none;\n font-size: 16px;\n font-weight: 800;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n transition: var(--transition);\n background: linear-gradient(135deg, var(--green) 0%, var(--yellow) 100%);\n color: var(--black);\n border: 2px solid var(--black);\n }\n \n .form-btn:hover {\n transform: translateY(-3px) scale(1.02);\n box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);\n }\n \n \/* ===== Controls Panel ===== *\/\n .controls-panel {\n background: var(--card);\n border: 2px solid var(--red);\n border-radius: var(--radius);\n padding: 24px;\n box-shadow: var(--shadow);\n }\n \n .controls-grid { display: grid; gap: 20px; }\n \n .search-box { position: relative; }\n \n .search-box i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--green); }\n \n .search-input {\n width: 100%;\n padding: 16px 16px 16px 50px;\n border-radius: var(--radius-sm);\n border: 2px solid var(--yellow);\n background: #FFFFFF;\n color: var(--black);\n font-size: 16px;\n font-weight: 600;\n transition: var(--transition);\n }\n \n .search-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2); }\n \n .filters-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n \n .select {\n padding: 14px;\n border-radius: var(--radius-sm);\n border: 2px solid var(--green);\n background: #FFFFFF;\n color: var(--black);\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n }\n \n .select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1); }\n \n .buttons-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n \n .btn {\n padding: 16px;\n border-radius: var(--radius-sm);\n border: none;\n font-size: 16px;\n font-weight: 800;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n transition: var(--transition);\n color: var(--black);\n }\n \n .btn-clear { background: var(--red-light); border: 2px solid var(--red); }\n .btn-clear:hover { background: var(--red); color: white; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3); }\n \n .btn-random { background: linear-gradient(135deg, var(--green) 0%, var(--yellow) 100%); border: 2px solid var(--black); font-weight: 900; }\n .btn-random:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4); }\n \n .stats {\n color: var(--black);\n font-size: 15px;\n font-weight: 700;\n padding: 14px;\n text-align: center;\n border-top: 2px dashed var(--red);\n border-bottom: 2px dashed var(--red);\n background: var(--yellow-light);\n border-radius: var(--radius-sm);\n }\n \n \/* ===== Cards Grid ===== *\/\n .cards-grid { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }\n \n .card {\n background: var(--card);\n border: 3px solid;\n border-radius: var(--radius);\n padding: 24px;\n box-shadow: var(--shadow);\n transition: var(--transition);\n position: relative;\n overflow: hidden;\n }\n \n .card:nth-child(odd) { border-color: var(--green); }\n .card:nth-child(even) { border-color: var(--yellow); }\n .card:nth-child(3n) { border-color: var(--red); }\n \n .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }\n \n .card-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 15px;\n }\n \n .card-category {\n display: inline-block;\n font-size: 13px;\n font-weight: 900;\n color: var(--black);\n padding: 8px 18px;\n border-radius: 50px;\n border: 2px solid;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n \n .card-category.grammar { background: var(--green-light); border-color: var(--green); }\n .card-category.everyday { background: var(--yellow-light); border-color: var(--yellow); }\n .card-category.social { background: var(--red-light); border-color: var(--red); }\n .card-category.money { background: var(--green-light); border-color: var(--green); }\n .card-category.culture { background: var(--yellow-light); border-color: var(--yellow); }\n .card-category.expression { background: var(--red-light); border-color: var(--red); }\n .card-category.identity { background: var(--green-light); border-color: var(--green); }\n .card-category.historical { background: var(--yellow-light); border-color: var(--yellow); }\n .card-category.slang { background: var(--red-light); border-color: var(--red); }\n \n \/* ===== Voting System ===== *\/\n .vote-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n }\n \n .vote-btn {\n background: none;\n border: none;\n color: var(--muted);\n cursor: pointer;\n font-size: 20px;\n transition: var(--transition);\n padding: 5px;\n border-radius: 50%;\n }\n \n .vote-btn:hover { transform: scale(1.2); }\n .vote-btn.upvote:hover { color: var(--green); background: rgba(16, 185, 129, 0.1); }\n .vote-btn.downvote:hover { color: var(--red); background: rgba(239, 68, 68, 0.1); }\n \n .vote-btn.upvote.active { color: var(--green); }\n .vote-btn.downvote.active { color: var(--red); }\n \n .vote-score {\n font-size: 20px;\n font-weight: 900;\n color: var(--black);\n min-width: 30px;\n text-align: center;\n }\n \n .card-content {\n display: flex;\n gap: 20px;\n }\n \n .card-voting { flex: 0 0 auto; }\n \n .card-body { flex: 1; }\n \n .card-term {\n margin: 12px 0 6px;\n font-size: 22px;\n font-weight: 900;\n color: var(--black);\n line-height: 1.3;\n }\n \n .card-label {\n font-size: 13px;\n font-weight: 900;\n color: var(--black);\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 8px;\n padding: 4px 0;\n border-bottom: 2px solid;\n }\n \n .card-label.aave { border-color: var(--red); }\n .card-label.standard { border-color: var(--green); }\n \n .card-translation {\n font-size: 18px;\n color: var(--black);\n font-weight: 700;\n margin: 16px 0;\n line-height: 1.4;\n padding: 12px;\n border-radius: var(--radius-sm);\n background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.1) 100%);\n border-left: 4px solid var(--green);\n }\n \n .card-meaning {\n margin: 20px 0;\n color: var(--black-soft);\n padding: 16px;\n border-radius: var(--radius-sm);\n background: var(--yellow-light);\n border: 2px solid var(--yellow);\n font-weight: 600;\n }\n \n .card-meaning b { color: var(--red); }\n \n .card-example {\n margin-top: 24px;\n padding: 18px;\n border-radius: var(--radius-sm);\n background: linear-gradient(135deg, #FEF2F2 0%, #F0F9FF 100%);\n border: 2px solid var(--green);\n }\n \n .card-example div { margin-bottom: 12px; padding: 8px; border-radius: 6px; }\n .card-example b { color: var(--black); font-weight: 900; }\n .card-example div:nth-child(1) { background: rgba(239, 68, 68, 0.1); border-left: 4px solid var(--red); }\n .card-example div:nth-child(2) { background: rgba(16, 185, 129, 0.1); border-left: 4px solid var(--green); }\n \n \/* ===== Card Actions & Comments ===== *\/\n .card-actions {\n display: flex;\n gap: 12px;\n margin-top: 24px;\n flex-wrap: wrap;\n }\n \n .card-btn {\n padding: 12px;\n border-radius: var(--radius-sm);\n border: 2px solid var(--black);\n background: var(--card);\n color: var(--black);\n font-size: 14px;\n font-weight: 800;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n transition: var(--transition);\n flex: 1;\n min-width: 120px;\n }\n \n .card-btn:hover { background: var(--green); color: white; border-color: var(--green); }\n .card-btn.comment-btn:hover { background: var(--yellow); }\n .card-btn.copy-btn:hover { background: var(--red); }\n \n \/* ===== Comments Section ===== *\/\n .comments-section {\n margin-top: 20px;\n padding: 20px;\n border-radius: var(--radius-sm);\n background: #F8FAFC;\n border: 2px solid var(--border);\n display: none;\n }\n \n .comments-section.active { display: block; }\n \n .comments-title {\n font-size: 18px;\n font-weight: 800;\n color: var(--black);\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .comment-form { margin-bottom: 20px; }\n \n .comment-input {\n width: 100%;\n padding: 14px;\n border-radius: var(--radius-sm);\n border: 2px solid var(--yellow);\n background: #FFFFFF;\n color: var(--black);\n font-size: 15px;\n margin-bottom: 10px;\n resize: vertical;\n min-height: 80px;\n }\n \n .comment-submit {\n padding: 12px 24px;\n border-radius: var(--radius-sm);\n border: none;\n background: var(--green);\n color: white;\n font-weight: 700;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .comment-submit:hover { background: var(--green-dark); }\n \n .comments-list { display: flex; flex-direction: column; gap: 15px; }\n \n .comment {\n padding: 15px;\n border-radius: var(--radius-sm);\n background: white;\n border: 1px solid var(--border);\n }\n \n .comment-header {\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n \n .comment-author {\n font-weight: 800;\n color: var(--black);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .comment-author i { color: var(--green); }\n \n .comment-timestamp {\n font-size: 12px;\n color: var(--muted);\n }\n \n .comment-text {\n color: var(--black-soft);\n line-height: 1.5;\n margin-bottom: 10px;\n }\n \n .comment-votes {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .comment-vote-btn {\n background: none;\n border: none;\n color: var(--muted);\n cursor: pointer;\n font-size: 14px;\n padding: 2px 5px;\n }\n \n .comment-vote-btn:hover { color: var(--green); }\n .comment-vote-btn.down:hover { color: var(--red); }\n \n .comment-score {\n font-weight: 700;\n color: var(--black);\n font-size: 14px;\n }\n \n \/* ===== Sidebar Components ===== *\/\n .sidebar-card {\n background: var(--card);\n border: 2px solid var(--green);\n border-radius: var(--radius);\n padding: 24px;\n box-shadow: var(--shadow);\n }\n \n .sidebar-title {\n font-size: 20px;\n font-weight: 800;\n color: var(--black);\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n \n .sidebar-title i { color: var(--red); }\n \n .leaderboard-list, .recent-comments-list {\n display: flex;\n flex-direction: column;\n gap: 15px;\n }\n \n .leaderboard-item, .recent-comment {\n padding: 15px;\n border-radius: var(--radius-sm);\n background: #F8FAFC;\n border: 1px solid var(--border);\n }\n \n .leaderboard-header {\n display: flex;\n justify-content: space-between;\n margin-bottom: 8px;\n }\n \n .leaderboard-name {\n font-weight: 800;\n color: var(--black);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n \n .leaderboard-score {\n font-weight: 900;\n color: var(--green);\n background: var(--green-light);\n padding: 4px 12px;\n border-radius: 50px;\n }\n \n .leaderboard-phrases {\n font-size: 14px;\n color: var(--muted);\n }\n \n .recent-comment-text {\n color: var(--black-soft);\n margin-bottom: 10px;\n line-height: 1.4;\n font-size: 14px;\n }\n \n .recent-comment-phrase {\n font-size: 12px;\n color: var(--muted);\n font-weight: 600;\n }\n \n \/* ===== Toast ===== *\/\n .toast {\n position: fixed;\n left: 50%;\n bottom: 40px;\n transform: translateX(-50%) translateY(100px);\n background: var(--black);\n color: var(--yellow);\n padding: 18px 28px;\n border-radius: var(--radius-sm);\n box-shadow: var(--shadow-lg);\n display: flex;\n align-items: center;\n gap: 12px;\n z-index: 1000;\n opacity: 0;\n transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.4s;\n border: 2px solid var(--yellow);\n font-weight: 700;\n }\n \n .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }\n \n \/* ===== Footer ===== *\/\n .footer-note {\n margin-top: 50px;\n padding: 24px;\n border-radius: var(--radius);\n background: linear-gradient(135deg, var(--red-light) 0%, var(--green-light) 100%);\n border: 3px solid var(--black);\n text-align: center;\n color: var(--black);\n font-size: 15px;\n font-weight: 700;\n }\n \n .footer-note i { color: var(--red); margin-right: 10px; }\n \n \/* ===== Animations ===== *\/\n @keyframes fadeIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }\n .card { animation: fadeIn 0.6s ease-out; }\n <\/style>\n<\/head>\n<body>\n <div class=\"app-container\">\n \n <div class=\"main-content\">\n <div class=\"header-container\">\n \n <div class=\"hero\">\n <h1><span>AAVE \/ Ebonics Community Dictionary<\/span><\/h1>\n <p class=\"hero-subtitle\">\n A collaborative, Reddit-style phrasebook with voting, comments, and user submissions.\n <br><span class=\"highlight\">Note:<\/span> This is a living dictionary maintained by the community.\n <\/p>\n <\/div>\n \n \n <div class=\"submission-form\">\n <div class=\"form-title\"><i class=\"fas fa-plus-circle\"><\/i> Submit New Phrase<\/div>\n <div class=\"form-grid\">\n <div class=\"form-row\">\n <input type=\"text\" id=\"newAave\" class=\"form-input\" placeholder=\"AAVE \/ Ebonics Phrase *\" required>\n <input type=\"text\" id=\"newStd\" class=\"form-input\" placeholder=\"Standard English Translation *\" required>\n <\/div>\n <div class=\"form-row\">\n <select id=\"newCat\" class=\"form-select\">\n <option value=\"Expression\">Expression<\/option>\n <option value=\"Grammar\">Grammar<\/option>\n <option value=\"Everyday\">Everyday<\/option>\n <option value=\"Social\">Social<\/option>\n <option value=\"Money\">Money<\/option>\n <option value=\"Culture\">Culture<\/option>\n <option value=\"Identity\">Identity<\/option>\n <option value=\"Historical\">Historical<\/option>\n <option value=\"Slang\">Slang<\/option>\n <\/select>\n <input type=\"text\" id=\"newUser\" class=\"form-input\" placeholder=\"Your Username *\" required>\n <\/div>\n <textarea id=\"newMeaning\" class=\"form-textarea\" placeholder=\"Meaning \/ Explanation *\" required><\/textarea>\n <div class=\"form-row\">\n <input type=\"text\" id=\"newExampleA\" class=\"form-input\" placeholder=\"AAVE Example *\" required>\n <input type=\"text\" id=\"newExampleS\" class=\"form-input\" placeholder=\"Standard English Example *\" required>\n <\/div>\n <button class=\"form-btn\" id=\"submitPhraseBtn\">\n <i class=\"fas fa-paper-plane\"><\/i> Submit to Community Dictionary\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"controls-panel\">\n <div class=\"controls-grid\">\n <div class=\"search-box\">\n <i class=\"fas fa-search\"><\/i>\n <input id=\"q\" class=\"search-input\" type=\"search\" placeholder=\"Search phrases...\">\n <\/div>\n <div class=\"filters-row\">\n <select id=\"cat\" class=\"select\">\n <option value=\"all\">All categories<\/option>\n <\/select>\n <select id=\"sort\" class=\"select\">\n <option value=\"relevance\">Sort: Relevance<\/option>\n <option value=\"az\">Sort: A \u2192 Z<\/option>\n <option value=\"za\">Sort: Z \u2192 A<\/option>\n <option value=\"cat\">Sort: Category<\/option>\n <option value=\"popular\">Sort: Most Popular<\/option>\n <\/select>\n <\/div>\n <div class=\"buttons-row\">\n <button class=\"btn btn-clear\" id=\"clearBtn\"><i class=\"fas fa-eraser\"><\/i> Clear Filters<\/button>\n <button class=\"btn btn-random\" id=\"randomBtn\"><i class=\"fas fa-random\"><\/i> Random Phrase<\/button>\n <\/div>\n <div class=\"stats\" id=\"stats\">Loading entries…<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <main>\n <div class=\"cards-grid\" id=\"cards\"><\/div>\n <\/main>\n <\/div>\n \n \n <div class=\"sidebar\">\n \n <div class=\"sidebar-card\">\n <div class=\"sidebar-title\"><i class=\"fas fa-trophy\"><\/i> Top Contributors<\/div>\n <div class=\"leaderboard-list\" id=\"leaderboard\">\n \n <\/div>\n <\/div>\n \n \n <div class=\"sidebar-card\">\n <div class=\"sidebar-title\"><i class=\"fas fa-comments\"><\/i> Recent Comments<\/div>\n <div class=\"recent-comments-list\" id=\"recentComments\">\n \n <\/div>\n <\/div>\n \n \n <div class=\"sidebar-card\">\n <div class=\"sidebar-title\"><i class=\"fas fa-info-circle\"><\/i> Community Guidelines<\/div>\n <div style=\"color: var(--black-soft); line-height: 1.6; font-size: 14px;\">\n <p><b>\u2713 Be Respectful:<\/b> AAVE is a legitimate dialect with deep cultural roots.<\/p>\n <p><b>\u2713 Provide Context:<\/b> Include clear examples and meanings.<\/p>\n <p><b>\u2713 Vote Thoughtfully:<\/b> Upvote accurate and well-explained entries.<\/p>\n <p><b>\u2713 Submit Responsibly:<\/b> New phrases are emailed to <b>info@ethiotrans.com<\/b> for review.<\/p>\n <p>All submissions use subject: <i>“New Phrase entered to Ebonics dictionary”<\/i>.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"footer-note\">\n <i class=\"fas fa-info-circle\"><\/i> \n This is a community-driven educational resource. Respectful usage is encouraged, and cultural context matters.\n <\/div>\n \n \n <div class=\"toast\" id=\"toast\">\n <i class=\"fas fa-check-circle\" style=\"color: var(--green);\"><\/i>\n <span id=\"toast-message\">Copied to clipboard!<\/span>\n <\/div>\n \n <script>\n \/\/ ===== Data with Initial Phrases =====\n const PHRASES = [\n \/\/ Original phrases remain, but now with voting structure\n {\n id: 1,\n cat: \"Grammar\", \n aave: \"She be working late.\", \n std: \"She usually works late.\", \n meaning: \"Habitual 'be' shows regular or ongoing action.\", \n exampleA: \"She be working late on weekdays.\", \n exampleS: \"She usually works late on weekdays.\",\n votes: 15,\n userVote: 0, \/\/ -1 for downvote, 0 for neutral, 1 for upvote\n submittedBy: \"language_enthusiast\",\n comments: [\n { id: 1, user: \"grammar_expert\", text: \"Great example of the habitual aspect in AAVE!\", timestamp: \"2025-01-10T14:30:00\", votes: 5 },\n { id: 2, user: \"student_123\", text: \"This helped me understand my friend's texts better.\", timestamp: \"2025-01-11T09:15:00\", votes: 2 }\n ]\n },\n {\n id: 2,\n cat: \"Expression\", \n aave: \"No cap.\", \n std: \"No lie \/ I'm serious.\", \n meaning: \"Emphasizing that you're telling the truth.\", \n exampleA: \"This food bussin', no cap.\", \n exampleS: \"This food is amazing, seriously.\",\n votes: 42,\n userVote: 0,\n submittedBy: \"urban_lexicon\",\n comments: [\n { id: 1, user: \"pop_culture\", text: \"Very common in hip-hop lyrics since the late 2010s.\", timestamp: \"2025-01-05T16:45:00\", votes: 12 }\n ]\n },\n {\n id: 3,\n cat: \"Social\", \n aave: \"He doing too much.\", \n std: \"He's being extra \/ overdoing it.\", \n meaning: \"Overdoing behavior or being excessive.\", \n exampleA: \"He doing too much for attention.\", \n exampleS: \"He's overdoing it for attention.\",\n votes: 28,\n userVote: 0,\n submittedBy: \"social_observer\",\n comments: []\n }\n ];\n\n \/\/ ===== DOM Elements =====\n const qEl = document.getElementById(\"q\");\n const catEl = document.getElementById(\"cat\");\n const sortEl = document.getElementById(\"sort\");\n const cardsEl = document.getElementById(\"cards\");\n const statsEl = document.getElementById(\"stats\");\n const toastEl = document.getElementById(\"toast\");\n const toastMsg = document.getElementById(\"toast-message\");\n const leaderboardEl = document.getElementById(\"leaderboard\");\n const recentCommentsEl = document.getElementById(\"recentComments\");\n \n \/\/ Form elements\n const newAaveEl = document.getElementById(\"newAave\");\n const newStdEl = document.getElementById(\"newStd\");\n const newCatEl = document.getElementById(\"newCat\");\n const newUserEl = document.getElementById(\"newUser\");\n const newMeaningEl = document.getElementById(\"newMeaning\");\n const newExampleAEl = document.getElementById(\"newExampleA\");\n const newExampleSEl = document.getElementById(\"newExampleS\");\n const submitPhraseBtn = document.getElementById(\"submitPhraseBtn\");\n\n \/\/ ===== State =====\n let showStdFirst = false;\n let nextPhraseId = PHRASES.length + 1;\n let nextCommentId = 100;\n\n \/\/ ===== Core Functions =====\n function showToast(message, type = \"info\") {\n toastMsg.textContent = message;\n \n \/\/ Set color based on type\n if (type === \"success\") {\n toastEl.style.background = \"var(--green)\";\n toastEl.style.color = \"var(--black)\";\n } else if (type === \"error\") {\n toastEl.style.background = \"var(--red)\";\n toastEl.style.color = \"white\";\n } else {\n toastEl.style.background = \"var(--black)\";\n toastEl.style.color = \"var(--yellow)\";\n }\n \n toastEl.classList.add(\"show\");\n setTimeout(() => toastEl.classList.remove(\"show\"), 3000);\n }\n\n function getUniqueCategories(items) {\n return [\"all\", ...new Set(items.map(item => item.cat))];\n }\n\n function getCategoryClass(cat) {\n const catMap = {\n \"Grammar\": \"grammar\",\n \"Everyday\": \"everyday\", \n \"Social\": \"social\",\n \"Money\": \"money\",\n \"Culture\": \"culture\",\n \"Expression\": \"expression\",\n \"Identity\": \"identity\",\n \"Historical\": \"historical\",\n \"Slang\": \"slang\"\n };\n return catMap[cat] || \"expression\";\n }\n\n \/\/ ===== Voting System =====\n function handleVote(phraseId, voteType) {\n const phrase = PHRASES.find(p => p.id === phraseId);\n if (!phrase) return;\n \n \/\/ Remove previous vote\n if (phrase.userVote === 1) phrase.votes--;\n if (phrase.userVote === -1) phrase.votes++;\n \n \/\/ Apply new vote\n if (voteType === \"up\") {\n if (phrase.userVote === 1) {\n phrase.userVote = 0; \/\/ Undo upvote\n } else {\n phrase.userVote = 1;\n phrase.votes++;\n }\n } else if (voteType === \"down\") {\n if (phrase.userVote === -1) {\n phrase.userVote = 0; \/\/ Undo downvote\n } else {\n phrase.userVote = -1;\n phrase.votes--;\n }\n }\n \n \/\/ Save to localStorage\n localStorage.setItem(\"aaveVotes\", JSON.stringify(PHRASES.map(p => ({ id: p.id, votes: p.votes, userVote: p.userVote }))));\n \n \/\/ Re-render\n renderCards();\n updateLeaderboard();\n }\n\n \/\/ ===== Comment System =====\n function handleComment(phraseId) {\n const commentSection = document.getElementById(`comments-${phraseId}`);\n commentSection.classList.toggle(\"active\");\n }\n\n function submitComment(phraseId) {\n const input = document.getElementById(`comment-input-${phraseId}`);\n const user = document.getElementById(`comment-user-${phraseId}`) || { value: \"anonymous\" };\n const text = input.value.trim();\n \n if (!text) {\n showToast(\"Please enter a comment\", \"error\");\n return;\n }\n \n const phrase = PHRASES.find(p => p.id === phraseId);\n if (!phrase) return;\n \n const newComment = {\n id: nextCommentId++,\n user: user.value || \"anonymous\",\n text: text,\n timestamp: new Date().toISOString(),\n votes: 0\n };\n \n phrase.comments.push(newComment);\n \n \/\/ Clear input\n input.value = \"\";\n \n \/\/ Re-render comments for this phrase\n renderComments(phraseId);\n updateRecentComments();\n showToast(\"Comment added!\", \"success\");\n \n \/\/ Save to localStorage\n saveCommentsToStorage();\n }\n\n function handleCommentVote(phraseId, commentId, voteType) {\n const phrase = PHRASES.find(p => p.id === phraseId);\n if (!phrase) return;\n \n const comment = phrase.comments.find(c => c.id === commentId);\n if (!comment) return;\n \n if (voteType === \"up\") {\n comment.votes++;\n } else if (voteType === \"down\" && comment.votes > 0) {\n comment.votes--;\n }\n \n \/\/ Sort comments by votes\n phrase.comments.sort((a, b) => b.votes - a.votes);\n \n renderComments(phraseId);\n updateRecentComments();\n saveCommentsToStorage();\n }\n\n function renderComments(phraseId) {\n const phrase = PHRASES.find(p => p.id === phraseId);\n if (!phrase) return;\n \n const commentsSection = document.getElementById(`comments-${phraseId}`);\n const commentsList = document.getElementById(`comments-list-${phraseId}`);\n \n if (!commentsList) return;\n \n \/\/ Clear existing comments\n commentsList.innerHTML = \"\";\n \n \/\/ Render each comment\n phrase.comments.forEach(comment => {\n const date = new Date(comment.timestamp);\n const timeString = date.toLocaleDateString() + \" \" + date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});\n \n const commentEl = document.createElement(\"div\");\n commentEl.className = \"comment\";\n commentEl.innerHTML = `\n <div class=\"comment-header\">\n <div class=\"comment-author\">\n <i class=\"fas fa-user\"><\/i> ${comment.user}\n <\/div>\n <div class=\"comment-timestamp\">${timeString}<\/div>\n <\/div>\n <div class=\"comment-text\">${comment.text}<\/div>\n <div class=\"comment-votes\">\n <button class=\"comment-vote-btn\" onclick=\"handleCommentVote(${phraseId}, ${comment.id}, 'up')\">\n <i class=\"fas fa-arrow-up\"><\/i>\n <\/button>\n <span class=\"comment-score\">${comment.votes}<\/span>\n <button class=\"comment-vote-btn down\" onclick=\"handleCommentVote(${phraseId}, ${comment.id}, 'down')\">\n <i class=\"fas fa-arrow-down\"><\/i>\n <\/button>\n <\/div>\n `;\n commentsList.appendChild(commentEl);\n });\n }\n\n \/\/ ===== Submission System =====\n function submitNewPhrase() {\n \/\/ Get form values\n const aave = newAaveEl.value.trim();\n const std = newStdEl.value.trim();\n const cat = newCatEl.value;\n const user = newUserEl.value.trim();\n const meaning = newMeaningEl.value.trim();\n const exampleA = newExampleAEl.value.trim();\n const exampleS = newExampleSEl.value.trim();\n \n \/\/ Validate\n if (!aave || !std || !user || !meaning || !exampleA || !exampleS) {\n showToast(\"Please fill all required fields\", \"error\");\n return;\n }\n \n \/\/ Create new phrase object\n const newPhrase = {\n id: nextPhraseId++,\n cat: cat,\n aave: aave,\n std: std,\n meaning: meaning,\n exampleA: exampleA,\n exampleS: exampleS,\n votes: 1, \/\/ Start with 1 vote (the submitter's)\n userVote: 1,\n submittedBy: user,\n comments: []\n };\n \n \/\/ Add to phrases array\n PHRASES.unshift(newPhrase); \/\/ Add to beginning\n \n \/\/ Clear form\n newAaveEl.value = \"\";\n newStdEl.value = \"\";\n newMeaningEl.value = \"\";\n newExampleAEl.value = \"\";\n newExampleSEl.value = \"\";\n newUserEl.value = \"\";\n \n \/\/ Send email (simulated)\n sendSubmissionEmail(newPhrase);\n \n \/\/ Re-render\n renderCards();\n updateLeaderboard();\n \n showToast(\"Phrase submitted successfully! It will be reviewed.\", \"success\");\n }\n\n function sendSubmissionEmail(phrase) {\n \/\/ This simulates sending an email to info@ethiotrans.com\n const emailBody = `\nNew AAVE\/Ebonics Phrase Submission:\n\nAAVE Phrase: ${phrase.aave}\nStandard English: ${phrase.std}\nCategory: ${phrase.cat}\nSubmitted By: ${phrase.submittedBy}\n\nMeaning: ${phrase.meaning}\n\nAAVE Example: ${phrase.exampleA}\nStandard English Example: ${phrase.exampleS}\n\nTimestamp: ${new Date().toISOString()}\n `;\n \n \/\/ In a real implementation, you would use a server-side endpoint or email API\n \/\/ For now, we'll log it and show a toast\n console.log(\"Email would be sent to: info@ethiotrans.com\");\n console.log(\"Subject: New Phrase entered to Ebonics dictionary\");\n console.log(\"Body:\", emailBody);\n \n \/\/ Show confirmation\n setTimeout(() => {\n showToast(\"Submission emailed to info@ethiotrans.com for review\", \"success\");\n }, 1000);\n }\n\n \/\/ ===== Leaderboard & Recent Comments =====\n function updateLeaderboard() {\n \/\/ Calculate submissions per user\n const userSubmissions = {};\n PHRASES.forEach(phrase => {\n if (!userSubmissions[phrase.submittedBy]) {\n userSubmissions[phrase.submittedBy] = { count: 0, totalVotes: 0 };\n }\n userSubmissions[phrase.submittedBy].count++;\n userSubmissions[phrase.submittedBy].totalVotes += phrase.votes;\n });\n \n \/\/ Convert to array and sort by submission count\n const leaderboard = Object.entries(userSubmissions)\n .map(([user, data]) => ({ user, ...data }))\n .sort((a, b) => b.count - a.count)\n .slice(0, 5); \/\/ Top 5\n \n \/\/ Render leaderboard\n leaderboardEl.innerHTML = \"\";\n leaderboard.forEach((item, index) => {\n const medal = index === 0 ? \"?\" : index === 1 ? \"?\" : index === 2 ? \"?\" : \"\u2022\";\n const itemEl = document.createElement(\"div\");\n itemEl.className = \"leaderboard-item\";\n itemEl.innerHTML = `\n <div class=\"leaderboard-header\">\n <div class=\"leaderboard-name\">\n <span>${medal}<\/span> ${item.user}\n <\/div>\n <div class=\"leaderboard-score\">${item.count}<\/div>\n <\/div>\n <div class=\"leaderboard-phrases\">\n ${item.count} phrase${item.count !== 1 ? 's' : ''} \u2022 ${item.totalVotes} total votes\n <\/div>\n `;\n leaderboardEl.appendChild(itemEl);\n });\n }\n\n function updateRecentComments() {\n \/\/ Get all comments from all phrases\n const allComments = [];\n PHRASES.forEach(phrase => {\n phrase.comments.forEach(comment => {\n allComments.push({\n ...comment,\n phraseAave: phrase.aave,\n phraseId: phrase.id\n });\n });\n });\n \n \/\/ Sort by timestamp (newest first) and take top 5\n const recent = allComments\n .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))\n .slice(0, 5);\n \n \/\/ Render recent comments\n recentCommentsEl.innerHTML = \"\";\n recent.forEach(comment => {\n const date = new Date(comment.timestamp);\n const timeString = date.toLocaleDateString();\n \n const itemEl = document.createElement(\"div\");\n itemEl.className = \"recent-comment\";\n itemEl.innerHTML = `\n <div class=\"recent-comment-text\">\"${comment.text}\"<\/div>\n <div class=\"comment-header\">\n <div class=\"comment-author\">\n <i class=\"fas fa-user\"><\/i> ${comment.user}\n <\/div>\n <div class=\"comment-timestamp\">${timeString}<\/div>\n <\/div>\n <div class=\"recent-comment-phrase\">\n On: \"${comment.phraseAave.substring(0, 30)}${comment.phraseAave.length > 30 ? '...' : ''}\"\n <\/div>\n `;\n recentCommentsEl.appendChild(itemEl);\n });\n }\n\n \/\/ ===== Storage Functions =====\n function loadFromStorage() {\n \/\/ Load votes\n const savedVotes = localStorage.getItem(\"aaveVotes\");\n if (savedVotes) {\n const votesData = JSON.parse(savedVotes);\n votesData.forEach(voteData => {\n const phrase = PHRASES.find(p => p.id === voteData.id);\n if (phrase) {\n phrase.votes = voteData.votes;\n phrase.userVote = voteData.userVote;\n }\n });\n }\n \n \/\/ Load comments\n const savedComments = localStorage.getItem(\"aaveComments\");\n if (savedComments) {\n const commentsData = JSON.parse(savedComments);\n commentsData.forEach(commentData => {\n const phrase = PHRASES.find(p => p.id === commentData.phraseId);\n if (phrase) {\n phrase.comments = commentData.comments;\n }\n });\n }\n }\n\n function saveCommentsToStorage() {\n const commentsData = PHRASES.map(p => ({\n phraseId: p.id,\n comments: p.comments\n }));\n localStorage.setItem(\"aaveComments\", JSON.stringify(commentsData));\n }\n\n \/\/ ===== Main Render Function =====\n function renderCards() {\n const query = qEl.value.toLowerCase();\n const category = catEl.value;\n const sortMethod = sortEl.value;\n \n \/\/ Filter items\n let filteredItems = PHRASES.filter(item => {\n const searchText = (item.aave + item.std + item.meaning + item.exampleA + item.exampleS + item.cat).toLowerCase();\n return (!query || searchText.includes(query)) && \n (category === \"all\" || item.cat === category);\n });\n \n \/\/ Sort items\n switch (sortMethod) {\n case \"az\":\n filteredItems.sort((a, b) => a.aave.localeCompare(b.aave));\n break;\n case \"za\":\n filteredItems.sort((a, b) => b.aave.localeCompare(a.aave));\n break;\n case \"cat\":\n filteredItems.sort((a, b) => a.cat.localeCompare(b.cat) || a.aave.localeCompare(b.aave));\n break;\n case \"popular\":\n filteredItems.sort((a, b) => b.votes - a.votes);\n break;\n case \"relevance\":\n default:\n \/\/ Keep filtered order\n break;\n }\n \n \/\/ Update stats\n statsEl.textContent = `Showing ${filteredItems.length} of ${PHRASES.length} entries \u2022 Total Votes: ${PHRASES.reduce((sum, p) => sum + p.votes, 0)}`;\n statsEl.style.background = filteredItems.length === 0 ? \n \"var(--red-light)\" : \n `linear-gradient(90deg, var(--green-light) 0%, var(--yellow-light) 100%)`;\n \n \/\/ Clear cards\n cardsEl.innerHTML = \"\";\n \n \/\/ Render cards\n if (filteredItems.length === 0) {\n cardsEl.innerHTML = `\n <div class=\"no-results\">\n <i class=\"fas fa-search\"><\/i>\n <h2>No entries found<\/h2>\n <p>Try a different search term or select a different category.<\/p>\n <\/div>\n `;\n return;\n }\n \n filteredItems.forEach((item) => {\n const topText = showStdFirst ? item.std : item.aave;\n const bottomText = showStdFirst ? item.aave : item.std;\n const topLabel = showStdFirst ? \"Standard English\" : \"AAVE \/ Ebonics\";\n const bottomLabel = showStdFirst ? \"AAVE \/ Ebonics\" : \"Standard English\";\n const categoryClass = getCategoryClass(item.cat);\n \n const card = document.createElement(\"div\");\n card.className = \"card\";\n \n card.innerHTML = `\n <div class=\"card-header\">\n <span class=\"card-category ${categoryClass}\">${item.cat}<\/span>\n <div class=\"vote-container\">\n <button class=\"vote-btn upvote ${item.userVote === 1 ? 'active' : ''}\" onclick=\"handleVote(${item.id}, 'up')\">\n <i class=\"fas fa-arrow-up\"><\/i>\n <\/button>\n <div class=\"vote-score\">${item.votes}<\/div>\n <button class=\"vote-btn downvote ${item.userVote === -1 ? 'active' : ''}\" onclick=\"handleVote(${item.id}, 'down')\">\n <i class=\"fas fa-arrow-down\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n <div class=\"card-content\">\n <div class=\"card-body\">\n <div class=\"card-term\">${topText}<\/div>\n <div class=\"card-label ${showStdFirst ? 'standard' : 'aave'}\">${topLabel}<\/div>\n \n <div class=\"card-translation\">${bottomText}<\/div>\n <div class=\"card-label ${showStdFirst ? 'aave' : 'standard'}\">${bottomLabel}<\/div>\n \n <p class=\"card-meaning\"><b>Meaning:<\/b> ${item.meaning}<\/p>\n \n <div class=\"card-example\">\n <div><b>AAVE Example:<\/b> ${item.exampleA}<\/div>\n <div><b>Standard English:<\/b> ${item.exampleS}<\/div>\n <\/div>\n \n <div class=\"card-actions\">\n <button class=\"card-btn comment-btn\" onclick=\"handleComment(${item.id})\">\n <i class=\"fas fa-comment\"><\/i> Comments (${item.comments.length})\n <\/button>\n <button class=\"card-btn copy-btn\" onclick=\"copyToClipboard('${item.aave.replace(\/'\/g, \"\\\\'\")}', 'AAVE phrase')\">\n <i class=\"fas fa-copy\"><\/i> Copy AAVE\n <\/button>\n <button class=\"card-btn\" onclick=\"copyToClipboard('${item.std.replace(\/'\/g, \"\\\\'\")}', 'Standard English translation')\">\n <i class=\"fas fa-copy\"><\/i> Copy Standard\n <\/button>\n <\/div>\n \n <div class=\"comments-section\" id=\"comments-${item.id}\">\n <div class=\"comments-title\">\n <i class=\"fas fa-comments\"><\/i> Comments (${item.comments.length})\n <\/div>\n \n <div class=\"comment-form\">\n <textarea class=\"comment-input\" id=\"comment-input-${item.id}\" placeholder=\"Add a comment...\"><\/textarea>\n <input type=\"text\" class=\"form-input\" id=\"comment-user-${item.id}\" placeholder=\"Your username (optional)\" style=\"margin-bottom: 10px;\">\n <button class=\"comment-submit\" onclick=\"submitComment(${item.id})\">\n <i class=\"fas fa-paper-plane\"><\/i> Post Comment\n <\/button>\n <\/div>\n \n <div class=\"comments-list\" id=\"comments-list-${item.id}\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div style=\"margin-top: 15px; font-size: 13px; color: var(--muted);\">\n <i class=\"fas fa-user-edit\"><\/i> Submitted by: <b>${item.submittedBy}<\/b>\n <\/div>\n `;\n \n cardsEl.appendChild(card);\n \n \/\/ Render comments for this card\n setTimeout(() => renderComments(item.id), 100);\n });\n }\n\n function copyToClipboard(text, label) {\n navigator.clipboard.writeText(text)\n .then(() => {\n showToast(`\u2713 Copied ${label} to clipboard!`, \"success\");\n })\n .catch(err => console.error('Copy failed:', err));\n }\n\n \/\/ ===== Initialization =====\n function initializeApp() {\n \/\/ Load saved data\n loadFromStorage();\n \n \/\/ Populate category filter\n const categories = getUniqueCategories(PHRASES);\n catEl.innerHTML = '';\n categories.forEach(category => {\n const option = document.createElement(\"option\");\n option.value = category;\n option.textContent = category === \"all\" ? \"All Categories\" : category;\n catEl.appendChild(option);\n });\n \n \/\/ Set up event listeners\n qEl.addEventListener(\"input\", renderCards);\n catEl.addEventListener(\"change\", renderCards);\n sortEl.addEventListener(\"change\", renderCards);\n \n document.getElementById(\"clearBtn\").addEventListener(\"click\", () => {\n qEl.value = \"\";\n catEl.value = \"all\";\n sortEl.value = \"relevance\";\n renderCards();\n showToast(\"Filters cleared\", \"success\");\n });\n \n document.getElementById(\"randomBtn\").addEventListener(\"click\", () => {\n const randomPhrase = PHRASES[Math.floor(Math.random() * PHRASES.length)];\n qEl.value = randomPhrase.aave.split(\" \")[0];\n renderCards();\n showToast(`Showing results for \"${randomPhrase.aave.split(\" \")[0]}\"`, \"success\");\n });\n \n submitPhraseBtn.addEventListener(\"click\", submitNewPhrase);\n \n \/\/ Allow Enter key to submit form\n newAaveEl.addEventListener(\"keypress\", (e) => {\n if (e.key === \"Enter\") submitNewPhrase();\n });\n \n \/\/ Initial render\n renderCards();\n updateLeaderboard();\n updateRecentComments();\n }\n\n \/\/ ===== Start the App =====\n document.addEventListener('DOMContentLoaded', initializeApp);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AAVE \/ Ebonics Phrasebook – Community Dictionary AAVE \/ Ebonics Community Dictionary A collaborative, Reddit-style phrasebook with voting, comments, and user submissions. Note: This is a living dictionary maintained by the community. Submit New Phrase ExpressionGrammarEverydaySocialMoneyCultureIdentityHistoricalSlang Submit to Community Dictionary All categories Sort: RelevanceSort: A \u2192 ZSort: Z \u2192 ASort: CategorySort: Most Popular Clear Filters<span class=\"post-excerpt-end\">…<\/span><\/p>\n<p class=\"more-link\"><a href=\"https:\/\/yebbo.com\/2013\/2026\/01\/31\/ebonics-phrasebook-community-dictionary\/\" class=\"themebutton\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-226","post","type-post","status-publish","format-standard","hentry","category-blog"],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/posts\/226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/comments?post=226"}],"version-history":[{"count":1,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/posts\/226\/revisions"}],"predecessor-version":[{"id":227,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/posts\/226\/revisions\/227"}],"wp:attachment":[{"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/media?parent=226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/categories?post=226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yebbo.com\/2013\/wp-json\/wp\/v2\/tags?post=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}