diff --git a/postcss.config.js b/postcss.config.js index 0f9b854..964b5e8 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -3,15 +3,15 @@ import tailwindcss from "tailwindcss"; import postcssPresentEnv from "postcss-preset-env"; import pxtorem from "postcss-pxtorem"; - export default { - plugins: [ - pxtorem({ - replace: true, - propList: ["*"], - }), - postcssPresentEnv(), - tailwindcss, - ...(process.env.NODE_ENV === "production" ? [cssnano] : []), - ] -}; \ No newline at end of file + plugins: [ + pxtorem({ + replace: true, + propList: ["*"], + }), + postcssPresentEnv(), + tailwindcss, + ...(process.env.NODE_ENV === "production" ? [cssnano] : []), + ], +}; + diff --git a/public/fonts/inter-3.19-roman/Inter-Italic-Roman.woff b/public/fonts/inter-3.19-roman/Inter-Italic-Roman.woff new file mode 100644 index 0000000..1b7e7be Binary files /dev/null and b/public/fonts/inter-3.19-roman/Inter-Italic-Roman.woff differ diff --git a/public/fonts/inter-3.19-roman/Inter-Italic-Roman.woff2 b/public/fonts/inter-3.19-roman/Inter-Italic-Roman.woff2 new file mode 100644 index 0000000..ead9a61 Binary files /dev/null and b/public/fonts/inter-3.19-roman/Inter-Italic-Roman.woff2 differ diff --git a/public/fonts/inter-3.19-roman/Inter-Regular-Roman.woff b/public/fonts/inter-3.19-roman/Inter-Regular-Roman.woff new file mode 100644 index 0000000..a92729c Binary files /dev/null and b/public/fonts/inter-3.19-roman/Inter-Regular-Roman.woff differ diff --git a/public/fonts/inter-3.19-roman/Inter-Regular-Roman.woff2 b/public/fonts/inter-3.19-roman/Inter-Regular-Roman.woff2 new file mode 100644 index 0000000..cfafe7b Binary files /dev/null and b/public/fonts/inter-3.19-roman/Inter-Regular-Roman.woff2 differ diff --git a/public/fonts/inter-3.19-roman/Inter-SemiBold-Roman.woff b/public/fonts/inter-3.19-roman/Inter-SemiBold-Roman.woff new file mode 100644 index 0000000..c52d382 Binary files /dev/null and b/public/fonts/inter-3.19-roman/Inter-SemiBold-Roman.woff differ diff --git a/public/fonts/inter-3.19-roman/Inter-SemiBold-Roman.woff2 b/public/fonts/inter-3.19-roman/Inter-SemiBold-Roman.woff2 new file mode 100644 index 0000000..fe41873 Binary files /dev/null and b/public/fonts/inter-3.19-roman/Inter-SemiBold-Roman.woff2 differ diff --git a/public/fonts/inter-3.19-roman/Inter-SemiBoldItalic-Roman.woff b/public/fonts/inter-3.19-roman/Inter-SemiBoldItalic-Roman.woff new file mode 100644 index 0000000..3be1151 Binary files /dev/null and b/public/fonts/inter-3.19-roman/Inter-SemiBoldItalic-Roman.woff differ diff --git a/public/fonts/inter-3.19-roman/Inter-SemiBoldItalic-Roman.woff2 b/public/fonts/inter-3.19-roman/Inter-SemiBoldItalic-Roman.woff2 new file mode 100644 index 0000000..a59a215 Binary files /dev/null and b/public/fonts/inter-3.19-roman/Inter-SemiBoldItalic-Roman.woff2 differ diff --git a/public/fonts/noto-sans-jp-v40-japanese-700.eot b/public/fonts/noto-sans-jp-v40-japanese-700.eot new file mode 100644 index 0000000..806d47b Binary files /dev/null and b/public/fonts/noto-sans-jp-v40-japanese-700.eot differ diff --git a/public/fonts/noto-sans-jp-v40-japanese-700.svg b/public/fonts/noto-sans-jp-v40-japanese-700.svg new file mode 100644 index 0000000..542b4bc --- /dev/null +++ b/public/fonts/noto-sans-jp-v40-japanese-700.svg @@ -0,0 +1,47 @@ +400: Font family not found

