{"id":28420649,"url":"https://github.com/redhat-developer/rhd-frontend","last_synced_at":"2025-06-26T17:31:40.951Z","repository":{"id":54982390,"uuid":"92513072","full_name":"redhat-developer/rhd-frontend","owner":"redhat-developer","description":"npm-installable package for RHDP website assets","archived":false,"fork":false,"pushed_at":"2021-01-18T03:25:48.000Z","size":49414,"stargazers_count":5,"open_issues_count":65,"forks_count":15,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-06-05T05:29:09.772Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://redhat-developer.github.io/rhd-frontend/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/redhat-developer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-26T13:26:25.000Z","updated_at":"2023-11-07T09:44:26.000Z","dependencies_parsed_at":"2022-08-14T08:10:13.947Z","dependency_job_id":null,"html_url":"https://github.com/redhat-developer/rhd-frontend","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/redhat-developer/rhd-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redhat-developer%2Frhd-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redhat-developer%2Frhd-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redhat-developer%2Frhd-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redhat-developer%2Frhd-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/redhat-developer","download_url":"https://codeload.github.com/redhat-developer/rhd-frontend/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redhat-developer%2Frhd-frontend/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262113263,"owners_count":23260990,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-05T03:49:00.232Z","updated_at":"2025-06-26T17:31:40.938Z","avatar_url":"https://github.com/redhat-developer.png","language":"CSS","readme":"# RHD Front-end Code and Documentation\n\n[Live Documentation Site](https://redhat-developer.github.io/rhd-frontend/)\n\n## Installation, Scripts, and Contributing\n\n- **Clone** the repository\n- **Ask** for the Font Awesome license text for the `.npmrc` file\n- **Ask** for the alternate registry information for the `.npmrc` file, if building the repo inside of Red Hat.\n    - If running the alternate registry and Font Awesome, you will need to set npm `config set strict-ssl`  to `false` (`npm config set strict-ssl false`). Without that, Font Awesome will try to use the alternate registry for installation, which will not work.`\n- **Run** ```npm install``` to install npm-tracked dependencies locally\n- **Install** [Go](https://golang.org)\n- Make Go-built executables accessible\n    - **Add** the go `/bin` to PATH (find by running `go env` and it would be `$GOPATH/bin`)\n        - This is a **necessary step** to successfully execute `publish_gh_pages.sh` or `review_gh_pages.sh`\n    - **_Alternatively_** you can just run `hugo` commands with `~/go/bin/hugo`\n- **Run** `go get github.com/gohugoio/hugo` (gets and builds the latest Hugo release)\n- Mac users **Run** `cd ~/go/src/github.com/gohugoio/hugo \u0026\u0026 go install --tags extended` to ensure you have the extended release\n- **Run** `hugo version` or `~/go/bin/hugo version` (_currently v0.56.3_; also look for `/extended` as that is necessary for Sass pipelines)\n- If missing dependencies, either `go get ...` them or install for your OS. Have seen the following needed:\n    - `go get github.com/hashicorp/go-immutable-radix`\n    - `go get github.com/wellington/go-libsass`\n    - gcc / g++\n- Mac users: Increase max file limit so that you can run the Hugo server\n    - **Create** a `limit.maxfiles.plist` file\n\n        ```xml\n          \u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e\n          \u003c!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\"\n            \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\"\u003e\n            \u003cplist version=\"1.0\"\u003e\n              \u003cdict\u003e\n                \u003ckey\u003eLabel\u003c/key\u003e\n                \u003cstring\u003elimit.maxfiles\u003c/string\u003e\n                \u003ckey\u003eProgramArguments\u003c/key\u003e\n                \u003carray\u003e\n                  \u003cstring\u003elaunchctl\u003c/string\u003e\n                  \u003cstring\u003elimit\u003c/string\u003e\n                  \u003cstring\u003emaxfiles\u003c/string\u003e\n                  \u003cstring\u003e262144\u003c/string\u003e\n                  \u003cstring\u003e524288\u003c/string\u003e\n                \u003c/array\u003e\n                \u003ckey\u003eRunAtLoad\u003c/key\u003e\n                \u003ctrue/\u003e\n                \u003ckey\u003eServiceIPC\u003c/key\u003e\n                \u003cfalse/\u003e\n              \u003c/dict\u003e\n            \u003c/plist\u003e\n        ```\n\n    - **Run** `chown root:wheel /Library/LaunchDaemons/limit.maxfiles.plist` to properly set the owner\n    - **Run** `chmod 0644 /Library/LaunchDaemons/limit.maxfiles.plist` to properly set the file permissions\n    - **Run** `launchctl load -w /Library/LaunchDaemons/limit.maxfiles.plist` to load the `limit.maxfiles.plist` to the LaunchAgent\n    - **Restart** you Mac so that the LaunchAgent can run and increase you max file limit\n- Run the Hugo server\n    - **Run** default dev server `hugo serve` (pulls from `config/development/config.toml)`)\n    - **Run** bound dev server `hugo serve --bind=0.0.0.0 --port=8080` (for VMs or other sandbox environments)\n- **Enjoy** live reload for Sass and Templates\n- JS will live reload after running `npm run scripts` to build production script files\n\n* NPM Scripts (```npm start```, ```npm test```, ```npm run {name}```)\n    * ```start``` - builds scripts and keeps watching for changes\n    * ```test``` - runs Karma test runner using Jasmine\n    * ```build``` - builds scripts but does not watch for changes\n    * ```scripts``` - builds scripts and keeps watching for changes\n\n## Adding and Updating Components\n\n* Create a new component page\n    * **Run** `hugo new components/yourcomponent.md`\n    * **Edit** the new component file in `src/docs/content/components`\n    * **Update** the `title`, `description`, and `scripts`\n    * **Add** markdown content to appear above the render\n* Create the data structure for the component\n    * **Add** a data folder for your component in `/src/data/components/yourcomponent`\n    * **Add** a `variant` file in the component's data folder\n        * TOML\n        ```toml\n        [[variant]]\n        id = \"default\"\n        name = \"Default Variant\"\n        order = 1\n\n        [[variant]]\n        id = \"default2\"\n        name = \"Default Variant 2\"\n        order = 2\n        ```\n        * JSON\n        ```js\n        {\n            \"variant\": [\n                {\n                    \"id\": \"variant1\",\n                    \"name\": \"Variation 1\",\n                    \"order\": 1\n                },\n                {\n                    \"id\": \"variant2\",\n                    \"name\": \"Variation 2\",\n                    \"order\": 2\n                }\n            ]\n        }\n        ```\n        * YAML\n        ```\n        YAML EXAMPLE\n        ```\n    * **Add** a `context` folder in your component's data folder for each different context you want to express for your component\n    * **Add** a `details` file (JSON, YAML, or TOML) to the context folder\n        * TOML\n        ```toml\n        name = \"DEFAULT CONTEXT\"\n        ```\n        * JSON\n        ```js\n        {\n            \"name\": \"New Component Name\"\n        }\n        ```\n    * **Add** a `{{variantname}}` file (JSON, YAML, or TOML) to the context folder with the context's template(s) for that variant\n        * TOML\n        ```toml\n        templates = [\"\"\"\n        \u003cspan\u003eVariant Template 1\u003c/span\u003e\n        \"\"\",\"\"\"\n        \u003cspan\u003eVariant Template 2\u003c/span\u003e\n        \"\"\"]\n        ```\n        * JSON\n        ```js\n        {\n            \"templates\": [\n                \"\u003cspan\u003eVariant Template 1\u003c/span\u003e\",\n                \"\u003cspan\u003eVariant Template 2\u003c/span\u003e\"\n            ]\n        }\n        ```\n* **View** your new component page `/components/newcomponent`\n\n## Using Clamp styles\n\nto apply a cross browser line clamp to a item apply the class \"line-clamp-*\" where the \"*\" is the numebr of lines you want to clamp e.g. \"line-clamp-2\" will only display 2 lines before adding ... to the end of the text valid numebrs are intergers \"1 to 10\".\n\nonly to be used on heading \"H\" tags and paragraph \"P\" tags.\n\n\n## Popular Patterns\n\n[Typography](https://redhat-developer.github.io/rhd-frontend/patterns/typography)\n\n[Buttons and CTAs](https://redhat-developer.github.io/rhd-frontend/patterns/btn-cta/)\n\n[Alerts and Notifications](https://redhat-developer.github.io/rhd-frontend/patterns/content/notifications)\n\n## Credits\n\n* NodeJS\n* [Hugo](https://gohugo.io/)\n* JSDoc\n* SASSDoc\n* TypeScript\n* ESLint\n* Karma\n* Jasmine\n* Semantic-Release\n* UglifyJS\n* FontAwesome\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredhat-developer%2Frhd-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredhat-developer%2Frhd-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredhat-developer%2Frhd-frontend/lists"}