scribo 1.0.38 → 1.0.40

data/app/assets/stylesheets/scribo/components/file-icons.css

@@ -0,0 +1,158 @@
+@define-mixin file-icons {
+  .name[data-path$=".txt"] {
+    background-image: url("scribo/icons/document.svg");
+  }
+  .name[data-path$=".html"] {
+    background-image: url("scribo/icons/html.svg");
+  }
+  .name[data-path$=".json"] {
+    background-image: url("scribo/icons/json.svg");
+  }
+  .name[data-path$=".yaml"] {
+    background-image: url("scribo/icons/yaml.svg");
+  }
+  .name[data-path$=".yml"] {
+    background-image: url("scribo/icons/yaml.svg");
+  }
+  .name[data-path$=".xml"] {
+    background-image: url("scribo/icons/xml.svg");
+  }
+  .name[data-path$=".plist"] {
+    background-image: url("scribo/icons/xml.svg");
+  }
+
+  .name[data-path$=".css"] {
+    background-image: url("scribo/icons/css.svg");
+  }
+  .name[data-path$=".scss"] {
+    background-image: url("scribo/icons/sass.svg");
+  }
+  .name[data-path$=".sass"] {
+    background-image: url("scribo/icons/sass.svg");
+  }
+
+  .name[data-path$=".md"] {
+    background-image: url("scribo/icons/markdown.svg");
+  }
+  .name[data-path$=".markdown"] {
+    background-image: url("scribo/icons/markdown.svg");
+  }
+  .name[data-path="LICENSE"] {
+    background-image: url("scribo/icons/markdown.svg");
+  }
+  // script
+  .name[data-path$=".js"] {
+    background-image: url("scribo/icons/javascript.svg");
+  }
+  .name[data-path$=".rb"] {
+    background-image: url("scribo/icons/ruby.svg");
+  }
+  .name[data-path="Gemfile"] {
+    background-image: url("scribo/icons/ruby.svg");
+  }
+  .name[data-path="Gemfile.lock"] {
+    background-image: url("scribo/icons/ruby.svg");
+  }
+
+  // image
+  .name[data-path$=".png"] {
+    background-image: url("scribo/icons/image.svg");
+  }
+  .name[data-path$=".gif"] {
+    background-image: url("scribo/icons/image.svg");
+  }
+  .name[data-path$=".bmp"] {
+    background-image: url("scribo/icons/image.svg");
+  }
+  .name[data-path$=".webp"] {
+    background-image: url("scribo/icons/image.svg");
+  }
+  .name[data-path$=".jpeg"] {
+    background-image: url("scribo/icons/image.svg");
+  }
+  .name[data-path$=".jpg"] {
+    background-image: url("scribo/icons/image.svg");
+  }
+  .name[data-path$=".svg"] {
+    background-image: url("scribo/icons/image.svg");
+  }
+  .name[data-path$=".ico"] {
+    background-image: url("scribo/icons/image.svg");
+  }
+
+  // video
+  .name[data-path$=".webm"] {
+    background-image: url("scribo/icons/video.svg");
+  }
+  .name[data-path$=".ogg"] {
+    background-image: url("scribo/icons/video.svg");
+  }
+  .name[data-path$=".mp4"] {
+    background-image: url("scribo/icons/video.svg");
+  }
+
+  // audio
+  .name[data-path$=".midi"] {
+    background-image: url("scribo/icons/audio.svg");
+  }
+  .name[data-path$=".mpeg"] {
+    background-image: url("scribo/icons/audio.svg");
+  }
+  .name[data-path$=".webm"] {
+    background-image: url("scribo/icons/audio.svg");
+  }
+  .name[data-path$=".wav"] {
+    background-image: url("scribo/icons/audio.svg");
+  }
+
+  // document
+  .name[data-path$=".doc"] {
+    background-image: url("scribo/icons/word.svg");
+  }
+  .name[data-path$=".docx"] {
+    background-image: url("scribo/icons/word.svg");
+  }
+  .name[data-path$=".ppt"] {
+    background-image: url("scribo/icons/powerpoint.svg");
+  }
+  .name[data-path$=".pptx"] {
+    background-image: url("scribo/icons/powerpoint.svg");
+  }
+  .name[data-path$=".csv"] {
+    background-image: url("scribo/icons/table.svg");
+  }
+  .name[data-path$=".xls"] {
+    background-image: url("scribo/icons/table.svg");
+  }
+  .name[data-path$=".xlsx"] {
+    background-image: url("scribo/icons/table.svg");
+  }
+  .name[data-path$=".pdf"] {
+    background-image: url("scribo/icons/pdf.svg");
+  }
+  .name[data-path$=".zip"] {
+    background-image: url("scribo/icons/zip.svg");
+  }
+
+  // font
+  .name[data-path$=".eot"] {
+    background-image: url("scribo/icons/font.svg");
+  }
+  .name[data-path$=".otf"] {
+    background-image: url("scribo/icons/font.svg");
+  }
+  .name[data-path$=".ttf"] {
+    background-image: url("scribo/icons/font.svg");
+  }
+  .name[data-path$=".woff"] {
+    background-image: url("scribo/icons/font.svg");
+  }
+  .name[data-path$=".woff2"] {
+    background-image: url("scribo/icons/font.svg");
+  }
+
+  // other
+  .name[data-path$=".link"] {
+    background-image: url("scribo/icons/http.svg");
+  }
+}

