Closed2020/12/14にクローズ7

GitPitch 4.0 Learn

むずい。
ので記録していく

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

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)

Grid Fit

Fit for Text

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

Your text goes here.

文字の拡大縮小
- fit=2 -> 2倍に拡大
- fit=0.5 -> 0.5倍に縮小

Fit fot 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

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

使わなさそうなのでSkip

Fit for Tables

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

これは使ったことある

Fit for Images

![drag=width height, drop=x y, stretch=true](path/to/image.ext)

stretch=true , flow=stack が使えるらしい（でも自分はあまり使わなさそう）

Grid Behaviors

Grid Set

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

build-in styles
https://docs.gitpitch.com/#/theme/utility-styles

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

[drag=width height, drop=x y, set=align-xxx]

align-left
align-right
align-top
align-bottom

Grid Fragments

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

Grid Synchronization

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

Grid Animations

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

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

バグっぽいやつを見つけたので 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

参考にした情報

仕様だった。
よくわかる解説↓

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

と思うので、Closeする。

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