Zenn
Closed7

GitPitch 4.0 Learn

#
slide
GitPitch
sogaohsogaoh

Grid Layouts

https://docs.gitpitch.com/#/grid-layouts/

Grid Drag + Drop

[drag=width height, drop=x y]

Position by Name
topleft top topright
left center right
bottomleft bottom bottomright

Position Centering

[drag=width height, drop=x y _centerX _centerY]
_centerX _centerY がない場合

_centerX:true _centerY:true だとdrop=x y を中心にするようだ

Grid Flow

[drag=width height, drop=x y, flow=col | row | stack]

  • flow=col

    • 縦に整列

  • flow=col true

    • 縦に整列 + 上下は端に寄せる

  • flow=row

    • 横に整列

  • flow=row true

    • 横に整列 + 左右は端に寄せる

Grid Stacks

[drag=width height, drop=x y, flow=stack]
  • 3.0 までの fragments のことと解釈

Stack Block Items

  • Plain Text -> どうやらこのリンクの先が個々の Item の詳細説明
  • Heading Content
  • Image Widget
  • Code Widget
  • GIST Widget
  • Diff Widget
  • Mermaid Widget
  • Cloud Widget
  • PlantUML Widget
  • GraphViz Widget
  • MathJax Widget
  • Video Widget

Grid Widget

Native Widgets List

  • List Widget
  • LaTex Widget
  • Whiteboard Widget
  • (Image Widget)
  • (Code Widget)
  • (GIST Widget)
  • (Diff Widget)
  • (Mermaid Widget)
  • (Cloud Widget)
  • (PlantUML Widget)
  • (GraphViz Widget)
  • (MathJax Widget)
  • (Video Widget)
sogaohsogaoh

Grid Fit

Fit for Text

https://docs.gitpitch.com/#/grid-layouts/fit-text

[drag=width height, drop=x y, fit=scale]

Your text goes here.
  • 文字の拡大縮小
    • fit=2 -> 2倍に拡大
    • fit=0.5 -> 0.5倍に縮小

Fit fot Lists

https://docs.gitpitch.com/#/grid-layouts/fit-lists

@ul[drag=width height, drop=x y, fit=scale]
- Item One
- Item Two
- etc
@ul

@ol[drag=width height, drop=x y, fit=scale]
1. Item One
1. Item Two
1. etc
@ol

うーん、何も出てこない。。バグでは？

Fit for Code

https://docs.gitpitch.com/#/grid-layouts/fit-code

Code

@code[scala code-blend-bg, drag=99, fit=scale](path/to/demo.scala)
GIST

@gist[elixir code-line-numbers, drag=100, fit=scale](user/gistid)
Diff

@diff[diff-nofrags, drag=80 100, drop=right, fit=scale](user/repo/commitid)

Diff はよくわからない（動作確認できず）

Fit for Maths

https://docs.gitpitch.com/#/grid-layouts/fit-maths

使わなさそうなのでSkip

Fit for Tables

https://docs.gitpitch.com/#/grid-layouts/fit-table-data

[drag=width height, drop=x y]
@table[table-header](src/sample.csv)

これは使ったことある

Fit for Images

https://docs.gitpitch.com/#/grid-layouts/fit-images

![drag=width height, drop=x y, stretch=true](path/to/image.ext)
  • stretch=true , flow=stack が使えるらしい（でも自分はあまり使わなさそう）
sogaohsogaoh

Grid Behaviors

Grid Set

https://docs.gitpitch.com/#/grid-layouts/set

[drag=width height, drop=x y, set=style...]
Text Colors

