commit a4cdd114d22dae41fcc7f95004cae20669ad16d1 Author: Allan Crisostomo Date: Fri Aug 13 23:53:44 2021 +0000 Initial commit diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..5d2eb63 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,11 @@ +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_size = tab +tab_width = 2 +indent_style = tab +insert_final_newline = true +max_line_length = 120 +trim_trailing_whitespace = true diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..711a5f6 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,35 @@ +{ + "settings": { + "react": { + "version": "detect", + "pragma": "React", + "fragment": "Fragment" + } + }, + "env": { + "browser": true, + "es2021": true + }, + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended", + "plugin:prettier/recommended" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": 12, + "sourceType": "module" + }, + "plugins": [ + "react", + "@typescript-eslint" + ], + "rules": { + "react/react-in-jsx-scope": "off", + "react/prop-types": "off" + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0c76154 --- /dev/null +++ b/.gitignore @@ -0,0 +1,36 @@ +# 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 +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel + +.idea/ diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..10bab1f --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "jsxSingleQuote": false, + "semi": false, + "jsxBracketSameLine": false, + "singleQuote": true, + "trailingComma": "all", + "bracketSpacing": false +} diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..ed365fd --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..f3ee2b9 --- /dev/null +++ b/next.config.js @@ -0,0 +1,3 @@ +module.exports = { + basePath: '', +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..81ecbd1 --- /dev/null +++ b/package.json @@ -0,0 +1,37 @@ +{ + "name": "starter-next", + "version": "0.1.0", + "private": true, + "homepage": "https://code.modal.sh", + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "@tesseract-design/react-common": "^0.3.0", + "@theoryofnekomata/viewfinder": "0.2.4", + "next": "10.1.3", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-markdown": "^6.0.1", + "styled-components": "^5.2.3" + }, + "devDependencies": { + "@types/node": "^14.14.41", + "@types/react": "^17.0.3", + "@types/styled-components": "^5.1.9", + "@typescript-eslint/eslint-plugin": "^4.26.0", + "@typescript-eslint/parser": "^4.26.0", + "eslint": "^7.27.0", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-prettier": "^3.4.0", + "eslint-plugin-react": "^7.24.0", + "eslint-plugin-react-app": "^6.2.2", + "prettier": "2.3.0", + "typescript": "^4.2.4" + }, + "optionalDependencies": { + "react-markdown": "^6.0.1" + } +} diff --git a/public/contents/japanese-calligraphy/20101122_Calligraphy_Hirano_Demo.jpg b/public/contents/japanese-calligraphy/20101122_Calligraphy_Hirano_Demo.jpg new file mode 100644 index 0000000..3b27ddd Binary files /dev/null and b/public/contents/japanese-calligraphy/20101122_Calligraphy_Hirano_Demo.jpg differ diff --git a/public/contents/japanese-calligraphy/freddie-marriage-gL-7_NtZpYI-unsplash.jpg b/public/contents/japanese-calligraphy/freddie-marriage-gL-7_NtZpYI-unsplash.jpg new file mode 100644 index 0000000..b040551 Binary files /dev/null and b/public/contents/japanese-calligraphy/freddie-marriage-gL-7_NtZpYI-unsplash.jpg differ diff --git a/public/contents/japanese-calligraphy/japanese_calligraphy_at_meiji_shrine_tokyo.jpg b/public/contents/japanese-calligraphy/japanese_calligraphy_at_meiji_shrine_tokyo.jpg new file mode 100644 index 0000000..61a7989 Binary files /dev/null and b/public/contents/japanese-calligraphy/japanese_calligraphy_at_meiji_shrine_tokyo.jpg differ diff --git a/public/contents/japanese-calligraphy/marco-zuppone-zHwWnUDMizo-unsplash.jpg b/public/contents/japanese-calligraphy/marco-zuppone-zHwWnUDMizo-unsplash.jpg new file mode 100644 index 0000000..0e25ff4 Binary files /dev/null and b/public/contents/japanese-calligraphy/marco-zuppone-zHwWnUDMizo-unsplash.jpg differ diff --git a/public/contents/japanese-calligraphy/niketh-vellanki-vJqSAasmCEY-unsplash.jpg b/public/contents/japanese-calligraphy/niketh-vellanki-vJqSAasmCEY-unsplash.jpg new file mode 100644 index 0000000..fa6ff92 Binary files /dev/null and b/public/contents/japanese-calligraphy/niketh-vellanki-vJqSAasmCEY-unsplash.jpg differ diff --git a/public/contents/japanese-calligraphy/what-is-japanese-calligraphy-used-for-1-1.jpg b/public/contents/japanese-calligraphy/what-is-japanese-calligraphy-used-for-1-1.jpg new file mode 100644 index 0000000..39859c0 Binary files /dev/null and b/public/contents/japanese-calligraphy/what-is-japanese-calligraphy-used-for-1-1.jpg differ diff --git a/public/contents/piano/bechstein-moor-grand-00.jpg b/public/contents/piano/bechstein-moor-grand-00.jpg new file mode 100644 index 0000000..3d91aea Binary files /dev/null and b/public/contents/piano/bechstein-moor-grand-00.jpg differ diff --git a/public/contents/piano/bechstein-moor-grand-01.jpg b/public/contents/piano/bechstein-moor-grand-01.jpg new file mode 100644 index 0000000..0382555 Binary files /dev/null and b/public/contents/piano/bechstein-moor-grand-01.jpg differ diff --git a/public/contents/piano/boesendorfer-moor-grand-00.jpg b/public/contents/piano/boesendorfer-moor-grand-00.jpg new file mode 100644 index 0000000..d8c35d1 Binary files /dev/null and b/public/contents/piano/boesendorfer-moor-grand-00.jpg differ diff --git a/public/contents/piano/boesendorfer-moor-grand-01.jpg b/public/contents/piano/boesendorfer-moor-grand-01.jpg new file mode 100644 index 0000000..1564ce5 Binary files /dev/null and b/public/contents/piano/boesendorfer-moor-grand-01.jpg differ diff --git a/public/contents/piano/boesendorfer-moor-grand-02.jpg b/public/contents/piano/boesendorfer-moor-grand-02.jpg new file mode 100644 index 0000000..15c4844 Binary files /dev/null and b/public/contents/piano/boesendorfer-moor-grand-02.jpg differ diff --git a/public/contents/piano/chris-maene-cm228-parlor-grand-00.jpg b/public/contents/piano/chris-maene-cm228-parlor-grand-00.jpg new file mode 100644 index 0000000..f469977 Binary files /dev/null and b/public/contents/piano/chris-maene-cm228-parlor-grand-00.jpg differ diff --git a/public/contents/piano/chris-maene-cm250-chamber-concert-grand-00.jpg b/public/contents/piano/chris-maene-cm250-chamber-concert-grand-00.jpg new file mode 100644 index 0000000..5774ec6 Binary files /dev/null and b/public/contents/piano/chris-maene-cm250-chamber-concert-grand-00.jpg differ diff --git a/public/contents/piano/chris-maene-cm284-concert-grand-00.jpg b/public/contents/piano/chris-maene-cm284-concert-grand-00.jpg new file mode 100644 index 0000000..7e93902 Binary files /dev/null and b/public/contents/piano/chris-maene-cm284-concert-grand-00.jpg differ diff --git a/public/contents/piano/grotrian-duo-double-grand.jpg b/public/contents/piano/grotrian-duo-double-grand.jpg new file mode 100644 index 0000000..17468aa Binary files /dev/null and b/public/contents/piano/grotrian-duo-double-grand.jpg differ diff --git a/public/contents/piano/grotrian-steinweg-double-grand-00.jpg b/public/contents/piano/grotrian-steinweg-double-grand-00.jpg new file mode 100644 index 0000000..5df79f9 Binary files /dev/null and b/public/contents/piano/grotrian-steinweg-double-grand-00.jpg differ diff --git a/public/contents/piano/korg-kronos-88-00.jpg b/public/contents/piano/korg-kronos-88-00.jpg new file mode 100644 index 0000000..a8c108f Binary files /dev/null and b/public/contents/piano/korg-kronos-88-00.jpg differ diff --git a/public/contents/piano/korg-kronos-88-01.jpg b/public/contents/piano/korg-kronos-88-01.jpg new file mode 100644 index 0000000..83ad1ef Binary files /dev/null and b/public/contents/piano/korg-kronos-88-01.jpg differ diff --git a/public/contents/piano/kurzweil-forte-00.webp b/public/contents/piano/kurzweil-forte-00.webp new file mode 100644 index 0000000..0028d1c Binary files /dev/null and b/public/contents/piano/kurzweil-forte-00.webp differ diff --git a/public/contents/piano/nehlsen-omega-double-grand-00.jpg b/public/contents/piano/nehlsen-omega-double-grand-00.jpg new file mode 100644 index 0000000..acc2c97 Binary files /dev/null and b/public/contents/piano/nehlsen-omega-double-grand-00.jpg differ diff --git a/public/contents/piano/pleyel-double-grand-00.jpg b/public/contents/piano/pleyel-double-grand-00.jpg new file mode 100644 index 0000000..3fc5aa6 Binary files /dev/null and b/public/contents/piano/pleyel-double-grand-00.jpg differ diff --git a/public/contents/piano/pleyel-double-grand-01.jpg b/public/contents/piano/pleyel-double-grand-01.jpg new file mode 100644 index 0000000..7b0da93 Binary files /dev/null and b/public/contents/piano/pleyel-double-grand-01.jpg differ diff --git a/public/contents/piano/pleyel-double-grand-02.jpg b/public/contents/piano/pleyel-double-grand-02.jpg new file mode 100644 index 0000000..69a648e Binary files /dev/null and b/public/contents/piano/pleyel-double-grand-02.jpg differ diff --git a/public/contents/piano/pleyel-moor-grand-00.jpg b/public/contents/piano/pleyel-moor-grand-00.jpg new file mode 100644 index 0000000..ea50c77 Binary files /dev/null and b/public/contents/piano/pleyel-moor-grand-00.jpg differ diff --git a/public/contents/piano/pleyel-moor-grand-01.jpg b/public/contents/piano/pleyel-moor-grand-01.jpg new file mode 100644 index 0000000..5c7ab22 Binary files /dev/null and b/public/contents/piano/pleyel-moor-grand-01.jpg differ diff --git a/public/contents/piano/pleyel-moor-grand-02.jpg b/public/contents/piano/pleyel-moor-grand-02.jpg new file mode 100644 index 0000000..eda7365 Binary files /dev/null and b/public/contents/piano/pleyel-moor-grand-02.jpg differ diff --git a/public/contents/piano/pleyel-moor-upright-00.jpg b/public/contents/piano/pleyel-moor-upright-00.jpg new file mode 100644 index 0000000..fa12b91 Binary files /dev/null and b/public/contents/piano/pleyel-moor-upright-00.jpg differ diff --git a/public/contents/piano/roland-fantom-8-00.jpg b/public/contents/piano/roland-fantom-8-00.jpg new file mode 100644 index 0000000..ea0d92f Binary files /dev/null and b/public/contents/piano/roland-fantom-8-00.jpg differ diff --git a/public/contents/piano/roland-fantom-8-01.jpg b/public/contents/piano/roland-fantom-8-01.jpg new file mode 100644 index 0000000..8e86bff Binary files /dev/null and b/public/contents/piano/roland-fantom-8-01.jpg differ diff --git a/public/contents/piano/roland-fantom-8-02.jpg b/public/contents/piano/roland-fantom-8-02.jpg new file mode 100644 index 0000000..9df1f35 Binary files /dev/null and b/public/contents/piano/roland-fantom-8-02.jpg differ diff --git a/public/contents/piano/steinway-moor-grand-00.jpg b/public/contents/piano/steinway-moor-grand-00.jpg new file mode 100644 index 0000000..f751709 Binary files /dev/null and b/public/contents/piano/steinway-moor-grand-00.jpg differ diff --git a/public/contents/piano/stuart-and-sons-beleura-concert-grand-00.jpg b/public/contents/piano/stuart-and-sons-beleura-concert-grand-00.jpg new file mode 100644 index 0000000..b0941fe Binary files /dev/null and b/public/contents/piano/stuart-and-sons-beleura-concert-grand-00.jpg differ diff --git a/public/contents/piano/stuart-and-sons-beleura-concert-grand-01.jpg b/public/contents/piano/stuart-and-sons-beleura-concert-grand-01.jpg new file mode 100644 index 0000000..1d18f8a Binary files /dev/null and b/public/contents/piano/stuart-and-sons-beleura-concert-grand-01.jpg differ diff --git a/public/contents/piano/stuart-and-sons-beleura-studio-grand-00.jpg b/public/contents/piano/stuart-and-sons-beleura-studio-grand-00.jpg new file mode 100644 index 0000000..71685c4 Binary files /dev/null and b/public/contents/piano/stuart-and-sons-beleura-studio-grand-00.jpg differ diff --git a/public/contents/piano/yamaha-cp88-00.jpg b/public/contents/piano/yamaha-cp88-00.jpg new file mode 100644 index 0000000..6adb7b6 Binary files /dev/null and b/public/contents/piano/yamaha-cp88-00.jpg differ diff --git a/public/contents/piano/yamaha-cp88-01.jpg b/public/contents/piano/yamaha-cp88-01.jpg new file mode 100644 index 0000000..4436979 Binary files /dev/null and b/public/contents/piano/yamaha-cp88-01.jpg differ diff --git a/public/contents/piano/yamaha-cp88-02.jpg b/public/contents/piano/yamaha-cp88-02.jpg new file mode 100644 index 0000000..205e5d0 Binary files /dev/null and b/public/contents/piano/yamaha-cp88-02.jpg differ diff --git a/public/contents/piano/yamaha-montage-8-00.webp b/public/contents/piano/yamaha-montage-8-00.webp new file mode 100644 index 0000000..8c23e50 Binary files /dev/null and b/public/contents/piano/yamaha-montage-8-00.webp differ diff --git a/public/contents/ramen/Butter_Corn_Ramen.jpg b/public/contents/ramen/Butter_Corn_Ramen.jpg new file mode 100644 index 0000000..00adce7 Binary files /dev/null and b/public/contents/ramen/Butter_Corn_Ramen.jpg differ diff --git a/public/contents/ramen/Tokyoramen.jpg b/public/contents/ramen/Tokyoramen.jpg new file mode 100644 index 0000000..08feffb Binary files /dev/null and b/public/contents/ramen/Tokyoramen.jpg differ diff --git a/public/contents/ramen/karei.png b/public/contents/ramen/karei.png new file mode 100644 index 0000000..c11b8b7 Binary files /dev/null and b/public/contents/ramen/karei.png differ diff --git a/public/contents/ramen/miso.png b/public/contents/ramen/miso.png new file mode 100644 index 0000000..29d056a Binary files /dev/null and b/public/contents/ramen/miso.png differ diff --git a/public/contents/ramen/sapporo.jpg b/public/contents/ramen/sapporo.jpg new file mode 100644 index 0000000..f7febb8 Binary files /dev/null and b/public/contents/ramen/sapporo.jpg differ diff --git a/public/contents/ramen/shio.png b/public/contents/ramen/shio.png new file mode 100644 index 0000000..bfee1e4 Binary files /dev/null and b/public/contents/ramen/shio.png differ diff --git a/public/contents/ramen/shoyu.jpg b/public/contents/ramen/shoyu.jpg new file mode 100644 index 0000000..5d7760b Binary files /dev/null and b/public/contents/ramen/shoyu.jpg differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..4965832 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/fonts/mononoki/mononoki-Bold.eot b/public/fonts/mononoki/mononoki-Bold.eot new file mode 100644 index 0000000..cf2a252 Binary files /dev/null and b/public/fonts/mononoki/mononoki-Bold.eot differ diff --git a/public/fonts/mononoki/mononoki-Bold.ttf b/public/fonts/mononoki/mononoki-Bold.ttf new file mode 100644 index 0000000..407ed3e Binary files /dev/null and b/public/fonts/mononoki/mononoki-Bold.ttf differ diff --git a/public/fonts/mononoki/mononoki-Bold.woff b/public/fonts/mononoki/mononoki-Bold.woff new file mode 100644 index 0000000..a6f5e8a Binary files /dev/null and b/public/fonts/mononoki/mononoki-Bold.woff differ diff --git a/public/fonts/mononoki/mononoki-Bold.woff2 b/public/fonts/mononoki/mononoki-Bold.woff2 new file mode 100644 index 0000000..adb5b15 Binary files /dev/null and b/public/fonts/mononoki/mononoki-Bold.woff2 differ diff --git a/public/fonts/mononoki/mononoki-BoldItalic.eot b/public/fonts/mononoki/mononoki-BoldItalic.eot new file mode 100644 index 0000000..70968d6 Binary files /dev/null and b/public/fonts/mononoki/mononoki-BoldItalic.eot differ diff --git a/public/fonts/mononoki/mononoki-BoldItalic.ttf b/public/fonts/mononoki/mononoki-BoldItalic.ttf new file mode 100644 index 0000000..784c2d0 Binary files /dev/null and b/public/fonts/mononoki/mononoki-BoldItalic.ttf differ diff --git a/public/fonts/mononoki/mononoki-BoldItalic.woff b/public/fonts/mononoki/mononoki-BoldItalic.woff new file mode 100644 index 0000000..f0d6ed7 Binary files /dev/null and b/public/fonts/mononoki/mononoki-BoldItalic.woff differ diff --git a/public/fonts/mononoki/mononoki-BoldItalic.woff2 b/public/fonts/mononoki/mononoki-BoldItalic.woff2 new file mode 100644 index 0000000..3cc80cd Binary files /dev/null and b/public/fonts/mononoki/mononoki-BoldItalic.woff2 differ diff --git a/public/fonts/mononoki/mononoki-Italic.eot b/public/fonts/mononoki/mononoki-Italic.eot new file mode 100644 index 0000000..53c1e62 Binary files /dev/null and b/public/fonts/mononoki/mononoki-Italic.eot differ diff --git a/public/fonts/mononoki/mononoki-Italic.ttf b/public/fonts/mononoki/mononoki-Italic.ttf new file mode 100644 index 0000000..dad4dcc Binary files /dev/null and b/public/fonts/mononoki/mononoki-Italic.ttf differ diff --git a/public/fonts/mononoki/mononoki-Italic.woff b/public/fonts/mononoki/mononoki-Italic.woff new file mode 100644 index 0000000..fb690ec Binary files /dev/null and b/public/fonts/mononoki/mononoki-Italic.woff differ diff --git a/public/fonts/mononoki/mononoki-Italic.woff2 b/public/fonts/mononoki/mononoki-Italic.woff2 new file mode 100644 index 0000000..30cbd0d Binary files /dev/null and b/public/fonts/mononoki/mononoki-Italic.woff2 differ diff --git a/public/fonts/mononoki/mononoki-Regular.eot b/public/fonts/mononoki/mononoki-Regular.eot new file mode 100644 index 0000000..26e5357 Binary files /dev/null and b/public/fonts/mononoki/mononoki-Regular.eot differ diff --git a/public/fonts/mononoki/mononoki-Regular.ttf b/public/fonts/mononoki/mononoki-Regular.ttf new file mode 100644 index 0000000..9510ac8 Binary files /dev/null and b/public/fonts/mononoki/mononoki-Regular.ttf differ diff --git a/public/fonts/mononoki/mononoki-Regular.woff b/public/fonts/mononoki/mononoki-Regular.woff new file mode 100644 index 0000000..939ec2a Binary files /dev/null and b/public/fonts/mononoki/mononoki-Regular.woff differ diff --git a/public/fonts/mononoki/mononoki-Regular.woff2 b/public/fonts/mononoki/mononoki-Regular.woff2 new file mode 100644 index 0000000..2c23a36 Binary files /dev/null and b/public/fonts/mononoki/mononoki-Regular.woff2 differ diff --git a/public/global.css b/public/global.css new file mode 100644 index 0000000..457484a --- /dev/null +++ b/public/global.css @@ -0,0 +1,77 @@ +body { + margin: 0; + /* overflow: overlay; */ +} + +h1 { + font-size: 3em; + text-transform: lowercase; +} + +h2 { + font-size: 2em; + text-transform: lowercase; +} + +h3 { + font-size: 1.75em; + text-transform: lowercase; +} + +h4 { + font-size: 1.5em; + text-transform: lowercase; +} + +h5 { + font-size: 1.25em; + text-transform: lowercase; +} + +h6 { + font-size: 1.125em; + text-transform: lowercase; +} + +p { + margin: 2em 0; +} + +li { + margin: 2em 0; +} + +small { + font-size: 0.75em; +} + +a:focus { + outline: 0; +} + +pre { + overflow: auto; + margin: 0 -1rem; + padding: 0 1rem; + line-height: 1.2; + box-sizing: border-box; +} + +@media only print { + pre, pre * { + color: inherit !important; + } + + code, code * { + color: inherit !important; + } + + img { + filter: grayscale(100%); + } + + :root { + --color-accent: black !important; + --color-active: black !important; + } +} diff --git a/public/theme.css b/public/theme.css new file mode 100644 index 0000000..6a316f1 --- /dev/null +++ b/public/theme.css @@ -0,0 +1,166 @@ +@font-face { + font-family: 'mononoki'; + font-weight: 400; + font-style: normal; + font-display: swap; + src: + local('mononoki'), + url(fonts/mononoki/mononoki-Regular.woff2) format('woff2'); +} + +@font-face { + font-family: 'mononoki'; + font-weight: 700; + font-style: normal; + font-display: swap; + src: + local('mononoki Bold'), + local('mononoki'), + url(fonts/mononoki/mononoki-Bold.woff2) format('woff2'); +} + +@font-face { + font-family: 'mononoki'; + font-weight: 400; + font-style: italic; + font-display: swap; + src: + local('mononoki Italic'), + local('mononoki'), + url(fonts/mononoki/mononoki-Italic.woff2) format('woff2'); +} + +@font-face { + font-family: 'mononoki'; + font-weight: 700; + font-style: italic; + font-display: swap; + src: + local('mononoki Bold Italic'), + local('mononoki BoldItalic'), + local('mononoki'), + url(fonts/mononoki/mononoki-BoldItalic.woff2) format('woff2'); +} + +:root { + --font-family-base: 'Encode Sans', system-ui; + --font-stretch-base: semi-expanded; + --font-weight-base: 400; + --line-height-base: 1.75em; + --font-family-headings: 'Encode Sans', system-ui; + --font-stretch-headings: condensed; + --font-weight-headings: 100; + --line-height-headings: 1.125em; + --font-family-monospace: 'mononoki'; + --font-size-root: 16px; + --opacity-light: 0.25; + --opacity-lighter: 0.5; + --opacity-lightest: 0.75; +} + +:root { + --color-bg: var(--color-negative, white); + --color-fg: var(--color-positive, black); + --color-accent: var(--color-primary, blue); + --color-active: var(--color-secondary, red); +} + +@media (prefers-color-scheme: dark) { + :root { + --color-bg: var(--color-negative, black); + --color-fg: var(--color-positive, white); + } +} + +:root { + font-size: var(--font-size-root); + font-family: var(--font-family-base), sans-serif; + font-stretch: var(--font-stretch-base, normal); + font-weight: var(--font-weight-base, 400); + line-height: var(--line-height-base, 1.75em); + transition-property: color, background-color; + transition-timing-function: ease; + transition-duration: 350ms; +} + +@media only screen { + :root { + background-color: var(--color-bg); + color: var(--color-fg); + } +} + +h1 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +h2 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: calc(var(--font-weight-headings, 400) / 100 * 150); + line-height: var(--line-height-headings, 1.5); +} + +h3 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: calc(var(--font-weight-headings, 400) / 100 * 250); + line-height: var(--line-height-headings, 1.5); +} + +h4 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +h5 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +h6 { + font-family: var(--font-family-headings), sans-serif; + font-stretch: var(--font-stretch-headings, normal); + font-weight: var(--font-weight-headings, 400); + line-height: var(--line-height-headings, 1.5); +} + +code { + font-family: var(--font-family-monospace), monospace; +} + +pre { + font-family: var(--font-family-monospace), monospace; +} + +a { + color: inherit; + text-decoration: none; +} + +@media only screen { + a { + color: var(--color-accent); + text-decoration: underline; + } + + a:focus { + color: var(--color-active); + } +} + +::selection { + background-color: var(--color-active); + color: var(--color-fg); +} + +:root { + caret-color: var(--color-active); +} diff --git a/public/theme/dark.css b/public/theme/dark.css new file mode 100644 index 0000000..52172b7 --- /dev/null +++ b/public/theme/dark.css @@ -0,0 +1,19 @@ +:root { + --color-shade: #000; + --color-negative: #222; + --color-positive: #eee; + --color-primary: #C78AB3; + --color-secondary: #f90; + --color-code-number: #74f95e; + --color-code-keyword: #ff4389; + --color-code-type: #5097D2; + --color-code-instance-attribute: #76a7d2; + --color-code-function: #67c252; + --color-code-parameter: #915ec2; + --color-code-property: #ffa1c9; + --color-code-string: #eed371; + --color-code-variable: #8bc275; + --color-code-regexp: #74A72B; + --color-code-url: #0099CC; + --color-code-global: #C28050; +} diff --git a/public/theme/light.css b/public/theme/light.css new file mode 100644 index 0000000..983a7d3 --- /dev/null +++ b/public/theme/light.css @@ -0,0 +1,19 @@ +:root { + --color-shade: #fff; + --color-negative: #f8f8f8; + --color-positive: #333; + --color-primary: #ba6a9c; + --color-secondary: #f90; + --color-code-number: #72b507; + --color-code-keyword: #ee5189; + --color-code-type: #427fb1; + --color-code-instance-attribute: #76a7d2; + --color-code-function: #5a984a; + --color-code-parameter: #915ec2; + --color-code-property: #b76e8d; + --color-code-string: #b59e36; + --color-code-variable: #61864e; + --color-code-regexp: #4f7e03; + --color-code-url: #0099CC; + --color-code-global: #C28050; +} diff --git a/public/vercel.svg b/public/vercel.svg new file mode 100644 index 0000000..fbf0e25 --- /dev/null +++ b/public/vercel.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/src/components/molecules/Brand/index.tsx b/src/components/molecules/Brand/index.tsx new file mode 100644 index 0000000..7ffd3d6 --- /dev/null +++ b/src/components/molecules/Brand/index.tsx @@ -0,0 +1,39 @@ +import * as React from 'react' +import styled from 'styled-components' +import Link from '../Link' + +const BrandBase = styled(Link)({ + display: 'block', + textDecoration: 'none', + fontSize: '1.5rem', + fontWeight: 'bold', + fontStretch: '75%', + textTransform: 'uppercase', + width: '2rem', + textAlign: 'center', + '@media (min-width: 720px)': { + width: '8rem', + textAlign: 'left', + }, +}) + +const Hide = styled('span')({ + display: 'none', + '@media (min-width: 720px)': { + display: 'inline', + }, +}) + +const Brand: React.FC = () => { + return ( + + Brand + + ) +} + +export default Brand diff --git a/src/components/molecules/DummyContent/index.tsx b/src/components/molecules/DummyContent/index.tsx new file mode 100644 index 0000000..6606819 --- /dev/null +++ b/src/components/molecules/DummyContent/index.tsx @@ -0,0 +1,212 @@ +/* eslint-disable */ +import ReactMarkdown from 'react-markdown' + +const DEFAULT_CONTENTS = [ + { + name: 'ramen', + images: [ + 'Butter_Corn_Ramen.jpg', + 'karei.png', + 'miso.png', + 'sapporo.jpg', + 'shio.png', + 'shoyu.jpg', + 'Tokyoramen.jpg', + ], + text: `# Ramen + +Ramen is a Japanese noodle soup. It consists of Chinese wheat noodles served in a meat or (occasionally) fish-based broth, often flavored with soy sauce or miso, and uses toppings such as sliced pork (叉焼, chāshū), nori (dried seaweed), menma, and scallions. Nearly every region in Japan has its own variation of ramen, such as the tonkotsu (pork bone broth) ramen of Kyushu and the miso ramen of Hokkaido. Mazemen is a ramen dish that is not served in a soup, but rather with a sauce (such as tare), like noodles that are served with a sweet and sour sauce. + +## Types + +A wide variety of ramen exists in Japan, with geographical and vendor-specific differences even in varieties that share the same name. Ramen can be broadly categorized by its two main ingredients: noodles and broth. + +### Noodles + +Most noodles are made from four basic ingredients: wheat flour, salt, water, and kansui (かん水) (from kansui (鹼水, alkaline water)) a type of alkaline mineral water, containing sodium carbonate and usually potassium carbonate, as well as sometimes a small amount of phosphoric acid. Although ramen noodles and Udon noodles are both made with wheat, they are different kinds of noodle. + +The kansui is the distinguishing ingredient in ramen noodles, and originated in Inner Mongolia, where some lakes contain large amounts of these minerals and whose water is said to be perfect for making these noodles. Making noodles with kansui lends them a yellowish hue as well as a firm texture.[citation needed] Eggs may also be substituted for kansui. Some noodles are made with neither eggs nor kansui and should only be used for yakisoba, as they have a weaker structure and are more prone to soaking up moisture and becoming extremely soft when served in soup.[citation needed] + +Ramen comes in various shapes and lengths. It may be thick, thin, or even ribbon-like, as well as straight or wrinkled. + +Traditionally, ramen noodles were made by hand, but with growing popularity many ramen restaurants prefer to have in-house capacity to produce fresh noodles to meet the increased demand and improve quality. Automatic ramen-making machines imitating manual production methods have been available since the mid. 20th century produced by such Japanese manufacturers as Yamato MFG. and others. + +### Soup + +Ramen soup is generally made from stock based on chicken or pork, combined with a variety of ingredients such as kombu (kelp), katsuobushi (skipjack tuna flakes), niboshi (dried baby sardines), beef bones, pork bones, shiitake, and onions. Some modern ramen broths can also be vegetable-based. Tare is often added to broth to make the soup. + +Tonkotsu (豚骨, "pork bone"; not to be confused with tonkatsu) soup is broth with a typically translucent white colored appearance. It is similar to the Chinese baitang (白湯) and has a thick broth made from boiling pork bones, fat, and collagen over high heat for many hours, which suffuses the broth with a hearty pork flavor and a creamy consistency that rivals milk, melted butter or gravy (depending on the shop). Although Tonkotsu is merely a kind of broth, some people consider tonkotsu ramen (specialty of Kyushu, its birthplace) a distinct flavor category. + +### Flavors + +The resulting combination is generally divided into several categories. (although new and original variations often make this categorization less clear-cut) A description of said old variations are as follows: + +- Shōyu (醤油, "soy sauce") ramen has a clear brown broth, based on a chicken and vegetable (or sometimes fish or beef) stock with plenty of soy sauce added resulting in a soup that is tangy, salty, and savory yet still fairly light on the palate. Shōyu ramen usually has curly noodles rather than straight ones, but this is not always the case. It is often adorned with marinated bamboo shoots or menma, green onions, ninjin (carrot), kamaboko (fish cakes), nori (seaweed), boiled eggs, bean sprouts or black pepper; occasionally the soup will also contain chili oil or Chinese spices, and some shops serve sliced beef instead of the usual chāshū. +- Shio (塩,"salt") ramen is the oldest of the four types. It has a pale, clear, yellowish broth made with plenty of salt and any combination of chicken, vegetables, fish, and seaweed. Occasionally pork bones are also used, but they are not boiled as long as they are for tonkotsu ramen, so the soup remains light and clear. Chāshū is sometimes swapped for lean chicken meatballs, and pickled plums and kamaboko (a slice of processed fish roll sometimes served as a frilly white circle with a pink or red spiral called narutomaki) are popular toppings as well. Noodle texture and thickness varies among shio ramen, but they are usually straight rather than curly. "Hakodate Ramen" is the representative of shio❨salt❩ ramen in Japan. +- Miso (味噌) ramen is a relative newcomer, having reached national prominence around 1965. This uniquely Japanese ramen, which was developed in Sapporo Hokkaido, features a broth that combines copious miso and is blended with oily chicken or fish broth – and sometimes with tonkotsu or lard – to create a thick, nutty, slightly sweet and very hearty soup. Miso ramen broth tends to have a robust, tangy flavor, so it stands up to a variety of flavorful toppings: spicy bean paste or tōbanjan (豆瓣醤), butter and corn, leeks, onions, bean sprouts, ground pork, cabbage, sesame seeds, white pepper, and chopped garlic are common. The noodles are typically thick, curly, and slightly chewy. +- Karē (カレー,"curry") ramen, ramen cooked with curry soup, is thought that was born spontaneously relatively recently in Japan. In Japan, several cities claim to be its place of origin. The city of Muroran claims it originated there in 1965 (see also Muroran curry ramen), while the city of Sanjō city claims to have had kare ramen for over 80 years, and the city of Katori also claims to have been the site of its origin. Curry soup is mainly made with pork bones and vegetables and is seasoned with curry. The noodles are thick and curly. Toppings include chāshū, wakame, and bean sprouts. + +### Toppings + +After basic preparation, ramen can be seasoned and flavored with any number of toppings, including but not limited to: + +- Chāshū (sliced barbecued or braised pork) +- Negi (green onion) +- Takana-zuke (Pickled and seasoned mustard leaves) +- Seasoned (usually salted) boiled egg (Soy egg ("Ajitsuke Tamago")) +- Bean or other sprouts +- Menma (lactate-fermented bamboo shoots) +- Kakuni (braised pork cubes or squares) +- Kikurage (wood ear mushroom) +- Nori (dried seaweed) +- Kamaboko (formed fish paste, often in a pink and white spiral called narutomaki) +- Squid +- Umeboshi (pickled plum) +- Corn +- Butter +- Wakame (a type of seaweed) +- Olive oil +- Sesame oil +- Soy sauce +- Other types of vegetables + +### Preference + +Seasonings commonly added to ramen are white pepper, black pepper, butter, chili pepper, sesame seeds, and crushed garlic. Soup recipes and methods of preparation tend to be closely guarded secrets. + +Most tonkotsu ramen restaurants offer a system known as kae-dama (替え玉), where customers who have finished their noodles can request a "refill" (for a few hundred yen more) to be put into their remaining soup. +`, + }, + { + name: 'japanese-calligraphy', + images: [ + '20101122_Calligraphy_Hirano_Demo.jpg', + 'freddie-marriage-gL-7_NtZpYI-unsplash.jpg', + 'japanese_calligraphy_at_meiji_shrine_tokyo.jpg', + 'marco-zuppone-zHwWnUDMizo-unsplash.jpg', + 'niketh-vellanki-vJqSAasmCEY-unsplash.jpg', + 'what-is-japanese-calligraphy-used-for-1-1.jpg', + ], + text: `# Japanese calligraphy + +Japanese calligraphy (書道, shodō) also called shūji (習字) is a form of calligraphy, or artistic writing, of the Japanese language. For a long time, the most esteemed calligrapher in Japan had been Wang Xizhi, a Chinese calligrapher from the 4th century, but after the invention of Hiragana and Katakana, the Japanese unique syllabaries, the distinctive Japanese writing system developed and calligraphers produced styles intrinsic to Japan. The term shodō (書道, "way of writing") is of Chinese origin as it is widely used to describe the art of Chinese calligraphy during the medieval Tang dynasty. + +## Styles + +Early Japanese calligraphy was originated from Chinese calligraphy. Many of its principles and techniques are very similar, and it recognizes the same basic writing styles: + +- seal script (篆書 tensho) (pinyin: zhuànshū). The Seal Script (tensho) was commonly used throughout the Zhou Dynasty (1046-256 BC) and the following Qin Dynasty (221- 206 BC) of China. After this time period, tens style fell out of popularity in favor of reishi. However, tensho was still used for titles of published works or inscriptions. The clear and bold style of tensho made it work well for titles and this tradition of using tensho only for titles is still around today. By the time Chinese characters and calligraphy migrated over to Japan, tensho was already only used for titles and as a result, was never commonly used in Japan. In 57 AD, the Chinese emperor, Guang Wu presented a golden seal to a king of a small region near what is now known as Fukuoka Prefecture. While this seal was not made in Japan, it is believed to be the first instance of tensho in Japan. The first work in Japan that actually utilized tensho was during the Nara period (646-794) was a six-paneled screen called the Torige Tensho Byobu. Each panel is divided into two columns and each column has eight characters. The screen speaks to a ruler and recommends that he use the counsel of wise ministers in order to rule justly. +- clerical script (隷書 reisho) (pinyin: lìshū) The Clerical Script or Scribe's Script (reisho) is a very bold and commanding style of Chinese calligraphy, each of the strokes are greatly exaggerated at the beginning and end. It was most commonly used during the Han Dynasty (206 BC- 220 AD) and the term reisho had many significant meanings but is now only known as one of the five styles of Chinese and Japanese calligraphy. Because of its bold style, the reisho technique is now reserved for large text applications such as plaques, signboards, titles of works, etc. This was its main purpose in Japan as well until the Edo Period (1603-1868) when it was regarded as a calligraphic art form. +- regular script (楷書 kaisho) (pinyin: kǎishū) The Regular Script or Block Script (kaisho) is fairly similar in function to that of Roman block capitals. While Japanese kaisho varies slightly from Chinese kaisho, it is primarily based on Chinese kaisho script in both form and function. The Japanese kaisho style was heavily influenced by the Sui Dynasty (581-618) and the following Tang Dynasty (618-907). Early examples of this style in Japan are mostly various statue and temple inscriptions. This was during the early Heian Period (794-1185) and as time progressed there was a movement in Japan to become more culturally independent and a version of kaisho developed that became uniquely Japanese and included a little bit of the gyosho style. As its influence spread, the primary use of the kaisho technique was to copy the Lotus Sutra. There was a second wave of influence during the Kamakura (1192-1333) and Muromachi (1338-1573) periods, but this was mostly by Zen monks who used a technique based on Zen insight and is different from the classic kaisho technique. +- semi-cursive (行書 gyōsho) (pinyin: xíngshū) The Semi-cursive Script (gyosho) means exactly what it says; this script style is a slightly more cursive version of kaisho script. This script was practiced at the same time as the reisho script. There are three different levels of "cursiveness" called seigyo, gyo, and gyoso. The style of gyosho utilizes a softer and more rounded technique, staying away from sharp corners and angles. In Japan many works were made using the gyosho technique during the early Heian Period. Later in the Heian Period, once Japan began to separate itself from China a Japanese version called wayo began to emerge. The Japanese version of gyosho became widely popular and became the basis of many schools of calligraphy. This was a result of gyosho meshing very well with both kanji and hiragana and writing with this technique was both natural and fluid. +- cursive (草書 sōsho) (pinyin: cǎoshū). The Cursive Script (sosho) has its origins in the Han Dynasty. It was used by scribes as a cursive version of reisho for taking notes. Early examples of sosho include inscriptions on bamboo and other wooden strips. This technique can be easily recognized by many strokes ending with a sweep to the upper right in a breaking-wave type form. As the Han Dynasty came to an end, another version of sosho was developed, but this version was written slowly as opposed to the faster sosho that was popular until then. The exact date when sosho was introduced is unclear. Several texts from Japan shared many sosho-like techniques with Chinese texts during this time but it was not until Kukai, a famous Japanese buddhist monk and scholar traveled to China during the early Heian Period and brought back copies of texts that he made written in the sosho style. + +## Tools + +A number of tools are used to create a work of modern calligraphy. + +The four most basic tools were collectively called the Four Treasures of the Study (文房四宝, bunbō shihō). + +- A brush (筆, fude) +- An inkstick (墨, sumi).The hardened mixture of vegetable or pine soot and glue in the shape of a stick. The best inksticks are between 50 and 100 years old. +- Mulberry paper (和紙, washi) +- An inkstone (硯, suzuri) to grind the inkstick against, mixed with water. + +Other tools include: + +- A paper weight (文鎮, bunchin) to hold the paper in place +- A cloth (下敷き, shitajiki) to place under the paper (often newsprint is used as well) to prevent ink from bleeding through. +- A seal (印, in). The art of engraving a seal is called "tenkoku" 篆刻. The student is encouraged to engrave his own seal. The position of the seal or seals is based on aesthetic preferences. One is not allowed to put a seal on calligraphy of a sutra. + +During preparation, water is poured into the inkstone and the inkstick is ground against it, mixing the water with the dried ink to liquefy it. As this is a time-consuming process, modern-day beginners frequently use bottled liquid ink called Bokuju (墨汁, bokujū) . More advanced students are encouraged to grind their own ink. Paper is usually placed on a desk, while a large piece of paper may be placed on the floor or even on the ground (for a performance). + +The brushes come in various shapes and sizes, and are usually made using animal hair bristles. Typical animal hair may come from goats, sheep, or horses. The handle may be made from wood, bamboo, plastic or other materials. +`, + }, + { + name: 'piano', + text: `# Piano + +The piano is an acoustic, stringed musical instrument invented in Italy by Bartolomeo Cristofori around the year 1700 (the exact year is uncertain), in which the strings are struck by wooden hammers that are coated with a softer material (modern hammers are covered with dense wool felt; some early pianos used leather). It is played using a keyboard, which is a row of keys (small levers) that the performer presses down or strikes with the fingers and thumbs of both hands to cause the hammers to strike the strings. + +The word piano is a shortened form of pianoforte, the Italian term for the early 1700s versions of the instrument, which in turn derives from gravicembalo col piano e forte (key cymbal with quieter and louder) and fortepiano. The Italian musical terms piano and forte indicate "soft" and "loud" respectively, in this context referring to the variations in volume (i.e., loudness) produced in response to a pianist's touch or pressure on the keys: the greater the velocity of a key press, the greater the force of the hammer hitting the strings, and the louder the sound of the note produced and the stronger the attack. The name was created as a contrast to harpsichord, a musical instrument that does not allow variation in volume; compared to the harpsichord, the first fortepianos in the 1700s had a quieter sound and smaller dynamic range. + +A piano usually has a protective wooden case surrounding the soundboard and metal strings, which are strung under great tension on a heavy metal frame. Pressing one or more keys on the piano's keyboard causes a wooden or plastic hammer (typically padded with firm felt) to strike the strings. The hammer rebounds from the strings, and the strings continue to vibrate at their resonant frequency. These vibrations are transmitted through a bridge to a soundboard that amplifies by more efficiently coupling the acoustic energy to the air. When the key is released, a damper stops the strings' vibration, ending the sound. Notes can be sustained, even when the keys are released by the fingers and thumbs, by the use of pedals at the base of the instrument. The sustain pedal enables pianists to play musical passages that would otherwise be impossible, such as sounding a 10-note chord in the lower register and then, while this chord is being continued with the sustain pedal, shifting both hands to the treble range to play a melody and arpeggios over the top of this sustained chord. Unlike the pipe organ and harpsichord, two major keyboard instruments widely used before the piano, the piano allows gradations of volume and tone according to how forcefully or softly a performer presses or strikes the keys. + +Most modern pianos have a row of 88 black and white keys, 52 white keys for the notes of the C major scale (C, D, E, F, G, A and B) and 36 shorter black keys, which are raised above the white keys, and set further back on the keyboard. This means that the piano can play 88 different pitches (or "notes"), going from the deepest bass range to the highest treble. The black keys are for the "accidentals" (F♯/G♭, G♯/A♭, A♯/B♭, C♯/D♭, and D♯/E♭), which are needed to play in all twelve keys. More rarely, some pianos have additional keys (which require additional strings), an example of which is the Bösendorfer Concert Grand 290 Imperial, which has 97 keys. Most notes have three strings, except for the bass, which graduates from one to two. The strings are sounded when keys are pressed or struck, and silenced by dampers when the hands are lifted from the keyboard. Although an acoustic piano has strings, it is usually classified as a percussion instrument rather than as a stringed instrument, because the strings are struck rather than plucked (as with a harpsichord or spinet); in the Hornbostel–Sachs system of instrument classification, pianos are considered chordophones. There are two main types of piano: the grand piano and the upright piano. The grand piano has a better sound and gives the player a more precise control of the keys, and is therefore the preferred choice for every situation in which the available floor-space and the budget will allow, as well as often being considered a requirement in venues where skilled pianists will frequently give public performances. The upright piano, which necessarily involves some compromise in both tone and key action compared to a grand piano of equivalent quality, is nevertheless much more widely used, because it occupies less space (allowing it to fit comfortably in a room where a grand piano would be too large) and is significantly less expensive. + +During the 1800s, influenced by the musical trends of the Romantic music era, innovations such as the cast iron frame (which allowed much greater string tensions) and aliquot stringing gave grand pianos a more powerful sound, with a longer sustain and richer tone. In the nineteenth century, a family's piano played the same role that a radio or phonograph played in the twentieth century; when a nineteenth-century family wanted to hear a newly published musical piece or symphony, they could hear it by having a family member play a simplified version on the piano. During the nineteenth century, music publishers produced many types of musical works (symphonies, opera overtures, waltzes, etc.) in arrangements for piano, so that music lovers could play and hear the popular pieces of the day in their home. The piano is widely employed in classical, jazz, traditional and popular music for solo and ensemble performances, accompaniment, and for composing, songwriting and rehearsals. Although the piano is very heavy and thus not portable and is expensive (in comparison with other widely used accompaniment instruments, such as the acoustic guitar), its musical versatility (i.e., its wide pitch range, ability to play chords, louder or softer notes and two or more independent musical lines at the same time), the large number of musicians - both amateurs and professionals - trained in playing it, and its wide availability in performance venues, schools and rehearsal spaces have made it one of the Western world's most familiar musical instruments.`, + images: [ + 'bechstein-moor-grand-00.jpg', + 'bechstein-moor-grand-01.jpg', + 'boesendorfer-moor-grand-00.jpg', + 'boesendorfer-moor-grand-01.jpg', + 'boesendorfer-moor-grand-02.jpg', + 'chris-maene-cm228-parlor-grand-00.jpg', + 'chris-maene-cm250-chamber-concert-grand-00.jpg', + 'chris-maene-cm284-concert-grand-00.jpg', + 'grotrian-duo-double-grand.jpg', + 'grotrian-steinweg-double-grand-00.jpg', + 'korg-kronos-88-00.jpg', + 'korg-kronos-88-01.jpg', + 'kurzweil-forte-00.webp', + 'nehlsen-omega-double-grand-00.jpg', + 'pleyel-double-grand-00.jpg', + 'pleyel-double-grand-01.jpg', + 'pleyel-double-grand-02.jpg', + 'pleyel-moor-grand-00.jpg', + 'pleyel-moor-grand-01.jpg', + 'pleyel-moor-grand-02.jpg', + 'pleyel-moor-upright-00.jpg', + 'roland-fantom-8-00.jpg', + 'roland-fantom-8-01.jpg', + 'roland-fantom-8-02.jpg', + 'steinway-moor-grand-00.jpg', + 'stuart-and-sons-beleura-concert-grand-00.jpg', + 'stuart-and-sons-beleura-concert-grand-01.jpg', + 'stuart-and-sons-beleura-studio-grand-00.jpg', + 'yamaha-cp88-00.jpg', + 'yamaha-cp88-01.jpg', + 'yamaha-cp88-02.jpg', + 'yamaha-montage-8-00.webp', + ], + }, +] + +const DummyContent = ({contents = DEFAULT_CONTENTS}) => { + const content = contents[Math.floor(Math.random() * contents.length)] + + return ( + { + if (!(Array.isArray(content.images) && content.images.length > 0)) { + return

+ } + const shouldHaveImage = Math.floor(Math.random() * 2) === 1 + if (shouldHaveImage) { + const randomImage = Math.floor(Math.random() * content.images.length) + return ( + <> + {content.name} +

+ + ) + } + return

