@traq-markdown-engine/sdk 0.1.0

package/styles/animation/_atsumori.sass

@@ -0,0 +1,19 @@
+@keyframes atsumori
+  0%
+    transform: scale(2)
+    filter: blur(0.3em) opacity(0) saturate(0.4) drop-shadow(0 0 0 rgba(136,136,136,0))
+  15%
+    transform: scale(1)
+    filter: blur(0) opacity(1) saturate(0.4) drop-shadow(0 0 0 rgba(136,136,136,0))
+  20%
+    transform: scale(1.3)
+    filter: blur(0) opacity(1) saturate(1) drop-shadow(0 0 0 rgba(136,136,136,0))
+  25%
+    transform: scale(1)
+    filter: blur(0) opacity(1) saturate(1.5) drop-shadow(-0.1em -0.1em 0.3em rgba(136,136,136,0.5))
+  35%
+    transform: scale(1)
+    filter: blur(0) opacity(1) saturate(1.5) drop-shadow(-0.5em -0.5em 0 rgba(136,136,136,0))
+  100%
+    transform: scale(1)
+    filter: blur(0) opacity(1) saturate(1.5) drop-shadow(0 0 0 rgba(136,136,136,0))

package/styles/animation/_attract.sass

@@ -0,0 +1,19 @@
+@use "sass:math"
+
+@keyframes attract
+  @for $i from 0 to 5
+    #{$i * 20}%
+      // 赤
+      filter: invert(1 - math.abs(1 - 0.4 * $i)) grayscale(1) brightness(0.4) sepia(1) hue-rotate(310deg) saturate(6) contrast(0.8)
+    #{$i * 20 + 1.528*2}%
+      // 黄
+      filter: invert(1 - math.abs(1 - 0.4 * ($i + 0.1528*2))) grayscale(1) brightness(0.7) sepia(1) hue-rotate(5deg) saturate(5) contrast(0.7)
+    #{$i * 20 + 2.778*2}%
+      // 緑
+      filter: invert(1 - math.abs(1 - 0.4 * ($i + 0.2778*2))) grayscale(1) brightness(0.4) sepia(1) hue-rotate(50deg) saturate(10) contrast(0.8)
+    #{$i * 20 + 6.389*2}%
+      // 青
+      filter: invert(1 - math.abs(1 - 0.4 * ($i + 0.6389*2))) grayscale(1) brightness(0.3) sepia(1) hue-rotate(180deg) saturate(7) contrast(0.8)
+  100%
+    // 赤
+    filter: invert(0) grayscale(1) brightness(0.4) sepia(1) hue-rotate(310deg) saturate(6) contrast(0.8)

package/styles/animation/_conga.sass

@@ -0,0 +1,11 @@
+@keyframes conga
+  0%
+    background-position-x: 0
+  100%
+    background-position-x: 1em
+
+@keyframes conga-inv
+  0%
+    background-position-x: 0
+  100%
+    background-position-x: -1em

package/styles/animation/_flashy.sass

@@ -0,0 +1,7 @@
+@use "sass:math"
+
+@keyframes flashy
+  $len: 10
+  @for $i from 0 to $len
+    #{math.percentage(math.div($i, $len))}
+      filter: drop-shadow(0 0 0.2em hsl(math.div($i, $len) * 360, 50%, 50%))

package/styles/animation/_happa.sass

@@ -0,0 +1,15 @@
+@use "sass:math"
+
+@keyframes happa
+  $len: 8
+  @for $i from 0 to $len
+    $y: 0
+    @if $i % 2 != 0
+      $y: -0.2em
+
+    $r: 0
+    @if $i >= math.div($len, 2)
+      $r: 0.5turn
+
+    #{math.percentage(math.div($i, $len))}
+      transform: translateY($y) rotateY($r)

package/styles/animation/_index.sass

@@ -0,0 +1,18 @@
+@forward './ascension'
+@forward './atsumori'
+@forward './attract'
+@forward './conga'
+@forward './flashy'
+@forward './happa'
+@forward './invert'
+@forward './parrot'
+@forward './party'
+@forward './pull'
+@forward './pyon'
+@forward './rainbow'
+@forward './rotate'
+@forward './shake'
+@forward './stretch'
+@forward './turn'
+@forward './wiggle'
+@forward './zoom'

package/styles/animation/_invert.sass

@@ -0,0 +1,5 @@
+@keyframes invert
+  0%
+    filter: invert(0)
+  50%
+    filter: invert(1)

package/styles/animation/_parrot.sass

