Little fixup

Author: frison

.gitignore

@@ -0,0 +1 @@
+public/

src/categories.js

@@ -0,0 +1,27 @@
+export const CATEGORY_COLORS = {
+  systems: '#ff6b6b',
+  'general-purpose': '#4ecdc4',
+  functional: '#a78bfa',
+  scripting: '#fbbf24',
+  web: '#60a5fa',
+  historical: '#9ca3af',
+  esoteric: '#f472b6',
+  jvm: '#fb923c',
+  shell: '#34d399',
+  'ml-family': '#c084fc',
+}
+
+export const CATEGORY_LANES = {
+  historical: 0,
+  systems: 1,
+  'general-purpose': 2,
+  functional: 3,
+  'ml-family': 4,
+  jvm: 5,
+  scripting: 6,
+  web: 7,
+  shell: 8,
+  esoteric: 9,
+}
+
+export const CATEGORIES = Object.keys(CATEGORY_LANES)

src/components/LanguageCard.js

@@ -1,18 +1,6 @@
 import React from 'react'
 import { Link } from 'gatsby'
-
-const CATEGORY_COLORS = {
-  systems: '#ff6b6b',
-  'general-purpose': '#4ecdc4',
-  functional: '#a78bfa',
-  scripting: '#fbbf24',
-  web: '#60a5fa',
-  historical: '#9ca3af',
-  esoteric: '#f472b6',
-  jvm: '#fb923c',
-  shell: '#34d399',
-  'ml-family': '#c084fc',
-}
+import { CATEGORY_COLORS } from '../categories'
 
 const styles = {
   card: {

src/components/TimelineGraph.js

@@ -1,40 +1,13 @@
 import React, { useRef, useEffect, useState, useCallback } from 'react'
 import { navigate } from 'gatsby'
 import '../styles/timeline.css'
-
-const CATEGORY_COLORS = {
-  systems: '#ff6b6b',
-  'general-purpose': '#4ecdc4',
-  functional: '#a78bfa',
-  scripting: '#fbbf24',
-  web: '#60a5fa',
-  historical: '#9ca3af',
-  esoteric: '#f472b6',
-  jvm: '#fb923c',
-  shell: '#34d399',
-  'ml-family': '#c084fc',
-}
-
-const CATEGORY_LANES = {
-  historical: 0,
-  systems: 1,
-  'general-purpose': 2,
-  functional: 3,
-  'ml-family': 4,
-  jvm: 5,
-  scripting: 6,
-  web: 7,
-  shell: 8,
-  esoteric: 9,
-}
-
-const ALL_CATEGORIES = Object.keys(CATEGORY_LANES)
+import { CATEGORY_COLORS, CATEGORY_LANES, CATEGORIES } from '../categories'
 
 export default function TimelineGraph({ languages }) {
   const containerRef = useRef(null)
   const svgRef = useRef(null)
   const tooltipRef = useRef(null)
-  const [activeCategories, setActiveCategories] = useState(new Set(ALL_CATEGORIES))
+  const [activeCategories, setActiveCategories] = useState(new Set(CATEGORIES))
   const [dimensions, setDimensions] = useState({ width: 1200, height: 450 })
 
   const toggleCategory = (cat) => {
@@ -255,7 +228,7 @@ export default function TimelineGraph({ languages }) {
         <span style={{ fontSize: '0.7rem', color: 'var(--text-muted)', fontFamily: "'JetBrains Mono', monospace", marginRight: '0.25rem' }}>
           filter
         </span>
-        {ALL_CATEGORIES.map(cat => (
+        {CATEGORIES.map(cat => (
           <button
             key={cat}
             className={`timeline-control-btn ${activeCategories.has(cat) ? 'active' : ''}`}

src/pages/index.js

@@ -4,11 +4,7 @@ import Layout from '../components/Layout'
 import SEO from '../components/SEO'
 import LanguageCard from '../components/LanguageCard'
 import TimelineGraph from '../components/TimelineGraph'
-
-const CATEGORIES = [
-  'systems', 'general-purpose', 'functional', 'scripting', 'web',
-  'historical', 'esoteric', 'jvm', 'shell', 'ml-family',
-]
+import { CATEGORIES } from '../categories'
 
 const s = {
   hero: {

src/templates/language.js

@@ -4,19 +4,7 @@ import Layout from '../components/Layout'
 import SEO from '../components/SEO'
 import CopyableCode from '../components/CopyableCode'
 import CopyableCommand from '../components/CopyableCommand'
-
-const CATEGORY_COLORS = {
-  systems: '#ff6b6b',
-  'general-purpose': '#4ecdc4',
-  functional: '#a78bfa',
-  scripting: '#fbbf24',
-  web: '#60a5fa',
-  historical: '#9ca3af',
-  esoteric: '#f472b6',
-  jvm: '#fb923c',
-  shell: '#34d399',
-  'ml-family': '#c084fc',
-}
+import { CATEGORY_COLORS } from '../categories'
 
 const s = {
   hero: {