BBC's guide to development
  • General

    • About
    • Tools
    • Git(hub)
    • Showpad
    • Hosting
    • Maintenance
    • Security
    • Go live checklist
  • Front-end development

    • Bundlers
    • CSS/SCSS
    • Javascript
    • Vue
    • PHP
    • Mails
    • Dev Faq
  • Functions
  • Mixins
  • General

    • OOP Structure
  • Component Classes

    • Accordion
    • App
    • Component
    • HighwayApp
    • Popup
    • PNG Sequencer
    • Tab
  • Manager Classes

    • BountListenerMgr
    • Cache
    • Configuration
    • InViewStateMgr
    • Instance Manager
    • Event dispatcher
  • Factories

    • SwiperFactory
  • PDF

    • AssetLoader
    • BasePdfDoc
    • TemplatePdfDoc
    • CustomPdfDoc
  • Utility functions

    • canvas
    • Connection Status
    • css
    • dev
    • placeholder
    • dom
    • fetch
    • json
    • object
    • scroll
    • scrollbar
    • spreadsheets
    • string
    • url
  • General

    • ComponentMgr
    • ThreeJsViewer
  • Components

    • ComponentMgr
    • GltfModel
    • Snappable
    • Socket
    • ThreeJsViewer
    • ThreeJsViewerCamera
  • Loaders

    • ConfigurationSerializer
    • GltfBlockParser
  • Utils

    • CanvasInputAdapter
    • CollisionManager
    • SocketGridExpander
    • blender
    • headless
  • General

    • Troubleshooting
    • Legacy
  • Components

    • AssetBar
    • ConfigGenerator
    • ShowpadApp
  • Managers

    • Assets
    • AppsDb
    • Config
  • Utils

    • Connection Status
    • general
    • showpad-interactive
    • showpad-upload
  • Components

    • Accordion
    • BackButton
    • Breadcrumb
    • ByltButton
    • Hamburger
    • Icon
    • Logo
    • Loader
    • Modal
    • Popup
    • Prompt
    • ProgressBar
    • TextLoader
  • Composables

    • useDebugMode
    • useConnectionStatus
  • Utils

    • dom
    • props
  • General

    • General
    • Tracking
  • Components

    • Accordion
    • ActionButton
    • AssetItem
    • AssetList
    • BackButton
    • ConfigGenButton
    • Logo
    • Media
    • Modal
    • Popup
    • Prompt
    • SPButton
    • SPRouterView
    • SPTrackedRouterLink
    • TextLoader
    • View
  • Composables

    • useConnectionStatus
  • Stores

    • useAppsDbStore
    • useBreadcrumbStore
    • useShowpadAPIStore
    • useShowpadSDKStore
    • useSpConfigStore
    • useSpStore
    • useSpTrackingStore
  • The New Kit

    • General
    • Installation & Usage
    • ACF Blocks
    • PHPCS
    • Functions
    • Vite
    • WP Config
    • Staging Deployment
  • Best Practices

    • Page Structure
    • Fonts/Typography
  • Todo
