gatsby-remark-sns-images

    1.0.5 • Public • Published

    Gatsby remark sns images

    Make a SNS ogp image using your article title on Gatsby.js.

    Usage

    Install

    npm install --save gatsby-remark-sns-images
    # or
    yarn add gatsby-remark-sns-images

    gatsby-config.js

    // Example
    resolve: `gatsby-transformer-remark`,
          options: {
            plugins: [
              {
              resolve: `gatsby-remark-sns-images`,
                options: {
                  output: {
                    directory: '',
                    fileName: 'thumbnail.png'
                  },
                  image: {
                    width: 1200,
                    height: 630,
                    backgroundColor: '#15202B',
                  },
                  style: {
                    title: {
                      fontFamily: 'Noto Sans CJK JP',
                      fontColor: '#1DA1F2',
                      fontWeight: 'bold',
                      fontSize: 64,
                      paddingTop: 100,
                      paddingBottom: 200,
                      paddingLeft: 150,
                      paddingRight: 150,
                    },
                    author: {
                      fontFamily: 'Noto Sans CJK JP',
                      fontColor: '#DDDDDD',
                      fontWeight: '400',
                      fontSize: 42,
                    }
                  },
                  meta: {
                    title: '',
                    author: '@psbss'
                  },
                  fontFile: [
                    {
                      path: require.resolve('./src/utils/fonts/NotoSansCJKjp-Bold.otf'),
                      family: 'Noto Sans CJK JP',
                      weight: 'bold',
                    },
                    {
                      path: require.resolve('./src/utils/fonts/NotoSansCJKjp-Regular.otf'),
                      family: 'Noto Sans CJK JP',
                      weight: '400',
                    },
                  ],
                  iconFile: require.resolve('./content/assets/siteicon.png'),
                  timeout: 10000,
                },
              },
            ],
          },

    options

    example

    • output
      • directory : default is public/article_directory/
      • fileName : image file name
    • image
      • width : image width
      • height : image height
      • backgroundColor : image background color
    • style
      • title
        • fontFamily : Font family
        • fontColor : Font color (Can use Hex color codes)
        • fontWeight : Font family's option (You should use Bold)
        • fontSize : default is 64px
        • paddingTop : padding top
        • paddingBottom : padding bottom
        • paddingLeft : padding left
        • paddingRight : padding right
      • author
        • fontFamily : Font family
        • fontColor : Font color (Can use Hex color codes)
        • fontWeight : Font family's option (You should use Regular)
        • fontSize : default is 42px
    • meta
      • title : meta options
      • author : author name
    • fontFile
      • path : Font file path
      • family : Utilize font name
      • weight : Utilize font weight
    • iconFile : Next to author
    • timeout : Timeout on build time limit

    Note

    If I have some issues, Please give me new issues

    Install

    npm i gatsby-remark-sns-images

    DownloadsWeekly Downloads

    6

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    77.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • psbss