Skip to content

Internals: Components & Theme

Edwin Shepherd edited this page Sep 1, 2019 · 1 revision

Components (.vuepress/components)

Layouts

Any of the files ending in Layout.vue are templates for how to render certain pages on the website. They may also contain JavaScript to allow dynamic content to be displayed. These templates are rendered by a server (in this case Netlify) and as such, you cannot use browser APIs such as window and document. Read more about restrictions on server side rendered Vue here.

The Blog (BlogLayout.vue & PostLayout.vue)

The BlogLayout.vue is responsible for rendering the list of posts in the correct chronological order. This is used by the README.md file in the blog folder. README.md files render the index.html file so deleting this would mean you wouldn't be able to access https://hr-robocon.org/blog.

PostLayout.vue renders individual posts. This is basically the default layout but with the publish date in the header.

The Forum (ForumLayout.vue & IconButton.vue)

These files are used by the forum.

Embedding Components (Embed.vue & YouTube.vue)

There are also a few components you can use anywhere in the site, including from within the CMS for embedding content from other websites. Details on how to use them can be found here.

Theme (.vuepress/theme)

These are the files for rendering all parts of the website. They contain global styles for typography, containers, pages, sidebars and basically anything else you see. This is basically the default VuePress theme but with a custom home page design that's more suited to a Robotics competition than a purely technical documentation site.

The accent colour of this theme is overridden in .vuepress/override.styl to a nice blue.

The sidebars for the documentation section are created by the .vuepress/config.js file. This file groups docs with the same category together and puts docs with a lower Position value towards the top of the group.