.text-black  { color: #000000 !important; }
.text-blue   { color: #4487F2 !important; }
.text-gray   { color: #777777 !important; }
.text-green  { color: #8EA33B !important; }
.text-orange { color: #F26225 !important; }
.text-gold   { color: #E58537 !important; }
.text-pink   { color: #E71E60 !important; }
.text-purple { color: #643B85 !important; }
.text-yellow { color: #F5DB2E !important; }
.text-white  { color: #FFFFFF !important; }


[drag=100, drop=center, set=text-pink]

Hello, World!
Text Weights

.text-bold       { font-weight: bold !important; }
.text-italic     { font-style: italic !important; }
.text-italics    { font-style: italic !important; }
.text-uppercase  { text-transform: uppercase !important; }
.text-lowercase  { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-smallcaps  { font-variant: small-caps !important; }


[drag=50 15, drop=bottom, set=text-bold text-uppercase]

Hello, World!
Text Fonts

.font-lato             { font-family: "Lato" !important; }
.font-montserrat       { font-family: "Montserrat" !important; }
.font-nunito-sans      { font-family: "Nunito Sans" !important; }
.font-open-sans        { font-family: "Open Sans" !important; }
.font-oswald           { font-family: "Oswald" !important; }
.font-poppins          { font-family: "Poppins" !important; }
.font-prompt           { font-family: "Prompt" !important; }
.font-quicksand     { font-family: "Quicksand" !important; }
.font-raleway          { font-family: "Raleway" !important; }
.font-roboto           { font-family: "Roboto" !important; }
.font-ubuntu           { font-family: "Ubuntu" !important; }
.font-work-sans        { font-family: "Work Sans" !important; }
.font-bubblegum        { font-family: "Bubblegum" !important; }
.font-concert-one      { font-family: "Concert One" !important; }
.font-righteous        { font-family: "Righteous" !important; }
.font-source-sans-pro     { font-family: "Source Sans Pro" !important; }

.font-lato-medium         { font-family: "Lato Medium" !important; }
.font-montserrat-medium   { font-family: "Montserrat Medium" !important; }
.font-nunito-sans-medium  { font-family: "Nunito Sans Medium" !important; }
.font-open-sans-medium    { font-family: "Open Sans Medium" !important; }
.font-oswald-medium       { font-family: "Oswald Medium" !important; }
.font-poppins-medium      { font-family: "Poppins Medium" !important; }
.font-prompt-medium       { font-family: "Prompt Medium" !important; }
.font-quicksand-medium    { font-family: "Quicksand Medium" !important; }
.font-raleway-medium      { font-family: "Raleway Medium" !important; }
.font-roboto-medium       { font-family: "Roboto Medium" !important; }
.font-ubuntu-medium       { font-family: "Ubuntu Medium" !important; }
.font-work-sans-medium    { font-family: "Work Sans Medium" !important; }
.font-source-sans-pro-medium { font-family: "Source Sans Pro Medium" !important; }

.font-lato-heavy         { font-family: "Lato Heavy" !important; }
.font-montserrat-heavy   { font-family: "Montserrat Heavy" !important; }
.font-nunito-sans-heavy  { font-family: "Nunito Sans Heavy" !important; }
.font-open-sans-heavy    { font-family: "Open Sans Heavy" !important; }
.font-oswald-heavy       { font-family: "Oswald Heavy" !important; }
.font-poppins-heavy      { font-family: "Poppins Heavy" !important; }
.font-prompt-heavy       { font-family: "Prompt Heavy" !important; }
.font-quicksand-heavy    { font-family: "Quicksand Heavy" !important; }
.font-raleway-heavy      { font-family: "Raleway Heavy" !important; }
.font-roboto-heavy       { font-family: "Roboto Heavy" !important; }
.font-ubuntu-heavy       { font-family: "Ubuntu Heavy" !important; }
.font-work-sans-heavy    { font-family: "Work Sans Heavy" !important; }
.font-source-sans-pro-heavy { font-family: "Source Sans Pro Heavy" !important; }


[drag=100 15, drop=top, set=font-righteous]

Hello, World!

カスタム例


.headline-ubuntu h1,
.headline-ubuntu h2 { font-family: "Ubuntu Heavy" !important; }

.byline-quicksand h3,
.byline-quicksand h4 { font-family: "Quicksand Medium" !important; }
Heading Colors

.h1-black  h1 { color: #000000 !important; }
.h1-blue   h1 { color: #4487F2 !important; }
.h1-gray   h1 { color: #777777 !important; }
.h1-green  h1 { color: #8EA33B !important; }
.h1-orange h1 { color: #F26225 !important; }
.h1-gold   h1 { color: #E58537 !important; }
.h1-pink   h1 { color: #E71E60 !important; }
.h1-purple h1 { color: #643B85 !important; }
.h1-yellow h1 { color: #F5DB2E !important; }
.h1-white  h1 { color: #FFFFFF !important; }

.h2-black  h2 { color: #000000 !important; }
.h2-blue   h2 { color: #4487F2 !important; }
.h2-gray   h2 { color: #777777 !important; }
.h2-green  h2 { color: #8EA33B !important; }
.h2-orange h2 { color: #F26225 !important; }
.h2-gold   h2 { color: #E58537 !important; }
.h2-pink   h2 { color: #E71E60 !important; }
.h2-purple h2 { color: #643B85 !important; }
.h2-yellow h2 { color: #F5DB2E !important; }
.h2-white  h2 { color: #FFFFFF !important; }

.h3-black  h3 { color: #000000 !important; }
.h3-blue   h3 { color: #4487F2 !important; }
.h3-gray   h3 { color: #777777 !important; }
.h3-green  h3 { color: #8EA33B !important; }
.h3-orange h3 { color: #F26225 !important; }
.h3-gold   h3 { color: #E58537 !important; }
.h3-pink   h3 { color: #E71E60 !important; }
.h3-purple h3 { color: #643B85 !important; }
.h3-yellow h3 { color: #F5DB2E !important; }
.h3-white  h3 { color: #FFFFFF !important; }

.h4-black  h4 { color: #000000 !important; }
.h4-blue   h4 { color: #4487F2 !important; }
.h4-gray   h4 { color: #777777 !important; }
.h4-green  h4 { color: #8EA33B !important; }
.h4-orange h4 { color: #F26225 !important; }
.h4-gold   h4 { color: #E58537 !important; }
.h4-pink   h4 { color: #E71E60 !important; }
.h4-purple h4 { color: #643B85 !important; }
.h4-yellow h4 { color: #F5DB2E !important; }
.h4-white  h4 { color: #FFFFFF !important; }


[drag=80 40, drop=center, set=h1-blue h3-green]

# Introducing

### GitPitch Slide Decks

Grid Alignment

https://docs.gitpitch.com/#/grid-layouts/alignment

[drag=width height, drop=x y, set=align-xxx]
  • align-left
  • align-right
  • align-top
  • align-bottom

Grid Fragments

https://docs.gitpitch.com/#/grid-layouts/fragments

[drag=width height, drop=x y, set=fragment]

Grid Synchronization

https://docs.gitpitch.com/#/grid-layouts/synchronization

sync=true 凄そうだけどあることを知っておくくらいで良さそう

Grid Animations

https://docs.gitpitch.com/#/grid-layouts/animations

[drag=width height, drop=x y, animate=type _speed]

自分はそんなに使わないと思うので、これもあることを知っておくくらいで良さそう

sogaohsogaoh

バグっぽいやつを見つけたので issue を上げた。
日本時間 14:00頃（ダブリン は 未明の5:00頃みたいなので気づいてもらえるのは 4〜5時間後だろうか）

issue に上げた動画に関して、.mov -> .gif に変換したときのコンソール出力

~/Desktop
❯ ffmpeg -i gitpitch_20201129.mov -r 10 gitpitch_20201129.gif
ffmpeg version 4.3.1 Copyright (c) 2000-2020 the FFmpeg developers
  built with Apple clang version 12.0.0 (clang-1200.0.32.27)
  configuration: --prefix=/usr/local/Cellar/ffmpeg/4.3.1_4 --enable-shared --enable-pthreads --enable-version3 --enable-avresample --cc=clang --host-cflags= --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libdav1d --enable-libmp3lame --enable-libopus --enable-librav1e --enable-librubberband --enable-libsnappy --enable-libsrt --enable-libtesseract --enable-libtheora --enable-libvidstab --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librtmp --enable-libspeex --enable-libsoxr --enable-videotoolbox --disable-libjack --disable-indev=jack
  libavutil      56. 51.100 / 56. 51.100
  libavcodec     58. 91.100 / 58. 91.100
  libavformat    58. 45.100 / 58. 45.100
  libavdevice    58. 10.100 / 58. 10.100
  libavfilter     7. 85.100 /  7. 85.100
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  7.100 /  5.  7.100
  libswresample   3.  7.100 /  3.  7.100
  libpostproc    55.  7.100 / 55.  7.100
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'gitpitch_20201129.mov':
  Metadata:
    major_brand     : qt
    minor_version   : 0
    compatible_brands: qt
    creation_time   : 2020-11-29T02:38:17.000000Z
    com.apple.quicktime.make: Apple
    com.apple.quicktime.model: MacBookAir9,1
    com.apple.quicktime.software: Mac OS X 10.15.7 (19H15)
    com.apple.quicktime.creationdate: 2020-11-29T11:38:16+0900
  Duration: 00:00:20.13, start: 0.000000, bitrate: 946 kb/s
    Stream #0:0(und): Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, bt709), 1488x1138 [SAR 1:1 DAR 744:569], 910 kb/s, 59.70 fps, 60 tbr, 6k tbn, 12k tbc (default)
    Metadata:
      creation_time   : 2020-11-29T02:38:17.000000Z
      handler_name    : Core Media Video
      encoder         : H.264
Stream mapping:
  Stream #0:0 -> #0:0 (h264 (native) -> gif (native))
Press [q] to stop, [?] for help
[swscaler @ 0x7fc72b3f1000] No accelerated colorspace conversion found from yuv420p to bgr8.
Output #0, gif, to 'gitpitch_20201129.gif':
  Metadata:
    major_brand     : qt
    minor_version   : 0
    compatible_brands: qt
    com.apple.quicktime.creationdate: 2020-11-29T11:38:16+0900
    com.apple.quicktime.make: Apple
    com.apple.quicktime.model: MacBookAir9,1
    com.apple.quicktime.software: Mac OS X 10.15.7 (19H15)
    encoder         : Lavf58.45.100
    Stream #0:0(und): Video: gif, bgr8, 1488x1138 [SAR 1:1 DAR 744:569], q=2-31, 200 kb/s, 10 fps, 100 tbn, 10 tbc (default)
    Metadata:
      creation_time   : 2020-11-29T02:38:17.000000Z
      handler_name    : Core Media Video
      encoder         : Lavc58.91.100 gif
frame=  202 fps= 21 q=-0.0 Lsize=     782kB time=00:00:20.11 bitrate= 318.6kbits/s dup=0 drop=1000 speed=2.08x
video:782kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 0.002498%

~/Desktop 10s

参考にした情報
https://hodalog.com/convert-mov-to-gif-using-mac/

sogaohsogaoh

↑の解説で、GitPitch の Grid Layout のことはだいたい理解できる感じ。

と思うので、Closeする。

このスクラップは2020/12/14にクローズされました