GitHub
  • General

    • About
    • Tools
    • Git(hub)
    • Showpad
    • Hosting
    • Maintenance
    • Security
    • Go live checklist
  • Front-end development

    • Bundlers
    • CSS/SCSS
    • Javascript
    • Vue
    • PHP
    • Mails
    • Dev Faq
  • Functions
  • Mixins
  • General

    • OOP Structure
  • Component Classes

    • Accordion
    • App
    • Component
    • HighwayApp
    • Popup
    • PNG Sequencer
    • Tab
  • Manager Classes

    • BountListenerMgr
    • Cache
    • Configuration
    • InViewStateMgr
    • Instance Manager
    • Event dispatcher
  • Factories

    • SwiperFactory
  • PDF

    • AssetLoader
    • BasePdfDoc
    • TemplatePdfDoc
    • CustomPdfDoc
  • Utility functions

    • canvas
    • Connection Status
    • css
    • dev
    • placeholder
    • dom
    • fetch
    • json
    • object
    • scroll
    • scrollbar
    • spreadsheets
    • string
    • url
  • General

    • ComponentMgr
    • ThreeJsViewer
  • Components

    • ComponentMgr
    • GltfModel
    • Snappable
    • Socket
    • ThreeJsViewer
    • ThreeJsViewerCamera
  • Loaders

    • ConfigurationSerializer
    • GltfBlockParser
  • Utils

    • CanvasInputAdapter
    • CollisionManager
    • SocketGridExpander
    • blender
    • headless
  • General

    • Troubleshooting
    • Legacy
  • Components

    • AssetBar
    • ConfigGenerator
    • ShowpadApp
  • Managers

    • Assets
    • AppsDb
    • Config
  • Utils

    • Connection Status
    • general
    • showpad-interactive
    • showpad-upload
  • Components

    • Accordion
    • BackButton
    • Breadcrumb
    • ByltButton
    • Hamburger
    • Icon
    • Logo
    • Loader
    • Modal
    • Popup
    • Prompt
    • ProgressBar
    • TextLoader
  • Composables

    • useDebugMode
    • useConnectionStatus
  • Utils

    • dom
    • props
  • General

    • General
    • Tracking
  • Components

    • Accordion
    • ActionButton
    • AssetItem
    • AssetList
    • BackButton
    • ConfigGenButton
    • Logo
    • Media
    • Modal
    • Popup
    • Prompt
    • SPButton
    • SPRouterView
    • SPTrackedRouterLink
    • TextLoader
    • View
  • Composables

    • useConnectionStatus
  • Stores

    • useAppsDbStore
    • useBreadcrumbStore
    • useShowpadAPIStore
    • useShowpadSDKStore
    • useSpConfigStore
    • useSpStore
    • useSpTrackingStore
  • The New Kit

    • General
    • Installation & Usage
    • ACF Blocks
    • PHPCS
    • Functions
    • Vite
    • WP Config
    • Staging Deployment
  • Best Practices

    • Page Structure
    • Fonts/Typography
  • Todo
GitHub
  • About

About

Information tends to be shared across projects and coworkers causing it to get extremely fragmented and feeding one of the biggest frustration of developers even more. Kits and boilerplates in repositories are already a great step in the right direction. But that is just part of the solution around centralising all the team's knowledge

Guidelines

Some guidelines are necessary to keep everything organised and maintainable.

  • Always review new content with the rest of the team. Information needs to be clear and understandable. Call up a few other developers to see if everything seems ok to be pushed to the repository.
  • Make sure the repository's version and the web version are in sync. The moment a version is accepted on GIT, it should be built to the host.
  • Keep folder structure and navigation structure synced.

Warning

This is still very much in a todo-phase. These are quick guidelines that are interesting to apply. We will fine-tune this in future developer meetings.

VuePress 2

The tool we're using to gather everything in one place is VuePress 2. The bundler reads out MarkDown with extra functionalities files and turns them into static html pages with extra features like automatic content table generation, clean front-end ui, code examples, ...

Why VuePress 2?

The web contains many tools to bundle up information for development teams. Great examples are docsify and Docusaurus. We chose VuePress 2 because it is written in Vue.js. Since we decided to use Vue as a framework to work with when it comes to developing apps for websites and Showpad, it seemed to be a great match. Our experience with Vue can come in handy to add extra functionalities to this tool as we deemed necessary.

Markdown Enhance

Our Vuepress build comes with the plugin-md-enhance plugin to add even more functionalities to the markdown files. Currently activated plugins are:

  • Card
  • Code-Tabs
  • Custom Container
  • Footnote
  • Include files
  • Mermaid
  • Playground
  • Vue Playground
  • Tabs
  • Task list

Other plugins may be activated in the future, we just have to make sure we keep everything organized.

Guide

Some quick information about the structure of this wiki project.

Add Page

As mentioned above, make sure the directory tree mirrors the main navigation! Every MD file is a page inside VuePress. Just add a new MD file to the /docs and start writing.

Main Navigation

The navigation can be found in the header at the top of every page. It can be configured in vuepress.config.mjs that can be found in the root of the project.

Edit the navbar array of theme.navbar to manage the links of this menu.

Caution

Make sure to mirror the directory stricture in the navigation structure!

Markdown Enhance plugin activation

All plugins are deactivated by default. Add a boolean of the same name as the plugin that needs to be activated in vuepress.config.mjs under plugins in the mdEnhancePlugin function.

mdEnhancePlugin({
    card: true,
    container: true,
    footnote: true,
    include: true,
    mermaid: true,
    playground: true,
    tabs: true,
    tasklist: true,
    vuePlayground: true,
}),
Edit this page
Last Updated: 4/27/26, 12:56 PM
Contributors: Nicolas Jaenen