This is an HTML Template utilizing Carbon for IBM.com Web Components. It contains a basic WebPack setup using Handlebars for page management, which includes the dds-dotcom-shell, along with other various patterns and components available in Carbon for IBM.com.

License: Apache License 2.0

JavaScript 41.23% SCSS 1.36% Handlebars 57.41%

webcomponents carbon carbon-design-system handlebars javascript hacktoberfest

carbon-for-ibm-dotcom-web-components-template's Issues

[Web Components Template] Update config to automate language page creation

The problem

Translation data is currently captured in separate json files. In addition, the language/locale folders are also generated manually within the webpack config. This is overhead configuration that could lead to misconfigurations, as well as additional management for adopters of this template.

The solution

This should be updated so that the language/local folders are auto-generated based on the existence of the language files.

Additional information

We should also account for cases where languages are not necessary, so that the language folders aren't generated if the translation files are empty, or perhaps a configuration that would disable this feature and only take in the data from a single set of i18n data.
This template would be used by adopters to create a new repo to build their own experience.

[Web Components Template] Automatically build and configure pages that use RTL

The problem

Right now, there is a flag for turning on or off RTL. This would be much better if both artifacts are generated on build, and then they are used depending on the detected language.

The solution

For example, if there is an Arabic language page, it should automatically create the RTL artifact, and add <html dir="rtl"> without the developer having to set any environment variables. This can most likely be an addition to the webpack logic.

Additional information

For now, should target Arabic for this

[Web Components Template] Include Carbon Theme Zoning Classes CDN

Summary

Looks like in this project we're using carbon--theme() mixin (eg. https://github.com/carbon-design-system/carbon-for-ibm-dotcom-web-components-template/blob/main/src/assets/scss/app.scss#L13) to define the theme of a particular layout component, however, I think it would be helpful to be able to leverage the existing Carbon theme zoning classes CDN helper.
This allows adopters to easily define the theme using Carbon theme utility classes.

<dds-leadspace size="medium" class="dds-theme-zone-g90">
      <dds-leadspace-heading>LeadSpace title</dds-leadspace-heading>
      LeadSpace copy
</dds-leadspace>

Relevant information

Add the CDN link to the base page.
Add documentation on how to use it.
Add documentation on instructions for removal is not using it.

Dependency Dashboard

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

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.

chore(deps): update dependency node-sass to v7 [security]

Open

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

Detected dependencies

github-actions

.github/workflows/codeql-analysis.yml

actions/checkout v2

github/codeql-action v1

github/codeql-action v1

github/codeql-action v1

npm

package.json

@carbon/grid ^10.15.0

@carbon/ibmdotcom-web-components ^1.29.0

@carbon/type ^10.13.0

carbon-web-components ^1.7.1

lit-element ^2.4.0

lit-html ^1.3.0

@actions/core ^1.6.0

@babel/core ^7.16.0

@babel/preset-env ^7.16.0

@commitlint/cli ^16.0.0

@commitlint/config-conventional ^16.0.0

@webpack-cli/serve ^1.5.2

autoprefixer ^10.0.0

babel-loader ^8.2.3

browser-sync ^2.26.3

browser-sync-webpack-plugin ^2.2.2

copy-webpack-plugin ^6.4.1

css-loader ^1.0.1

dotenv ^14.0.0

eslint ^8.0.0

eslint-plugin-jsdoc ^37.0.0

eslint-webpack-plugin ^3.1.1

file-loader ^6.0.0

handlebars ^4.7.7

handlebars-loader ^1.7.0

html-webpack-plugin ^4.5.1

husky ^7.0.0

lint-staged ^12.0.0

mini-css-extract-plugin ^0.12.0

node-sass ^6.0.1

postcss ^8.3.6

postcss-loader 4.3.0

postcss-selector-parser ^6.0.6

prettier ^2.1.2

rtlcss ^2.6.0

sass-loader ^10.2.0

stylelint ^14.0.0

terser-webpack-plugin ^4.1.0

webpack ^4.46.0

webpack-cli ^4.8.0

webpack-dev-server ^4.1.0

packages/eslint-config-ibmdotcom/package.json

@babel/eslint-parser ^7.16.5

eslint-config-airbnb ^19.0.0

eslint-config-airbnb-base ^15.0.0

