Update readme and logos

README.md

@@ -27,7 +27,29 @@ Demos and docs live together as a [Sapper](https://sapper.svelte.dev) site.
 
 ### 1 Install via npm
 
-    $ npm install --save bulma svelma
+Note that you'll need a CSS processing plugin for rollup so that you can import css files. Here we're using `postcess`. If you're going to use a `<link>` in
+your HTML you can skip the plugin and the `import ... css` statement below in step #2
+
+    $ npm install --save bulma svelma postcess
+
+Add the CSS process plugin to your rollup config (I don't think the order really matters):
+
+```js
+import postcss from 'rollup-plugin-postcss'
+
+...
+
+export default {
+  ... 
+  plugins: [
+    svelte({
+      ...
+    }),
+
+    postcss(),
+  }
+}
+```
 
 ### 2 Import Bulma's CSS and Svelma components
 

docs/src/components/DocHeader.svelte

@@ -6,6 +6,7 @@
 </script>
 
 <svelte:head>
+  <meta property="og:type" content="article" />
   <meta property="og:title" content={newTitle} />
   <meta property="og:description" content={subtitle} />
 </svelte:head>

docs/src/routes/_layout.svelte

@@ -1,12 +1,28 @@
+<script context="module">
+  export async function preload({ path }) {
+    const url = 'https://c0bra.github.io' + `/svelma/${path}`.replace(/\/\//g, '/').replace(/([^\/]$)/, '$1/')
+
+    return { url };
+  }
+</script>
+
 <script>
   import 'bulma/css/bulma.css'
   import 'highlight.js/styles/github.css'
 
   import { afterUpdate } from 'svelte'
+  import { stores } from '@sapper/app';
   import Nav from '../components/Nav.svelte'
   import Sidebar from '../components/Sidebar.svelte'
 
+  const { page } = stores()
+
   export let segment
+  let url
+
+  page.subscribe(({ path }) => {
+    url = 'https://c0bra.github.io' + `/svelma/${path}`.replace(/\/\//g, '/').replace(/([^\/]$)/, '$1/')
+  })
 
   // afterUpdate(function() {
   //   console.log('I updated!', this)
@@ -42,7 +58,10 @@
 <svelte:head>
   <title>Svelma</title>
   <meta property="og:site_name" content="Svelma" />
-  <meta property="og:image" content="https://c0bra.github.io/svelma/svelma-logo.svg" />
+  <meta property="og:image" content="https://c0bra.github.io/svelma/svelma-logo.png" />
+  <meta property="og:image:width" content="200" />
+  <meta property="og:image:height" content="200" />
+  <meta property="og:url" content={url}>
 </svelte:head>
 
 <Nav {segment} />