rhd-frontend v2.0.0
RHD Front-end Code and Documentation
Installation, Scripts, and Contributing
- Clone the repository
- Ask for the Font Awesome license text for the
.npmrc
file - Ask for the alternate registry information for the
.npmrc
file, if building the repo inside of Red Hat.- If running the alternate registry and Font Awesome, you will need to set npm
config set strict-ssl
tofalse
(npm config set strict-ssl false
). Without that, Font Awesome will try to use the alternate registry for installation, which will not work.`
- If running the alternate registry and Font Awesome, you will need to set npm
- Run
npm install
to install npm-tracked dependencies locally - Install Go
- Make Go-built executables accessible
- Add the go
/bin
to PATH (find by runninggo env
and it would be$GOPATH/bin
)- This is a necessary step to successfully execute
publish_gh_pages.sh
orreview_gh_pages.sh
- This is a necessary step to successfully execute
- Alternatively you can just run
hugo
commands with~/go/bin/hugo
- Add the go
- Run
go get github.com/gohugoio/hugo
(gets and builds the latest Hugo release) - Mac users Run
cd ~/go/src/github.com/gohugoio/hugo && go install --tags extended
to ensure you have the extended release - Run
hugo version
or~/go/bin/hugo version
(currently v0.56.3; also look for/extended
as that is necessary for Sass pipelines) - If missing dependencies, either
go get ...
them or install for your OS. Have seen the following needed:go get github.com/hashicorp/go-immutable-radix
go get github.com/wellington/go-libsass
- gcc / g++
Mac users: Increase max file limit so that you can run the Hugo server
Create a
limit.maxfiles.plist
file<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>Label</key> <string>limit.maxfiles</string> <key>ProgramArguments</key> <array> <string>launchctl</string> <string>limit</string> <string>maxfiles</string> <string>262144</string> <string>524288</string> </array> <key>RunAtLoad</key> <true/> <key>ServiceIPC</key> <false/> </dict> </plist>
Run
chown root:wheel /Library/LaunchDaemons/limit.maxfiles.plist
to properly set the owner- Run
chmod 0644 /Library/LaunchDaemons/limit.maxfiles.plist
to properly set the file permissions - Run
launchctl load -w /Library/LaunchDaemons/limit.maxfiles.plist
to load thelimit.maxfiles.plist
to the LaunchAgent - Restart you Mac so that the LaunchAgent can run and increase you max file limit
Run the Hugo server
- Run default dev server
hugo serve
(pulls fromconfig/development/config.toml)
) - Run bound dev server
hugo serve --bind=0.0.0.0 --port=8080
(for VMs or other sandbox environments)
- Run default dev server
- Enjoy live reload for Sass and Templates
- JS will live reload after running
npm run scripts
to build production script files
- NPM Scripts (
npm start
,npm test
,npm run {name}
)start
- builds scripts and keeps watching for changestest
- runs Karma test runner using Jasminebuild
- builds scripts but does not watch for changesscripts
- builds scripts and keeps watching for changes
Adding and Updating Components
- Create a new component page
- Run
hugo new components/yourcomponent.md
- Edit the new component file in
src/docs/content/components
- Update the
title
,description
, andscripts
- Add markdown content to appear above the render
- Run
Create the data structure for the component
- Add a data folder for your component in
/src/data/components/yourcomponent
Add a
variant
file in the component's data folderTOML
[[variant]] id = "default" name = "Default Variant" order = 1 [[variant]] id = "default2" name = "Default Variant 2" order = 2
JSON
{ "variant": [ { "id": "variant1", "name": "Variation 1", "order": 1 }, { "id": "variant2", "name": "Variation 2", "order": 2 } ] }
- YAML
YAML EXAMPLE
Add a
context
folder in your component's data folder for each different context you want to express for your component- Add a
details
file (JSON, YAML, or TOML) to the context folder- TOML
name = "DEFAULT CONTEXT"
- JSON
{ "name": "New Component Name" }
- TOML
- Add a
{{variantname}}
file (JSON, YAML, or TOML) to the context folder with the context's template(s) for that variant- TOML
templates = [""" <span>Variant Template 1</span> """,""" <span>Variant Template 2</span> """]
- JSON
{ "templates": [ "<span>Variant Template 1</span>", "<span>Variant Template 2</span>" ] }
- TOML
- Add a data folder for your component in
View your new component page
/components/newcomponent
Using Clamp styles
to 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".
only to be used on heading "H" tags and paragraph "P" tags.
Popular Patterns
Credits
- NodeJS
- Hugo
- JSDoc
- SASSDoc
- TypeScript
- ESLint
- Karma
- Jasmine
- Semantic-Release
- UglifyJS
- FontAwesome