Google Fonts

400: Missing font family

The requested font families are not available.

Requested: Noto Sans JP (style: normal, weight: 700)

For reference, see the Google Fonts API documentation.

\ No newline at end of file diff --git a/public/fonts/noto-sans-jp-v40-japanese-700.woff b/public/fonts/noto-sans-jp-v40-japanese-700.woff new file mode 100644 index 0000000..51b60e1 Binary files /dev/null and b/public/fonts/noto-sans-jp-v40-japanese-700.woff differ diff --git a/public/fonts/noto-sans-jp-v40-japanese-700.woff2 b/public/fonts/noto-sans-jp-v40-japanese-700.woff2 new file mode 100644 index 0000000..1ccd6fd Binary files /dev/null and b/public/fonts/noto-sans-jp-v40-japanese-700.woff2 differ diff --git a/public/fonts/noto-sans-jp-v40-japanese-regular.eot b/public/fonts/noto-sans-jp-v40-japanese-regular.eot new file mode 100644 index 0000000..cf13341 Binary files /dev/null and b/public/fonts/noto-sans-jp-v40-japanese-regular.eot differ diff --git a/public/fonts/noto-sans-jp-v40-japanese-regular.svg b/public/fonts/noto-sans-jp-v40-japanese-regular.svg new file mode 100644 index 0000000..bc56608 --- /dev/null +++ b/public/fonts/noto-sans-jp-v40-japanese-regular.svg @@ -0,0 +1,47 @@ +400: Font family not found

Google Fonts

400: Missing font family

The requested font families are not available.

Requested: Noto Sans JP (style: normal, weight: 400)

For reference, see the Google Fonts API documentation.