data/app/assets/stylesheets/scribo/components/open-editors.css

@@ -0,0 +1,83 @@
+.editors-pane {
+  flex: 1;
+  position: relative;
+  min-height: 100vh;
+
+  .editors-tabs {
+    display: flex;
+    flex-direction: row;
+    margin-left: 38px;
+
+    .editor-tab {
+      cursor: pointer;
+      padding: 2px 0.5rem 2px 0.5rem;
+      border-radius: 4px 4px 0 0;
+      border-top: 1px solid #ddd;
+      border-right: 1px solid #ddd;
+      font-size: smaller;
+      background: #f9f9f9;
+
+      html.dark & {
+        background: rgba(55, 65, 81, var(--tw-bg-opacity));
+      }
+
+      svg, i {
+        display: inline;
+        font-size: 70%;
+        margin-left: 0.4rem;
+        color: black;
+      }
+      svg, i:before {
+        content: "\f00d";
+      }
+
+      &:first-child {
+        border-left: 1px solid #ddd;
+      }
+
+      &.editor-tab--active {
+        background: #fff;
+
+        html.dark & {
+          background: #0a001f;
+        }
+      }
+
+      &.editor-tab--dirty {
+        font-weight: bold;
+        svg, i {
+          font-size: 80%;
+        }
+      }
+
+      &:hover {
+        svg, i {
+          color: black;
+          font-size: 70%;
+        }
+        svg, i:before {
+          content: "\f00d";
+        }
+      }
+
+      .name {
+        background-repeat: no-repeat;
+        background-position: 0px 50%;
+        padding-left: 22px;
+        line-height: 18px;
+        height: 18px;
+      }
+
+      @mixin file-icons;
+    }
+  }
+  .editors-contents {
+    .editor-content {
+      display: none;
+
+      &.editor-content--active {
+        display: block;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/scribo/components/tree-view.css

@@ -0,0 +1,312 @@
+.tree-view {
+  margin-top: 24px;
+  border-right: 1px solid #ccc;
+  font-size: 14px;
+  user-select: none;
+  -webkit-user-select: none;
+  height: 100%;
+  color: #000;
+
+  html.dark & {
+    color: rgb(209, 213, 219);
+  }
+  padding: 5px;
+  ul {
+    margin: 0;
+    padding: 0;
+    padding-left: 10px;
+  }
+
+  li {
+    list-style-type: none;
+    padding-left: 0;
+  }
+
+  a.list-item {
+    cursor: pointer;
+  }
+
+  ul.openEditors {
+    li {
+      font-style: italic;
+
+      [data-action="click->open-editors#save"] {
+        display: none;
+      }
+    }
+
+    li.dirty {
+      font-style: normal;
+
+      [data-action="click->open-editors#save"] {
+        display: inline;
+      }
+
+      .tools {
+        top: 2px;
+        display: inline;
+      }
+    }
+  }
+
+  & .section:first-of-type {
+    margin-top: 0;
+  }
+
+  .section {
+    display: block;
+    padding-left: 4px;
+    position: relative;
+    margin-top: 1rem;
+
+    .title {
+      font-weight: bold;
+      text-transform: uppercase;
+      background-repeat: no-repeat;
+      background-position: 0px 50%;
+      padding-left: 0px;
+      line-height: 25px;
+      height: 25px;
+    }
+
+    > ul {
+      padding-left: 0;
+    }
+  }
+
+  & .section > .tools {
+    display: none;
+    position: absolute;
+    right: 5px;
+
+    i {
+      cursor: pointer;
+      padding: 5px;
+    }
+
+    svg {
+      margin: 5px;
+    }
+  }
+
+  & > .section:hover > .tools {
+    display: inline;
+
+    a {
+      display: inline;
+    }
+  }
+
+  .list-item {
+    cursor: default;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .name {
+    background-repeat: no-repeat;
+    background-position: 0px 50%;
+    padding-left: 22px;
+    line-height: 18px;
+    height: 18px;
+
+    small {
+      padding-left: 5px;
+    }
+  }
+
+  a.list-item {
+    color: #000;
+    html.dark & {
+      color: rgb(209, 213, 219);
+    }
+    display: block;
+    padding-left: 4px;
+    position: relative;
+  }
+
+  a.list-item:hover {
+    background-color: #ddd;
+    html.dark & {
+      background-color: #666;
+    }
+  }
+
+  svg.s16 {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.tree-view .file > span {
+  background-image: url('file.svg');
+  background-size: 18px 18px;
+  padding-left: 0px;
+}
+
+.tree-view .list-item > .tools {
+  display: none;
+  position: absolute;
+  right: 5px;
+  top: -3px;
+
+  i {
+    padding: 5px;
+  }
+  svg {
+    margin: 5px;
+  }
+}
+
+.tree-view .list-item:hover > .tools {
+  display: inline;
+
+  a {
+    display: inline;
+  }
+}
+
+.tree-view li.entry.file.selected .list-item > .tools {
+  display: inline;
+
+  a {
+    display: inline;
+  }
+}
+
+.tree-view .entry {
+  font-weight: normal;
+}
+
+.tree-view .entry.selected {
+  font-weight: bold;
+  background-color: lightgray;
+  html.dark & {
+    background-color: #333;
+  }
+}
+
+.tree-view .list-item .name {
+  background-size: 18px 18px;
+}
+
+.tree-view .directory.closed > .list-item .name {
+  background-image: url('scribo/icons/folder.svg');
+  background-size: 18px 18px;
+}
+
+.tree-view .directory.open > .list-item .name {
+  background-image: url('scribo/icons/folder-open.svg');
+  background-size: 18px 18px;
+}
+
+// .tree-view .entry.selected:before {
+//   content: '';
+//   position: absolute;
+//   left: 0;
+//   right: 0;
+//   height: 25px;
+//   background-color: #f5f5f5;
+//   z-index: -1;
+// }
+
+.tree-view .directory.closed > ul {
+  display: none;
+}
+
+.tree-view .directory.closed > .list-item .name[data-path*="font"] {
+  background-image: url('scribo/icons/folder-font.svg');
+}
+.tree-view .directory.open > .list-item .name[data-path*="font"] {
+  background-image: url('scribo/icons/folder-font-open.svg');
+}
+
+.tree-view .directory.closed > .list-item .name[data-path*="image"] {
+  background-image: url('scribo/icons/folder-images.svg');
+}
+.tree-view .directory.open > .list-item .name[data-path*="image"] {
+  background-image: url('scribo/icons/folder-images-open.svg');
+}
+
+.tree-view .directory.closed > .list-item .name[data-path*="data"] {
+  background-image: url('scribo/icons/folder-database.svg');
+}
+.tree-view .directory.open > .list-item .name[data-path*="data"] {
+  background-image: url('scribo/icons/folder-database-open.svg');
+}
+
+.tree-view .directory.closed > .list-item .name[data-path*="style"] {
+  background-image: url('scribo/icons/folder-css.svg');
+}
+.tree-view .directory.open > .list-item .name[data-path*="syle"] {
+  background-image: url('scribo/icons/folder-css-open.svg');
+}
+
+.tree-view .directory.closed > .list-item .name[data-path*="css"] {
+  background-image: url('scribo/icons/folder-css.svg');
+}
+.tree-view .directory.open > .list-item .name[data-path*="css"] {
+  background-image: url('scribo/icons/folder-css-open.svg');
+}
+
+.tree-view .directory.closed > .list-item .name[data-path*="sass"] {
+  background-image: url('scribo/icons/folder-sass.svg');
+}
+.tree-view .directory.open > .list-item .name[data-path*="sass"] {
+  background-image: url('scribo/icons/folder-sass-open.svg');
+}
+
+.tree-view .directory.closed > .list-item .name[data-path*="scripts"] {
+  background-image: url('scribo/icons/folder-javascript.svg');
+}
+.tree-view .directory.open > .list-item .name[data-path*="scripts"] {
+  background-image: url('scribo/icons/folder-javascript-open.svg');
+}
+
+.tree-view .directory.closed > .list-item .name[data-path*="layout"] {
+  background-image: url('scribo/icons/folder-layout.svg');
+}
+.tree-view .directory.open > .list-item .name[data-path*="layout"] {
+  background-image: url('scribo/icons/folder-layout-open.svg');
+}
+
+.tree-view .directory.closed > .list-item .name[data-path*="pages"] {
+  background-image: url('scribo/icons/folder-views.svg');
+}
+.tree-view .directory.open > .list-item .name[data-path*="pages"] {
+  background-image: url('scribo/icons/folder-views-open.svg');
+}
+
+.tree-view .directory.closed > .list-item .name[data-path*="post"] {
+  background-image: url('scribo/icons/folder-archive.svg');
+}
+.tree-view .directory.open > .list-item .name[data-path*="post"] {
+  background-image: url('scribo/icons/folder-archive-open.svg');
+}
+
+.tree-view .directory.closed > .list-item .name[data-path*="component"] {
+  background-image: url('scribo/icons/folder-components.svg');
+}
+.tree-view .directory.open > .list-item .name[data-path*="component"] {
+  background-image: url('scribo/icons/folder-components-open.svg');
+}
+
+.tree-view .directory.closed > .list-item .name[data-path*="lib"] {
+  background-image: url('scribo/icons/folder-lib.svg');
+}
+.tree-view .directory.open > .list-item .name[data-path*="lib"] {
+  background-image: url('scribo/icons/folder-lib-open.svg');
+}
+
+.tree-view .directory.closed > .list-item .name[data-path*="include"] {
+  background-image: url('scribo/icons/folder-include.svg');
+}
+
+.tree-view .directory.open > .list-item .name[data-path*="include"] {
+  background-image: url('scribo/icons/folder-include-open.svg');
+}
+
+.tree-view .file > .list-item {
+  @mixin file-icons;
+}

data/app/javascript/scribo/application.js

@@ -0,0 +1,2 @@
+import "scribo/controllers"
+

data/app/javascript/scribo/controllers/application.js

@@ -0,0 +1,12 @@
+import { Application } from '@hotwired/stimulus'
+
+let application
+if (window.Stimulus) {
+  application = window.Stimulus
+} else {
+  application = Application.start()
+  application.debug = false
+  window.Stimulus = application
+}
+
+export { application }

data/app/javascript/scribo/controllers/image_editor_controller.js

@@ -0,0 +1,72 @@
+import { Controller } from "@hotwired/stimulus"
+import Painterro from "painterro"
+
+export default class extends Controller {
+  static targets = ["textarea"]
+  connect() {
+    const self = this
+    this.dirtyTrackingEnabled = false
+    this.editor = Painterro({
+      id: self.element.id,
+      toolbarPosition: "top",
+      hiddenTools: ["close", "save"],
+      hideByEsc: false,
+      saveByEnter: false,
+      onImageLoaded: (e) => {
+        self.dirtyTrackingEnabled = true
+      },
+      onChange: (e) => {
+        if (self.dirtyTrackingEnabled == false) {
+          return
+        }
+        let event = new CustomEvent("content-editor.changed", {
+          bubbles: true,
+          cancelable: true,
+          detail: {
+            contentId: self.data.get("content-id"),
+            dirty: true,
+          },
+        })
+        self.element.dispatchEvent(event)
+      },
+      saveHandler: (image, done) => {
+        const formData = new FormData()
+        formData.append("_method", "PATCH")
+        formData.append(
+          "content[data_with_frontmatter]",
+          image.asBlob(self.data.get("mime-type"))
+        )
+
+        fetch(self.data.get("save-url"), {
+          method: "POST",
+          headers: {
+            Accept: "application/json, text/javascript",
+            "X-CSRF-Token": document.querySelector("meta[name=csrf-token]")
+              .content,
+          },
+          body: formData,
+        }).then((response) => {
+          if (response.status == 200) {
+            let event = new CustomEvent("content-editor.changed", {
+              bubbles: true,
+              cancelable: true,
+              detail: {
+                contentId: self.data.get("content-id"),
+                dirty: false,
+              },
+            })
+            self.element.dispatchEvent(event)
+            done(false)
+          }
+        })
+      },
+    })
+    this.editor.toolByKeyCode = {}
+
+    this.editor.show(this.data.get("url"))
+  }
+  disconnect() {}
+  save() {
+    this.editor.save()
+  }
+}

data/app/javascript/scribo/controllers/index.js

@@ -0,0 +1,4 @@
+import { application } from "scribo/controllers/application"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+
+eagerLoadControllersFrom("scribo/controllers", application)