diff --git a/.firebaserc b/.firebaserc
index 2df378e..3b8c33b 100644
--- a/.firebaserc
+++ b/.firebaserc
@@ -10,6 +10,9 @@
],
"blog": [
"developomp-site-blog"
+ ],
+ "style": [
+ "developomp-site-style"
]
}
}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index ccbbc94..705799d 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -5,6 +5,8 @@
"naumovs.color-highlight",
"streetsidesoftware.code-spell-checker",
"aaron-bond.better-comments",
- "styled-components.vscode-styled-components"
+ "styled-components.vscode-styled-components",
+ "bradlc.vscode-tailwindcss",
+ "unifiedjs.vscode-mdx"
]
}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 46e3f67..e3bd12b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -37,6 +37,10 @@
"[svg]": {
"editor.defaultFormatter": "jock.svg"
},
+ // prevent tailwind-related warnings
+ "css.lint.unknownAtRules": "ignore",
+ "less.lint.unknownAtRules": "ignore",
+ "scss.lint.unknownAtRules": "ignore",
// for .ejs files
"html.validate.styles": false,
"color-highlight.markerType": "outline",
diff --git a/README.md b/README.md
index 915d21f..33f31f7 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,9 @@ A monorepo ([Turborepo](https://turbo.build)) of my websites for blogging, portf
## Project Structure
- `aps`
- - `apps/docs` - [Storybook](https://storybook.js.org) documentation of React components
+ - `main` - https://developomp.com
+ - `blog` - https://blog.developomp.com
+ - `style` - https://style.developomp.com
- `packages` - packages prefixed with `@developomp-site/`
- `components-react` - ReactJS components
- `eslint-config` - ESLint configuration files
diff --git a/apps/docs/package.json b/apps/docs/package.json
deleted file mode 100644
index 0255ebd..0000000
--- a/apps/docs/package.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
- "name": "@developomp-site/docs",
- "version": "0.0.0",
- "private": true,
- "scripts": {
- "dev": "start-storybook -p 6006",
- "build": "build-storybook --docs",
- "preview-storybook": "serve storybook-static",
- "clean": "rm -rf .turbo && rm -rf node_modules"
- },
- "dependencies": {
- "@developomp-site/components-react": "workspace:0.0.0",
- "react": "^18.2.0",
- "react-dom": "^18.2.0"
- },
- "devDependencies": {
- "@developomp-site/eslint-config": "workspace:0.0.0",
- "@developomp-site/tsconfig": "workspace:0.0.0",
- "@storybook/addon-actions": "^6.5.14",
- "@storybook/addon-docs": "^6.5.14",
- "@storybook/addon-essentials": "^6.5.14",
- "@storybook/addon-links": "^6.5.14",
- "@storybook/builder-vite": "^0.1.41",
- "@storybook/react": "^6.5.14",
- "@vitejs/plugin-react": "^1.3.2",
- "serve": "^13.0.4",
- "typescript": "^4.9.3",
- "vite": "^2.9.15"
- }
-}
diff --git a/apps/docs/.eslintrc.js b/apps/style/.eslintrc.js
similarity index 100%
rename from apps/docs/.eslintrc.js
rename to apps/style/.eslintrc.js
diff --git a/apps/docs/.storybook/main.js b/apps/style/.storybook/main.js
similarity index 100%
rename from apps/docs/.storybook/main.js
rename to apps/style/.storybook/main.js
diff --git a/apps/style/package.json b/apps/style/package.json
new file mode 100644
index 0000000..85d07aa
--- /dev/null
+++ b/apps/style/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "@developomp-site/style",
+ "version": "0.0.0",
+ "private": true,
+ "scripts": {
+ "dev": "start-storybook -p 6006",
+ "build": "build-storybook --docs",
+ "preview-storybook": "serve storybook-static",
+ "clean": "rm -rf .turbo && rm -rf node_modules"
+ },
+ "dependencies": {
+ "@developomp-site/components-react": "workspace:*",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@developomp-site/eslint-config": "workspace:*",
+ "@developomp-site/tsconfig": "workspace:*",
+ "@developomp-site/utils": "workspace:*",
+ "@storybook/addon-actions": "^6.5.14",
+ "@storybook/addon-docs": "^6.5.14",
+ "@storybook/addon-essentials": "^6.5.14",
+ "@storybook/addon-links": "^6.5.14",
+ "@storybook/builder-vite": "^0.1.41",
+ "@storybook/react": "^6.5.14",
+ "@vitejs/plugin-react": "^1.3.2",
+ "serve": "^13.0.4",
+ "typescript": "^4.9.4",
+ "vite": "^2.9.15"
+ }
+}
diff --git a/apps/docs/stories/button.stories.mdx b/apps/style/stories/button.stories.mdx
similarity index 100%
rename from apps/docs/stories/button.stories.mdx
rename to apps/style/stories/button.stories.mdx
diff --git a/apps/style/stories/docs/1.Intro.stories.mdx b/apps/style/stories/docs/1.Intro.stories.mdx
new file mode 100644
index 0000000..ad639e9
--- /dev/null
+++ b/apps/style/stories/docs/1.Intro.stories.mdx
@@ -0,0 +1,25 @@
+import { Meta } from "@storybook/addon-docs"
+
+
+
+# Introduction
+
+Hello! Welcome to developomp's design system!
+
+## What is this?
+
+This is a [Storybook](https://storybook.js.org) of style guidelines and
+reference component implementations made in [ReactJS](https://reactjs.org) made
+primarily for websites under the [developomp.com](https://developomp.com)
+domain.
+
+## What is "developomp style"?
+
+The developomp style is the "theme" used in my design system, and is a set of
+visual elements such as colors, font styles, and spacing. These elements are
+then combined appropriately to create a coherent look across my websites.
+
+## Source Code
+
+You can find all the source code on
+[GitHub](https://github.com/developomp/developomp-site)
diff --git a/apps/style/stories/docs/2.Colors.stories.mdx b/apps/style/stories/docs/2.Colors.stories.mdx
new file mode 100644
index 0000000..319f30b
--- /dev/null
+++ b/apps/style/stories/docs/2.Colors.stories.mdx
@@ -0,0 +1,58 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs"
+import darkTheme from "@developomp-site/theme/dark"
+
+
+
+# Colors
+
+## Layers
+
+```
+┌────────────────────┐
+│ Header │
+╞════════════════════╡
+│ │
+│ ┌────────────────┐ │ header ━━━
+│ │ │ │ interactives ━━ ━
+│ │ [Interactives] │ │ ---> contents ━ ━━━ ━━
+│ │ │ │ ---> cards ━━━━━━━━━━━━━━━━━
+│ │ │ │ footer ━━━━
+│ │ Contents │ │ background ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+│ │ │ │
+│ └────────────────┘ │
+│ │
+├────────────────────┤
+│ Footer │
+└────────────────────┘
+```
+
+## Dark Theme
+
+
+
+
+
+
+
+## Light Theme
diff --git a/apps/style/stories/docs/3.Font.stories.mdx b/apps/style/stories/docs/3.Font.stories.mdx
new file mode 100644
index 0000000..d013c70
--- /dev/null
+++ b/apps/style/stories/docs/3.Font.stories.mdx
@@ -0,0 +1,5 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs"
+
+
+
+# Fonts
diff --git a/firebase.json b/firebase.json
index a8331f3..d912ba6 100644
--- a/firebase.json
+++ b/firebase.json
@@ -23,6 +23,18 @@
}
],
"ignore": ["**/.*"]
+ },
+ {
+ "target": "style",
+ "cleanUrls": true,
+ "public": "apps/style/storybook-static",
+ "rewrites": [
+ {
+ "source": "**",
+ "destination": "/index.html"
+ }
+ ],
+ "ignore": ["**/.*"]
}
]
}
diff --git a/packages/tailwind-config/tailwind.config.js b/packages/tailwind-config/tailwind.config.js
index a9e1c6b..33f6413 100644
--- a/packages/tailwind-config/tailwind.config.js
+++ b/packages/tailwind-config/tailwind.config.js
@@ -1,5 +1,3 @@
-const colors = require("tailwindcss/colors")
-
module.exports = {
content: [
// app content
@@ -7,13 +5,4 @@ module.exports = {
// include packages if not transpiling
// "../../packages/**/*.{js,ts,jsx,tsx}",
],
- theme: {
- extend: {
- colors: {
- brandblue: colors.blue[500],
- brandred: colors.red[500],
- },
- },
- },
- plugins: [],
}
diff --git a/packages/theme/dark/codeblock.css b/packages/theme/dark/codeblock.css
new file mode 100644
index 0000000..578015d
--- /dev/null
+++ b/packages/theme/dark/codeblock.css
@@ -0,0 +1,96 @@
+/* from highlight.js/styles/atom-one-dark-reasonable.css */
+
+pre code.hljs {
+ display: block;
+ overflow-x: auto;
+ padding: 1em;
+}
+code.hljs {
+ padding: 3px 5px;
+}
+.hljs {
+ color: #abb2bf;
+ background: #282c34;
+}
+.hljs-keyword,
+.hljs-operator,
+.hljs-pattern-match {
+ color: #f92672;
+}
+.hljs-function,
+.hljs-pattern-match .hljs-constructor {
+ color: #61aeee;
+}
+.hljs-function .hljs-params {
+ color: #a6e22e;
+}
+.hljs-function .hljs-params .hljs-typing {
+ color: #fd971f;
+}
+.hljs-module-access .hljs-module {
+ color: #7e57c2;
+}
+.hljs-constructor {
+ color: #e2b93d;
+}
+.hljs-constructor .hljs-string {
+ color: #9ccc65;
+}
+.hljs-comment,
+.hljs-quote {
+ color: #b18eb1;
+ font-style: italic;
+}
+.hljs-doctag,
+.hljs-formula {
+ color: #c678dd;
+}
+.hljs-deletion,
+.hljs-name,
+.hljs-section,
+.hljs-selector-tag,
+.hljs-subst {
+ color: #e06c75;
+}
+.hljs-literal {
+ color: #56b6c2;
+}
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+ color: #98c379;
+}
+.hljs-built_in,
+.hljs-class .hljs-title,
+.hljs-title.class_ {
+ color: #e6c07b;
+}
+.hljs-attr,
+.hljs-number,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-pseudo,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable {
+ color: #d19a66;
+}
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-symbol,
+.hljs-title {
+ color: #61aeee;
+}
+.hljs-emphasis {
+ font-style: italic;
+}
+.hljs-strong {
+ font-weight: 700;
+}
+.hljs-link {
+ text-decoration: underline;
+}
diff --git a/packages/theme/dark/index.ts b/packages/theme/dark/index.ts
new file mode 100644
index 0000000..a12d778
--- /dev/null
+++ b/packages/theme/dark/index.ts
@@ -0,0 +1,62 @@
+const theme: Theme = {
+ font: {
+ sansSerif: "'Noto Sans KR', sans-serif", // https://fonts.google.com/noto/specimen/Noto+Sans+KR
+ monospace: "'Source Code Pro', monospace",
+ },
+
+ maxDisplayWidth: {
+ mobile: "1024px", // max-w-screen-lg
+ desktop: "1536px", // max-w-screen-2xl
+ },
+
+ component: {
+ scrollbar: {
+ width: "8px", // w-2
+ borderRadius: "4px", // rounded
+ },
+
+ header: {
+ color: {
+ background: "#202225", // custom
+ hover: "#3f3f46", // zinc-700
+ text: "#d4d4d8", // zinc-300
+ },
+ height: "16px", // h-4
+ },
+
+ scrollProgressBar: {
+ color: {
+ background: "#52525b", // zinc 600
+ foreground: "#d4d4d8", // zinc-300
+ },
+ },
+
+ card: {
+ color: {
+ background: "#2f3136",
+ },
+ },
+
+ footer: {
+ color: {
+ background: "",
+ text: "",
+ },
+ },
+
+ ui: {
+ color: {
+ background: {
+ interactive: "",
+ },
+ text: {
+ on1: "",
+ link: "#66AAFF",
+ linkActive: "#4592F7",
+ },
+ },
+ },
+ },
+}
+
+export default theme
diff --git a/packages/theme/light/codeblock.css b/packages/theme/light/codeblock.css
new file mode 100644
index 0000000..8144467
--- /dev/null
+++ b/packages/theme/light/codeblock.css
@@ -0,0 +1,79 @@
+/* from highlight.js/styles/default.css */
+
+pre code.hljs {
+ display: block;
+ overflow-x: auto;
+ padding: 1em;
+}
+code.hljs {
+ padding: 3px 5px;
+}
+.hljs {
+ background: #f0f0f0;
+ color: #444;
+}
+.hljs-comment {
+ color: #888;
+}
+.hljs-punctuation,
+.hljs-tag {
+ color: #444a;
+}
+.hljs-tag .hljs-attr,
+.hljs-tag .hljs-name {
+ color: #444;
+}
+.hljs-attribute,
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-name,
+.hljs-selector-tag {
+ font-weight: 700;
+}
+.hljs-deletion,
+.hljs-number,
+.hljs-quote,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-string,
+.hljs-template-tag,
+.hljs-type {
+ color: #800;
+}
+.hljs-section,
+.hljs-title {
+ color: #800;
+ font-weight: 700;
+}
+.hljs-link,
+.hljs-operator,
+.hljs-regexp,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-symbol,
+.hljs-template-variable,
+.hljs-variable {
+ color: #bc6060;
+}
+.hljs-literal {
+ color: #78a960;
+}
+.hljs-addition,
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code {
+ color: #397300;
+}
+.hljs-meta {
+ color: #1f7199;
+}
+.hljs-meta .hljs-string {
+ color: #4d99bf;
+}
+.hljs-emphasis {
+ font-style: italic;
+}
+.hljs-strong {
+ font-weight: 700;
+}
diff --git a/packages/theme/light/index.ts b/packages/theme/light/index.ts
new file mode 100644
index 0000000..a2ffcc7
--- /dev/null
+++ b/packages/theme/light/index.ts
@@ -0,0 +1,5 @@
+import BaseTheme from "../dark"
+
+const theme: Theme = { ...BaseTheme }
+
+export default theme
diff --git a/packages/theme/package.json b/packages/theme/package.json
index d06d1e1..92706dd 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -2,5 +2,8 @@
"name": "@developomp-site/theme",
"version": "0.0.0",
"private": true,
- "license": "MIT"
+ "license": "MIT",
+ "devDependencies": {
+ "tailwindcss": "^3.1.4"
+ }
}
diff --git a/packages/theme/types/index.d.ts b/packages/theme/types/index.d.ts
new file mode 100644
index 0000000..e285e70
--- /dev/null
+++ b/packages/theme/types/index.d.ts
@@ -0,0 +1,60 @@
+interface Theme extends Object {
+ font: {
+ sansSerif: string
+ monospace: string
+ }
+
+ maxDisplayWidth: {
+ mobile: string
+ desktop: string
+ }
+
+ component: {
+ scrollbar: {
+ width: string
+ borderRadius: string
+ }
+
+ header: {
+ color: {
+ background: string
+ hover: string
+ text: string
+ }
+ height: string
+ }
+
+ scrollProgressBar: {
+ color: {
+ background: string
+ foreground: string
+ }
+ }
+
+ card: {
+ color: {
+ background: string
+ }
+ }
+
+ footer: {
+ color: {
+ background: string
+ text: string
+ }
+ }
+
+ ui: {
+ color: {
+ background: {
+ interactive: string
+ }
+ text: {
+ on1: string
+ link: string
+ linkActive: string
+ }
+ }
+ }
+ }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7d63bee..9bce212 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -145,11 +145,12 @@ importers:
tslint-config-prettier: 1.18.0
typescript: 4.9.4
- apps/docs:
+ apps/style:
specifiers:
- '@developomp-site/components-react': workspace:0.0.0
- '@developomp-site/eslint-config': workspace:0.0.0
- '@developomp-site/tsconfig': workspace:0.0.0
+ '@developomp-site/components-react': workspace:*
+ '@developomp-site/eslint-config': workspace:*
+ '@developomp-site/tsconfig': workspace:*
+ '@developomp-site/utils': workspace:*
'@storybook/addon-actions': ^6.5.14
'@storybook/addon-docs': ^6.5.14
'@storybook/addon-essentials': ^6.5.14
@@ -160,7 +161,7 @@ importers:
react: ^18.2.0
react-dom: ^18.2.0
serve: ^13.0.4
- typescript: ^4.9.3
+ typescript: ^4.9.4
vite: ^2.9.15
dependencies:
'@developomp-site/components-react': link:../../packages/components-react
@@ -169,6 +170,7 @@ importers:
devDependencies:
'@developomp-site/eslint-config': link:../../packages/eslint-config
'@developomp-site/tsconfig': link:../../packages/tsconfig
+ '@developomp-site/utils': link:../../packages/utils
'@storybook/addon-actions': 6.5.14_biqbaboplfbrettd7655fr4n2y
'@storybook/addon-docs': 6.5.14_7adf6yzbznbojko3g4wsr6ebli
'@storybook/addon-essentials': 6.5.14_7adf6yzbznbojko3g4wsr6ebli
@@ -228,6 +230,14 @@ importers:
devDependencies:
tailwindcss: 3.2.4_postcss@8.4.19
+ packages/theme:
+ specifiers:
+ '@developomp-site/tailwind-config': workspace:*
+ tailwindcss: ^3.1.4
+ devDependencies:
+ '@developomp-site/tailwind-config': link:../tailwind-config
+ tailwindcss: 3.2.4_postcss@8.4.19
+
packages/tsconfig:
specifiers: {}
@@ -742,7 +752,7 @@ packages:
'@babel/core': ^7.0.0-0
dependencies:
'@babel/core': 7.12.9
- '@babel/helper-plugin-utils': 7.10.4
+ '@babel/helper-plugin-utils': 7.20.2
'@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.12.9
'@babel/plugin-transform-parameters': 7.20.5_@babel+core@7.12.9
dev: true
@@ -4213,7 +4223,7 @@ packages:
resolution: {integrity: sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==}
dependencies:
'@types/eslint': 8.4.10
- '@types/estree': 0.0.51
+ '@types/estree': 1.0.0
/@types/eslint/8.4.10:
resolution: {integrity: sha512-Sl/HOqN8NKPmhWo2VBEPm0nvHnu2LL3v9vKo8MEq0EtbJ4eVzGPl41VNPvn5E1i5poMk4/XD8UriLHpJvEP/Nw==}
@@ -4259,7 +4269,7 @@ packages:
resolution: {integrity: sha512-l6NQsDDyQUVeoTynNpC9uRvCUint/gSUXQA2euwmTuWGvPY5LSDUu6tkCtJB2SvGQlJQzLaKqcGZP4//7EDveA==}
dependencies:
'@types/minimatch': 5.1.2
- '@types/node': 16.18.6
+ '@types/node': 18.11.11
dev: true
/@types/graceful-fs/4.1.5:
@@ -4373,7 +4383,7 @@ packages:
/@types/node-fetch/2.6.2:
resolution: {integrity: sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==}
dependencies:
- '@types/node': 16.18.6
+ '@types/node': 18.11.11
form-data: 3.0.1
dev: true
@@ -4561,7 +4571,7 @@ packages:
/@types/webpack-sources/3.2.0:
resolution: {integrity: sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==}
dependencies:
- '@types/node': 16.18.6
+ '@types/node': 18.11.11
'@types/source-list-map': 0.1.2
source-map: 0.7.4
dev: true
@@ -4569,7 +4579,7 @@ packages:
/@types/webpack/4.41.33:
resolution: {integrity: sha512-PPajH64Ft2vWevkerISMtnZ8rTs4YmRbs+23c402J0INmxDKCrhZNvwZYtzx96gY2wAtXdrK1BS2fiC8MlLr3g==}
dependencies:
- '@types/node': 16.18.6
+ '@types/node': 18.11.11
'@types/tapable': 1.0.8
'@types/uglify-js': 3.17.1
'@types/webpack-sources': 3.2.0
@@ -8448,7 +8458,7 @@ packages:
eslint-scope: 7.1.1
eslint-utils: 3.0.0_eslint@8.4.1
eslint-visitor-keys: 3.3.0
- espree: 9.2.0
+ espree: 9.4.1
esquery: 1.4.0
esutils: 2.0.3
fast-deep-equal: 3.1.3