Quite a few UI Updates. Added a close button for search results in th…

…e header. Added display of source meta data in note(mathieudutour#30).

_notes/Digital Garden.md

@@ -3,9 +3,9 @@ title: Digital Garden
 tags:
  - learning
  - digital-garden
+source: "[Digital Garden Setup](https://nesslabs.com/digital-garden-set-up)"
 ---
 
 > A digital garden is an online space at the intersection of a notebook and a blog, where digital gardeners share seeds of thoughts to be cultivated in public. Contrary to a blog, where articles and essays have a publication date and start decaying as soon as they are published, a digital garden is evergreen: digital gardeners keep on editing and refining their notes.
-> [Source](https://nesslabs.com/digital-garden-set-up)
 
 You can use [[Gatsby Garden]] to create your own Digital Garden from your [[Zettelkasten]] notes.

package.json

@@ -34,11 +34,15 @@
     "gatsby-plugin-local-search": "^2.0.1",
     "gatsby-plugin-react-helmet": "^3.11.0-next.0",
     "gatsby-remark-double-brackets-link": "^0.1.8",
+    "gatsby-remark-mermaid": "^2.1.0",
+    "gatsby-remark-prismjs": "^5.7.0",
     "gatsby-source-filesystem": "^2.11.1",
     "gatsby-transformer-remark": "^2.16.1",
     "gray-matter": "^4.0.2",
     "jquery": "^3.6.0",
     "popper.js": "^1.16.1",
+    "prismjs": "^1.24.1",
+    "puppeteer": "^10.1.0",
     "react": "^16.12.0",
     "react-bootstrap": "^1.5.2",
     "react-d3-graph": "^2.6.0",

src/layout/header.jsx

@@ -33,7 +33,6 @@ export default function Header({ title }) {
 
   const menu = DefaultMenuStructure("header")
 
-
   return (
     <>
       <Helmet>
@@ -112,6 +111,7 @@ export default function Header({ title }) {
                     <li key={result.slug}><Link to={result.slug}>{result.title}</Link></li>
                   ))}
                 </ul>
+                <button className="close-search button-link" onClick={() => setQuery("")}>Close</button>
               </div> : null }
           </form>
         </div>

src/pages/404.jsx

@@ -1,7 +1,6 @@
 import React from "react"
 import Layout from "../layout/layout"
 import Menu from "../components/menu"
-import NoteList from "../components/note-list"
 
 export default function NotFound() {
   return (

src/styles/common.css

@@ -7,17 +7,6 @@ body {
   color: var(--main-text-color);
 }
 
-.table-striped tbody tr:nth-of-type(2n + 1) {
-  background-color: #eff7f0;
-}
-.table td,
-.table th {
-  border-top: 1px solid #89a289;
-}
-.table thead th {
-  border-bottom: 2px solid #89a289;
-}
-
 /* Header */
 .navbar-nav .dropdown-menu {
   display: none;
@@ -45,20 +34,11 @@ nav.navbar {
 .navbar-toggler {
   color: var(--main-text-color);
 }
-.note-content img {
-  max-width: 100% !important;
-}
-.note-content table {
-  width: 100%;
-  border-top: 1px solid var(--navbar-bg-color);
-  margin: 20px 0;
-}
-.note-content table tr {
-  border-bottom: 1px solid var(--navbar-bg-color);
-}
-.note-content table td,
-.note-content table th {
-  padding: 5px;
+.navbar .close-search {
+  font-size: smaller;
+  color: var(--secondary-text-color);
+  float: right;
+  cursor: pointer;
 }
 
 form#search-form {
@@ -83,3 +63,12 @@ form .search-results ul {
   margin: 0;
   padding: 0;
 }
+
+.button-link {
+  background: none!important;
+  border: none;
+  padding: 0!important;
+  color: var(--link-color);
+  text-decoration: underline;
+  cursor: pointer;
+}

src/styles/note.css

@@ -35,11 +35,47 @@
 .note-references,
 .note-tags,
 .note-graph,
-.note-meta {
+.note-meta,
+.note-content {
   margin: 10px;
 }
-.note-content {
-  margin:  10px 0;
+
+.note-content img {
+  max-width: 100% !important;
+}
+.note-content table {
+  width: 100%;
+  border-top: 1px solid var(--navbar-bg-color);
+  margin: 20px 0;
+}
+.note-content table tr {
+  border-bottom: 1px solid var(--navbar-bg-color);
+}
+.note-content table td,
+.note-content table th {
+  padding: 5px;
+}
+
+.note-content blockquote {
+  background: var(--navbar-bg-color);
+  border-left: 10px solid var(--card-color);
+  margin: 1.5em 10px;
+  padding: 0.5em 10px;
+  quotes: "\201C""\201D""\2018""\2019";
+}
+.note-content blockquote:before {
+  color: var(--card-color);
+  content: open-quote;
+  font-size: 4em;
+  line-height: 0.1em;
+  margin-right: 0.25em;
+  vertical-align: -0.4em;
+}
+.note-content blockquote p {
+  display: inline;
+}
+.note-content code {
+  color: var(--secondary-text-color);
 }
 
 .note-list .note-area {
@@ -54,6 +90,11 @@
 .note-area .note-excerpt {
   margin: 0;
 }
+.note-meta p, .note-meta div {
+  margin: 0;
+  opacity: 80%;
+  font-size: .9em;
+}
 .note-list .note-tag-list {
   margin: 0;
   color: #999;

src/styles/variables.css

@@ -1,8 +1,9 @@
 body {
   --main-bg-color: #fff;
-  --card-color: #eff7f0;
+  --card-color: #d8dfd9;
   --main-text-color: #333;
   --navbar-bg-color: #eff7f0;
+  --secondary-text-color: #282923;
   --link-color: #818181;
 }
 

src/templates/note.jsx

@@ -7,6 +7,28 @@ import "../styles/graph.css"
 const makeSlug = require("../utils/make-slug")
 const moment = require('moment')
 
+function Source({ src }) {
+  if(!src) return null
+
+  let link = ""
+  if(src.includes("<a ")) { // Source given as HTML Link
+    link = <span dangerouslySetInnerHTML={{ __html: src }}></span>
+  } else if(src.includes("](")) { // Source given as Markdown Link - [Text](url)
+    const linkParts = src.match(/\[(.+)\]\((.+)\)/)
+    if(linkParts) {
+      link = <a href={linkParts[2]} target="_blank" rel="noreferrer">{linkParts[1]}</a>
+    } else {
+      return null
+    }
+  } else { // Just an URL given as source
+    link = <a href={src} target="_blank" rel="noreferrer">Link to Source</a>
+  }
+
+  return (
+      <p><strong className="note-meta-title">Source</strong>: { link }</p>
+    );
+}
+
 export default function Note({ pageContext, data }) {
   const post = data.markdownRemark
 
@@ -65,30 +87,32 @@ export default function Note({ pageContext, data }) {
         </div>
 
         <div className="note-meta">
-          <p>Published on: { moment(new Date(post.fields.date)).format("do MMMM, YYYY") }</p>
-        </div>
+          <p><strong className="note-meta-title">Published on: </strong> { moment(new Date(post.fields.date)).format("do MMMM, YYYY") }</p>
+          { post.frontmatter.source ? <Source src={ post.frontmatter.source } /> : null }
 
-        { post.frontmatter.tags ? (
-        <div className="note-tags">
-          <h6>Tagged With: </h6>
-          <ul>
-            {post.frontmatter.tags.map((tag, index) => (
-              <li key={index}><Link to={`/tags/${makeSlug(tag)}`}>{tag}</Link></li>
-            ))}
-          </ul>
-        </div>
-        ) : null }
-
-        { pageContext.referredBy.length ? (
-        <div className="note-references">
-          <h6>Referred By</h6>
-          <ul>
-            {pageContext.referredBy.map((title, index) => (
-              <li key={index}><Link to={`/${makeSlug(title)}`}>{title}</Link></li>
-            ))}
-          </ul>
+          { post.frontmatter.tags ? (
+          <div className="note-tags">
+            <strong className="note-meta-title">Tagged With: </strong>
+            <ul>
+              {post.frontmatter.tags.map((tag, index) => (
+                <li key={index}><Link to={`/tags/${makeSlug(tag)}`}>{tag}</Link></li>
+              ))}
+            </ul>
+          </div>
+          ) : null }
+
+          { pageContext.referredBy.length ? (
+          <div className="note-references">
+            <strong className="note-meta-title">Referred By</strong>
+            <ul>
+              {pageContext.referredBy.map((title, index) => (
+                <li key={index}><Link to={`/${makeSlug(title)}`}>{title}</Link></li>
+              ))}
+            </ul>
+          </div>
+          ) : null }
         </div>
-        ) : null }
+
 
         <div className="note-graph">
           <Graph
@@ -113,6 +137,7 @@ export const query = graphql`
       }
       frontmatter {
         tags
+        source
       }
     }
   }