Initial commit.

.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es2020": true,
+    "node": true
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier", "prettier/react"],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 11,
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off"
+  },
+  "globals": {
+    "React": "writable"
+  }
+}

.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+.idea
+*.iml
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.development.local
+.env.test.local
+.env.production.local

.prettierignore

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

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

.stylelintrc.json

@@ -0,0 +1,17 @@
+{
+  "extends": [
+    "stylelint-config-recommended",
+    "stylelint-config-css-modules",
+    "stylelint-config-prettier"
+  ],
+  "rules": {
+    "no-descending-specificity": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global", "horizontal", "vertical"]
+      }
+    ]
+  },
+  "ignoreFiles": ["**/*.js"]
+}

components/footer.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Footer() {
+  return <footer className="container mt-5 mb-5">&copy; Mike Cao</footer>;
+}

components/header.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Github from 'assets/github.svg';
+
+export default function Header() {
+  return (
+    <header className="container">
+      <h1>umami</h1>
+      <a href="https://github.com/mikecao/umami"><Github className="icon" /></a>
+    </header>
+  );
+}

components/intro.js

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react';
+import { useTransition, animated } from 'react-spring';
+import Logo from 'assets/logo.svg';
+
+const words = [
+  { text: 'simple', color: '#2680eb' },
+  { text: 'fast', color: '#44b556' },
+  { text: 'beautiful', color: '#6767ec' },
+  { text: 'free', color: '#d83790' },
+  { text: 'open-source', color: '#9256d9' },
+];
+
+export default function Intro() {
+  const [word, setWord] = useState(words[0]);
+  const transitions = useTransition([word], item => item.text, {
+    from: item => ({ color: item.color, opacity: 0, transform: 'translate3d(0,-40px,0)' }),
+    enter: item => ({ color: item.color, opacity: 1, transform: 'translate3d(0,0px,0)' }),
+    leave: item => ({ color: item.color, opacity: 0, transform: 'translate3d(0,40px,0)' }),
+  });
+
+  useEffect(() => {
+    let timeout = setTimeout(() => {
+      const index = words.indexOf(word);
+      setWord(index < words.length - 1 ? words[index + 1] : words[0]);
+    }, 2000);
+
+    return () => {
+      clearTimeout(timeout);
+    }
+  }, [word]);
+
+  return (
+    <div className="intro">
+      <div className="row justify-content-center">
+        <Logo className="logo" />
+      </div>
+      <h1 className="row title">
+        <div className="col-12 col-md-6">
+          <div className="row justify-content-center justify-content-md-end">
+            umami<span>is</span>
+          </div>
+        </div>
+        <div className="col-12 col-md-6">
+          {transitions.map(({ item, props, key }) => (
+            <animated.div className="animated-word pl-5 pl-md-0" key={key} style={props}>
+              {item.text}
+            </animated.div>
+          ))}
+        </div>
+      </h1>
+      <h2 className="row justify-content-center">website analytics made easy</h2>
+      <div className="row">
+        <div className="col">
+          <img src="/intro.png" />
+        </div>
+      </div>
+    </div>
+  );
+}

components/layout.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Head from 'next/head';
+import Header from './header';
+import Footer from './footer';
+
+export default function Layout({ title, children }) {
+  return (
+    <>
+      <Head>
+        <title>umami{title && ` - ${title}`}</title>
+        <link rel="icon" href="/favicon.ico" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;900&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <Header />
+      <main className="container">{children}</main>
+      <Footer />
+    </>
+  );
+}

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}

next.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      issuer: {
+        test: /\.js$/,
+      },
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
+};

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "umami.is",
+  "version": "1.0.0",
+  "description": "umami.is website",
+  "author": "Mike Cao <mike@mikecao.com>",
+  "license": "MIT",
+  "homepage": "https://umami.is",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "lint-staged": {
+    "**/*.js": [
+      "prettier --write"
+    ],
+    "**/*.css": [
+      "stylelint --fix",
+      "prettier --write"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "next": "^9.5.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-spring": "^8.0.27"
+  },
+  "devDependencies": {
+    "@svgr/webpack": "^5.4.0",
+    "cross-env": "^7.0.2",
+    "eslint": "^7.6.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.20.5",
+    "eslint-plugin-react-hooks": "^4.0.4",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.9",
+    "postcss-flexbugs-fixes": "^4.2.1",
+    "postcss-import": "^12.0.1",
+    "postcss-preset-env": "^6.7.0",
+    "prettier": "^2.0.5",
+    "prettier-eslint": "^11.0.0",
+    "stylelint": "^13.6.0",
+    "stylelint-config-css-modules": "^2.2.0",
+    "stylelint-config-prettier": "^8.0.1",
+    "stylelint-config-recommended": "^3.0.0"
+  }
+}

pages/_app.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import 'styles/bootstrap-grid.css';
+import 'styles/index.css';
+
+export default function App({ Component, pageProps }) {
+  return (
+      <Component {...pageProps} />
+  );
+}

pages/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Layout from 'components/layout';
+import Intro from 'components/intro';
+
+export default function DefaultPage() {
+  return (
+    <Layout>
+      <Intro />
+    </Layout>
+  );
+}

postcss.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  plugins: [
+    'postcss-flexbugs-fixes',
+    [
+      'postcss-preset-env',
+      {
+        autoprefixer: {
+          flexbox: 'no-2009',
+        },
+        stage: 3,
+        features: {
+          'custom-properties': false,
+        },
+      },
+    ],
+  ],
+};