mottox2 blog

GatsbyJSハンズオン資料

event

thumbnail

2019/01/08にサポーターズで行われる『Gatsbyで今風ウェブサイトの開発ハンズオン』のハンズオン資料です。

スライド

各種リンク

Reactのおさらい

src/index.js
import React from "react";
import ReactDOM from "react-dom";
import Hello from "./Hello";

import "./styles.css";

const App = () => {
  return (
    <div className="App">
      <Hello name="an" />
      <Hello name="en" />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
src/Hello.js
import React from "react";

const Hello = props => {
  return <p>Hello {props.name}</p>;
};

export default Hello;

Gatsby入門

https://codesandbox.io/s/vvx7w5q2oy

gatsby-config.js
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`,
  },
  plugins: [
    {
      resolve: 'gatsby-source-rss-feed',
      options: {
        name: 'BlogPost',
        url: 'https://mottox2.com/rss.xml',
      },
    },
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.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.app/offline
    // 'gatsby-plugin-offline',
  ],
}
gatsby-node.js
const path = require('path')

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  const post = path.resolve('./src/templates/post.js')
  return graphql(`
    {
      allFeedBlogPost {
        edges {
          node {
            guid
          }
        }
      }
    }
  `).then(result => {
    console.log(result.data.allFeedBlogPost.edges)
    result.data.allFeedBlogPost.edges.forEach(post => {
      createPage({
        path: `/stories/${post.guid}`,
        component: post,
        context: {
          guid: post.guid
        }
      })
    })
  })
}
src/pages/index.js
import React from 'react'
import { Link, graphql } from 'gatsby'
import Layout from '../components/layout'

export default props => (
  <Layout>
    {props.data.allFeedBlogPost.edges.map(edge => {
      const post = edge.node
      return (
        <p key={post.guid}>
          <Link to={`/posts/${post.guid}`}>
            {post.title}
          </Link>
        </p>
      )
    })}
  </Layout>
)

export const query = graphql`
  {
    allFeedBlogPost {
      edges {
        node {
          guid
          title
        }
      }
    }
  }
`
src/templates/post.js
import React from 'react'
import { graphql } from 'gatsby'

export default props => {
  const post = props.data.feedBlogPost
  return (
    <div>
      <p>{post.title}</p>
      <div
        dangerouslySetInnerHTML={{
          __html: post.content.replace('\n', '<br/>'),
        }}
      />
    </div>
  )
}

export const query = graphql`
  query($guid: String!) {
    feedBlogPost(guid: { eq: $guid }) {
      title
      content
    }
  }
`
dev

ウェブ技術で縦書きを含む画像を生成したい

ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現

blog

Netlify Formsで問い合わせフォームを作ったら簡単だった

追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。 当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ

netlify
dev

翻訳でHacktoberfestに参加しました

毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数(4つ)の貢献を行った人に特典がプレゼントされるものになっています。 自分はドキュメ

Copyright © 2023 @mottox2 All Rights Reserved.