diff --git a/config/rocket.config.js b/config/rocket.config.js index 96b9b5a..e04a49b 100644 --- a/config/rocket.config.js +++ b/config/rocket.config.js @@ -1,9 +1,9 @@ import { rocketLaunch } from '@rocket/launch'; +import { rocketSpark } from '@rocket/spark'; // import { rocketBlog } from '@rocket/blog'; // import { rocketSearch } from '@rocket/search'; // import { absoluteBaseUrlNetlify } from '@rocket/core/helpers'; // import { adjustPluginOptions } from 'plugins-manager'; -// import { mdjsSetupCode } from '@mdjs/core'; // TODO: preset needs to be updated to use the new plugin manager // import { codeTabs } from 'rocket-preset-code-tabs'; // import { customElementsManifest } from 'rocket-preset-custom-elements-manifest'; @@ -37,6 +37,7 @@ export default { presets: [ rocketLaunch(), + rocketSpark(), // rocketBlog(), // rocketSearch(), // codeTabs({ @@ -50,16 +51,6 @@ export default { // }), // customElementsManifest(), ], - - // eleventy(eleventyConfig) { - // eleventyConfig.addTransform('fix-noscript', content => - // content - // .replace(/&#x3C;(link|style)/g, '<$1') - // .replace(/&(link|style)/g, '<$1') - // .replace(/<(link|style)/g, '<$1'), - // ); - // }, - // serviceWorkerName: 'sw.js', // pathPrefix: '/_site/', diff --git a/examples/blog/site/src/layouts/LayoutBlogPost.js b/examples/blog/site/src/layouts/LayoutBlogPost.js index f962f5f..d45cf04 100644 --- a/examples/blog/site/src/layouts/LayoutBlogPost.js +++ b/examples/blog/site/src/layouts/LayoutBlogPost.js @@ -5,17 +5,8 @@ import '../components/blog-post.js'; export class LayoutBlogPost { render(data) { - const { - title, - description, - publishDate, - author, - authorHref, - heroImage, - permalink, - alt, - lang, - } = data; + const { title, description, publishDate, author, authorHref, heroImage, permalink, alt, lang } = + data; return html` diff --git a/package.json b/package.json index f8c665e..49b74eb 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "setup": "npm run setup:ts-configs && npm run setup:patches", "setup:patches": "npx patch-package", "setup:ts-configs": "node scripts/generate-ts-configs.mjs", - "start": "NODE_DEBUG=engine:rendering node packages/cli/src/cli.js start --open", + "start": "NODE_DEBUG=engine:rendering node --no-warnings --experimental-loader ./packages/engine/src/litCssLoader.js packages/cli/src/cli.js start --open", "test": "yarn test:node && yarn test:web", "test:integration": "playwright test packages/*/test-node/*.spec.js", "test:node": "yarn test:unit && yarn test:integration", @@ -82,7 +82,7 @@ "node-fetch": "^2.6.7", "npm-run-all": "^4.1.5", "onchange": "^7.1.0", - "prettier": "^2.2.1", + "prettier": "^2.5.1", "prettier-plugin-package": "^1.3.0", "publish-docs": "^0.1.2", "puppeteer": "^9.0.0", @@ -138,6 +138,10 @@ }, "workspaces": [ "packages/*", - "examples/*" - ] + "examples/*", + "presets/*" + ], + "imports": { + "#pageTree": "./site/pages/__shared/pageTree.js" + } } diff --git a/packages/cli/package.json b/packages/cli/package.json index 73917c9..a948850 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -27,7 +27,6 @@ }, "scripts": { "build": "npm run rocket:build", - "dev": "node ./eleventyOnly.js", "rocket:build": "node src/cli.js build -c demo", "rocket:start": "node src/cli.js start -c demo", "start": "npm run rocket:start", diff --git a/packages/cli/src/RocketBuild.js b/packages/cli/src/RocketBuild.js index a652fac..4f87bd3 100755 --- a/packages/cli/src/RocketBuild.js +++ b/packages/cli/src/RocketBuild.js @@ -109,21 +109,4 @@ export class RocketBuild { await writeFile(notFoundHtmlFilePath, notFoundHtml); } } - - // /** - // * @param {RocketCliOptions} config - // */ - // setupCommand(config) { - // config.watch = false; - // config.lintInputDir = config.outputDir; - // return config; - // } - - // async buildCommand() { - // await this.eleventy.write(); - // if (this.config.emptyOutputDir) { - // await fs.emptyDir(this.config.outputDir); - // } - // await productionBuild(this.config); - // } } diff --git a/packages/cli/src/init-files/docs/index.rocket.js b/packages/cli/src/init-files/docs/index.rocket.js index fb81ec4..90ae16d 100644 --- a/packages/cli/src/init-files/docs/index.rocket.js +++ b/packages/cli/src/init-files/docs/index.rocket.js @@ -22,8 +22,7 @@ export const layout = new LayoutHome({ reasons: [ { header: 'Small', - text: - 'No overblown tools or frontend frameworks, add JavaScript and/or Web Components only on pages where needed.', + text: 'No overblown tools or frontend frameworks, add JavaScript and/or Web Components only on pages where needed.', }, { header: 'Pre-Rendered', @@ -45,8 +44,7 @@ export const layout = new LayoutHome({ }, { header: 'Ready for Production', - text: - 'Optimized for a smaller build size, faster dev compilation and dozens of other improvements.', + text: 'Optimized for a smaller build size, faster dev compilation and dozens of other improvements.', }, ], }); diff --git a/packages/cli/test-node/01-config.test.js b/packages/cli/test-node/01-config.test.js index b93c397..ed54af4 100644 --- a/packages/cli/test-node/01-config.test.js +++ b/packages/cli/test-node/01-config.test.js @@ -8,11 +8,11 @@ const { expect } = chai; describe('Config', () => { it('01: no config file', async () => { - const { - build, - readOutput, - readDevOutput, - } = await setupTestCli('fixtures/01-config/01-no-config/', undefined, { buildOptimize: true }); + const { build, readOutput, readDevOutput } = await setupTestCli( + 'fixtures/01-config/01-no-config/', + undefined, + { buildOptimize: true }, + ); await build(); expect(readOutput('index.html')).to.equal( diff --git a/packages/cli/test-node/RocketCli.images.test2.js b/packages/cli/test-node/RocketCli.images.test2.js index aac00be..3d9d2b1 100644 --- a/packages/cli/test-node/RocketCli.images.test2.js +++ b/packages/cli/test-node/RocketCli.images.test2.js @@ -327,10 +327,10 @@ describe('RocketCli images', () => { }); it('will render an img with srcset and sizes if there is only one image format', async () => { - const { - cli, - readOutput, - } = await execute('e2e-fixtures/images/single-format.rocket.config.js', { captureLog: true }); + const { cli, readOutput } = await execute( + 'e2e-fixtures/images/single-format.rocket.config.js', + { captureLog: true }, + ); cleanupCli = cli; const indexHtml = await readOutput('no-title/index.html', { formatHtml: true, diff --git a/packages/cli/test-node/RocketCli.useCases.test2.js b/packages/cli/test-node/RocketCli.useCases.test2.js index bc47333..7a032ae 100644 --- a/packages/cli/test-node/RocketCli.useCases.test2.js +++ b/packages/cli/test-node/RocketCli.useCases.test2.js @@ -20,11 +20,10 @@ describe('RocketCli use cases', () => { }); it('supports dynamic imports', async () => { - const { - cli, - readOutput, - outputExists, - } = await execute('use-cases/dynamic-imports/rocket.config.js', { captureLog: true }); + const { cli, readOutput, outputExists } = await execute( + 'use-cases/dynamic-imports/rocket.config.js', + { captureLog: true }, + ); cleanupCli = cli; expect(outputExists('sub/assets/myData.js'), 'static files did not get copied').to.be.true; diff --git a/packages/components/package.json b/packages/components/package.json new file mode 100644 index 0000000..a677cf7 --- /dev/null +++ b/packages/components/package.json @@ -0,0 +1,60 @@ +{ + "name": "@rocket/components", + "version": "0.1.0-alpha.1", + "publishConfig": { + "access": "public" + }, + "description": "Rocket Components", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/modernweb-dev/rocket.git", + "directory": "packages/components" + }, + "author": "Modern Web (https://modern-web.dev/)", + "homepage": "https://rocket.modern-web.dev/", + "main": "./src/index.js", + "type": "module", + "exports": { + ".": { + "types": "./dist-types/src/index.d.ts", + "default": "./src/index.js" + }, + "./server": { + "types": "./dist-types/src/index.server.d.ts", + "default": "./src/index.server.js" + }, + "./components": { + "types": "./dist-types/src/index.components.d.ts", + "default": "./src/index.components.js" + } + }, + "scripts": { + "test": "mocha --require ../../scripts/testMochaGlobalHooks.js test-node/**/*.test.{js,cjs} test-node/*.test.{js,cjs}", + "test:watch": "onchange 'src/**/*.{js,cjs}' 'test-node/**/*.{js,cjs}' -- npm test", + "types:copy": "copyfiles \"./types/**/*.d.ts\" dist-types/", + "xtest:watch": "mocha test/**/*.test.js --parallel --watch" + }, + "files": [ + "dist-types", + "src" + ], + "keywords": [ + "rocket", + "ssg" + ], + "dependencies": { + "@webcomponents/template-shadowroot": "^0.1.0", + "fontawesome-free": "^1.0.4", + "lit": "^2.0.0" + }, + "devDependencies": {}, + "types": "./dist-types/src/index.d.ts", + "typesVersions": { + "*": { + "*": [ + "./dist-types/src/index.d.ts" + ] + } + } +} diff --git a/packages/components/src/BlockColumns.js b/packages/components/src/BlockColumns.js new file mode 100644 index 0000000..3dc1d23 --- /dev/null +++ b/packages/components/src/BlockColumns.js @@ -0,0 +1,33 @@ +import { html, css } from 'lit'; +import { TheBlock } from './TheBlock.js'; + +export class BlockColumns extends TheBlock { + static styles = [ + ...this.styles, + css` + #content { + display: flex; + gap: var(--space-m, 2rem); + flex-direction: column; + } + ::slotted(*) { + flex: 1; + } + + @media (min-width: 600px) { + #content { + flex-direction: row; + } + } + `, + ]; + + render() { + return html` +
+ + +
+ `; + } +} diff --git a/packages/components/src/CardIcon.js b/packages/components/src/CardIcon.js new file mode 100644 index 0000000..603b626 --- /dev/null +++ b/packages/components/src/CardIcon.js @@ -0,0 +1,56 @@ +import { readFileSync } from 'fs'; +import { LitElement, html, css } from 'lit'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; + +import { createRequire } from 'module'; + +const { resolve } = createRequire(new URL('.', import.meta.url)); + +export class CardIcon extends LitElement { + static properties = { + icon: { type: String }, + variation: { type: String }, + }; + + constructor() { + super(); + this.icon = 'solid/exclamation-triangle'; + } + + static styles = css` + :host { + display: block; + } + + :host { + width: 76px; + height: 76px; + border-radius: 10px; + display: grid; + place-items: center; + + fill: #8763ee; + background-color: #efebfd; + } + + .icon { + width: 40px; + } + + :host([variation='green']) { + background-color: #defaeb; + fill: #00d462; + } + + :host([variation='blue']) { + background-color: #e2ebfd; + fill: #1f68f3; + } + `; + + render() { + const iconString = readFileSync(resolve(`fontawesome-free/svgs/${this.icon}.svg`)).toString(); + + return html`
${unsafeHTML(iconString)}
`; + } +} diff --git a/packages/components/src/FeatureSmall.js b/packages/components/src/FeatureSmall.js new file mode 100644 index 0000000..3cec973 --- /dev/null +++ b/packages/components/src/FeatureSmall.js @@ -0,0 +1,23 @@ +import { LitElement, html, css } from 'lit'; + +export class FeatureSmall extends LitElement { + static styles = css` + :host { + display: block; + text-align: center; + } + + slot[name='icon']::slotted(*) { + margin: 0 auto; + margin-bottom: var(--space-l, 1rem); + } + `; + + render() { + return html` + + + + `; + } +} diff --git a/packages/components/src/InlineNotification.js b/packages/components/src/InlineNotification.js new file mode 100644 index 0000000..6ee3a94 --- /dev/null +++ b/packages/components/src/InlineNotification.js @@ -0,0 +1,84 @@ +import { LitElement, css, html } from 'lit'; + +/** + * @element inline-notification + * @cssprop [--inline-notification-tip-background-color=rgba(221, 221, 221, 0.3)] + * @cssprop [--inline-notification-tip-border-color=#42b983] + * @cssprop [--inline-notification-warning-background-color=rgba(255, 229, 100, 0.2)] + * @cssprop [--inline-notification-warning-border-color=#e7c000] + * @cssprop [--inline-notification-danger-background-color=rgba(192, 0, 0, 0.1)] + * @cssprop [--inline-notification-danger-border-color=#c00] + * @cssprop [--inline-notification-warning-heading-color=#b29400] + * @cssprop [--inline-notification-danger-heading-color=#900] + * @csspart title - the title heading + */ +export class InlineNotification extends LitElement { + static get properties() { + return { + type: { type: String, reflect: true }, + title: { type: String }, + }; + } + + constructor() { + super(); + this.title = ''; + /** @type {'tip'|'warning'|'danger'} */ + this.type = 'tip'; + } + + static get styles() { + return css` + :host { + padding: 0.1rem 1.5rem; + border-left-width: 0.5rem; + border-left-style: solid; + margin: 1rem 0; + display: block; + } + + h3 { + font-weight: 600; + margin-bottom: 7px; + text-transform: uppercase; + } + + :host([type='tip']) { + background-color: var(--inline-notification-tip-background-color, rgba(221, 221, 221, 0.3)); + border-color: var(--inline-notification-tip-border-color, #42b983); + } + + :host([type='warning']) { + background-color: var( + --inline-notification-warning-background-color, + rgba(255, 229, 100, 0.2) + ); + border-color: var(--inline-notification-warning-border-color, #e7c000); + } + + :host([type='danger']) { + background-color: var(--inline-notification-danger-background-color, rgba(192, 0, 0, 0.1)); + border-color: var(--inline-notification-danger-border-color, #c00); + } + + :host([type='warning']) h3 { + color: var(--inline-notification-warning-heading-color, #b29400); + } + + :host([type='danger']) h3 { + color: var(--inline-notification-danger-heading-color, #900); + } + + ::slotted(p) { + line-height: 1.7; + } + `; + } + + render() { + return html` +

${this.title || this.type}

+ + `; + } +} diff --git a/packages/components/src/PermanentNotification.js b/packages/components/src/PermanentNotification.js new file mode 100644 index 0000000..fdc743b --- /dev/null +++ b/packages/components/src/PermanentNotification.js @@ -0,0 +1,68 @@ +import { LitElement, css, html } from 'lit'; + +export class PermanentNotification extends LitElement { + static properties = { + href: { type: String }, + type: { type: String, reflect: true }, + }; + + constructor() { + super(); + this.href = ''; + this.type = 'high'; + } + + static styles = [ + css` + :host { + position: fixed; + left: -95px; + background: #cb181a; + top: 200px; + padding: 5px 10px 3px 10px; + transform: rotate(-90deg); + box-shadow: rgb(0 0 0 / 24%) -5px 5px 8px; + color: #fff; + } + + a { + color: #fff; + text-decoration: none; + } + + a:hover { + color: #000; + } + + :host([type='low']) { + background-color: var(--permanent-notification-low-background-color, #42b983); + } + + :host([type='medium']) { + background-color: var(--permanent-notification-medium-background-color, #b29400); + } + + :host([type='high']) { + background-color: var(--permanent-notification-high-background-color, #900); + } + + :host([type='medium']), + :host([type='medium']) a { + color: var(--permanent-notification-medium-text-color, #fff); + } + + :host([type='high']), + :host([type='high']) a { + color: var(--permanent-notification-high-text-color, #fff); + } + `, + ]; + + render() { + if (this.href) { + return html``; + } else { + return html``; + } + } +} diff --git a/packages/components/src/RotatingText.js b/packages/components/src/RotatingText.js new file mode 100644 index 0000000..62b44b4 --- /dev/null +++ b/packages/components/src/RotatingText.js @@ -0,0 +1,98 @@ +import { LitElement, html, css } from 'lit'; + +export class RotatingText extends LitElement { + static properties = { + items: { type: Array }, + activeIndex: { type: Number, reflect: true, attribute: 'active-index' }, + }; + + constructor() { + super(); + this.activeIndex = 0; + } + + next() { + if (this.activeIndex < this.items.length - 1) { + this.activeIndex++; + } else { + this.activeIndex = 0; + } + } + + connectedCallback() { + super.connectedCallback(); + clearInterval(this.timer); + this.timer = setInterval(() => { + this.next(); + }, 2000); + } + + static styles = [ + css` + @keyframes textAnimIn { + 0% { + transform: translate3d(0, -120%, 0); + } + + 100% { + transform: translate3d(0, 0%, 0); + } + } + + @keyframes textAnimOut { + 0% { + transform: translate3d(0, 0%, 0); + } + + 50% { + transform: translate3d(0, -20%, 0); + } + + 100% { + transform: translate3d(0, 120%, 0); + } + } + + p { + position: absolute; + top: 0; + margin: 0; + transform: translate3d(0, -120%, 0); + } + + .anim-in { + transform: translate3d(0, -120%, 0); + animation: textAnimIn 0.6s 0.3s forwards; + } + + .anim-out { + transform: translate3d(0, 0%, 0); + animation: textAnimOut 0.6s forwards; + } + + :host { + position: block; + position: relative; + overflow: hidden; + display: block; + height: 1.5em; + } + div { + display: flex; + max-width: 960px; + margin: 0 auto; + } + slot { + display: block; + flex: 1; + } + `, + ]; + + render() { + return html`${this.items.map( + (item, index) => + html`

${item}

`, + )}`; + } +} diff --git a/packages/components/src/TestimonialSmall.js b/packages/components/src/TestimonialSmall.js new file mode 100644 index 0000000..48570b7 --- /dev/null +++ b/packages/components/src/TestimonialSmall.js @@ -0,0 +1,50 @@ +import { LitElement, html, css } from 'lit'; + +export class TestimonialSmall extends LitElement { + static properties = { + cite: { type: String }, + }; + + static styles = css` + :host { + display: block; + text-align: center; + } + + slot[name='image']::slotted(*) { + width: 80px; + height: 80px; + border-radius: 50%; + margin: 0 auto; + } + + figure, + blockquote { + margin: 0; + } + + blockquote { + font-style: italic; + color: #565578; + } + + figcaption { + font-weight: 600; + color: #181c3b; + } + `; + + render() { + return html` + +
+
+ +
+
+ +
+
+ `; + } +} diff --git a/packages/components/src/TheBlock.js b/packages/components/src/TheBlock.js new file mode 100644 index 0000000..5a14e8e --- /dev/null +++ b/packages/components/src/TheBlock.js @@ -0,0 +1,37 @@ +import { LitElement, html, css } from 'lit'; + +export class TheBlock extends LitElement { + static styles = [ + css` + :host { + display: block; + padding: var(--space-2xl-3xl, 8em) 0; + } + #wrapper { + max-width: 960px; + margin: 0 auto; + padding: 0 var(--space-2xs, 0.8em); + } + :host([full-width]) { + max-width: 100%; + } + slot { + display: block; + } + slot[name='title'] { + text-align: center; + max-width: 33em; + margin: 0 auto; + } + `, + ]; + + render() { + return html` +
+ + +
+ `; + } +} diff --git a/packages/components/src/index.components.js b/packages/components/src/index.components.js new file mode 100644 index 0000000..1416b86 --- /dev/null +++ b/packages/components/src/index.components.js @@ -0,0 +1,13 @@ +export const rocketComponents = { + // TODO: add back once https://github.com/lit/lit/issues/2633 is fixed + // 'rotating-text': () => + // import('./RotatingText.js').then(m => m.RotatingText), + 'block-columns': () => import('./BlockColumns.js').then(m => m.BlockColumns), + 'testimonial-small': () => import('./TestimonialSmall.js').then(m => m.TestimonialSmall), + 'feature-small': () => import('./FeatureSmall.js').then(m => m.FeatureSmall), + 'the-block': () => import('./TheBlock.js').then(m => m.TheBlock), + 'inline-notification': () => import('./InlineNotification.js').then(m => m.InlineNotification), + 'permanent-notification': () => + import('./PermanentNotification.js').then(m => m.PermanentNotification), + 'card-icon': () => import('./CardIcon.js').then(m => m.CardIcon), +}; diff --git a/packages/components/src/index.js b/packages/components/src/index.js new file mode 100644 index 0000000..4a13811 --- /dev/null +++ b/packages/components/src/index.js @@ -0,0 +1,9 @@ +export { pageDefaults } from './pageDefaults.js'; + +export { RotatingText } from './RotatingText.js'; +export { BlockColumns } from './BlockColumns.js'; +export { TestimonialSmall } from './TestimonialSmall.js'; +export { FeatureSmall } from './FeatureSmall.js'; +export { TheBlock } from './TheBlock.js'; +export { InlineNotification } from './InlineNotification.js'; +export { PermanentNotification } from './PermanentNotification.js'; diff --git a/packages/components/src/index.server.js b/packages/components/src/index.server.js new file mode 100644 index 0000000..0f430d9 --- /dev/null +++ b/packages/components/src/index.server.js @@ -0,0 +1 @@ +export { CardIcon } from './CardIcon.js'; diff --git a/packages/components/src/pageDefaults.js b/packages/components/src/pageDefaults.js new file mode 100644 index 0000000..54e4a7d --- /dev/null +++ b/packages/components/src/pageDefaults.js @@ -0,0 +1,79 @@ +/* eslint-disable @typescript-eslint/ban-ts-comment */ +import { html } from 'lit'; + +export function pageDefaults({ pageTree, titleWrapperFn, description, siteName }) { + return { + ...defaultHead({ pageTree, titleWrapperFn, description, siteName }), + ...defaultPolyfills(), + }; +} + +export function defaultHead({ pageTree, titleWrapperFn, description, siteName }) { + return { + head__10: data => { + const useDescription = data.description ? data.description : description; + const title = titleWrapperFn( + // @ts-ignore + pageTree.getPage(data.sourceRelativeFilePath)?.model?.name, + ); + return html` + + + + ${title} + + + + + + + + + + `; + }, + head__20: html` + + + + + `, + head__30: html` + + + + `, + head__50: html` + + `, + }; +} + +export function defaultPolyfills() { + return { + top__10: () => html` + + `, + bottom__70: () => html` + + `, + }; +} diff --git a/packages/engine/package.json b/packages/engine/package.json index 195f8c9..90c3422 100644 --- a/packages/engine/package.json +++ b/packages/engine/package.json @@ -1,6 +1,6 @@ { "name": "@rocket/engine", - "version": "0.1.0-alpha.18", + "version": "0.1.0-alpha.19", "publishConfig": { "access": "public" }, diff --git a/packages/engine/src/Engine.js b/packages/engine/src/Engine.js index b2ebe98..9833ec9 100644 --- a/packages/engine/src/Engine.js +++ b/packages/engine/src/Engine.js @@ -347,9 +347,8 @@ export class Engine { */ getOutputFilePath(sourceFilePath) { const sourceRelativeFilePath = path.relative(this.docsDir, sourceFilePath); - const outputRelativeFilePath = sourceRelativeFilePathToOutputRelativeFilePath( - sourceRelativeFilePath, - ); + const outputRelativeFilePath = + sourceRelativeFilePathToOutputRelativeFilePath(sourceRelativeFilePath); return path.join(this.outputDir, outputRelativeFilePath); } diff --git a/packages/engine/src/file-header/urlPathConverter.js b/packages/engine/src/file-header/urlPathConverter.js index 3469ca9..bd68645 100644 --- a/packages/engine/src/file-header/urlPathConverter.js +++ b/packages/engine/src/file-header/urlPathConverter.js @@ -85,9 +85,8 @@ export function sourceRelativeFilePathToOutputRelativeFilePath(relPath) { * @returns */ export function sourceRelativeFilePathToUrl(sourceRelativeFilePath) { - const outputRelativeFilePath = sourceRelativeFilePathToOutputRelativeFilePath( - sourceRelativeFilePath, - ); + const outputRelativeFilePath = + sourceRelativeFilePathToOutputRelativeFilePath(sourceRelativeFilePath); return outputRelativeFilePath.endsWith('index.html') ? `/${outputRelativeFilePath.substring(0, outputRelativeFilePath.length - 'index.html'.length)}` diff --git a/packages/engine/src/litCssLoader.js b/packages/engine/src/litCssLoader.js new file mode 100644 index 0000000..697f47f --- /dev/null +++ b/packages/engine/src/litCssLoader.js @@ -0,0 +1,25 @@ +import { readFile } from 'fs/promises'; + +/** + * @param {string} url + * @param {{ format: string, importAssertions: { type?: 'module' | 'json' | 'css' } }} context + * @param {Function} defaultLoad + * @returns {Promise<{ format: string, source: string | ArrayBuffer | SharedArrayBuffer | Uint8Array }>} + */ +export async function load(url, context, defaultLoad) { + const { importAssertions } = context; + if (importAssertions.type === 'css') { + const content = await readFile(new URL(url)).then(res => res.toString()); + return { + format: 'module', + source: [ + // + "import { css } from 'lit';", + 'export default css`', + content, + '`;', + ].join('\n'), + }; + } + return defaultLoad(url, context, defaultLoad); +} diff --git a/packages/engine/src/web-menu/PageTree.js b/packages/engine/src/web-menu/PageTree.js index c0f8087..63e7939 100644 --- a/packages/engine/src/web-menu/PageTree.js +++ b/packages/engine/src/web-menu/PageTree.js @@ -98,9 +98,8 @@ export class PageTree { * @param {string} sourceRelativeFilePath */ async add(sourceRelativeFilePath) { - const outputRelativeFilePath = sourceRelativeFilePathToOutputRelativeFilePath( - sourceRelativeFilePath, - ); + const outputRelativeFilePath = + sourceRelativeFilePathToOutputRelativeFilePath(sourceRelativeFilePath); if (!outputRelativeFilePath.endsWith('index.html')) { return; diff --git a/packages/engine/src/worker/renderWorker.js b/packages/engine/src/worker/renderWorker.js index a7a0b44..79df930 100644 --- a/packages/engine/src/worker/renderWorker.js +++ b/packages/engine/src/worker/renderWorker.js @@ -31,9 +31,8 @@ async function renderFile({ sourceFilePath, outputDir, inputDir, renderMode = 'd let passOnError; const sourceRelativeFilePath = path.relative(inputDir, sourceFilePath); - const outputRelativeFilePath = sourceRelativeFilePathToOutputRelativeFilePath( - sourceRelativeFilePath, - ); + const outputRelativeFilePath = + sourceRelativeFilePathToOutputRelativeFilePath(sourceRelativeFilePath); const outputFilePath = path.join(outputDir, outputRelativeFilePath); let keepConvertedFiles = false; @@ -87,6 +86,17 @@ async function renderFile({ sourceFilePath, outputDir, inputDir, renderMode = 'd if (typeof templateResult === 'string') { fileContent = templateResult; } else { + // Load components server side + if (data.components) { + for (const tagName of Object.keys(data.components)) { + const componentFn = data.components[tagName]; + if (typeof componentFn === 'function') { + const componentClass = await componentFn(); + customElements.define(tagName, componentClass); + } + } + } + fileContent = await litServerRender(templateResult); } diff --git a/packages/engine/test-node/04z-layouts.test.js b/packages/engine/test-node/04z-layouts.test.js index 747dcdb..43a73ab 100644 --- a/packages/engine/test-node/04z-layouts.test.js +++ b/packages/engine/test-node/04z-layouts.test.js @@ -45,7 +45,8 @@ describe('Layouts', () => { return build(); }, { - errorMatch: /File at ".*" is using invalid characters. Use only url safe characters like \[a-z\]\[A-Z\]-_/, + errorMatch: + /File at ".*" is using invalid characters. Use only url safe characters like \[a-z\]\[A-Z\]-_/, }, ); }); diff --git a/packages/engine/test-node/05z-menu.test.js b/packages/engine/test-node/05z-menu.test.js index 5ff137a..5531fff 100644 --- a/packages/engine/test-node/05z-menu.test.js +++ b/packages/engine/test-node/05z-menu.test.js @@ -186,14 +186,8 @@ describe('Engine menus', () => { }); it('05: [md] updates the PageTree when a file changes', async () => { - const { - readSource, - writeSource, - anEngineEvent, - cleanup, - engine, - build, - } = await setupTestEngine('fixtures/05-menu/05-update-on-change/docs'); + const { readSource, writeSource, anEngineEvent, cleanup, engine, build } = + await setupTestEngine('fixtures/05-menu/05-update-on-change/docs'); await writeSource('index.rocket.md', '# First\n'); await build(); // 👆 ensures a valid setup @@ -262,14 +256,8 @@ describe('Engine menus', () => { }); it('07: on file save updates exports to the pageTree', async () => { - const { - readSource, - writeSource, - anEngineEvent, - cleanup, - engine, - build, - } = await setupTestEngine('fixtures/05-menu/07-update-exports/docs'); + const { readSource, writeSource, anEngineEvent, cleanup, engine, build } = + await setupTestEngine('fixtures/05-menu/07-update-exports/docs'); await writeSource( 'index.rocket.js', "export const menuLinkText = 'Guid'; export default () => '

Learning Rocket

';", @@ -330,14 +318,8 @@ describe('Engine menus', () => { }); it('07b: on file save updates exports to the pageTree [md]', async () => { - const { - readSource, - writeSource, - anEngineEvent, - cleanup, - engine, - build, - } = await setupTestEngine('fixtures/05-menu/07b-update-exports-[md]/docs'); + const { readSource, writeSource, anEngineEvent, cleanup, engine, build } = + await setupTestEngine('fixtures/05-menu/07b-update-exports-[md]/docs'); await writeSource( 'index.rocket.md', [ diff --git a/packages/engine/test-node/09-watch.test.js b/packages/engine/test-node/09-watch.test.js index fd6e863..258c0bc 100644 --- a/packages/engine/test-node/09-watch.test.js +++ b/packages/engine/test-node/09-watch.test.js @@ -49,14 +49,8 @@ describe('Engine start', () => { }); it('01: updates rocket header on a *.rocket.js file change', async () => { - const { - writeSource, - cleanup, - readSource, - engine, - anEngineEvent, - setAsOpenedInBrowser, - } = await setupTestEngine('fixtures/09-watch/01-update-header/docs'); + const { writeSource, cleanup, readSource, engine, anEngineEvent, setAsOpenedInBrowser } = + await setupTestEngine('fixtures/09-watch/01-update-header/docs'); await writeSource( 'index.rocket.js', "import { html } from 'lit';\nexport default () => html`index`;", @@ -89,14 +83,8 @@ describe('Engine start', () => { }); it('01b: updates rocket header on a *.rocket.md file change', async () => { - const { - writeSource, - cleanup, - readSource, - engine, - anEngineEvent, - setAsOpenedInBrowser, - } = await setupTestEngine('fixtures/09-watch/01b-update-header-md/docs'); + const { writeSource, cleanup, readSource, engine, anEngineEvent, setAsOpenedInBrowser } = + await setupTestEngine('fixtures/09-watch/01b-update-header-md/docs'); await writeSource('index.rocket.md', 'index'); await new Promise(resolve => setTimeout(resolve, 10)); expect(readSource('index.rocket.md')).to.equal('index'); @@ -122,14 +110,8 @@ describe('Engine start', () => { }); it('02: if started updates the header on a dependency file change', async () => { - const { - writeSource, - cleanup, - readSource, - engine, - anEngineEvent, - setAsOpenedInBrowser, - } = await setupTestEngine('fixtures/09-watch/02-update-header-on-dependency-change/docs'); + const { writeSource, cleanup, readSource, engine, anEngineEvent, setAsOpenedInBrowser } = + await setupTestEngine('fixtures/09-watch/02-update-header-on-dependency-change/docs'); await writeSource( 'index.rocket.js', [ @@ -257,15 +239,8 @@ describe('Engine start', () => { }); it('04: rerenders on a js dependency change', async () => { - const { - build, - readOutput, - writeSource, - anEngineEvent, - cleanup, - engine, - setAsOpenedInBrowser, - } = await setupTestEngine('fixtures/09-watch/04-update-js-dependency/docs'); + const { build, readOutput, writeSource, anEngineEvent, cleanup, engine, setAsOpenedInBrowser } = + await setupTestEngine('fixtures/09-watch/04-update-js-dependency/docs'); await writeSource('name.js', "export const name = 'initial name';"); await build(); @@ -281,15 +256,8 @@ describe('Engine start', () => { }); it('04b: rerenders on a js dependency change [in md]', async () => { - const { - build, - readOutput, - writeSource, - anEngineEvent, - cleanup, - engine, - setAsOpenedInBrowser, - } = await setupTestEngine('fixtures/09-watch/04b-update-js-dependency-md/docs'); + const { build, readOutput, writeSource, anEngineEvent, cleanup, engine, setAsOpenedInBrowser } = + await setupTestEngine('fixtures/09-watch/04b-update-js-dependency-md/docs'); await writeSource('name.js', "export const name = 'initial name';"); await build(); @@ -305,14 +273,8 @@ describe('Engine start', () => { }); it('04c: rerenders on npm dependency update', async () => { - const { - readOutput, - writeSource, - anEngineEvent, - cleanup, - engine, - setAsOpenedInBrowser, - } = await setupTestEngine('fixtures/09-watch/04c-npm-dependency-update/docs'); + const { readOutput, writeSource, anEngineEvent, cleanup, engine, setAsOpenedInBrowser } = + await setupTestEngine('fixtures/09-watch/04c-npm-dependency-update/docs'); await writeSource( '../node_modules/some-dependency/index.js', @@ -337,16 +299,10 @@ describe('Engine start', () => { }); it('rerenders on a js dependency change after an import change in the page', async () => { - const { - readOutput, - writeSource, - anEngineEvent, - cleanup, - engine, - setAsOpenedInBrowser, - } = await setupTestEngine( - 'fixtures/09-watch/05-update-js-dependency-after-page-import-change/docs', - ); + const { readOutput, writeSource, anEngineEvent, cleanup, engine, setAsOpenedInBrowser } = + await setupTestEngine( + 'fixtures/09-watch/05-update-js-dependency-after-page-import-change/docs', + ); await writeSource('name.js', "export const name = 'I am name.js';"); await writeSource('name-initial.js', "export const name = 'I am name-initial.js';"); @@ -399,14 +355,8 @@ describe('Engine start', () => { // TODO: find out why this is ok in isolation but fails if run with all the tests it.skip('directly render newly created pages to get the PageTree Metadata', async () => { - const { - readOutput, - writeSource, - cleanup, - engine, - deleteSource, - anEngineEvent, - } = await setupTestEngine('fixtures/09-watch/06-create-single-page/docs'); + const { readOutput, writeSource, cleanup, engine, deleteSource, anEngineEvent } = + await setupTestEngine('fixtures/09-watch/06-create-single-page/docs'); await deleteSource('name.js'); await deleteSource('about.rocket.js'); diff --git a/packages/engine/test-node/09b-watch-error-handling.test.js b/packages/engine/test-node/09b-watch-error-handling.test.js index f76bef0..7402f59 100644 --- a/packages/engine/test-node/09b-watch-error-handling.test.js +++ b/packages/engine/test-node/09b-watch-error-handling.test.js @@ -5,14 +5,8 @@ const { expect } = chai; describe('Engine start error handling', () => { it('01: name is not defined', async () => { - const { - readOutput, - writeSource, - anEngineEvent, - cleanup, - engine, - setAsOpenedInBrowser, - } = await setupTestEngine('fixtures/09b-watch-error-handling/01-name-is-not-defined/docs'); + const { readOutput, writeSource, anEngineEvent, cleanup, engine, setAsOpenedInBrowser } = + await setupTestEngine('fixtures/09b-watch-error-handling/01-name-is-not-defined/docs'); await writeSource( 'index.rocket.js', "import { html } from 'lit';\nexport default () => html`index`;", diff --git a/packages/engine/test-node/14-components.test.js b/packages/engine/test-node/14-components.test.js new file mode 100644 index 0000000..bd5e44a --- /dev/null +++ b/packages/engine/test-node/14-components.test.js @@ -0,0 +1,23 @@ +import chai from 'chai'; +import { setupTestEngine } from './test-helpers.js'; + +const { expect } = chai; + +describe('Components', () => { + it('01: loads components server side by default', async () => { + const { build, readOutput } = await setupTestEngine( + 'fixtures/14-components/01-load-server-side/docs', + ); + await build(); + + expect(readOutput('index.html')).to.equal( + [ + '

', + ' ', + '

', + ].join('\n'), + ); + }); +}); diff --git a/packages/engine/test-node/fixtures/14-components/01-load-server-side/docs/index.rocket.md b/packages/engine/test-node/fixtures/14-components/01-load-server-side/docs/index.rocket.md new file mode 100644 index 0000000..72b3a68 --- /dev/null +++ b/packages/engine/test-node/fixtures/14-components/01-load-server-side/docs/index.rocket.md @@ -0,0 +1,9 @@ +```js server +/* START - Rocket auto generated - do not touch */ +export const sourceRelativeFilePath = 'index.rocket.md'; +import { components } from './recursive.data.js'; +export { components }; +/* END - Rocket auto generated - do not touch */ +``` + + diff --git a/packages/engine/test-node/fixtures/14-components/01-load-server-side/docs/pageTreeData.rocketGenerated.json b/packages/engine/test-node/fixtures/14-components/01-load-server-side/docs/pageTreeData.rocketGenerated.json new file mode 100644 index 0000000..b36acba --- /dev/null +++ b/packages/engine/test-node/fixtures/14-components/01-load-server-side/docs/pageTreeData.rocketGenerated.json @@ -0,0 +1,8 @@ +{ + "name": "index.rocket.md", + "menuLinkText": "index.rocket.md", + "url": "/", + "outputRelativeFilePath": "index.html", + "sourceRelativeFilePath": "index.rocket.md", + "level": 0 +} \ No newline at end of file diff --git a/packages/engine/test-node/fixtures/14-components/01-load-server-side/docs/recursive.data.js b/packages/engine/test-node/fixtures/14-components/01-load-server-side/docs/recursive.data.js new file mode 100644 index 0000000..9c25760 --- /dev/null +++ b/packages/engine/test-node/fixtures/14-components/01-load-server-side/docs/recursive.data.js @@ -0,0 +1,3 @@ +export const components = { + 'my-el': () => import(new URL('../src/MyEl.js', import.meta.url)).then(m => m.MyEl), +}; diff --git a/packages/engine/test-node/fixtures/14-components/01-load-server-side/src/MyEl.js b/packages/engine/test-node/fixtures/14-components/01-load-server-side/src/MyEl.js new file mode 100644 index 0000000..d2cb42f --- /dev/null +++ b/packages/engine/test-node/fixtures/14-components/01-load-server-side/src/MyEl.js @@ -0,0 +1,7 @@ +import { LitElement, html } from 'lit'; + +export class MyEl extends LitElement { + render() { + return html`

Hello World

`; + } +} diff --git a/packages/launch/src/LayoutSidebar.js b/packages/launch/src/LayoutSidebar.js index 7684020..59e4eeb 100644 --- a/packages/launch/src/LayoutSidebar.js +++ b/packages/launch/src/LayoutSidebar.js @@ -71,8 +71,7 @@ export class LayoutSidebar extends Layout { }, { name: 'Slack', - url: - 'https://join.slack.com/t/lit-and-friends/shared_invite/zt-llwznvsy-LZwT13R66gOgnrg12PUGqw', + url: 'https://join.slack.com/t/lit-and-friends/shared_invite/zt-llwznvsy-LZwT13R66gOgnrg12PUGqw', }, { name: 'Discord', diff --git a/packages/mdjs-core/index.mjs b/packages/mdjs-core/index.mjs index 5883e27..2494c37 100644 --- a/packages/mdjs-core/index.mjs +++ b/packages/mdjs-core/index.mjs @@ -1,12 +1,6 @@ import cjsEntrypoint from './index.js'; -const { - mdjsParse, - mdjsStoryParse, - mdjsDocPage, - mdjsProcess, - isMdjsContent, - mdjsSetupCode, -} = cjsEntrypoint; +const { mdjsParse, mdjsStoryParse, mdjsDocPage, mdjsProcess, isMdjsContent, mdjsSetupCode } = + cjsEntrypoint; export { mdjsParse, mdjsStoryParse, mdjsDocPage, mdjsProcess, isMdjsContent, mdjsSetupCode }; diff --git a/packages/mdjs-core/src/mdjsProcess.js b/packages/mdjs-core/src/mdjsProcess.js index 485d3f2..5c6821b 100644 --- a/packages/mdjs-core/src/mdjsProcess.js +++ b/packages/mdjs-core/src/mdjsProcess.js @@ -57,7 +57,7 @@ async function mdjsProcess(mdjs, { setupUnifiedPlugins = [] } = {}) { if (!prismLoaded) { prismLoaded = true; const rehypePrism = (await import('rehype-prism/lib/src/index.js')).default; - loadLanguages(['md', 'shell', 'yml']); + loadLanguages(['md', 'shell', 'yml', 'diff']); defaultMetaPlugins.splice(6, 0, { plugin: rehypePrism, options: {} }); } diff --git a/packages/mdjs-preview/src/MdJsPreview.js b/packages/mdjs-preview/src/MdJsPreview.js index 5fb2bc5..52ed253 100644 --- a/packages/mdjs-preview/src/MdJsPreview.js +++ b/packages/mdjs-preview/src/MdJsPreview.js @@ -277,9 +277,9 @@ export class MdJsPreview extends ScopedElementsMixin(LitElement) { } get iframeUrl() { - const mdjsSetupScript = /** @type {HTMLScriptElement} */ (document.querySelector( - 'script[type=module][mdjs-setup]', - )); + const mdjsSetupScript = /** @type {HTMLScriptElement} */ ( + document.querySelector('script[type=module][mdjs-setup]') + ); if (!mdjsSetupScript) { throw new Error('Could not find a '); } diff --git a/packages/mdjs-preview/src/resizeHandler.js b/packages/mdjs-preview/src/resizeHandler.js index 3ccdad6..e40475e 100644 --- a/packages/mdjs-preview/src/resizeHandler.js +++ b/packages/mdjs-preview/src/resizeHandler.js @@ -8,9 +8,9 @@ export function addResizeHandler() { window.addEventListener('message', ev => { const data = JSON.parse(ev.data); if (data.action === 'mdjs-viewer-resize') { - const viewer = /** @type {import('./MdJsPreview.js').MdJsPreview} */ (document.body.querySelector( - `[mdjs-story-name="${data.storyKey}"]`, - )); + const viewer = /** @type {import('./MdJsPreview.js').MdJsPreview} */ ( + document.body.querySelector(`[mdjs-story-name="${data.storyKey}"]`) + ); if (viewer) { viewer.contentHeight = data.height; } diff --git a/packages/search/src/RocketSearch.js b/packages/search/src/RocketSearch.js index d49edc8..02a6832 100644 --- a/packages/search/src/RocketSearch.js +++ b/packages/search/src/RocketSearch.js @@ -118,9 +118,9 @@ export class RocketSearch extends ScopedElementsMixin(LitElement) { /** @param {import('lit-element').PropertyValues } changedProperties */ update(changedProperties) { if (this.miniSearch && changedProperties.has('search')) { - this.results = /** @type {RocketSearchResult[]} */ (this.miniSearch.search( - this.search, - )).slice(0, this.maxResults); + this.results = /** @type {RocketSearchResult[]} */ ( + this.miniSearch.search(this.search) + ).slice(0, this.maxResults); } super.update(changedProperties); diff --git a/presets/spark/package.json b/presets/spark/package.json new file mode 100644 index 0000000..a99f5ca --- /dev/null +++ b/presets/spark/package.json @@ -0,0 +1,55 @@ +{ + "name": "@rocket/spark", + "version": "0.1.0-alpha.1", + "publishConfig": { + "access": "public" + }, + "description": "Rocket Spark Preset", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/modernweb-dev/rocket.git", + "directory": "presets/spark" + }, + "author": "Modern Web (https://modern-web.dev/)", + "homepage": "https://rocket.modern-web.dev/", + "main": "./src/index.js", + "type": "module", + "exports": { + ".": { + "types": "./dist-types/src/index.d.ts", + "default": "./src/index.js" + }, + "./components": { + "types": "./dist-types/src/index.components.d.ts", + "default": "./src/index.components.js" + }, + "./css/*": "./src/css/*.css" + }, + "scripts": { + "test": "mocha --require ../../scripts/testMochaGlobalHooks.js test-node/**/*.test.{js,cjs} test-node/*.test.{js,cjs}", + "types:copy": "copyfiles \"./types/**/*.d.ts\" dist-types/" + }, + "files": [ + "dist-types", + "src" + ], + "keywords": [ + "rocket", + "ssg" + ], + "dependencies": { + "@rocket/components": "^0.1.0-alpha.1", + "@rocket/engine": "^0.1.0-alpha.18", + "lit": "^2.0.0" + }, + "devDependencies": {}, + "types": "./dist-types/src/index.d.ts", + "typesVersions": { + "*": { + "*": [ + "./dist-types/src/index.d.ts" + ] + } + } +} diff --git a/presets/spark/src/BlockBlue.js b/presets/spark/src/BlockBlue.js new file mode 100644 index 0000000..bc26b5e --- /dev/null +++ b/presets/spark/src/BlockBlue.js @@ -0,0 +1,15 @@ +import { css } from 'lit'; +import { TheBlock } from '@rocket/components'; + +export class BlockBlue extends TheBlock { + static styles = [ + ...this.styles, + css` + :host { + background-color: #272556; + text-align: center; + --default-headline-color: #fff; + } + `, + ]; +} diff --git a/presets/spark/src/BlockFeatures.js b/presets/spark/src/BlockFeatures.js new file mode 100644 index 0000000..1c26faf --- /dev/null +++ b/presets/spark/src/BlockFeatures.js @@ -0,0 +1,16 @@ +import { css } from 'lit'; +import { BlockColumns } from '@rocket/components'; + +export class BlockFeatures extends BlockColumns { + static styles = [ + ...this.styles, + css` + slot[name='title']::slotted(*) { + margin-bottom: 100px; + } + #content { + gap: var(--space-xl, 3rem); + } + `, + ]; +} diff --git a/presets/spark/src/LayoutHome.js b/presets/spark/src/LayoutHome.js new file mode 100644 index 0000000..0826471 --- /dev/null +++ b/presets/spark/src/LayoutHome.js @@ -0,0 +1,19 @@ +import { Layout } from '@rocket/engine'; +import { pageDefaults } from '@rocket/components'; +import { html } from 'lit'; + +export class LayoutHome extends Layout { + constructor(options) { + super(options); + this.options = { + ...this.options, + ...pageDefaults({ ...options }), + ...options, + head__100: html` + + + + `, + }; + } +} diff --git a/presets/spark/src/css/content.css b/presets/spark/src/css/content.css new file mode 100644 index 0000000..73ba661 --- /dev/null +++ b/presets/spark/src/css/content.css @@ -0,0 +1,96 @@ +@font-face { + font-family: 'Open Sans'; + src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'), + url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations'); + font-weight: 1 999; +} + +body { + margin: 0; + font-size: var(--step--1); + color: #565578; + font-family: 'Open Sans', sans-serif; +} + +html { + --default-headline-color: #272556; +} + +:where(h1, h2, h3, h4, h5) { + font-weight: 600; + color: var(--default-headline-color); +} + +h1 { + font-size: var(--step-5); +} + +h2 { + font-size: var(--step-2); +} + +h3 { + font-size: var(--step-1); +} + +h4 { + font-size: var(--step-0); +} + +h5 { + font-size: var(--step--1); +} + +.bg-grey { + background-color: #f9f8f8; +} + +.bg-blue { + background-color: #272556; + color: #fff; +} + +.bg-blue :is(h1,h2,h3,h4,h5,h6) { + color: #fff; +} + +a.cta { + display: inline-block; + padding: 1.625rem 2.625rem 1.625rem 2.625rem; + border: 1px solid #272556; + border-radius: 30px; + background-color: #272556; + color: #ffffff; + font-weight: 600; + font-size: 0.875rem; + line-height: 0; + text-decoration: none; + transition: all 0.2s; +} +a.cta:hover { + background-color: transparent; + color: #272556; /* needs to stay here because of the color property of a tag */ + text-decoration: none; +} +a.cta-outline { + display: inline-block; + padding: 1.625rem 2.625rem 1.625rem 2.625rem; + border: 1px solid #fff; + border-radius: 30px; + background-color: transparent; + color: #fff; + font-weight: 600; + font-size: 0.875rem; + line-height: 0; + text-decoration: none; + transition: all 0.2s; +} +a.cta-outline:hover { + background-color: #ffffff; + color: #272556; +} + +.highlight { + color: #f25c05; + text-decoration: underline; +} diff --git a/presets/spark/src/css/fluid-space.css b/presets/spark/src/css/fluid-space.css new file mode 100644 index 0000000..bf5d8e0 --- /dev/null +++ b/presets/spark/src/css/fluid-space.css @@ -0,0 +1,26 @@ +/* @link https://utopia.fyi/space/calculator?c=320,21,1.2,1140,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */ + +:root { + --space-3xs: clamp(0.31rem, calc(0.29rem + 0.12vw), 0.38rem); + --space-2xs: clamp(0.69rem, calc(0.66rem + 0.12vw), 0.75rem); + --space-xs: clamp(1.00rem, calc(0.95rem + 0.24vw), 1.13rem); + --space-s: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.50rem); + --space-m: clamp(2.00rem, calc(1.90rem + 0.49vw), 2.25rem); + --space-l: clamp(2.63rem, calc(2.48rem + 0.73vw), 3.00rem); + --space-xl: clamp(3.94rem, calc(3.72rem + 1.10vw), 4.50rem); + --space-2xl: clamp(5.25rem, calc(4.96rem + 1.46vw), 6.00rem); + --space-3xl: clamp(7.88rem, calc(7.44rem + 2.20vw), 9.00rem); + + /* One-up pairs */ + --space-3xs-2xs: clamp(0.31rem, calc(0.14rem + 0.85vw), 0.75rem); + --space-2xs-xs: clamp(0.69rem, calc(0.52rem + 0.85vw), 1.13rem); + --space-xs-s: clamp(1.00rem, calc(0.80rem + 0.98vw), 1.50rem); + --space-s-m: clamp(1.31rem, calc(0.95rem + 1.83vw), 2.25rem); + --space-m-l: clamp(2.00rem, calc(1.61rem + 1.95vw), 3.00rem); + --space-l-xl: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.50rem); + --space-xl-2xl: clamp(3.94rem, calc(3.13rem + 4.02vw), 6.00rem); + --space-2xl-3xl: clamp(5.25rem, calc(3.79rem + 7.32vw), 9.00rem); + + /* Custom pairs */ + --space-s-l: clamp(1.31rem, calc(0.65rem + 3.29vw), 3.00rem); +} diff --git a/presets/spark/src/css/fluid-type-scale.css b/presets/spark/src/css/fluid-type-scale.css new file mode 100644 index 0000000..a6d5771 --- /dev/null +++ b/presets/spark/src/css/fluid-type-scale.css @@ -0,0 +1,12 @@ +/* @link https://utopia.fyi/type/calculator?c=320,21,1.2,1140,24,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */ + +:root { + --step--2: clamp(0.96rem, calc(0.89rem + 0.10vw), 0.91rem); + --step--1: clamp(1.20rem, calc(1.05rem + 0.21vw), 1.09rem); + --step-0: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.50rem); + --step-1: clamp(1.58rem, calc(1.46rem + 0.59vw), 1.88rem); + --step-2: clamp(1.89rem, calc(1.71rem + 0.89vw), 2.34rem); + --step-3: clamp(2.27rem, calc(2.01rem + 1.29vw), 2.93rem); + --step-4: clamp(2.72rem, calc(2.36rem + 1.83vw), 3.66rem); + --step-5: clamp(3.27rem, calc(2.75rem + 2.56vw), 4.58rem); +} diff --git a/presets/spark/src/index.components.js b/presets/spark/src/index.components.js new file mode 100644 index 0000000..3990cbf --- /dev/null +++ b/presets/spark/src/index.components.js @@ -0,0 +1,4 @@ +export const sparkComponents = { + 'block-blue': () => import('./BlockBlue.js').then(m => m.BlockBlue), + 'block-features': () => import('./BlockFeatures.js').then(m => m.BlockFeatures), +}; diff --git a/presets/spark/src/index.js b/presets/spark/src/index.js new file mode 100644 index 0000000..77f5ab7 --- /dev/null +++ b/presets/spark/src/index.js @@ -0,0 +1,2 @@ +export { LayoutHome } from './LayoutHome.js'; +export { rocketSpark } from './rocketSpark.js'; diff --git a/presets/spark/src/public/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf b/presets/spark/src/public/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf new file mode 100644 index 0000000..0fea34b Binary files /dev/null and b/presets/spark/src/public/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf differ diff --git a/presets/spark/src/public/fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2 b/presets/spark/src/public/fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2 new file mode 100644 index 0000000..fdcd887 Binary files /dev/null and b/presets/spark/src/public/fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2 differ diff --git a/presets/spark/src/public/fonts/OpenSans-VariableFont_wdth,wght.ttf b/presets/spark/src/public/fonts/OpenSans-VariableFont_wdth,wght.ttf new file mode 100644 index 0000000..51dd3c3 Binary files /dev/null and b/presets/spark/src/public/fonts/OpenSans-VariableFont_wdth,wght.ttf differ diff --git a/presets/spark/src/public/fonts/OpenSans-VariableFont_wdth,wght.woff2 b/presets/spark/src/public/fonts/OpenSans-VariableFont_wdth,wght.woff2 new file mode 100644 index 0000000..15ee895 Binary files /dev/null and b/presets/spark/src/public/fonts/OpenSans-VariableFont_wdth,wght.woff2 differ diff --git a/presets/spark/src/rocketSpark.js b/presets/spark/src/rocketSpark.js new file mode 100644 index 0000000..334294a --- /dev/null +++ b/presets/spark/src/rocketSpark.js @@ -0,0 +1,11 @@ +import { addPlugin } from 'plugins-manager'; + +class EnginePluginSpark { + static publicFolder = new URL('./public', import.meta.url).pathname; +} + +export function rocketSpark() { + return /** @type {import('@rocket/cli').RocketPreset} */ ({ + setupEnginePlugins: [addPlugin(EnginePluginSpark)], + }); +} diff --git a/site/pages/10--docs/10--setup/10--getting-started.rocket.md b/site/pages/10--docs/10--setup/10--getting-started.rocket.md index 803ee8f..72c1979 100644 --- a/site/pages/10--docs/10--setup/10--getting-started.rocket.md +++ b/site/pages/10--docs/10--setup/10--getting-started.rocket.md @@ -1,8 +1,8 @@ ```js server /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '10--docs/10--setup/10--getting-started.rocket.md'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ ``` diff --git a/site/pages/10--docs/10--setup/20--adding-pages.rocket.md b/site/pages/10--docs/10--setup/20--adding-pages.rocket.md index 8f464e8..186a2c4 100644 --- a/site/pages/10--docs/10--setup/20--adding-pages.rocket.md +++ b/site/pages/10--docs/10--setup/20--adding-pages.rocket.md @@ -1,11 +1,9 @@ ```js server /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '10--docs/10--setup/20--adding-pages.rocket.md'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ - -import '@rocket/launch/inline-notification/define'; ``` # Adding Pages diff --git a/site/pages/10--docs/10--setup/30--use-javascript.rocket.md b/site/pages/10--docs/10--setup/30--use-javascript.rocket.md index bea1c20..5840177 100644 --- a/site/pages/10--docs/10--setup/30--use-javascript.rocket.md +++ b/site/pages/10--docs/10--setup/30--use-javascript.rocket.md @@ -1,8 +1,8 @@ ```js server /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '10--docs/10--setup/30--use-javascript.rocket.md'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ ``` diff --git a/site/pages/10--docs/10--setup/index.rocket.js b/site/pages/10--docs/10--setup/index.rocket.js index 8dbca62..df61688 100644 --- a/site/pages/10--docs/10--setup/index.rocket.js +++ b/site/pages/10--docs/10--setup/index.rocket.js @@ -1,7 +1,7 @@ /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '10--docs/10--setup/index.rocket.js'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ export const menuNoLink = true; diff --git a/site/pages/10--docs/20--basics/10--project-structure.rocket.md b/site/pages/10--docs/20--basics/10--project-structure.rocket.md index c59e8e5..3d64a00 100644 --- a/site/pages/10--docs/20--basics/10--project-structure.rocket.md +++ b/site/pages/10--docs/20--basics/10--project-structure.rocket.md @@ -1,13 +1,11 @@ ```js server /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '10--docs/20--basics/10--project-structure.rocket.md'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ export const description = 'Learn how to structure a project with Rocket.'; - -import '@rocket/launch/inline-notification/define'; ``` # Project Structure diff --git a/site/pages/10--docs/20--basics/20--pages.rocket.md b/site/pages/10--docs/20--basics/20--pages.rocket.md index a6a66ee..96f3ce9 100644 --- a/site/pages/10--docs/20--basics/20--pages.rocket.md +++ b/site/pages/10--docs/20--basics/20--pages.rocket.md @@ -1,8 +1,8 @@ ```js server /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '10--docs/20--basics/20--pages.rocket.md'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ export const description = `An intro to Rocket pages, which is the actual website content.`; diff --git a/site/pages/10--docs/20--basics/30--data-cascade.rocket.md b/site/pages/10--docs/20--basics/30--data-cascade.rocket.md index c7b193b..82e8bf7 100644 --- a/site/pages/10--docs/20--basics/30--data-cascade.rocket.md +++ b/site/pages/10--docs/20--basics/30--data-cascade.rocket.md @@ -1,8 +1,8 @@ ```js server /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '10--docs/20--basics/30--data-cascade.rocket.md'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ ``` diff --git a/site/pages/10--docs/20--basics/40--components.rocket.md b/site/pages/10--docs/20--basics/40--components.rocket.md index 96e6397..202394c 100644 --- a/site/pages/10--docs/20--basics/40--components.rocket.md +++ b/site/pages/10--docs/20--basics/40--components.rocket.md @@ -1,11 +1,9 @@ ```js server /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '10--docs/20--basics/40--components.rocket.md'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ - -import '@rocket/launch/inline-notification/define'; ``` # Components @@ -25,75 +23,102 @@ However any web component code/library should work. A lit component typically looks like this: -👉 `site/src/components/TwoColumns.js` - ```js import { html, css, LitElement } from 'lit'; -class TwoColumns extends LitElement { +class RocketGreeting extends LitElement { + static properties = { + count: { type: Number }, + }; + + constructor() { + super(); + this.count = 1; + } + render() { return html` -
- -
-
- -
+ + ${new Array(this.count).fill('🚀')} `; } - styles = css` + static styles = css` :host { - display: flex; + display: block; } - `: + `; } +customElements.define('rocket-greeting', RocketGreeting); ``` -👉 `site/src/components/two-columns.js` +We can now put this code in Rocket JavaScript, Markdown or Html pages. -```js -import { TwoColumns } from './TwoColumns.js'; - -customElements.define('two-columns', TwoColumns); +````md +```js server +// snippet ``` -With the element being define you can now use it in markdown, html or JavaScript. - -```md # Hello World -
+Go +```` -This is **left** content +will result a server rendered output that does not load ANY JavaScript -
+``` +Hello World -And here comes the **right** content - -
 +Go 🚀 ``` +If we would like to instead load the component and render it client side you can use the following code: + +````md +```js client +// snippet +``` + +# Hello World + +Go +```` + +👆 e.g. we can replace the client/server hint on code blocks to decide where it gets executed. + +If we want to use markdown within the component we can use the following code: + +```md + + +This **is** great! + + +``` + Note the empty lines between html & markdown. They are necessary as this is how the markdown parser separates unprocessed html from markdown. -## Loading Components +## Manually Loading Components -For each component you then need to decide if you want to render server or client side. +We can define as many components as we want within a page but typically it's best to define them in a separate files. -You decide this by where you are executing the element definition. +So we will move our component code into a new file 👉 `/site/src/components/rocket-greeting.js` + +While importing components we decide if we want to server or client render. 👉 `site/pages/index.rocket.js` ```js // server side -import '../src/components/two-columns.js'; +import '../src/components/rocket-greeting.js'; // client side -export default () => html` `; +export default () => + html` `; ``` 👉 `site/pages/index.rocket.html` @@ -101,12 +126,12 @@ export default () => html` ``` @@ -116,30 +141,97 @@ export default () => html` + + ⬆️   Back to Rocket   ⬆️ + + +
+

+ We are + +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim, neque ut vanic barem + ultrices sollicitudin +

+ Sign up for free +
+ +
+ alternative +
+ + + +

+ Arcu felis bibendum ut tristique entra les vitoria livanore +

+ + + +

Lorem Ipsum

+

+ Et blandit nisl libero at arcu. Donec ac lectus sed tellus mollis viverra. Nullam pharetra + ante at nunc elementum +

+ + + + +

Vivera Adipis

+

+ Et blandit nisl libero at arcu. Donec ac lectus sed tellus mollis viverra. Nullam pharetra + ante at nunc elementum +

+ + + + +

Atine Tellus

+

+ Ety suscipit metus sollicitudin euqu isq imperdiet nibh nec magna tincidunt, nec pala + vehicula neque sodales verum +

+ + + + +
+

Turpis in eu mi bibendum neque egestas congue ortor consequat

+

+ Vestibulum ullamcorper augue ex imperdiet tincidunt tellus bibendum inconsectetur rutrum + mauris orbi scelerisque cursus augue ac suscipit sem mattis at ut suscipit +

+ Do it +
+
+ alternative +
+ + + + alternative +
+

Turpis in eu mi bibendum neque egestas congue ortor consequat

+

+ Vestibulum ullamcorper augue ex imperdiet tincidunt tellus bibendum inconsectetur rutrum + mauris orbi scelerisque cursus augue ac suscipit sem mattis at ut suscipit +

+ Do it +
+ + + +

Testimonials

+ + + alternative +

+ Words can be like X-rays, if you use them properly—they’ll go through anything. You read and + you’re pierced. +

+

Aldous Huxley — Designer

+ + + + alternative +

+ Words can be like X-rays, if you use them properly—they’ll go through anything. You read and + you’re pierced. +

+

Aldous Huxley — Designer

+ + + + alternative +

+ Words can be like X-rays, if you use them properly—they’ll go through anything. You read and + you’re pierced. +

+

Aldous Huxley — Designer

+ + + + +

+ Nec ultrices dui sapien eget mi proin nibh cras pulvinar mattis nunc sed blandit libero + volutpat diam soli +

+ Do it + + + +

FAQ

+ +

+ Sensory Factors +

+ + Nec ultrices dui sapien eget mi proin nibh cras pulvinar mattis nunc sed blandit libero + volutpat diam soli + +

+ Sensory Factors +

+ + Nec ultrices dui sapien eget mi proin nibh cras pulvinar mattis nunc sed blandit libero + volutpat diam soli + + + +`; diff --git a/site/pages/20--presets/30--spark/_assets/details-1.svg b/site/pages/20--presets/30--spark/_assets/details-1.svg new file mode 100644 index 0000000..9a70b17 --- /dev/null +++ b/site/pages/20--presets/30--spark/_assets/details-1.svg @@ -0,0 +1 @@ +details-1 \ No newline at end of file diff --git a/site/pages/20--presets/30--spark/_assets/details-2.png b/site/pages/20--presets/30--spark/_assets/details-2.png new file mode 100644 index 0000000..5109cff Binary files /dev/null and b/site/pages/20--presets/30--spark/_assets/details-2.png differ diff --git a/site/pages/20--presets/30--spark/_assets/header-illustration.svg b/site/pages/20--presets/30--spark/_assets/header-illustration.svg new file mode 100644 index 0000000..43216eb --- /dev/null +++ b/site/pages/20--presets/30--spark/_assets/header-illustration.svg @@ -0,0 +1 @@ +header-illustration \ No newline at end of file diff --git a/site/pages/20--presets/30--spark/_assets/testimonial-1.jpg b/site/pages/20--presets/30--spark/_assets/testimonial-1.jpg new file mode 100644 index 0000000..78be188 Binary files /dev/null and b/site/pages/20--presets/30--spark/_assets/testimonial-1.jpg differ diff --git a/site/pages/20--presets/30--spark/_assets/testimonial-2.jpg b/site/pages/20--presets/30--spark/_assets/testimonial-2.jpg new file mode 100644 index 0000000..aa707ae Binary files /dev/null and b/site/pages/20--presets/30--spark/_assets/testimonial-2.jpg differ diff --git a/site/pages/20--presets/30--spark/_assets/testimonial-3.jpg b/site/pages/20--presets/30--spark/_assets/testimonial-3.jpg new file mode 100644 index 0000000..5d57f44 Binary files /dev/null and b/site/pages/20--presets/30--spark/_assets/testimonial-3.jpg differ diff --git a/site/pages/20--presets/30--spark/_assets/testimonial-4.jpg b/site/pages/20--presets/30--spark/_assets/testimonial-4.jpg new file mode 100644 index 0000000..a301798 Binary files /dev/null and b/site/pages/20--presets/30--spark/_assets/testimonial-4.jpg differ diff --git a/site/pages/20--presets/30--spark/_assets/testimonial-5.jpg b/site/pages/20--presets/30--spark/_assets/testimonial-5.jpg new file mode 100644 index 0000000..79a6753 Binary files /dev/null and b/site/pages/20--presets/30--spark/_assets/testimonial-5.jpg differ diff --git a/site/pages/20--presets/30--spark/_assets/testimonial-6.jpg b/site/pages/20--presets/30--spark/_assets/testimonial-6.jpg new file mode 100644 index 0000000..d989334 Binary files /dev/null and b/site/pages/20--presets/30--spark/_assets/testimonial-6.jpg differ diff --git a/site/pages/20--presets/30--spark/index.rocket.js b/site/pages/20--presets/30--spark/index.rocket.js new file mode 100644 index 0000000..42364c2 --- /dev/null +++ b/site/pages/20--presets/30--spark/index.rocket.js @@ -0,0 +1,9 @@ +/* START - Rocket auto generated - do not touch */ +export const sourceRelativeFilePath = '20--presets/30--spark/index.rocket.js'; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; +/* END - Rocket auto generated - do not touch */ + +export const menuNoLink = true; + +export default () => html`

Spark

`; diff --git a/site/pages/20--presets/index.rocket.md b/site/pages/20--presets/index.rocket.md index ceeb88b..4a6f926 100644 --- a/site/pages/20--presets/index.rocket.md +++ b/site/pages/20--presets/index.rocket.md @@ -1,8 +1,8 @@ ```js server /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '20--presets/index.rocket.md'; -import { html, layout, setupUnifiedPlugins } from '../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ import { pageTree } from '../__shared/pageTree.js'; diff --git a/site/pages/30--tools/10--plugins-manager/10--overview.rocket.md b/site/pages/30--tools/10--plugins-manager/10--overview.rocket.md index 3b3cd63..f690b74 100644 --- a/site/pages/30--tools/10--plugins-manager/10--overview.rocket.md +++ b/site/pages/30--tools/10--plugins-manager/10--overview.rocket.md @@ -1,8 +1,8 @@ ```js server /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '30--tools/10--plugins-manager/10--overview.rocket.md'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ ``` diff --git a/site/pages/30--tools/10--plugins-manager/index.rocket.js b/site/pages/30--tools/10--plugins-manager/index.rocket.js index f8deb1b..7958bdd 100644 --- a/site/pages/30--tools/10--plugins-manager/index.rocket.js +++ b/site/pages/30--tools/10--plugins-manager/index.rocket.js @@ -1,7 +1,7 @@ /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '30--tools/10--plugins-manager/index.rocket.js'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ export const menuNoLink = true; diff --git a/site/pages/30--tools/20--markdown-javascript/10--overview.rocket.md b/site/pages/30--tools/20--markdown-javascript/10--overview.rocket.md index 2752621..0174b15 100644 --- a/site/pages/30--tools/20--markdown-javascript/10--overview.rocket.md +++ b/site/pages/30--tools/20--markdown-javascript/10--overview.rocket.md @@ -1,8 +1,8 @@ ```js server /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '30--tools/20--markdown-javascript/10--overview.rocket.md'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ ``` diff --git a/site/pages/30--tools/20--markdown-javascript/20--preview.rocket.md b/site/pages/30--tools/20--markdown-javascript/20--preview.rocket.md index 248ad05..b2b6774 100644 --- a/site/pages/30--tools/20--markdown-javascript/20--preview.rocket.md +++ b/site/pages/30--tools/20--markdown-javascript/20--preview.rocket.md @@ -1,11 +1,9 @@ ```js server /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '30--tools/20--markdown-javascript/20--preview.rocket.md'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ - -import '@rocket/launch/inline-notification/define'; ``` # Preview diff --git a/site/pages/30--tools/20--markdown-javascript/30--story.rocket.md b/site/pages/30--tools/20--markdown-javascript/30--story.rocket.md index acb18a5..6e7095c 100644 --- a/site/pages/30--tools/20--markdown-javascript/30--story.rocket.md +++ b/site/pages/30--tools/20--markdown-javascript/30--story.rocket.md @@ -1,8 +1,8 @@ ```js server /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '30--tools/20--markdown-javascript/30--story.rocket.md'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ ``` diff --git a/site/pages/30--tools/20--markdown-javascript/index.rocket.js b/site/pages/30--tools/20--markdown-javascript/index.rocket.js index e33f60b..1143990 100644 --- a/site/pages/30--tools/20--markdown-javascript/index.rocket.js +++ b/site/pages/30--tools/20--markdown-javascript/index.rocket.js @@ -1,7 +1,7 @@ /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '30--tools/20--markdown-javascript/index.rocket.js'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ export const menuNoLink = true; diff --git a/site/pages/30--tools/30--rollup-config/10--overview.rocket.md b/site/pages/30--tools/30--rollup-config/10--overview.rocket.md index 05eeaef..5e3332d 100644 --- a/site/pages/30--tools/30--rollup-config/10--overview.rocket.md +++ b/site/pages/30--tools/30--rollup-config/10--overview.rocket.md @@ -1,8 +1,8 @@ ```js server /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '30--tools/30--rollup-config/10--overview.rocket.md'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ ``` diff --git a/site/pages/30--tools/30--rollup-config/index.rocket.js b/site/pages/30--tools/30--rollup-config/index.rocket.js index a0b017c..ca97ce1 100644 --- a/site/pages/30--tools/30--rollup-config/index.rocket.js +++ b/site/pages/30--tools/30--rollup-config/index.rocket.js @@ -1,7 +1,7 @@ /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '30--tools/30--rollup-config/index.rocket.js'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ export const menuNoLink = true; diff --git a/site/pages/30--tools/40--check-html-links/10--overview.rocket.md b/site/pages/30--tools/40--check-html-links/10--overview.rocket.md index 34f4679..9a840f7 100644 --- a/site/pages/30--tools/40--check-html-links/10--overview.rocket.md +++ b/site/pages/30--tools/40--check-html-links/10--overview.rocket.md @@ -1,11 +1,9 @@ ```js server /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '30--tools/40--check-html-links/10--overview.rocket.md'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ - -import '@rocket/launch/inline-notification/define'; ``` # Overview diff --git a/site/pages/30--tools/40--check-html-links/index.rocket.js b/site/pages/30--tools/40--check-html-links/index.rocket.js index 156947a..306d26d 100644 --- a/site/pages/30--tools/40--check-html-links/index.rocket.js +++ b/site/pages/30--tools/40--check-html-links/index.rocket.js @@ -1,7 +1,7 @@ /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '30--tools/40--check-html-links/index.rocket.js'; -import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ export const menuNoLink = true; diff --git a/site/pages/30--tools/index.rocket.md b/site/pages/30--tools/index.rocket.md index f083d5f..573df4b 100644 --- a/site/pages/30--tools/index.rocket.md +++ b/site/pages/30--tools/index.rocket.md @@ -1,8 +1,8 @@ ```js server /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '30--tools/index.rocket.md'; -import { html, layout, setupUnifiedPlugins } from '../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ import { pageTree } from '../__shared/pageTree.js'; diff --git a/site/pages/40--blog/001--introducing-check-html-links.rocket.md b/site/pages/40--blog/001--introducing-check-html-links.rocket.md index 707af17..c732695 100644 --- a/site/pages/40--blog/001--introducing-check-html-links.rocket.md +++ b/site/pages/40--blog/001--introducing-check-html-links.rocket.md @@ -1,8 +1,8 @@ ```js server /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '40--blog/001--introducing-check-html-links.rocket.md'; -import { html, layout, setupUnifiedPlugins } from '../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ export const tags = ['html', 'javascript', 'webdev', 'node']; diff --git a/site/pages/40--blog/index.rocket.js b/site/pages/40--blog/index.rocket.js index 2f7b43d..bc7bbdb 100644 --- a/site/pages/40--blog/index.rocket.js +++ b/site/pages/40--blog/index.rocket.js @@ -1,7 +1,7 @@ /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '40--blog/index.rocket.js'; -import { html, layout, setupUnifiedPlugins } from '../recursive.data.js'; -export { html, layout, setupUnifiedPlugins }; +import { html, layout, setupUnifiedPlugins, components } from '../recursive.data.js'; +export { html, layout, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ export const menuLinkText = 'Blog'; diff --git a/site/pages/404.html.rocket.js b/site/pages/404.html.rocket.js index cffd5d2..112b084 100644 --- a/site/pages/404.html.rocket.js +++ b/site/pages/404.html.rocket.js @@ -1,7 +1,7 @@ /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = '404.html.rocket.js'; -import { html, setupUnifiedPlugins } from './recursive.data.js'; -export { html, setupUnifiedPlugins }; +import { html, setupUnifiedPlugins, components } from './recursive.data.js'; +export { html, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ import { Layout404 } from '@rocket/launch'; diff --git a/site/pages/__shared/footerMenu.js b/site/pages/__shared/footerMenu.js index a317841..6cf0db6 100644 --- a/site/pages/__shared/footerMenu.js +++ b/site/pages/__shared/footerMenu.js @@ -25,8 +25,7 @@ export const footerMenu = [ }, { text: 'Slack', - href: - 'https://join.slack.com/t/lit-and-friends/shared_invite/zt-llwznvsy-LZwT13R66gOgnrg12PUGqw', + href: 'https://join.slack.com/t/lit-and-friends/shared_invite/zt-llwznvsy-LZwT13R66gOgnrg12PUGqw', }, { text: 'Discord', diff --git a/site/pages/index.rocket.js b/site/pages/index.rocket.js index e2ba4d7..faa6ecf 100644 --- a/site/pages/index.rocket.js +++ b/site/pages/index.rocket.js @@ -1,7 +1,7 @@ /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = 'index.rocket.js'; -import { html, setupUnifiedPlugins } from './recursive.data.js'; -export { html, setupUnifiedPlugins }; +import { html, setupUnifiedPlugins, components } from './recursive.data.js'; +export { html, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ import { footerMenu } from './__shared/footerMenu.js'; @@ -21,8 +21,7 @@ export const layout = new LayoutHome({ reasons: [ { header: 'Small', - text: - 'No overblown tools or frontend frameworks, add JavaScript and/or Web Components only on pages where needed.', + text: 'No overblown tools or frontend frameworks, add JavaScript and/or Web Components only on pages where needed.', }, { header: '0 JavaScript by default', @@ -45,13 +44,11 @@ export const layout = new LayoutHome({ }, { header: 'Always fast while developing', - text: - 'While developing only pages you visit get rendered - so even with 1000 pages it will start up fast. Additionally assets are not moved but only referenced.', + text: 'While developing only pages you visit get rendered - so even with 1000 pages it will start up fast. Additionally assets are not moved but only referenced.', }, { header: 'Fast for users', - text: - 'An optimized rollup configuration means that the page will load faster for users, even if you have a slow connection.', + text: 'An optimized rollup configuration means that the page will load faster for users, even if you have a slow connection.', }, { header: 'Batteries included', @@ -59,8 +56,7 @@ export const layout = new LayoutHome({ }, { header: 'Do less work', - text: - 'Rocket does exactly the amount of work it needs to show you the content you want. No more waiting for the server to render pages or copy assets.', + text: 'Rocket does exactly the amount of work it needs to show you the content you want. No more waiting for the server to render pages or copy assets.', }, ], }); diff --git a/site/pages/pageTreeData.rocketGenerated.json b/site/pages/pageTreeData.rocketGenerated.json index de14a3b..1b3bd46 100644 --- a/site/pages/pageTreeData.rocketGenerated.json +++ b/site/pages/pageTreeData.rocketGenerated.json @@ -741,6 +741,75 @@ "sourceRelativeFilePath": "20--presets/index.rocket.md", "level": 1, "children": [ + { + "title": "Components | Rocket", + "h1": "Components", + "name": "Components", + "menuLinkText": "Components", + "url": "/presets/components/", + "outputRelativeFilePath": "presets/components/index.html", + "sourceRelativeFilePath": "20--presets/10--components/index.rocket.js", + "level": 2, + "menuNoLink": true, + "children": [ + { + "title": "Overview | Rocket", + "h1": "Overview", + "headlinesWithId": [ + { + "text": "Overview", + "id": "overview", + "level": 1 + } + ], + "name": "Overview", + "menuLinkText": "Overview", + "url": "/presets/components/overview/", + "outputRelativeFilePath": "presets/components/overview/index.html", + "sourceRelativeFilePath": "20--presets/10--components/10--overview.rocket.md", + "level": 3 + }, + { + "title": "Card Icon | Rocket", + "h1": "Card Icon", + "headlinesWithId": [ + { + "text": "Card Icon", + "id": "card-icon", + "level": 1 + } + ], + "name": "Card Icon", + "menuLinkText": "Card Icon", + "url": "/presets/components/card-icon/", + "outputRelativeFilePath": "presets/components/card-icon/index.html", + "sourceRelativeFilePath": "20--presets/10--components/card-icon.rocket.md", + "level": 3 + }, + { + "title": "Inline Notification | Rocket", + "h1": "Inline Notification", + "headlinesWithId": [ + { + "text": "Inline Notification", + "id": "inline-notification", + "level": 1 + }, + { + "text": "Modify the Title", + "id": "modify-the-title", + "level": 3 + } + ], + "name": "Inline Notification", + "menuLinkText": "Inline Notification", + "url": "/presets/components/inline-notification/", + "outputRelativeFilePath": "presets/components/inline-notification/index.html", + "sourceRelativeFilePath": "20--presets/10--components/inline-notification.rocket.md", + "level": 3 + } + ] + }, { "title": "Launch | Rocket", "h1": "Launch", @@ -748,7 +817,7 @@ "menuLinkText": "Launch", "url": "/presets/launch/", "outputRelativeFilePath": "presets/launch/index.html", - "sourceRelativeFilePath": "20--presets/10--launch/index.rocket.js", + "sourceRelativeFilePath": "20--presets/20--launch/index.rocket.js", "level": 2, "menuNoLink": true, "children": [ @@ -770,23 +839,13 @@ "text": "Usage", "id": "usage", "level": 2 - }, - { - "text": "Inline Notification", - "id": "inline-notification", - "level": 2 - }, - { - "text": "Modify the Title", - "id": "modify-the-title", - "level": 3 } ], "name": "Overview", "menuLinkText": "Overview", "url": "/presets/launch/overview/", "outputRelativeFilePath": "presets/launch/overview/index.html", - "sourceRelativeFilePath": "20--presets/10--launch/10--overview.rocket.md", + "sourceRelativeFilePath": "20--presets/20--launch/10--overview.rocket.md", "level": 3 }, { @@ -818,7 +877,47 @@ "menuLinkText": "Service Worker", "url": "/presets/launch/service-worker/", "outputRelativeFilePath": "presets/launch/service-worker/index.html", - "sourceRelativeFilePath": "20--presets/10--launch/20--service-worker.rocket.md", + "sourceRelativeFilePath": "20--presets/20--launch/20--service-worker.rocket.md", + "level": 3 + } + ] + }, + { + "title": "Spark | Rocket", + "h1": "Spark", + "name": "Spark", + "menuLinkText": "Spark", + "url": "/presets/spark/", + "outputRelativeFilePath": "presets/spark/index.html", + "sourceRelativeFilePath": "20--presets/30--spark/index.rocket.js", + "level": 2, + "menuNoLink": true, + "children": [ + { + "title": "Overview | Rocket", + "h1": "Overview", + "headlinesWithId": [ + { + "text": "Overview", + "id": "overview", + "level": 1 + } + ], + "name": "Overview", + "menuLinkText": "Overview", + "url": "/presets/spark/overview/", + "outputRelativeFilePath": "presets/spark/overview/index.html", + "sourceRelativeFilePath": "20--presets/30--spark/10--overview.rocket.md", + "level": 3 + }, + { + "title": "\n \n \n ", + "h1": "\n \n \n ", + "name": "\n \n \n ", + "menuLinkText": "Demo", + "url": "/presets/spark/demo/", + "outputRelativeFilePath": "presets/spark/demo/index.html", + "sourceRelativeFilePath": "20--presets/30--spark/20--demo.rocket.js", "level": 3 } ] @@ -945,13 +1044,13 @@ { "title": "Markdown Javascript | Rocket", "h1": "Markdown Javascript", - "menuNoLink": true, "name": "Markdown Javascript", "menuLinkText": "Markdown Javascript", "url": "/tools/markdown-javascript/", "outputRelativeFilePath": "tools/markdown-javascript/index.html", "sourceRelativeFilePath": "30--tools/20--markdown-javascript/index.rocket.js", "level": 2, + "menuNoLink": true, "children": [ { "title": "Overview | Rocket", @@ -1105,6 +1204,7 @@ "outputRelativeFilePath": "tools/rollup-config/index.html", "sourceRelativeFilePath": "30--tools/30--rollup-config/index.rocket.js", "level": 2, + "menuNoLink": true, "children": [ { "title": "Overview | Rocket", @@ -1148,8 +1248,7 @@ "sourceRelativeFilePath": "30--tools/30--rollup-config/10--overview.rocket.md", "level": 3 } - ], - "menuNoLink": true + ] }, { "title": "Check Html Links | Rocket", @@ -1160,6 +1259,7 @@ "outputRelativeFilePath": "tools/check-html-links/index.html", "sourceRelativeFilePath": "30--tools/40--check-html-links/index.rocket.js", "level": 2, + "menuNoLink": true, "children": [ { "title": "Overview | Rocket", @@ -1215,8 +1315,8 @@ { "title": "Rocket Blog | Rocket", "h1": "Rocket Blog", - "menuLinkText": "Blog", "name": "Rocket Blog", + "menuLinkText": "Blog", "url": "/blog/", "outputRelativeFilePath": "blog/index.html", "sourceRelativeFilePath": "40--blog/index.rocket.js", diff --git a/site/pages/recursive.data.js b/site/pages/recursive.data.js index dc09fa4..9e8d1ed 100644 --- a/site/pages/recursive.data.js +++ b/site/pages/recursive.data.js @@ -4,6 +4,7 @@ import { mdjsSetupCode } from '@mdjs/core'; import { footerMenu } from './__shared/footerMenu.js'; import { pageTree } from './__shared/pageTree.js'; export { html } from 'lit'; +import { rocketComponents } from '@rocket/components/components'; export const layout = new LayoutSidebar({ pageTree, footerMenu }); @@ -24,4 +25,6 @@ export const setupUnifiedPlugins = [ }), ]; +export const components = { ...rocketComponents }; + // export const openGraphLayout = new OpenGraphLayoutLogo(); diff --git a/site/pages/simulator.rocket.js b/site/pages/simulator.rocket.js index 45c936e..098592e 100644 --- a/site/pages/simulator.rocket.js +++ b/site/pages/simulator.rocket.js @@ -1,7 +1,7 @@ /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = 'simulator.rocket.js'; -import { html, setupUnifiedPlugins } from './recursive.data.js'; -export { html, setupUnifiedPlugins }; +import { html, setupUnifiedPlugins, components } from './recursive.data.js'; +export { html, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ import { LayoutSimulator } from '@mdjs/mdjs-preview/server'; diff --git a/site/pages/sitemap.xml.rocket.js b/site/pages/sitemap.xml.rocket.js index 8f7c1a8..90c7e86 100644 --- a/site/pages/sitemap.xml.rocket.js +++ b/site/pages/sitemap.xml.rocket.js @@ -1,7 +1,7 @@ /* START - Rocket auto generated - do not touch */ export const sourceRelativeFilePath = 'sitemap.xml.rocket.js'; -import { html, setupUnifiedPlugins } from './recursive.data.js'; -export { html, setupUnifiedPlugins }; +import { html, setupUnifiedPlugins, components } from './recursive.data.js'; +export { html, setupUnifiedPlugins, components }; /* END - Rocket auto generated - do not touch */ import { LayoutSitemap } from '@rocket/engine'; diff --git a/yarn.lock b/yarn.lock index 2abaf01..662b700 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4354,6 +4354,11 @@ flatted@^3.1.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.0.tgz#a5d06b4a8b01e3a63771daa5cb7a1903e2e57067" integrity sha512-tW+UkmtNg/jv9CSofAKvgVcO7c2URjhTdW1ZTkcAritblu8tajiYy7YisnIflEwtKssCtOxpnBRoCB7iap0/TA== +fontawesome-free@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/fontawesome-free/-/fontawesome-free-1.0.4.tgz#c7c499708dabd59eb5dedf232b590a862e05957b" + integrity sha512-7sX6Lbg2oQiClFFFFitJlKg20h3YTBON6rdmq3uGjNwDo8G6EjF2bfj2OjjcCUmf4OvZCgyHaXfW2JseqissLw== + forever-agent@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91" @@ -7077,10 +7082,10 @@ prettier@^1.19.1: resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb" integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew== -prettier@^2.2.1: - version "2.2.1" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5" - integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q== +prettier@^2.5.1: + version "2.5.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a" + integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg== pretty-format@^27.2.5, pretty-format@^27.5.0: version "27.5.0"