This version of the webkit uses the JSON configuration syntax. PLease refer to the webkit repository for XML configurations, which we will be using for most sites - here.
A library of Vue components for displaying content from Discourse.
Sections are configured in /src/data/config.json
The default category id is set to 237, the Campfire category on Edgeryders.
Global classes are set in /src/assets/main.css
Styling uses Tailwind utilities, read more here on how utilities work.
- Hero
- Navigation
- People
- Topics
- Events
- Custom
- Form
- Edgeryders
- Terms
All components are configured in @/data/config.json with the following properties:
{
"type": "", // [string, required]
"title": "", // [string, optional]
"id": "", // [string, optional], enables scroll to and includes link in the nav component with the "title" as the link text
}
Displays a hero banner at the top of the site.
{
"type": "hero" // [string, required]
"background": {
"color": "" // [string, required], ex: '#00000' or 'blue'
},
"text": {
"content": "", // [string, optional], hero text
"align": "", // [string, optional], aligns text "left" or "right" of main image
"buttons": // [array, optional], displays action buttons included below main text
[
{
"text": "", // [string, required], button text
"url": "", // [string, optional], button url
"background": "" // [string, optional], ex: '#00000' or 'blue'
}
]
},
"image": {
"url": "", // [string, require], url of image src
"width": 450 // [integer, optional], sets max_width of image
}
}
Displays text alongside an optional image or video
{
"type": "custom" // [string, required]
"image": {
"url": "", // [string, required], url of image src
"width": 420 // [integer, optional], sets max_width of image
},
"video": {
"src": "", // [string, required], url of the video
"poster": "", // [string, optional], url of image for video poster
},
"text": {
"content": "", // [string, optional], main text content
"position": "left", // [string, optional], positions text "left" or "right" in relation to image or video
"buttons": [{
"text": "", // [string, required], button text
"url": "", // [string, required], button url
"background": "" [string, optional], background color of button in CSS, ex: '#00000' or 'blue'
}]
}
}
Displays topics either as a slideshow or scrollable row of cards
{
"type": "topics", // [string, required]
"view": "", // [string, required], "featured" displays topics as slideshow, "cards" displays topics in row of cards
"tag": "", // [string, required], the tag of topics to display from the platform
"sort_by": {
"property": "", // [string, required], the property ["title", "created_at"] to sort topics by
"order": "ascending" // [string, required], the order ["ascending", "descending"] to sort topics by
},
"display": ["title", "author", "date"] // [array, optional], determines whether to display author, date and title of topic
"image": {
"url": "" // [string, optional]
},
"video": {
"src": "", // [string, optional], src url of video
"poster": "" // [string, optional], url of image for video poster
},
"text": {
"content": "", // [string, optional]
"position": ""// [string, optional], position content "left" or "right" of video or image
}
}
Displays topics in a calendar view. Topics from discourse must include an event property.
{
"tag": "", // [string, required] tag of topics on platform to be included as events
"types": {
"event_type": "", [string, optional], color of event_type ex: '#00000' or 'blue'
}
}
Displays Discourse users from a specific category
{
"type": "users", // required
"category": "campfire", // [string, required] category slug from which to display users from the platform
"only_bios": true // [boolean, optional] display only users with a bio on the platform
}
Displays topics in the format of the 'Users' component for people with no Discourse account
{
"tag": "" // [string, required] tag of topics on platform to be included as a bio
}
Displays a slider of partners with logos and dates
{
"type": "partners",
"display": {
"slides": 3 // [integer, required] number of slides to display in rotation
},
"content": [
{
"title": "", // [string] name of publication/partner
"date": "", // [string] date of quote
"url": "", // [string] url of partner/publication
"logo": "", // [string] image to be displayed in the slide
"excerpt": "" // [string] text to be displayed in the slide
}
]
}
Displays the Edgeryders about section
{
"type": "edgeryders", // [string, required]
"title": "" // [string, optional]
}
Displays a form for signing up and/or posting to the platform
{
"type": "form", // [string, required]
"content": "", // [string, optional]
"settings": {
"createTopic": false // [boolean, required] determines if a topic is posted to platform on signup
},
"slideDefaults": {
"title": "Q{{index}}", // [string, required]
"backText": "", // [string, required] back button text
"nextText": "", // [string, required] next button text
"backTitle": "", // [string, required] title to go back
"nextTitle": "", // [string, required] title to continue
"fields": [
{
"name": "message", // [string, required] input field to enter text
"type": "textarea", // [string, required] input type
"placeholder": "write here...", // [string, optional] input placeholder text
"required": true, // [boolean, required] determines if input text is required to continue
"autofocus": true, // [boolean, required] determines if input is focused on by default
"error": "Please write a response!" // [string, required] determines error text
}
],
"diagram": {},
"settings": { "omitFields": true }
},
"slides": [
{
"index": 1, // [integer, required] slide index number determines order
"title": "", // [string, required]
"nextTitle": "SIGN UP", // [string, required] title of next slide
"body": "", // [string, optional] body text of slide
"fields": [{
"name": "", // [string, required] field name
"type": "text", // [string, required] field type
"placeholder": "", // [string, optional] input placeholder text
"half": true, // [boolean, optional]
"required": true, // [boolean, required]
"autofocus": false, // [boolean, required]
"error": "" // [string, optional]
},
{
"nextText": "SEND", // [string, optional] final submit button
"submit": true, // [boolean, required] submits the form
"settings": {
"omitBody": true
}
],
"errorMessages": {
"networkError": "", [string, optional] // error message if network is down
"username": "", // [string, optional] error message if username is already taken
"email": "", // [string, optional] error message if email is already taken
"default": "" // [string, optional] defauolt error message
}
}
Displays Edgeryders terms and conditions.
{
"type": "terms" // [string, required]
}
npm install
npm run serve
npm run build
The form component is ported directly from the edgeryders form builder, and most configuration noted on that repository will work within the data/config.json here.
(NB that you'll need a .env.<environment> file with the values noted under Installation in order for the form to submit successfully.)