+ }, + }} + > + {content.text} + + ) +} + +export default DummyContent diff --git a/src/components/molecules/Link/index.tsx b/src/components/molecules/Link/index.tsx new file mode 100644 index 0000000..67f3839 --- /dev/null +++ b/src/components/molecules/Link/index.tsx @@ -0,0 +1,22 @@ +import * as React from 'react' +import NextLink from 'next/link' +import {UrlObject} from 'url' + +type Props = { + href: UrlObject + as?: UrlObject + prefetch?: boolean + replace?: boolean + shallow?: boolean + component?: React.ElementType +} + +const Link: React.FC = ({href, as, prefetch, replace, shallow, component: Component = 'a', ...etcProps}) => { + return ( + + + + ) +} + +export default Link diff --git a/src/components/templates/BasicLayout/index.tsx b/src/components/templates/BasicLayout/index.tsx new file mode 100644 index 0000000..1d90bd3 --- /dev/null +++ b/src/components/templates/BasicLayout/index.tsx @@ -0,0 +1,87 @@ +import * as React from 'react' +import styled from 'styled-components' +import * as T from '@tesseract-design/react-common' +import {Basic} from '@theoryofnekomata/viewfinder' +import Link from '../../molecules/Link' +import DummyContent from '../../molecules/DummyContent' +import Brand from '../../molecules/Brand' + +const TopBarComponent = styled('div')({ + backgroundColor: 'var(--color-bg, white)', + '::before': { + content: "''", + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + pointerEvents: 'none', + }, + '::after': { + backgroundColor: 'black', + opacity: 0.5, + content: "''", + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + pointerEvents: 'none', + }, +}) + +type Props = { + query: string + userLinkLabel: string + searchQueryKey: string + searchLabel: string + searchHint: string + popupQueryKey: string + userPopupQueryValue: string +} + +const BasicLayoutTemplate: React.FC = ({ + query, + userLinkLabel, + searchQueryKey, + searchLabel, + searchHint, + popupQueryKey, + userPopupQueryValue, +}) => { + return ( + } + topBarCenter={ +

+ + + } + userLink={ + + + + } + > + + + + + ) +} + +export default BasicLayoutTemplate diff --git a/src/components/templates/Index/index.tsx b/src/components/templates/Index/index.tsx new file mode 100644 index 0000000..dc4dd5b --- /dev/null +++ b/src/components/templates/Index/index.tsx @@ -0,0 +1,185 @@ +import * as React from 'react' +import styled from 'styled-components' +import * as T from '@tesseract-design/react-common' +import {Basic} from '@theoryofnekomata/viewfinder' +import Link from '../../molecules/Link' +import Brand from '../../molecules/Brand' + +const TopBarComponent = styled('div')({ + backgroundColor: 'var(--color-bg, white)', + '::before': { + content: "''", + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + pointerEvents: 'none', + }, + '::after': { + backgroundColor: 'black', + opacity: 0.5, + content: "''", + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + pointerEvents: 'none', + }, +}) + +const LinkContainer = styled('nav')({ + margin: '1rem 0', + display: 'grid', + gap: '1rem', + '@media (min-width: 720px)': { + gridTemplateColumns: 'repeat(2, 1fr)', + }, +}) + +const PreviewWrapper = styled('div')({ + overflow: 'hidden', + width: '100%', + paddingBottom: '150%', + position: 'relative', + marginTop: '0.25rem', + '::after': { + content: "''", + position: 'absolute', + top: 0, + left: 0, + width: '100%', + height: '100%', + border: '0.125rem solid', + boxSizing: 'border-box', + }, + '@media (min-width: 720px)': { + paddingBottom: '75%', + }, +}) + +const Preview = styled('iframe')({ + position: 'absolute', + top: 0, + left: 0, + border: 0, + display: 'block', + transformOrigin: 'top left', + width: '200%', + height: '200%', + transform: 'scale(0.5)', + '@media (min-width: 720px)': { + width: '400%', + height: '400%', + transform: 'scale(0.25)', + }, +}) + +const StyledLink = styled(Link)({ + display: 'block', + textDecoration: 'none', + // borderRadius: '0.25rem', + // padding: '1rem', + boxSizing: 'border-box', + // border: '0.125rem solid', +}) + +type Props = { + query: string + userLinkLabel: string + searchQueryKey: string + searchLabel: string + searchHint: string + popupQueryKey: string + userPopupQueryValue: string +} + +const IndexTemplate: React.FC = ({ + query, + userLinkLabel, + searchQueryKey, + searchLabel, + searchHint, + popupQueryKey, + userPopupQueryValue, +}) => { + return ( + } + topBarComponent={TopBarComponent} + topBarCenter={ + + ) +} + +export default IndexTemplate diff --git a/src/components/templates/LeftSidebarLayout/index.tsx b/src/components/templates/LeftSidebarLayout/index.tsx new file mode 100644 index 0000000..fb5bb9e --- /dev/null +++ b/src/components/templates/LeftSidebarLayout/index.tsx @@ -0,0 +1,129 @@ +import * as React from 'react' +import styled from 'styled-components' +import * as T from '@tesseract-design/react-common' +import {LeftSidebar} from '@theoryofnekomata/viewfinder' +import DummyContent from '../../molecules/DummyContent' +import Link from '../../molecules/Link' +import Brand from '../../molecules/Brand' + +const TopBarComponent = styled('div')({ + backgroundColor: 'var(--color-bg, white)', + '::before': { + content: "''", + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + pointerEvents: 'none', + }, + '::after': { + backgroundColor: 'black', + opacity: 0.5, + content: "''", + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + pointerEvents: 'none', + }, +}) + +const SidebarMainComponent = styled('div')({ + backgroundColor: 'var(--color-bg, white)', + zIndex: 2, + '::after': { + backgroundColor: 'black', + opacity: 0.25, + content: "''", + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + pointerEvents: 'none', + }, +}) + +type Props = { + query: string + menuLinkLabel: string + userLinkLabel: string + searchQueryKey: string + searchLabel: string + searchHint: string + popupQueryKey: string + userPopupQueryValue: string + sidebarSubpageQueryValue: string + subpageQueryKey: string + subpage: string +} + +const LeftSidebarLayoutTemplate: React.FC = ({ + query, + menuLinkLabel, + userLinkLabel, + searchQueryKey, + searchLabel, + searchHint, + popupQueryKey, + userPopupQueryValue, + sidebarSubpageQueryValue, + subpageQueryKey, + subpage, +}) => { + return ( + } + topBarComponent={TopBarComponent} + sidebarMainComponent={SidebarMainComponent} + sidebarMainOpen={subpage === sidebarSubpageQueryValue} + topBarCenter={ + + ) +} + +export default LeftSidebarLayoutTemplate diff --git a/src/components/templates/LeftSidebarWithMenuLayout/index.tsx b/src/components/templates/LeftSidebarWithMenuLayout/index.tsx new file mode 100644 index 0000000..e597ae1 --- /dev/null +++ b/src/components/templates/LeftSidebarWithMenuLayout/index.tsx @@ -0,0 +1,178 @@ +import * as React from 'react' +import styled from 'styled-components' +import * as T from '@tesseract-design/react-common' +import {LeftSidebarWithMenu} from '@theoryofnekomata/viewfinder' +import DummyContent from '../../molecules/DummyContent' +import Link from '../../molecules/Link' +import Brand from '../../molecules/Brand' + +const TopBarComponent = styled('div')({ + backgroundColor: 'var(--color-bg, white)', + '::before': { + content: "''", + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + pointerEvents: 'none', + }, + '::after': { + backgroundColor: 'black', + opacity: 0.5, + content: "''", + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + pointerEvents: 'none', + }, +}) + +const SidebarMainComponent = styled('div')({ + backgroundColor: 'var(--color-bg, white)', + zIndex: 2, + '::after': { + backgroundColor: 'black', + opacity: 0.25, + content: "''", + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + pointerEvents: 'none', + }, +}) + +const SidebarMenuComponent = styled('div')({ + backgroundColor: 'var(--color-bg, white)', + '::after': { + backgroundColor: 'black', + opacity: 0.4, + content: "''", + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + pointerEvents: 'none', + }, +}) + +type Props = { + query: string + menuLinkLabel: string + userLinkLabel: string + searchQueryKey: string + searchLabel: string + searchHint: string + popupQueryKey: string + moreSubpageQueryValue: string + sidebarSubpageQueryValue: string + moreLinkLabel: string + sidebarMenuItems: LeftSidebarWithMenu.MenuItem[] + userPopupQueryValue: string + subpageQueryKey: string + subpage: string +} + +const LeftSidebarLayoutTemplate: React.FC = ({ + query, + menuLinkLabel, + userLinkLabel, + searchQueryKey, + searchLabel, + searchHint, + popupQueryKey, + moreSubpageQueryValue, + sidebarSubpageQueryValue, + moreLinkLabel, + sidebarMenuItems, + userPopupQueryValue, + subpageQueryKey, + subpage, +}) => { + return ( + } + sidebarMainComponent={SidebarMainComponent} + sidebarMenuComponent={SidebarMenuComponent} + topBarComponent={TopBarComponent} + topBarCenter={ + + ) +} + +export default LeftSidebarLayoutTemplate diff --git a/src/components/templates/RightSidebarLayout/index.tsx b/src/components/templates/RightSidebarLayout/index.tsx new file mode 100644 index 0000000..cba230e --- /dev/null +++ b/src/components/templates/RightSidebarLayout/index.tsx @@ -0,0 +1,98 @@ +import * as React from 'react' +import styled from 'styled-components' +import * as T from '@tesseract-design/react-common' +import {RightSidebarStatic} from '@theoryofnekomata/viewfinder' +import DummyContent from '../../molecules/DummyContent' +import Link from '../../molecules/Link' +import Brand from '../../molecules/Brand' + +const TopBarComponent = styled('div')({ + backgroundColor: 'var(--color-bg, white)', + '::before': { + content: "''", + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + pointerEvents: 'none', + }, + '::after': { + backgroundColor: 'black', + opacity: 0.5, + content: "''", + width: '100%', + height: '100%', + position: 'absolute', + top: 0, + left: 0, + pointerEvents: 'none', + }, +}) + +const SidebarMainComponent = styled('div')({ + backgroundColor: 'var(--color-bg, white)', + zIndex: 2, +}) + +type Props = { + query: string + userLinkLabel: string + searchQueryKey: string + searchLabel: string + searchHint: string + popupQueryKey: string + userPopupQueryValue: string +} + +const RightSidebarLayoutTemplate: React.FC = ({ + query, + userLinkLabel, + searchQueryKey, + searchLabel, + searchHint, + popupQueryKey, + userPopupQueryValue, +}) => { + return ( + } + topBarComponent={TopBarComponent} + sidebarMainComponent={SidebarMainComponent} + topBarCenter={ + + ) +} + +export default RightSidebarLayoutTemplate diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx new file mode 100644 index 0000000..fbfe6a8 --- /dev/null +++ b/src/pages/_app.tsx @@ -0,0 +1,12 @@ +import * as React from 'react' + +type Props = { + Component: React.ElementType + pageProps: Record +} + +const MyApp: React.FC = ({Component, pageProps}) => { + return +} + +export default MyApp diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx new file mode 100644 index 0000000..2372a47 --- /dev/null +++ b/src/pages/_document.tsx @@ -0,0 +1,58 @@ +import * as React from 'react' +import Document, {Html, Head, Main, NextScript, DocumentInitialProps, DocumentContext} from 'next/document' +import {ServerStyleSheet} from 'styled-components' +import pkg from '../../package.json' +import config from '../../next.config' + +const publicUrl = process.env.NODE_ENV === 'production' ? pkg.homepage : config.basePath + +export default class MyDocument extends Document { + static async getInitialProps(ctx: DocumentContext): Promise { + const sheet = new ServerStyleSheet() + const originalRenderPage = ctx.renderPage + + try { + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: (App) => (props) => sheet.collectStyles(), + }) + + const initialProps = await Document.getInitialProps(ctx) + + return { + ...initialProps, + styles: ( + <> + {initialProps.styles} + + + + + + + {sheet.getStyleElement()} + + ), + } + } catch (err) { + console.error(err) + } finally { + sheet.seal() + } + } + + render(): React.ReactElement { + return ( + + + +

+ + + + ) + } +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx new file mode 100644 index 0000000..58b6292 --- /dev/null +++ b/src/pages/index.tsx @@ -0,0 +1,33 @@ +import {GetServerSideProps, NextPage} from 'next' +import {USER} from '../utilities/popups' +import {QUERY, POPUP} from '../utilities/queryKeys' +import Template from '../components/templates/Index' + +type Props = { + query: string +} + +const Page: NextPage = ({query}) => { + return ( +

Welcome