A note on the philosophy of the webkit and its documentation

[alberto]

Hello @hugi and @owen, I would like to ask to put two items on the agenda of your meeting today.

1. Documentation, as per this topic.
2. Can I get an update on the webkit as a funnel for registering to the platform? We are rolling out comms for the Sf-Econ first event about now, so we need to quickly decide whether to have signup via our own infrastructure or through a third party. What we need to know is when we can use a webkit website to sign up to an ER event. In fact, I thought this was working already (there are forms in Owen’s example JSON config file), but Nadia claims it is not.

Today I am starting a manual about making a website with the webkite for dummies like me.

[owen]

@alberto

1. Can I get an update on the webkit as a funnel for registering to the platform? We are rolling out comms for the Sf-Econ first event about now, so we need to quickly decide whether to have signup via our own infrastructure or through a third party. What we need to know is when we can use a webkit website to sign up to an ER event. In fact, I thought this was working already (there are forms in Owen’s example JSON config file), but Nadia claims it is not.

Will discuss in the call, but as a preliminary answer:

• There is a form component to build forms. The ongoing issue is getting this form data onto the platform. It is a work in progress, therefore I would not recommend waiting for it to launch your first event.

• What the form component can do is post the result of the form to Airtable, or any third party service with a documented API. This requires some configuration, but it works.

[alberto]

Thanks. Meanwhile, started the manual:

Webkit Usage

This is a step-by-step guide to making an Edgeryders website with the webkit. Content Understanding the webkit and why we use it Why we need the webkit and when to use it How it works: introducing configuration posts Step 1: Make the design decisions Step 2: Prepare the content Choose and structure a home for your content Make or choose high-quality content Step 3: Prepare the configuration post Make a copy of the example configuration post Edit the Config block Edit the Menu bloc…

[owen]

Thanks for getting started on this - I will add to it as we go along.

In our call today we set the following goals:

• Remaining components to be integrated and working with XML format by next week (July 2nd). The syntax of these components will follow closely how the < Text > and < Form > components work. Date: July 2nd
• Documentation finished and working in tandem with webkit - Date: July 6th.
• Form working, depending on outcome of fix - Date: July 6th

On the last point - for @alberto - I would not wait or delay an event page in the expectation of this form working. The reason is we’ve ran into a series of problems getting it to work thus far - if this last problem is easily fixed I will post a message here saying so - if not, it is best to adopt an alternative solution for your event.

There are several third party form solutions out there, but if you want the existing form integrated with a database or something like Airtable I can set that up - let me know, which way you go.

Finally, the footer for @nadia will be done today (in the next hour).

I think that covers everything - @hugi if there is anything else I missed here feel free to include it below.

[hugi]

@owen

The reason is we’ve ran into a series of problems getting it to work thus far

These problems, for the record, have something to do with the plugin @gdpelican built no longer working as expected with Discourse. @matthias is investigating.

[alberto]

@owen and @hugi, thanks for this.

I am now done with iteration 1 of Webkit Usage. There is still some information missing: I have @mentioned you to mark the points where I need you to fill it in. Once everything is in place, we can upgrade it to manual, with @matthias’s permission.

When making a website with the webkit, the main tool at the layman’s disposal is the example configuration file, or rather configuration post. I already recommended spending some care making one with example code for all the types of content supported. Now I want to add another recommendation: be generous with inline comments:

<!-- XML comment here -->

Problem with that, of course, is that an XML tag is not rendered by Discourse. We can live with it, and I already added it to the guide:

@alberto

General principle: you need to edit the configuration post in order to see all elements of it . This because Discourse hides some elements, including XML tags. So, don’t worry if the configuration post does not look right: edit it, then look at it in the edit window, and everything will be there.

That said, if anyone is aware of a better workflow, incorporate it in the guide.

[alberto]

@owen

I would not wait or delay an event page in the expectation of this form working. The reason is we’ve ran into a series of problems getting it to work thus far - if this last problem is easily fixed I will post a message here saying so - if not, it is best to adopt an alternative solution for your event.

@nadia please take note… AirTable it is.

@owen seen this? Vimeo embed does not work · Issue #55 · edgeryders/webkit_components · GitHub

[nadia]

yeah we use airtable already: https://edgeryders-start.netlify.app

[owen]

An update on the documentation and syntax -

@alberto the components are now ported over to the new syntax, an example of a site built using the new syntax can be found here: https://webkitsandbox.netlify.app

This means now:

• To display a grid of event topics I use the syntax:

<Grid template="events" tag="event_tag" />

• To display cards I use the syntax:

<Cards tag="topic_tag" />

• To display a table of topics I use the syntax:

<Table tag="topic_tag" />

• To display a set of topics in a blog view:

<Blog tag="topic_tag" />

or

<Blog category="category_id" />

There will be situations where we will want to display a custom data set, rather than topics or posts.

For example on the resilience site - we are displaying a row of profile cards. This data is stored not as posts but in a JSON format here: https://edgeryders.eu/raw/14036.json

To display an arbitrary data set, you would do this:

<Cards data="14036" />

This means “get the JSON data from topic 14036 and display it in my Cards view”.

---

I will add all this to the documentation tomorrow, and update the sandbox to the latest version of the webkit so you can try it out.

[owen]

The sandbox (live.edgeryders.eu) is now updated.

For some examples -

1. the Sci-Fi economics site has been updated to include the < blog > component
   Site: Edgeryders
   Config: SF-ECON Lab webkit XML - Raw

2. the resilient livelihoods site has been converted to the XML syntax (slider, grid, cards):
   Site: Edgeryders
   Config: Resilient Livelihoods XML - Raw

Also the Vimeo bug has been fixed.

More documentation tomorrow.

cc / @alberto @hugi

[alberto]

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.

[alberto]

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

2. 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;" />

3. The blog view currently orders topics by most recent post. Is there a parameter to control this? For example, by topic creation?

[owen]

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: GitHub - edgeryders/webkit: Webkit is a tool for the Edgeryders organisation and community members to publish pages using Discourse.

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.

2. 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.

[ivan]

hello guys (also @owen and @matthias)

I am looking for the best place on the platform to upload the recording of the worldbuilding academy webinar to share it with the participants (and with who requests it). Somehow, I think its proper place would be the scifieconomicslab.net
Is it technically possible? If not, what would you suggest?

[hugi]

It is! Maybe book a session with @owen so he can teach you how the Webkit works?

[nadia]

@MariaEuler do you remember if we recorded the chat where Owen walked us through some of this stuff?

[MariaEuler]

Sorry, I do not remember. Was that during a biweekly? I think then we did probably not record it.

[owen]

@IvanC It’s possible to embed Vimeo or YouTube videos - I would recommend uploading there and then it’s a matter of dropping the link in the site configuration. I can walk you through how that works next week if you have time.

[ivan]

Sure, thank you!

Does Monday around 11 work for you?

[owen]

Yea that works - speak to you then.