@@ -0,0 +1,5 @@
+@keyframes parrot
+  0%
+    filter: hue-rotate(0)
+  100%
+    filter: hue-rotate(1turn)

package/styles/animation/_party.sass

@@ -0,0 +1,11 @@
+@keyframes party
+  0%
+    transform: skewX(0deg) scaleY(0.8)
+  25%
+    transform: skewX(-20deg) scaleY(1)
+  50%
+    transform: rotate(0deg) scaleY(1.25)
+  75%
+    transform: skewX(20deg) scaleY(1)
+  100%
+    transform: skewX(0deg) scaleY(0.8)

package/styles/animation/_pull.sass

@@ -0,0 +1,9 @@
+@keyframes pull
+  0%
+    transform: skew(0, 0)
+  25%
+    transform: skew(15deg, 15deg)
+  50%
+    transform: skew(0, 0)
+  75%
+    transform: skew(-15deg, -15deg)

package/styles/animation/_pyon.sass

@@ -0,0 +1,9 @@
+@keyframes pyon
+  0%
+    transform: translateY(0) scale(1, 1)
+  30%
+    transform: translateY(-0.2em) scale(1, 1)
+  60%
+    transform: translateY(0) scale(1, 1)
+  80%
+    transform: translateY(0) scale(1.1, 0.9)

package/styles/animation/_rainbow.sass

@@ -0,0 +1,5 @@
+@keyframes rainbow
+  0%
+    filter: sepia(1) saturate(20) hue-rotate(0)
+  100%
+    filter: sepia(1) saturate(20) hue-rotate(1turn)

package/styles/animation/_rotate.sass

@@ -0,0 +1,11 @@
+@keyframes rotate
+  0%
+    transform: rotate(0)
+  100%
+    transform: rotate(1turn)
+
+@keyframes rotate-inv
+  0%
+    transform: rotate(0)
+  100%
+    transform: rotate(-1turn)

package/styles/animation/_shake.sass

@@ -0,0 +1,9 @@
+@keyframes shake
+  0%
+    transform: rotate(0deg)
+  25%
+    transform: rotate(20deg)
+  50%
+    transform: rotate(0deg)
+  75%
+    transform: rotate(-20deg)

package/styles/animation/_stretch.sass

@@ -0,0 +1,47 @@
+@use "sass:math"
+
+@keyframes stretch
+  0%
+    transform: scaleX(1.0)
+  20%
+    transform: scaleX(1.75)
+
+  $start: 22
+  $end: 50
+  @for $i from 0 through math.div($end - $start, 2)
+    $s: 1.65
+    @if $i % 2 != 0
+      $s: 1.85
+
+    #{$start + $i*2}%
+      transform: scaleX($s)
+
+  52%
+    transform: scaleX(1.75)
+  62%
+    transform: scaleX(0.8)
+  68%
+    transform: scaleX(1.0)
+
+@keyframes stretch-v
+  0%
+    transform: scaleY(1.0)
+  20%
+    transform: scaleY(1.75)
+
+  $start: 22
+  $end: 50
+  @for $i from 0 through math.div($end - $start, 2)
+    $s: 1.65
+    @if $i % 2 != 0
+      $s: 1.85
+
+    #{$start + $i*2}%
+      transform: scaleY($s)
+
+  52%
+    transform: scaleY(1.75)
+  62%
+    transform: scaleY(0.8)
+  68%
+    transform: scaleY(1.0)

package/styles/animation/_turn.sass

@@ -0,0 +1,11 @@
+@keyframes turn
+  0%
+    transform: rotateY(0)
+  100%
+    transform: rotateY(1turn)
+
+@keyframes turn-v
+  0%
+    transform: rotateX(0)
+  100%
+    transform: rotateX(1turn)

package/styles/animation/_wiggle.sass

@@ -0,0 +1,23 @@
+@keyframes wiggle
+  0%
+    transform: translate(1px, 1px) rotate(0deg)
+  10%
+    transform: translate(-1px, -2px) rotate(-1deg)
+  20%
+    transform: translate(-3px, 0px) rotate(1deg)
+  30%
+    transform: translate(3px, 2px) rotate(0deg)
+  40%
+    transform: translate(1px, -1px) rotate(1deg)
+  50%
+    transform: translate(-1px, 2px) rotate(-1deg)
+  60%
+    transform: translate(-3px, 1px) rotate(0deg)
+  70%
+    transform: translate(3px, 1px) rotate(-1deg)
+  80%
+    transform: translate(-1px, -1px) rotate(1deg)
+  90%
+    transform: translate(1px, 2px) rotate(0deg)
+  100%
+    transform: translate(1px, -2px) rotate(-1deg)

