resume-timeline webcomponents

This repository and NPM dist provides the infrastructure for developing and building webcomponents for building vertical timelines suitable for a resume. Most development work will take place within the src folder which contains an assets folder and a components folder. Any files under the assets folder will be copied into the final build distributions and will be made available to the dev server as well.

There are two webcomponents. resume-timeline is the main container and is composed of time sequenced blocks, resume-timeline-block. The block-title, block-subtitle and block-date may be set as attributes on the resume-timeline-block element. The resume-timeline-block has three slots available. content is for the main content of the block and currently should be enclosed with p tags. tags is currently unimplemented. read-more supports an anchor tag (that currently must cd-timeline__read-more in the class attribute). resume-timeline-snippets accepts li elements and will be rendered inline, between the content and read-more sections. See index.html for current examples of use.

Getting Started - Development

0. Clone the repository for this package.
1. Run npm install.
3. Run 'npm start' to run the test server.

Dockerization

Build the docker container:

docker build -t ashawnbandy/resume-timeline .

Run the dev server:

docker run -d ashawnbandy/resume-timeline run start

Publish to npm and update git origin:

docker run -v  ~/.ssh:/home/devops/.ssh -v ~/.npmrc:/home/devops/.npmrc ashawnbandy/resume-timeline run publish-to-npm

Note that mapping .ssh and .npmrc to the running container is neccessary for connecting to npm and the origin git repo. And obiously, these credentials and keys have to be registered with npm and the origin repo.

Publish the docker container:

docker push ashawnbandy/resume-timeline

References

• Stencil.js, a webcomponent framework
• Heavily inspired by CodyHouse/vertical-timeline