} An array containing two arrays: [memberData, typeDefinitionsData].
+ */
+const getMembers = (data) => {
+ if (!data?.members?.static || data.members.static.length === 0) {
+ return [[], []];
+ }
+
+ const members = data.members.static.map((member) => member);
+ const memberName = data.members.static[0].memberof.split('/').pop();
+ members.sort((a, b) => {
+ if (a.name === memberName) {
+ return -1;
+ } else if (b.name === memberName) {
+ return 1;
+ } else {
+ return a.name < b.name ? -1 : 1;
+ }
+ });
+
+ return [getMemberData(members), getTypeDefinitionsData(members)];
+};
+
+export {getJSONData, getMembers, getMemberData, getTypeDefinitionsData};
diff --git a/src/components/PageTitle/PageTitle.astro b/src/components/PageTitle/PageTitle.astro
new file mode 100644
index 00000000..49d32ad0
--- /dev/null
+++ b/src/components/PageTitle/PageTitle.astro
@@ -0,0 +1,28 @@
+---
+import {LinkButton} from '@astrojs/starlight/components';
+
+import css from './PageTitle.module.css';
+
+const {
+ button,
+ headerTitle,
+ title
+} = Astro.locals.starlightRoute.entry.data;
+---
+
+
+
{headerTitle || title}
+ {button &&
+
+
+ {button.label}
+
+
+ }
+
- {list.length ? list : noResultsText}
-
;
- }
-});
-
-export default Results;
-export {Results};
diff --git a/src/components/Search/Results.module.less b/src/components/Search/Results.module.less
deleted file mode 100644
index 5698c9e4..00000000
--- a/src/components/Search/Results.module.less
+++ /dev/null
@@ -1,29 +0,0 @@
-// Results.less
-//
-@import '../../css/variables.less';
-@import '../../css/colors.less';
-@import '../../css/mixins.less';
-
-.results {
- overflow: hidden;
-
- a {
- display: block !important;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- padding: 0 1ex;
- border-radius: 4px;
-
- &:hover {
- background-color: fade(@docs-color-enactcyan, 20%);
- }
- }
-
- a:link,
- a:hover,
- a:active,
- a:visited {
- color: @docs-color-enactcyan;
- }
-}
diff --git a/src/components/Search/Search.js b/src/components/Search/Search.js
deleted file mode 100644
index ff2755f7..00000000
--- a/src/components/Search/Search.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import elasticlunr from 'elasticlunr';
-import {Component} from 'react';
-import PropTypes from 'prop-types';
-
-import docIndex from '../../data/docIndex.json';
-
-import Results from './Results';
-import css from './Search.module.less';
-
-const index = elasticlunr.Index.load(docIndex);
-
-const searchConfig = {
- fields: {
- title: {boost: 3},
- members: {boost: 2},
- description: {boost: 1},
- memberDescriptions: {boost: 1}
- },
- expand: true
-};
-
-export default class Search extends Component {
- static propTypes = {
- location: PropTypes.object
- };
-
- constructor (props) {
- super(props);
- this.state = {
- value: '',
- results: false
- };
- }
-
- UNSAFE_componentWillReceiveProps = (nextProps) => {
- if (this.props.location.pathname !== nextProps.location.pathname) {
- this.removeWatchForExternalClick();
- this.setState({value: '', results: false, focused: false});
- }
- };
-
- componentWillUnmount = () => {
- this.removeWatchForExternalClick();
- };
-
- hideResults = () => {
- this.removeWatchForExternalClick();
- this.setState({focused: false});
- };
-
- watchForExternalClick = (ev) => {
- if (!this.search.contains(ev.target)) {
- this.hideResults();
- }
- };
-
- addWatchForExternalClick = () => {
- document.addEventListener('click', this.watchForExternalClick);
- };
-
- removeWatchForExternalClick = () => {
- document.removeEventListener('click', this.watchForExternalClick);
- };
-
- handleChange = (ev) => {
- const value = ev.target.value;
- let results = false;
- if (value.length > 2) {
- results = index.search(value, searchConfig);
- }
- this.setState({value, results});
- };
-
- handleKeyDown = (ev) => {
- if (ev.keyCode === 27) {
- this.setState({value: '', results: false});
- }
- };
-
- handleFocus = () => {
- this.setState({focused: true});
- this.addWatchForExternalClick();
- };
-
- handleBlur = (ev) => {
- // This catches tabing to the next targetable element by restricting to relatedTarget
- // The document click event catches clicks
- if (ev.relatedTarget && !this.search.contains(ev.relatedTarget)) {
- this.hideResults();
- }
- };
-
- getSearchRef = (ref) => {
- this.search = ref;
- };
-
- render = () => {
- const {className, ...rest} = this.props;
- delete rest.location;
- // Search:
- return ;
- };
-}
diff --git a/src/components/Search/Search.module.less b/src/components/Search/Search.module.less
deleted file mode 100644
index eb37483c..00000000
--- a/src/components/Search/Search.module.less
+++ /dev/null
@@ -1,93 +0,0 @@
-// Search.less
-//
-@import '../../css/variables.less';
-@import '../../css/colors.less';
-@import '../../css/mixins.less';
-
-.search {
- @text-color-dark: darken(@docs-color-enactcyan, 30%);
- @input-height: 1.7em;
- @border-radius: (@input-height / 2);
-
- // border-radius: @border-radius;
- // background-color: fade(white, 20%);
- line-height: @input-height;
- margin: 0; // Override margin-bottom from typography.js
- // display: flex;
- position: relative;
- // padding-left: 2ex;
- color: rgba(0, 0, 0, 0.2);
-
- .input {
- // line-height: @input-height;
- // height: @input-height;
- // flex: 1;
- border: 1px solid transparent;
- border-bottom-color: rgba(0, 0, 0, 0.1);
- // box-sizing: border-box;
- // border: 1px solid white;
- border-radius: @border-radius;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- padding: 0 1.5ex;
- // background-color: fade(white, 20%);
- // margin-left: 0.5ex;
- // color: white;
- width: 100%;
-
- &::placeholder {
- font-style: italic;
- }
-
- &:focus {
- background-color: white;
- color: @text-color-dark;
- border-color: rgba(0, 0, 0, 0.1);
- border-radius: @border-radius;
- // box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.25);
- // box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
-
- &::placeholder {
- color: transparent;
- }
- }
- }
-
- &.showResults {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
-
- .input {
- // box-shadow: 0 0px 0px 1px rgba(0,0,0, 0.25);
- // border: 1px solid transparent;
- // border-bottom-color: rgba(0, 0, 0, 0.1);
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
- }
- &.focus {
- .results {
- display: block;
- }
- }
-
- .results {
- position: absolute;
- top: 100%;
- left: 0;
- z-index: 1;
- background-color: white;
- padding: 0.5ex 1ex 1ex;
- border: 1px solid rgba(0, 0, 0, 0.1);
- border-top-style: none;
- border-radius: 9px;
- // box-shadow: 0 10px 18px 1px rgba(0, 0, 0, 0.25), 0px 3px 3px 1px rgba(0, 0, 0, 0.25);
- // box-shadow: 0 8px 1px -3px rgba(0,0,0, 0.1), 0 1px 0px 1px rgba(0,0,0, 0.25);
- box-shadow: 0 8px 1px -3px rgba(0,0,0, 0.1), 0 1px 0px 0px rgba(0,0,0, 0.25);;
- display: none;
- width: 100%;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- color: @text-color-dark;
- }
-}
diff --git a/src/components/Search/package.json b/src/components/Search/package.json
deleted file mode 100644
index 21a82320..00000000
--- a/src/components/Search/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "main": "Search.js"
-}
-
diff --git a/src/components/See/See.js b/src/components/See/See.js
deleted file mode 100644
index 817a7988..00000000
--- a/src/components/See/See.js
+++ /dev/null
@@ -1,23 +0,0 @@
-// Type
-//
-import kind from '@enact/core/kind';
-
-import css from './See.module.less';
-
-const See = kind({
- name: 'See',
-
- styles: {
- css,
- className: 'see'
- },
-
- render: ({children, ...rest}) => {
- return
- See: {children}
-
;
- }
-});
-
-export default See;
-export {See};
diff --git a/src/components/See/See.module.less b/src/components/See/See.module.less
deleted file mode 100644
index e16cc6d9..00000000
--- a/src/components/See/See.module.less
+++ /dev/null
@@ -1,34 +0,0 @@
-// Type.less
-//
-@import '../../css/variables.less';
-@import '../../css/colors.less';
-@import '../../css/mixins.less';
-
-.see {
- line-height: 24px;
- font-size: 90%;
- position: relative;
- background-color: fade(@docs-color-enactcyan, 20%);
- border-color: fade(@docs-color-enactcyan, 20%);
- display: inline-block;
- padding: 0 6px;
- margin-left: @docs-module-padding;
- margin-bottom: 6px;
-
- &::before,
- &::after {
- position: absolute;
- content: '';
- top: 0;
- }
- &::before {
- .angle-left(24px, 20deg);
- left: 0;
- transform: translateX(-100%);
- }
- &::after {
- .angle-top-right(24px, 20deg);
- right: 0;
- transform: translateX(100%);
- }
-}
diff --git a/src/components/See/package.json b/src/components/See/package.json
deleted file mode 100644
index 7aa30ca1..00000000
--- a/src/components/See/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "main": "See.js"
-}
diff --git a/src/components/Sidebar/Sidebar.astro b/src/components/Sidebar/Sidebar.astro
new file mode 100644
index 00000000..9afc2b70
--- /dev/null
+++ b/src/components/Sidebar/Sidebar.astro
@@ -0,0 +1,59 @@
+---
+import SidebarPersister from '@astrojs/starlight/components/SidebarPersister.astro';
+import SidebarSublist from '@astrojs/starlight/components/SidebarSublist.astro';
+import MobileMenuFooter from 'virtual:starlight/components/MobileMenuFooter';
+
+import {PAGE} from '../../consts';
+import {addArrowToFirstLink, addBackToTutorialsLink, filterSidebarBySubfolder, filterSidebarEntries} from './utils';
+
+const {id, sidebar} = Astro.locals.starlightRoute;
+const parts = id.split('/').filter(Boolean).filter((p) => p !== 'docs');
+let sublist = sidebar;
+
+const isTutorialsPage = id.startsWith(PAGE.TUTORIALS);
+const isModulesPage = id.startsWith(PAGE.MODULES);
+const isDeveloperGuidePage = id.startsWith(PAGE.DEVELOPER_GUIDE);
+const isDeveloperToolsPage = id.startsWith(PAGE.DEVELOPER_TOOLS);
+
+if (isModulesPage) {
+ sublist = sidebar.filter(entry => entry.label === 'API Libraries');
+} else if (isDeveloperGuidePage) {
+ sublist = filterSidebarEntries(sidebar, 'Developer Guide');
+
+ const baseIndex = parts.indexOf(PAGE.DEVELOPER_GUIDE);
+ const isSubfolder = baseIndex !== -1 && parts.length > baseIndex + 2;
+
+ if (isSubfolder) {
+ sublist = filterSidebarBySubfolder(sidebar, id, PAGE.DEVELOPER_GUIDE, 'Developer Guide');
+ addArrowToFirstLink(sublist)
+ }
+} else if (isDeveloperToolsPage) {
+ sublist = filterSidebarEntries(sidebar, 'Developer Tools');
+
+ const baseIndex = parts.indexOf(PAGE.DEVELOPER_TOOLS);
+ const isSubfolder = baseIndex !== -1 && parts.length > baseIndex + 2;
+
+ if (isSubfolder) {
+ sublist = filterSidebarBySubfolder(sidebar, id, PAGE.DEVELOPER_TOOLS, 'Developer Tools');
+ addArrowToFirstLink(sublist);
+ }
+} else if (isTutorialsPage) {
+ if (id.includes('tutorial-hello-enact')) {
+ sublist = addBackToTutorialsLink(sidebar, '/tutorials/intro/hello-enact/', 'Hello Enact!');
+ } else if (id.includes('tutorial-kitten-browser')) {
+ sublist = addBackToTutorialsLink(sidebar, '/tutorials/intro/kitten-browser/', 'Kitten Browser');
+ } else if (id.includes('tutorial-typescript')) {
+ sublist = addBackToTutorialsLink(sidebar, '/tutorials/intro/typescript/', 'TypeScript with Enact');
+ } else {
+ sublist = sidebar.filter(entry => entry.label === 'Tutorials');
+ }
+}
+---
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/Sidebar/utils.js b/src/components/Sidebar/utils.js
new file mode 100644
index 00000000..7fd67467
--- /dev/null
+++ b/src/components/Sidebar/utils.js
@@ -0,0 +1,117 @@
+import {withBase} from '@utils';
+
+const filterSidebarEntries = (sidebar, label) => {
+ const items = sidebar.find((entry) => entry.label === label);
+
+ if (!items) return [];
+
+ const getFirstLink = (entry) => {
+ if (!entry) return null;
+
+ if (entry.type === 'link') {
+ return entry;
+ }
+
+ if (entry.type === 'group' && Array.isArray(entry.entries)) {
+ for (const child of entry.entries) {
+ const found = getFirstLink(child);
+ if (found) return found;
+ }
+ }
+
+ return null;
+ };
+
+ const customSort = (a, b) => {
+ const aStartsUpper = a.label[0] === a.label[0].toUpperCase();
+ const bStartsUpper = b.label[0] === b.label[0].toUpperCase();
+
+ if (aStartsUpper !== bStartsUpper) {
+ return aStartsUpper ? -1 : 1;
+ }
+
+ return a.label.localeCompare(b.label);
+ };
+
+ const filteredEntries = items?.entries
+ .map(getFirstLink)
+ .filter(Boolean)
+ .sort(customSort);
+
+ return [{...items, entries: filteredEntries}];
+};
+
+const filterSidebarBySubfolder = (sidebar, id, baseRoute, sectionLabel) => {
+ const extractSubfolderFromPath = (route) => {
+ const pathParts = id.split('/').filter(Boolean).filter((p) => p !== 'docs');
+ const baseIndex = pathParts.indexOf(route);
+
+ if (baseIndex === -1 || baseIndex === pathParts.length - 1) return null;
+
+ return pathParts[baseIndex + 1];
+ };
+
+ const subfolder = extractSubfolderFromPath(baseRoute);
+
+ if (!subfolder) return [];
+
+ const section = sidebar.find(entry => entry.label === sectionLabel);
+ if (!section || !section.entries) return [];
+
+ const findGroupByPath = (entries, pathToMatch) => {
+ for (const entry of entries) {
+ if (entry.type === 'group' && entry.entries) {
+ const hasMatchingChild = entry.entries.some(child =>
+ child.href && child.href.includes(pathToMatch)
+ );
+
+ if (hasMatchingChild) {
+ return entry;
+ }
+
+ const found = findGroupByPath(entry.entries, pathToMatch);
+ if (found) return {...found, label: subfolder};
+ }
+ }
+ return null;
+ };
+
+ const matchedGroup = findGroupByPath(section.entries, subfolder);
+ return matchedGroup ? [matchedGroup] : [];
+};
+
+const addBackToTutorialsLink = (sidebar, tutorialPath, label) => {
+ const sublist = sidebar.filter(entry => entry.label === label);
+
+ if (!sublist || sublist.length === 0) return sublist;
+
+ return sublist.map(section => ({
+ ...section,
+ entries: [
+ {
+ type: 'link',
+ label: `← ${label}`,
+ href: withBase(tutorialPath),
+ attrs: {}
+ },
+ ...section.entries
+ ]
+ }));
+};
+
+const addArrowToFirstLink = (sublist) => {
+ if (!sublist || sublist.length === 0) return sublist;
+
+ return sublist.map((section) => {
+ if (section.entries && section.entries.length > 0) {
+ section.entries[0].label = `← ${section.entries[0].label}`;
+ }
+ });
+};
+
+export {
+ addArrowToFirstLink,
+ addBackToTutorialsLink,
+ filterSidebarBySubfolder,
+ filterSidebarEntries
+};
diff --git a/src/components/SiteFooter/SiteFooter.js b/src/components/SiteFooter/SiteFooter.js
deleted file mode 100644
index e290ffff..00000000
--- a/src/components/SiteFooter/SiteFooter.js
+++ /dev/null
@@ -1,46 +0,0 @@
-// SiteFooter
-//
-import kind from '@enact/core/kind';
-import {Row, Cell} from '@enact/ui/Layout';
-import {Link} from 'gatsby';
-import {OutboundLink} from 'gatsby-plugin-google-gtag';
-
-import css from './SiteFooter.module.less';
-
-const SiteFooterBase = kind({
- name: 'SiteFooter',
-
- styles: {
- css,
- className: 'footer'
- },
-
- render: ({...rest}) => {
- return (
-
-
-
-
-
-
- Twitter Chat Blog |
-
- Copyright © 2017-{new Date().getFullYear()} LG Electronics
- |
-
-
- );
- }
-});
-
-export default SiteFooterBase;
-export {SiteFooterBase as SiteFooter, SiteFooterBase};
diff --git a/src/components/SiteFooter/SiteFooter.module.less b/src/components/SiteFooter/SiteFooter.module.less
deleted file mode 100644
index 93700ff8..00000000
--- a/src/components/SiteFooter/SiteFooter.module.less
+++ /dev/null
@@ -1,88 +0,0 @@
-// SiteFooter.less
-//
-
-@import "../../css/colors.less";
-@import "../../css/variables.less";
-
-.footer {
- background-color: @docs-footer-bg-color;
- color: @docs-footer-text-color;
- line-height: 30px;
- margin: 1em 0 0 0;
- padding: 3em @docs-site-edge-keepout;
- font-weight: 100;
-
- .frame {
- max-width: (100px + @docs-site-max-width);
- margin: 0 auto;
- }
-
- a:link,
- a:hover,
- a:active,
- a:visited {
- color: @docs-footer-text-color;
- text-decoration: none;
- }
- a:hover {
- text-decoration: underline;
- }
-
-
- ul {
- display: block;
- margin: 0;
- padding: 0;
-
- li {
- display: inline-block;
- margin: 0 0.5em;
-
- a {
- display: block;
- padding: 0 1em;
- }
-
- &:first-child {
- margin-left: 0;
-
- a {
- padding-left: 0;
- }
- }
-
- &:last-child {
- margin-right: 0;
-
- a {
- padding-right: 0;
- }
- }
- }
- }
-
- p {
- margin: 0;
- }
-
- .nav {
- text-align: center;
- padding-bottom: 1.5em;
- margin-bottom: 0.5em;
- border-bottom: 1px solid rgba(255, 255, 255, 0.5);
- }
-
- .social,
- .copy {
- line-height: 27px;
- }
-
- .social {
- }
-
- .copy {
- text-align: right;
- opacity: 0.7;
- font-size: 80%;
- }
-}
diff --git a/src/components/SiteFooter/package.json b/src/components/SiteFooter/package.json
deleted file mode 100644
index db353eb5..00000000
--- a/src/components/SiteFooter/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "main": "SiteFooter.js"
-}
diff --git a/src/components/SiteHeader/SiteHeader.js b/src/components/SiteHeader/SiteHeader.js
deleted file mode 100644
index 07d6e238..00000000
--- a/src/components/SiteHeader/SiteHeader.js
+++ /dev/null
@@ -1,106 +0,0 @@
-// SiteHeader
-//
-import kind from '@enact/core/kind';
-import {Link} from 'gatsby';
-import {OutboundLink} from 'gatsby-plugin-google-gtag';
-import PropTypes from 'prop-types';
-import {Row, Cell} from '@enact/ui/Layout';
-
-import SiteSection from '../SiteSection';
-import {linkIsLocation, linkIsBaseOf} from '../../utils/paths.js';
-import Search from '../Search';
-
-import css from './SiteHeader.module.less';
-import logo from '../../assets/enact.svg';
-
-const SiteHeaderBase = kind({
- name: 'SiteHeader',
-
- propTypes: {
- location: PropTypes.object.isRequired,
- title: PropTypes.string.isRequired,
- compact: PropTypes.bool
- },
-
- defaultProps: {
- compact: false
- },
-
- styles: {
- css,
- className: 'header'// debug'
- },
-
- computed: {
- className: ({compact, styler}) => styler.append({compact}),
- classNameDocs: ({location, styler}) => styler.join({active: (linkIsLocation('/docs/', location.pathname))}),
- classNameModules: ({location, styler}) => styler.join({active: (linkIsBaseOf('/docs/modules/', location.pathname))}),
- classNameHome: ({location, styler}) => styler.join({active: (linkIsLocation('/', location.pathname))})
- },
-
- render: ({classNameDocs, classNameModules, classNameHome, location, title, ...rest}) => {
- delete rest.compact;
- return (
-
-
-
-
- {title}
-
- |
-
-
-
-
- |
- Home
- |
-
- Getting Started
- |
-
- API
- |
-
- Github
- |
-
- UI Components
- |
-
- |
-
-
-
- );
- }
-});
-
-export default SiteHeaderBase;
-export {SiteHeaderBase as SiteHeader, SiteHeaderBase};
diff --git a/src/components/SiteHeader/SiteHeader.module.less b/src/components/SiteHeader/SiteHeader.module.less
deleted file mode 100644
index 1fb22a72..00000000
--- a/src/components/SiteHeader/SiteHeader.module.less
+++ /dev/null
@@ -1,149 +0,0 @@
-// SiteHeader.less
-//
-
-@import "~@enact/ui/styles/mixins.less";
-@import "../../css/colors.less";
-@import "../../css/variables.less";
-
-.header {
- @header-line-height: 76px;
- @header-height: @header-line-height;
-
- z-index: 10; // Make "z space" available for the ::before shadow; to appear in
-
- .frame {
- background-color: @docs-header-bg-color;
- color: @docs-header-text-color;
- font-size: 11px;
- }
-
- &::before {
- .position(0);
- position: absolute;
- content: '';
- display: block;
- z-index: -1;
- background-color: black;
- opacity: 0.05;
- transform: translateY(0);
- will-change: transform;
- transition: transform 200ms ease-in-out;
- }
-
- a {
- display: block;
- text-decoration: none;
- white-space: nowrap;
- }
-
- a,
- a:link,
- a:hover,
- a:active,
- a:visited {
- color: @docs-header-text-color;
- }
-
- // Additions for possible accessibility improvements
- // a:focus {
- // text-decoration: underline;
- // }
-
- .siteSearch,
- .nav a {
- margin: 5px 0 5px 1.2em;
- }
-
- .siteSearch {
- width: 200px;
- margin-left: auto;
- margin-top: 15px;
- }
-
- .nav {
- justify-content: flex-end;
-
- a {
- margin-left: 3em;
- line-height: 2em;
- text-transform: uppercase;
- font-weight: 500;
-
- }
-
- >:last-child {
- margin-right: 0;
- padding-right: 0;
- }
- }
-
- .siteTitle {
- font-size: 30px;
- font-weight: 100;
- line-height: @header-line-height;
-
- a.logo {
- color: @docs-header-logo-color;
-
- .image,
- .text {
- transition: transform 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
- }
-
- .image {
- display: inline-block;
- background-color: @docs-header-logo-color;
- height: @docs-header-logo-image-size;
- width: @docs-header-logo-image-size;
- position: absolute;
- top: 0;
- z-index: 1;
- transform: scale(1);
- transform-origin: top left;
- will-change: transform;
- }
- .text {
- position: relative;
- display: inline-block;
- padding-left: (@docs-header-logo-image-size + (@docs-header-item-spacing * 2));
- transform: translateX(0);
- will-change: transform;
- }
-
- // &:focus {
- // .text {
- // text-decoration: underline;
- // }
- // }
- }
- }
-
- &.compact {
- &::before {
- transform: translateY(2px);
- }
-
- .siteTitle {
- a.logo {
- @compact-scale: unit(@header-height / @docs-header-logo-image-size);
-
- .image {
- transform: scale(@compact-scale);
- }
- .text {
- transform: translateX(((@docs-header-logo-image-size * @compact-scale) + @docs-header-item-spacing) - (@docs-header-logo-image-size + @docs-header-item-spacing));
- }
- }
- }
- }
-
- .nav {
- text-align: center;
-
- a {
- &.active {
- color: @docs-header-link-active-text-color;
- }
- }
- }
-}
diff --git a/src/components/SiteHeader/package.json b/src/components/SiteHeader/package.json
deleted file mode 100644
index c6077a50..00000000
--- a/src/components/SiteHeader/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "main": "SiteHeader.js"
-}
diff --git a/src/components/SiteSection/SiteSection.js b/src/components/SiteSection/SiteSection.js
deleted file mode 100644
index 0301f781..00000000
--- a/src/components/SiteSection/SiteSection.js
+++ /dev/null
@@ -1,55 +0,0 @@
-// SiteSection
-//
-import PropTypes from 'prop-types';
-import kind from '@enact/core/kind';
-
-import css from './SiteSection.module.less';
-
-const SiteSectionBase = kind({
- name: 'SiteSection',
-
- propTypes: {
- accent: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
- /**
- * The type of component to use to render as the SiteSection. May be a DOM node name (e.g
- * 'div', 'span', etc.) or a custom component.
- *
- * @type {String|Node}
- * @default 'section'
- * @public
- */
- component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-
- fullHeight: PropTypes.bool
- },
-
- defaultProps: {
- component: 'section',
- fullHeight: false
- },
-
- styles: {
- css,
- className: 'siteSection'
- },
-
- computed: {
- className: ({accent, fullHeight, styler}) => styler.append(accent ? ('accent' + accent) : null, {fullHeight})
- },
-
- render: ({children, component: Component, ...rest}) => {
- delete rest.accent;
- delete rest.fullHeight;
- return (
-
-
- {children}
-
-
- );
- }
-});
-
-export default SiteSectionBase;
-export {SiteSectionBase as SiteSection, SiteSectionBase};
diff --git a/src/components/SiteSection/SiteSection.module.less b/src/components/SiteSection/SiteSection.module.less
deleted file mode 100644
index d227569d..00000000
--- a/src/components/SiteSection/SiteSection.module.less
+++ /dev/null
@@ -1,74 +0,0 @@
-// SiteSection.less
-//
-
-@import "../../css/colors.less";
-@import "../../css/variables.less";
-
-// Experimental color cycling background
-@keyframes colorCycle {
- 0% {
- background-color: hsl(270, 85%, 93%);
- }
- 25% {
- background-color: hsl(180, 85%, 93%);
- }
- 50% {
- background-color: hsl(90, 85%, 93%);
- }
- 75% {
- background-color: hsl(0, 85%, 93%);
- }
- 75.01% {
- background-color: hsl(360, 85%, 93%);
- }
- 100% {
- background-color: hsl(270, 85%, 93%);
- }
-}
-
-.siteSection {
-
- &.accentHome {
- background-color: @docs-section-accent1-bg-color;
- // animation: colorCycle 40s linear infinite;
- // Subtilly update the background by 4 degrees every 2 seconds
- animation: colorCycle 120s steps(60, end) infinite;
- }
-
- &.accentNav {
- background-color: @docs-nav-bg-color;
- }
-
- &.accent1 {
- background-color: @docs-section-accent1-bg-color;
- }
-
- &.accent2 {
- background-color: @docs-section-accent2-bg-color;
- }
-
- &.accent3 {
- background-color: @docs-section-accent3-bg-color;
- }
-
- &.message {
- background-color: @docs-section-message-bg-color;
- color: @docs-section-message-text-color;
- }
-
- > .frame {
- margin-left: auto;
- margin-right: auto;
- padding-left: @docs-site-edge-keepout;
- padding-right: @docs-site-edge-keepout;
- max-width: @docs-site-max-width;
- }
-
- &.fullHeight {
- height: 100%;
-
- .frame {
- height: 100%;
- }
- }
-}
diff --git a/src/components/SiteSection/package.json b/src/components/SiteSection/package.json
deleted file mode 100644
index 842176e9..00000000
--- a/src/components/SiteSection/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "main": "SiteSection.js"
-}
diff --git a/src/components/SiteTitle/SiteTitle.js b/src/components/SiteTitle/SiteTitle.js
deleted file mode 100644
index b9c2c2b2..00000000
--- a/src/components/SiteTitle/SiteTitle.js
+++ /dev/null
@@ -1,45 +0,0 @@
-// SiteTitle
-//
-import PropTypes from 'prop-types';
-import kind from '@enact/core/kind';
-import {config} from '../../config';
-import DocumentTitle from 'react-document-title';
-
-const SiteTitleBase = kind({
- name: 'SiteTitle',
-
- propTypes: {
- custom: PropTypes.bool,
- data: PropTypes.object,
- delimiter: PropTypes.string,
- title: PropTypes.string
- },
-
- defaultProps: {
- delimiter: ' | '
- },
-
- computed: {
- title: ({custom, data, delimiter, title}) => {
- // A a fully customized title
- if (custom && title) return title;
-
- // Direct title
- if (title) return (title + delimiter + config.siteTitle);
-
- // Indirect title
- if (data && data.markdownRemark && data.markdownRemark.frontmatter && data.markdownRemark.frontmatter.title) {
- return (data.markdownRemark.frontmatter.title + delimiter + config.siteTitle);
- }
-
- // No title
- return config.siteTitle;
- }
- },
-
- // TODO: Replace DocumentTitle with Helmet
- render: (props) => ({linkText} ;
- } else if (link) {
- anchor = {linkText} ;
- }
-
- return (
-
- {prefix ? prefix : ''}{anchor}
- {extraText}
-
- );
- }
-});
-
-export default SmartLink;
-export {SmartLink, LocationLink};
diff --git a/src/components/SmartLink/package.json b/src/components/SmartLink/package.json
deleted file mode 100644
index 8de8586d..00000000
--- a/src/components/SmartLink/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "main": "SmartLink.js"
-}
-
diff --git a/src/components/TOCList/TOCList.js b/src/components/TOCList/TOCList.js
deleted file mode 100644
index 5bf1161b..00000000
--- a/src/components/TOCList/TOCList.js
+++ /dev/null
@@ -1,108 +0,0 @@
-// Table of Contents List
-//
-// TODO: We can use the metadata fields in the `.js` and `.md` files and pull them out of the
-// `data` member of the page list. We'll need to separate out the sections into an array of
-// objects, sorted by the sort order. Then, we can loop through and output them. Given how
-// different this is from the module list, we probably don't want to unify them at this time.
-// However, we might could if we were to pass in the data instead of inferring from the route.
-
-import PropTypes from 'prop-types';
-// import Link from 'gatsby-link';
-import kind from '@enact/core/kind';
-
-import TreeNav from '../TreeNav';
-import {canonicalPath, linkIsLocation, linkIsBaseOf} from '../../utils/paths';
-
-function baseDocPath (pathname) {
- const path = canonicalPath(pathname);
-
- if (path.indexOf('/docs/') !== 0) {
- return '';
- }
- const parts = path.split('/');
- if (parts.length < 4) {
- return '';
- }
- // const end = parts.length === 4 ? -1 : -2;
- // return parts.slice(0, end).join('/') + '/';
- return (`/docs/${parts[2]}/`);
-}
-
-const TOCListBase = kind({
- name: 'TOCList',
-
- propTypes: {
- location: PropTypes.object,
- modules: PropTypes.array
- },
-
- render: ({modules, location, ...rest}) => {
- // The top level section in the docs. (e.g. tutorials)
- const sourcePath = baseDocPath(location.pathname);
-
- // Abort if we're not in a docs sub-level
- if (!sourcePath || sourcePath === '/docs/modules/') {
- return (null);
- }
-
- // Gather all pages below the top level section
- const subPages = modules.filter((page) =>
- page.node.fields.slug.includes(sourcePath));
-
- // Gather all the first level headings in the subPages (e.g. Kitten Browser)
- const sections = subPages.reduce((acc, page) => {
- const pathParts = page.node.fields.slug.replace(sourcePath, '').split('/');
-
- if (pathParts.length === 2) { // Two, because trailing slash
- acc.push(page);
- }
- return acc;
- }, []);
-
- // Build a tree of sections and links
- const tree = [];
- sections.forEach((section) => {
- const linkText = section.node.frontmatter.title;
- const sectionLocation = section.node.fields.slug;
- const active = linkIsBaseOf(sectionLocation, location.pathname);
-
- const treeSection = {
- active,
- title: linkText,
- to: sectionLocation
- };
-
- if (subPages.length > 0) {
- const children = [];
-
- subPages.forEach((page) => {
- // Compartmentalize s inside the parent UL
- const subLinkText = page.node.frontmatter.title;
- const subPageLocation = page.node.fields.slug;
- const activePage = linkIsLocation(subPageLocation, location.pathname);
- if (subPageLocation !== sectionLocation && subPageLocation.indexOf(sectionLocation) === 0) {
- children.push({
- title: subLinkText,
- active: activePage,
- to: subPageLocation
- });
- }
- });
-
- treeSection.children = children;
- }
-
- tree.push(treeSection);
- });
-
- return (
-
+ {title && (
+
+ {title}
+
+ )}
+ {children}
+
+ )
+}
+
+export default Tooltip;
\ No newline at end of file
diff --git a/src/components/Tooltip/Tooltip.module.css b/src/components/Tooltip/Tooltip.module.css
new file mode 100644
index 00000000..b399f819
--- /dev/null
+++ b/src/components/Tooltip/Tooltip.module.css
@@ -0,0 +1,33 @@
+.tooltipContainer {
+ cursor: pointer;
+ position: relative;
+
+ .tooltip {
+ background: red;
+ border-radius: 0 3em 3em 3em;
+ border: 1px solid #c00;
+ bottom: 0;
+ color: white;
+ font-size: 75%;
+ font-style: italic;
+ left: 50%;
+ line-height: 150%;
+ padding: 0 0.7em;
+ position: absolute;
+ transform: translateY(100%);
+ visibility: hidden;
+ text-wrap: nowrap;
+ z-index: 1;
+
+ &.optional {
+ background: #f4ffcc;
+ border: 1px solid #fd3;
+ color: #666;
+ font-style: normal;
+ }
+ }
+
+ &:hover .tooltip {
+ visibility: visible;
+ }
+}
diff --git a/src/components/TreeNav/TreeNav.js b/src/components/TreeNav/TreeNav.js
deleted file mode 100644
index 5c628002..00000000
--- a/src/components/TreeNav/TreeNav.js
+++ /dev/null
@@ -1,94 +0,0 @@
-// Modules List
-//
-
-import kind from '@enact/core/kind';
-import {Link} from 'gatsby';
-import PropTypes from 'prop-types';
-
-// import {linkIsLocation} from '../../utils/paths.js';
-
-import css from './TreeNav.module.less';
-
-const exampleTree = [
- {
- title: 'Cat 1',
- to: 'aLink',
- active: true,
- children: [
- {title: 'Item 1', to: 'aLink', props: {}},
- {title: 'Item 2', to: 'aLink', active: true, props: {}},
- {title: 'Item 3', to: 'aLink', props: {}},
- {title: 'Item 4', to: 'aLink', props: {}}
- ]
- },
- {
- title: 'Cat 2',
- children: [
- {title: 'Item 1', to: 'aLink', props: {}},
- {title: 'Item 2', to: 'aLink', props: {}},
- {title: 'Item 3', to: 'aLink', props: {}},
- {title: 'Item 4', to: 'aLink', props: {}}
- ]
- }
-];
-
-const renderItem = (itemProps) => {
- const {title, active, to} = itemProps;
- const uniqueKey = title.replace(/\s/, '');
- return (
-
-
- );
-};
-
-const renderSection = ({title, active, children, to}) => {
- const uniqueKey = title.replace(/\s/, '');
- return (
-
- {children.map(renderItem)} ) : null
- }
-
- );
-};
-
-
-const TreeNavBase = kind({
- name: 'TreeNav',
-
- propTypes: {
- title: PropTypes.string,
- titleLink: PropTypes.string,
- tree: PropTypes.array
- },
-
- defaultProps: {
- tree: exampleTree
- },
-
- styles: {
- css,
- className: 'treeNav covertLinks'
- },
-
- render: ({title, titleLink, tree, ...rest}) => {
- return (
-
-
-
- {titleLink ?
-
- {tree.map(renderSection)}
-
- );
- }
-});
-
-export default TreeNavBase;
-export {
- TreeNavBase,
- TreeNavBase as TreeNav
-};
diff --git a/src/components/TreeNav/TreeNav.module.less b/src/components/TreeNav/TreeNav.module.less
deleted file mode 100644
index 8d1e8a9a..00000000
--- a/src/components/TreeNav/TreeNav.module.less
+++ /dev/null
@@ -1,36 +0,0 @@
-// ModulesList.less
-//
-
-// @import "~@enact/ui/styles/mixins.less";
-// @import "../../css/colors.less";
-
-.treeNav {
- h2,
- ul {
- font-size: 100%;
- line-height: 1.4em;
-
- a {
- display: block;
- }
- }
-
- h2 {
- margin: 1em 0 0.5em 0;
- font-weight: 300;
- }
-
- ul {
- list-style: none;
- margin: 0 0 3em 0;
-
- li {
- margin: 0.5em 0 0.8em 2ex;
- }
- }
-
- .active {
- font-weight: 500;
- color: black;
- }
-}
diff --git a/src/components/TreeNav/package.json b/src/components/TreeNav/package.json
deleted file mode 100644
index 22a622aa..00000000
--- a/src/components/TreeNav/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "main": "TreeNav.js"
-}
diff --git a/src/components/TwoColumnContent/TwoColumnContent.astro b/src/components/TwoColumnContent/TwoColumnContent.astro
new file mode 100644
index 00000000..d9e2fcc6
--- /dev/null
+++ b/src/components/TwoColumnContent/TwoColumnContent.astro
@@ -0,0 +1,60 @@
+
+ {
+ Astro.locals.starlightRoute.toc && (
+
+ )
+ }
+
+
{types[1]} ];
- }
- return readableType;
- }
- },
-
- render: (props) => (
- {type}
- ))
- },
-
- render: ({typesList, ...rest}) => (
-
- Variable Types Key:
- {typesList}
-
- )
-});
-
-export default TypesKey;
diff --git a/src/components/TypesKey/TypesKey.module.less b/src/components/TypesKey/TypesKey.module.less
deleted file mode 100644
index 1ee90fad..00000000
--- a/src/components/TypesKey/TypesKey.module.less
+++ /dev/null
@@ -1,18 +0,0 @@
-// TypesKey.less
-//
-.typesKey {
- border: 1px solid rgba(0,0,0, 0.1);
- margin: 0.5em auto;
- border-radius: 6px;
- padding: 0 0.2em;
- text-align: center;
- display: inline-block;
-
- .title {
- font-style: italic;
- // font-weight: bold;
- margin-right: 1ex;
- opacity: 0.6;
- font-size: 90%;
- }
-}
diff --git a/src/components/TypesKey/package.json b/src/components/TypesKey/package.json
deleted file mode 100644
index 19870e5d..00000000
--- a/src/components/TypesKey/package.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "main": "TypesKey.js"
-}
diff --git a/src/components/breakpoints.css b/src/components/breakpoints.css
deleted file mode 100644
index d447679b..00000000
--- a/src/components/breakpoints.css
+++ /dev/null
@@ -1,16 +0,0 @@
-@media only screen and (min-width: 700px) {
- .breakpoint-min-width-700 {
- display: block;
- }
- .breakpoint-max-width-700 {
- display: none;
- }
-}
-@media only screen and (max-width: 700px) {
- .breakpoint-min-width-700 {
- display: none;
- }
- .breakpoint-max-width-700 {
- display: block;
- }
-}
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 00000000..e5418a69
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,27 @@
+import DocParse from './DocParse/DocParse.jsx';
+import Heading from './Heading/Heading.astro';
+import Link from './Link/Link.jsx';
+import LivePreview from './LivePreview/LivePreview.jsx';
+import MemberClass from './MemberClass/MemberClass.astro';
+import MemberFunction from './MemberFunction/MemberFunction.jsx';
+import MemberHoC from './MemberHoC/MemberHoC.astro';
+import MemberObjectTypeDef from './MemberObjectTypeDef/MemberObjectTypeDef.jsx';
+import MemberProperties from './MemberProperties/MemberProperties.astro';
+import ModuleImport from './ModuleImport/ModuleImport.astro';
+import ModuleSchema from './ModuleSchema/ModuleSchema.astro';
+import Tooltip from './Tooltip/Tooltip.jsx';
+
+export {
+ DocParse,
+ Heading,
+ Link,
+ LivePreview,
+ MemberFunction,
+ MemberHoC,
+ MemberObjectTypeDef,
+ MemberProperties,
+ ModuleImport,
+ ModuleSchema,
+ MemberClass,
+ Tooltip
+};
diff --git a/src/components/utils/index.js b/src/components/utils/index.js
new file mode 100644
index 00000000..b7b96d32
--- /dev/null
+++ b/src/components/utils/index.js
@@ -0,0 +1,4 @@
+import {typeToString, getPropertyTypeColor} from './utils.js';
+
+export {typeToString, getPropertyTypeColor};
+
diff --git a/src/components/utils/utils.js b/src/components/utils/utils.js
new file mode 100644
index 00000000..602d665b
--- /dev/null
+++ b/src/components/utils/utils.js
@@ -0,0 +1,67 @@
+/**
+ * Converts type expression to readable string
+ *
+ * @param type
+ * @returns {*|string}
+ */
+function typeToString (type) {
+ if (!type) return 'any';
+
+ if (typeof type === 'string') return type;
+
+ switch (type.type) {
+ case 'NameExpression':
+ return type.name;
+ case 'OptionalType':
+ return `${typeToString(type.expression)}?`;
+ case 'UnionType':
+ return type.elements.map(typeToString).join(' | ');
+ case 'ArrayType':
+ return `${typeToString(type.elements[0])}[]`;
+ case 'TypeApplication': {
+ const base = typeToString(type.expression);
+ const params = type.applications.map(typeToString).join(', ');
+ return `${base}(${params})`;
+ }
+ case 'FunctionType':
+ return 'Function';
+ case 'AllLiteral':
+ return 'Any';
+ case 'NullableLiteral':
+ return 'null';
+ case 'RestType':
+ return `...${typeToString(type.expression)}`;
+ case 'UndefinedLiteral':
+ return 'undefined';
+ case 'StringLiteralType':
+ return `'${type.value}'`;
+ default:
+ return 'any';
+ }
+}
+
+/**
+ * Get property type color
+ */
+function getPropertyTypeColor (type) {
+ switch (type) {
+ case 'Array':
+ return '#53c79d';
+ case 'Boolean':
+ return '#ff44b5';
+ case 'Function':
+ return '#f5a623';
+ case 'Module':
+ return '#7ed321';
+ case 'Number':
+ return '#4be0de';
+ case 'Object':
+ return '#a8a8a8';
+ case 'String':
+ return '#f55';
+ default:
+ return '#a8a8a8';
+ }
+}
+
+export {getPropertyTypeColor, typeToString};
diff --git a/src/config.js b/src/config.js
deleted file mode 100644
index 8a4490b8..00000000
--- a/src/config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export const config = {
- siteTitle: 'Enact',
- linkPrefix: '/public',
- baseColor: '#1b5271',
- docPages: [
- '/docs/',
- '/docs/modules/',
- '/docs/developer-guide/',
- '/docs/developer-tools/',
- '/docs/tutorials/'
- ]
-};
diff --git a/src/consts/index.js b/src/consts/index.js
new file mode 100644
index 00000000..b8427c3d
--- /dev/null
+++ b/src/consts/index.js
@@ -0,0 +1,3 @@
+import {PAGE} from './page.const';
+
+export {PAGE};
diff --git a/src/consts/page.const.js b/src/consts/page.const.js
new file mode 100644
index 00000000..03feb4f5
--- /dev/null
+++ b/src/consts/page.const.js
@@ -0,0 +1,14 @@
+const PAGE = {
+ ABOUT: 'about',
+ API: 'api',
+ DEVELOPER_GUIDE: 'developer-guide',
+ DEVELOPER_TOOLS: 'developer-tools',
+ GUIDE: 'guide',
+ TOOLS: 'tools',
+ DOCS: 'docs',
+ HOME: '',
+ MODULES: 'modules',
+ TUTORIALS: 'tutorials'
+};
+
+export {PAGE};
diff --git a/src/content.config.ts b/src/content.config.ts
new file mode 100644
index 00000000..c3001fcc
--- /dev/null
+++ b/src/content.config.ts
@@ -0,0 +1,15 @@
+import {defineCollection, z} from 'astro:content';
+import {docsLoader} from '@astrojs/starlight/loaders';
+import {docsSchema} from '@astrojs/starlight/schema';
+
+export const collections = {
+ docs: defineCollection({
+ loader: docsLoader(),
+ schema: docsSchema({
+ extend: z.object({
+ headerTitle: z.string().optional(),
+ button: z.object({label: z.string(), href: z.string()}).optional()
+ })
+ })
+ })
+};
diff --git a/src/content/docs/404.md b/src/content/docs/404.md
new file mode 100644
index 00000000..63e3dae8
--- /dev/null
+++ b/src/content/docs/404.md
@@ -0,0 +1,11 @@
+---
+title: 'Whoopsie Doodle'
+template: splash
+editUrl: false
+hero:
+ image:
+ file: ../../images/boom.svg
+ tagline: There shall, in that time, be rumours of things going astray, and there shall be a great confusion as to where things really are, and nobody will really know where lieth those little things possessed by their developers that their developers put there only just the night before, about eight o’clock.
+---
+
+(BTW, 404 , Page not found)
\ No newline at end of file
diff --git a/src/content/docs/about/about.astro b/src/content/docs/about/about.astro
new file mode 100644
index 00000000..7f7d5fc1
--- /dev/null
+++ b/src/content/docs/about/about.astro
@@ -0,0 +1,81 @@
+---
+import css from './about.module.css';
+
+const contributors = {
+ community: [
+ 'Eric Blade',
+ 'Nazir DOĞAN',
+ 'Kaloyan Kolev'
+ ],
+ LG: [
+ 'Jeonghee Ahn',
+ 'Seungcheon Baek',
+ 'Juwon Jeong',
+ 'Hyeok Jo',
+ 'Jae Jo',
+ 'Baekwoo Jung',
+ 'Bongsub Kim',
+ 'Hyelyn Kim',
+ 'Jiye Kim',
+ 'Mikyung Kim',
+ 'Chang Gi Lee',
+ 'Goun Lee',
+ 'Seonghyup Park',
+ 'Seungho Park',
+ 'Sijeong Ro',
+ 'YunBum Sung',
+ 'Dongsu Won'
+ ],
+ LGSI: [
+ 'Cholan Madala',
+ 'Richa Shaurbh',
+ 'Srirama Singeri',
+ 'Anish T.D',
+ 'Antony Willet'
+ ],
+ LGSVL: [
+ 'Renuka Atale',
+ 'Stephen Choi',
+ 'Dave Freeman',
+ 'Lis Hammel',
+ 'Jeff Lam',
+ 'Teck Liew',
+ 'Gray Norton',
+ 'Jason Robitaille',
+ 'Lucie Roy',
+ 'HanGyeol Hailey Ryu',
+ 'Blake Stephens',
+ 'Alicia Stice',
+ 'Roy Sutton',
+ 'Aaron Tam',
+ 'Jeremy Thomas',
+ 'Derek Tor'
+ ]
+};
+---
+
+
+
Contributors
+
LG Silicon Valley Lab - U.S.A.
+
+
+ {contributors.LGSVL.map(name => {name} )}
+
+
+
LG - South Korea
+
+ {contributors.LG.map(name => {name} )}
+
+
+
LG Software India - India
+
+ {contributors.LGSI.map(name => {name} )}
+
+
+
Community Members - Worldwide
+
+ {contributors.community.map(name => {name} )}
+
+
+
Maybe you too‽
+
+ {modulesFiles.map(({name, modulePath}) => {
+ const {description, icon, version} = libraryDescription[name] || {};
+ const libraryImage = icon ? importedImages[importedImagesPath + icon]() : images[name];
+
+ if (!libraryImage && !description && !version) return null;
+
+ return (
+
+
+ {name} Library
+
+ {version}
+ {description}
+
+ )
+ })}
+
+
+
+
+
+
+
+
+
+
+
+ {modulesFiles.map((file) => {
+ return (
+
{file.name}
+ )
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/content/docs/docs/docs.module.css b/src/content/docs/docs/docs.module.css
new file mode 100644
index 00000000..d433f6d5
--- /dev/null
+++ b/src/content/docs/docs/docs.module.css
@@ -0,0 +1,69 @@
+.docsSection {
+ display: flex;
+ flex-direction: column;
+ margin-inline: auto;
+ max-width: var(--section-max-width);
+
+ .sectionContent {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ margin-block: 1.5em;
+
+ &:hover .imageContainer .image {
+ animation-name: wiggle;
+ }
+
+ .imageContainer {
+ flex: 1 3;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+
+ .image {
+ animation: 6s ease-in infinite none;
+ margin-bottom: 0.5em;
+ transform-origin: center bottom;
+ width: 72px;
+ }
+ }
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ flex: 3 1;
+ width: 100%;
+
+ a {
+ color: inherit;
+ margin: 0.25em 0;
+ padding: 0.5em;
+ text-decoration: none;
+
+ &:hover {
+ color: #5582FF;
+ }
+ }
+ }
+
+
+ .twoColumnContent {
+ display: grid;
+ grid-template-columns: auto auto;
+ }
+ }
+}
+
+@keyframes wiggle {
+ 0%, 5% {
+ transform: rotate(0deg);
+ }
+ 1%, 3% {
+ transform: rotate(5deg);
+
+ }
+ 2%, 4% {
+ transform: rotate(-5deg);
+ }
+}
diff --git a/src/content/docs/docs/index.mdx b/src/content/docs/docs/index.mdx
new file mode 100644
index 00000000..a6c55947
--- /dev/null
+++ b/src/content/docs/docs/index.mdx
@@ -0,0 +1,9 @@
+---
+title: Developer Documentation
+template: splash
+layout: ./docs.astro
+hero:
+ tagline: 'Documentation for Enact falls into several categories: Tutorials, Libraries (API) Documentation, Developer Guides and Tools.'
+ image:
+ file: ../../../images/getting-started.svg
+---
\ No newline at end of file
diff --git a/src/pages/examples/index.md b/src/content/docs/examples/index.md
similarity index 83%
rename from src/pages/examples/index.md
rename to src/content/docs/examples/index.md
index 85172c8f..b3dc755a 100644
--- a/src/pages/examples/index.md
+++ b/src/content/docs/examples/index.md
@@ -1,5 +1,6 @@
---
title: Examples
+template: splash
---
* [Enact Sample Apps](https://github.com/enactjs/samples)
diff --git a/src/content/docs/guide/guide.astro b/src/content/docs/guide/guide.astro
new file mode 100644
index 00000000..e84eb046
--- /dev/null
+++ b/src/content/docs/guide/guide.astro
@@ -0,0 +1,16 @@
+---
+import {generateLinks as GenerateLinks} from '../../../utils/utils';
+
+import css from './guide.module.css';
+
+// Developer Guide Files
+const developerGuideFiles = import.meta.glob('/src/content/docs/developer-guide/{**/docs/index.{md,mdx},*/index.{md,mdx},*.{md,mdx}}');
+const developerGuideFilesPaths = Object.keys(developerGuideFiles);
+---
+
+
+
diff --git a/src/content/docs/guide/guide.module.css b/src/content/docs/guide/guide.module.css
new file mode 100644
index 00000000..3250357e
--- /dev/null
+++ b/src/content/docs/guide/guide.module.css
@@ -0,0 +1,6 @@
+@import '../../../css/main.module.css';
+
+.sectionContent {
+ flex: 1;
+ padding-inline: 1rem;
+}
\ No newline at end of file
diff --git a/src/content/docs/guide/index.mdx b/src/content/docs/guide/index.mdx
new file mode 100644
index 00000000..0bd0abae
--- /dev/null
+++ b/src/content/docs/guide/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Developer Guide
+template: splash
+layout: ./guide.astro
+hero:
+ tagline: Details and resources on how to use Enact.
+---
\ No newline at end of file
diff --git a/src/content/docs/index.astro b/src/content/docs/index.astro
new file mode 100644
index 00000000..0c7ea899
--- /dev/null
+++ b/src/content/docs/index.astro
@@ -0,0 +1,106 @@
+---
+import {withBase} from '@utils';
+import {LinkButton} from '@astrojs/starlight/components';
+import {Image} from 'astro:assets';
+import Link from '../../components/Link/Link.jsx';
+
+import auto from '../../images/enact-home-auto.svg';
+import custom from '../../images/enact-home-custom.svg';
+import easy from '../../images/enact-home-easy.svg';
+import performant from '../../images/enact-home-perf.svg';
+
+import css from './index.module.css';
+---
+
+
+
+
+
+
+
Easy to Use
+
+ Enact builds atop the excellent React library, and provides a full framework to the developer. The recent boom of
+ web technologies and related tools has led to a plethora of options available. In fact, getting started might be
+ the most difficult part of building a modern web application.
+
+
+
+
+
Performant
+
+ Beyond initial setup, Enact continues to provide benefits. It was built with performance in mind,
+ and conscious decisions were made to ensure that applications remain performant as they grow in
+ size and complexity. This ranges from the way components are rendered to how data flows through application.
+
+
+
+
+
+
+
Customizable
+
+ Enact has a full set of customizable widgets that can be tuned and tweaked to the particular style of
+ each project. Using our experience in building full UI libraries for a broad swath of devices
+ ranging from TVs to watches, we have created a widget library whose components can easily be composed
+ to create complex views and applications.
+
+
+
+
+
Adaptable
+
+ Enact was designed to produce native quality applications for a wide variety embedded web platforms.
+ Read about Enact’s use cases and how it helps solve problems for Automotive, Robotics, TV and more.
+
+
+
+
+
+
+
+
+
+ The goal of Enact is to provide the building blocks for creating robust and maintainable applications.
+ To that end, we’ve pulled together the best solutions for internationalization (i18n), accessibility (a11y),
+ focus management, linting, testing and building. Then, we created a set of reusable components and behaviors on
+ top of that. We combined these pieces and ensured that they work together seamlessly, allowing developers to focus on implementation.
+
+
+
+
+
+
+
Installation
+
To make things simple, Enact provides a simple command-line tool to initialize projects and perform common actions. Installing it is as easy as:
+
npm install -g @enact/cli
+
+ Setup Guide
+
+
+
Meet Limestone
+
Limestone is our TV-centric UI library. With over 50 components to choose from, Limestone provides a solid base for creating applications designed for large screens.
+
+ Limestone API
+
+
+
Contributing
+
The Enact team welcomes contributions from anyone motivated to help out.
+
+ Contribution Guide
+
+
diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx
new file mode 100644
index 00000000..f3a6468a
--- /dev/null
+++ b/src/content/docs/index.mdx
@@ -0,0 +1,15 @@
+---
+title: Enact Framework
+description: Get started building your docs site with Starlight.
+layout: ./index.astro
+template: splash
+hero:
+ tagline: An app development framework built atop React that’s easy to use, performant and customizable.
+ image:
+ file: ../../images/enact-home-hero.svg
+ actions:
+ - text: Getting Started
+ link: /docs/
+ - text: API
+ link: /api/
+---
diff --git a/src/content/docs/index.module.css b/src/content/docs/index.module.css
new file mode 100644
index 00000000..0a35be3f
--- /dev/null
+++ b/src/content/docs/index.module.css
@@ -0,0 +1,97 @@
+@import '../../css/main.module.css';
+
+.infoSection {
+ max-width: 960px;
+ margin-inline: auto;
+
+ .reason {
+ background-color: hsl(0, 0%, 98%);
+ border: 1px solid hsl(0, 0%, 90%);
+ padding-inline: 1rem;
+ border-radius: 10px;
+ display: flex;
+
+ .image {
+ margin: 0 3em;
+ width: 10em;
+ }
+
+ .description {
+ margin: 2em 0;
+ text-wrap: pretty;
+
+ .title {
+ margin: 0 0 1.5rem 0;
+ color: inherit;
+ font-weight: 400;
+ text-rendering: optimizeLegibility;
+ font-size: 140%;
+ line-height: 1.1;
+ }
+ }
+ }
+}
+
+.messageSection {
+ margin: 2em 0;
+ padding-block: 3em;
+ position: relative;
+ text-wrap: pretty;
+
+ &::before {
+ background-color: var(--message-section-background-clor);
+ border-radius: 10px;
+ content: '';
+ height: 100%;
+ left: 50%;
+ position: absolute;
+ top: 0;
+ transform: translateX(-50%);
+ width: calc(100vw - 2rem);
+ z-index: -1;
+ }
+
+ .message {
+ margin-inline: auto;
+ max-width: 960px;
+ }
+}
+
+.guideSection {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ margin-inline: auto;
+ max-width: 960px;
+
+ h4 {
+ margin: 2rem 0 1.5rem 0;
+ color: inherit;
+ font-weight: 400;
+ text-rendering: optimizeLegibility;
+ font-size: 125%;
+ line-height: 1.1;
+ }
+
+ .guide {
+ margin-top: 0;
+ flex: 0.3;
+ }
+}
+
+:global([data-theme="light"]) {
+ .messageSection {
+ --message-section-background-clor: #DEF1F8;
+ }
+}
+
+:global([data-theme='dark']) {
+ .reason {
+ background-color: hsl(0, 0%, 15%);
+ border: 1px solid hsl(0, 0%, 35%);
+ }
+
+ .messageSection {
+ --message-section-background-clor: #1E3A46;
+ }
+}
diff --git a/src/pages/legal/index.md b/src/content/docs/legal/index.md
similarity index 81%
rename from src/pages/legal/index.md
rename to src/content/docs/legal/index.md
index 72bfa190..c3a3ec66 100644
--- a/src/pages/legal/index.md
+++ b/src/content/docs/legal/index.md
@@ -1,7 +1,10 @@
---
-description: Enact Framework License and Trademark statement
title: Legal
-github: https://github.com/enactjs/docs/blob/develop/src/pages/legal/index.md
+description: Enact Framework License and Trademark statement
+template: splash
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/pages/legal/index.md
---
## License
diff --git a/src/content/docs/tools/index.mdx b/src/content/docs/tools/index.mdx
new file mode 100644
index 00000000..dc42b6d9
--- /dev/null
+++ b/src/content/docs/tools/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Developer Tools
+template: splash
+layout: ./tools.astro
+hero:
+ tagline: Enact tools that make life easier.
+---
\ No newline at end of file
diff --git a/src/content/docs/tools/tools.astro b/src/content/docs/tools/tools.astro
new file mode 100644
index 00000000..71ab9005
--- /dev/null
+++ b/src/content/docs/tools/tools.astro
@@ -0,0 +1,15 @@
+---
+import {generateLinks as GenerateLinks} from '../../../utils/utils';
+
+import css from './tools.module.css';
+
+// Developer Tools Files
+const developerToolsFiles = import.meta.glob('/src/content/docs/developer-tools/*/index.{md,mdx}');
+const developerToolsFilesPaths = Object.keys(developerToolsFiles);
+---
+
+
\ No newline at end of file
diff --git a/src/content/docs/tools/tools.module.css b/src/content/docs/tools/tools.module.css
new file mode 100644
index 00000000..81767faa
--- /dev/null
+++ b/src/content/docs/tools/tools.module.css
@@ -0,0 +1,5 @@
+@import '../../../css/main.module.css';
+
+.sectionContent {
+ padding-inline: 1rem;
+}
diff --git a/src/content/docs/tutorials/index.mdx b/src/content/docs/tutorials/index.mdx
new file mode 100644
index 00000000..30dad037
--- /dev/null
+++ b/src/content/docs/tutorials/index.mdx
@@ -0,0 +1,7 @@
+---
+title: Tutorials
+layout: ./tutorials.astro
+template: splash
+hero:
+ tagline: ''
+---
\ No newline at end of file
diff --git a/src/pages/docs/tutorials/tutorial-hello-enact/index.md b/src/content/docs/tutorials/intro/hello-enact.md
similarity index 56%
rename from src/pages/docs/tutorials/tutorial-hello-enact/index.md
rename to src/content/docs/tutorials/intro/hello-enact.md
index 6498db17..025e472a 100644
--- a/src/pages/docs/tutorials/tutorial-hello-enact/index.md
+++ b/src/content/docs/tutorials/intro/hello-enact.md
@@ -1,18 +1,22 @@
---
title: Hello Enact!
-github: https://github.com/enactjs/docs/blob/develop/src/pages/docs/tutorials/tutorial-hello-enact/index.md
-order: 3
+sidebar:
+ order: 3
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/tutorials/intro/hello-enact.md
---
+
## Introduction
Before you begin this tutorial, make sure you have created a new Enact project. See [Enact Development Setup](../setup/) for more information. You can delete `src/views/MainPanel.js` as it will not be used in the tutorial example.
Now comes the exciting part! We're actually going to write some code and, maybe, learn a few things along the way. We're going to break down the app into four parts. They are:
-1. [The Basics](basics/)
-2. [Adding CSS](adding-css/)
-2. [Introducing kind()](kind/)
-3. [Adding Sandstone Support](adding-sandstone-support/)
+1. [The Basics](../../tutorial-hello-enact/basics/)
+2. [Adding CSS](../../tutorial-hello-enact/addingcss/)
+2. [Introducing kind()](../../tutorial-hello-enact/kind/)
+3. [Adding Sandstone Support](../../tutorial-hello-enact/addingsandstonesupport/)
(Don't worry, you can just start at step 1. You don't have to come back here. Each page has a link to the next section at the bottom.)
-**Next: [The Basics](basics/)**
+**Next: [The Basics](../../tutorial-hello-enact/basics/)**
\ No newline at end of file
diff --git a/src/pages/docs/tutorials/introduction/index.md b/src/content/docs/tutorials/intro/introduction.md
similarity index 63%
rename from src/pages/docs/tutorials/introduction/index.md
rename to src/content/docs/tutorials/intro/introduction.md
index 93b1c0d0..5ad3efb1 100644
--- a/src/pages/docs/tutorials/introduction/index.md
+++ b/src/content/docs/tutorials/intro/introduction.md
@@ -1,7 +1,10 @@
---
title: Introduction
-github: https://github.com/enactjs/docs/blob/develop/src/pages/docs/tutorials/introduction/index.md
-order: 1
+sidebar:
+ order: 1
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/tutorials/intro/introduction.md
---
This guide will help you learn the basics of Enact. Enact is a JavaScript framework built around the React UI library. You may have heard some things about React and how difficult it can be to learn. Relax. Part of the reason to use frameworks like Enact is to make it easier to get started by reducing the number of new concepts and tools that must be learned.
@@ -11,6 +14,8 @@ As you follow along, we'll slowly introduce the new concepts that you will need
### Sections
1. [Setup](../setup/) your application structure.
-2. Create [Hello, Enact!](../tutorial-hello-enact/) to learn the basics.
-3. Explore more advanced topics in [Kitten Browser](../tutorial-kitten-browser/).
-4. Create a [Counter App](../tutorial-typescript/) to understand concepts of TypeScript with Enact
+2. Create [Hello, Enact!](../hello-enact/) to learn the basics.
+3. Explore more advanced topics in [Kitten Browser](../kitten-browser/).
+4. Create a [Counter App](../typescript/) to understand concepts of TypeScript with Enact
+
+**Next: [Setup](../setup/)**
\ No newline at end of file
diff --git a/src/content/docs/tutorials/intro/kitten-browser.md b/src/content/docs/tutorials/intro/kitten-browser.md
new file mode 100644
index 00000000..11f6cd54
--- /dev/null
+++ b/src/content/docs/tutorials/intro/kitten-browser.md
@@ -0,0 +1,23 @@
+---
+title: Kitten Browser
+sidebar:
+ order: 4
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/tutorials/intro/kitten-browser.md
+---
+
+## Introduction
+Before you begin this tutorial, make sure you have created a new Enact project. See [Enact Development Setup](../setup/) for more information. You can delete `src/views/MainPanel.js` as it will not be used in the tutorial example.
+
+Kitten Browser is a tutorial that demonstrates many of the features of the Enact framework and React that will be useful to you. This is more in-depth than [Hello, Enact!](../hello-enact/).
+
+### Sections
+
+1. [App Setup](../../tutorial-kitten-browser/appsetup/)
+2. [Reusable Components](../../tutorial-kitten-browser/reusablecomponents/)
+3. [Repeaters and Lists](../../tutorial-kitten-browser/lists/)
+4. [Organizing your App with Panels](../../tutorial-kitten-browser/panels/)
+5. [State and Data Management](../../tutorial-kitten-browser/dataandstate/)
+
+**Next: [App Setup](../../tutorial-kitten-browser/appsetup/)**
\ No newline at end of file
diff --git a/src/pages/docs/tutorials/setup/index.md b/src/content/docs/tutorials/intro/setup.md
similarity index 93%
rename from src/pages/docs/tutorials/setup/index.md
rename to src/content/docs/tutorials/intro/setup.md
index c4dbc4a1..94b43576 100644
--- a/src/pages/docs/tutorials/setup/index.md
+++ b/src/content/docs/tutorials/intro/setup.md
@@ -1,8 +1,12 @@
---
title: Enact Development Setup
-github: https://github.com/enactjs/docs/blob/develop/src/pages/docs/tutorials/setup/index.md
-order: 2
+sidebar:
+ order: 2
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/tutorials/intro/setup.md
---
+
Enact provides a handy command-line tool (the [Enact CLI](https://www.npmjs.com/package/@enact/cli)) that makes it easy to get started.
## Prerequisites
@@ -93,6 +97,14 @@ Your application is configured using the `package.json` file. We'll only cover t
"enact": {
"theme": "sandstone"
},
+ "eslintConfig": {
+ "extends": "enact"
+ },
+ "eslintIgnore": [
+ "node_modules/*",
+ "build/*",
+ "dist/*"
+ ],
"dependencies": { [omitted] }
}
```
@@ -101,4 +113,4 @@ Your application is configured using the `package.json` file. We'll only cover t
With that housekeeping out of the way, nothing can stop you. You're ready to add your first source file and build Hello, Enact.
-**Next: [Hello Enact](../tutorial-hello-enact/)!**
+**Next: [Hello Enact](../hello-enact/)!**
diff --git a/src/content/docs/tutorials/intro/typescript.md b/src/content/docs/tutorials/intro/typescript.md
new file mode 100644
index 00000000..25863cc8
--- /dev/null
+++ b/src/content/docs/tutorials/intro/typescript.md
@@ -0,0 +1,19 @@
+---
+title: TypeScript with Enact
+sidebar:
+ order: 5
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/tutorials/intro/typescript.md
+---
+
+## Introduction
+
+This tutorial demonstrates how to use Enact with TypeScript. In this tutorial, we will create a reusable counter component. We're going to break down the app into four parts. They are:
+
+1. [App Setup](../../tutorial-typescript/appsetup/)
+2. [TypeScript Overview](../../tutorial-typescript/typescriptoverview/)
+3. [Adding a New Component](../../tutorial-typescript/addinganewcomponent/)
+4. [Updating the Component Using TypeScript with Enact](../../tutorial-typescript/componentwithtsenact/)
+
+**Next: [App Setup](../../tutorial-typescript/appsetup/)**
\ No newline at end of file
diff --git a/src/pages/docs/tutorials/tutorial-hello-enact/adding-sandstone-support/Hello-Sandstone.png b/src/content/docs/tutorials/tutorial-hello-enact/Hello-Sandstone.png
similarity index 100%
rename from src/pages/docs/tutorials/tutorial-hello-enact/adding-sandstone-support/Hello-Sandstone.png
rename to src/content/docs/tutorials/tutorial-hello-enact/Hello-Sandstone.png
diff --git a/src/pages/docs/tutorials/tutorial-hello-enact/adding-css/index.md b/src/content/docs/tutorials/tutorial-hello-enact/addingCSS.md
similarity index 97%
rename from src/pages/docs/tutorials/tutorial-hello-enact/adding-css/index.md
rename to src/content/docs/tutorials/tutorial-hello-enact/addingCSS.md
index 71ae248d..e023372f 100644
--- a/src/pages/docs/tutorials/tutorial-hello-enact/adding-css/index.md
+++ b/src/content/docs/tutorials/tutorial-hello-enact/addingCSS.md
@@ -1,7 +1,10 @@
---
title: Adding CSS
-github: https://github.com/enactjs/docs/blob/develop/src/pages/docs/tutorials/tutorial-hello-enact/adding-css/index.md
-order: 2
+sidebar:
+ order: 2
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/tutorials/tutorial-hello-enact/addingCSS.md
---
With our [basic Hello Enact!](../basics/) app built and running, we can start to expand
it by adding some styling. The first stop is defining and managing [CSS classes in React](#css-classes-in-react) followed by exploring [CSS modules](#introducing-css-modules).
diff --git a/src/pages/docs/tutorials/tutorial-hello-enact/adding-sandstone-support/index.md b/src/content/docs/tutorials/tutorial-hello-enact/addingSandstoneSupport.md
similarity index 95%
rename from src/pages/docs/tutorials/tutorial-hello-enact/adding-sandstone-support/index.md
rename to src/content/docs/tutorials/tutorial-hello-enact/addingSandstoneSupport.md
index 4004541e..22d230de 100644
--- a/src/pages/docs/tutorials/tutorial-hello-enact/adding-sandstone-support/index.md
+++ b/src/content/docs/tutorials/tutorial-hello-enact/addingSandstoneSupport.md
@@ -1,7 +1,10 @@
---
title: Adding Sandstone Support
-github: https://github.com/enactjs/docs/blob/develop/src/pages/docs/tutorials/tutorial-hello-enact/adding-sandstone-support/index.md
-order: 4
+sidebar:
+ order: 4
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/tutorials/tutorial-hello-enact/addingSandstoneSupport.md
---
In the [previous part of Hello Enact!](../kind/), we covered the benefits of stateless components
and introduced the `kind()` factory. In this final part, we'll discuss [Higher-order Components
@@ -108,6 +111,6 @@ to Enact.
We won't take this application any further but will use the same foundation to build out the next
-sample, [Kitten Browser](../../tutorial-kitten-browser/), a basic image browsing app that will introduce
+sample, [Kitten Browser](../../intro/kitten-browser/), a basic image browsing app that will introduce
configuring components, handling events, managing data, and the components available in `@enact/ui`
and `@enact/sandstone`.
diff --git a/src/pages/docs/tutorials/tutorial-hello-enact/basics/index.md b/src/content/docs/tutorials/tutorial-hello-enact/basics.md
similarity index 98%
rename from src/pages/docs/tutorials/tutorial-hello-enact/basics/index.md
rename to src/content/docs/tutorials/tutorial-hello-enact/basics.md
index 61b76635..19f2c8b0 100644
--- a/src/pages/docs/tutorials/tutorial-hello-enact/basics/index.md
+++ b/src/content/docs/tutorials/tutorial-hello-enact/basics.md
@@ -1,7 +1,10 @@
---
title: Enact Basics
-github: https://github.com/enactjs/docs/blob/develop/src/pages/docs/tutorials/tutorial-hello-enact/basics/index.md
-order: 1
+sidebar:
+ order: 1
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/tutorials/tutorial-hello-enact/basics.md
---
Hang on to your hats, we're going to write some code and get this app running! In this section, we're going to [create our first module](#building-the-app-module), [see how the application is rendered](#rendering-the-app) into the DOM, and [bundle and run the app](#running-the-app). Let's get started.
@@ -178,4 +181,4 @@ You should be able to run `npm run serve` now and, as we work through the rest o
We've built the boilerplate Enact app and have it running using `npm run serve`. Next up, in Part 2 of Hello, Enact!, we'll add some style using CSS Modules.
-**Next: [Adding CSS](../adding-css/)**
+**Next: [Adding CSS](../addingcss/)**
diff --git a/src/pages/docs/tutorials/tutorial-hello-enact/kind/index.md b/src/content/docs/tutorials/tutorial-hello-enact/kind.md
similarity index 91%
rename from src/pages/docs/tutorials/tutorial-hello-enact/kind/index.md
rename to src/content/docs/tutorials/tutorial-hello-enact/kind.md
index 21cb440f..cfcceb3e 100644
--- a/src/pages/docs/tutorials/tutorial-hello-enact/kind/index.md
+++ b/src/content/docs/tutorials/tutorial-hello-enact/kind.md
@@ -1,10 +1,13 @@
---
title: Introducing `kind()`
-github: https://github.com/enactjs/docs/blob/develop/src/pages/docs/tutorials/tutorial-hello-enact/kind/index.md
-order: 3
+sidebar:
+ order: 3
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/tutorials/tutorial-hello-enact/kind.md
---
-In [Adding CSS](../adding-css/), we expanded our basic application with classes imported from a CSS Module. Next up is [discussing stateless components](#stateless-components), why we consider them to be the foundation of any application and [introducing our factory](#introducing-code-classlanguage-textkindcode) for creating them, `@enact/core/kind`.
+In [Adding CSS](../addingcss/), we expanded our basic application with classes imported from a CSS Module. Next up is [discussing stateless components](#stateless-components), why we consider them to be the foundation of any application and [introducing our factory](#introducing-kind) for creating them, `@enact/core/kind`.
## Stateless Components
@@ -120,4 +123,4 @@ render: function (props) {
While we didn't add much new functionality, we instead laid the groundwork for future features that will be enabled by the capabilities of `kind()`. We covered the benefits of stateless components and how to create them using the `kind()` factory. Next, we'll show how the styling and features of Sandstone can be easily added to our application.
-**Next: [Adding Sandstone Support](../adding-sandstone-support/)**
+**Next: [Adding Sandstone Support](../addingsandstonesupport/)**
diff --git a/src/pages/docs/tutorials/tutorial-kitten-browser/app-setup/KittenBrowser-Step1.png b/src/content/docs/tutorials/tutorial-kitten-browser/KittenBrowser-Step1.png
similarity index 100%
rename from src/pages/docs/tutorials/tutorial-kitten-browser/app-setup/KittenBrowser-Step1.png
rename to src/content/docs/tutorials/tutorial-kitten-browser/KittenBrowser-Step1.png
diff --git a/src/pages/docs/tutorials/tutorial-kitten-browser/reusable-components/KittenBrowser-Step2.png b/src/content/docs/tutorials/tutorial-kitten-browser/KittenBrowser-Step2.png
similarity index 100%
rename from src/pages/docs/tutorials/tutorial-kitten-browser/reusable-components/KittenBrowser-Step2.png
rename to src/content/docs/tutorials/tutorial-kitten-browser/KittenBrowser-Step2.png
diff --git a/src/pages/docs/tutorials/tutorial-kitten-browser/app-setup/index.md b/src/content/docs/tutorials/tutorial-kitten-browser/appSetup.md
similarity index 87%
rename from src/pages/docs/tutorials/tutorial-kitten-browser/app-setup/index.md
rename to src/content/docs/tutorials/tutorial-kitten-browser/appSetup.md
index 0f987b99..527ab4f8 100644
--- a/src/pages/docs/tutorials/tutorial-kitten-browser/app-setup/index.md
+++ b/src/content/docs/tutorials/tutorial-kitten-browser/appSetup.md
@@ -1,7 +1,10 @@
---
title: App Setup
-github: https://github.com/enactjs/docs/blob/develop/src/pages/docs/tutorials/tutorial-kitten-browser/app-setup/index.md
-order: 1
+sidebar:
+ order: 1
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/tutorials/tutorial-kitten-browser/appSetup.md
---
-To explore some more interesting features of JavaScript, React, and Enact, we're going to pivot from our [Hello, Enact!](../../tutorial-hello-enact/) app to a new app: Kitten Browser. In this step, we will setup the module and create the initial App component to lay the foundation for the rest of the guide.
+To explore some more interesting features of JavaScript, React, and Enact, we're going to pivot from our [Hello, Enact!](../../intro/hello-enact/) app to a new app: Kitten Browser. In this step, we will setup the module and create the initial App component to lay the foundation for the rest of the guide.
> We'll use the placeholder image site [LoremFlickr](http://loremflickr.com/) to source our images.
> If you're not a fan of kittens, you're welcome to substitute a different keyword in the URLs. No judgments.
@@ -82,7 +85,7 @@ export default appElement;
```
### ./src/App/App.js
-At this point, our app looks a lot like Hello, Enact!'s [App.js](../../tutorial-hello-enact/kind#updating-appjs) with a couple small changes. We won't need any custom CSS for our App component so we've removed that `import`. We've also replaced the content with the basic markup for a single photo.
+At this point, our app looks a lot like Hello, Enact!'s [App.js](../../tutorial-hello-enact/kind/#updating-appjs) with a couple small changes. We won't need any custom CSS for our App component so we've removed that `import`. We've also replaced the content with the basic markup for a single photo.
```js
import kind from '@enact/core/kind';
import ThemeDecorator from '@enact/sandstone/ThemeDecorator';
@@ -152,4 +155,4 @@ Returning to the warning message, ESLint says img elements should have an `alt`
In this step, we've created a basic single App component that shows a single photo. In the Step 2, we'll start to make our app more flexible and composable, as well as dive into `=>` arrow functions.
-**Next step: [Kitten Browser: Step 2](../reusable-components/)**
+**Next step: [Kitten Browser: Step 2](../reusablecomponents/)**
diff --git a/src/pages/docs/tutorials/tutorial-kitten-browser/data-and-state/index.md b/src/content/docs/tutorials/tutorial-kitten-browser/dataAndState.md
similarity index 95%
rename from src/pages/docs/tutorials/tutorial-kitten-browser/data-and-state/index.md
rename to src/content/docs/tutorials/tutorial-kitten-browser/dataAndState.md
index 71b2f155..1499d130 100644
--- a/src/pages/docs/tutorials/tutorial-kitten-browser/data-and-state/index.md
+++ b/src/content/docs/tutorials/tutorial-kitten-browser/dataAndState.md
@@ -1,7 +1,10 @@
---
title: State and Data Management
-github: https://github.com/enactjs/docs/blob/develop/src/pages/docs/tutorials/tutorial-kitten-browser/data-and-state/index.md
-order: 5
+sidebar:
+ order: 5
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/tutorials/tutorial-kitten-browser/dataAndState.md
---
-In the [second step](../reusable-components/), we started breaking down our app into reusable components. Next, we'll introduce Repeaters and Lists to help us stamp out multiple instances of a component. Along the way, we'll also cover a few more JavaScript concepts: destructuring, template literals, and the rest operator.
+In the [second step](../reusablecomponents/), we started breaking down our app into reusable components. Next, we'll introduce Repeaters and Lists to help us stamp out multiple instances of a component. Along the way, we'll also cover a few more JavaScript concepts: destructuring, template literals, and the rest operator.
## Repeaters and Lists
-A list is a basic building block for any application. Whether its a grid of images (as in our case), a newsfeed, a product catalog, or shopping cart, each can be implemented by a component that maps an array of data onto an array of component instances. The most basic version in Enact is the [Repeater](../../../modules/ui/Repeater/).
+A list is a basic building block for any application. Whether its a grid of images (as in our case), a newsfeed, a product catalog, or shopping cart, each can be implemented by a component that maps an array of data onto an array of component instances. The most basic version in Enact is the [Repeater](../../../modules/ui/repeater/).
### Repeater
diff --git a/src/pages/docs/tutorials/tutorial-kitten-browser/panels/index.md b/src/content/docs/tutorials/tutorial-kitten-browser/panels.md
similarity index 93%
rename from src/pages/docs/tutorials/tutorial-kitten-browser/panels/index.md
rename to src/content/docs/tutorials/tutorial-kitten-browser/panels.md
index 7e7832f7..646910e5 100644
--- a/src/pages/docs/tutorials/tutorial-kitten-browser/panels/index.md
+++ b/src/content/docs/tutorials/tutorial-kitten-browser/panels.md
@@ -1,7 +1,10 @@
---
title: Organizing Your App with Panels
-github: https://github.com/enactjs/docs/blob/develop/src/pages/docs/tutorials/tutorial-kitten-browser/panels/index.md
-order: 4
+sidebar:
+ order: 4
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/tutorials/tutorial-kitten-browser/panels.md
---
-In the [first step](../app-setup/), we introduced our sample app and set up the scaffolding. Next, let's start to break down the app into discrete components and learn how to define and configure a component using `propTypes`, `defaultProps`, and `computed` properties.
+In the [first step](../appsetup/), we introduced our sample app and set up the scaffolding. Next, let's start to break down the app into discrete components and learn how to define and configure a component using `propTypes`, `defaultProps`, and `computed` properties.
## Componentization
diff --git a/src/pages/docs/tutorials/tutorial-typescript/component-with-ts-enact/Counter_view_decrement.png b/src/content/docs/tutorials/tutorial-typescript/Counter_view_decrement.png
similarity index 100%
rename from src/pages/docs/tutorials/tutorial-typescript/component-with-ts-enact/Counter_view_decrement.png
rename to src/content/docs/tutorials/tutorial-typescript/Counter_view_decrement.png
diff --git a/src/pages/docs/tutorials/tutorial-typescript/component-with-ts-enact/Counter_view_increment.png b/src/content/docs/tutorials/tutorial-typescript/Counter_view_increment.png
similarity index 100%
rename from src/pages/docs/tutorials/tutorial-typescript/component-with-ts-enact/Counter_view_increment.png
rename to src/content/docs/tutorials/tutorial-typescript/Counter_view_increment.png
diff --git a/src/pages/docs/tutorials/tutorial-typescript/component-with-ts-enact/Typescript_Enact_view.png b/src/content/docs/tutorials/tutorial-typescript/Typescript_Enact_view.png
similarity index 100%
rename from src/pages/docs/tutorials/tutorial-typescript/component-with-ts-enact/Typescript_Enact_view.png
rename to src/content/docs/tutorials/tutorial-typescript/Typescript_Enact_view.png
diff --git a/src/pages/docs/tutorials/tutorial-typescript/adding-a-new-component/index.md b/src/content/docs/tutorials/tutorial-typescript/addingANewComponent.md
similarity index 88%
rename from src/pages/docs/tutorials/tutorial-typescript/adding-a-new-component/index.md
rename to src/content/docs/tutorials/tutorial-typescript/addingANewComponent.md
index d1fd5c0e..580567e4 100644
--- a/src/pages/docs/tutorials/tutorial-typescript/adding-a-new-component/index.md
+++ b/src/content/docs/tutorials/tutorial-typescript/addingANewComponent.md
@@ -1,7 +1,10 @@
---
title: Add a New Component Using TypeScript
-github: https://github.com/enactjs/docs/blob/develop/src/pages/docs/tutorials/tutorial-typescript/adding-a-new-component/index.md
-order: 3
+sidebar:
+ order: 3
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/tutorials/tutorial-typescript/addingANewComponent.md
---
Enact has a number of ready-to-use components. Each component includes TypeScript typing, allowing them to be easily integrated into a project.
@@ -93,4 +96,4 @@ npm run serve
-**Next: [Component with TypeScript and Enact](../component-with-ts-enact/)**
+**Next: [Component with TypeScript and Enact](../componentwithtsenact/)**
diff --git a/src/pages/docs/tutorials/tutorial-typescript/app-setup/index.md b/src/content/docs/tutorials/tutorial-typescript/appSetup.md
similarity index 65%
rename from src/pages/docs/tutorials/tutorial-typescript/app-setup/index.md
rename to src/content/docs/tutorials/tutorial-typescript/appSetup.md
index 7931b9fa..a944b522 100644
--- a/src/pages/docs/tutorials/tutorial-typescript/app-setup/index.md
+++ b/src/content/docs/tutorials/tutorial-typescript/appSetup.md
@@ -1,20 +1,23 @@
---
-title: TypeScript Development Setup
-github: https://github.com/enactjs/docs/blob/develop/src/pages/docs/tutorials/tutorial-typescript/app-setup/index.md
-order: 1
+title: App Setup
+sidebar:
+ order: 1
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/tutorials/tutorial-typescript/appSetup.md
---
The Enact CLI provides a template ([@enact/template-typescript](https://www.npmjs.com/package/@enact/template-typescript)) that enables developers to quickly get started using TypeScript with Enact.
### Prerequisites
-- Complete the [Hello Enact](../../tutorial-hello-enact/) tutorial so you are ready to dive into the code
+- Complete the [Hello Enact](../../intro/hello-enact/) tutorial so you are ready to dive into the code
- Understand the Enact app structure, directory structure and *package.json* setup
- Have a ready-to-learn attitude (most important!)
### Installing the TypeScript Template
-> **Note**: Before you begin this tutorial, make sure you have installed the Enact CLI tool. See [Enact Development Setup](../../setup/) for more information.
+> **Note**: Before you begin this tutorial, make sure you have installed the Enact CLI tool. See [Enact Development Setup](../../intro/setup/) for more information.
- Install the TypeScript template
@@ -28,4 +31,4 @@ enact template install @enact/template-typescript
enact create MyApp -t typescript
```
-**Next: [TypeScript Overview](../typescript-overview/)**
+**Next: [TypeScript Overview](../typescriptoverview/)**
diff --git a/src/pages/docs/tutorials/tutorial-typescript/component-with-ts-enact/index.md b/src/content/docs/tutorials/tutorial-typescript/componentWithTsEnact.md
similarity index 96%
rename from src/pages/docs/tutorials/tutorial-typescript/component-with-ts-enact/index.md
rename to src/content/docs/tutorials/tutorial-typescript/componentWithTsEnact.md
index 00e19647..afac0fa0 100644
--- a/src/pages/docs/tutorials/tutorial-typescript/component-with-ts-enact/index.md
+++ b/src/content/docs/tutorials/tutorial-typescript/componentWithTsEnact.md
@@ -1,7 +1,10 @@
---
title: Add a New Component Using TypeScript and Enact
-github: https://github.com/enactjs/docs/blob/develop/src/pages/docs/tutorials/tutorial-typeccript-basic/component-with-ts-enact/index.md
-order: 4
+sidebar:
+ order: 4
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/tutorials/tutorial-typescript/componentWithTsEnact.md
---
Now we can look at using TypeScript with the Enact `kind()` factory to accomplish the same goal.
@@ -99,7 +102,7 @@ export default CounterBase;
For state management on `count` prop will use `ui/Changeable`.
-> Applying `Changeable` to a component will pass two additional props: the current value from state and an event callback to invoke when the value changes. For more information, read the [ui/Changeable documentation](../../../modules/ui/Changeable/)
+> Applying `Changeable` to a component will pass two additional props: the current value from state and an event callback to invoke when the value changes. For more information, read the [ui/Changeable documentation](../../../modules/ui/changeable/)
- Create a handle function for click events on the button. The `createHandler` function will take a function as input then use the function to update the `count`. By using `handle()` we will forward the call to the callback function (`onCounterChange`) defined via the configuration object passed to `Changeable`:
diff --git a/src/pages/docs/tutorials/tutorial-typescript/adding-a-new-component/counter_view.png b/src/content/docs/tutorials/tutorial-typescript/counter_view.png
similarity index 100%
rename from src/pages/docs/tutorials/tutorial-typescript/adding-a-new-component/counter_view.png
rename to src/content/docs/tutorials/tutorial-typescript/counter_view.png
diff --git a/src/pages/docs/tutorials/tutorial-typescript/typescript-overview/index.md b/src/content/docs/tutorials/tutorial-typescript/typescriptOverview.md
similarity index 89%
rename from src/pages/docs/tutorials/tutorial-typescript/typescript-overview/index.md
rename to src/content/docs/tutorials/tutorial-typescript/typescriptOverview.md
index 9e32b337..09d90392 100644
--- a/src/pages/docs/tutorials/tutorial-typescript/typescript-overview/index.md
+++ b/src/content/docs/tutorials/tutorial-typescript/typescriptOverview.md
@@ -1,7 +1,10 @@
---
title: Enact with TypeScript Overview
-github: https://github.com/enactjs/docs/blob/develop/src/pages/docs/tutorials/tutorial-typescript/typescript-overview/index.md
-order: 2
+sidebar:
+ order: 2
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/tutorials/tutorial-typescript/typescriptOverview.md
---
This page documents how Enact and TypeScript work together.
@@ -22,7 +25,7 @@ By default, the TypeScript template is set for strict TypeScript error checking.
"strict": false,
```
-If you need finer-grained control over your build or linting settings, you can 'eject' the application and modify the build settings directly (though you will lose some of the benefits of the Enact CLI). See [Ejecting Apps](/docs/developer-tools/cli/ejecting-apps/) for more information.
+If you need finer-grained control over your build or linting settings, you can 'eject' the application and modify the build settings directly (though you will lose some of the benefits of the Enact CLI). See [Ejecting Apps](../../../developer-tools/cli/ejecting-apps/) for more information.
### Edge Cases
@@ -41,4 +44,4 @@ In these cases, TypeScript may issue an error about the default property not bei
If you find a situation where the Enact TypeScript definitions appear to be failing, please open a [GitHub issue](https://github.com/enactjs/enact/issues). We also have a [Gitter chat](https://gitter.im/EnactJS/Lobby) where you can ask questions and get help from the community.
-**Next: [Adding a New Component](../adding-a-new-component/)**
+**Next: [Adding a New Component](../addinganewcomponent/)**
diff --git a/src/content/docs/tutorials/tutorials.astro b/src/content/docs/tutorials/tutorials.astro
new file mode 100644
index 00000000..24f68ab8
--- /dev/null
+++ b/src/content/docs/tutorials/tutorials.astro
@@ -0,0 +1,34 @@
+---
+import {generateLinks as GenerateLinks} from '@utils';
+
+import css from './tutorials.module.css';
+
+const tutorialsFiles = import.meta.glob('/src/content/docs/tutorials/intro/*.{md,mdx}');
+const tutorialsFilesPaths = Object.keys(tutorialsFiles);
+---
+
+
+
+ Here you can learn the basics of Enact. Enact is a JavaScript
+ framework built around the React UI library. You may have heard some things about
+ React and how difficult it can be to learn. Don’t panic. Part of the point of the Enact
+ framework is to reduce the complexity by simplifying, and making easier, many of the rough bits
+ of React and its steep learning curve involve. Basically, we did the hard part,
+ made many evaluations and wrote solutions, so you don’t have to.
+
+
+ As you follow along, we’ll slowly introduce the new concepts that you will
+ need to learn to master Enact. These new concepts include some React-specific
+ knowledge, new JavaScript features you can take advantage of, and an
+ introduction to the tools Enact provides.
+
+
+ Try these step-by-step hands-on tutorials and sample projects to help you
+ learn how to use the Enact framework:
+
+
+
\ No newline at end of file
diff --git a/src/content/docs/tutorials/tutorials.module.css b/src/content/docs/tutorials/tutorials.module.css
new file mode 100644
index 00000000..7e8b42e4
--- /dev/null
+++ b/src/content/docs/tutorials/tutorials.module.css
@@ -0,0 +1,30 @@
+.caption {
+ padding-inline: 1rem;
+ margin-top: -1rem;
+ font-weight: 350;
+}
+
+.sectionContent {
+ display: flex;
+ flex-direction: row;
+ margin-block: 1.5em;
+ max-width: var(--section-max-width);
+ padding-inline: 1rem;
+ width: 100%;
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+
+ a {
+ color: inherit;
+ padding-block: 0.5em;
+ text-decoration: none;
+
+ &:hover {
+ color: #5582FF;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/uses/agate-themes.jpg b/src/content/docs/uses/agate-themes.jpg
similarity index 100%
rename from src/pages/uses/agate-themes.jpg
rename to src/content/docs/uses/agate-themes.jpg
diff --git a/src/pages/uses/automotive/index.md b/src/content/docs/uses/automotive/index.md
similarity index 77%
rename from src/pages/uses/automotive/index.md
rename to src/content/docs/uses/automotive/index.md
index 024abde6..d2d4004b 100644
--- a/src/pages/uses/automotive/index.md
+++ b/src/content/docs/uses/automotive/index.md
@@ -1,6 +1,9 @@
---
title: Enact for Automotive
-github: https://github.com/enactjs/docs/blob/develop/src/pages/uses/automotive/index.md
+template: splash
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/uses/automotive/index.md
---
Web technologies are well suited for developing rich applications for the automotive market. Enact makes it easy for large organizations to implement performant, reliable and robust applications for automotive. Its features include:
@@ -26,4 +29,14 @@ Enact will power the reference apps for the forthcoming webOS Auto distribution.
Enact powered the LG automotive UI at the [Automotive Grade Linux](https://www.automotivelinux.org/) booth during CES. This demonstration showcased the power and features that Enact can deliver when paired up with [Web App Manager (WAM)](https://github.com/webosose/wam) on AGL.
-`youtube:https://www.youtube.com/embed/XUEGQxcnCik`
+
+ VIDEO
+
+
+
diff --git a/src/pages/uses/index.md b/src/content/docs/uses/index.md
similarity index 92%
rename from src/pages/uses/index.md
rename to src/content/docs/uses/index.md
index 46a64786..cfb92293 100644
--- a/src/pages/uses/index.md
+++ b/src/content/docs/uses/index.md
@@ -1,6 +1,9 @@
---
title: Use Cases
-github: https://github.com/enactjs/docs/blob/develop/src/pages/uses/index.md
+template: splash
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/pages/uses/index.md
---
Enact has a wide variety of uses. Some of the more common use cases and the benefits Enact has for those applications are listed here. Don't see what you're looking for? Chances are if it's about using web technologies to produce native apps, then Enact can help. [Contact us](../contact/) to find out how.
diff --git a/src/pages/uses/robotics/index.md b/src/content/docs/uses/robotics/index.md
similarity index 53%
rename from src/pages/uses/robotics/index.md
rename to src/content/docs/uses/robotics/index.md
index 300f69d9..5f1b661c 100644
--- a/src/pages/uses/robotics/index.md
+++ b/src/content/docs/uses/robotics/index.md
@@ -1,6 +1,9 @@
---
title: Enact for Robotics
-github: https://github.com/enactjs/docs/blob/develop/src/pages/uses/robotics/index.md
+template: splash
+button:
+ label: Edit on GitHub
+ href: https://github.com/enactjs/docs/blob/develop/src/content/docs/uses/robotics/index.md
---
Robots are becoming more and more interactive. Voice control, touchscreens and informational displays are cornerstones of interactive robots. Leveraging web technologies is a natural way to bring rich content to users.
@@ -9,4 +12,12 @@ Enact is a proven solution for creating interactive, native-quality applications
Read about [Enact and our work with the ROS2 robotics platform](https://medium.com/enact-js/enact-breathes-life-into-beanbird-bot-6f7ba449b3a4).
-`youtube:https://www.youtube.com/embed/lCGa7LkDNp0`
+
+ VIDEO
+
diff --git a/src/css/colors.css b/src/css/colors.css
new file mode 100644
index 00000000..0067d5f5
--- /dev/null
+++ b/src/css/colors.css
@@ -0,0 +1,52 @@
+/*Colors - Main*/
+
+:root {
+ --docs-color-enactcyan: #5582ff;
+ --docs-color-accent1: yellowgreen;
+ --docs-color-accent2: #FF9800;
+ --docs-color-accent3: #5dc4ff;
+ --docs-color-gray-light: #EAEAEA;
+ --docs-color-gray: #a9a9a9;
+ --docs-color-gray-dark: #667;
+
+ /*Body*/
+ --docs-body-bg-color: white;
+
+ /*Balloon*/
+ --docs-balloon-bg-color: #ffdd33;
+ --docs-balloon-text-color: #666;
+
+ /*Site Header*/
+ --docs-header-bg-color: white;
+ --docs-header-text-color:
+ --docs-color-gray-dark;
+ --docs-header-logo-color:
+ --docs-color-enactcyan;
+ --docs-header-link-active-text-color:
+ --docs-color-enactcyan;
+
+ /*Site Footer*/
+ --docs-footer-bg-color: #495a6b;
+ --docs-footer-text-color: white;
+
+ /*Site Sections*/
+ --docs-section-accent1-bg-color: #DCFCF9;
+ --docs-section-accent2-bg-color: #E8FECD;
+ --docs-section-accent3-bg-color: #DEF1F8;
+ --docs-section-message-bg-color: #A9A9A9;
+ --docs-section-message-text-color: white;
+
+ /*DocsNav - Top (below header) navigation*/
+ --docs-nav-bg-color: fade(black, 9%);
+
+ /*Sidebar navigation*/
+ --docs-sidebar-bg-color: darken(white, 5%);
+ --docs-sidebar-border-color: fade(black, 15%);
+
+
+ --docs-home-button-text-color: #71A6FF;
+
+ /*Links*/
+ --docs-link-focus-accent-color:
+ --docs-color-accent3;
+}
diff --git a/src/css/colors.less b/src/css/colors.less
deleted file mode 100644
index 675b550b..00000000
--- a/src/css/colors.less
+++ /dev/null
@@ -1,48 +0,0 @@
-// Colors - Main
-//
-
-
-@docs-color-enactcyan: #5582ff;
-@docs-color-accent1: yellowgreen;
-@docs-color-accent2: #FF9800;
-@docs-color-accent3: #5dc4ff;
-@docs-color-gray-light: #EAEAEA;
-@docs-color-gray: #a9a9a9;
-@docs-color-gray-dark: #667;
-
-// Body
-@docs-body-bg-color: white;
-
-// Balloon
-@docs-balloon-bg-color: #ffdd33;
-@docs-balloon-text-color: #666;
-
-// Site Header
-@docs-header-bg-color: white;
-@docs-header-text-color: @docs-color-gray-dark;
-@docs-header-logo-color: @docs-color-enactcyan;
-@docs-header-link-active-text-color: @docs-color-enactcyan;
-
-// Site Footer
-@docs-footer-bg-color: #495a6b;
-@docs-footer-text-color: white;
-
-// Site Sections
-@docs-section-accent1-bg-color: #DCFCF9;
-@docs-section-accent2-bg-color: #E8FECD;
-@docs-section-accent3-bg-color: #DEF1F8;
-@docs-section-message-bg-color: #A9A9A9;
-@docs-section-message-text-color: white;
-
-// DocsNav - Top (below header) navigation
-@docs-nav-bg-color: fade(black, 9%);
-
-// Sidebar navigation
-@docs-sidebar-bg-color: darken(white, 5%);
-@docs-sidebar-border-color: fade(black, 15%);
-
-
-@docs-home-button-text-color: #71A6FF;
-
-// Links
-@docs-link-focus-accent-color: @docs-color-accent3;
diff --git a/src/css/fonts.less b/src/css/fonts.less
deleted file mode 100644
index ed398ec1..00000000
--- a/src/css/fonts.less
+++ /dev/null
@@ -1,75 +0,0 @@
-// Keeping the following definitions available for future changes, but since they aren't referenced
-// or needed by the current design, we shouldn't pay the loading time or bandwidth cost for them.
-
-// @font-system-src-museosans-100: local("MuseoSans-Thin"), url("../assets/fonts/MuseoSans/MuseoSans-Thin.ttf") format("truetype");
-@font-system-src-museosans-300: local("MuseoSans-Light"), url("../assets/fonts/MuseoSans/MuseoSans-Light.ttf") format("truetype");
-@font-system-src-museosans-500: local("MuseoSans-Medium"), url("../assets/fonts/MuseoSans/MuseoSans-Medium.ttf") format("truetype");
-// @font-system-src-museosans-500-i: local("MuseoSans-MediumItalic"), url("../assets/fonts/MuseoSans/MuseoSans-MediumItalic.ttf") format("truetype");
-// @font-system-src-museosans-700: local("MuseoSans-Bold"), url("../assets/fonts/MuseoSans/MuseoSans-Bold.ttf") format("truetype");
-// @font-system-src-museosans-700-i: local("MuseoSans-BoldItalic"), url("../assets/fonts/MuseoSans/MuseoSans-BoldItalic.ttf") format("truetype");
-// @font-system-src-museosans-900: local("MuseoSans-Black"), url("../assets/fonts/MuseoSans/MuseoSans-Black.ttf") format("truetype");
-// @font-system-src-museosans-900-i: local("MuseoSans-BlackItalic"), url("../assets/fonts/MuseoSans/MuseoSans-BlackItalic.ttf") format("truetype");
-
-/* ----- Museo Sans ------ */
-@font-face {
- font-family: "EnactMuseoSans";
- src: @font-system-src-museosans-300;
- font-weight: normal;
- font-style: normal;
-}
-
-// @font-face {
-// font-family: "EnactMuseoSans";
-// src: @font-system-src-museosans-100;
-// font-weight: 100;
-// font-style: normal;
-// }
-
-@font-face {
- font-family: "EnactMuseoSans";
- src: @font-system-src-museosans-300;
- font-weight: 300;
- font-style: normal;
-}
-
-@font-face {
- font-family: "EnactMuseoSans";
- src: @font-system-src-museosans-500;
- font-weight: 500;
- font-style: normal;
-}
-
-// @font-face {
-// font-family: "EnactMuseoSans";
-// src: @font-system-src-museosans-500-i;
-// font-weight: 500;
-// font-style: italic;
-// }
-
-// @font-face {
-// font-family: "EnactMuseoSans";
-// src: @font-system-src-museosans-700;
-// font-weight: 700;
-// font-style: normal;
-// }
-
-// @font-face {
-// font-family: "EnactMuseoSans";
-// src: @font-system-src-museosans-700-i;
-// font-weight: 700;
-// font-style: italic;
-// }
-
-// @font-face {
-// font-family: "EnactMuseoSans";
-// src: @font-system-src-museosans-900;
-// font-weight: 900;
-// font-style: normal;
-// }
-
-// @font-face {
-// font-family: "EnactMuseoSans";
-// src: @font-system-src-museosans-900-i;
-// font-weight: 900;
-// font-style: italic;
-// }
diff --git a/src/css/github.css b/src/css/github.css
deleted file mode 100644
index 9cec1ddd..00000000
--- a/src/css/github.css
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
-
-github.com style (c) Vasily Polovnyov
-
-*/
-.hljs-comment,
-.hljs-quote {
- color: #998;
- font-style: italic;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-subst {
- color: #333;
- font-weight: bold;
-}
-
-.hljs-number,
-.hljs-literal,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag .hljs-attr {
- color: #008080;
-}
-
-.hljs-string,
-.hljs-doctag {
- color: #d14;
-}
-
-.hljs-title,
-.hljs-section,
-.hljs-selector-id {
- color: #900;
- font-weight: bold;
-}
-
-.hljs-subst {
- font-weight: normal;
-}
-
-.hljs-type,
-.hljs-class .hljs-title {
- color: #458;
- font-weight: bold;
-}
-
-.hljs-tag,
-.hljs-name,
-.hljs-attribute {
- color: #000080;
- font-weight: normal;
-}
-
-.hljs-regexp,
-.hljs-link {
- color: #009926;
-}
-
-.hljs-symbol,
-.hljs-bullet {
- color: #990073;
-}
-
-.hljs-built_in,
-.hljs-builtin-name {
- color: #0086b3;
-}
-
-.hljs-meta {
- color: #999;
- font-weight: bold;
-}
-
-.hljs-deletion {
- background: #fdd;
-}
-
-.hljs-addition {
- background: #dfd;
-}
-
-.hljs-emphasis {
- font-style: italic;
-}
-
-.hljs-strong {
- font-weight: bold;
-}
-
diff --git a/src/css/main.module.css b/src/css/main.module.css
new file mode 100644
index 00000000..e34a2020
--- /dev/null
+++ b/src/css/main.module.css
@@ -0,0 +1,50 @@
+@import './colors.css';
+@import './variables.css';
+
+:target {
+ scroll-margin-top: 20vh;
+}
+
+.button {
+ background-color: transparent;
+ border-radius: 0.4em;
+ border: 2px solid var(--docs-home-button-text-color);
+ color: var(--docs-home-button-text-color);
+ display: inline-block;
+ line-height: 2.2rem;
+ padding: 0;
+ text-align: center;
+ width: 19ex;
+
+ &:hover {
+ background-color: var(--docs-home-button-text-color);
+ color: white;
+ }
+}
+
+.sectionContent {
+ display: flex;
+ margin-inline: auto;
+ max-width: var(--section-max-width);
+
+ .content {
+ display: flex;
+ width: 100%;
+ padding-bottom: 2em;
+ }
+
+ .twoColumnContent {
+ display: grid;
+ grid-template-columns: auto auto;
+
+ a {
+ color: inherit;
+ padding-block: 0.5em;
+ text-decoration: none;
+
+ &:hover {
+ color: #5582FF;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/css/main.module.less b/src/css/main.module.less
deleted file mode 100644
index 19a03218..00000000
--- a/src/css/main.module.less
+++ /dev/null
@@ -1,680 +0,0 @@
-// General CSS file
-//
-
-
-& {
- @import "./variables.less";
- @import "./colors.less";
- @import "./mixins.less";
- @import "./mixins.less";
- @import "./fonts.less";
-
- //
- // Elements
- //
- html,
- body {
- position: absolute;
- min-height: 100%;
- width: 100%;
- overflow: hidden;
- }
- html {
- font-size: 14px;
- }
- body {
- // color: fade(black, 60%);
- background-color: @docs-body-bg-color;
- font-family: "EnactMuseoSans", sans-serif;
- font-size: 1em;
- font-weight: 300;
- // padding-top: 76px; // Sizing allowance for the fixed header
- }
- blockquote {
- background-color: rgba(139, 195, 74, 0.2);
- border-top-right-radius: 1em;
- border-bottom-left-radius: 1em;
- margin: 0.8em 1em;
- padding: 1em 0.7em;
-
- > :last-child {
- margin-bottom: 0;
- }
- }
- // footer {
- // position: absolute;
- // width: 100%;
- // bottom: 0;
- // }
-
- strong {
- font-weight: 500;
- color: black;
- }
-
- em {
- font-weight: 500;
- font-style: normal; // No italics on the website, reclassify em as almost as bold as strong
- }
-
- a:link,
- a:hover,
- a:active,
- a:visited {
- color: @docs-color-enactcyan;
- text-decoration: none;
- }
-
- :global(.covertLinks) {
- a:link,
- a:hover,
- a:active,
- a:visited {
- color: inherit;
- }
- }
-
- // Regardless of the scenario, a hovered link should be enact-cyan
- a:hover,
- strong a:hover,
- a:hover strong,
- :global(.covertLinks) a:hover {
- color: @docs-color-enactcyan;
- }
-
- p {
- line-height: 1.5em;
- letter-spacing: 0.07ex;
- }
-
- *[data-tooltip] {
- position: relative;
-
- &::after {
- content: attr(data-tooltip);
- position: absolute;
- top: 100%;
- left: 50%;
- display: none;
- background-color: lighten(@docs-balloon-bg-color, 30%); //#ffeeaa;
- border: 1px solid @docs-balloon-bg-color;
- padding: 0 0.7em;
- font-size: 70%;
- z-index: 1;
- border-radius: 3em;
- border-top-left-radius: 0;
- color: @docs-balloon-text-color;
- pointer-events: none;
- line-height: 150%;
- }
- &:hover::after {
- display: block;
- }
- }
-
- h1 {
- // border-top: 3px solid @docs-color-accent1;
- // border-radius: 1em;
- font-weight: 300;
- // letter-spacing: 0.15ex;
- line-height: 1.6em;
- // text-align: center;
- font-size: 250%;
- color: rgba(0, 0, 0, 0.6);
- margin-top: 1em;
-
- img {
- margin: 0 1ex 0 0;
- height: 1.5em;
- vertical-align: text-bottom;
- }
-
- .image {
- margin: 0 1ex 0 0;
-
- img {
- height: 1.5em;
- vertical-align: text-bottom;
- }
- }
- }
- .caption {
- margin: 0 0 3em;
- }
-
- //
- // Classes
- //
- .article {
- max-width: @docs-site-max-width;
- padding: 0 @docs-site-edge-keepout 1.5em @docs-site-edge-keepout;
- margin-left: auto;
- margin-right: auto;
- position: relative;
-
- a {
- text-decoration: none;
- border-bottom: 1px solid transparent;
-
- &:link {
- color: @docs-color-enactcyan;
- }
- &:visited {
- color: darken(@docs-color-enactcyan, 20%);
- }
-
- &:hover,
- &:active {
- border-bottom: 1px solid @docs-color-enactcyan;
- }
- }
- }
-
- .libraryList {
- h2 {
- line-height: 1.4em;
- margin-bottom: 0.2em;
- }
- ul li {
- margin-bottom: 0;
- }
- }
-
- section.warning {
- @border-radius: 12px;
-
- border: 3px solid #fc0;
- padding: 0 30px 1px;
- margin-bottom: 1em;
- border-radius: @border-radius;
- border-corner-shape: scoop;
- background-color: rgba(255, 204, 0, 0.1);
- box-shadow: 0 0 40px 10px #fc0 inset;
- position: relative;
-
- h3 {
- background-color: #fc0;
- margin-top: -3px;
- margin-left: -33px;
- margin-right: -33px;
- background-image: linear-gradient(to bottom right, transparent 25%, #444 25%, #444 50%, transparent 50%, transparent 75%, #444 75%);
- background-size: 36px 60px;
- color: white;
- text-shadow: 0 0 3px black, 0 1px 1px black;
- padding: 0 18px;
- /* border-bottom: 3px solid #444; */
- /* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.37); */
- /* letter-spacing: 0.1ex; */
-
- &:first-child {
- border-top-left-radius: @border-radius;
- border-top-right-radius: @border-radius;
- }
- }
-
- &::before {
- position: absolute;
- top: -21px;
- left: 30px;
- content: '';
- display: block;
- // background-color: #fc0;
- // width: 30px;
- // height: 30px;
- // border-left: 18px solid #fc0;
- // border-top: 18px solid transparent;
- border-corner-shape: scoop;
- .angle-right(18px, 40deg);
- }
- }
-
- h2 {
- margin-top: 2rem;
- }
- h3 {
- margin-top: 2rem;
- font-size: 140%;
- }
- h4 {
- margin-top: 2rem;
- font-size: 125%
- }
- h5 {
- margin-top: 2rem;
- font-size: 110%
- }
- section.moduleDescription,
- section.module {
- pre.usage {
- position: relative;
-
- ::before {
- content: "import usage";
- position: absolute;
- top: 0;
- right: 0;
- letter-spacing: 0;
- font-size: 90%;
- padding: 0 1ex;
- border-left: 1px solid rgba(0, 0, 0, 0.1);
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
- border-bottom-left-radius: 1ex;
- color: rgba(0,0,0,.1);
- font-weight: normal;
- }
- }
- }
- section.moduleDescription {
- margin-bottom: 1em;
- }
-
- section.module {
- border-radius: @docs-module-padding;
- margin-bottom: 1em;
-
- // Set margins on all of the top-level elements uniformly
- p, pre,
- .constructorClass,
- .statics,
- .properties,
- .hocconfig {
- margin: 1em 0;
- }
- .componentDescription {
- font-size: 110%;
-
- p {
- margin-left: 0;
- margin-right: 0;
- }
-
- .see {
- margin-left: @docs-module-padding;
- margin-right: @docs-module-padding;
- }
- }
-
- // Specialized Elements
- h4 {
- line-height: 1.4em;
- border-bottom: 2px solid;
- font-size: 130%;
-
- .typeInHeader {
- margin-left: 1ex;
- font-size: 70%;
- font-weight: normal;
- font-style: normal;
- }
- }
- &.factory {
- h4 {
- &::before {
- background-color: @docs-color-accent3;
- background-image: url(../assets/factory.svg);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 1.6em;
- content: '';
- height: 2.5em;
- width: 2.5em;
- display: inline-block;
- margin-right: 0.7ex;
- margin-bottom: -1em;
- border-radius: 99px;
- border: 3px solid white;
- }
- }
- }
- h5 {
- color: @docs-color-accent2;
- border-bottom: 1px solid;
- position: relative;
- font-size: 90%;
-
- &::after {
- content: '';
- display: block;
- left: 30px;
- position: absolute;
- bottom: -7px;
- border: 6px solid transparent;
- border-top-color: inherit;
- border-bottom-width: 0;
- }
- }
-
- .code {
- font-size: 90%; // Override external styling
- }
-
- :global(.code.block) {
- white-space: pre-wrap;
- }
-
- pre {
- padding: 1em;
- font-size: 90%; // Override external styling
-
- .hljs-tag {
- white-space: normal; // Override external styling for dumb overflow issue.
- }
- }
-
- dl {
- display: block;
- margin-left: @docs-anchor-width;
- margin-right: @docs-module-padding;
- width: 100%;
-
- > .section > .title,
- dd {
- display: table-cell;
-
- p {
- margin-top: 0;
- margin-bottom: 1em;
- margin-left: @docs-module-padding;
- }
- blockquote > :first-child {
- margin-bottom: 0;
- }
- }
-
- .title {
- text-align: right;
- }
- dt {
- color: @docs-color-enactcyan;
- white-space: nowrap;
-
- var {
- font-weight: normal;
- }
- }
- dd {
- li {
- margin-bottom: 0.5em;
- font-size: 90%;
-
- // For some reason, tags are generated inside list items.
- // They need to be re-margined to not take up a crazy amount of space.
- > p {
- margin: 0;
-
- + p {
- margin-top: 1em;
- }
- }
- }
-
- &:empty {
- display: none;
- }
- }
- }
-
- section.function,
- section.property > * {
- border-top: 1px solid fade(black, 5%);
- padding-top: 0.5em;
- padding-bottom: 1em;
- }
- section.function:first-child,
- section.property:first-child > * {
- border-top-width: 0;
- }
-
- section.function,
- section.exportedFunction {
- @sub-table-indent: @docs-module-padding * 3;
-
- display: block;
-
- h6 {
- margin: 0 0 0 @sub-table-indent;
- font-style: italic;
- color: white;
- background-color: @docs-color-accent1;
- display: inline-block;
- padding: 0 1em;
- line-height: 130%;
- vertical-align: bottom;
- border-top-left-radius: 6px;
- border-top-right-radius: 6px;
- }
- dt {
- display: block;
- }
- dd {
-
- &.details {
- display: flex;
- margin-left: (@docs-module-padding * 2);
- margin-right: (@docs-module-padding * 2);
-
- .params,
- .returns {
- flex: 1 1 50%;
- margin-bottom: 1em;
-
- h6 {
- margin-left: 0;
- }
- dl {
- display: block;
- margin: 0;
- padding: @docs-module-padding;
-
- // Enumerated prop objects
- dl {
- padding: 0;
- border-left: 3px solid @docs-color-accent1;
-
- dt {
- padding-left: 12px;
- border-top: 1px dotted;
-
- &:first-child {
- border-top-style: none;
- }
- }
- dd {
- p {
- margin-bottom: 0.5em;
- }
- }
- }
- }
- dt {
- color: @docs-color-accent1;
- }
- }
- .params dl {
- background-color: fade(@docs-color-accent1, 10%);
- }
- .returns {
- // a {
- // color: inherit;
- // }
- h6 {
- background-color: @docs-color-accent2;
- }
- dl {
- border-top-color: @docs-color-accent2;
- background-color: fade(@docs-color-accent2, 10%);
-
- dl {
- border-left-color: @docs-color-accent2;
- }
- }
- }
- > * {
- margin-left: (@docs-module-padding * 2);
-
- &:first-child {
- margin-left: 0;
- }
- dl:last-child {
- border-bottom-left-radius: 6px;
- border-bottom-right-radius: 6px;
- }
- }
- }
- }
- dl {
- margin: 0 0 1em @sub-table-indent;
- border-top: 1px solid @docs-color-accent1;
- }
-
- .returnType {
- &::before {
- content: '\2192'; // → - right arrow
- // content: '\21D2'; // → - double right arrow
- display: inline;
- margin: 0 1ex;
- }
- }
- }
-
- section.exportedFunction {
- // Function signature code block
- .signature {
- display: block;
- margin: @docs-site-edge-keepout 0;
-
- var {
- font-style: italic;
- }
- }
-
- dd.details {
- margin: 0;
- }
- }
-
- section.property {
- display: table-row;
-
- .details {
- padding-left: 4ex;
- padding-bottom: 0.2em;
- }
- }
-
- .properties {
- section.property {
- .details {
- display: flex;
-
- .default {
- margin-right: auto;
- }
- .types {
- margin-left: 2ex;
- }
- }
-
- .title {
- .types {
- a {
- color: inherit;
- }
- }
- }
- }
- }
-
- .required {
- color: red;
- position: relative;
- font-style: normal;
-
- &::before {
- content: '';
- display: block;
- position: absolute;
- top: -15px;
- right: -12px;
- bottom: -15px;
- left: 0;
- }
-
- &::after {
- background-color: red;
- border-color: darken(red, 10%);
- font-style: italic;
- color: white;
- }
- }
-
- // This selector is so goofy because .deprecated is applied to a "display:table", so the cells' contents need to be set, rather than the rows or cells themselves.
- .deprecated > * > * {
- opacity: 0.5;
- }
-
- .deprecatedIcon {
- font-style: normal;
- }
-
- .deprecatedIcon,
- .deprecationNote {
- color: red;
- }
-
- .default {
- display: block;
- white-space: nowrap;
-
- .title {
- color: lighten(black, 70%);
- font-variant: small-caps;
- font-size: 80%;
- vertical-align: top;
- }
-
- .multiline {
- display: none;
- z-index: 1;
- text-align: left;
- font-family: monospace;
- font-size: 80%;
- font-style: normal;
- overflow-x: auto;
- background-color: #F0F0F4;
- padding: 1em;
- border-radius: 6px;
- box-shadow: 0 6px 10px 2px rgba(0, 0, 0, 0.2);
- max-width: 90ex;
- cursor: text;
- // border: 3px solid white;
- }
-
- .multilineSeeMore {
- span {
- font-size: 90%;
- border: 1px dashed;
- padding: 0 2ex;
- border-radius: 999px;
- cursor: pointer;
- }
-
- &:hover .multiline,
- &:focus .multiline {
- display: block;
- position: absolute;
- }
- }
- }
- }
-
- .demo1-ball {
- border-radius: 99px;
- background-color: white;
- width: 50px;
- height: 50px;
- border: 3px solid white;
- position: absolute;
- background-size: 50px;
- }
-}
diff --git a/src/css/mixins.less b/src/css/mixins.less
deleted file mode 100644
index 6d1cc9a7..00000000
--- a/src/css/mixins.less
+++ /dev/null
@@ -1,27 +0,0 @@
-// Mixins
-//
-
-.angle-left(@height, @angle: 10deg, @color: inherit) {
- @angle-width: round(@height / tan((90deg - @angle) * pi() / 180deg));
-
- margin-right: @height;
- border-bottom: @height solid;
- border-bottom-color: @color;
- border-left: @angle-width solid transparent;
-}
-.angle-right(@height, @angle: 10deg, @color: inherit) {
- @angle-width: round(@height / tan((90deg - @angle) * pi() / 180deg));
-
- margin-left: @height;
- border-bottom: @height solid;
- border-bottom-color: @color;
- border-right: @angle-width solid transparent;
-}
-.angle-top-right(@height, @angle: 10deg, @color: inherit) {
- @angle-width: round(@height / tan((90deg - @angle) * pi() / 180deg));
-
- margin-left: @height;
- border-top: @height solid;
- border-top-color: @color;
- border-right: @angle-width solid transparent;
-}
diff --git a/src/css/variables.css b/src/css/variables.css
new file mode 100644
index 00000000..6ec2285e
--- /dev/null
+++ b/src/css/variables.css
@@ -0,0 +1,17 @@
+/*Variables*/
+
+:root {
+ --docs-site-max-width: 960px;
+ --docs-site-edge-keepout: 24px;
+ --docs-module-padding: 12px;
+ --docs-anchor-width: 20px;
+
+ --docs-header-logo-image-size: 100px;
+ --docs-header-item-spacing: 10px;
+
+ --docs-mobile-breakpoint: 546px;
+
+ --live-preview-min-height: 216px;
+ --section-max-width: 960px;
+}
+
diff --git a/src/css/variables.less b/src/css/variables.less
deleted file mode 100644
index d431d011..00000000
--- a/src/css/variables.less
+++ /dev/null
@@ -1,12 +0,0 @@
-// Variables
-//
-
-@docs-site-max-width: 960px;
-@docs-site-edge-keepout: 24px;
-@docs-module-padding: 12px;
-@docs-anchor-width: 20px;
-
-@docs-header-logo-image-size: 100px;
-@docs-header-item-spacing: 10px;
-
-@docs-mobile-breakpoint: 546px;
diff --git a/src/html.js b/src/html.js
deleted file mode 100644
index 149fe263..00000000
--- a/src/html.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default function HTML (props) {
- return (
-
-
-
-
- {props.postBodyComponents}
-
-
- );
-}
-
-HTML.propTypes = {
- body: PropTypes.string,
- bodyAttributes: PropTypes.object,
- headComponents: PropTypes.array,
- htmlAttributes: PropTypes.object,
- postBodyComponents: PropTypes.array,
- preBodyComponents: PropTypes.array
-};
diff --git a/src/pages/images/boom.svg b/src/images/boom.svg
similarity index 100%
rename from src/pages/images/boom.svg
rename to src/images/boom.svg
diff --git a/src/pages/docs/images/devtools.svg b/src/images/devtools.svg
similarity index 100%
rename from src/pages/docs/images/devtools.svg
rename to src/images/devtools.svg
diff --git a/src/pages/images/enact-home-auto.svg b/src/images/enact-home-auto.svg
similarity index 100%
rename from src/pages/images/enact-home-auto.svg
rename to src/images/enact-home-auto.svg
diff --git a/src/pages/images/enact-home-custom.svg b/src/images/enact-home-custom.svg
similarity index 100%
rename from src/pages/images/enact-home-custom.svg
rename to src/images/enact-home-custom.svg
diff --git a/src/pages/images/enact-home-easy.svg b/src/images/enact-home-easy.svg
similarity index 100%
rename from src/pages/images/enact-home-easy.svg
rename to src/images/enact-home-easy.svg
diff --git a/src/pages/images/enact-home-hero.svg b/src/images/enact-home-hero.svg
similarity index 100%
rename from src/pages/images/enact-home-hero.svg
rename to src/images/enact-home-hero.svg
diff --git a/src/pages/images/enact-home-perf.svg b/src/images/enact-home-perf.svg
similarity index 100%
rename from src/pages/images/enact-home-perf.svg
rename to src/images/enact-home-perf.svg
diff --git a/src/pages/docs/images/getting-started.svg b/src/images/getting-started.svg
similarity index 100%
rename from src/pages/docs/images/getting-started.svg
rename to src/images/getting-started.svg
diff --git a/src/pages/docs/images/guide.svg b/src/images/guide.svg
similarity index 100%
rename from src/pages/docs/images/guide.svg
rename to src/images/guide.svg
diff --git a/src/pages/docs/images/modules.svg b/src/images/modules.svg
similarity index 100%
rename from src/pages/docs/images/modules.svg
rename to src/images/modules.svg
diff --git a/src/pages/docs/images/package-core.svg b/src/images/package-core.svg
similarity index 100%
rename from src/pages/docs/images/package-core.svg
rename to src/images/package-core.svg
diff --git a/src/pages/docs/images/package-i18n.svg b/src/images/package-i18n.svg
similarity index 100%
rename from src/pages/docs/images/package-i18n.svg
rename to src/images/package-i18n.svg
diff --git a/src/pages/docs/images/package-moonstone.svg b/src/images/package-moonstone.svg
similarity index 100%
rename from src/pages/docs/images/package-moonstone.svg
rename to src/images/package-moonstone.svg
diff --git a/src/pages/docs/images/package-spotlight.svg b/src/images/package-spotlight.svg
similarity index 100%
rename from src/pages/docs/images/package-spotlight.svg
rename to src/images/package-spotlight.svg
diff --git a/src/pages/docs/images/package-ui.svg b/src/images/package-ui.svg
similarity index 100%
rename from src/pages/docs/images/package-ui.svg
rename to src/images/package-ui.svg
diff --git a/src/pages/docs/images/package-webos.svg b/src/images/package-webos.svg
similarity index 100%
rename from src/pages/docs/images/package-webos.svg
rename to src/images/package-webos.svg
diff --git a/src/pages/images/stars-small.svg b/src/images/stars-small.svg
similarity index 100%
rename from src/pages/images/stars-small.svg
rename to src/images/stars-small.svg
diff --git a/src/pages/docs/images/tutorials.svg b/src/images/tutorials.svg
similarity index 100%
rename from src/pages/docs/images/tutorials.svg
rename to src/images/tutorials.svg
diff --git a/src/pages/images/ufo.svg b/src/images/ufo.svg
similarity index 100%
rename from src/pages/images/ufo.svg
rename to src/images/ufo.svg
diff --git a/src/pages/404.js b/src/pages/404.js
deleted file mode 100644
index 00135901..00000000
--- a/src/pages/404.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import kind from '@enact/core/kind';
-
-import SiteTitle from '../components/SiteTitle';
-
-// images
-import boom from './images/boom.svg';
-
-export const frontmatter = {
- title: 'Whoopsie Doodle'
-};
-
-// TODO: Figure out how to prefix link to src image below!!!!
-const FourOhFourBase = kind({
- name: '404',
- render (props) {
- return (
-
-
-
There shall, in that time, be rumours of things going astray, and there shall be a great confusion as to where things really are, and nobody will really know where lieth those little things possessed by their developers that their developers put there only just the night before, about eight o’clock.
-
(BTW, 404, Page not found)
-
- );
- }
-});
-
-export default FourOhFourBase;
diff --git a/src/pages/about/index.js b/src/pages/about/index.js
deleted file mode 100644
index a16fba89..00000000
--- a/src/pages/about/index.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import {Helmet} from 'react-helmet';
-import kind from '@enact/core/kind';
-import PropTypes from 'prop-types';
-import {Row, Cell} from '@enact/ui/Layout';
-
-import Page from '../../components/Page';
-import SiteSection from '../../components/SiteSection';
-import SiteTitle from '../../components/SiteTitle';
-
-export const frontmatter = {
- title: 'About Us',
- description: 'Enact Framework contributors'
-};
-
-const contributors = {
- community: [
- 'Eric Blade',
- 'Nazir DOĞAN',
- 'Kaloyan Kolev'
- ],
- LG: [
- 'Jeonghee Ahn',
- 'Seungcheon Baek',
- 'Juwon Jeong',
- 'Hyeok Jo',
- 'Jae Jo',
- 'Baekwoo Jung',
- 'Bongsub Kim',
- 'Hyelyn Kim',
- 'Jiye Kim',
- 'Mikyung Kim',
- 'Chang Gi Lee',
- 'Goun Lee',
- 'Seonghyup Park',
- 'Seungho Park',
- 'Sijeong Ro',
- 'YunBum Sung',
- 'Dongsu Won'
- ],
- LGSI: [
- 'Cholan Madala',
- 'Richa Shaurbh',
- 'Srirama Singeri',
- 'Anish T.D',
- 'Antony Willet'
- ],
- LGSVL: [
- 'Renuka Atale',
- 'Stephen Choi',
- 'Dave Freeman',
- 'Lis Hammel',
- 'Jeff Lam',
- 'Teck Liew',
- 'Gray Norton',
- 'Jason Robitaille',
- 'Lucie Roy',
- 'HanGyeol Hailey Ryu',
- 'Blake Stephens',
- 'Alicia Stice',
- 'Roy Sutton',
- 'Aaron Tam',
- 'Jeremy Thomas',
- 'Derek Tor'
- ]
-};
-
-const Team = kind({
- name: 'Team',
- propTypes: {
- members: PropTypes.array
- },
- render: ({members}) => (
-
- {members.map((member, index) =>
- | {member} |
- )}
-
- )
-});
-
-const AboutUs = kind({
- name: 'AboutUs',
- propTypes: {
- location: PropTypes.object
- },
- render: ({location}) => {
- const {community, LG, LGSI, LGSVL} = contributors;
- return (
-
-
-
-
-
-
- {frontmatter.title}
- Enact is a labor of love conceived by the team that brought you Enyo. We are grateful to LG Electronics for supporting the development of this open source framework.
-
-
-
- Contributors
- LG Silicon Valley Lab - U.S.A.
- LG - South Korea
- LG Software India - India
- Community Members - Worldwide
- Maybe you too‽
-
-
-
- );
- }
-});
-
-export default AboutUs;
diff --git a/src/pages/docs/developer-guide/index.js b/src/pages/docs/developer-guide/index.js
deleted file mode 100644
index a886ad00..00000000
--- a/src/pages/docs/developer-guide/index.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import {Helmet} from 'react-helmet';
-import {graphql} from 'gatsby';
-import {StaticImage as Image} from "gatsby-plugin-image";
-import PropTypes from 'prop-types';
-import {Component} from 'react';
-import {Row} from '@enact/ui/Layout';
-
-import CellLink from '../../../components/CellLink';
-import Page from '../../../components/DocsPage';
-import SiteTitle from '../../../components/SiteTitle';
-import SiteSection from '../../../components/SiteSection';
-
-import css from '../../../css/main.module.less';
-
-export const frontmatter = {
- title: 'Developer Guide',
- description: 'Enact Framework Developer Guide'
-};
-
-const Doc = class ReduxDocList extends Component {
- static propTypes = {
- data: PropTypes.object.isRequired,
- location: PropTypes.object.isRequired
- };
-
- render () {
- const componentDocs = this.props.data.guidesList.edges;
-
- return (
-
-
-
-
-
-
-
Details and resources on how to use Enact.
-
- {componentDocs.map((page) => {
- const slug = page.node.fields.slug;
- const title = page.node.frontmatter.title ||
- slug.replace('/docs/developer-guide/', '').replace('_', ' ');
- return (
- {title}
- );
- })}
-
-
-
-
- );
- }
-};
-
-export const devGuideQuery = graphql`
- query devGuideQuery {
- guidesList: allMarkdownRemark(
- filter:{
- fields:{
- slug: {regex: "/docs\\/developer-guide\\/[^/]*/$/"}
- }
- },
- sort: [{frontmatter: {order: ASC}}, {frontmatter: {title: ASC}}]
- ) {
- ...pageFields
- }
- }
-`;
-
-export default Doc;
diff --git a/src/pages/docs/developer-tools/index.js b/src/pages/docs/developer-tools/index.js
deleted file mode 100644
index 9a945bed..00000000
--- a/src/pages/docs/developer-tools/index.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import {Helmet} from 'react-helmet';
-import {graphql} from 'gatsby';
-import {StaticImage as Image} from 'gatsby-plugin-image';
-import PropTypes from 'prop-types';
-import {Component} from 'react';
-import {Row} from '@enact/ui/Layout';
-
-import CellLink from '../../../components/CellLink';
-import Page from '../../../components/DocsPage';
-import SiteTitle from '../../../components/SiteTitle';
-import SiteSection from '../../../components/SiteSection';
-
-import css from '../../../css/main.module.less';
-
-export const frontmatter = {
- title: 'Developer Tools',
- description: 'Developer tools and related packages'
-};
-
-const Doc = class ReduxDocList extends Component {
- static propTypes = {
- data: PropTypes.object.isRequired,
- location: PropTypes.object.isRequired
- };
-
- render () {
- const componentDocs = this.props.data.toolsList.edges;
-
- return (
-
-
-
-
-
-
-
Enact tools that make life easier.
-
- {componentDocs.map((page) => {
- const slug = page.node.fields.slug;
- const title = page.node.frontmatter.title ||
- slug.replace('/docs/developer-tools/', '').replace('_', ' ');
- return (
- {title}
- );
- })}
-
-
-
-
- );
- }
-};
-
-export const devToolsQuery = graphql`
- query devToolsQuery {
- toolsList: allMarkdownRemark(
- filter:{
- fields:{
- slug: {regex: "/docs\\/developer-tools\\/[^/]*/$/"}
- }
- },
- sort: [{frontmatter: {order: ASC}}, {frontmatter: {title: ASC}}]
- ) {
- ...pageFields
- }
- }
-`;
-
-export default Doc;
diff --git a/src/pages/docs/index.js b/src/pages/docs/index.js
deleted file mode 100644
index 7673e619..00000000
--- a/src/pages/docs/index.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import {Helmet} from 'react-helmet';
-import {graphql} from 'gatsby';
-import {StaticImage as Image} from 'gatsby-plugin-image';
-import PropTypes from 'prop-types';
-import kind from '@enact/core/kind';
-import {Layout, Row} from "@enact/ui/Layout";
-
-import CellLink from '../../components/CellLink';
-import Page from '../../components/Page';
-import SiteSection from '../../components/SiteSection';
-import SiteTitle from '../../components/SiteTitle';
-
-import css from './index.module.less';
-
-export const frontmatter = {
- title: 'Getting Started',
- description: 'Enact Developer Guide Table of Contents'
-};
-
-const IndexBase = kind({
- name: 'GettingStarted',
-
- propTypes: {
- data: PropTypes.object,
- location: PropTypes.object
- },
-
- styles: {
- css,
- className: 'gettingStarted covertLinks'
- },
-
- computed: {
- guidesList: ({data}) => data.guidesList.edges,
- modulesList: ({data}) => {
- const modulesList = data.modulesList.edges;
- const libraries = [];
- let lastLibrary;
- modulesList.map((edge) => {
- const linkText = edge.node.fields.slug.replace('/docs/modules/', '').replace(/\/$/, '');
- const library = linkText.split('/')[0];
- if (library && library !== lastLibrary) {
- // console.log('library:', library, lastLibrary);
- lastLibrary = library;
- libraries.push({title: library, path: edge.node.fields.slug});
- }
- });
- return libraries;
- },
- toolsList: ({data}) => data.toolsList.edges,
- tutorialsList: ({data}) => data.tutorialsList.edges
- },
-
- render: ({className, guidesList, location, modulesList, toolsList, tutorialsList, ...rest}) => {
- return (
-
-
-
-
-
-
-
-
Developer Documentation
-
Documentation for Enact falls into several categories: Tutorials, Libraries (API) Documentation, Developer Guides and Tools.
-
-
-
-
-
-
-
-
-
- {tutorialsList.map((edge, index) =>
- {edge.node.frontmatter.title}
- )}
-
-
-
-
-
-
-
-
-
- {modulesList.map((page, index) =>
- {page.title}
- )}
-
-
-
-
-
-
-
-
-
- {guidesList.map((edge, index) =>
- {edge.node.frontmatter.title}
- )}
-
-
-
-
-
-
-
-
-
- {toolsList.map((edge, index) =>
- {edge.node.frontmatter.title}
- )}
-
-
-
-
-
- );
- }
-});
-
-export const pageQuery = graphql`
- query mardownQuery {
- guidesList: allMarkdownRemark(
- filter:{
- fields:{
- slug: {regex: "/docs\\/developer-guide\\/[^/]*/$/"}
- }
- },
- sort: [{frontmatter: {order: ASC}}, {frontmatter: {title: ASC}}]
- ) {
- ...pageFields
- }
- modulesList: allJsonDoc(sort: {fields: {slug: ASC}}) {
- edges {
- node {
- fields {
- slug
- }
- }
- }
- }
- toolsList: allMarkdownRemark(
- filter:{
- fields:{
- slug: {regex: "/docs\\/developer-tools\\/[^/]*/$/"}
- }
- },
- sort: [{frontmatter: {order: ASC}}, {frontmatter: {title: ASC}}]
- ) {
- ...pageFields
- }
- tutorialsList: allMarkdownRemark(
- filter:{
- fields:{
- slug: {regex: "/docs\\/tutorials\\/[^/]*/$/"}
- }
- },
- sort: [{frontmatter: {order: ASC}}, {frontmatter: {title: ASC}}]
- ) {
- ...pageFields
- }
- }
-
- fragment pageFields on MarkdownRemarkConnection {
- edges {
- node {
- fields{
- slug
- }
- frontmatter {
- title
- }
- }
- }
- }
-`;
-
-export default IndexBase;
diff --git a/src/pages/docs/index.module.less b/src/pages/docs/index.module.less
deleted file mode 100644
index 9b5bcebc..00000000
--- a/src/pages/docs/index.module.less
+++ /dev/null
@@ -1,102 +0,0 @@
-// index.module.less
-//
-
-@import "../../css/colors.less";
-@import "../../css/variables.less";
-
-@keyframes wiggle {
- 0%, 5% {
- transform: rotate(0deg);
- }
- 1%, 3% {
- transform: rotate(5deg);
-
- }
- 2%, 4% {
- transform: rotate(-5deg);
- }
-}
-
-.gettingStarted {
- font-size: 1.1em;
-
- .hero {
- display: flex;
- justify-content: space-evenly;
- align-items: center;
- margin: 0 0 5em 0;
- padding: 3em 4em;
-
- h1 {
- hyphens: auto;
- margin-top: 0;
- margin-bottom: 0;
- }
-
- p {
- margin: 0;
- }
-
- .image {
- img {
- flex: 0 1 25%;
- margin-bottom: 0;
- }
- }
-
- .content {
- flex: 1 1 70%;
- margin-left: 5%;
- }
- }
-
- .linkBox {
- margin: 3em 0;
-
- .imageContainer {
- flex: 1 3;
- margin-right: 2em;
- text-align: center;
-
- .image {
- margin: 0 0 0.5em 0;
- }
-
- img {
- width: 72px;
- will-change: transform;
- animation: 6s none infinite ease-in;
- transform-origin: center bottom;
- }
- }
-
- .contentCell {
- flex: 3 1;
- }
-
- &:hover .image img {
- animation-name: wiggle;
- }
- }
-
- .content {
- justify-content: space-between;
- }
-}
-
-@media only screen and (max-width: @docs-mobile-breakpoint) {
- .gettingStarted {
- .hero {
- padding-left: 1em;
- padding-right: 1em;
- flex-direction: column;
-
- .image {
- margin-bottom: 1em;
- }
- .content {
- padding-left: 0;
- }
- }
- }
-}
diff --git a/src/pages/docs/modules/index.js b/src/pages/docs/modules/index.js
deleted file mode 100644
index e1fbc277..00000000
--- a/src/pages/docs/modules/index.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import {graphql, withPrefix} from 'gatsby';
-import {StaticImage as Image} from 'gatsby-plugin-image';
-import PropTypes from 'prop-types';
-import {Component} from 'react';
-import {Helmet} from 'react-helmet';
-
-import {Row} from '@enact/ui/Layout';
-import GridItem from '../../../components/GridItem';
-import Page from '../../../components/DocsPage';
-import SiteSection from '../../../components/SiteSection';
-import SiteTitle from '../../../components/SiteTitle';
-
-import libraryDescriptions from '../../../data/libraryDescription.json';
-
-import css from '../../../css/main.module.less';
-import componentCss from './index.module.less';
-
-export const frontmatter = {
- title: 'API Libraries',
- description: 'Enact API Documentation'
-};
-
-const Doc = class ReduxDocList extends Component {
- static propTypes = {
- data: PropTypes.object.isRequired
- };
-
- render () {
- const {data} = this.props;
- // TODO: pre-filter
- const componentDocs = data.modulesList.edges.filter((page) =>
- page.node.fields.slug.includes('/docs/modules/'));
- let lastLibrary;
- let imagesFromProps = [];
- for (let i = 0; i < data.image.edges.length; i++) {
- imagesFromProps.push(data.image.edges[i].node.publicURL);
- }
- const coreLogoIndex = imagesFromProps.findIndex(index => index.includes('core'));
- const i18nLogoIndex = imagesFromProps.findIndex(index => index.includes('i18n'));
- const moonstoneLogoIndex = imagesFromProps.findIndex(index => index.includes('moonstone'));
- const spotlightLogoIndex = imagesFromProps.findIndex(index => index.includes('spotlight'));
- const uiLogoIndex = imagesFromProps.findIndex(index => index.includes('ui'));
- const webosLogoIndex = imagesFromProps.findIndex(index => index.includes('webos'));
-
- const packageImages = {
- core: imagesFromProps[coreLogoIndex],
- i18n: imagesFromProps[i18nLogoIndex],
- moonstone: imagesFromProps[moonstoneLogoIndex],
- spotlight: imagesFromProps[spotlightLogoIndex],
- ui: imagesFromProps[uiLogoIndex],
- webos: imagesFromProps[webosLogoIndex]
- };
-
- return (
-
-
-
-
-
-
-
Select a library to explore the Enact API
-
- {componentDocs.map((section, index) => {
- const linkText = section.node.fields.slug.replace('/docs/modules/', '').replace(/\/$/, '');
- const library = linkText.split('/')[0];
- if (library && libraryDescriptions[library] && library !== lastLibrary) {
- lastLibrary = library;
- const image = libraryDescriptions[library].icon ?
- withPrefix(libraryDescriptions[library].icon) :
- packageImages[library];
- return (
-
- {library} Library
-
- );
- }
- })}
-
-
-
-
- );
- }
-};
-
-export const jsonQuery = graphql`
- query modulesDoc {
- modulesList: allJsonDoc(
- sort: {fields: {slug: ASC}}
- ) {
- edges {
- node {
- fields {
- slug
- }
- }
- }
- }
- image: allFile(
- filter: {extension: {in: "svg"}, relativeDirectory: {eq: "docs/images"}, name: {regex: "/package/"}, publicURL: {}}
- ) {
- edges {
- node {
- publicURL
- }
- }
- }
- }
-`;
-
-export default Doc;
diff --git a/src/pages/docs/modules/index.module.less b/src/pages/docs/modules/index.module.less
deleted file mode 100644
index 6b88e028..00000000
--- a/src/pages/docs/modules/index.module.less
+++ /dev/null
@@ -1,10 +0,0 @@
-// index.module.less
-//
-
-.gridItem {
- .image {
- height: 100px;
- display: block;
- text-align: center;
- }
-}
diff --git a/src/pages/docs/tutorials/index.js b/src/pages/docs/tutorials/index.js
deleted file mode 100644
index 7fb76bff..00000000
--- a/src/pages/docs/tutorials/index.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import {Column} from '@enact/ui/Layout';
-import {graphql} from 'gatsby';
-import {StaticImage as Image} from 'gatsby-plugin-image';
-import PropTypes from 'prop-types';
-import {Component} from 'react';
-import {Helmet} from 'react-helmet';
-
-import CellLink from '../../../components/CellLink';
-import Page from '../../../components/DocsPage';
-import SiteSection from '../../../components/SiteSection';
-import SiteTitle from '../../../components/SiteTitle';
-
-import css from '../../../css/main.module.less';
-
-export const frontmatter = {
- title: 'Tutorials',
- description: 'Learn Enact by following these Tutorials'
-};
-
-const Doc = class ReduxDocList extends Component {
- static propTypes = {
- data: PropTypes.object.isRequired,
- location: PropTypes.object.isRequired
- };
-
- render () {
- const componentDocs = this.props.data.tutorialsList.edges;
- return (
-
-
-
-
-
-
-
- Here you can learn the basics of Enact. Enact is a JavaScript
- framework built around the React UI library. You may have heard some things about
- React and how difficult it can be to learn. Don’t panic. Part of the point of the Enact
- framework is to reduce the complexity by simplifying, and making easier, many of the rough bits
- of React and its steep learning curve involve. Basically, we did the hard part,
- made many evaluations and wrote solutions, so you don’t have to.
-
-
-
- As you follow along, we’ll slowly introduce the new concepts that you will
- need to learn to master Enact. These new concepts include some React-specific
- knowledge, new JavaScript features you can take advantage of, and an
- introduction to the tools Enact provides.
-
-
-
- Try these step-by-step hands-on tutorials and sample projects to help you
- learn how to use the Enact framework:
-
-
- {componentDocs.map((page) => {
- const slug = page.node.fields.slug;
- const title = page.node.frontmatter.title ||
- slug.replace('/docs/tutorials/', '').replace('_', ' ');
- return (
- {title}
- );
- })}
-
-
-
-
- );
- }
-};
-
-export const tutorialsQuery = graphql`
- query tutorialsQuery {
- tutorialsList: allMarkdownRemark(
- filter:{
- fields:{
- slug: {regex: "/docs\\/tutorials\\/[^/]*\/$/"}
- }
- },
- sort: [{frontmatter: {order: ASC}}, {frontmatter: {title: ASC}}]
- ) {
- ...pageFields
- }
- }
-`;
-
-export default Doc;
diff --git a/src/pages/docs/tutorials/tutorial-kitten-browser/index.md b/src/pages/docs/tutorials/tutorial-kitten-browser/index.md
deleted file mode 100644
index dfe419bd..00000000
--- a/src/pages/docs/tutorials/tutorial-kitten-browser/index.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: Kitten Browser
-github: https://github.com/enactjs/docs/blob/develop/src/pages/docs/tutorials/tutorial-kitten-browser/index.md
-order: 4
----
-## Introduction
-Before you begin this tutorial, make sure you have created a new Enact project. See [Enact Development Setup](../setup/) for more information. You can delete `src/views/MainPanel.js` as it will not be used in the tutorial example.
-
-Kitten Browser is a tutorial that demonstrates many of the features of the Enact framework and React that will be useful to you. This is more in-depth than [Hello, Enact!](../tutorial-hello-enact/).
-
-### Sections
-
-1. [App Setup](./app-setup/)
-2. [Reusable Components](./reusable-components/)
-3. [Repeaters and Lists](./lists/)
-4. [Organizing your App with Panels](./panels/)
-5. [State and Data Management](./data-and-state/)
diff --git a/src/pages/docs/tutorials/tutorial-typescript/index.md b/src/pages/docs/tutorials/tutorial-typescript/index.md
deleted file mode 100644
index 9f7a2473..00000000
--- a/src/pages/docs/tutorials/tutorial-typescript/index.md
+++ /dev/null
@@ -1,16 +0,0 @@
----
-title: TypeScript with Enact
-github: https://github.com/enactjs/docs/blob/develop/src/pages/docs/tutorials/tutorial-typescript/index.md
-order: 5
----
-
-## Introduction
-
-This tutorial demonstrates how to use Enact with TypeScript. In this tutorial, we will create a reusable counter component. We're going to break down the app into four parts. They are:
-
-1. [App Setup](app-setup/)
-2. [TypeScript Overview](typescript-overview/)
-3. [Adding a New Component](adding-a-new-component/)
-4. [Updating the Component Using TypeScript with Enact](component-with-ts-enact/)
-
-**Next: [App Setup](app-setup/)**
diff --git a/src/pages/index.js b/src/pages/index.js
deleted file mode 100644
index 1ff246d8..00000000
--- a/src/pages/index.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import kind from '@enact/core/kind';
-import {Link} from 'gatsby';
-import {StaticImage as Image} from 'gatsby-plugin-image';
-import PropTypes from 'prop-types';
-import {Row, Cell} from '@enact/ui/Layout';
-
-import Page from '../components/Page';
-import SiteSection from '../components/SiteSection';
-import SiteTitle from '../components/SiteTitle';
-
-import css from './index.module.less';
-
-// images
-import starsSmall from './images/stars-small.svg';
-
-const IndexBase = kind({
- name: 'Home',
- propTypes: {
- body: PropTypes.string,
- location: PropTypes.object
- },
- styles: {
- css,
- className: 'home'
- },
- render ({className, location}) {
- return (
-
-
-
-
-
-
-
-
An app development framework built atop React that’s easy to use, performant and customizable.
-
-
-
-
-
-
-
- |
-
- Easy to Use
- Enact builds atop the excellent React library, and provides a full framework to the developer. The recent boom of web technologies and related tools has led to a plethora of options available. In fact, getting started might be the most difficult part of building a modern web application.
- |
-
-
-
-
- |
-
- Performant
- Beyond initial setup, Enact continues to provide benefits. It was built with performance in mind, and conscious decisions were made to ensure that applications remain performant as they grow in size and complexity. This ranges from the way components are rendered to how data flows through application.
- |
-
-
-
-
- |
-
- Customizable
- Enact has a full set of customizable widgets that can be tuned and tweaked to the particular style of each project. Using our experience in building full UI libraries for a broad swath of devices ranging from TVs to watches, we have created a widget library whose components can easily be composed to create complex views and applications.
- |
-
-
-
-
- |
-
- Adaptable
- Enact was designed to produce native quality applications for a wide variety embedded web platforms. Read about
- |
-
-
-
-
-
- The goal of Enact is to provide the building blocks for creating robust and maintainable applications. To that end, we’ve pulled together the best solutions for internationalization (i18n), accessibility (a11y), focus management, linting, testing and building. Then, we created a set of reusable components and behaviors on top of that. We combined these pieces and ensured that they work together seamlessly, allowing developers to focus on implementation.
-
-
-
-
-
-
- Installation
- To make things simple, Enact provides a simple command-line tool to initialize projects and perform common actions. Installing it is as easy as:
- npm install -g @enact/cli
-
-
- |
-
-
- Meet Sandstone
- Sandstone is our TV-centric UI library. With over 50 components to choose from, Sandstone provides a solid base for creating applications designed for large screens.
-
-
- |
-
-
- Contributing
- The Enact team welcomes contributions from anyone motivated to help out.
-
-
- |
-
-
-
-
- );
- }
-});
-
-IndexBase.data = {
- title: 'Enact Framework'
-};
-
-export default IndexBase;
diff --git a/src/pages/index.module.less b/src/pages/index.module.less
deleted file mode 100644
index 7e2d2f2f..00000000
--- a/src/pages/index.module.less
+++ /dev/null
@@ -1,165 +0,0 @@
-// index.module.less
-//
-
-@import "../css/colors.less";
-@import "../css/variables.less";
-
-@keyframes ufoFloat {
- 0% {
- transform: translateX(0);
- }
- 100% {
- transform: translateX(150px);
- }
-}
-@keyframes ufoWobble {
- 0% {
- transform: rotateZ(5deg);
- }
- 33% {
- transform: rotateZ(-10deg);
- }
- 66% {
- transform: rotateZ(10deg);
- }
- 100% {
- transform: rotateZ(-15deg);
- }
-}
-
-.ufoTrack {
- position: relative;
- animation: ufoFloat 8s ease-in-out infinite alternate;
- will-change: transform;
-}
-.ufo {
- position: relative;
- width: 50px;
- animation: ufoWobble 3s ease-in-out infinite alternate;
- will-change: transform;
- margin: 0;
-}
-
-.home {
- img {
- margin: 0;
- }
-
- .hero {
- clear: both;
- overflow: hidden;
- margin: 0 0 5em 0;
- padding: 5em 0;
-
- .image {
- margin-top: 2em;
- }
-
- .intro {
- background-repeat: no-repeat;
- background-size: 40px;
- background-position: 80% 0;
-
- p {
- font-size: 200%;
- font-style: italic;
- font-weight: 100;
- }
-
- .buttons {
- text-align: center;
- }
- }
- }
-
- .button,
- a.button:link,
- a.button:hover,
- a.button:active,
- a.button:visited {
- color: @docs-home-button-text-color; // Button color
- border: 2px solid @docs-home-button-text-color; // Button color
- text-decoration: none;
- }
-
- a.button:hover,
- a.button:active,
- a.button:focus {
- background-color: @docs-home-button-text-color;
- color: white;
- }
-
- .button {
- display: inline-block;
- background-color: transparent;
- border-radius: 0.4em;
- line-height: 2.5em;
- margin: 0 0.5ex 0.5em;
- width: 21ex;
- text-align: center;
- }
-
- .reason {
- .image {
- margin: 0 3em;
- width: 12em;
- }
-
- .description {
- margin: 1em 0;
- }
- }
-
- .message {
- margin: 2em 0;
- padding: 3em 5em;
- }
-
- .cell {
- min-width: 200px;
- max-width: 100% !important;
- margin: 0 1em 1em;
- }
-}
-
-@media only screen and (min-width: 600px) {
- .home {
- .hero {
- .image,
- .intro {
- display: inline-block;
- width: 50%;
- vertical-align: middle;
- }
-
- .image {
- margin-top: 0;
- }
-
- .intro {
- padding-left: 3.5em;
-
- .buttons {
- text-align: left;
-
- .button {
- margin-right: 3em;
- margin-left: 0;
-
- &:last-child {
- margin-right: 0;
- }
- }
- }
- }
- }
- .reason {
- flex-wrap: nowrap;
- }
- .reason:nth-child(even) {
- .image {
- order: 2;
- }
- }
- }
-}
diff --git a/src/templates/json.js b/src/templates/json.js
deleted file mode 100644
index 35d8aecd..00000000
--- a/src/templates/json.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import {graphql} from 'gatsby';
-import PropTypes from 'prop-types';
-import {Component} from 'react';
-
-import EditContent from '../components/EditContent';
-import ModulesList from '../components/ModulesList';
-import Page from '../components/Page';
-import {renderModuleDescription, renderModuleMembers} from '../utils/modules';
-import SiteTitle from '../components/SiteTitle';
-import TypesKey from '../components/TypesKey';
-
-export default class JSONWrapper extends Component {
-
- static propTypes = {
- data: PropTypes.object,
- location: PropTypes.object
- };
-
- constructor (props) {
- super(props);
- this.state = {
- renderDoc: null,
- responseRenderModuleDescription: null,
- responseRenderModuleMembers: null
- };
- }
-
- async componentDidMount () {
- const doc = JSON.parse(this.props.data.jsonDoc.internal.content);
- this.setState({
- renderDoc: doc[0],
- responseRenderModuleDescription: await renderModuleDescription(doc),
- responseRenderModuleMembers: await renderModuleMembers(doc[0].members)
- });
- }
-
- render () {
- const {renderDoc, responseRenderModuleDescription, responseRenderModuleMembers} = this.state;
- const path = this.props.location.pathname.replace(/.*\/docs\/modules\//, '').replace(/\/$/, '');
- const pathParts = path.replace(/([A-Z])/g, ' $1').split(' '); // Find all uppercase letters and allow a linebreak to happen before each one.
- // The
-
-
-
-
-
- {renderDoc}
-
-
{pathParts.map((part, idx) => [
- {responseRenderModuleDescription}
- {responseRenderModuleMembers}
-
-
-
-
- );
- }
-}
-
-export const jsonQuery = graphql`
- query jsonBySlug($slug: String!) {
- jsonDoc(fields: { slug: { eq: $slug } }) {
- fields {
- slug
- }
- internal {
- content
- }
- }
- modulesList: allJsonDoc(sort: {fields: {slug: ASC}}) {
- edges {
- node {
- fields {
- slug
- }
- }
- }
- }
- # for Page
- site {
- siteMetadata {
- title
- }
- }
- # For NavBar (in Page)
- docsPages: allSitePage(
- filter:{
- path:{regex: "/\/docs\/[^/]*\/$/"}
- }
- ) {
- edges {
- node {
- path
- pageContext
- }
- }
- }
- # For NavBar
- jsMetadata: allJavascriptFrontmatter (
- filter:{
- fields:{
- slug: {regex: "/docs\\/[^/]*\\/$/"}
- }
- }
- ) {
- edges{
- node{
- fields {
- slug
- }
- fileAbsolutePath
- frontmatter {
- description
- title
- }
- }
- }
- }
- }
-`;
diff --git a/src/templates/markdown.js b/src/templates/markdown.js
deleted file mode 100644
index 907e266b..00000000
--- a/src/templates/markdown.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/* eslint-disable react/no-danger */
-import {graphql} from 'gatsby';
-
-import PropTypes from 'prop-types';
-import {Component} from 'react';
-
-import EditContent from '../components/EditContent';
-import {linkIsParentOf} from '../utils/paths';
-import Page from '../components/Page';
-import SiteSection from '../components/SiteSection';
-import SiteTitle from '../components/SiteTitle';
-import TOCList from '../components/TOCList';
-
-import css from '../css/main.module.less';
-
-class MarkdownPage extends Component {
- static propTypes = {
- data: PropTypes.object.isRequired,
- location: PropTypes.object.isRequired
- };
-
- render () {
- const post = this.props.data.markdownRemark;
- const isDocsPage = linkIsParentOf('/docs/', this.props.location.pathname);
- const description = post.frontmatter.description || `Enact documentation: ${post.frontmatter.title}`;
-
- const markdown =
-
-
-
- {post.frontmatter.github}
-
-
{post.frontmatter.title}
-
-
;
-
- if (isDocsPage) {
- return (
-
-
-
- {markdown}
-
- );
- } else {
- return (
-
-
- {markdown}
-
-
- );
- }
- }
-}
-
-export default MarkdownPage;
-
-export const pageQuery = graphql`
- query markdownQuery($slug: String!, $parentRegex: String) {
- markdownRemark(fields: {slug: {eq: $slug } }) {
- html
- frontmatter {
- title
- github
- }
- }
- allMarkdownRemark(
- filter: {
- fields: {
- slug: {regex: $parentRegex}
- }
- },
- sort: [{frontmatter: {order: ASC}}, {frontmatter: {title: ASC}}]
- ) {
- edges {
- node {
- fields {
- slug
- }
- frontmatter {
- title
- }
- }
- }
- }
- # For Page
- site {
- siteMetadata {
- title
- }
- }
- # For NavBar (in Page)
- docsPages: allSitePage(
- filter:{
- path:{regex: "/\/docs\/[^/]*\/$/"}
- }
- ) {
- edges {
- node {
- path
- pageContext
- }
- }
- }
- # For NavBar
- jsMetadata: allJavascriptFrontmatter (
- filter:{
- fields:{
- slug: {regex: "/docs\\/[^/]*\\/$/"}
- }
- }
- ) {
- edges{
- node{
- fields {
- slug
- }
- fileAbsolutePath
- frontmatter {
- description
- title
- }
- }
- }
- }
- }
-`;
diff --git a/src/utils/colors.js b/src/utils/colors.js
deleted file mode 100644
index f05dd2f9..00000000
--- a/src/utils/colors.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import colorPairsPicker from 'color-pairs-picker';
-import chroma from 'chroma-js';
-
-import {config} from 'config';
-
-export const colors = colorPairsPicker(config.baseColor, {
- contrast: 5.5
-});
-
-const darker = chroma(config.baseColor).darken(10).hex();
-export const activeColors = colorPairsPicker(darker, {
- contrast: 7
-});
diff --git a/src/utils/common.js b/src/utils/common.js
deleted file mode 100644
index c37e1311..00000000
--- a/src/utils/common.js
+++ /dev/null
@@ -1,48 +0,0 @@
-// Common utilities shared among different renderers. Used as part of /wrappers/json.js
-
-import jsonata from 'jsonata'; // http://docs.jsonata.org/
-
-import css from '../css/main.module.less';
-
-export const processDefaultTag = async (tags) => {
- // Find any tag field whose `title` is 'default' (won't be there if no default)
- const expression = "$[title='default'].description";
- const result = await jsonata(expression).evaluate(tags);
- return result || 'undefined';
-};
-
-export const renderDefaultTag = (defaultStr) => {
- if (!defaultStr || defaultStr === 'undefined') {
- return {indentStr}{line}
;
- });
- defaultStr = Show default value {defaultStr}
Default: {defaultStr}
-
Object keys for {param.name}
-
- {await Promise.all(param.properties.map(async (prop) => {
- // Make the keyName just "key" not "prop.key"
- const keyName = prop.name.replace(param.name + '.', '');
- return [
- {keyName} {await renderTypeStrings(prop)} ,
- {prop.description}
- ];
- }))}
-
-
- {params.length ?
-
{responseParamCountString}
- {params.map((param, subIndex) => (
-
- {param.name} {paramType[param.name]}
- {paramIsOptional(param) ? optional : null}
- {param.default ? default: {param.default} : null}
-
- {param.description}
-
- {responseRenderProperties[param.name]}
-
- ))}
-
-
Returns
-
- {methodReturnValue}
- {func.returns[0].description}
-
-
- );
-};
-
-export const renderExportedFunction = async (func) => {
- const params = func.params || [];
- const paramStr = await buildParamList(params);
- const name = func.name;
- const hasReturns = !!func.returns.length;
-
- return (
-
-
-
- {name}( {paramStr} ){hasReturns ? {await renderTypeStrings(func.returns, '|')} : null}
-
-
- {func.description}
- {renderSeeTags(func)}
-
- );
-};
-
-const renderFunction = async (func, index, funcName) => {
- const params = func.params || [];
- const paramStr = await buildParamList(params);
- const parent = func.memberof ? func.memberof.match(/[^.]*\.(.*)/) : null;
- const name = funcName ? funcName : func.name;
- const id = (parent ? parent[1] + '.' : '') + name;
- const hasReturns = !!func.returns.length;
-
- return (
-
- {name}({paramStr} ){hasReturns ? {await renderTypeStrings(func.returns, '|')} : null}
- {func.description}
- {renderSeeTags(func)}
-
- );
-};
-
-export const renderConstructor = async (member) => {
- if (!member.constructorComment) {
- return;
- }
-
- return (
-
- Constructor
-
- {await renderFunction(member.constructorComment, 1, member.name)}
-
-
- );
-};
-
-export default renderFunction;
diff --git a/src/utils/modules.js b/src/utils/modules.js
deleted file mode 100644
index a239b478..00000000
--- a/src/utils/modules.js
+++ /dev/null
@@ -1,298 +0,0 @@
-// Utilities for working with functions. Primary use is in rendering functions
-// as part of /wrappers/json.js
-//
-import jsonata from 'jsonata'; // http://docs.jsonata.org/
-import kind from '@enact/core/kind';
-import PropTypes from 'prop-types';
-
-import DocParse from '../components/DocParse.js';
-import EnactLive from '../components/EnactLiveEdit.js';
-import {renderExportedFunction, renderConstructor} from '../utils/functions.js';
-import {
- renderInstanceProperties,
- renderObjectProperties,
- renderStaticProperties
-} from '../utils/properties.js';
-import renderSeeTags from '../utils/see';
-import renderTypedef from '../utils/typedefs';
-import FloatingAnchor from '../components/FloatingAnchor';
-import SmartLink from '../components/SmartLink';
-import Type from '../components/Type';
-import Code from '../components/Code';
-
-import {hasDeprecatedTag} from './common';
-
-import css from '../css/main.module.less';
-
-const H4 = (props) => FloatingAnchor.inline({component: 'h4', ...props});
-
-const hasFactoryTag = async (member) => {
- // Find any tag field whose `title` is 'factory'
- const expression = "$[title='factory']";
- const result = await jsonata(expression).evaluate(member.tags);
- return !!result;
-};
-
-const hasHOCTag = async (member) => {
- // Find any tag field whose `title` is 'hoc'
- const expression = "$[title='hoc']";
- const result = await jsonata(expression).evaluate(member.tags);
- return !!result;
-};
-
-const hasUITag = async (member) => {
- // Find any tag field whose `title` is 'ui'
- const expression = "$[title='ui']";
- const result = await jsonata(expression).evaluate(member.tags);
- return !!result;
-};
-
-const getExampleTags = async (member) => {
- // Find any tag field whose `title` is 'example'
- // Updated style that works in jsonata 1.6.4 and always returns array!
- const expression = "$.[tags[title='example']]";
- return await jsonata(expression).evaluate(member);
-};
-
-const getBaseComponents = async (member) => {
- // Find any tag field whose `title` is 'extends' and extract the name(s)
- const expression = "$.[tags[title='extends'].name]";
- return await jsonata(expression).evaluate(member);
-};
-
-const getHocs = async (member) => {
- // Find any tag field whose `title` is 'mixes' and extract the name(s)
- const expression = "$.[tags[title='mixes'].name]";
- return await jsonata(expression).evaluate(member);
-};
-
-const MemberHeading = kind({
- name: 'MemberHeading',
-
- propTypes: {
- children: PropTypes.string,
- deprecated: PropTypes.bool,
- varType: PropTypes.string
- },
-
- computed: {
- uniqueId: ({children}) => children,
- deprecationIcon: ({deprecated}) => (
- deprecated ? ❌ : null
- ),
- varType: ({varType}) => varType ? {varType} : null
- },
-
- render: ({children, deprecationIcon, uniqueId, varType, ...rest}) => {
- delete rest.deprecated;
- return (
-
- {children}
- {varType}
- {deprecationIcon}
-
- );
- }
-});
-
-const renderExtends = async (member) => {
- const baseComponents = await getBaseComponents(member);
-
- if (baseComponents.length) {
- return (
- baseComponents.map((baseComponent, index) => (
- {member.deprecated} : null;
- // Some HOCs using `compose` will be listed as 'constant' instead of 'class', so we fix that up.
- let memberKind = isHoc ? 'class' : member.kind;
-
- switch (memberKind) {
- case 'function':
- return
- {member.name}
- {deprecationNote}
- {await renderExportedFunction(member)}
- ;
- case 'constant':
- return
- {member.name}
- {deprecationNote}
-
- {member.description}
- {renderSeeTags(member)}
-
- {await renderStaticProperties(member.members, isHoc)}
- {await renderInstanceProperties(member.members, isHoc)}
- {await renderObjectProperties(member.properties)}
- ;
- case 'typedef':
- return
- {member.name}
- {deprecationNote}
- {await renderTypedef(member)}
- ;
- case 'class':
- default:
- return
-
- {member.name}
-
- {deprecationNote}
-
- {member.description}
- {renderSeeTags(member)}
-
- ;
- }
-};
-
-const renderTypedefMembers = async (typedefMembers) => {
- if (typedefMembers.length) {
- return [
- Type Definitions ,
- await Promise.all(typedefMembers.map(await renderModuleMember))
- ];
- }
-};
-
-export const renderModuleMembers = async (members) => {
- // All module members will be static, no need to check instance members
- if (members.static.length) {
- const moduleName = members.static[0].memberof.split('/').pop();
- const sortedMembers = members.static.sort((a, b) => {
- if (a.name === moduleName) {
- return -1;
- } else if (b.name === moduleName) {
- return 1;
- } else {
- return a.name < b.name ? -1 : 1;
- }
- });
- const {typedefMembers, moduleMembers} = sortedMembers.reduce((acc, member) => {
- if (member.kind === 'typedef') {
- acc.typedefMembers.push(member);
- } else {
- acc.moduleMembers.push(member);
- }
- return acc;
- }, {typedefMembers: [], moduleMembers: []});
-
- return (
-
-
Members
- {await Promise.all(moduleMembers.map(renderModuleMember))}
- {await renderTypedefMembers(typedefMembers)}
-
- );
- } else {
- return 'No members.';
- }
-};
-
-// Input: "moonstone/Button" or "moonstone/Button.ButtonBase"
-// Extracts module name and short name
-const moduleRegex = /(\w+\/(\w+))(\.(\w+))?/;
-
-// Creates an import statement block from module or export name
-// If name is not supplied, it will be inferred from module
-const ImportBlock = kind({
- name: 'ImportBlock',
-
- propTypes: {
- // module name, e.g.: 'moonstone/Button'
- module: PropTypes.string.isRequired,
- // Component name, e.g.: 'ButtonBase'. Will be inferred if not supplied.
- name: PropTypes.string
- },
-
- computed: {
- // eslint-disable-next-line no-shadow
- name: ({module, name}) => {
- const res = module.match(moduleRegex) || [];
- let output = name;
- if (!name) {
- output = res[2] || module;
- } else if (res[2] && (name !== res[2])) {
- output = '{' + name + '}';
- }
- return output;
- }
- },
-
- // eslint-disable-next-line no-shadow
- render: ({module, name, ...rest}) => {
- delete rest.children;
- return {`import ${name} from '@enact/${module}';`};
- }
-});
-
-export const renderModuleDescription = async (doc) => {
- if (doc.length) {
- const code = await getExampleTags(doc[0]);
- const isDeprecated = await hasDeprecatedTag(doc[0]);
- const deprecationNote = isDeprecated ? {doc[0].deprecated} : null;
-
- return
- {deprecationNote}
-
- {doc[0].description}
-
- {code.length ? ;
- }
-};
diff --git a/src/utils/paths.js b/src/utils/paths.js
deleted file mode 100644
index 2379b88a..00000000
--- a/src/utils/paths.js
+++ /dev/null
@@ -1,47 +0,0 @@
-// paths.js
-// ---
-// utils for determining a page's path on the site
-//
-
-/* global __PATH_PREFIX__ */
-let pathPrefix = '';
-if (typeof __PATH_PREFIX__ !== 'undefined') {
- pathPrefix = __PATH_PREFIX__;
-}
-
-const sitePrefixMatchRegexp = new RegExp(`^${pathPrefix}`);
-
-// Remove the site prefix, if present.
-const canonicalPath = (link) => {
- return link.replace(sitePrefixMatchRegexp, '');
-};
-
-// The first argument is an exact match for the second argument
-const linkIsLocation = (link, loc) => {
- const fullLink = link.replace(sitePrefixMatchRegexp, '');
- const fullLoc = loc.replace(sitePrefixMatchRegexp, '');
- return (fullLoc === fullLink);
-};
-
-// The first argument supplied is the same as the second argument or is the parent of
-const linkIsBaseOf = (link, loc) => {
- const fullLink = link.replace(sitePrefixMatchRegexp, '');
- const fullLoc = loc.replace(sitePrefixMatchRegexp, '');
- return (fullLoc.search(fullLink) === 0);
-};
-
-// The first argument is explicitly the parent of the second argument
-const linkIsParentOf = (link, loc) => {
- const fullLink = link.replace(sitePrefixMatchRegexp, '');
- const fullLoc = loc.replace(sitePrefixMatchRegexp, '');
- return (fullLoc.search(fullLink) === 0 && (fullLoc !== fullLink));
-};
-
-export {
- canonicalPath,
- linkIsLocation,
- linkIsBaseOf,
- linkIsParentOf,
- // rootPath
- sitePrefixMatchRegexp
-};
diff --git a/src/utils/properties.js b/src/utils/properties.js
deleted file mode 100644
index fb107dde..00000000
--- a/src/utils/properties.js
+++ /dev/null
@@ -1,166 +0,0 @@
-// Utilities for working with properties. Primary use is in rendering properties
-// as part of /wrappers/json.js
-
-import DocParse from '../components/DocParse.js';
-import jsonata from 'jsonata'; // http://docs.jsonata.org/
-
-import FloatingAnchor from '../components/FloatingAnchor';
-import {renderDefaultTag, processDefaultTag, hasRequiredTag, hasDeprecatedTag} from './common';
-import renderFunction from './functions';
-import renderSeeTags from '../utils/see';
-import {renderType, jsonataTypeParser} from './types';
-import {renderTypedefProp} from './typedefs.js';
-
-import css from '../css/main.module.less';
-
-const Dt = (props) => FloatingAnchor.inline({component: 'dt', ...props});
-
-const processTypeTag = async (tags) => {
- // see types.jsonataTypeParser
- const expression = `$[title="type"].type.[(
- ${jsonataTypeParser}
- )]`;
- const result = await jsonata(expression).evaluate(tags);
- return result || [];
-};
-
-const renderPropertyTypeStrings = async (member) => {
- const types = await processTypeTag(member.tags);
- const typeStr = types.map(renderType);
- return typeStr;
-};
-
-export const renderProperty = async (prop, index) => {
- if ((prop.kind === 'function') || (prop.kind === 'class' && prop.name === 'constructor')) {
- return await renderFunction(prop, index);
- } else {
- const parent = prop.memberof ? prop.memberof.match(/[^.]*\.(.*)/) : null;
- const id = (parent ? parent[1] + '.' : '') + prop.name;
- const isDeprecated = await hasDeprecatedTag(prop);
- const isRequired = await hasRequiredTag(prop);
- const requiredIcon = isRequired ? • : null;
- const deprecatedIcon = isDeprecated ? ✘ : null;
-
- let defaultStr = renderDefaultTag(await processDefaultTag(prop.tags));
-
- return (
-
-
-
- {prop.name} {requiredIcon} {deprecatedIcon}
-
-
{await renderPropertyTypeStrings(prop)}
-
- {prop.description}
- {renderSeeTags(prop)}
- {isDeprecated ? {prop.deprecated} : null}
-
- {defaultStr}
-
-
-
- );
- }
-};
-
-const renderHocConfig = async (config) => {
- return (
-
- Configuration
-
- {await Promise.all(config.members.static.map(renderProperty))}
-
-
- );
-};
-
-const propSort = (a, b) => {
- if (a.name < b.name) {
- return -1;
- } else if (a.name > b.name) {
- return 1;
- } else {
- return 0;
- }
-};
-
-export const renderStaticProperties = async (properties, isHoc) => {
- if (!properties.static.length) {
- return;
- }
-
- // create an array with the required static properties
- const isRequiredTag = await Promise.all(properties.static.map(async (prop) => await hasRequiredTag(prop)));
- // get all the required static properties and sort them. After that, sort all the non-required properties and concat them to sorted required properties
- properties.static = properties.static.filter((el, index) => isRequiredTag[index]).sort(propSort).concat(properties.static.filter((el, index) => !isRequiredTag[index]).sort(propSort));
- if (isHoc) {
- return await renderHocConfig(properties.static[0]);
- } else {
- return (
-
- {properties.static.length ? Statics : null}
-
- {await Promise.all(properties.static.map(renderProperty))}
-
-
- );
- }
-};
-
-export const renderInstanceProperties = async (properties, isHoc) => {
- if (!properties.instance.length) {
- return;
- }
-
- // create an array with the required properties
- const hasRequiredTagMethods = await Promise.all(properties.instance.map(async (prop) => await hasRequiredTag(prop) && prop.kind === 'function'));
- // get all the properties that have the required tag and sort them
- let instanceMethods = properties.instance.filter((el, index) => hasRequiredTagMethods[index] && el.kind === 'function').sort(propSort);
- // sort all non-required properties and concat them to sorted required properties
- instanceMethods = instanceMethods.concat(properties.instance.filter((el, index) => !hasRequiredTagMethods[index] && el.kind === 'function').sort(propSort));
-
- // create an array with the required methods
- const hasRequiredTagProps = await Promise.all(properties.instance.map(async (prop) => await hasRequiredTag(prop) && prop.kind !== 'function'));
- // get all the methods that have the required tag and sort them
- let instanceProps = properties.instance.filter((el, index) => hasRequiredTagProps[index] && el.kind !== 'function').sort(propSort);
- // sort all non-required methods and concat them to sorted required methods
- instanceProps = instanceProps.concat(properties.instance.filter((el, index) => !hasRequiredTagProps[index] && el.kind !== 'function').sort(propSort));
-
- return ([
- instanceProps.length ?
-
- Properties{isHoc ? ' added to wrapped component' : ''}
-
- {await Promise.all(instanceProps.map(renderProperty))}
-
- :
- null,
- instanceMethods.length ?
-
- Methods{isHoc ? ' added to wrapped component' : ''}
-
- {await Promise.all(instanceMethods.map(renderProperty))}
-
- :
- null
- ]);
-};
-
-export const renderObjectProperties = async (properties) => {
-
- if (properties && properties.length) {
- // create an array with the required object properties
- const isRequiredTag = await Promise.all(properties.map(async prop => await hasRequiredTag(prop)));
- // get all the required static properties and sort them. After that, sort all the non-required properties and concat them to sorted required properties
- properties = properties.filter((el, index) => isRequiredTag[index]).sort(propSort).concat(properties.filter((el, index) => !isRequiredTag[index]).sort(propSort));
- return
- Properties
-
- {await Promise.all(properties.map(renderTypedefProp))}
-
- ;
- }
-};
-
-export default renderProperty;
diff --git a/src/utils/see.js b/src/utils/see.js
deleted file mode 100644
index 84e8f0fd..00000000
--- a/src/utils/see.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// Utilities for working with 'see' links. Used as part of /wrappers/json.js
-
-import See from '../components/See';
-import DocParse from '../components/DocParse';
-
-export const renderSeeTags = (member) => {
- const sees = member.sees || [];
- return sees.map((tag = {}, idx) => {
- // Convert paragraph tags to inline elements so they fit inside the See component properly.
- if (tag.description && tag.description.children) {
- tag.description.children.map((child) => {
- if (child.type === 'paragraph') {
- child.type = 'inline';
- }
- });
- }
- return (
-
- {tag.description}
-
- );
- });
-};
-
-export default renderSeeTags;
diff --git a/src/utils/typedefs.js b/src/utils/typedefs.js
deleted file mode 100644
index 3c75ed9e..00000000
--- a/src/utils/typedefs.js
+++ /dev/null
@@ -1,90 +0,0 @@
-// Utilities for working with typedefs. Used as part of /utils/modules.js
-
-import DocParse from '../components/DocParse.js';
-import jsonata from 'jsonata'; // http://docs.jsonata.org/
-import {Fragment} from 'react';
-import {renderDefaultTag, processDefaultTag} from '../utils/common';
-import renderFunction from './functions.js';
-import renderSeeTags from './see';
-import {renderType, jsonataTypeParser} from './types';
-
-import css from '../css/main.module.less';
-
-const renderTypedefTypeStrings = async (member) => {
- // see types.jsonataTypeParser
- const expression = `$.type.[(
- ${jsonataTypeParser}
- )]`;
- const result = await jsonata(expression).evaluate(member) || [];
- return result.map(renderType);
-};
-
-// TODO: Should this move to `properties.js`?
-export const renderTypedefProp = async (type, index) => {
- const parent = type.memberof ? type.memberof.match(/[^.]*\.(.*)/) : null;
- const id = (parent ? parent[1] + '.' : '') + type.name;
-
- if ((type.kind === 'function') || (type.kind === 'class' && type.name === 'constructor')) {
- return await renderFunction(type, index);
- } else {
- let isRequired = type.type && type.type.type !== 'OptionalType';
- isRequired = isRequired ? • : null;
-
- let defaultStr = renderDefaultTag(await processDefaultTag(type.tags));
-
- return (
-
-
- {type.name} {isRequired}
-
-
- {await renderTypedefTypeStrings(type)}
- {defaultStr}
-
-
- {type.description}
- {renderSeeTags(type)}
-
-
- );
- }
-};
-
-export const renderTypedef = async (member) => {
- const isFunction = member.type && member.type.name === 'Function';
- const isObject = member.type && member.type.name === 'Object';
-
- if (isFunction) {
- return (
-
- {await renderFunction(member)}
-
- );
- } else if (isObject) {
- return (
-
-
- {member.description}
- {renderSeeTags(member)}
-
-
- {await Promise.all(member.properties.map(renderTypedefProp))}
-
-
- );
- } else {
- return (
-
-
- {member.description}
- {renderSeeTags(member)}
-
-
- {await renderTypedefTypeStrings(member)}
-
-
- );
- }
-};
-
-export default renderTypedef;
diff --git a/src/utils/types.js b/src/utils/types.js
deleted file mode 100644
index 85c533f3..00000000
--- a/src/utils/types.js
+++ /dev/null
@@ -1,43 +0,0 @@
-// Utilities for working with types. Primary use is in rendering types
-// as part of /wrappers/json.js
-
-import Type from '../components/Type';
-
-export const renderType = (type, index) => {
- return {type} ;
-};
-
-// This somewhat complex expression allows us to separate out the UnionType members from the
-// regular ones and combine TypeApplications (i.e. Arrays of type) into a single unit instead
-// of having String[] render as ['String', 'Array']. Then, it looks for 'NullLiteral' or
-// 'AllLiteral' and replaces them with the word 'null' or 'Any'. If any 'StringLiteralType'
-// exist, add them with quotes around the value. A 'RecordType' is replaced with 'Object'.
-// TODO: Add NumberLiteralType?
-// TODO: Make NullableType more useful/interesting?
-// NOTE: This is shared with a few parsers that have slightly different selectors
-export const jsonataTypeParser = `
- $quote := function($val) { "'" & $val & "'" };
- $ProcessTypeApplication := function($elem) { $elem.expression.name & " of " & $GetNameExp($elem.applications)[0]};
- $GetElementsTypes := function($elem) { $GetNameExp($elem.elements) };
- $GetExpressionTypes := function($elem) { $GetNameExp($elem.expression) };
- $GetNameExp := function($type) {
- [
- $type[type="AllLiteral"] ? ['Any'],
- $type[type="ArrayType"] ? ['Array'],
- $type[type="BooleanLiteralType"].value.$string(),
- $type[type="NameExpression"].name,
- $type[type="NullableType"] ? [$GetNameExp($type[type="NullableType"].expression), 'null'],
- $type[type="NullLiteral"] ? ['null'],
- $map($type[type="OptionalType"], $GetExpressionTypes),
- $type[type="RecordType"] ? ['Object'],
- $map($type[type="RestType"], $GetExpressionTypes),
- $map($type[type="StringLiteralType"].value, $quote),
- $map($type[type="TypeApplication"], $ProcessTypeApplication),
- $type[type="UndefinedLiteral"] ? ['undefined'],
- $map($type[type="UnionType"], $GetElementsTypes)
- ]
- };
- $GetNameExp($);
-`;
-
-export default renderType;
diff --git a/src/utils/typography.js b/src/utils/typography.js
deleted file mode 100644
index f03c74ee..00000000
--- a/src/utils/typography.js
+++ /dev/null
@@ -1,181 +0,0 @@
-import Typography from 'typography';
-import CodePlugin from 'typography-plugin-code';
-
-// Gatsby code highlight stylings below borrowed from https://github.com/gatsbyjs/gatsby/blob/561d33e2e491d3971cb2a404eec9705a5a493602/www/src/utils/typography.js
-// Used under the MIT License
-// Copyright (c) 2015 gatsbyjs
-
-const options = {
- // baseFontSize: '1.5em',
- baseLineHeight: 1.5,
- headerFontFamily: [
- 'EnactMuseoSans',
- 'Museo Sans',
- 'Helvetica Neue',
- 'Segoe UI',
- 'Helvetica',
- 'Arial',
- 'sans-serif'
- ],
- bodyFontFamily: [
- 'EnactMuseoSans',
- 'Museo Sans',
- '-apple-system',
- 'BlinkMacSystemFont',
- 'Segoe UI',
- 'Roboto',
- 'Oxygen',
- 'Ubuntu',
- 'Cantarell',
- 'Fira Sans',
- 'Droid Sans',
- 'Helvetica Neue',
- 'sans-serif'
- ],
- headerGray: 40,
- bodyGray: 40,
- bodyWeight: 300,
- headerWeight: 300,
- boldWeight: 500,
- overrideStyles: () => ({
- hr: {
- marginTop: '2em',
- marginBottom: '2em'
- },
- // gatsby-remark-prismjs styles
- '.gatsby-highlight': {
- background: 'rgba(0,0,0,0.04)',
- position: 'relative',
- WebkitOverflowScrolling: 'touch'
- },
- ".gatsby-highlight pre[class*='language-']": {
- backgroundColor: 'transparent',
- border: 0,
- padding: '1.5rem 0',
- WebkitOverflowScrolling: 'touch'
- },
- ".gatsby-highlight pre[class*='language-']::before": {
- background: '#ddd',
- borderRadius: '0 0 2px 2px',
- color: 'black',
- // fontSize: fontSizes[0],
- // fontFamily: fonts.monospace.join(`,`),
- // letterSpacing: letterSpacings.tracked,
- lineHeight: '1',
- padding: '1px 4px',
- position: 'absolute',
- left: '1.5rem',
- textAlign: 'right',
- textTransform: 'uppercase',
- top: '0'
- },
- ".gatsby-highlight pre[class='language-javascript']::before": {
- content: '\'js\'',
- background: '#f7df1e'
- },
- ".gatsby-highlight pre[class='language-js']::before": {
- content: '\'js\'',
- background: '#f7df1e'
- },
- ".gatsby-highlight pre[class='language-jsx']::before": {
- content: '\'jsx\'',
- background: '#61dafb'
- },
- ".gatsby-highlight pre[class='language-graphql']::before": {
- content: '\'GraphQL\'',
- background: '#E10098',
- color: 'white'
- },
- ".gatsby-highlight pre[class='language-html']::before": {
- content: '\'html\'',
- background: '#005A9C',
- color: 'white'
- },
- ".gatsby-highlight pre[class='language-css']::before": {
- content: '\'css\'',
- background: '#ff9800',
- color: 'white'
- },
- ".gatsby-highlight pre[class='language-mdx']::before": {
- content: '\'mdx\'',
- background: '#f9ac00',
- color: 'white',
- fontWeight: '400'
- },
- ".gatsby-highlight pre[class='language-shell']::before": {
- content: '\'shell\''
- },
- ".gatsby-highlight pre[class='language-sh']::before": {
- content: '\'sh\''
- },
- ".gatsby-highlight pre[class='language-bash']::before": {
- content: '\'bash\''
- },
- ".gatsby-highlight pre[class='language-yaml']::before": {
- content: '\'yaml\'',
- background: '#ffa8df'
- },
- ".gatsby-highlight pre[class='language-markdown']::before": {
- content: '\'md\''
- },
- ".gatsby-highlight pre[class='language-json']::before, .gatsby-highlight pre[class='language-json5']::before": {
- content: '\'json\'',
- background: 'linen'
- },
- ".gatsby-highlight pre[class='language-diff']::before": {
- content: '\'diff\'',
- background: '#e6ffed'
- },
- ".gatsby-highlight pre[class='language-text']::before": {
- content: '\'text\'',
- background: 'white'
- },
- ".gatsby-highlight pre[class='language-flow']::before": {
- content: '\'flow\'',
- background: '#E8BD36'
- },
- '.gatsby-highlight pre code': {
- display: 'block',
- fontSize: '100%',
- lineHeight: 1.5,
- float: 'left',
- minWidth: '100%',
- // reset code vertical padding declared earlier
- padding: '0 1.5rem'
- },
- '.gatsby-highlight-code-line': {
- background: '#feb',
- marginLeft: '-1em',
- marginRight: '-1em',
- paddingLeft: '1em',
- paddingRight: '0.75em',
- borderLeft: '0.25em solid #f99',
- display: 'block'
- },
- '.gatsby-highlight pre::-webkit-scrollbar': {
- // width: space[2],
- // height: space[2],
- },
- '.gatsby-highlight pre::-webkit-scrollbar-thumb': {
- // background: colors.code.scrollbarThumb,
- },
- '.gatsby-highlight pre::-webkit-scrollbar-track': {
- // background: colors.code.border,
- }
- }),
- // scale: 1.618,
- plugins: [
- new CodePlugin()
- ]
-};
-
-const typography = new Typography(options);
-
-const {rhythm, scale} = typography;
-
-// Hot reload typography in development.
-if (process.env.NODE_ENV !== 'production') {
- typography.injectStyles();
-}
-
-export {rhythm, scale, typography as default};
diff --git a/src/utils/utils.jsx b/src/utils/utils.jsx
new file mode 100644
index 00000000..0c4198b3
--- /dev/null
+++ b/src/utils/utils.jsx
@@ -0,0 +1,62 @@
+const getModulesPath = (files) => {
+ const sortedFiles = files.sort((a, b) => a.id.localeCompare(b.id));
+
+ return sortedFiles.reduce((acc, {filePath}) => {
+ const parts = filePath.split('/');
+ const folder = parts.at(-2);
+
+ if (!acc[folder] && folder !== 'modules') {
+ const firstFileHref = filePath
+ .replace('src/content/docs/', '')
+ .replace(/\.mdx?$/, '').replace('$', '').toLocaleLowerCase();
+
+ acc[folder] = {
+ name: folder,
+ modulePath: `/${firstFileHref}`
+ };
+ }
+
+ return acc;
+ }, {});
+};
+
+const generateLinks = async ({paths, files}) => {
+ const formatedLinks = await Promise.all(paths.map(async (path) => {
+ const file = await files[path]();
+ const href = path
+ .replace('/src/content/docs', '')
+ .replace(/(index)?\.mdx?$/, '');
+ const title = (await file).frontmatter.title || href;
+ const order = (await file).frontmatter.sidebar?.order
+
+ return {title, href, order};
+ }
+ ));
+
+ const sortedLinks = formatedLinks.sort((a, b) => {
+ if (a.order && b.order) {
+ return a.order - b.order;
+ }
+
+ return a.title.localeCompare(b.title);
+ });
+
+ return sortedLinks.map((link, index) => {link.title} )
+};
+
+const withBase = (path, livePreview = false) => {
+ path = path.toLowerCase();
+ if (process.env.NODE_ENV === 'development' && livePreview) return path
+
+ let normalizedPath = path.startsWith('/') ? path : `/${path}`;
+ normalizedPath = normalizedPath.endsWith('/') ? normalizedPath : `${normalizedPath}/`;
+
+ if (process.env.NODE_ENV === 'development') return normalizedPath;
+
+ const base = import.meta.env.BASE_URL;
+ const normalizedBase = base.endsWith('/') ? base.slice(0, - 1) : base;
+
+ return `${normalizedBase}${livePreview ? path : normalizedPath}`;
+};
+
+export {getModulesPath, generateLinks, withBase};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..6a7fd51a
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,10 @@
+{
+ "extends": "astro/tsconfigs/strict",
+ "include": [
+ ".astro/types.d.ts",
+ "**/*"
+ ],
+ "exclude": [
+ "dist"
+ ]
+}
\ No newline at end of file