package/styles/animation/_zoom.sass

@@ -0,0 +1,9 @@
+@keyframes zoom
+  0%
+    transform: scale(1.0)
+  25%
+    transform: scale(1.5)
+  50%
+    transform: scale(1.0)
+  75%
+    transform: scale(0.5)

package/styles/index.scss

@@ -0,0 +1,3 @@
+@forward './markdown';
+@forward './stamp';
+@forward './stampEffect';

package/styles/markdown.scss

@@ -0,0 +1,377 @@
+$link-color: #0366d6 !default;
+$hr-color: #e1e4e8 !default;
+$h6-color: #6a737d !default;
+$quote-text-color: #6a737d !default;
+$quote-bar-color: #dfe2e5 !default;
+$code-background-color: #243342 !default;
+$code-file-name-background-color: rgba(0, 0, 0, 0.1) !default;
+$table-td-border-color: #dfe2e5 !default;
+$table-tr-border-color: #c6cbd1 !default;
+$table-tr-background-color: #fff !default;
+$table-tr-background-color2: #f6f8fa !default;
+$img-background-color: #fff !default;
+$mark-color: black !default;
+$mark-background-color: yellow !default;
+$spoiler-background-color: black !default;
+$spoiler-shown-background-color: rgba(0, 0, 0, 0.1) !default;
+$link-text-color: #005bac !default;
+$link-background-color: transparent !default;
+$link-highlight-text-color: #005bac !default;
+$link-highlight-background-color: #faffad !default;
+
+.markdown-body {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  line-height: 1.2;
+  word-wrap: break-word;
+
+  > :first-child {
+    margin-top: 0 !important;
+  }
+  > :last-child {
+    margin-bottom: 0 !important;
+  }
+
+  a {
+    color: $link-color;
+    background-color: initial;
+    text-decoration: none;
+    &:active,
+    &:hover {
+      text-decoration: underline;
+      outline-width: 0;
+    }
+    &:not([href]) {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+
+  strong {
+    font-weight: bold;
+  }
+
+  hr {
+    height: 0.25em;
+    padding: 0;
+    margin: 12px 0;
+    border: 0;
+    background-color: $hr-color;
+    overflow: hidden;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 12px;
+    margin-bottom: 8px;
+    font-weight: bold;
+    line-height: 1.25;
+  }
+  h1,
+  h2 {
+    padding-bottom: 0.3em;
+  }
+  h1 {
+    font-size: 2em;
+  }
+  h2 {
+    font-size: 1.5em;
+  }
+  h3 {
+    font-size: 1.25em;
+  }
+  h4 {
+    font-size: 1em;
+  }
+  h5 {
+    font-size: 0.875em;
+    transform: rotate(0.03deg);
+  }
+  h6 {
+    font-size: 0.85em;
+    transform: rotate(0.03deg);
+    color: $h6-color;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 8px;
+  }
+
+  blockquote {
+    position: relative;
+    margin-top: 0;
+    margin-bottom: 8px;
+    padding: 0 12px;
+    color: $quote-text-color;
+    > :first-child {
+      margin-top: 0;
+    }
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      display: block;
+      top: 0;
+      left: 0;
+      width: 0.25em;
+      height: 100%;
+      background: $quote-bar-color;
+    }
+  }
+  > blockquote,
+  :not(blockquote) > blockquote {
+    $bottom-padding: 4px;
+    padding-bottom: $bottom-padding;
+    overflow-x: auto;
+    &::before {
+      height: calc(100% - #{$bottom-padding});
+    }
+  }
+
+  ol {
+    list-style: decimal;
+  }
+  ul {
+    list-style: disc;
+  }
+  ol,
+  ul {
+    padding-left: 2em;
+    margin-top: 0;
+    margin-bottom: 8px;
+    word-break: break-all;
+    ol {
+      list-style-type: lower-roman;
+    }
+    ol,
+    ul {
+      margin-top: 0;
+      margin-bottom: 0;
+      ol {
+        list-style-type: lower-alpha;
+      }
+    }
+  }
+  li {
+    > p {
+      margin-top: 8px;
+    }
+    + li {
+      margin-top: 4px;
+    }
+  }
+  > ul,
+  > ol,
+  :not(li) > ul,
+  :not(li) > ol {
+    padding-bottom: 4px;
+    overflow: auto;
+  }
+
+  code,
+  pre {
+    font-family:
+      SFMono-Regular,
+      Consolas,
+      Liberation Mono,
+      Menlo,
+      monospace;
+    font-size: 0.85em;
+    border-radius: 4px;
+    background-color: $code-background-color;
+  }
+  code {
+    display: inline-block;
+    padding: 2px 6px;
+    margin: 2px 0;
+  }
+  s > code {
+    text-decoration: line-through;
+  }
+  pre {
+    position: relative;
+    margin-top: 0;
+    margin-bottom: 16px;
+    overflow-wrap: normal;
+    line-height: 1.45;
+    cite {
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: 0 4px;
+      border-bottom-left-radius: 4px;
+      background-color: $code-file-name-background-color;
+    }
+    code {
+      display: block;
+      padding: 16px;
+      margin: 0;
+      border: 0;
+      font-size: 1em;
+      overflow: auto;
+      word-break: normal;
+      overflow-wrap: normal;
+      white-space: pre;
+      line-height: inherit;
+    }
+  }
+
+  table {
+    display: block;
+    width: 100%;
+    margin-top: 0;
+    margin-bottom: 16px;
+    padding-bottom: 4px;
+    overflow: auto;
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+  td,
+  th {
+    padding: 4px 12px;
+    border: 1px solid $table-td-border-color;
+  }
+  th {
+    font-weight: bold;
+  }
+  tr {
+    border-top: 1px solid $table-tr-border-color;
+    background-color: $table-tr-background-color;
+    &:nth-child(2n) {
+      background-color: $table-tr-background-color2;
+    }
+  }
+
+  mark {
+    color: $mark-color;
+    background-color: $mark-background-color;
+  }
+
+  img {
+    max-width: 100%;
+    border-style: none;
+    box-sizing: initial;
+  }
+
+  .katex-block {
+    overflow: auto;
+    margin-bottom: 4px;
+  }
+
+  .spoiler {
+    color: transparent;
+    background-color: $spoiler-background-color;
+    user-select: none;
+    cursor: pointer;
+
+    &:not([shown]) {
+      * {
+        visibility: hidden;
+      }
+    }
+
+    &[shown] {
+      color: inherit;
+      background-color: $spoiler-shown-background-color;
+    }
+  }
+
+  .message-user-link,
+  .message-channel-link,
+  .message-group-link {
+    cursor: pointer;
+    color: $link-text-color;
+    background-color: $link-background-color;
+    font-weight: bold;
+  }
+  .message-user-link-highlight,
+  .message-group-link-highlight {
+    color: $link-highlight-text-color;
+    background-color: $link-highlight-background-color;
+  }
+}
+
+.markdown-inline-body {
+  a {
+    color: $link-color;
+    background-color: initial;
+    text-decoration: none;
+    &:active,
+    &:hover {
+      text-decoration: underline;
+      outline-width: 0;
+    }
+    &:not([href]) {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+  code {
+    display: inline;
+    padding: 2px 6px;
+    font-family:
+      SFMono-Regular,
+      Consolas,
+      Liberation Mono,
+      Menlo,
+      monospace;
+    font-size: 0.85em;
+    border-radius: 4px;
+    background-color: $code-background-color;
+  }
+  s > code {
+    text-decoration: line-through;
+  }
+
+  mark {
+    color: $mark-color;
+    background-color: $mark-background-color;
+  }
+
+  .spoiler {
+    color: transparent;
+    background-color: $spoiler-background-color;
+    user-select: none;
+    cursor: pointer;
+
+    &:not([shown]) {
+      * {
+        visibility: hidden;
+      }
+    }
+
+    &[shown] {
+      color: inherit;
+      background-color: $spoiler-shown-background-color;
+    }
+  }
+
+  .message-user-link,
+  .message-channel-link,
+  .message-group-link {
+    cursor: pointer;
+    color: $link-text-color;
+    background-color: $link-background-color;
+    font-weight: bold;
+  }
+  .message-user-link-highlight,
+  .message-group-link-highlight {
+    color: $link-highlight-text-color;
+    background-color: $link-highlight-background-color;
+  }
+
+  .message-emoji {
+    &.large,
+    &.ex-large {
+      font-size: 24px;
+    }
+  }
+}

package/styles/stamp.scss

@@ -0,0 +1,32 @@
+.emoji {
+  display: inline-block;
+  text-indent: 999%;
+  white-space: nowrap;
+  overflow: hidden;
+  color: transparent;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center center;
+  vertical-align: middle;
+}
+
+.emoji-effect {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.emoji {
+  width: 1em;
+  height: 1em;
+  font-size: 24px;
+
+  &.ex-large {
+    font-size: 48px;
+  }
+  &.large {
+    font-size: 32px;
+  }
+  &.small {
+    font-size: 16px;
+  }
+}