Skip to content

Eleventy site skeleton - #1333

Merged
aomarks merged 8 commits into
mainfrom
site-skeleton
Sep 23, 2022
Merged

Eleventy site skeleton#1333
aomarks merged 8 commits into
mainfrom
site-skeleton

Conversation

@aomarks

@aomarks aomarks commented Sep 23, 2022

Copy link
Copy Markdown
Contributor
  • Adds a content package with a "hello world" eleventy site
  • Adds a components package with a basic element
  • Adds a top-level dev command
  • A few misc small cleanupy things

Will add a server in a followup, and then get auto-deploy working

@aomarks
aomarks requested a review from rictic September 23, 2022 19:58
@aomarks
aomarks merged commit 3da0b75 into main Sep 23, 2022
@aomarks
aomarks deleted the site-skeleton branch September 23, 2022 20:12
Comment thread package.json
@@ -1,5 +1,5 @@
{
"name": "webcomponents.org",
"name": "@webcomponents/internal-site",

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this renamed because something is going to depend on it? If the package is private and nothing depends on it and it's in an org, there's no name-attack possible on it, right?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is probably no feasible attack unless we publish, yeah. However, I think it's just a good habit to get into for npm development, because in other scenarios there are attacks. I think we should simply never declare a package name that we don't own, or in a namespace that we don't own, as a rule.

Comment thread package.json
"format": "prettier \"./packages/*/src/**/*.ts\" --write"
},
"dependencies": {
"@11ty/eleventy": "^1.0.2",

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is 11ty installed here and not in packages/content?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I kinda figured it didn't matter, since it all goes to the same place anyway, and these are private packages. But I guess for organization it's still a bit useful. Fixed in #1334

*/

module.exports = (eleventyConfig) => {
eleventyConfig.addPassthroughCopy('site/assets');

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

did we ever figure out a pattern to symlink in dev and copy in prod?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, we have that for lit.dev. In #1334 I've actually found an even simpler way to do it.

Comment thread tsconfig.base.json
@@ -0,0 +1,21 @@
{
"compilerOptions": {
"target": "es2021",

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at compat tables, I think we can do 2022 now.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done in #1334

aomarks added a commit that referenced this pull request Sep 26, 2022
Sets up separate dev and prod eleventy builds for the new webcomponents.org. Both builds use esbuild.

Running `npm run watch:dev` or `npm run watch:prod` from the top-level will give you live refresh versions of either build.

The dev build is super fast because [1] it uses symlinks so that Eleventy doesn't need to rebuild when static assets or JS changes, and [2] it runs esbuild with no minification or bundling.

There is a separate `check:types` command in the `client` package which runs TypeScript in `noEmit` mode. This runs in parallel when you use either of the top-level `watch:*` commands. So the experience is that the browser updates immediately, and a few moments later you also get any type errors.

This design lets us use identical `<script>` tags in both dev and prod mode, which is nice. On lit.dev we needed to generate different script tags for each mode.

Also addresses the post-merge comments from #1333
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants