Merge pull request #17 from pawelmalak/dark-mode

Added dark mode and syntax highlighting

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 build/
-data/
+data/*
+!data/**/*.json

.prettierignore

@@ -1,2 +1,3 @@
 *.css
+client/**/data/**/*.json
 CHANGELOG.md

CHANGELOG.md

@@ -1,3 +1,7 @@
+### v1.3 (2021-09-30)
+- Added dark mode ([#7](https://github.com/pawelmalak/snippet-box/issues/7))
+- Added syntax highlighting ([#14](https://github.com/pawelmalak/snippet-box/issues/14))
+
 ### v1.2 (2021-09-28)
 - Added support for tags ([#10](https://github.com/pawelmalak/snippet-box/issues/10))
 

Dockerfile

@@ -8,7 +8,11 @@ RUN npm install
 
 COPY . .
 
-RUN mkdir -p ./public ./data
+# Install client dependencies
+RUN mkdir -p ./public ./data \
+    && cd client \
+    && npm install \
+    && npm rebuild node-sass
 
 # Build 
 RUN npm run build \

Dockerfile.arm

@@ -7,10 +7,13 @@ COPY package*.json ./
 RUN apk --no-cache --virtual build-dependencies add python make g++ \
     && npm install
     
-
 COPY . .
 
-RUN mkdir -p ./public ./data
+# Install client dependencies
+RUN mkdir -p ./public ./data \
+    && cd client \
+    && npm install \
+    && npm rebuild node-sass
 
 # Build
 RUN npm run build \

README.md

@@ -10,6 +10,7 @@ Snippet Box is a simple self-hosted app for organizing your code snippets. It al
 
 - Backend
   - Node.js
+  - Typescript
   - Express.js
   - Sequelize ORM + SQLite
 - Frontend
@@ -38,6 +39,7 @@ npm run dev
 ### With Docker
 
 #### Docker Hub
+
 [Docker Hub image link](https://hub.docker.com/r/pawelmalak/snippet-box).
 For arm platforms use `:arm` tag.
 
@@ -51,7 +53,7 @@ docker build -t snippet-box .
 docker buildx build \
   --platform linux/arm/v7,linux/arm64 \
   -f Dockerfile.arm \
-  -t snippet-box:arm
+  -t snippet-box:arm .
 ```
 
 #### Deployment
@@ -62,6 +64,10 @@ docker buildx build \
 docker run -p 5000:5000 -v /path/to/data:/app/data snippet-box
 ```
 
+### Without Docker
+
+Follow instructions from wiki - [Installation without Docker](https://github.com/pawelmalak/snippet-box/wiki/Installation-without-Docker)
+
 ## Functionality
 
 - Pinned snippets
@@ -71,12 +77,13 @@ docker run -p 5000:5000 -v /path/to/data:/app/data snippet-box
 
 - Snippet library
   - Manage your snippets through snippet library
-  - Easily filter and access your code
+  - Easily filter and access your code using tags
 
 ![Snippet library screenshot](./.github/img/snippets.png)
 
 - Snippet
   - View your code, snippet details and documentation
+  - Built-in syntax highlighting
   - Easily perform snippet actions like edit, pin or delete from a single place
 
 ![Snippet screenshot](./.github/img/snippet.png)

client/package.json

@@ -6,24 +6,22 @@
     "@icons-pack/react-simple-icons": "^4.6.1",
     "@mdi/js": "^6.1.95",
     "@mdi/react": "^1.5.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^26.0.24",
     "@types/node": "^12.20.25",
     "@types/react": "^17.0.21",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.3.0",
     "axios": "^0.21.4",
+    "bootstrap": "^5.1.1",
     "clipboard-copy": "^4.0.1",
     "dayjs": "^1.10.7",
+    "highlight.js": "^11.2.0",
+    "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-markdown": "^7.0.1",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
-    "typescript": "^4.4.3",
-    "web-vitals": "^1.1.2"
+    "typescript": "^4.4.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -49,6 +47,8 @@
       "last 1 safari version"
     ]
   },
-  "devDependencies": {},
-  "proxy": "http://localhost:5000"
+  "proxy": "http://localhost:5000",
+  "devDependencies": {
+    "purgecss": "^4.0.3"
+  }
 }

client/src/components/Snippets/SnippetCard.tsx

@@ -51,7 +51,7 @@ export const SnippetCard = (props: Props): JSX.Element => {
           >
             <Button
               text='View'
-              color='dark'
+              color='secondary'
               small
               outline
               classes='me-2'
@@ -60,7 +60,12 @@ export const SnippetCard = (props: Props): JSX.Element => {
               }}
             />
           </Link>
-          <Button text='Copy code' color='dark' small handler={copyHandler} />
+          <Button
+            text='Copy code'
+            color='secondary'
+            small
+            handler={copyHandler}
+          />
         </div>
       </div>
     </Card>

client/src/components/Snippets/SnippetCode.tsx

@@ -1,17 +1,30 @@
+import { useEffect } from 'react';
+import { findLanguage } from '../../utils';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/atom-one-dark.css';
+
 interface Props {
   code: string;
+  language: string;
 }
 
 export const SnippetCode = (props: Props): JSX.Element => {
+  const { code, language } = props;
+
+  const syntax = findLanguage(language) ? language : 'plaintext';
+
+  useEffect(() => {
+    hljs.highlightAll();
+  }, []);
+
   return (
-    <div className='mb-3'>
-      <textarea
-        className='form-control'
-        id='code'
-        rows={13}
-        value={props.code}
-        disabled
-      ></textarea>
-    </div>
+    <pre>
+      <code
+        className={`language-${syntax.toLowerCase()}`}
+        style={{ whiteSpace: 'pre-wrap', borderRadius: '4px' }}
+      >
+        {code}
+      </code>
+    </pre>
   );
 };

client/src/components/Snippets/SnippetDetails.tsx

@@ -66,7 +66,7 @@ export const SnippetDetails = (props: Props): JSX.Element => {
       <div>
         {tags.map((tag, idx) => (
           <span className='me-2' key={idx}>
-            <Badge text={tag} color='dark' />
+            <Badge text={tag} color='light' />
           </span>
         ))}
       </div>
@@ -76,7 +76,7 @@ export const SnippetDetails = (props: Props): JSX.Element => {
       <div className='d-grid g-2' style={{ rowGap: '10px' }}>
         <Button
           text='Edit'
-          color='dark'
+          color='secondary'
           small
           outline
           handler={() => {
@@ -94,7 +94,12 @@ export const SnippetDetails = (props: Props): JSX.Element => {
           outline
           handler={() => deleteSnippet(id)}
         />
-        <Button text='Copy code' color='dark' small handler={copyHandler} />
+        <Button
+          text='Copy code'
+          color='secondary'
+          small
+          handler={copyHandler}
+        />
       </div>
     </Card>
   );

client/src/components/Snippets/SnippetForm.tsx

@@ -183,7 +183,7 @@ export const SnippetForm = (props: Props): JSX.Element => {
             <div className='d-grid'>
               <Button
                 text={`${inEdit ? 'Update snippet' : 'Create snippet'}`}
-                color='dark'
+                color='secondary'
                 type='submit'
               />
             </div>

client/src/components/Snippets/SnippetPin.tsx

@@ -15,9 +15,9 @@ export const SnippetPin = (props: Props): JSX.Element => {
   return (
     <div onClick={() => toggleSnippetPin(id)} className='cursor-pointer'>
       {isPinned ? (
-        <Icon path={mdiPin} size={0.8} color='#212529' />
+        <Icon path={mdiPin} size={0.8} color='#20c997' />
       ) : (
-        <Icon path={mdiPinOutline} size={0.8} color='#9a9a9a' />
+        <Icon path={mdiPinOutline} size={0.8} color='#ced4da' />
       )}
     </div>
   );

client/src/components/UI/EmptyState.tsx

@@ -2,14 +2,14 @@ import { Link } from 'react-router-dom';
 
 export const EmptyState = (): JSX.Element => {
   const editorLink = (
-    <Link to='/editor' className='fw-bold text-decoration-none text-dark'>
+    <Link to='/editor' className='fw-bold text-success text-decoration-none'>
       <span>editor</span>
     </Link>
   );
 
   return (
     <div className='col-12 d-flex flex-column align-items-center'>
-      <h4 className='text-muted'>You currently don't have any snippets</h4>
+      <h4>You currently don't have any snippets</h4>
       <p>Go to the {editorLink} and create one</p>
     </div>
   );

client/src/components/UI/Layout.tsx

@@ -5,7 +5,7 @@ interface Props {
 export const Layout = (props: Props): JSX.Element => {
   return (
     <div className='container-lg px-5'>
-      <div className='row pt-4'>{props.children}</div>
+      <div className='row py-4'>{props.children}</div>
     </div>
   );
 };

client/src/components/UI/PageHeader.tsx

@@ -19,7 +19,7 @@ export const PageHeader = <T,>(props: Props<T>): JSX.Element => {
               pathname: prevDest,
               state: prevState
             }}
-            className='text-decoration-none text-dark'
+            className='text-decoration-none text-light'
           >
             &lt;- Go back
           </Link>

client/src/containers/Home.tsx

@@ -19,7 +19,7 @@ export const Home = (): JSX.Element => {
           {snippets.some(s => s.isPinned) && (
             <Fragment>
               <PageHeader title='Pinned snippets' />
-              <div className='col-12 mb-3'>
+              <div className='col-12 mt-3'>
                 <SnippetGrid snippets={snippets.filter(s => s.isPinned)} />
               </div>
             </Fragment>

client/src/containers/Snippet.tsx

@@ -31,7 +31,10 @@ export const Snippet = (): JSX.Element => {
           <PageHeader title='' prevDest={from} />
           <div className='row mt-3'>
             <div className='col-12 col-md-7 col-lg-8'>
-              <SnippetCode code={currentSnippet.code} />
+              <SnippetCode
+                code={currentSnippet.code}
+                language={currentSnippet.language}
+              />
             </div>
             <div className='col-12 col-md-5 col-lg-4'>
               <SnippetDetails snippet={currentSnippet} />

client/src/containers/Snippets.tsx

@@ -44,6 +44,8 @@ export const Snippets = (): JSX.Element => {
                 <span>Total</span>
                 <span>{snippets.length}</span>
               </div>
+              <hr />
+
               <h5 className='card-title'>Filter by tags</h5>
               <Fragment>
                 {tagCount.map((tag, idx) => {
@@ -53,7 +55,7 @@ export const Snippets = (): JSX.Element => {
                     <div
                       key={idx}
                       className={`d-flex justify-content-between cursor-pointer ${
-                        isActiveFilter && 'text-dark fw-bold'
+                        isActiveFilter && 'text-success'
                       }`}
                       onClick={() => filterHandler(tag.name)}
                     >
@@ -66,7 +68,7 @@ export const Snippets = (): JSX.Element => {
               <div className='d-grid mt-3'>
                 <Button
                   text='Clear filters'
-                  color='dark'
+                  color='secondary'
                   small
                   outline
                   handler={clearFilterHandler}

client/src/data/aliases_raw.json

@@ -0,0 +1 @@
+{"aliases":["1c","abnf","accesslog","actionscript","ada","adoc","angelscript","apache","apacheconf","applescript","arcade","arduino","arm","armasm","as","asc","asciidoc","aspectj","atom","autohotkey","autoit","avrasm","awk","axapta","bash","basic","bat","bf","bind","bnf","brainfuck","c","c++","cal","capnp","capnproto","cc","clj","clojure","cls","cmake.in","cmake","cmd","coffee","coffeescript","console","coq","cos","cpp","cr","craftcms","crm","crmsh","crystal","cs","csharp","cson","csp","css","cxx","d","dart","dfm","diff","django","dns","docker","dockerfile","dos","dpr","dsconfig","dst","dts","dust","ebnf","elixir","elm","erl","erlang","excel","f90","f95","fix","fortran","fs","fsharp","gams","gauss","gawk","gcode","gemspec","gherkin","glsl","gms","go","golang","golo","gololang","gradle","graph","groovy","gss","gyp","h","h++","haml","handlebars","haskell","haxe","hbs","hh","hpp","hs","html.handlebars","html.hbs","html","http","https","hx","hxx","hy","hylang","i7","iced","inform7","ini","ino","instances","irb","irpf90","java","javascript","jinja","js","json","jsp","jsx","julia-repl","julia","k","kdb","kotlin","kt","lasso","lassoscript","ldif","leaf","less","lisp","livecodeserver","livescript","ls","ls","lua","mak","make","makefile","markdown","mathematica","matlab","mawk","maxima","md","mel","mercury","mizar","mk","mkd","mkdown","ml","ml","mm","mma","mojolicious","monkey","moon","moonscript","n1ql","nawk","nc","nginx","nginxconf","nim","nimrod","nix","nsis","obj-c","obj-c++","objc","objective-c++","objectivec","ocaml","openscad","osascript","oxygene","p21","parser3","pas","pascal","patch","pcmk","perl","pf.conf","pf","pgsql","php","pl","plaintext","plist","pm","podspec","pony","postgres","postgresql","powershell","pp","processing","profile","prolog","properties","protobuf","ps","ps1","puppet","py","pycon","python-repl","python","qml","r","rb","re","reasonml","rib","rs","rsl","rss","ruby","ruleslanguage","rust","SAS","sas","scad","scala","scheme","sci","scilab","scss","sh","shell","smali","smalltalk","sml","sql","st","stan","stanfuncs","stata","step","stp","styl","stylus","subunit","svg","swift","tao","tap","tcl","tex","text","thor","thrift","tk","toml","tp","ts","twig","txt","typescript","v","vala","vb","vbnet","vbs","vbscript","verilog","vhdl","vim","wl","x++","x86asm","xhtml","xjb","xl","xls","xlsx","xml","xpath","xq","xquery","xsd","xsl","yaml","yml","zep","zephir","zone","zsh"]}

client/src/data/languages.json

@@ -0,0 +1,171 @@
+{
+  "languages": [
+    { "name": "1C", "aliases": ["1c"] },
+    { "name": "ABNF", "aliases": ["abnf"] },
+    { "name": "Access logs", "aliases": ["accesslog"] },
+    { "name": "Ada", "aliases": ["ada"] },
+    { "name": "Arduino (C++ w/Arduino libs)", "aliases": ["arduino", "ino"] },
+    { "name": "ARM assembler", "aliases": ["armasm", "arm"] },
+    { "name": "AVR assembler", "aliases": ["avrasm"] },
+    { "name": "ActionScript", "aliases": ["actionscript", "as"] },
+    { "name": "AngelScript", "aliases": ["angelscript", "asc"] },
+    { "name": "Apache", "aliases": ["apache", "apacheconf"] },
+    { "name": "AppleScript", "aliases": ["applescript", "osascript"] },
+    { "name": "Arcade", "aliases": ["arcade"] },
+    { "name": "AsciiDoc", "aliases": ["asciidoc", "adoc"] },
+    { "name": "AspectJ", "aliases": ["aspectj"] },
+    { "name": "AutoHotkey", "aliases": ["autohotkey"] },
+    { "name": "AutoIt", "aliases": ["autoit"] },
+    { "name": "Awk", "aliases": ["awk", "mawk", "nawk", "gawk"] },
+    { "name": "Bash", "aliases": ["bash", "sh", "zsh"] },
+    { "name": "Basic", "aliases": ["basic"] },
+    { "name": "BNF", "aliases": ["bnf"] },
+    { "name": "Brainfuck", "aliases": ["brainfuck", "bf"] },
+    { "name": "C#", "aliases": ["csharp", "cs"] },
+    { "name": "C", "aliases": ["c", "h"] },
+    { "name": "C++", "aliases": ["cpp", "hpp", "cc", "hh", "c++", "h++", "cxx", "hxx"] },
+    { "name": "C/AL", "aliases": ["cal"] },
+    { "name": "Cache Object Script", "aliases": ["cos", "cls"] },
+    { "name": "CMake", "aliases": ["cmake", "cmake.in"] },
+    { "name": "Coq", "aliases": ["coq"] },
+    { "name": "CSP", "aliases": ["csp"] },
+    { "name": "CSS", "aliases": ["css"] },
+    { "name": "Cap’n Proto", "aliases": ["capnproto", "capnp"] },
+    { "name": "Clojure", "aliases": ["clojure", "clj"] },
+    { "name": "CoffeeScript", "aliases": ["coffeescript", "coffee", "cson", "iced"] },
+    { "name": "Crmsh", "aliases": ["crmsh", "crm", "pcmk"] },
+    { "name": "Crystal", "aliases": ["crystal", "cr"] },
+    { "name": "D", "aliases": ["d"] },
+    { "name": "Dart", "aliases": ["dart"] },
+    { "name": "Delphi", "aliases": ["dpr", "dfm", "pas", "pascal"] },
+    { "name": "Diff", "aliases": ["diff", "patch"] },
+    { "name": "Django", "aliases": ["django", "jinja"] },
+    { "name": "DNS Zone file", "aliases": ["dns", "zone", "bind"] },
+    { "name": "Dockerfile", "aliases": ["dockerfile", "docker"] },
+    { "name": "DOS", "aliases": ["dos", "bat", "cmd"] },
+    { "name": "dsconfig", "aliases": ["dsconfig"] },
+    { "name": "DTS (Device Tree)", "aliases": ["dts"] },
+    { "name": "Dust", "aliases": ["dust", "dst"] },
+    { "name": "EBNF", "aliases": ["ebnf"] },
+    { "name": "Elixir", "aliases": ["elixir"] },
+    { "name": "Elm", "aliases": ["elm"] },
+    { "name": "Erlang", "aliases": ["erlang", "erl"] },
+    { "name": "Excel", "aliases": ["excel", "xls", "xlsx"] },
+    { "name": "F#", "aliases": ["fsharp", "fs"] },
+    { "name": "FIX", "aliases": ["fix"] },
+    { "name": "Fortran", "aliases": ["fortran", "f90", "f95"] },
+    { "name": "G-Code", "aliases": ["gcode", "nc"] },
+    { "name": "Gams", "aliases": ["gams", "gms"] },
+    { "name": "GAUSS", "aliases": ["gauss", "gss"] },
+    { "name": "Gherkin", "aliases": ["gherkin"] },
+    { "name": "Go", "aliases": ["go", "golang"] },
+    { "name": "Golo", "aliases": ["golo", "gololang"] },
+    { "name": "Gradle", "aliases": ["gradle"] },
+    { "name": "Groovy", "aliases": ["groovy"] },
+    { "name": "HTML,XML", "aliases": ["xml", "html", "xhtml", "rss", "atom", "xjb", "xsd", "xsl", "plist", "svg"] },
+    { "name": "HTTP", "aliases": ["http", "https"] },
+    { "name": "Haml", "aliases": ["haml"] },
+    { "name": "Handlebars", "aliases": ["handlebars", "hbs", "html.hbs", "html.handlebars"] },
+    { "name": "Haskell", "aliases": ["haskell", "hs"] },
+    { "name": "Haxe", "aliases": ["haxe", "hx"] },
+    { "name": "Hy", "aliases": ["hy", "hylang"] },
+    { "name": "Ini,TOML", "aliases": ["ini", "toml"] },
+    { "name": "Inform7", "aliases": ["inform7", "i7"] },
+    { "name": "IRPF90", "aliases": ["irpf90"] },
+    { "name": "JSON", "aliases": ["json"] },
+    { "name": "Java", "aliases": ["java", "jsp"] },
+    { "name": "JavaScript", "aliases": ["javascript", "js", "jsx"] },
+    { "name": "Julia", "aliases": ["julia", "julia-repl"] },
+    { "name": "Kotlin", "aliases": ["kotlin", "kt"] },
+    { "name": "LaTeX", "aliases": ["tex"] },
+    { "name": "Leaf", "aliases": ["leaf"] },
+    { "name": "Lasso", "aliases": ["lasso", "ls", "lassoscript"] },
+    { "name": "Less", "aliases": ["less"] },
+    { "name": "LDIF", "aliases": ["ldif"] },
+    { "name": "Lisp", "aliases": ["lisp"] },
+    { "name": "LiveCode Server", "aliases": ["livecodeserver"] },
+    { "name": "LiveScript", "aliases": ["livescript", "ls"] },
+    { "name": "Lua", "aliases": ["lua"] },
+    { "name": "Makefile", "aliases": ["makefile", "mk", "mak", "make"] },
+    { "name": "Markdown", "aliases": ["markdown", "md", "mkdown", "mkd"] },
+    { "name": "Mathematica", "aliases": ["mathematica", "mma", "wl"] },
+    { "name": "Matlab", "aliases": ["matlab"] },
+    { "name": "Maxima", "aliases": ["maxima"] },
+    { "name": "Maya Embedded Language", "aliases": ["mel"] },
+    { "name": "Mercury", "aliases": ["mercury"] },
+    { "name": "Mizar", "aliases": ["mizar"] },
+    { "name": "Mojolicious", "aliases": ["mojolicious"] },
+    { "name": "Monkey", "aliases": ["monkey"] },
+    { "name": "Moonscript", "aliases": ["moonscript", "moon"] },
+    { "name": "N1QL", "aliases": ["n1ql"] },
+    { "name": "NSIS", "aliases": ["nsis"] },
+    { "name": "Nginx", "aliases": ["nginx", "nginxconf"] },
+    { "name": "Nim", "aliases": ["nim", "nimrod"] },
+    { "name": "Nix", "aliases": ["nix"] },
+    { "name": "OCaml", "aliases": ["ocaml", "ml"] },
+    { "name": "Objective C", "aliases": ["objectivec", "mm", "objc", "obj-c", "obj-c++", "objective-c++"] },
+    { "name": "OpenGL Shading Language", "aliases": ["glsl"] },
+    { "name": "OpenSCAD", "aliases": ["openscad", "scad"] },
+    { "name": "Oracle Rules Language", "aliases": ["ruleslanguage"] },
+    { "name": "Oxygene", "aliases": ["oxygene"] },
+    { "name": "PF", "aliases": ["pf", "pf.conf"] },
+    { "name": "PHP", "aliases": ["php"] },
+    { "name": "Parser3", "aliases": ["parser3"] },
+    { "name": "Perl", "aliases": ["perl", "pl", "pm"] },
+    { "name": "Plaintext", "aliases": ["plaintext", "txt", "text"] },
+    { "name": "Pony", "aliases": ["pony"] },
+    { "name": "PostgreSQL & PL/pgSQL", "aliases": ["pgsql", "postgres", "postgresql"] },
+    { "name": "PowerShell", "aliases": ["powershell", "ps", "ps1"] },
+    { "name": "Processing", "aliases": ["processing"] },
+    { "name": "Prolog", "aliases": ["prolog"] },
+    { "name": "Properties", "aliases": ["properties"] },
+    { "name": "Protocol Buffers", "aliases": ["protobuf"] },
+    { "name": "Puppet", "aliases": ["puppet", "pp"] },
+    { "name": "Python", "aliases": ["python", "py", "gyp"] },
+    { "name": "Python profiler results", "aliases": ["profile"] },
+    { "name": "Python REPL", "aliases": ["python-repl", "pycon"] },
+    { "name": "Q", "aliases": ["k", "kdb"] },
+    { "name": "QML", "aliases": ["qml"] },
+    { "name": "R", "aliases": ["r"] },
+    { "name": "ReasonML", "aliases": ["reasonml", "re"] },
+    { "name": "RenderMan RIB", "aliases": ["rib"] },
+    { "name": "RenderMan RSL", "aliases": ["rsl"] },
+    { "name": "Roboconf", "aliases": ["graph", "instances"] },
+    { "name": "Ruby", "aliases": ["ruby", "rb", "gemspec", "podspec", "thor", "irb"] },
+    { "name": "Rust", "aliases": ["rust", "rs"] },
+    { "name": "SAS", "aliases": ["SAS", "sas"] },
+    { "name": "SCSS", "aliases": ["scss"] },
+    { "name": "SQL", "aliases": ["sql"] },
+    { "name": "STEP Part 21", "aliases": ["p21", "step", "stp"] },
+    { "name": "Scala", "aliases": ["scala"] },
+    { "name": "Scheme", "aliases": ["scheme"] },
+    { "name": "Scilab", "aliases": ["scilab", "sci"] },
+    { "name": "Shell", "aliases": ["shell", "console"] },
+    { "name": "Smali", "aliases": ["smali"] },
+    { "name": "Smalltalk", "aliases": ["smalltalk", "st"] },
+    { "name": "SML", "aliases": ["sml", "ml"] },
+    { "name": "Stan", "aliases": ["stan", "stanfuncs"] },
+    { "name": "Stata", "aliases": ["stata"] },
+    { "name": "Stylus", "aliases": ["stylus", "styl"] },
+    { "name": "SubUnit", "aliases": ["subunit"] },
+    { "name": "Swift", "aliases": ["swift"] },
+    { "name": "Tcl", "aliases": ["tcl", "tk"] },
+    { "name": "Test Anything Protocol", "aliases": ["tap"] },
+    { "name": "Thrift", "aliases": ["thrift"] },
+    { "name": "TP", "aliases": ["tp"] },
+    { "name": "Twig", "aliases": ["twig", "craftcms"] },
+    { "name": "TypeScript", "aliases": ["typescript", "ts"] },
+    { "name": "VB.Net", "aliases": ["vbnet", "vb"] },
+    { "name": "VBScript", "aliases": ["vbscript", "vbs"] },
+    { "name": "VHDL", "aliases": ["vhdl"] },
+    { "name": "Vala", "aliases": ["vala"] },
+    { "name": "Verilog", "aliases": ["verilog", "v"] },
+    { "name": "Vim Script", "aliases": ["vim"] },
+    { "name": "X++", "aliases": ["axapta", "x++"] },
+    { "name": "x86 Assembly", "aliases": ["x86asm"] },
+    { "name": "XL", "aliases": ["xl", "tao"] },
+    { "name": "XQuery", "aliases": ["xquery", "xpath", "xq"] },
+    { "name": "YAML", "aliases": ["yml", "yaml"] },
+    { "name": "Zephir", "aliases": ["zephir", "zep"] }
+  ]
+}

client/src/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './bootstrap.min.css';
+import './styles/style.scss';
 import { App } from './App';
 
 ReactDOM.render(

client/src/styles/_bootswatch.scss

@@ -0,0 +1,194 @@
+// Zephyr 5.1.1
+// Bootswatch
+
+// Variables
+$web-font-path: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap' !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+// Navbar
+.navbar {
+  font-size: $font-size-sm;
+  font-weight: 500;
+
+  .nav-item {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .navbar-nav {
+    .nav-link {
+      border-radius: $border-radius;
+    }
+  }
+}
+
+.navbar-dark {
+  .navbar-nav {
+    .nav-link {
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+
+      &.active {
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+    }
+  }
+}
+
+.navbar-light {
+  .navbar-nav {
+    .nav-link {
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.03);
+      }
+
+      &.active {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+    }
+  }
+}
+
+// Buttons
+// .btn-secondary,
+// .btn-light,
+// .btn-outline-secondary,
+// .btn-outline-light {
+//   color: $gray-900;
+
+//   &:disabled,
+//   &.disabled {
+//     border: 1px solid shade-color($secondary, 10%);
+//   }
+// }
+
+.btn-light,
+.btn-outline-light {
+  color: $gray-900;
+
+  &:disabled,
+  &.disabled {
+    border: 1px solid shade-color($secondary, 10%);
+  }
+}
+
+.btn-secondary,
+.btn-outline-secondary {
+  border-color: shade-color($secondary, 10%);
+
+  &:hover,
+  &:active {
+    background-color: shade-color($secondary, 10%);
+    border-color: shade-color($secondary, 10%);
+  }
+}
+
+.btn-light,
+.btn-outline-light {
+  border-color: shade-color($light, 10%);
+
+  &:hover,
+  &:active {
+    background-color: shade-color($light, 10%);
+    border-color: shade-color($light, 10%);
+  }
+}
+
+// Tables
+.table {
+  box-shadow: $box-shadow-lg;
+  font-size: $font-size-sm;
+}
+
+thead th {
+  text-transform: uppercase;
+  font-size: $font-size-sm;
+}
+
+// Forms
+.input-group-text {
+  box-shadow: $box-shadow;
+}
+
+// Navs
+.nav-tabs {
+  font-weight: 500;
+
+  .nav-link {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    border-width: 0 0 1px;
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    box-shadow: inset 0 -2px 0 $primary;
+  }
+}
+
+.nav-pills {
+  font-weight: 500;
+}
+
+.pagination {
+  font-size: $font-size-sm;
+  font-weight: 500;
+
+  .page-link {
+    box-shadow: $box-shadow;
+  }
+}
+
+.breadcrumb {
+  border: 1px solid $gray-300;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+  font-size: $font-size-sm;
+  font-weight: 500;
+
+  &-item {
+    padding: 1rem 0.5rem 1rem 0;
+  }
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+  padding-right: 1rem;
+}
+
+// Indicators
+.alert {
+  .btn-close {
+    color: inherit;
+  }
+}
+
+.badge {
+  &.bg-secondary,
+  &.bg-light {
+    color: $gray-900;
+  }
+}
+
+// Containers
+.list-group {
+  box-shadow: $box-shadow-lg;
+}
+
+.card {
+  box-shadow: $box-shadow-lg;
+
+  &-title {
+    color: inherit;
+  }
+}
+
+.modal-footer {
+  background-color: $gray-100;
+}
+
+.modal-content {
+  box-shadow: $box-shadow-lg;
+}

client/src/styles/_variables.scss

@@ -0,0 +1,104 @@
+$theme: 'zephyr';
+$white: #fff;
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$black: #000;
+$blue: #3459e6;
+$indigo: #6610f2;
+$purple: #6f42c1;
+$pink: #d63384;
+$red: #da292e;
+$orange: #f8765f;
+$yellow: #f4bd61;
+$green: #2fb380;
+$teal: #20c997;
+$cyan: #287bb5;
+$primary: $blue;
+$secondary: $white;
+$success: $green;
+$info: $cyan;
+$warning: $yellow;
+$danger: $red;
+$light: $gray-100;
+$dark: $gray-900;
+$min-contrast-ratio: 1.65;
+$enable-shadows: true;
+$body-color: $gray-200;
+$headings-color: $gray-100;
+$font-family-sans-serif: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI';
+$font-size-base: 1rem;
+$font-size-sm: $font-size-base * 0.875 !default;
+$box-shadow: 0 1px 2px rgba($black, 0.05);
+$box-shadow-lg: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+$table-cell-padding-y: 1rem;
+$table-cell-padding-x: 1rem;
+$table-cell-padding-y-sm: 0.5rem;
+$table-cell-padding-x-sm: 0.5rem;
+$table-th-font-weight: 500;
+$input-btn-padding-y: 0.5rem;
+$input-btn-padding-x: 1rem;
+$input-btn-font-size: $font-size-sm;
+$btn-font-weight: 500;
+$btn-box-shadow: $box-shadow;
+$btn-focus-box-shadow: $box-shadow;
+$btn-active-box-shadow: $box-shadow;
+$form-label-font-weight: 500;
+$input-box-shadow: $box-shadow;
+$input-group-addon-bg: $gray-100;
+$nav-link-color: $body-color;
+$nav-link-hover-color: $body-color;
+$nav-tabs-border-radius: 0;
+$nav-tabs-link-active-color: $primary;
+$navbar-padding-y: 0.85rem;
+$navbar-nav-link-padding-x: 0.75rem;
+$navbar-dark-color: $white;
+$navbar-dark-hover-color: $white;
+$navbar-dark-active-color: $white;
+$navbar-light-color: $black;
+$navbar-light-hover-color: $black;
+$navbar-light-active-color: $black;
+$dropdown-font-size: $font-size-sm;
+$dropdown-border-color: $gray-300;
+$dropdown-divider-bg: $gray-200;
+$dropdown-link-hover-color: $white;
+$dropdown-link-hover-bg: $primary;
+$dropdown-item-padding-y: 0.5rem;
+$dropdown-item-padding-x: 1rem;
+$pagination-padding-y: 0.5rem;
+$pagination-padding-x: 1rem;
+$pagination-color: $light;
+$pagination-focus-color: $pagination-color;
+$pagination-hover-color: $pagination-color;
+$pagination-hover-bg: $gray-100;
+$card-spacer-x: 1.5rem;
+$card-cap-padding-y: 1rem;
+$card-cap-padding-x: 1.5rem;
+$toast-header-color: $headings-color;
+$modal-content-border-color: $gray-700;
+$modal-header-border-width: 0;
+$list-group-item-padding-y: 1rem;
+$list-group-item-padding-x: 1.5rem;
+$breadcrumb-padding-x: 1rem;
+$breadcrumb-divider: quote('>');
+$body-bg: $gray-800;
+$card-color: $gray-200;
+$card-bg: $dark;
+$list-group-bg: $dark;
+$pagination-bg: $dark;
+$pagination-border-color: $gray-800;
+$breadcrumb-bg: $dark;
+$breadcrumb-divider-color: $light;
+$breadcrumb-active-color: $light;
+$input-bg: $dark;
+$input-color: $light;
+$card-border-width: 0;
+$modal-content-bg: $dark;
+$input-border-color: $gray-700;
+$input-disabled-bg: $dark;

client/src/styles/style.scss

@@ -0,0 +1,7 @@
+@import './variables';
+@import '../../node_modules/bootstrap/scss/bootstrap.scss';
+@import './bootswatch';
+
+.cursor-pointer:hover {
+  cursor: pointer;
+}

client/src/utils/badgeColor.ts

@@ -22,7 +22,7 @@ export const badgeColor = (language: string): Color => {
       color = 'danger';
       break;
     case 5:
-      color = 'dark';
+      color = 'light';
       break;
   }
 

client/src/utils/findLanguage.ts

@@ -0,0 +1,6 @@
+import { aliases } from '../data/aliases_raw.json';
+
+export const findLanguage = (language: string): boolean => {
+  const search = language.toLowerCase();
+  return aliases.some(alias => alias === search);
+};

client/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './dateParser';
 export * from './badgeColor';
+export * from './findLanguage';