ampproject / bentojs.dev Goto Github PK

I'm not sure about the animation here. It looks like a normal bottom toolbar, but works differently with the slide out animation (which is way to slow either). I think simply showing the content as an overlay would work better here.

Styles also need to be update, @MarcoABCorrea I'm sure you already have this on your list.

In the English documentation, id attributes of headings that are cross-referenced in the document, must be set explicitly in Markdown, to make sure those ids are consistent across translated documents and anchor links are working correctly on non-English pages.
Example:

## Web Component {: #web-component }

Support for explicit id attributes of headings is added in this PR:
#162

via #32 (review). Combine the demos for Web Components and NPM mode.

The current approach is not consistent. Some pages had permalinks (e.g. home, get started, ...) other didn't (component docs). Hence, some pages were located in /en/* and others not.

By default, all english docs should be on the non localized paths, but ideally also on the localized path starting with en (canonical should point to the non localized path).

http://localhost:8080/en/components/bento-social-share/#preact%2Freact-component

@MarcoABCorrea can you take a look what's going on here?

For component docs we can use the new page.data.description field.

summary
In the Hello World post, I am unable to click: "Show More". The pointer is not becoming a cursor and there is no expand happening when clicked. This problem only occurs at specific viewport widths. For my testing that included the range [800px, 1200px].

screenshot

For example, this section in https://bentojs.dev/get-started:

Different options:

• codepen
• glitch
• ...

Hi, there
I am installing it from this page.
but, 404 will be displayed.

> npm install @bentoproject/bento-fit-text
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@bentoproject%2fbento-fit-text - Not found
npm ERR! 404
npm ERR! 404  '@bentoproject/bento-fit-text@*' is not in this registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/komisan19/.npm/_logs/2021-12-30T02_24_56_798Z-debug-0.log

Presumably, this is the correct package name, right?

> npm install @bentoproject/fit-text

...we need one :-) Have we already got an asset for this? @matthiasrohmer @MarcoABCorrea

The background overlay uses position: absolute combined with z-index: 1 which makes it impossible to select text at the top.

Before click:

After clicking "See more":

We currently use it here:

_includes/partials/components/list.njk
2:  <nav toolbar="(min-width: 1024px)" toolbar-target="bd-components-target">

_includes/partials/components/toc.njk
5:    toolbar-target="bd-toc-target">

bento-sidebar.njk
11:      <nav toolbar="(min-width: 767px)" toolbar-target="target-element">

@alanorozco have you got recommendations for workarounds?

//cc @matthiasrohmer

Label: "Improve your page experience with Bento components"
CTA: "Get Started" with link to getting started guide

I forgot to remove the button when removing the TOC from the guides overview page. Now that we have three sections it might make sense to reactivate it though.

From the center image, clicking the right arrow instantly changes the images to the avocados, while clicking left (or any other shift between pairs of images) does a progressive slide from one to the next. Unclear if this is intentionally demonstrating variations in available transitions or if this is a bug

Minor weirdness when demo-ing components

https://bentojs.dev/en/components/bento-jwplayer/#attributes

Not sure where the problem is for this: https://bentojs-dev--staging-dqq7e0dm.web.app/en/components/bento-timeago/

https://bentojs-dev--staging-dqq7e0dm.web.app/en/components/bento-facebook/

Have we already got designs for this?

2.

3.

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)

For example, see the link at the end of this line: https://github.com/ampproject/bentojs.dev/blob/main/site/en/guides/getting-started-with-Vue-and-Bento.md#summary

It isn't being hyperlinked in the rendered doc at https://bentojs.dev/documentation/guides/bento-vue.js-guide:

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Replace dependency npm-run-all with npm-run-all2 5.0.0
• Update dependency sentence-splitter to v3.2.3
• Update dependency @11ty/eleventy-img to v1.1.0
• Update dependency @11ty/eleventy-plugin-rss to v1.2.0
• Update dependency @11ty/eleventy-plugin-syntaxhighlight to v4.2.0
• Update dependency @ampproject/toolbox-validator-rules to v2.9.0
• Update dependency eslint-config-prettier to v8.10.0
• Update dependency eslint-plugin-prettier to v4.2.1
• Update dependency markdown-it-anchor to v8.6.7
• Update dependency prettier to v2.8.8
• Update dependency sass to v1.72.0
• Update dependency @11ty/eleventy to v2
• Update dependency @11ty/eleventy-img to v4
• Update dependency @11ty/eleventy-plugin-syntaxhighlight to v5
• Update dependency eslint-config-prettier to v9
• Update dependency eslint-plugin-prettier to v5
• Update dependency espree to v10
• Update dependency execa to v8
• Update dependency prettier to v3
• Update dependency purgecss to v5
• Update dependency rimraf to v5
• Update dependency sentence-splitter to v5
• Update react monorepo to v18 (major) (react, react-dom)
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• Update dependency gulp-svgstore to v9

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @11ty/eleventy to v1.0.2
• Update dependency csso to v5.0.5
• Update dependency markdown-it-attrs to v4.1.6
• Update dependency @bentoproject/accordion to v1.2302271541.0
• Update dependency @bentoproject/sidebar to v1.2305051745.1
• Update dependency esbuild to v0.20.2
• Update dependency eslint to v8.57.0
• Update dependency espree to v9.6.1
• Update dependency fast-glob to v3.3.2
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

See comment here: #116 (comment)

Follow-up to #73 (review).

Also height calculation is weird: