@brillout/docpress 0.6.8 → 0.6.10

package/dist/{markdownHeadingsVitePlugin.js → parsePageSections.js}

@@ -34,14 +34,14 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-export { markdownHeadingsVitePlugin };
+export { parsePageSections };
 import { assert } from './utils/assert.js';
 import { determineSectionUrlHash } from './utils/determineSectionUrlHash.js';
 import os from 'os';
-function markdownHeadingsVitePlugin() {
+function parsePageSections() {
     var _this = this;
     return {
-        name: 'mdx-headings',
+        name: '@brillout/docpress:parsePageSections',
         enforce: 'pre',
         transform: function (code, id) { return __awaiter(_this, void 0, void 0, function () {
             var codeNew;
@@ -52,11 +52,11 @@ function markdownHeadingsVitePlugin() {
                 codeNew = transform(code);
                 return [2 /*return*/, codeNew];
             });
-        }); }
+        }); },
     };
 }
 function transform(code) {
-    var headings = [];
+    var pageSections = [];
     var isCodeBlock = false;
     var codeNew = code
         .split('\n')
@@ -74,47 +74,44 @@ function transform(code) {
             return line;
         }
         if (line.startsWith('#')) {
-            var _a = parseMarkdownHeading(line), headingId = _a.headingId, headingLevel = _a.headingLevel, title = _a.title, headingHtml = _a.headingHtml;
-            headings.push({ headingId: headingId, headingLevel: headingLevel, title: title });
+            var _a = parsePageSection(line), pageSectionId = _a.pageSectionId, pageSectionLevel = _a.pageSectionLevel, pageSectionTitle = _a.pageSectionTitle, headingHtml = _a.headingHtml;
+            pageSections.push({ pageSectionId: pageSectionId, pageSectionLevel: pageSectionLevel, pageSectionTitle: pageSectionTitle });
             return headingHtml;
         }
         return line;
     })
         .join('\n');
-    var headingsExportCode = "export const headings = [".concat(headings
-        .map(function (heading) { return JSON.stringify(heading); })
+    var exportCode = "export const pageSectionsExport = [".concat(pageSections
+        .map(function (pageSection) { return JSON.stringify(pageSection); })
         .join(', '), "];");
-    codeNew += "\n\n".concat(headingsExportCode, "\n");
+    codeNew += "\n\n".concat(exportCode, "\n");
     return codeNew;
 }
-function parseMarkdownHeading(line) {
+function parsePageSection(line) {
     var _a;
     var _b = line.split(' '), lineBegin = _b[0], lineWords = _b.slice(1);
     assert(lineBegin.split('#').join('') === '', { line: line, lineWords: lineWords });
-    var headingLevel = lineBegin.length;
+    var pageSectionLevel = lineBegin.length;
     var titleMdx = lineWords.join(' ');
     assert(!titleMdx.startsWith(' '), { line: line, lineWords: lineWords });
     assert(titleMdx, { line: line, lineWords: lineWords });
-    var headingMdx = {
-        title: titleMdx,
-        anchor: titleMdx
-    };
+    var pageSectionTitle = titleMdx;
+    var anchor = titleMdx;
     {
-        // Support custom anchor like: `## title{#custom-anchor}`
+        // Support custom anchor: `## Some Title{#custom-anchor}`
         var customAnchor = (_a = /(?<={#).*(?=})/g.exec(titleMdx)) === null || _a === void 0 ? void 0 : _a[0];
         if (customAnchor) {
-            headingMdx.anchor = customAnchor;
-            headingMdx.title = titleMdx.replace(/{#.*}/g, '');
+            anchor = customAnchor;
+            pageSectionTitle = titleMdx.replace(/{#.*}/g, '');
         }
     }
-    var headingId = determineSectionUrlHash(headingMdx.anchor);
-    var title = headingMdx.title;
-    var titleParsed = parseTitle(title);
-    assert(headingId === null || headingId.length > 0);
-    var headingAttrId = headingId === null ? '' : " id=\"".concat(headingId, "\"");
-    var headingHtml = "<h".concat(headingLevel).concat(headingAttrId, ">").concat(titleParsed, "</h").concat(headingLevel, ">");
-    var heading = { headingLevel: headingLevel, title: title, headingId: headingId, headingHtml: headingHtml };
-    return heading;
+    var pageSectionId = determineSectionUrlHash(anchor);
+    var titleParsed = parseTitle(pageSectionTitle);
+    assert(pageSectionId === null || pageSectionId.length > 0);
+    var headingId = pageSectionId === null ? '' : " id=\"".concat(pageSectionId, "\"");
+    var headingHtml = "<h".concat(pageSectionLevel).concat(headingId, ">").concat(titleParsed, "</h").concat(pageSectionLevel, ">");
+    var pageSection = { pageSectionLevel: pageSectionLevel, pageSectionTitle: pageSectionTitle, pageSectionId: pageSectionId, headingHtml: headingHtml };
+    return pageSection;
 }
 function parseTitle(titleMarkdown) {
     var parts = [];

package/dist/vite.config.js

@@ -1,7 +1,7 @@
 import mdx from '@mdx-js/rollup';
 import react from '@vitejs/plugin-react-swc';
 import vike from 'vike/plugin';
-import { markdownHeadingsVitePlugin } from './markdownHeadingsVitePlugin.js';
+import { parsePageSections } from './parsePageSections.js';
 import rehypePrettyCode from 'rehype-pretty-code';
 import remarkGfm from 'remark-gfm';
 import { transformerNotationDiff } from '@shikijs/transformers';
@@ -12,22 +12,22 @@ var remarkPlugins = [remarkGfm];
 var config = {
     root: root,
     plugins: [
-        markdownHeadingsVitePlugin(),
+        parsePageSections(),
         mdx({ rehypePlugins: rehypePlugins, remarkPlugins: remarkPlugins }),
         // @vitejs/plugin-react-swc needs to be added *after* the mdx plugins
         react(),
         vike({
             prerender: {
-                noExtraDir: true
+                noExtraDir: true,
             },
-            includeAssetsImportedByServer: true
+            includeAssetsImportedByServer: true,
         }),
     ],
     optimizeDeps: { include: ['@mdx-js/react', 'react-dom'] },
     // @ts-ignore
     ssr: {
-        noExternal: ['@brillout/docpress']
+        noExternal: ['@brillout/docpress'],
     },
-    clearScreen: false
+    clearScreen: false,
 };
 export default config;

package/installSectionUrlHashs.ts

@@ -27,7 +27,8 @@ function installSectionUrlHashs() {
 function assertNavLink(urlHash: string, heading: HTMLHeadingElement) {
   const navigationEl = getNavigationEl()
   {
-    const parentNavLinkMatch = Array.from(navigationEl.querySelectorAll(`a[href="${window.location.pathname}"]`))
+    const { pathname } = window.location
+    const parentNavLinkMatch = Array.from(navigationEl.querySelectorAll(`a[href="${pathname}"]`))
     assert(parentNavLinkMatch.length === 1)
   }
   {

package/navigation/Navigation-items.css

@@ -8,10 +8,10 @@
 .nav-item code {
   font-size: 0.9em;
 }
-.nav-item-h1 + .nav-item-h4 {
+.nav-item-level-1 + .nav-item-level-4 {
   margin-top: -2px;
 }
-.nav-item-h4 {
+.nav-item-level-4 {
   margin-top: 14px;
   margin-bottom: -1px;
   color: #999;
@@ -22,10 +22,10 @@
   padding-right: 4px;
   text-decoration: none;
 }
-.nav-column:first-of-type > .nav-h1-group:first-of-type > .nav-item-h1:first-of-type {
+.nav-column:first-of-type > .nav-items-level-1-group:first-of-type > .nav-item-level-1:first-of-type {
   margin-top: 20px;
 }
-.nav-item-h1 {
+.nav-item-level-1 {
   margin-top: 30px;
   font-size: 15.4px;
   text-transform: uppercase;
@@ -37,7 +37,7 @@
   padding-right: 4px;
   text-decoration: none;
 }
-.nav-item-h2 {
+.nav-item-level-2 {
   text-decoration: none;
   font-size: 14.4px;
   font-weight: 400;
@@ -49,7 +49,7 @@
   padding-top: var(--padding);
   padding-bottom: var(--padding);
 }
-.nav-item-h3 {
+.nav-item-level-3 {
   font-size: 12px;
   font-weight: 400;
   letter-spacing: 0.15ch;
@@ -61,28 +61,28 @@
   padding: var(--padding) 0;
   padding-left: calc(var(--padding-left-global) + var(--padding-left-additional));
 }
-html.navigation-fullscreen .nav-item-h3 {
+html.navigation-fullscreen .nav-item-level-3 {
   border-right: 4px solid #eee;
 }
-.nav-item-h3.nav-item-first-of-its-kind {
+.nav-item-level-3.nav-item-first-of-its-kind {
   padding-top: calc(var(--padding) * 1.6);
 }
-.nav-item-h3.nav-item-last-of-its-kind {
+.nav-item-level-3.nav-item-last-of-its-kind {
   padding-bottom: calc(var(--padding) * 2);
 }
-.nav-item-h2,
-.nav-item-h3 {
+.nav-item-level-2,
+.nav-item-level-3 {
   position: relative;
 }
 /*
-.nav-item-h2.is-active .nav-item-text{
+.nav-item-level-2.is-active .nav-item-text{
   background-color: var(--background-color);
 }
 */
-.nav-item-h2.is-active {
+.nav-item-level-2.is-active {
   background-color: var(--background-color);
 }
-.nav-item-h3.is-active:before {
+.nav-item-level-3.is-active:before {
   display: block;
   content: '';
   position: absolute;
@@ -93,7 +93,7 @@ html.navigation-fullscreen .nav-item-h3 {
   background-color: var(--background-color);
   z-index: 10;
 }
-.nav-item-h3.is-active-last:after {
+.nav-item-level-3.is-active-last:after {
   display: block;
   content: '';
   position: absolute;

package/navigation/Navigation-layout.css

@@ -29,7 +29,7 @@
   margin-top: 25px;
 }
 
-#navigation-mask {
+#mobile-navigation-mask {
   position: fixed;
   width: 100%;
   height: 100vh;
@@ -47,7 +47,7 @@
     height: 100vh;
     top: 0;
   }
-  #navigation-mask {
+  #mobile-navigation-mask {
     display: none;
   }
 }
@@ -83,10 +83,10 @@
     /* `position: sticky` doesn't seem to work on mobile */
     position: fixed;
   }
-  body:not(.show-menu) #navigation-container {
+  body:not(.mobile-show-navigation) #navigation-container {
     transform: translateX(calc(-1 * var(--width)));
   }
-  body:not(.show-menu) #navigation-mask {
+  body:not(.mobile-show-navigation) #mobile-navigation-mask {
     display: none;
   }
   #mobile-header {
@@ -118,7 +118,7 @@ html.navigation-fullscreen .navigation-content > .nav-column {
   flex-grow: 1;
   max-width: 350px;
 }
-html.navigation-fullscreen .nav-column > .nav-h1-group:first-child > .nav-item-h1:first-child {
+html.navigation-fullscreen .nav-column > .nav-items-level-1-group:first-child > .nav-item-level-1:first-child {
   margin-top: 0px;
 }
 html.navigation-fullscreen {

package/navigation/Navigation.client.ts

@@ -1,43 +1,7 @@
 import { initNavigationFullscreen } from './navigation-fullscreen/initNavigationFullscreen'
+import { initMobileNavigation } from './initMobileNavigation'
+import { initPressKit } from './initPressKit'
 
-activateNavigationMask()
-activateMenuToggle()
 initNavigationFullscreen()
-autoHideNavigationOverlayOnLinkClick()
-navHeaderRightClickInterceptor()
-
-function activateMenuToggle() {
-  const menuToggle = document.getElementById('menu-toggle')!
-  menuToggle.onclick = navigationOverlayToggle
-}
-
-function activateNavigationMask() {
-  const navigationMask = document.getElementById('navigation-mask')!
-  navigationMask.onclick = navigationOverlayToggle
-}
-
-function autoHideNavigationOverlayOnLinkClick() {
-  document.addEventListener('click', (ev: any) => {
-    const el = ev.target
-    if (!el || !('classList' in el)) return
-    if (!el.classList.contains('nav-item')) return
-    navigationOverlayHide()
-  })
-}
-
-function navigationOverlayToggle() {
-  document.body.classList.toggle('show-menu')
-}
-function navigationOverlayHide() {
-  document.body.classList.remove('show-menu')
-}
-
-function navHeaderRightClickInterceptor() {
-  const navHeader = document.getElementById('navigation-header')!
-  if (!navHeader.classList.contains('press-kit')) return
-  if (window.location.pathname === '/press') return
-  navHeader.oncontextmenu = (ev) => {
-    ev.preventDefault()
-    window.location.href = '/press'
-  }
-}
+initMobileNavigation()
+initPressKit()

package/navigation/Navigation.tsx

@@ -1,44 +1,40 @@
 export { Navigation }
 export { NavigationMask }
+export type { NavigationData }
+export type { NavItem }
 
 import React from 'react'
 import { NavigationHeader } from './NavigationHeader'
-import { Heading, HeadingDetached } from '../types/Heading'
 import { assert, Emoji, assertWarning, jsxToTextContent } from '../utils/server'
 import './Navigation.css'
 import { NavigationFullscreenClose } from './navigation-fullscreen/NavigationFullscreenButton'
 
+type NavigationData = Parameters<typeof Navigation>[0]
+
 function Navigation({
-  pageContext,
+  navItems,
+  navItemsAll,
+  currentUrl,
+  isDetachedPage,
 }: {
-  pageContext: {
-    headingsProcessed: Heading[]
-    headingsOfDetachedPage: null | (Heading | HeadingDetached)[]
-    urlPathname: string
-  }
+  navItems: NavItem[]
+  navItemsAll: NavItem[]
+  currentUrl: string
+  isDetachedPage: boolean
 }) {
-  const currentUrl = pageContext.urlPathname
   return (
     <>
       <div id="navigation-container">
         <NavigationHeader />
-        {pageContext.headingsOfDetachedPage && (
+        {isDetachedPage && (
           <>
-            {pageContext.headingsOfDetachedPage.length > 1 && (
-              <NavigationContent
-                id="navigation-content-detached"
-                headingsProcessed={pageContext.headingsOfDetachedPage}
-                currentUrl={currentUrl}
-              />
+            {navItems.length > 1 && (
+              <NavigationContent id="navigation-content-detached" navItems={navItems} currentUrl={currentUrl} />
             )}
             <DetachedPageNote />
           </>
         )}
-        <NavigationContent
-          id="navigation-content-main"
-          headingsProcessed={pageContext.headingsProcessed}
-          currentUrl={currentUrl}
-        />
+        <NavigationContent id="navigation-content-main" navItems={navItemsAll} currentUrl={currentUrl} />
         {/* <ScrollOverlay /> */}
         <NavigationFullscreenClose />
       </div>
@@ -47,26 +43,39 @@ function Navigation({
 }
 
 function NavigationMask() {
-  return <div id="navigation-mask" />
+  return <div id="mobile-navigation-mask" />
+}
+
+type NavItem = {
+  level: number
+  url?: string | null
+  title: string | JSX.Element
+  titleInNav: string | JSX.Element
+}
+type NavItemComputed = NavItem & {
+  isActive: boolean
+  isActiveFirst: boolean
+  isActiveLast: boolean
+  isFirstOfItsKind: boolean
+  isLastOfItsKind: boolean
 }
 
 function NavigationContent(props: {
   id: 'navigation-content-main' | 'navigation-content-detached'
-  headingsProcessed: (Heading | HeadingDetached)[]
+  navItems: NavItem[]
   currentUrl: string
 }) {
-  const headings = getHeadingsWithComputedProps(props.headingsProcessed, props.currentUrl)
-
-  const headingsGrouped = groupHeadings(headings)
+  const navItemsWithComputed = addComputedProps(props.navItems, props.currentUrl)
+  const navItemsGrouped = groupByLevel1(navItemsWithComputed)
 
   return (
     <div id={props.id} className="navigation-content">
       <div className="nav-column" style={{ position: 'relative' }}>
-        {headingsGrouped.map((headingsH1, i) => (
-          <div className="nav-h1-group" key={i}>
-            <Heading heading={headingsH1} />
-            {headingsH1.headings.map((heading, j) => (
-              <Heading heading={heading} key={j} />
+        {navItemsGrouped.map((navItemLevel1, i) => (
+          <div className="nav-items-level-1-group" key={i}>
+            <NavItemComponent navItem={navItemLevel1} />
+            {navItemLevel1.navItemChilds.map((navItem, j) => (
+              <NavItemComponent navItem={navItem} key={j} />
             ))}
           </div>
         ))}
@@ -75,32 +84,20 @@ function NavigationContent(props: {
   )
 }
 
-function Heading({
-  heading,
+function NavItemComponent({
+  navItem,
 }: {
-  heading: {
-    level: number
-    url?: string | null
-    title: string | JSX.Element
-    titleInNav: string | JSX.Element
-    computed: {
-      isActive: boolean
-      isActiveFirst: boolean
-      isActiveLast: boolean
-      isFirstOfItsKind: boolean
-      isLastOfItsKind: boolean
-    }
-  }
+  navItem: NavItemComputed
 }) {
-  assert([1, 2, 3, 4].includes(heading.level), heading)
-  if (heading.level === 1 || heading.level === 4) {
-    assert(heading.url === undefined)
+  assert([1, 2, 3, 4].includes(navItem.level), navItem)
+  if (navItem.level === 1 || navItem.level === 4) {
+    assert(navItem.url === undefined)
   } else {
-    const sectionTitle = jsxToTextContent(heading.title)
+    const sectionTitle = jsxToTextContent(navItem.title)
     assertWarning(
-      heading.url,
+      navItem.url,
       `${jsxToTextContent(
-        heading.titleInNav,
+        navItem.titleInNav,
       )} is missing a URL hash. Use \`<h2 id="url-hash">${sectionTitle}</h2>\` instead of \`## ${sectionTitle}\`.`,
     )
   }
@@ -108,73 +105,71 @@ function Heading({
     <a
       className={[
         'nav-item',
-        'nav-item-h' + heading.level,
-        heading.computed.isActive && ' is-active',
-        heading.computed.isActiveFirst && ' is-active-first',
-        heading.computed.isActiveLast && ' is-active-last',
-        heading.computed.isFirstOfItsKind && 'nav-item-first-of-its-kind',
-        heading.computed.isLastOfItsKind && 'nav-item-last-of-its-kind',
+        'nav-item-level-' + navItem.level,
+        navItem.isActive && ' is-active',
+        navItem.isActiveFirst && ' is-active-first',
+        navItem.isActiveLast && ' is-active-last',
+        navItem.isFirstOfItsKind && 'nav-item-first-of-its-kind',
+        navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
       ]
         .filter(Boolean)
         .join(' ')}
-      href={heading.url ?? undefined}
+      href={navItem.url ?? undefined}
     >
-      {/* <span className="nav-item-text">{heading.titleInNav}</span> */}
-      {heading.titleInNav}
+      {/* <span className="nav-item-text">{navItem.titleInNav}</span> */}
+      {navItem.titleInNav}
     </a>
   )
 }
 
-function groupHeadings<T extends { level: number }>(headings: T[]) {
-  const headingsGrouped: (T & { headings: T[] })[] = []
-  const headingLevelMin: number = Math.min(...headings.map((h) => h.level))
-  headings.forEach((heading) => {
-    if (heading.level === headingLevelMin) {
-      headingsGrouped.push({ ...heading, headings: [] })
+function groupByLevel1<T extends { level: number }>(navItems: T[]) {
+  const navItemsGrouped: (T & { navItemChilds: T[] })[] = []
+  const levelMin: number = Math.min(...navItems.map((h) => h.level))
+  navItems.forEach((navItem) => {
+    if (navItem.level === levelMin) {
+      navItemsGrouped.push({ ...navItem, navItemChilds: [] })
     } else {
-      headingsGrouped[headingsGrouped.length - 1].headings.push(heading)
+      navItemsGrouped[navItemsGrouped.length - 1].navItemChilds.push(navItem)
     }
   })
-  return headingsGrouped
+  return navItemsGrouped
 }
 
-function getHeadingsWithComputedProps(headings: (Heading | HeadingDetached)[], currentUrl: string) {
-  return headings.map((heading, i) => {
-    assert([1, 2, 3, 4].includes(heading.level), heading)
+function addComputedProps(navItems: NavItem[], currentUrl: string): NavItemComputed[] {
+  return navItems.map((navItem, i) => {
+    assert([1, 2, 3, 4].includes(navItem.level), navItem)
 
-    const headingPrevious = headings[i - 1]
-    const headingNext = headings[i + 1]
+    const navItemPrevious = navItems[i - 1]
+    const navItemNext = navItems[i + 1]
 
     let isActiveFirst = false
     let isActiveLast = false
     let isActive = false
-    if (heading.url === currentUrl) {
-      assert(heading.level === 2, { currentUrl })
+    if (navItem.url === currentUrl) {
+      assert(navItem.level === 2, { currentUrl })
       isActive = true
       isActiveFirst = true
-      if (headingNext?.level !== 3) {
+      if (navItemNext?.level !== 3) {
         isActiveLast = true
       }
     }
-    if (heading.level === 3) {
+    if (navItem.level === 3) {
       isActive = true
-      if (headingNext?.level !== 3) {
+      if (navItemNext?.level !== 3) {
         isActiveLast = true
       }
     }
 
-    const isFirstOfItsKind = heading.level !== headingPrevious?.level
-    const isLastOfItsKind = heading.level !== headingNext?.level
+    const isFirstOfItsKind = navItem.level !== navItemPrevious?.level
+    const isLastOfItsKind = navItem.level !== navItemNext?.level
 
     return {
-      ...heading,
-      computed: {
-        isActive,
-        isActiveFirst,
-        isActiveLast,
-        isFirstOfItsKind,
-        isLastOfItsKind,
-      },
+      ...navItem,
+      isActive,
+      isActiveFirst,
+      isActiveLast,
+      isFirstOfItsKind,
+      isLastOfItsKind,
     }
   })
 }

package/navigation/initMobileNavigation.ts

@@ -0,0 +1,32 @@
+export { initMobileNavigation }
+
+function initMobileNavigation() {
+  activateMobileShowNavigationToggle()
+  activateMobileNavigationMask()
+  autoHideNavigationOverlayOnLinkClick()
+}
+
+function activateMobileShowNavigationToggle() {
+  const toggle = document.getElementById('mobile-show-navigation-toggle')!
+  toggle.onclick = toggleNavigation
+}
+function activateMobileNavigationMask() {
+  const navigationMask = document.getElementById('mobile-navigation-mask')!
+  navigationMask.onclick = toggleNavigation
+}
+
+function autoHideNavigationOverlayOnLinkClick() {
+  document.addEventListener('click', (ev: any) => {
+    const el = ev.target
+    if (!el || !('classList' in el)) return
+    if (!el.classList.contains('nav-item')) return
+    hideNavigation()
+  })
+}
+
+function toggleNavigation() {
+  document.body.classList.toggle('mobile-show-navigation')
+}
+function hideNavigation() {
+  document.body.classList.remove('mobile-show-navigation')
+}

package/navigation/initPressKit.ts

@@ -0,0 +1,16 @@
+export { initPressKit }
+
+function initPressKit() {
+  // Right click navigation header => show /press
+  navigationHeaderRightClickInterceptor()
+}
+
+function navigationHeaderRightClickInterceptor() {
+  const navHeader = document.getElementById('navigation-header')!
+  if (!navHeader.classList.contains('press-kit')) return
+  if (window.location.pathname === '/press') return
+  navHeader.oncontextmenu = (ev) => {
+    ev.preventDefault()
+    window.location.href = '/press'
+  }
+}

package/navigation/navigation-fullscreen/NavigationFullscreenButton.css

@@ -27,6 +27,6 @@ html:not(.navigation-fullscreen) #navigation-fullscreen-close {
 }
 
 html.navigation-fullscreen #page-content {
-  /* Make `Ctrl-F` browser search only crawl the navigation menu */
+  /* Make `Ctrl-F` browser search only crawl the navigation */
   visibility: hidden;
 }

package/navigation/navigation-fullscreen/initNavigationFullscreen.ts

@@ -32,7 +32,7 @@ function toggleNavExpend() {
 
 function updateColumnWidth() {
   const navMinWidth = 299
-  const navH1Groups = Array.from(document.querySelectorAll('#navigation-content-main .nav-h1-group'))
+  const navH1Groups = Array.from(document.querySelectorAll('#navigation-content-main .nav-items-level-1-group'))
   const numberOfColumnsMax = navH1Groups.length
 
   const widthAvailable = getViewportWidth()