@xyd-js/theme-poetry 0.1.0-xyd.5 → 0.1.0-xyd.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyd-js/theme-poetry",
-  "version": "0.1.0-xyd.5",
+  "version": "0.1.0-xyd.68",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -13,22 +13,27 @@
     }
   },
   "dependencies": {
+    "@docsearch/css": "^3.9.0",
+    "@docsearch/react": "^3.9.0",
     "@linaria/atomic": "^6.2.0",
     "@linaria/core": "^6.2.0",
-    "@xyd-js/xtokens": "0.1.0-xyd.1"
+    "@orama/react-components": "^0.7.0",
+    "@xyd-js/atlas": "0.1.0-xyd.57",
+    "@xyd-js/ui": "0.1.0-xyd.57"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router": "^7.1.1",
-    "@xyd-js/framework": "0.1.0-xyd.16",
-    "@xyd-js/components": "0.1.0-xyd.1"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router": "^7.6.2",
+    "@xyd-js/components": "0.1.0-xyd.52",
+    "@xyd-js/framework": "0.1.0-xyd.73",
+    "@xyd-js/themes": "0.1.1-xyd.44"
   },
   "devDependencies": {
-    "@babel/preset-typescript": "^7.26.0",
-    "@babel/preset-react": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-flow": "^7.25.9",
+    "@babel/preset-react": "^7.26.0",
+    "@babel/preset-typescript": "^7.26.0",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
@@ -39,13 +44,13 @@
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.47",
     "postcss-import": "^16.1.0",
+    "rimraf": "^3.0.2",
     "rollup": "^4.27.4",
     "rollup-plugin-css-only": "^4.5.2",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "tsup": "^8.3.0",
-    "rimraf": "^3.0.2"
+    "tsup": "^8.3.0"
   },
   "scripts": {
     "clean": "rimraf build",

package/rollup.config.js

@@ -9,16 +9,24 @@ import postcssImport from 'postcss-import';
 import wyw from '@wyw-in-js/rollup';
 
 const require = createRequire(import.meta.url);
-const {dependencies} = require('./package.json', {assert: {type: 'json'}});
 
-// unify theme build system
+const {
+    dependencies,
+    peerDependencies,
+    devDependencies
+} = require('./package.json', {assert: {type: 'json'}});
+
 const external = [
     ...Object.keys(dependencies),
-    'react',
-    'react-router',
-
-    // TODO: another `@xyd` packages?
-    '@xyd-js/framework/react'
+    ...Object.keys(peerDependencies),
+    ...Object.keys(devDependencies),
+    "@xyd-js/framework/react",
+    "@xyd-js/components/brand",
+    "@xyd-js/components/coder",
+    "@xyd-js/components/content",
+    "@xyd-js/components/layouts",
+    "@xyd-js/components/pages",
+    "@xyd-js/components/views",
 ];
 
 export default [

package/src/imports.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

package/src/index.css

@@ -1,67 +1,7 @@
-@import "vars.css";
-
-@font-face {
-    font-family: 'Mona Sans';
-    src: url('../public/fonts/MonaSans/Mona-Sans.woff2') format('woff2 supports variations'),
-    url('../public/fonts/MonaSans/Mona-Sans.woff2') format('woff2-variations');
-    font-weight: 200 900;
-    font-stretch: 75% 125%;
-}
-
 html {
-    font-family: 'Mona Sans', serif;
-}
-
-body {
-    margin: 0;
-}
-
-ol, ul, menu {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
-    -webkit-appearance: button;
-    background-color: transparent;
-    background-image: none;
-}
-
-button, [role=button] {
-    cursor: pointer;
-}
-
-button, select {
-    text-transform: none;
-}
-
-button, input, optgroup, select, textarea {
-    font-family: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    font-size: 100%;
-    font-weight: inherit;
-    line-height: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    margin: 0;
-    padding: 0;
-}
-
-a {
-    color: inherit;
-    text-decoration: inherit;
-}
-
-*, :before, :after {
-    box-sizing: border-box;
-    border-width: 0;
-    border-style: solid;
-}
-
-p {
-    padding: 0;
-    margin: 0;
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    font-weight: 400;
+    font-optical-sizing: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
-

package/src/override.css

@@ -1,7 +1,87 @@
-.xyd_ui-comp-sidebar, .xyd_ui-comp-nav-logo {
-    padding-left: 200px;
-}
+@layer themes {
+    /* Layout */
+    xyd-layout-primary {
+        > [part="header"] {
+            margin-left: var(--xyd-sidebar-width);
+        }
 
-.xyd_comp-comp-heading {
-    font-weight: 400;
-}
+        [part="main"] {
+            background: var(--dark16);
+        }
+
+        [part="sidebar"] {
+            position: fixed;
+            top: var(--xyd-page-gutter);
+            z-index: 1;
+        }
+
+        [part="page"] {
+            position: relative;
+            left: var(--xyd-sidebar-width);
+            margin-right: var(--xyd-sidebar-width);
+            right: 0;
+            background: var(--white);
+            border-top-left-radius: 8px;
+        }
+
+        @media (max-width: 1024px) {
+            > [part="header"] {
+                margin-left: 0
+            }
+
+            [part="page"] {
+                left: 0;
+                margin-right: 0;
+            }
+        }
+    }
+
+    /* Nav */
+    xyd-nav {
+        [part="logo"] {
+            display: none;
+        }
+
+        [part="nav"] {
+            justify-content: space-between;
+        }
+        
+        [part="list"] {
+            justify-content: flex-start;
+        }
+    }
+    xyd-subnav {
+        border-radius: 0px;
+        margin-top: 0px;
+        background-color: var(--xyd-sidebar-bgcolor);
+    }
+
+    /* Code */
+    xyd-codetabs-languages [part=language-trigger][data-state=active] {
+        font-weight: bold;
+        border: none;
+    }
+
+    xyd-code-pre [part="pre"] {
+        border-top: none;
+    }
+
+    xyd-search-button {
+        background: var(--white);
+    }
+
+    [data-color-scheme="dark"] {
+        xyd-layout-primary {
+            [part="main"] {
+                background: var(--white);
+            }
+        }
+    }
+    @media (prefers-color-scheme: dark) {
+        :root:not([data-color-scheme="light"]):not([data-color-scheme="dark"]) xyd-layout-primary {
+            [part="main"] {
+                background: var(--white);
+            }
+        }
+    }
+}

package/src/theme.tsx

@@ -1,78 +1,58 @@
 import React from "react"
 
-import {helperContent} from "@xyd-js/components/content"
-import type {
-    ITheme
-} from "@xyd-js/framework"
-import {
-    FwNav,
-    FwToc,
-    FwNavLinks,
+import { Text } from "@xyd-js/components/writer"
+import { UISidebar } from "@xyd-js/ui"
+import { FwLogo, FwNav, useComponents } from "@xyd-js/framework/react"
+import { BaseTheme } from "@xyd-js/themes"
 
-    FwSidebarGroups,
-} from "@xyd-js/framework/react"
+import "./imports.css"
 
-import {Layout} from "./components/Layouts";
-
-import "@xyd-js/ui/index.css";
-import "@xyd-js/components/index.css";
-// TODO: what about atlas? it's loaded by plugin - probably we need better mechanism for loading css
-// import '@xyd-js/atlas/index.css'; TODO: FINISH !!!
+import "@xyd-js/themes/index.css"
 
 import './index.css';
 import './override.css';
+import './vars.css';
+
+export default class ThemePoetry extends BaseTheme {
+    constructor() {
+        super();
+
+        if (this.settings?.coder) {
+            this.settings.coder.syntaxHighlight = "dark-plus";
+        } else {
+            this.settings.coder = {
+                syntaxHighlight: "dark-plus",
+            }
+        }
 
-const {Content} = helperContent()
-
-export interface ThemeSettings {
-    hideToc?: boolean // TODO: better prop name?
-    sidebar?: {
-        onePathBehaviour?: boolean
-        clientSideRouting?: boolean
+        this.surfaces.define("sidebar.top", <_Search />);
     }
-    contentNav?: React.ReactNode
-    layout?: {
-        kind?: "fullwidth" | "equal"
-    }
-}
 
-export interface ThemeProps extends ITheme<ThemeSettings> {
+    protected Navbar() {
+        return <>
+            <FwNav />
+        </>
+    }
 }
 
-export default function ThemePoetry(props: ThemeProps) {
-    return <Layout
-        header={<Navbar/>}
-        aside={<Sidebar themeSettings={props.themeSettings}/>}
-        content={<>
-            {/*TODO: optional breadcrumbs*/}
-            {/*{props.breadcrumbs ? <FwBreadcrumbs/> : undefined}*/}
-            <Content>
-                {props.children}
-            </Content>
+function _Search() {
+    const components = useComponents()
 
-            <FwNavLinks/>
-        </>
-        }
-        contentNav={
-            props.themeSettings?.hideToc
-                ? null
-                : props.themeSettings?.contentNav ? props.themeSettings.contentNav : <FwToc/>
-        }
-        kind={props.themeSettings?.layout?.kind || undefined}
-    />
-}
+    const SearchComponent = components?.Search
+    if (!SearchComponent) {
+        return null
+    }
 
-// TODO: finish search
-function Navbar() {
     return <>
-        <FwNav kind="middle"/>
+        <UISidebar.Item button anchor>
+            <a href="/">
+                <FwLogo />
+            </a>
+        </UISidebar.Item>
+
+        <UISidebar.Item button anchor>
+            <SearchComponent />
+        </UISidebar.Item>
     </>
 }
 
-// TODO: onePathBehaviour does not work - fix that
-function Sidebar({themeSettings}: { themeSettings?: ThemeSettings }) {
-    return <FwSidebarGroups
-        onePathBehaviour={themeSettings?.sidebar?.onePathBehaviour}
-        clientSideRouting={themeSettings?.sidebar?.clientSideRouting}
-    />
-}

package/src/vars.css

@@ -1,5 +1,58 @@
 :root {
-    --headingEffect-color-tertiary: rgba(23, 119, 184, 0.5);
-    --headingEffect-color-secondary: rgb(121, 85, 241);
-    --headingEffect-color-primary: rgb(255, 105, 180);
+    --poetry-blue80: #3b82f6;
+    --poetry-blue100: #1d4ed8;
+
+    --poetry-gray64: #f5f5f5;
+    --poetry-gray80: #e0e0e0;
+
+    --poetry-gray64: #363434;
+    --poetry-gray80: #1e1e1e;
+}
+
+:root {
+    --theme-color-primary: var(--poetry-blue80);
+    --theme-color-primary-active: var(--poetry-blue100);
+}
+
+:root {
+    --xyd-page-gutter: 0;
+}
+
+:root {
+    --xyd-font-weight-semibold: 700;
+}
+
+:root {
+    --xyd-codetabs-bgcolor: var(--poetry-gray80);
+    --xyd-codetabs-color: var(--white);
+    --xyd-codetabs-color--hover: var(--poetry-gray64);
+
+    --xyd-coder-code-mark-bgcolor: var(--xyd-codetabs-color--hover);
+    --xyd-coder-code-mark-border-color: var(--color-primary);
+}
+
+:root {
+    --XydAtlas-Ref-Palette-White: var(--white);
+    --XydAtlas-Ref-Palette-Primary-60: var(--color-primary);
+    --XydAtlas-Ref-Palette-Primary-70: var(--color-primary--active);
+    --XydAtlas-Ref-Palette-Primary-80: var(--color-primary--active);
+
+    --XydAtlas-Ref-Palette-Neutral-10: var(--dark8);
+    --XydAtlas-Ref-Palette-Neutral-20: var(--dark16);
+    --XydAtlas-Ref-Palette-Neutral-30: var(--dark32);
+    --XydAtlas-Ref-Palette-Neutral-40: var(--dark40);
+    --XydAtlas-Ref-Palette-Neutral-70: var(--dark48);
+    --XydAtlas-Ref-Palette-Neutral-80: var(--dark60);
+    --XydAtlas-Ref-Palette-Neutral-100: var(--dark80);
+}
+
+/* Override dark mode colors to maintain Poetry theme */
+[data-color-scheme="dark"] {
+    --xyd-codetabs-color: var(--black);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-color-scheme="light"]):not([data-color-scheme="dark"]) {
+        --xyd-codetabs-color: var(--black);
+    }
 }

package/tsconfig.json

@@ -1,5 +1,8 @@
 {
   "compilerOptions": {
+    "paths": {
+        "@xyd-js/themes": ["../xyd-themes/src"],
+    },
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "bundler",

package/public/fonts/MonaSans/LICENSE

@@ -1,93 +0,0 @@
-Copyright (c) 2023, GitHub https://github.com/github/mona-sans
-with Reserved Font Name "Mona Sans"
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting — in part or in whole — any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.