A note on the philosophy of the webkit and its documentation

Thanks @owen the Resilient Livelihoods site looks great!

I have reported a legitimate bug and a request for improvement – are you still using that repo? Also I have several questions and glitches, but I will wait for the documentation because it is probably just me not being familiar with the various parameters.

1 Like

Hello again @owen, any news on the documentation? I would really like to publish the SF-ECON Lab website. Which works, but does not look quite professional yet.

Meanwhile, questions.

  1. Can we have an explanation of the template and theme parameter and a list of the accepted values? Example:
    <Blog tag="sf-econ-blog" template="standard" items="4" columns="2" display="author, date">

    But also:

site:
  [...]
  template: campaign
  theme: research
  lang: en-US
  1. Why does the following not produce a grey background?
<Content id="blog" style="background: rgba(255,255,255,0.3); color: black;">

### Blog

<Blog tag="sf-econ-blog" template="standard" items="4" columns="2" display="author, date"  style="background: rgba(255,255,255,0.3); color: black;" />
  1. The blog view currently orders topics by most recent post. Is there a parameter to control this? For example, by topic creation?

Hi @alberto - the XML now accepts inline comments, and I have updated the links in the blog component to match the general style of the page.

The repository for the XML webkit (1.0) is here: https://github.com/edgeryders/webkit

I would suggest downloading it and changing the config.yaml file to mode: local.

Run npm install and then npm run serve from the directory, as with the old webkit. This way you can edit the contents of ./src/data/template.md and see the changes in the browser. It will be a lot faster than editing a site on discourse.

Please put any new issues in this repository.

  1. Why does the following not produce a grey background?

rgba(255,255,255,0.3) is actually white set to opacity 0.3 - if you want gray rgba(0,0,0,0.3) is what you’re looking for.

Can we have an explanation of the template and theme parameter and a list of the accepted values? Example:
<Blog tag="sf-econ-blog" template="standard" items="4" columns="2" display="author, date">

As a brief explanation:

  1. Template - most of the time, this does not need to be changed (it always defaults to edgeryders if it is not defined). The template parameter is a way of changing the .vue file in which all the components are loaded, if we wish to do so in the future (it can be used for loading custom layouts and components such as https://er-freelance.netlify.app).

  2. Theme - this will load a .css file stored in /public directory. The CSS changes the ‘look’ of the site, but unlike the template it does not modify any of the components loaded.

  3. <Blog tag="sf-econ-blog" template="standard" items="4" columns="2" display="author, date">

This means:

  • Load topics tagged sf-econ-blog
  • template defines the layout of the component, the only option is default for now.
  • items="4" maximum number of items to show at once. I am adding a paginated option so this will let users navigate between older and newer posts
  • columns="2" set to the number of columns to display (1, for a single column of posts)
  • display="author, date" - determines the metadata to show below the post title, for the moment limited to author and date, will also shortly include comments and likes

That’s only for the blog component, there are other parameters for each component and there will be further details in the documentation by tomorrow.

For the look of the econscifi site - if you have any requirements, I can add them to the theme.

I’ve kept it intentionally minimal, but if any changes need to be made it’s probably worth discussing in a phone call or with a simple mockup.