\ No newline at end of file diff --git a/public/fonts/noto-sans-jp-v40-japanese-regular.woff b/public/fonts/noto-sans-jp-v40-japanese-regular.woff new file mode 100644 index 0000000..08a926c Binary files /dev/null and b/public/fonts/noto-sans-jp-v40-japanese-regular.woff differ diff --git a/public/fonts/noto-sans-jp-v40-japanese-regular.woff2 b/public/fonts/noto-sans-jp-v40-japanese-regular.woff2 new file mode 100644 index 0000000..9a9a298 Binary files /dev/null and b/public/fonts/noto-sans-jp-v40-japanese-regular.woff2 differ diff --git a/src/BlogArticle.tsx b/src/BlogArticle.tsx new file mode 100644 index 0000000..237c0a3 --- /dev/null +++ b/src/BlogArticle.tsx @@ -0,0 +1,26 @@ +import {JSX, Component} from "solid-js"; +import {css} from "@linaria/core"; +import cn from "classnames"; + + +interface Props { + children?: JSX.Element; +} + +const BlogArticle: Component = (props) => { + const {children} = $destructure(props); + + return ( +
+ {children} +
+ ); +}; + + +const _BlogArticle = css` +`; + + + +export default BlogArticle; diff --git a/src/app.css b/src/app.css deleted file mode 100644 index d75e4ab..0000000 --- a/src/app.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; -} - -@media (min-width: 480px) { - h1 { - max-width: none; - } - - p { - max-width: none; - } -} diff --git a/src/app.tsx b/src/app.tsx index e44e3c7..785961a 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,18 +1,11 @@ +import "~/style/global.style"; + import { MetaProvider, Title } from "@solidjs/meta"; -import { RouteDefinition, Router } from "@solidjs/router"; -import { Suspense, lazy } from "solid-js"; +import { Router } from "@solidjs/router"; +import { Suspense } from "solid-js"; import { config } from "~/config"; - import Header from "~/Header"; -import "~/style/global.style"; -import "./app.css"; - -const BlogIndex = lazy(() => import("~/BlogIndex")); -const GallerySite = lazy(() => import("~/GallerySite")); - -const articlesImportMap = import.meta.glob("./articles/*.mdx"); -const getArticleComponent = (name: string) => - articlesImportMap[`./articles/${name}.mdx`]; +import { routes } from "~/routes"; export default function App() { return ( @@ -28,38 +21,7 @@ export default function App() { )} > - { - [ - { path: "/", component: () => }, - { path: "/gallery", component: () => }, - { - path: "/articles/:name", - component: (p) => { - // router bug: 'name' not in 'p', update when this is fixed - const name = p.location.pathname.replace( - `${config.base}/articles/`, - "", - ); - const Article = lazy(getArticleComponent(name) as any); - return ( -
{ - // return hi; - // }, - } - } - {...p} - /> - ); - }, - matchFilters: { - name: (name: string) => !!getArticleComponent(name), - }, - }, - ] as RouteDefinition[] - } + {routes} ); } diff --git a/src/atoms/Text.md b/src/atoms/Text.md deleted file mode 100644 index 92be51e..0000000 --- a/src/atoms/Text.md +++ /dev/null @@ -1 +0,0 @@ -Hello **world**! diff --git a/src/components/Counter.css b/src/components/Counter.css deleted file mode 100644 index 5c7ed0a..0000000 --- a/src/components/Counter.css +++ /dev/null @@ -1,7 +0,0 @@ -.increment:focus { - border: 2px solid #335d92; -} - -.increment:active { - background-color: rgba(68, 107, 158, 0.2); -} diff --git a/src/components/Counter.tsx b/src/components/Counter.tsx deleted file mode 100644 index 4321396..0000000 --- a/src/components/Counter.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { css } from "@linaria/core"; -import "./Counter.css"; - -export default function Counter() { - let count = $signal(0); - return ( - - ); -} - -const increment = css` - font-family: inherit; - font-size: inherit; - padding: 1em 2em; - color: #335d92; - background-color: rgba(68, 107, 158, 0.1); - border-radius: 2em; - border: 2px solid blue; - outline: none; - width: 200px; - font-variant-numeric: tabular-nums; -`; diff --git a/src/routeMap.tsx b/src/routeMap.tsx index 214636c..48ece4d 100644 --- a/src/routeMap.tsx +++ b/src/routeMap.tsx @@ -1,7 +1,9 @@ import App from "~/app"; +import BlogIndex from "~/BlogIndex"; import GallerySite from "~/GallerySite"; export const routeMap: Record = { "/*": [App], + "/": [BlogIndex], "/gallery": [GallerySite], } as any; diff --git a/src/routes.tsx b/src/routes.tsx new file mode 100644 index 0000000..f9b54d0 --- /dev/null +++ b/src/routes.tsx @@ -0,0 +1,37 @@ +import { RouteDefinition } from "@solidjs/router"; +import { lazy } from "solid-js"; +import { config } from "~/config"; + +const BlogIndex = lazy(() => import("~/BlogIndex")); + +const articlesImportMap = import.meta.glob("./articles/*.mdx"); +const getArticleComponent = (name: string) => + articlesImportMap[`./articles/${name}.mdx`]; + +export const routes: RouteDefinition[] = [ + { path: "/", component: () => }, + { path: "/gallery", component: lazy(() => import("~/GallerySite")) }, + { + path: "/articles/:name", + component: (p) => { + // router bug: 'name' not in 'p', update when this is fixed + const name = p.location.pathname.replace(`${config.base}/articles/`, ""); + const Article = lazy(getArticleComponent(name) as any); + return ( +
{ + // return hi; + // }, + } + } + {...p} + /> + ); + }, + matchFilters: { + name: (name: string) => !!getArticleComponent(name), + }, + }, +]; diff --git a/src/style/fontFaces.tsx b/src/style/fontFaces.tsx index b2c52cb..fa9d39a 100644 --- a/src/style/fontFaces.tsx +++ b/src/style/fontFaces.tsx @@ -1,9 +1,11 @@ type FontLoader = (font: string, format: string) => string; const japaneseCodeRange = (show: boolean) => - show ? `unicode-range: U+3000-30FF , U+FF00-FFEF , U+4E00-9FAF ;` : ""; + show ? `unicode-range: U+3000-30FF , U+FF00-FFEF , U+4E00-9FAF ;` : ""; const nameSuffix = (isFull: boolean) => (isFull ? "" : " JP Only"); +const interPath = `fonts/inter-3.19-roman/Inter`; + // language=SCSS const notoFragments = (isFull: boolean, fontLoader?: FontLoader) => ` /* noto-sans-jp-regular - japanese */ @@ -13,20 +15,20 @@ const notoFragments = (isFull: boolean, fontLoader?: FontLoader) => ` font-style: normal; font-weight: 400; font-display: swap; - src: url('/assets/resources/static/fonts/noto-sans-jp-v40-japanese-regular.eot'); /* IE9 Compat Modes */ + src: url('${interPath}/noto-sans-jp-v40-japanese-regular.eot'); /* IE9 Compat Modes */ src: local('Noto Sans Japanese Regular'), local('NotoSansJapanese-Regular'), - url('/assets/resources/static/fonts/noto-sans-jp-v40-japanese-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/assets/resources/static/fonts/noto-sans-jp-v40-japanese-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('/assets/resources/static/fonts/noto-sans-jp-v40-japanese-regular.woff') format('woff'), /* Modern Browsers */ - url('/assets/resources/static/fonts/noto-sans-jp-v40-japanese-regular.svg#NotoSansJP') format('svg'); /* Legacy iOS */ + url('${interPath}/noto-sans-jp-v40-japanese-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('${interPath}/noto-sans-jp-v40-japanese-regular.woff2') format('woff2'), /* Super Modern Browsers */ + url('${interPath}/noto-sans-jp-v40-japanese-regular.woff') format('woff'), /* Modern Browsers */ + url('${interPath}/noto-sans-jp-v40-japanese-regular.svg#NotoSansJP') format('svg'); /* Legacy iOS */ ${ - fontLoader != null - ? `src: ${fontLoader( - "/assets/resources/static/fonts/noto-sans-jp-v40-japanese-regular.woff2", - "woff2" - )};` - : `` + fontLoader != null + ? `src: ${fontLoader( + `${interPath}/noto-sans-jp-v40-japanese-regular.woff2`, + "woff2", + )};` + : `` } } @@ -37,26 +39,24 @@ const notoFragments = (isFull: boolean, fontLoader?: FontLoader) => ` font-style: normal; font-weight: 700; font-display: swap; - src: url('/assets/resources/static/fonts/noto-sans-jp-v40-japanese-700.eot'); /* IE9 Compat Modes */ + src: url('${interPath}/noto-sans-jp-v40-japanese-700.eot'); /* IE9 Compat Modes */ src: local('Noto Sans Japanese Medium'), local('NotoSansJapanese-Medium'), - url('/assets/resources/static/fonts/noto-sans-jp-v40-japanese-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('/assets/resources/static/fonts/noto-sans-jp-v40-japanese-700.woff2') format('woff2'), /* Super Modern Browsers */ - url('/assets/resources/static/fonts/noto-sans-jp-v40-japanese-700.woff') format('woff'), /* Modern Browsers */ - url('/assets/resources/static/fonts/noto-sans-jp-v40-japanese-700.svg#NotoSansJP') format('svg'); /* Legacy iOS */ + url('${interPath}/noto-sans-jp-v40-japanese-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('${interPath}/noto-sans-jp-v40-japanese-700.woff2') format('woff2'), /* Super Modern Browsers */ + url('${interPath}/noto-sans-jp-v40-japanese-700.woff') format('woff'), /* Modern Browsers */ + url('${interPath}/noto-sans-jp-v40-japanese-700.svg#NotoSansJP') format('svg'); /* Legacy iOS */ ${ - fontLoader != null - ? `src: ${fontLoader( - "/assets/resources/static/fonts/noto-sans-jp-v40-japanese-700.woff2", - "woff2" - )};` - : `` + fontLoader != null + ? `src: ${fontLoader( + `${interPath}/noto-sans-jp-v40-japanese-700.woff2`, + "woff2", + )};` + : `` } } `; -const interPath = `/assets/resources/static/fonts/inter-3.19-roman/Inter`; - // language=SCSS export const fontFaceFragmentNativeInter = ` ${notoFragments(true)} @@ -78,9 +78,9 @@ export const fontFaceFragment = (fontLoader?: FontLoader) => ` url('${interPath}-Regular-Roman.woff2') format('woff2'), /* Super Modern Browsers */ url('${interPath}-Regular-Roman.woff') format('woff'), /* Modern Browsers */ ${ - fontLoader != null - ? `src: ${fontLoader(`${interPath}-Regular-Roman.woff2`, "woff2")};` - : `` + fontLoader != null + ? `src: ${fontLoader(`${interPath}-Regular-Roman.woff2`, "woff2")};` + : `` } } @@ -93,9 +93,9 @@ export const fontFaceFragment = (fontLoader?: FontLoader) => ` url('${interPath}-Italic-Roman.woff2') format('woff2'), /* Super Modern Browsers */ url('${interPath}-Italic-Roman.woff') format('woff'), /* Modern Browsers */ ${ - fontLoader != null - ? `src: ${fontLoader(`${interPath}-Italic-Roman.woff2`, "woff2")};` - : `` + fontLoader != null + ? `src: ${fontLoader(`${interPath}-Italic-Roman.woff2`, "woff2")};` + : `` } } @@ -109,12 +109,9 @@ export const fontFaceFragment = (fontLoader?: FontLoader) => ` url('${interPath}-SemiBold-Roman.woff2') format('woff2'), /* Super Modern Browsers */ url('${interPath}-SemiBold-Roman.woff') format('woff'), /* Modern Browsers */ ${ - fontLoader != null - ? `src: ${fontLoader( - `${interPath}-SemiBold-Roman.woff2`, - "woff2" - )};` - : `` + fontLoader != null + ? `src: ${fontLoader(`${interPath}-SemiBold-Roman.woff2`, "woff2")};` + : `` } } @@ -127,12 +124,12 @@ export const fontFaceFragment = (fontLoader?: FontLoader) => ` url('${interPath}-SemiBoldItalic-Roman.woff2') format('woff2'), /* Super Modern Browsers */ url('${interPath}-SemiBoldItalic-Roman.woff') format('woff'), /* Modern Browsers */ ${ - fontLoader != null - ? `src: ${fontLoader( - `${interPath}-SemiBoldItalic-Roman.woff2`, - "woff2" - )};` - : `` + fontLoader != null + ? `src: ${fontLoader( + `${interPath}-SemiBoldItalic-Roman.woff2`, + "woff2", + )};` + : `` } } `; diff --git a/src/style/global.style.tsx b/src/style/global.style.tsx index 28a84df..612cae8 100644 --- a/src/style/global.style.tsx +++ b/src/style/global.style.tsx @@ -1,93 +1,21 @@ import { colorVariablesCSS } from "~/style/colorVariableCSS"; import { - bigText, - bodyText, - breakpoint, - breakpointFrom, - breakpointUntil, color, - contentContainer, heading1Text, - heading2Text, - heading3Text, - jumboText, - largeText, primaryFontBold, primaryFontBoldItalic, primaryFontItalic, - subText, text, } from "~/style/commonStyle"; -// import "@client/style/fontPreamble.style"; +import "~/style/fontPreamble.style"; import "~/style/layerPreamble.style"; import "~/style/reset.scss"; +import "~/style/tw.style"; // import "~/style/styleLoadOrder"; -import { baseText, bodyTextHeight } from "~/style/textStylesTS"; import { css } from "@linaria/core"; +import { baseText, bodyTextHeight } from "~/style/textStylesTS"; export const globals = css` - @layer tw-base { - @tailwind base; - } - // - @layer tw-utilities { - @tailwind components; - @tailwind utilities; - @tailwind variants; - } - // - @layer tw-base { - @layer base { - .text-sub { - ${subText}; - } - .text-body { - ${bodyText}; - } - .text-heading1 { - ${heading1Text}; - } - .text-heading2 { - ${heading2Text}; - } - .text-heading3 { - ${heading3Text}; - } - .text-big { - ${bigText}; - } - .text-large { - ${largeText}; - } - .text-jumbo { - ${jumboText}; - } - .text-bold { - ${primaryFontBold}; - } - .content-container { - ${contentContainer}; - } - .wide { - ${breakpoint("m")} { - margin-left: -32px; - width: calc(100% + 64px); - } - ${breakpointUntil("m")} { - margin-left: -16px; - width: calc(100% + 32px); - } - } - .ultra-wide { - @extend .wide; - ${breakpointFrom("l")} { - margin-left: calc(-1 * (100vw - (600px + 30vw)) / 2); - width: 100vw; - } - } - } - } - // @layer tw-base { html { ${baseText} diff --git a/src/style/reset.scss b/src/style/reset.scss index b85bf8a..34c4216 100644 --- a/src/style/reset.scss +++ b/src/style/reset.scss @@ -90,7 +90,7 @@ padding: 0; border: 0; font-size: 100%; - font: inherit; + // font: inherit; vertical-align: baseline; } @@ -136,7 +136,7 @@ blockquote { &::before, &::after { - content: ''; + content: ""; content: none; } } @@ -144,7 +144,7 @@ q { &::before, &::after { - content: ''; + content: ""; content: none; } } @@ -175,4 +175,5 @@ *:focus { outline: none; } -} \ No newline at end of file +} + diff --git a/src/style/tw.style.tsx b/src/style/tw.style.tsx new file mode 100644 index 0000000..42ac955 --- /dev/null +++ b/src/style/tw.style.tsx @@ -0,0 +1,85 @@ +import { colorVariablesCSS } from "~/style/colorVariableCSS"; +import { + bigText, + bodyText, + breakpoint, + breakpointFrom, + breakpointUntil, + color, + contentContainer, + heading1Text, + heading2Text, + heading3Text, + jumboText, + largeText, + primaryFontBold, + primaryFontBoldItalic, + primaryFontItalic, + subText, + text, +} from "~/style/commonStyle"; +import { css } from "@linaria/core"; + +export const globals = css` + @layer tw-base { + @tailwind base; + } + // + @layer tw-utilities { + @tailwind components; + @tailwind utilities; + @tailwind variants; + } + + @layer tw-base { + @layer base { + .text-sub { + ${subText}; + } + .text-body { + ${bodyText}; + } + .text-heading1 { + ${heading1Text}; + } + .text-heading2 { + ${heading2Text}; + } + .text-heading3 { + ${heading3Text}; + } + .text-big { + ${bigText}; + } + .text-large { + ${largeText}; + } + .text-jumbo { + ${jumboText}; + } + .text-bold { + ${primaryFontBold}; + } + .content-container { + ${contentContainer}; + } + .wide { + ${breakpoint("m")} { + margin-left: -32px; + width: calc(100% + 64px); + } + ${breakpointUntil("m")} { + margin-left: -16px; + width: calc(100% + 32px); + } + } + .ultra-wide { + @extend .wide; + ${breakpointFrom("l")} { + margin-left: calc(-1 * (100vw - (600px + 30vw)) / 2); + width: 100vw; + } + } + } + } +`; diff --git a/vite/SSR/SSRPreloadDev.tsx b/vite/SSR/SSRPreloadDev.tsx index b42b756..dfd57d1 100644 --- a/vite/SSR/SSRPreloadDev.tsx +++ b/vite/SSR/SSRPreloadDev.tsx @@ -11,34 +11,59 @@ const getModuleGraph = () => { const fixUrl = (url: string) => (url.startsWith("/") ? url : "/" + url); +const wihtoutQuery = (url: string) => url.split("?")[0]; + function renderAsset(url: string) { + const urlWithoutSearch = wihtoutQuery(url); + if (urlWithoutSearch.endsWith(".woff2")) + return ( + + ); + // if (urlWithoutSearch.endsWith(".js")) return ; + + // throw new Error(`unknown filetype in SSR renderAsset: '${url}'`); } function renderInlineCSS(id: string, code: string) { + // console.log(id); return