feat(website): init

website/src/utils/browser-utils.js

@@ -0,0 +1,15 @@
+export function isOldIE() {
+  if (typeof navigator === 'undefined') {
+    return false;
+  }
+
+  // https://stackoverflow.com/a/22242528
+  return (
+    navigator.userAgent.indexOf('MSIE') !== -1 ||
+    navigator.appVersion.indexOf('Trident/') > -1
+  );
+}
+
+export default {
+  isOldIE,
+};

website/src/utils/css-utils.js

@@ -0,0 +1,51 @@
+import { css } from '@emotion/core';
+
+export const breakpoints = {
+  s: 460,
+  m: 768,
+  l: 1024,
+  xl: 1280,
+};
+
+export const device = {
+  phone: `(min-width: ${breakpoints.s}px)`,
+  tablet: `(min-width: ${breakpoints.m}px)`,
+  desktop: `(min-width: ${breakpoints.l}px)`,
+  desktopL: `(min-width: ${breakpoints.xl}px)`,
+};
+
+// https://github.com/styled-components/styled-components/blob/master/packages/styled-components/docs/tips-and-tricks.md#more-powerful-example
+const getMediaQuery = (size) => {
+  return (...styleDefinition) => css`
+    @media (min-width: ${size}px) {
+      ${css(...styleDefinition)}
+    }
+  `;
+};
+
+export const media = {
+  s: getMediaQuery(breakpoints.s),
+  m: getMediaQuery(breakpoints.m),
+  l: getMediaQuery(breakpoints.l),
+  xl: getMediaQuery(breakpoints.xl),
+};
+
+export const rgba = (hex, alpha) => {
+  const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
+  return `rgba(${r},${g},${b},${alpha})`;
+};
+
+export const px = (val) => `${val}px`;
+
+export const getThemeColor = (colorName) => (props) =>
+  props.theme.colors[colorName];
+
+export const getThemeSpacePx = (spaceIndex) => (props) =>
+  props.theme.spacePx[spaceIndex];
+
+export default {
+  rgba,
+  px,
+  getThemeColor,
+  getThemeSpacePx,
+};

website/src/utils/project-utils.js

@@ -0,0 +1,33 @@
+export const parseProjectDate = (dateString) => {
+  const parts = dateString.split('/');
+  return new Date(+parts[0], +parts[1] - 1, +parts[2]);
+};
+
+export const groupProjectsByYear = (projects) => {
+  return projects.reduce((grouped, project) => {
+    const year = project.date.getFullYear();
+    grouped[year] = grouped.hasOwnProperty(year)
+      ? grouped[year].concat([project])
+      : [project];
+    return grouped;
+  }, {});
+};
+
+export const getMainCategory = (categoryArray = []) => {
+  const matchingCategory = mainTags.find((mc) =>
+    categoryArray.find((cat) => mc.id === cat)
+  );
+
+  return matchingCategory ? matchingCategory.id : null;
+};
+
+export const shuffleProjects = (projects) => {
+  return projects.sort((a, b) => Math.random() - 0.5);
+};
+
+export default {
+  parseProjectDate,
+  groupProjectsByYear,
+  getMainCategory,
+  shuffleProjects,
+};