Hello World

10/24/2019, 12:00:00 AM

props

{
  category: null,
  title: 'Hello World',
  date: '2019-10-24T00:00:00.000Z',
  tags: null,
  body: `<p>This is a basic file-based post. My slug is the file path (relative to root of content folder). And I don't have a category.</p><div class="section"><h1>How to Make this Look different</h1><p>Edit file <code>src/gatsby-theme-orga/components/post.js</code>. All metadata shown above is accessible to the component.</p><p>Try to render the date by changing the file content to this:</p><pre><code class="language-javascript"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span>\n` +
    `<span class="token keyword">import</span> Layout <span class="token keyword">from</span> <span class="token string">'../../components/layout'</span>\n` +
    `<span class="token keyword">import</span> <span class="token punctuation">{</span> inspect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'util'</span>\n` +
    '<span class="token keyword">const</span> <span class="token function-variable function">print</span> <span class="token operator">=</span> <span class="token parameter">o</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n' +
    '  <span class="token keyword">return</span> <span class="token function">inspect</span><span class="token punctuation">(</span>o<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>\n' +
    '<span class="token punctuation">}</span>\n' +
    '\n' +
    '<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token parameter">props</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n' +
    '  <span class="token keyword">const</span> <span class="token punctuation">{</span> title<span class="token punctuation">,</span> date<span class="token punctuation">,</span> body <span class="token punctuation">}</span> <span class="token operator">=</span> props\n' +
    '  <span class="token keyword">return</span> <span class="token punctuation">(</span>\n' +
    '    <span class="token operator">&lt;</span>Layout<span class="token operator">></span>\n' +
    '      <span class="token operator">&lt;</span>h1<span class="token operator">></span><span class="token punctuation">{</span> title <span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">></span>\n' +
    '      <span class="token operator">&lt;</span>pre<span class="token operator">></span><span class="token punctuation">{</span> <span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toLocaleString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>pre<span class="token operator">></span>\n' +
    '      <span class="token operator">&lt;</span>h5<span class="token operator">></span>prpos<span class="token operator">&lt;</span><span class="token operator">/</span>h5<span class="token operator">></span>\n' +
    '      <span class="token operator">&lt;</span>pre<span class="token operator">></span><span class="token punctuation">{</span> <span class="token function">print</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>pre<span class="token operator">></span>\n' +
    '      <span class="token operator">&lt;</span>div dangerouslySetInnerHTML<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> __html<span class="token punctuation">:</span> body <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>\n' +
    '    <span class="token operator">&lt;</span><span class="token operator">/</span>Layout<span class="token operator">></span>\n' +
    '  <span class="token punctuation">)</span>\n' +
    '<span class="token punctuation">}</span></code></pre></div>',
  slug: '/hello'
}

import React from 'react'
import Layout from '../../components/layout'
import { inspect } from 'util'
const print = o => {
  return inspect(o, false, null, false)
}

export default props => {
  const { title, date, body } = props
  return (
    <Layout>
      <h1>{ title }</h1>
      <pre>{ (new Date(date)).toLocaleString() }</pre>
      <h5>prpos</h5>
      <pre>{ print(props) }</pre>
      <div dangerouslySetInnerHTML={{ __html: body }} />
    </Layout>
  )
}