many changes

- add comix diary
- update 404
- fix page title and meta tags (SEO)
- fix favicon
- finish projects page

content/pages/404.md

@@ -1 +1,3 @@
-# 404
+<div class="center">
+  404: Page Not Found
+</div>

content/pages/projects.md

@@ -1,10 +0,0 @@
-## active
-
-- [mistoskoly.cz](https://mistoskoly.cz)
-- [math livegraph](https://math.livegraph.org)
-
-## incubated, paused
-
-- [ditup](https://ditup.org)
-
-## past

content/pages/projects/comix-diary.mdx

@@ -0,0 +1,11 @@
+# Comix Diary
+
+<>
+{[...Array(26).keys()].slice(1).map(i => (
+  <img
+    key={i}
+    src={`/files/comix-diary/${('0' + i).slice(0, 2)}.png`}
+    alt={`image ${i}`}
+  />
+))}
+</>

content/pages/projects/index.md

@@ -0,0 +1,16 @@
+## active
+
+- [mistoskoly.cz](https://mistoskoly.cz)
+- [math livegraph](https://math.livegraph.org)
+
+## incubated, paused
+
+- [ditup](https://ditup.org)
+
+## past
+
+- [helping with Trustroots](https://trustroots.org)
+- [influenced](https://influenced.livegraph.org)
+- temporary [nomadbase in Lisbon](https://lisbon.nomadbase.org) (winter 2015 - 2016)
+- [comix diary](/projects/comix-diary)
+- some graphics for [MultiRacer](https://franticware.com/multiracer)

gatsby-config.js

@@ -1,10 +1,6 @@
 module.exports = {
   siteMetadata: {
-    title: `Gatsby Default Starter`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
-    titleTemplate: "",
-    twitterUsername: "",
+    description: "mrkvon homepage",
     url: "https://mrkvon.org",
     image: "",
   },
@@ -44,13 +40,13 @@ module.exports = {
     {
       resolve: `gatsby-plugin-manifest`,
       options: {
-        name: `gatsby-starter-default`,
-        short_name: `starter`,
+        name: `mrkvon.org :: mrkvon homepage`,
+        short_name: `mrkvon.org`,
         start_url: `/`,
-        background_color: `#663399`,
-        theme_color: `#663399`,
+        background_color: `##81c0c5`,
+        theme_color: `#81c0c5`,
         display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+        icon: `src/images/favicon.png`, // This path is relative to the root of the site.
       },
     }, // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline

src/components/page-layout.js

@@ -7,30 +7,20 @@
 
 import React from "react"
 import PropTypes from "prop-types"
-// import { useStaticQuery, graphql } from "gatsby"
-
 import Header from "./header"
+import SEO from "./seo"
 import "../styles/reset.css"
 import "./layout.css"
 
 const Layout = ({ children, location }) => {
-  /*
-  const data = useStaticQuery(graphql`
-    query SiteTitleQuery {
-      site {
-        siteMetadata {
-          title
-        }
-      }
-    }
-  `)
-  */
-
   return (
-    <div id="wrapper">
-      <Header location={location} />
-      <main id="page">{children}</main>
-    </div>
+    <>
+      <SEO />
+      <div id="wrapper">
+        <Header location={location} />
+        <main id="page">{children}</main>
+      </div>
+    </>
   )
 }
 

src/components/seo.js

@@ -1,28 +1,49 @@
 import React from "react"
-import PropTypes from "prop-types"
+// import PropTypes from "prop-types"
 import { Helmet } from "react-helmet"
 import { useLocation } from "@reach/router"
 import { useStaticQuery, graphql } from "gatsby"
-const SEO = ({ title, description, image, article }) => {
-  const { pathname } = useLocation()
-  const { site } = useStaticQuery(query)
+const SEO = () => {
   const {
-    defaultTitle,
-    titleTemplate,
-    defaultDescription,
-    siteUrl,
-    defaultImage,
-    twitterUsername,
-  } = site.siteMetadata
-  const seo = {
-    title: title || defaultTitle,
-    description: description || defaultDescription,
-    image: `${siteUrl}${image || defaultImage}`,
-    url: `${siteUrl}${pathname}`,
+    allPostsYaml: { edges },
+  } = useStaticQuery(query)
+  const { pathname: location } = useLocation()
+
+  let snippets = location.split("/").filter(a => !!a)
+
+  if (snippets[0] === "blog") {
+    const posts = edges.map(({ node }) => node)
+    const post = posts.find(({ url }) => url === snippets[1])
+
+    if (post) {
+      snippets = ["blog", post.title]
+    }
   }
+
+  const title = [...snippets.reverse(), "mrkvon"].join(" :: ")
+  const description =
+    "one more human has a homepage: freedom, sharing, coding, music"
+
   return (
-    <Helmet title={seo.title} titleTemplate={titleTemplate}>
-      <meta name="description" content={seo.description} />
+    <Helmet title={title}>
+      <meta name="description" content="mrkvon homepage" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content={title} />
+      <meta property="og:url" content="https://mrkvon.org" />
+      <meta
+        property="og:description"
+        content="one more human has a homepage: freedom, sharing, coding, music"
+      />
+      <meta name="twitter:title" content={title} />}
+      <meta name="twitter:description" content={description} />
+      <link
+        rel="meta"
+        type="text/turtle"
+        title="FOAF"
+        href="https://data.mrkvon.org/foaf.ttl"
+      />
+      {/*
       <meta name="image" content={seo.image} />
       {seo.url && <meta property="og:url" content={seo.url} />}
       {(article ? true : null) && <meta property="og:type" content="article" />}
@@ -39,33 +60,25 @@ const SEO = ({ title, description, image, article }) => {
       {seo.description && (
         <meta name="twitter:description" content={seo.description} />
       )}
-      {seo.image && <meta name="twitter:image" content={seo.image} />}
+      {seo.image && <meta name="twitter:image" content={seo.image} />*/}
     </Helmet>
   )
 }
 export default SEO
-SEO.propTypes = {
-  title: PropTypes.string,
-  description: PropTypes.string,
-  image: PropTypes.string,
-  article: PropTypes.bool,
-}
-SEO.defaultProps = {
-  title: null,
-  description: null,
-  image: null,
-  article: false,
-}
+
 const query = graphql`
-  query SEO {
+  query SEOQuery {
     site {
       siteMetadata {
-        defaultTitle: title
-        titleTemplate
-        defaultDescription: description
-        siteUrl: url
-        defaultImage: image
-        twitterUsername
+        url
+      }
+    }
+    allPostsYaml {
+      edges {
+        node {
+          title
+          url
+        }
       }
     }
   }