Elements

Blocks are the content sections of a Webkit site. They are automatically imported into App.vue by Webpack and displayed in the order specified in the configuration. They correspond to specific components that are located in ./src/components/blocks.

Modifying Block Components

It is recommended to avoid editing these components directly, unless you are working on your own development fork. There are many configuration and styling options available for each block, without the need to modify the components themselves.

Header

The Header Block includes two child components:

• The Menu View displays a responsive menu of all Sections defined with an id property or an array of custom links.
• The Hero View displays the introductory content of a Webkit site.

In the default template there are three Hero Views to choose from, these are specified in the type property.

The example below displays a Header with Menu and Standard Hero views.

{
  ...
  "sections": [ 
    {
      "type": "header", // loads .src/components/sections/header.vue
      "views": {
	      "navigation": {  // loads .src/components/views/navigation.vue
	      	"links": "_id",
	      	"style": {
	      		"position": ["fixed"],
	      		"height": ["2rem"]
	      	}
	      },
	      "hero": {
	      	"type": "Standard", // loads .src/components/views/hero/standard.vue
	       	"title": "My Hero Title", 
	       	"text": "Introductory <b>text</b>",
	       	"image": "/hero_image.jpg",
	       	"style": {
	       		"align": ["center"],
	       		"width": ["90%", "70%"]
	       	}
	      }
	  }
    }
  ]
}

---
sections:
- type: header
  views:
    navigation:
      links: _id
      style:
        position: [fixed]
        height: [2rem]
    hero:
      type: Standard
      title: My Hero Title
      text: Introductory <b>text</b>
      image: "/hero_image.jpg"
      style:
        align: [center]
        width: [90%, 70%]

My Hero Title

This is my hero text. I can use html formatting for text - and even inline css.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Action Button #1

Custom

Custom Blocks are containers for custom text, html, images and videos. They can also be configured to display a topic based on the topic_id of a Discourse post.

The configuration parameters for Blocks are as follows:

property	default	description
title	""	string
topic	{id: null, showImage: false}	number value of topicId boolean to display featured image of topic
text	{ content: [''], align: 'left'}	array of text strings to display string value (left, right, center)
image	{ url: '', size: 'auto'}	object with url and size string
video	{ url: '', size: 'auto'}	object with url and size string
style	{}	object with style parameters (see Styling)

# install as a local dependency
yarn add -D vuepress # OR npm install -D vuepress

# create a docs directory
mkdir docs
# create a markdown file
echo '# Hello VuePress' > docs/README.md

WARNING

It is currently recommended to use Yarn instead of npm when installing VuePress into an existing project that has webpack 3.x as a dependency. Npm fails to generate the correct dependency tree in this case.

Then, add some scripts to package.json:

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

You can now start writing with:

yarn docs:dev # OR npm run docs:dev

To generate static assets, run:

yarn docs:build # Or npm run docs:build

By default the built files will be in .vuepress/dist, which can be configured via the dest field in .vuepress/config.js. The built files can be deployed to any static file server. See Deployment Guide for guides on deploying to popular services.