initial

.gitignore

@@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# yarn
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100
+}

.vite/deps_temp_1dec44d9/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

.yarnrc.yml

@@ -0,0 +1,6 @@
+nodeLinker: node-modules
+
+plugins:
+  - checksum: 5e73a1acbb9741fce1e8335e243c9480ea2107b9b4b65ed7643785ddea9e3019aee254a92a853b1cd71023b16fff5b7d3afd5256fe57cd35a54f8785b8c30281
+    path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs
+    spec: "https://go.mskelton.dev/yarn-outdated/v4"

README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

eslint.config.js

@@ -0,0 +1,46 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks, { configs, rules } from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import sort from 'eslint-plugin-sort';
+import tseslint from 'typescript-eslint';
+import react from 'eslint-plugin-react';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.strictTypeChecked,
+      ...tseslint.configs.stylisticTypeChecked,
+    ],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      sort,
+    },
+    rules: {
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      ...sort.configs.recommended.rules,
+      'react/no-unknown-property': ['error', { ignore: ['css'] }] /* fix emotion css */,
+      'react/no-unescaped-entities': 'off' /* temp - make text with ' ' readable */,
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+      'sort/type-properties': ['error'],
+      'sort/string-enums': ['error'],
+      'sort/string-unions': ['error'],
+    },
+  }
+);

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Home: Anna Vo - Frontend Developer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "gio",
+  "packageManager": "[email protected]",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "dev": "vite",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "ts": "tsc -b"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.11.1",
+    "@types/gh-pages": "^6",
+    "@types/react": "^18.3.10",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "eslint": "^9.11.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.12",
+    "eslint-plugin-sort": "^3.0.2",
+    "gh-pages": "^6.2.0",
+    "globals": "^15.9.0",
+    "prettier": "^3.3.3",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.10.0",
+    "vite": "^5.4.9"
+  }
+}

src/App.tsx

@@ -0,0 +1,51 @@
+import { Global } from '@emotion/react';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { About } from './routes/About';
+import { Error } from './routes/Error';
+import { Newness } from './routes/New';
+import { Root } from './routes/Root';
+import { Unknown } from './routes/Unknown';
+import { baseStyle } from './styles/Base';
+import { elementStyle } from './styles/Element';
+import { themeStyle } from './styles/Theme';
+
+const router = createBrowserRouter([
+  {
+    children: [
+      {
+        element: <About />,
+        index: true,
+      },
+      {
+        element: <About />,
+        path: '/about',
+      },
+      {
+        element: <Newness />,
+        path: '/blog',
+      },
+      {
+        element: <Error />,
+        path: '/error',
+      },
+      {
+        element: <Unknown />,
+        path: '*',
+      },
+    ],
+    element: <Root />,
+    errorElement: <Error />,
+    path: '/',
+  },
+]);
+
+function App() {
+  return (
+    <>
+      <Global styles={[baseStyle, themeStyle, elementStyle]} />
+      <RouterProvider router={router} />;
+    </>
+  );
+}
+
+export default App;

src/core/Anchor.tsx

@@ -0,0 +1,83 @@
+import { css } from '@emotion/react';
+import React, { ElementType, forwardRef, ReactNode, Ref } from 'react';
+import { focusVisibleMixin } from '../styles/Mixins';
+import { IntrinsicAttributes } from '../types/polymorphic';
+
+const anchorMixin = css`
+  ${focusVisibleMixin};  
+  border-radius: var(--av-border-radius-xs);
+  color: var(--av-color-link-fg);
+  font-weight: 600;
+  margin-inline: 0.2em; /* give links a tiny bit of breathing room for visibility and focus */
+  text-decoration: underline;
+  text-decoration-thickness: 1.2px;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--av-color-primary-border);
+
+  &:hover,
+  &:focus {
+    color: var(--av-color-link-fg-hover);
+    text-decoration-color: var(--av-color-link-fg-hover);
+  }
+
+  &:active {
+    color: var(--av-color-link-fg-active);
+    text-decoration-color: var(--av-color-link-fg-active);
+  }
+
+  &:visited {
+    color: var(--av-color-link-fg-dimmed);
+
+    :hover,
+    :focus {
+      color: var(--av-color-link-fg-dimmed-hover);
+      text-decoration-color: var(--av-color-link-fg-dimmed-hover);
+    }
+
+    :active {
+      color: var(--av-color-link-fg-dimmed-active);
+      text-decoration-color: var(--av-color-link-fg-dimmed-active);
+    }
+`;
+
+const anchorPrimaryStyle = css`
+  ${anchorMixin};
+`;
+
+/**
+ * TODO: add secondary variant
+ */
+const anchorSecondaryStyle = css``;
+
+export function AnchorDivider() {
+  return <span css={{ paddingInline: 'var(--av-space-2xs)' }}> | </span>;
+}
+
+export const Anchor = forwardRef(function AnchorWithRef(
+  { as: Component = 'a', children, href, target, variant = 'primary', ...props }: AnchorOwnProps,
+  ref: Ref<Element>
+) {
+  return (
+    <Component
+      ref={ref}
+      css={variant === 'primary' ? anchorPrimaryStyle : anchorSecondaryStyle}
+      href={href}
+      target={target}
+      {...(target === '_blank' && { rel: 'noreferrer' })}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+}) as <E extends ElementType = 'button'>(props: AnchorProps<E>) => React.JSX.Element;
+
+interface AnchorOwnProps<E extends ElementType = ElementType> {
+  as?: E;
+  children: ReactNode;
+  href?: string;
+  target?: '_blank';
+  variant?: 'primary' | 'secondary';
+}
+
+type AnchorProps<E extends ElementType> = AnchorOwnProps<E> &
+  Omit<IntrinsicAttributes<E>, keyof AnchorOwnProps>;