Set up the Vuepress website system

[monikappv]

Implement everything we need technically in the new vuepress-based setup ...

Probably want at least one example page for each major section working and crudely laid out ...

Acceptance

Booted website with at least one example page for each major section:

• Basic vuepress based site
• built automatically with github actions
• Some core pages skeletonned
• How to do theming + templating incl multiple pages off one layout (based on a template)
• It's communicating to Google Analytics

Pages

• Home page
• News / Blog
• Team
• Jobs to be Done
• Products
• About (VueJS does not have about page - do we need one ...?)
• Documentation (later when clear what we need)

Tasks

• Install vuepress and have it run
  • Choose whether we build from root or a subdirectory like site From the root
  • Stub standard vuepress front page
• Implement github actions to build
• Add README.md CONTRIBUTING.md explaining how to contribute
• Install vuepress plugins we may want e.g. footnotes, mermaid (copy from datopian handbook)
• stub content for each page with the structure of you will want
  • job to be done page /jobs/pull-data/ @Irio
  • product page e.g. /products/data-packages/ @Irio
  • about @monika
  • blog (have this from migration content)
• Research how to do theming and have "layout" pages i.e. a whole section using the same template and for those bespoke templates to still have core theme elements See this extensive summary https://hackmd.io/@rufuspollock/BJ318ubfU
  • Try it out
  • Work out how we do template inheritance / core
• Blog experiment - may require some research on plugin. See below for tasks.
• Team page Done. See http://next.frictionlessdata.io/team/
• Check we can embed html in markdown pages as we need some HTML pages Yes we can - see below
• Configure Google Analytics with the VuePress plugin

---

Theming

Which pages need a different layout than the default one?

• Default page: like a doc page / like vuepress default
• Home page
• Blog listing
• Product / Job pages

Do we want to use vuepress' default layout for all pages (a little bit customized) except for the home page?

Is it more that we have reusable components / snippets of some kind? e.g. hero section etc etc.

Let's not try and work out too much in advance => KISS

Tasks

• Boot the theme
  • Do we extend default theme or roll our own? KISS: start with it and see where it breaks ...
    • Default theme is nice esp for docs ...
    • But is there a way to extend? => Yes, via inheritance
    • And does it do enough? Maybe not but we can extend
• Create a layout file
• Customize home
• Apply it to a page http://next.frictionlessdata.io/products/data-package/

Learnings

• You can inherit from the base theme
• But you will need to refactor Layout.vue or override probably ultimately ...
  • Refactor into GlobalLayout? No.

---

Blog experiment

Outcome

• Individual blog page
• Blog index page
• Notes on how to do it (not really needed, docs are actually quite clear)

Tasks

• Investigate and choose approach Use plugin plus our own templates based on the examples
  • Blog generator: https://github.com/bencodezen/vuepress-blog-boilerplate
  • Official blog plugin: https://github.com/vuepressjs/vuepress-plugin-blog
  • Official Blog Theme: https://vuepress-theme-blog.ulivz.com/
• Install plugin https://github.com/vuepressjs/vuepress-plugin-blog
  • Basic config to you our directory structure It's working http://localhost:8080/website-v2/2018/03/07/well-packaged-datasets/
• Create blog index page Done copied from https://github.com/ulivz/70-lines-of-vuepress-blog-theme/tree/master/layouts
• Customize blog page Ditto. Showed the title!

Team Page

Goal a page looking like https://vuejs.org/v2/guide/team.html (but w/o styling atm)

Source is https://raw.githubusercontent.com/vuejs/vuejs.org/master/src/v2/guide/team.md

• Research how to do "data" directories Yes, sort of.
  • Data files and dynamic page generation support Data files and dynamic page generation support vuejs/vuepress#452 => is closed and says there is dynamic page generation. However, point in comments that you can use frontmatter is not perfect e.g. what if i want to load csv
  • Example: https://vuepress-examples.netlify.com/demos/local/
• Stub a list of team members
• Render them in page (custom layout?)

[rufuspollock]

FIXED. All done. Result is at https://github.com/frictionlessdata/website-v2/tree/bf58c13860dc0b84dddc2349d86fe42a8688f29f - see especially the .vuepress and its theme directory https://github.com/frictionlessdata/website-v2/tree/bf58c13860dc0b84dddc2349d86fe42a8688f29f/site/.vuepress