lupine.press 1.0.0

package/src/frames/press-frame.tsx

@@ -0,0 +1,163 @@
+import {
+  VNode,
+  CssProps,
+  MediaQueryRange,
+  bindLinks,
+  RefProps,
+  MediaQueryMaxWidth,
+  isFrontEnd,
+} from 'lupine.components';
+import { pressLoad } from '../services/press-load';
+import { getSidebarScroll, setSidebarScroll } from '../services';
+
+export interface PressFrameProps {
+  header: VNode<any>;
+  sidemenu: VNode<any>;
+  sidemenuWidth?: string;
+  hideSidemenu?: boolean;
+  content: VNode<any>;
+  css?: CssProps;
+}
+
+export const PressFrame = (props: PressFrameProps) => {
+  if (isFrontEnd()) {
+    // Global navigation helper requested by user
+    (window as any).lpPressLoad = pressLoad;
+  }
+
+  const cssMarkdown: CssProps = {
+    // used in built markdown htmls, put under some element to override global.css
+    'h1, h2, h3': {
+      borderBottom: '1px solid var(--press-border-color)',
+      paddingBottom: '0.3em',
+      marginTop: '1.5em',
+      position: 'relative',
+      scrollMarginTop: '80px',
+      '&:first-child': { marginTop: 0 },
+      '&:hover .header-anchor': { opacity: 1 },
+    },
+    '.header-anchor': {
+      position: 'absolute',
+      left: '-1.5rem',
+      width: '1rem',
+      opacity: 0,
+      textDecoration: 'none',
+      color: 'var(--press-brand-color)',
+      fontSize: '0.8em',
+      transition: 'opacity 0.2s',
+    },
+    ol: {
+      listStyleType: 'decimal',
+    },
+    'li, p': {
+      margin: '0.5em 0',
+    },
+    pre: {
+      backgroundColor: 'var(--secondary-bg-color)',
+      padding: '1rem',
+      borderRadius: '8px',
+      overflowX: 'auto',
+    },
+    code: {
+      fontFamily: 'var(--font-family-mono, monospace)',
+    },
+  };
+
+  const cssContainer: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    height: '100%',
+    minHeight: '100%',
+    position: 'relative',
+    ...cssMarkdown,
+    ...props.css,
+    '.press-frame-box': {
+      display: 'flex',
+      flex: '1',
+      flexDirection: 'column',
+      height: '100%',
+      width: '100%',
+      maxWidth: MediaQueryMaxWidth.DesktopMax,
+      margin: 'auto',
+      // trick: to put two padding-top properties
+      'padding-top ': 'constant(safe-area-inset-top)',
+      'padding-top': 'env(safe-area-inset-top)',
+    },
+    '.press-frame-header': {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      padding: '4px 16px 4px 0px',
+      width: '100%',
+    },
+    '.press-frame-main': {
+      display: 'flex',
+      flex: '1',
+      flexDirection: 'row',
+      overflowY: 'auto',
+      scrollbarWidth: 'none',
+      borderTop: '1px solid var(--press-border-color)',
+      minHeight: '0',
+      scrollBehavior: 'smooth',
+      '&::-webkit-scrollbar': {
+        display: 'none',
+      },
+    },
+    '.press-frame-main .padding-block': {
+      padding: '0 16px',
+    },
+    '.press-frame-content': {
+      display: 'flex',
+      flex: '1',
+      flexDirection: 'column',
+      overflowY: 'auto',
+      scrollbarWidth: 'none',
+    },
+    '.press-frame-sidemenu': {
+      width: props.sidemenuWidth || '260px',
+      display: 'flex',
+      borderRight: '1px solid var(--press-border-color)',
+      overflowX: 'hidden',
+      overflowY: 'auto',
+      color: 'var(--sidebar-color)',
+      scrollbarWidth: 'none',
+      '&::-webkit-scrollbar': {
+        display: 'none',
+      },
+      // '&::-webkit-scrollbar': { width: '4px' },
+      // '&::-webkit-scrollbar-thumb': { backgroundColor: 'var(--press-border-color)' },
+      // backgroundColor: 'var(--sidebar-bg-color)',
+    },
+    [MediaQueryRange.TabletBelow]: {
+      '.press-frame-sidemenu': {
+        display: 'none',
+      },
+    },
+  };
+
+  const ref: RefProps = {
+    onLoad: async (el: Element) => {
+      bindLinks(el);
+      const sidemenu = el.querySelector('.press-frame-sidemenu');
+      if (sidemenu) {
+        sidemenu.scrollTop = getSidebarScroll();
+        sidemenu.addEventListener('scroll', () => {
+          setSidebarScroll(sidemenu.scrollTop);
+        });
+      }
+    },
+  };
+
+  return (
+    <div ref={ref} css={cssContainer} class='press-frame'>
+      <div class='press-frame-box'>
+        <div class='press-frame-header'>{props.header}</div>
+        <div class='press-frame-main'>
+          {!props.hideSidemenu && <div class='press-frame-sidemenu'>{props.sidemenu}</div>}
+          <div class='press-frame-content'>{props.content}</div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/index.ts

@@ -0,0 +1,7 @@
+import './styles/global.css';
+
+export * from './components';
+export * from './frames';
+export * from './page';
+export * from './services';
+export * from './styles/press-themes';

package/src/page/index.ts

@@ -0,0 +1 @@
+export * from './press-page';

package/src/page/press-page.tsx

@@ -0,0 +1,73 @@
+import { isFrontEnd, PageProps } from 'lupine.components';
+import { PressLayout } from '../components';
+import { getPressData } from '../services/cache';
+
+export const PressPage = (props: PageProps) => {
+  if (!isFrontEnd()) {
+    return <div></div>;
+  }
+
+  const markdownConfig = getPressData();
+  // Derive language from URL path first
+  const pathParts = window.location.pathname.split('/');
+  const pathLang = pathParts[1]; // /en/... or /zh/...
+
+  // Get supported langs from global config
+  const globalConfig = markdownConfig['/']?.data || {};
+  const supportedLangs = Array.isArray(globalConfig.lang) ? globalConfig.lang.map((l: any) => l.id) : ['en', 'zh'];
+
+  const langName = supportedLangs.includes(pathLang) ? pathLang : supportedLangs[0] || 'en';
+
+  // Sync global state with URL language
+  import('lupine.components').then((m) => {
+    if (m.getCurrentLang().langName !== langName) {
+      m.updateLang(langName);
+    }
+  });
+
+  // Get current path from router props or window.location
+  let currentPath = window.location.pathname;
+  if (currentPath === '' || currentPath === '/') {
+    currentPath = `/${langName}/index`;
+  } else {
+    if (currentPath.endsWith('/') && currentPath.length > 1)
+      currentPath = currentPath.substring(0, currentPath.length - 1);
+    // If it's just lang root like /en, append /index
+    if (currentPath === `/${langName}`) currentPath = `/${langName}/index`;
+  }
+
+  const config = markdownConfig[currentPath];
+  const content = config ? config.html : `<h1>404 - Page Not Found</h1><p>Path: ${currentPath}</p>`;
+
+  // Get localized configuration from lang index
+  const rootIndex = markdownConfig[`/${langName}/index`]?.data || {};
+  const rootNav = rootIndex.nav || [];
+  const rootSidebar = rootIndex.sidebar || [];
+  const siteTitle = rootIndex.title || 'LupineJS';
+
+  // Collect langs from all supported language root index files
+  const langs = supportedLangs.map((l: string) => {
+    const data = markdownConfig[`/${l}/index`]?.data || {};
+    const langData = Array.isArray(data.lang) ? data.lang[0] : data.lang || {};
+    return {
+      text: langData.text || langData.title || langData.label || l.toUpperCase(),
+      id: l,
+    };
+  });
+
+  return (
+    <PressLayout
+      title={siteTitle}
+      nav={rootNav}
+      sidebar={rootSidebar}
+      lang={langName}
+      langs={langs}
+      data={config?.data}
+      headings={config?.headings}
+      sidemenuWidth={rootIndex['sidemenu-width']}
+      github={{ url: rootIndex['github-link'], title: rootIndex['github-title'] }}
+    >
+      {content}
+    </PressLayout>
+  );
+};

package/src/services/cache.ts

@@ -0,0 +1,18 @@
+import { HtmlVar, VNode } from 'lupine.components';
+
+const _cache: any = {};
+export const bindPressData = (pressData: any) => {
+  _cache.data = pressData;
+};
+
+export const getPressData = () => {
+  return _cache.data;
+};
+
+export const getSidebarScroll = () => {
+  return _cache.sidebarScroll || 0;
+};
+
+export const setSidebarScroll = (val: number) => {
+  _cache.sidebarScroll = val;
+};

package/src/services/index.ts

@@ -0,0 +1,3 @@
+export * from './cache';
+export * from './markdown';
+export * from './press-load';

package/src/services/markdown.ts

@@ -0,0 +1,18 @@
+import { marked } from 'marked';
+import matter from 'gray-matter';
+
+export interface MarkdownResult {
+  content: string;
+  data: { [key: string]: any };
+  html: string;
+}
+
+export const parseMarkdown = (mdContent: string): MarkdownResult => {
+  const { data, content } = matter(mdContent);
+  const html = marked.parse(content) as string;
+  return {
+    content,
+    data,
+    html,
+  };
+};

package/src/services/press-load.ts

@@ -0,0 +1,17 @@
+import { getCurrentLang, initializePage } from 'lupine.components';
+import { setSidebarScroll } from './cache';
+
+export const pressLoad = (url: string) => {
+  const sidemenu = document.querySelector('.press-frame-sidemenu');
+  if (sidemenu) {
+    setSidebarScroll(sidemenu.scrollTop);
+  }
+
+  let target = url;
+  if (target.startsWith('/') && !target.startsWith('/en/') && !target.startsWith('/zh/')) {
+    const { langName } = getCurrentLang();
+    target = `/${langName}${target}`;
+  }
+  if (target.endsWith('/') && target.length > 1) target = target.substring(0, target.length - 1);
+  initializePage(target || '/');
+};

package/src/styles/github.svg

@@ -0,0 +1,3 @@
+<svg viewBox='0 0 24 24' width='20' height='20' fill='currentColor'>
+    <path d='M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.164 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12c0-5.523-4.477-10-10-10z' />
+</svg>