eslint-config-prettier ^8.0.0

eslint-plugin-import ^2.17.3

eslint-plugin-jsdoc ^37.0.0

eslint-plugin-prettier ^4.0.0

eslint-restricted-globals ^0.2.0

eslint ^8.0.0

packages/stylelint-config-ibmdotcom/package.json

stylelint-config-prettier ^9.0.0

stylelint-prettier ^2.0.0

stylelint-scss ^4.0.0

stylelint ^14.0.0

stylelint ^14.0.0

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

[Web Components template] Properly set the locale/language based on url

Detailed description

Describe in detail the issue you're having.

The current setup is fetching the language/locale the way that the test app is configured, which does not match how language pages are generated in the template.

Also, the altlang urls are not configured correctly either and need to be updated. This could possibly be set dynamically based on the available language files (see #4 )

Is this a feature request (new component, new icon), a bug, or a general
issue?

bug

Is this issue related to a specific component?

Base page

What did you expect to happen? What happened instead? What would you like to
see changed?

Properly set the DDO based on the template url pattern

Should also default to en-us if no languages are set.

Yarn start builds but throws in an error with "base_lang"

Detailed description

Not a blocker, but on Windows 10 Powershell, when executing $yarn start I get this error message:
`ERROR in Template execution failed: TypeError: Cannot read property 'base_lang' of undefined

ERROR in TypeError: Cannot read property 'base_lang' of undefined

handlebars.js:9 Object.eval
webpack-internal:///./config/handlebars.js:9:22
wrapHelper.js:15 Object.wrapper
[.]/[handlebars]/dist/cjs/handlebars/internal/wrapHelper.js:15:19
base.hbs:147 Object.main
webpack-internal:///./src/layouts/base.hbs:147:98
runtime.js:208 main
[.]/[handlebars]/dist/cjs/handlebars/runtime.js:208:32
runtime.js:212 ret
[.]/[handlebars]/dist/cjs/handlebars/runtime.js:212:12
runtime.js:334 Object.invokePartial
[.]/[handlebars]/dist/cjs/handlebars/runtime.js:334:12
runtime.js:84 Object.invokePartialWrapper [as invokePartial]
[.]/[handlebars]/dist/cjs/handlebars/runtime.js:84:39
app.hbs:185 Object.main
[.]/[html-webpack-plugin]/lib/loader.js!./src/pages/app/app.hbs:185:31
runtime.js:208 main
[.]/[handlebars]/dist/cjs/handlebars/runtime.js:208:32
runtime.js:212 ret
[.]/[handlebars]/dist/cjs/handlebars/runtime.js:212:12`

What browser are you working in?
Chromium: 92.0.4515.131 (Official Build) (64-bit)

Steps to reproduce the issue

Step one - run $yarn start on windows 10, using powershell

[Web Components Template] Enable base stylesheet and page specific assets directory that houses SCSS partial and images

The problem

While developing the landing page for Watson Orchestrate, we realized that there are additional styles that are needed in order for us to assemble a landing page that matches the design.
Here's an example of the added styles that we've implemented for the Watson Orchestrate Landing page (https://github.ibm.com/Putra-Bonaccorsi/web-components-for-ei/blob/master/src/assets/scss/app.scss).
This feature allows adopters to easily build and contribute out boilerplate templates that can be used within the ibm.com EI content ecosystem and makes this project the go-to place to adopt landing page designs (eg. Explainer, Solution, etc) for different products.

The solution

Enable a /assets directory within each template page (eg. /src/pages/page2/assets)
Adjust the current Webpack configs to watch, live-reload, and build the assets.

Additional information

Watson Orchestrate/Explainer Template Preview - https://pages.github.ibm.com/Putra-Bonaccorsi/web-components-for-ei/watson-orchestrate.html

cc: @jwitkowski79

carbon-design-system / carbon-for-ibm-dotcom-web-components-template Goto Github PK

carbon-for-ibm-dotcom-web-components-template's Issues

The problem

The solution

Additional information

The problem

The solution

Additional information

Summary

Relevant information

Edited/Blocked

Open

Detected dependencies

Detailed description

Yarn start builds but throws in an error with "base_lang"

Detailed description

Steps to reproduce the issue

The problem

The solution

Additional information

Recommend Projects

Recommend Topics

Recommend Org