Develop

CONTRIBUTING.md

@@ -48,7 +48,7 @@ export default {
   tags: [TAGS.frontend, TAGS.open_source],
 
   links: {
-    website: 'https://vuejs.org',
+    official_website: 'https://vuejs.org',
     github: 'https://github.com/vuejs/core',
     npm: 'https://www.npmjs.com/package/vue',
   },

demo/src/components/CompletenessChart.tsx

@@ -7,6 +7,10 @@ interface CompletenessChartProps {
   baselinePercentage: number
   additionalPercentage: number
   fullPercentage: number
+  baselineCount: number
+  baselineTotal: number
+  additionalCount: number
+  additionalTotal: number
   term: TTerm
 }
 
@@ -16,6 +20,10 @@ export function CompletenessChart({
   baselinePercentage,
   additionalPercentage,
   fullPercentage,
+  baselineCount,
+  baselineTotal,
+  additionalCount,
+  additionalTotal,
   term,
 }: CompletenessChartProps) {
   const groupByCategory = (fields: FieldCompleteness[]) => {
@@ -39,6 +47,17 @@ export function CompletenessChart({
   const baselineGroups = groupByCategory(baselineFields)
   const additionalGroups = groupByCategory(additionalFields)
 
+  const renderCount = (completed: number, total: number) => {
+    const allDone = completed === total
+    return (
+      <span
+        className={`text-xs font-medium px-1.5 py-0.5 rounded ${allDone ? 'bg-green-100 text-green-700' : 'bg-gray-200 text-gray-500'}`}
+      >
+        {completed}/{total}
+      </span>
+    )
+  }
+
   const renderFieldList = (fields: FieldCompleteness[]) => {
     if (fields.length === 0) return null
 
@@ -48,6 +67,7 @@ export function CompletenessChart({
           <li key={field.field} className="flex items-center gap-2 text-sm">
             <span className={field.completed ? 'text-green-600' : 'text-gray-400'}>{field.completed ? '✓' : '○'}</span>
             <span className={field.completed ? 'text-gray-700' : 'text-gray-500'}>{field.label}</span>
+            {field.optional && <span className="text-gray-400 text-xs">(Optional)</span>}
           </li>
         ))}
       </ul>
@@ -57,9 +77,16 @@ export function CompletenessChart({
   const renderCategory = (title: string, fields: FieldCompleteness[]) => {
     if (fields.length === 0) return null
 
+    const countableFields = fields.filter((f) => !f.optional)
+    const completed = countableFields.filter((f) => f.completed).length
+    const total = countableFields.length
+
     return (
       <div className="mb-4">
-        <h4 className="text-sm font-semibold text-gray-700 mb-2">{title}</h4>
+        <div className="flex items-center gap-2 mb-2">
+          <h4 className="text-sm font-semibold text-gray-700">{title}</h4>
+          {total > 0 && renderCount(completed, total)}
+        </div>
         {renderFieldList(fields)}
       </div>
     )
@@ -70,16 +97,18 @@ export function CompletenessChart({
 
     const links = term.links
     const linkStatuses = [
-      { name: 'Website', completed: !!links?.website },
+      { name: 'Official Website', completed: !!links?.official_website },
       { name: 'Wikipedia', completed: !!links?.wikipedia },
       { name: 'GitHub', completed: !!links?.github },
       { name: 'npm', completed: !!links?.npm },
     ]
+    const hasAny = linkStatuses.some((l) => l.completed)
 
     return (
       <div className="mb-4">
         <div className="flex items-center gap-2 mb-2">
           <h4 className="text-sm font-semibold text-gray-700">Links (at least one)</h4>
+          {renderCount(hasAny ? 1 : 0, 1)}
         </div>
         <ul className="space-y-1">
           {linkStatuses.map((link) => (
@@ -102,11 +131,15 @@ export function CompletenessChart({
           <div className="flex items-center gap-4">
             <div className="flex items-center gap-2">
               <div className="w-3 h-3 rounded-full bg-blue-600"></div>
-              <span className="text-sm text-gray-600">Core fields: {baselinePercentage}%</span>
+              <span className="text-sm text-gray-600">
+                Core fields: {baselineCount}/{baselineTotal}
+              </span>
             </div>
             <div className="flex items-center gap-2">
               <div className="w-3 h-3 rounded-full bg-green-600"></div>
-              <span className="text-sm text-gray-600">Translations: {additionalPercentage}%</span>
+              <span className="text-sm text-gray-600">
+                Translations: {additionalCount}/{additionalTotal}
+              </span>
             </div>
           </div>
           <span className="text-2xl font-bold text-gray-900">{fullPercentage}%</span>
@@ -139,7 +172,6 @@ export function CompletenessChart({
       <div className="border-t pt-4 mt-4">
         <h3 className="text-md font-semibold mb-3">Translations</h3>
         {renderCategory('en-US', additionalGroups['en-US'])}
-        {renderCategory('Metadata', additionalGroups.metadata)}
         {renderCategory('en-GB Translation', additionalGroups['en-GB'])}
         {renderCategory('de-DE Translation', additionalGroups['de-DE'])}
       </div>

demo/src/components/TermLinks.tsx

@@ -10,7 +10,7 @@ interface TermLinksProps {
 }
 
 const linkData = [
-  { key: 'website' as const, label: 'Official Website', icon: Globe },
+  { key: 'official_website' as const, label: 'Official Website', icon: Globe },
   { key: 'wikipedia' as const, label: 'Wikipedia', icon: ExternalLink },
   { key: 'github' as const, label: 'GitHub', icon: ExternalLink },
   { key: 'npm' as const, label: 'npm', icon: ExternalLink },

demo/src/pages/DocsPage.tsx

@@ -290,7 +290,7 @@ const dictionary = getTerms({ terms, locale: 'en-US' })`}
       { id: 'frontend', name: { 'en-US': 'Frontend', ... } },
       ...
     ],
-    links: { website: 'https://react.dev', wikipedia: '...', ... },
+    links: { official_website: 'https://react.dev', wikipedia: '...', ... },
     sources: {
       label: [ { id: 'community', name: { 'en-US': 'Community', ... } } ],
       ...

demo/src/pages/HomePage.tsx

@@ -138,12 +138,11 @@ export function HomePage({ searchQuery, onSearchChange, completeness, onComplete
               setSelected={setSelectedTags}
               multi
             />
-            {(selectedTypes.length > 0 || selectedTags.length > 0 || completeness !== 'all') && (
+            {(selectedTypes.length > 0 || selectedTags.length > 0) && (
               <button
                 onClick={() => {
                   setSelectedTypes([])
                   setSelectedTags([])
-                  onCompletenessChange('all')
                 }}
                 className="text-sm text-slate-500 hover:text-blue-600 transition-colors cursor-pointer"
               >

demo/src/pages/StatusPage.tsx

@@ -28,8 +28,8 @@ interface StatusPageProps {
 }
 
 export function StatusPage({ searchQuery, onSearchChange }: StatusPageProps) {
-  const [filter, setFilter] = useState<'all' | 'incomplete' | 'complete'>('all')
-  const [sortBy, setSortBy] = useState<'name' | 'missing'>('name')
+  const [filter, setFilter] = useState<'all' | 'baseline_incomplete' | 'baseline_complete' | 'fully_complete'>('all')
+  const [sortBy, setSortBy] = useState<'name' | 'missing' | 'least_missing'>('name')
 
   const termStatuses = useMemo(() => {
     const localizedTerms = getTerms({ terms, locale: 'en-US' })
@@ -54,16 +54,20 @@ export function StatusPage({ searchQuery, onSearchChange }: StatusPageProps) {
       result = result.filter((t) => t.name.toLowerCase().includes(query) || t.id.toLowerCase().includes(query))
     }
 
-    if (filter === 'incomplete') {
-      result = result.filter((t) => t.fullPercentage < 100)
-    } else if (filter === 'complete') {
+    if (filter === 'baseline_incomplete') {
+      result = result.filter((t) => !t.baselineComplete)
+    } else if (filter === 'baseline_complete') {
+      result = result.filter((t) => t.baselineComplete && t.fullPercentage < 100)
+    } else if (filter === 'fully_complete') {
       result = result.filter((t) => t.fullPercentage === 100)
     }
 
     if (sortBy === 'name') {
       result = [...result].sort((a, b) => sortTermsByName(a, b))
-    } else {
+    } else if (sortBy === 'missing') {
       result = [...result].sort((a, b) => a.fullPercentage - b.fullPercentage || sortTermsByName(a, b))
+    } else {
+      result = [...result].sort((a, b) => b.fullPercentage - a.fullPercentage || sortTermsByName(a, b))
     }
 
     return result
@@ -150,7 +154,7 @@ export function StatusPage({ searchQuery, onSearchChange }: StatusPageProps) {
                   <th className="text-center px-4 py-3 text-sm font-semibold text-slate-600">Label</th>
                   <th className="text-center px-4 py-3 text-sm font-semibold text-slate-600">Definition</th>
                   <th className="text-center px-4 py-3 text-sm font-semibold text-slate-600">Tags</th>
-                  <th className="text-center px-4 py-3 text-sm font-semibold text-slate-600">Website</th>
+                  <th className="text-center px-4 py-3 text-sm font-semibold text-slate-600">Links</th>
                   <th className="text-center px-4 py-3 text-sm font-semibold text-slate-600">Actions</th>
                 </tr>
               </thead>

demo/src/pages/TermPage.tsx

@@ -85,13 +85,7 @@ export function TermPage({ termId, fromQuery }: TermPageProps) {
                   {typeof term.name === 'string' && !term.name && !populateEmpty ? `terms[${term.id}].name` : term.name}
                 </h1>
 
-                <p className="text-xl leading-relaxed mb-1">
-                  {typeof term.altName === 'string' && !term.altName ? (
-                    `terms[${term.id}].altName`
-                  ) : (
-                    <strong>{term.altName}</strong>
-                  )}
-                </p>
+                {term.altName && <p className="text-sm text-blue-100 mb-1 italic">{term.altName}</p>}
 
                 <p className="text-lg text-blue-200">
                   {typeof term.label === 'string' && !term.label && !populateEmpty
@@ -138,7 +132,9 @@ export function TermPage({ termId, fromQuery }: TermPageProps) {
           <div className="px-8 py-8">
             <div className="mb-8">
               <h2 className="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-3">Definition</h2>
-              <p className={`leading-relaxed ${term.definition ? 'text-lg text-slate-700' : 'text-base text-slate-400 italic'}`}>
+              <p
+                className={`leading-relaxed ${term.definition ? 'text-lg text-slate-700' : 'text-base text-slate-400 italic'}`}
+              >
                 {typeof term.definition === 'string' && !term.definition && !populateEmpty
                   ? `terms[${term.id}].definition`
                   : term.definition || 'No definition provided yet. Help us by contributing!'}
@@ -242,11 +238,15 @@ export function TermPage({ termId, fromQuery }: TermPageProps) {
                     <div className="flex items-center gap-3 mt-2">
                       <div className="flex items-center gap-1.5">
                         <div className="w-2.5 h-2.5 rounded-full bg-blue-600"></div>
-                        <span className="text-xs text-slate-600">Core fields {completeness.baselinePercentage}%</span>
+                        <span className="text-xs text-slate-600">
+                          Core fields {completeness.baselineCount}/{completeness.baselineTotal}
+                        </span>
                       </div>
                       <div className="flex items-center gap-1.5">
                         <div className="w-2.5 h-2.5 rounded-full bg-green-600"></div>
-                        <span className="text-xs text-slate-600">Translations {completeness.additionalPercentage}%</span>
+                        <span className="text-xs text-slate-600">
+                          Translations {completeness.additionalCount}/{completeness.additionalTotal}
+                        </span>
                       </div>
                     </div>
                   </div>
@@ -278,6 +278,10 @@ export function TermPage({ termId, fromQuery }: TermPageProps) {
                     baselinePercentage={completeness.baselinePercentage}
                     additionalPercentage={completeness.additionalPercentage}
                     fullPercentage={completeness.fullPercentage}
+                    baselineCount={completeness.baselineCount}
+                    baselineTotal={completeness.baselineTotal}
+                    additionalCount={completeness.additionalCount}
+                    additionalTotal={completeness.additionalTotal}
                     term={(terms as unknown as Record<string, TTerm>)[termId]}
                   />
                 </div>

demo/src/shared/constants.ts

@@ -16,6 +16,7 @@ export const FILTER_OPTIONS = [
 export const SORT_OPTIONS = [
   { id: 'name', label: 'Name' },
   { id: 'missing', label: 'Most missing' },
+  { id: 'least_missing', label: 'Least missing' },
 ]
 
 export const GITHUB_REPO_URL = 'https://github.com/kyco/dev-dict'