modernweb-dev / rocket Goto Github PK
View Code? Open in Web Editor NEWThe modern web setup for static sites with a sprinkle of JavaScript
Home Page: https://rocket.modern-web.dev
License: MIT License
The modern web setup for static sites with a sprinkle of JavaScript
Home Page: https://rocket.modern-web.dev
License: MIT License
Because RocketDrawer.js seems to be hard-coded to 1024px per this line:
this.useOverlayMediaQuery = '(max-width: 1024px)';
then my understanding is that I am forced to make all my @media
queries for mobile break on the same value, else I get weird results?
It would be more ideal if RocketDrawer were configurable such that <rocket-drawer something="700">
were possible, giving me the ability to set my mobile trigger media queries on a different value for different themes.
ideally, users should be able to use config.devServer.plugins
as well as setupDevPlugins:[addPlugin(...)]
Rocket should handle backticks in document titles
Consider this source:
# Core >> `@scope/pkg` || 10
This package packs a punch!
## Using `func`
try this!
```js
import { func } from '@scope/pkg';
func();
```
@scope/pkg
<h1>Core: <code>@scope/pkg</code></h1>
<a><code>@scope/pkg</code></a>
<a href="#func" class="anchor"><code>func</code></a>
`@scope/pkg`
<h1>Core >> <code>@scope/pkg</code> || 10</h1>
<a>`@scope/pkg`</a>
<a href="#func" class="anchor"><code></code></a>
I tried to run check-html-links
on latest version 0.2.2
, but it's not working because slash
is not found.
My dockerfile:
FROM node:16-alpine3.13
RUN npm install [email protected]
ENTRYPOINT ["/usr/local/bin/check-html-links"]
Execution trace:
node:internal/process/esm_loader:74
internalBinding('errors').triggerUncaughtException(
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'slash' imported from /usr/local/lib/node_modules/check-html-links/src/validateFolder.js
at new NodeError (node:internal/errors:363:5)
at packageResolve (node:internal/modules/esm/resolve:698:9)
at moduleResolve (node:internal/modules/esm/resolve:739:18)
at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:853:11)
at Loader.resolve (node:internal/modules/esm/loader:89:40)
at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:73:40)
at link (node:internal/modules/esm/module_job:72:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
This is because the validateFolder.js import slash
but it's not included into the package.json
As a work around, I manually install slash
This is a new one just today.
I run the standard getting started process daily and it always works - as from https://rocket.modern-web.dev/guides/first-pages/getting-started/
, from mkdir to ... to npm install --save-dev @rocket/cli @rocket/launch
and then through the rest of the guide.
Changes introduced in last 24 hours now produce this error:
Error: You’re trying to use a layout that does not exist: home.njk
Currently, the only way to make mdjs-preview work in lit2 context, is to upgrade MdJsPreview.js
:
import { LitElement, html, css } from 'lit';
Could you maybe make a (pre)release for this?
When doing rocket start
on a windows machine, this error is thrown:
Error with passthrough copy: (more in DEBUG output)
> Having trouble copying './docs/**/*.{png,gif,jpg,jpeg,svg,css,xml,json,js}'
`TemplatePassthroughManagerCopyError` was thrown
> Error copying passthrough files: Destination is not in the site output directory. Check your passthrough paths.
`TemplatePassthroughError` was thrown
> Destination is not in the site output directory. Check your passthrough paths.
`TemplatePassthroughError` was thrown:
TemplatePassthroughError: Destination is not in the site output directory. Check your passthrough paths.
at TemplatePassthrough.copy (C:\Users\mpuech\my-project\node_modules\@11ty\eleventy\src\TemplatePassthrough.js:93:7)
Issue seems to come from
Eleventy may not want a windows path.resolve path to work.
If I add in the rocket.config.mjs outputDevDir: '_site-dev'
, another error is thrown (maybe not related?):
rocket start
Problem writing Eleventy templates: (more in DEBUG output)
> Input buffer has corrupt header: glib: XML parse error: Error domain 1 code 64 on line 6 column 56 of data: XML declaration allowed only at the start of the document
`Error` was thrown:
Error: Input buffer has corrupt header: glib: XML parse error: Error domain 1 code 64 on line 6 column 56 of data: XML declaration allowed only at the start of the document
Copied 37 files / Wrote 0 files in 0.96 seconds (v0.11.1)
(node:36736) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'items' of undefined
at RocketCli.update (file:///C:/Users/mpuech/my-project/node_modules/@rocket/cli/src/RocketCli.js:176:69)
at RocketEleventy.write (file:///C:/Users/mpuech/my-project/node_modules/@rocket/cli/src/RocketCli.js:40:28)
at async RocketEleventy.watch (C:\Users\mpuech\my-project\node_modules\@11ty\eleventy\src\Eleventy.js:650:5)
It's the same steps described in the current getting started page.
mkdir my-project
cd my-project
npm init -y
npm install --save-dev @rocket/cli @rocket/launch
Add .gitignore
file with:
node_modules/**
/docs/_assets
/docs/_includes
/docs/_data
Add docs/index.md
file with:
# Welcome to your Rocket site
Text here, like any markdown file.
npx rocket start
To replicate:
These anchor links fail on my browser anyway. Normal sidebar anchor links on normal sidebar pages work fine, though, as do these same blog links when not in mobile view.
My static site generator encodes my mailto:[email protected]
in mailto:address@example.com
I saw a check in source code for ^mailto:
links, but it's fail on my link with the error message :
1. missing reference target about/mailto:address@example.com
from about/index.html:698:50 via href="mailto:address@example.com"
I think that it's simply a problem of HTML Entities decoding, but I'm not sure.
Automatic height doesn't stop growing when you simulate a component with 100vh
A example is https://github.com/oracle/helidon-site.
Putting this for reference as I investigate, but I wonder if it could come from the sheer size of the website?
What seems to happen when running the tool against this website is that it finds the links and then keeps running forever. Forever for now being +15 minutes after which I stopped the process.
❌ Found 1 missing reference targets (used by 2 links) while checking 21 files:
Sometimes you know you're going to have broken links, and you're ok with it. check-html-links
should add some config to warn instead of error. When set, it should exit with code 0
export interface CheckHtmlLinksCliOptions {
printOnError: boolean;
rootDir: string;
ignoreLinkPatterns: string[] | null;
continueOnError: boolean;
// like
warnOnBrokenLink: boolean;
// or
level: 'warn'|'error'
}
Created the simplest possible project to demo this. Will provide link in comments
Rocket executes startCommand of RocketStart
Copied 41 files / Wrote 4 files in 1.44 seconds (v0.11.1)
👀 Checking if all internal links work...
🔥 Found a total of 4 files to check!
🔗 Found a total of 114 links to validate!
❌ Found 5 missing reference targets (used by 14 links) while checking 4 files:
1. missing reference target _site-dev/blog/index.html
from _site-dev/bar/index.html:191:23 via href="/blog/"
from _site-dev/bar/yada/index.html:190:23 via href="/blog/"
from _site-dev/foo/index.html:183:23 via href="/blog/"
... 1 more references to this target
2. missing reference target _site-dev/about/slack/index.html
from _site-dev/bar/index.html:214:23 via href="/about/slack/"
from _site-dev/bar/yada/index.html:213:23 via href="/about/slack/"
from _site-dev/foo/index.html:206:23 via href="/about/slack/"
... 1 more references to this target
3. missing reference target _site-dev/about/sponsor/index.html
from _site-dev/bar/index.html:225:23 via href="/about/sponsor/"
from _site-dev/bar/yada/index.html:224:23 via href="/about/sponsor/"
from _site-dev/foo/index.html:217:23 via href="/about/sponsor/"
... 1 more references to this target
4. missing reference target _site-dev/bar
from _site-dev/index.html:153:13 via href="/bar"
5. missing reference target _site-dev/bar/yada
from _site-dev/index.html:154:13 via href="/bar/yada"
All builds npm run build
offer an installable called "Rocket" when deployed.
Workaround (except when such as netlify does the build from a git push) is to npm run build
and then manually replace the _site/assets/webmanifest.json name
value with the desired installation name for the service worker
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch @rocket/[email protected]
for the project I'm working on.
Solves an error where external image tag src
is transformed to local urls. i.e. src="https://some.image/image.jpg"
gets transformed to src="/_assets/images/https://some.image/image.jpg"
Here is the diff that solved my problem:
diff --git a/node_modules/@rocket/cli/src/eleventy-plugins/insertResponsiveImages.cjs b/node_modules/@rocket/cli/src/eleventy-plugins/insertResponsiveImages.cjs
index 349831f..4a2f4e8 100644
--- a/node_modules/@rocket/cli/src/eleventy-plugins/insertResponsiveImages.cjs
+++ b/node_modules/@rocket/cli/src/eleventy-plugins/insertResponsiveImages.cjs
@@ -99,7 +99,7 @@ function getImages(html) {
const src = getAttribute(data, 'src');
const title = getAttribute(data, 'title');
const alt = getAttribute(data, 'alt');
- if (presetName) {
+ if (presetName && !src.match(/^https?\:\/\//)) {
images.push({
presetName,
attributes,
This issue body was partially generated by patch-package.
My web component takes an image URL as an attribute. In dev mode, all works perfectly. But, Rocket build renames the image URL, and does not update the web component's attribute. Is there a filter to update the image URL? Or a configuration to pass through images without changing the URL?
We still need to fix those things before we want more users to pick rocket up
<picture>
support)@rocket/launch
)For playground
https://github.com/PolymerLabs/playground-elements
For import map generation
https://github.com/jspm/generator
This or something similar needs to be added to the 404 docs, given someone like myself can't think for themselves:
This creates a 404.html page, which will do nothing by itself. But when this page is placed on a netlify or firebase hosting site, for example, the host will redirect 404s to this page.
If the hosting provider doesn't already do this, then you may be able to accomplish this same redirect with the hosting site's .htaccess file
Using rocketSearch
like this in the rocket.config.js:
import { rocketSearch } from '@rocket/search';
import { fireTheme } from './fire-theme/index.js';
export default {
presets: [fireTheme(), rocketSearch()],
};
We get this error:
(node:94964) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '_site-dev/_merged_assets/_static/rocket-search-index.json'
at Object.openSync (fs.js:476:3)
at Object.writeFileSync (fs.js:1467:35)
at RocketSearchPlugin.saveIndex (file:///[path-to-rocket-project]/node_modules/@rocket/search/src/RocketSearchPlugin.js:132:8)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async RocketSearchPlugin.updated (file:///[path-to-rocket-project]/node_modules/@rocket/search/src/RocketSearchPlugin.js:118:5)
at async RocketCli.update (file:///[path-to-rocket-project]/node_modules/@rocket/cli/src/RocketCli.js:185:9)
at async RocketEleventy.write (file:///[path-to-rocket-project]/node_modules/@rocket/cli/src/RocketCli.js:33:5)
at async RocketEleventy.watch (/[path-to-rocket-project]/node_modules/@11ty/eleventy/src/Eleventy.js:650:5)
at async RocketStart.startCommand (file:///[path-to-rocket-project]/node_modules/@rocket/cli/src/RocketStart.js:43:7)
at async RocketCli.run (file:///[path-to-rocket-project]/node_modules/@rocket/cli/src/RocketCli.js:132:9)
This is different than the normal crustiness that comes with service worker on some sites.
Today every new page on rocket.modernweb.dev
, even if I revisit the same page 10 minutes later, comes unstyled.
Workaround:
command shift r to refresh browser always fixes that page instantaneously
I am in the process of migratring to rocket and came up with the following rocket.config.mjs
file:
import { createSpaConfig } from '@rocket/building-rollup';
import { absoluteBaseUrlNetlify } from '@rocket/core/helpers';
import { rocketLaunch } from '@rocket/launch';
import { copy } from '@web/rollup-plugin-copy';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';
import merge from 'deepmerge';
import {
addPlugin,
adjustPluginOptions,
} from 'plugins-manager';
import postcss from 'rollup-plugin-postcss';
import svgo from 'rollup-plugin-svgo';
import visualizer from 'rollup-plugin-visualizer';
const baseConfig = createSpaConfig({
absoluteBaseUrl: absoluteBaseUrlNetlify(
'http://localhost:8080'
),
// development mode creates a non-minified build for debugging or development
developmentMode: process.env.ROLLUP_WATCH === 'true',
// set to true to inject the service worker registration into your index.html
injectServiceWorker: false,
// if you use createSpaConfig, you can use your index.html as entrypoint,
// any <script type="module"> inside will be bundled by rollup
input: 'index.html',
// alternatively, you can use your JS as entrypoint for rollup and
// optionally set a HTML template manually
// input: './app.js',
// use the outputdir option to modify where files are output
output: { dir: 'build' },
presets: [rocketLaunch()],
});
export default merge(baseConfig, {
output: {
assetFileNames: 'assets/[name]-[hash][extname]',
chunkFileNames: 'static/js/chunks/[name]-[hash].js',
// TODO: rename to [hash].js before deploymentout
entryFileNames: 'static/js/[name]-[hash].js',
format: 'es',
},
setupBuildPlugins: [
addPlugin({
name: 'copy',
options: { patterns: 'assets/css/**/*' },
plugin: copy,
}),
addPlugin({
name: 'postcss',
options: {
extract: true,
plugin: [autoprefixer(), cssnano()],
},
plugin: postcss,
}),
addPlugin({
name: 'svgo',
options: {
// See https://github.com/svg/svgo#what-it-can-do
removeAttributesBySelector: true,
removeOffCanvasPaths: true,
removeRasterImages: true,
reusePaths: true,
sortAttrs: true,
},
plugin: svgo,
}),
addPlugin({
name: 'visualizer',
options: {
brotliSize: true,
gzipSize: true,
template: 'treemap',
},
plugin: visualizer,
}),
adjustPluginOptions('importMetaAssets', {
transform: (assetBuffer, assetPath) => {
return assetPath.endsWith('.svg')
? svgo
.optimize(assetBuffer.toString())
.then(({ data }) => data)
: assetBuffer;
},
}),
// workaround for development vs build relative paths
adjustPluginOptions('html', {
transform: (html) =>
html.replace(/href="\.\/public\//g, 'href="./'),
}),
],
});
When trying to build the project using rimraf build && tsc && rocket -c rocket.config.mjs
I am getting the following error message:
yarn build
yarn run v1.22.5
$ rimraf build && tsc && rocket -c rocket.config.mjs
(node:23104) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'includes' of undefined
at RocketCli.considerPlugin (file:///C:/Users/ateyar/Documents/GitHub/x-wc/node_modules/@rocket/cli/src/RocketCli.js:188:28)
at RocketCli.run (file:///C:/Users/ateyar/Documents/GitHub/x-wc/node_modules/@rocket/cli/src/RocketCli.js:145:16)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:23104) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:23104) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Done in 10.61s.
I went through the doc couples of times but can't figure out why I am getting that. Could you please advise on how to make this work, and ways I could improve this config?
As mentioned on Twitter, some URLs might not be resolvable "statically". For instance, some URLs might be served by Netlify proxy or by another subsystem.
To accommodate this use case, we should provide an option to ignore certain folders/references.
In addition, we could pass a "filter function" to the resolveLinks
function to decide if we should process or ignore a given link. That might be useful, when check-html-links
will be able to check external links as some users will probably want to disable this feature. Using a filter function this will be straightforward:
import {validateFolder} from 'check-html-links'
validateFolder('_site', {
options: {
// ignore external url
ignoreLink: (hrefObj) => value.startsWith('//') || value.startsWith('http')
}
})
We could also introduce a "resolver function" if we want to emulate a proxy (i.e., when files exist on the local file system but on another path). But that's probably out-of-scope for now.
And now the tough question, how should we name this option 😅
$ npx check-html-links _site --ignore="/speedlify/**,**debug**,{app,docs,tests}/**/*.html"
We might need to add link
or url
to make it clear (otherwise, one might think that it will ignore files).
We could also add pattern
if we want to support glob expressions:
--ignore
--ignore-pattern
--ignore-link-pattern
--ignore-link-patterns
--skip
I think that patterns
should be plural if we can define multiple patterns using a comma-separated list or singular if we can use the option multiple times:
$ npx check-html-links _site \
--ignore-link-pattern="/speedlify/**" \
--ignore-link-pattern="**debug**" \
--ignore-link-pattern="{app,docs,tests}/**/*.html"
And last question, should we add https://www.npmjs.com/package/yargs-parser to parse process.argv
? For reference, https://github.com/yargs/yargs has 7 dependencies so not great.
I'm not familiar with https://www.npmjs.com/package/commander but it has 0 dependency... so it might be a potential solution.
For JS, I decided to place the script tag in a joiningBlock below my content. But, CSS should be in the head, which it seems is always global and cannot be encapsulated. Am I properly encapsulating JS, and is Rocket's intent that CSS should not be encapsulated?
The docs say that when you add an html link to the document head it appears at the bottom of the head.
https://rocket.modern-web.dev/guides/presets/using-templates/#adding-html-to-the-html-head
But when I did it it appeared at the top of the head, hence the CSS was overridden. I had to manually adjust the order.
If you try to "clean up" your site.cjs by eliminating this line: helpUrl=...
, you might spend some time chasing this obscure error:
(node:11751) UnhandledPromiseRejectionWarning: Error: :x: Found 3 missing reference targets (used by 3 links) while checking 3 files:
1. missing reference target ... etc etc etc
Might make sense to document this somewhere to keep folks from bugging Thomas, like I did.
Sometime last week, the service worker registration script stopped auto-reloading for new versions. I've observed this on https://apolloelements.dev and on a deploy preview for this repo.
Maybe adding an Author to the blog schema and featuring that in the content would be a good idea
When Rocket parses the main page title, it takes
# First Pages >> Getting Started
and produces (simplified):
<h1>First Pages: Getting Started</h1>
It seems odd to me to add extra text to the page title. Should not the <h1>
be just the title? “First Pages” is not the title of the page, it’s the step above in the navigation hierarchy. Should not there be a simple option at least to style it? We could do:
<h1><span class='supertitle'>First Pages </span>Getting Started</h1>
Then we could easily style it or hide it. But it still seems odd semantically. Better:
<header>
<span class='supertitle'>First Pages</span>
<h1>Getting Started</h1>
</header>
Apart from the defaults, it would also be nice to expose a simple way to modify titles, which doesn’t seem to be the case ATM.
Consider a user wanting to put an element name in a post title
# Components >> <some-button>
This should render fine in the navigation sidebar, in the post's h1
, etc.
However, the document.title
, shown in the tab bar, shows the literal <
(and-el-tee-semicolon) instead of the decoded <
This is likely to be an issue for web component authors
If you were to have a header in a markdown file like so:
# Fun Errors & Feedback
It would npm run start
flawlessly.
But if you ran npm run build
you would get a very uninformative error such as
Input buffer has corrupt header: glib: XML parse error: Error domain 1 code 68 on line 24 column 28 of data: xmlParseEntityRef: no name
`Error` was thrown:
Error: Input buffer has corrupt header: glib: XML parse error: Error domain 1 code 68 on line 24 column 28 of data: xmlParseEntityRef: no name
It would be more helpful if - at minimum - the specific file that contains the ampersand was identified, then a user would at least know where to look for the error. Even better if it said "dude! We can't process an ampersand!"
Hello,
Since version 0.2.0, check-html-links is not returning an exit code 1 when broken links are found. This is working properly in 0.1.2.
Repro steps assuming _site has broken links:
$ npx check-html-links _site >/dev/null 2>&1 ; echo $?
0
$ npx [email protected] _site >/dev/null 2>&1 ; echo $?
1
Thanks
The current default way to run the routine is to run npx check-html-links $options
or to run the src/cli.js
file from the module itself.
It probably would be a good diea to expose that capability so it can be imported form other files ? That would allow to run it straight for Javascript and ease interop as well as plugins interfaces as most plugins expect running a single javascript file.
I would like to customize some colors of the markdown code blocks, which goes easy with e.g. --markdown-syntax-color
(and other variables). But this is not possible for the code examples inside mdjs viewer.
If they are in sync i could just assign a color to the variable once.
So i suggest to use the markdown-syntax variables in your code as well:
.token.function,
.token.class-name {
color: #6f42c1;
}
Becomes:
.token.function {
color: var(--markdown-syntax-function-color, #6f42c1);
}
.token.class-name {
color: var(--markdown-syntax-class-name-color, #6f42c1);
}
Hey I’m running this to clean up some of the broken links on 11ty-website but am seeing some strange characters in the output which are not present in the output HTML.
Running npx check-html-links _site
on https://github.com/11ty/11ty-website/
Rocket has the very useful feature of listing files within an _includes subdirectory:
{% for blockName, blockPath in _joiningBlocks._layoutHome.content %}
Could this feature be extended to assets within docs subdirectories? Specifically, looping through a directory of images to instantiate a layout?
potentially a dependency worth adding for it's functionality
https://github.com/transitive-bullshit/check-links
need to verify if it's parallel enough
Just realized I forgot to add an issue for that.
When testing the tool, I realized I missed some kind of idea of what was gonna happen.
So I added number of files and links as extra info.
It could inform the user how much there is to check, as well as whether he is in the right location.
See feat: #32
Ordinarily, the navigation headers for each page that uses the with-sidebar.njk
layout are derived from the markdown content. If the markdown contains a 2nd-level header, it's included, and if not, not.
So for example, if the user creates a nunjucks template like so:
<h2>Not Listed</h2>
{{ content | safe }}
Then the nav sidebar will not include "Not Listed", and that header won't have an "anchor" link
I'm working around this with a nunjucks macro (for the 'anchor' link) and a pretty awful hack to insert headings (relies on knowing the names of the headings in advance)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.