sort tags

package.json

@@ -21,6 +21,7 @@
     "github-calendar": "^2.2.1",
     "lodash.get": "^4.4.2",
     "lodash.groupby": "^4.6.0",
+    "lodash.sortby": "^4.7.0",
     "netlify-cms-app": "^2.12.19",
     "prism-react-renderer": "^1.1.1",
     "prop-types": "^15.7.2",

src/components/blogs/BlogEntry.tsx

@@ -6,6 +6,7 @@ import { Button } from '~/components/ui/controls/Button';
 import { Card } from '~/components/ui/containers/Card';
 import React from 'react';
 import { Link } from 'gatsby';
+import sort from 'lodash.sortby';
 import { ColorBadge } from '~/components/ui/misc/ColorBadge';
 import { Groups } from '~/components/ui/groups/Groups';
 
@@ -30,7 +31,7 @@ export function BlogEntry({ blog }: { blog: Blog }) {
 					</time>
 				</header>
 				<Groups size={2} className={`mb-4 mt-2`}>
-					{blog.tags.map((tag) => (
+					{sort(blog.tags).map((tag) => (
 						<Link to={`/tags/${tag.toLowerCase()}`} key={tag}>
 							<ColorBadge text={tag} />
 						</Link>

src/components/projects/ProjectMain.tsx

@@ -8,6 +8,7 @@ import userProfile from '~/profile';
 import { Groups } from '~/components/ui/groups/Groups';
 import { Icon } from '~/components/ui/icons/Icon';
 import { ColorBadge } from '~/components/ui/misc/ColorBadge';
+import sort from 'lodash.sortby';
 
 export function ProjectMain({
 	projects,
@@ -53,7 +54,7 @@ export function ProjectMain({
 								</div>
 								<p tw={'flex-grow'}>{project.description}</p>
 								<Groups size={2} className={`mt-3`}>
-									{project.tags.map((tag) => (
+									{sort(project.tags).map((tag) => (
 										<ColorBadge key={tag} text={tag} className={'mb-2'} />
 									))}
 								</Groups>

src/templates/BlogTemplate.tsx

@@ -15,6 +15,7 @@ import { Groups } from '~/components/ui/groups/Groups';
 import { SEO } from '~/components/common/SEO';
 import { DisqusComments } from '~/components/blogs/DisqusComments';
 import { flattenBlogNode } from '~/types/blog';
+import sort from 'lodash.sortby';
 
 export const query = graphql`
 	query($slug: String!) {
@@ -78,7 +79,7 @@ const BlogTemplate = ({ data: { mdx: node } }) => {
 						</time>
 					</header>
 					<Groups size={2} className={`mb-6 mt-2`}>
-						{blog.tags.map((tag) => (
+						{sort(blog.tags).map((tag) => (
 							<Link to={`/tags/${tag.toLowerCase()}`} key={tag}>
 								<ColorBadge text={tag} />
 							</Link>

src/utils/colors/index.ts

@@ -4,13 +4,15 @@ export function getRandomizedColor(text: string) {
 		'red',
 		'green',
 		'teal',
+		'indigo',
+		'pink',
 		'orange',
 		'yellow',
 		'purple',
 	];
 	let total = 0;
-	for (const ch of text) {
-		total += ch.charCodeAt(0);
-	}
+	Array.from(text).forEach((ch, index) => {
+		total += ch.charCodeAt(0) * Math.pow(2, index);
+	});
 	return randomColors[total % randomColors.length];
 }