Fix image upload and resolver and use CommonMark

.env

@@ -16,6 +16,6 @@
 ###> symfony/framework-bundle ###
 APP_ENV=dev
 APP_SECRET=b8d83dc95005e7c416c2c3e4194c14ae
-TRUSTED_PROXIES=127.0.0.0/8,10.0.0.0/8,172.16.0.0/12,192.168.0.0/16
+TRUSTED_PROXIES=0.0.0.0/0
 #TRUSTED_HOSTS='^localhost|example\.com$'
 ###< symfony/framework-bundle ###

INSTALL.md

@@ -46,4 +46,28 @@ S3_ENDPOINT=https://s3.eu-west-1.amazonaws.com/
 
 You can find more details about your region on [AWS documentation](https://docs.aws.amazon.com/general/latest/gr/rande.html).
 
-For other providers you can check [Scaleway Object Storage](https://www.scaleway.com/en/docs/object-storage-feature/) or [digitalOcean Spaces](https://www.digitalocean.com/docs/spaces/resources/s3-sdk-examples/)
+For other providers you can check [Scaleway Object Storage](https://www.scaleway.com/en/docs/object-storage-feature/) or [digitalOcean Spaces](https://www.digitalocean.com/docs/spaces/resources/s3-sdk-examples/)
+
+
+### Custom metadata
+
+If you want to customize headers metadata (for google analytics or others), you can specify metadata as following
+```dotenv
+
+CUSTOM_META="
+    <meta name='description' content='My Knowledge website'>
+    <link rel='stylesheet' href='/custom.css'/>
+"
+
+```
+tooltip: This allows you to load custom css/js if needed
+
+### ReadOnly/ReadWrite Mode
+
+You can enable/disable readonly mode by setting the following property/
+```dotenv
+GLOBAL_PERMISSION=ro
+GLOBAL_PERMISSION=rw
+```
+
+In Read-only (ro) mode, you cannot edit/delete any document.

assets/js/main.js

@@ -19,9 +19,9 @@ App.router = routerManager;
 App.i18n = i18n;
 
 new Vue({
-  el: '#app',
-  template: '<App/>',
-  components: { App }
+    el: '#app',
+    template: '<App/>',
+    components: {App}
 });
 
 

assets/js/mixins/changePageTitleMixin.js

@@ -1,10 +1,11 @@
 export default {
-    methods : {
-        changePageTitle(){
+    methods: {
+        changePageTitle() {
             const titleFromMetadata = this.$store.getters.getCurrentArticle?.file?.metadata?.title;
             const articleTitle = this.$store.getters.getCurrentArticle?.file?.title;
-            const title = titleFromMetadata || articleTitle;
-            document.title = `${ title || this.$t('read.notFoundTitle') } | KIP`
+            const fileName = this.$store.getters.getCurrentArticle?.file?.name;
+            const title = titleFromMetadata || articleTitle || fileName;
+            document.title = `${title || this.$t('read.notFoundTitle')} | KIP`
         }
     }
 }

assets/js/pages/article/edit/Editor.vue

@@ -29,10 +29,32 @@
                 return {
                     hideModeSwitch: true,
                     useCommandShortcut: false,
+                    hooks: {
+                        addImageBlobHook: (blob, callback) => {
+                            const reader = new FileReader();
+                            reader.addEventListener("load", () => {
+                                this.upload(this.$getParentFolder(), blob.name, reader.result, callback);
+                            }, false);
+                            if (blob) {
+                                reader.readAsArrayBuffer(blob);
+                            }
+                            return false;
+                        }
+                    }
                 }
             }
         },
         methods: {
+            async upload(parentFolder, filename, binaryContent, callback) {
+                const res = (await this.$store.dispatch("uploadMedia", {
+                    filepath : `${parentFolder}/${ filename }`,
+                    parentFolder,
+                    filename,
+                    binaryContent,
+                })).data;
+
+                callback(res.path, res.name);
+            },
             onEditorChange() {
                 const content = this.$refs.toastuiEditor.invoke('getMarkdown');
                 this.$store.commit("setCurrentArticleMarkdownContent", content)

assets/js/pages/article/header/ArticleActions.vue

@@ -12,7 +12,8 @@
                 </a-tooltip>
             </a-button>
 
-            <a-button :type="$route.name === $routes.EDIT_ARTICLE ? 'primary' : 'default'">
+            <a-button v-if="$settings.canEdit"
+                      :type="$route.name === $routes.EDIT_ARTICLE ? 'primary' : 'default'">
                 <a-tooltip>
                     <template slot="title">{{ $t("edit.editTooltip")}}</template>
                     <router-link :to="{ path: $editLink() }">
@@ -31,7 +32,7 @@
             </a-button>
         </a-button-group>
 
-        <delete-article-action/>
+        <delete-article-action v-if="$settings.canDelete"/>
     </div>
 </template>
 
@@ -40,9 +41,9 @@
     import DeleteArticleAction from "pages/article/header/DeleteArticleAction";
 
     export default {
-        name : "ArticleActions",
+        name: "ArticleActions",
         components: {DeleteArticleAction, SaveArticleAction},
-        computed : {
+        computed: {
             slidesLink() {
                 return Router.url('knowledge_slides', {webpath: this.$getArticleWebpath()})
             }
@@ -53,7 +54,7 @@
 <style scoped>
 
     .article-options {
-        display:flex;
+        display: flex;
         flex: 0 0 auto;
     }
 

assets/js/pages/article/navbar/ArticlesTree.vue

@@ -36,15 +36,18 @@
                 // add a 'Home' link
                 articlesTree.subLinks.splice(0,0,{
                     name : this.$t("navBar.home"),
-                    path : "",
+                    path : "README.md",
                     scopedSlots : { title : 'title' }
                 });
 
                 // we hide the README at the root of the files to only display the "home" link
                 return articlesTree.subLinks.filter(files => files.name.toLowerCase() !== "readme");
             },
             selectedKeys(){
-                return [this.$getArticleWebpath()?.substring(1) || this.$route.path.substring(1)]
+                return [this.$getArticleWebpath() || this.$route.path.substring(1)]
+            },
+            ah(){
+                return this.$getArticleWebpath()
             }
         },
         watch : {
@@ -124,6 +127,7 @@
 
     .ant-tree-node-content-wrapper {
         position:relative;
+        transition: none !important;
     }
 
 </style>

assets/js/pages/article/read/ReadArticle.vue

@@ -4,11 +4,13 @@
              v-if="$store.getters.getCurrentArticle"
              :key="$store.getters.getCurrentArticle.file.path"
              v-hotkey="keymap">
-
             <a-row type="flex">
                 <a-col class="article-content-col"
                        :style="{ width : $store.getters.getTocCollapsed ? '100%' : 'calc(100% - 250px)' }">
-                    <article-content />
+                    <div v-if="$store.getters.getCurrentArticle.file.metadata.title" class="hero">
+                        <h1>{{ $store.getters.getCurrentArticle.file.metadata.title }}</h1>
+                    </div>
+                    <article-content/>
                 </a-col>
                 <a-layout-sider v-model="tocCollapsed"
                                 :collapsedWidth="0"
@@ -20,7 +22,7 @@
                     <a-col class="toc-col"
                            v-if="!$store.getters.getTocCollapsed"
                            :style="{ width : '250px', marginLeft : 'auto' }">
-                        <table-of-content class="toc" />
+                        <table-of-content class="toc"/>
                     </a-col>
                 </a-layout-sider>
             </a-row>
@@ -31,35 +33,33 @@
                       :visible="$store.getters.getTocDrawerOpened"
                       @close="onTocDrawerClose"
                       :width="300">
-                <table-of-content class="toc" />
+                <table-of-content class="toc"/>
             </a-drawer>
         </div>
 
-        <article-not-found v-if="notFound" />
+        <article-not-found v-if="notFound"/>
     </div>
 </template>
 
 <script>
     import TableOfContent from "pages/article/read/TableOfContent";
     import ArticleNotFound from "pages/article/read/ArticleNotFound";
     import ArticleContent from "pages/article/read/ArticleContent";
-
     import changePageTitleMixin from "mixins/changePageTitleMixin";
-
     export default {
-        name : "ReadArticle",
+        name: "ReadArticle",
         components: {ArticleContent, ArticleNotFound, TableOfContent},
-        mixins : [changePageTitleMixin],
-        data(){
+        mixins: [changePageTitleMixin],
+        data() {
             return {
-                notFound : false
+                notFound: false
             }
         },
-        computed : {
-            keymap(){
+        computed: {
+            keymap() {
                 return {
-                    'e' : e => this.goToEditArticle(e),
-                    'p' : e => this.goToPresentationMode(e),
+                    'e': e => this.goToEditArticle(e),
+                    'p': e => this.goToPresentationMode(e),
                 }
             },
             tocCollapsed: {
@@ -71,52 +71,48 @@
                 }
             },
         },
-        methods : {
-            async loadCurrentArticleFromPath(){
+        methods: {
+            async loadCurrentArticleFromPath() {
                 this.notFound = false;
                 const currentArticle = await this.$store.dispatch("loadCurrentArticleFromPath", this.$readLink());
-                if(!currentArticle){
+                if (!currentArticle.exists) {
                     this.notFound = true
                 }
             },
-            goToEditArticle(e){
-                if(e.target.tagName !== "INPUT"){
-                    this.$router.push({ path: this.$editLink() });
+            goToEditArticle(e) {
+                if (this.$settings.canEdit && e.target.tagName !== "INPUT") {
+                    this.$router.push({path: this.$editLink()});
                 }
             },
-            goToPresentationMode(e){
-                if(e.target.tagName !== "INPUT"){
+            goToPresentationMode(e) {
+                if (e.target.tagName !== "INPUT") {
                     window.location = Router.url('knowledge_slides', {webpath: this.$getArticleWebpath()})
                 }
             },
-            onBreakpointChanged(collapsed){
+            onBreakpointChanged(collapsed) {
                 this.$store.commit("setTocCollapsed", collapsed);
-
-                if(!collapsed && this.$store.getters.getTocCollapsed){
+                if (!collapsed && this.$store.getters.getTocCollapsed) {
                     this.$store.commit("setTocCollapsed", false)
                 }
             },
-            onTocDrawerClose(){
+            onTocDrawerClose() {
                 this.$store.commit("setTocDrawerOpened", false)
             }
         },
-        async created(){
+        async created() {
             await this.loadCurrentArticleFromPath();
             this.changePageTitle();
         }
     }
 </script>
 
 <style scoped>
-
     .toc {
         display: flex;
         justify-content: flex-end;
-        flex : 0 0 auto;
+        flex: 0 0 auto;
     }
-
     .toc-sider {
         background: none;
     }
 
-</style>

assets/js/plugins/utils.js

@@ -20,5 +20,11 @@ export default {
         Vue.prototype.$getArticleWebpath = function(){
             return this.$store.getters.getCurrentArticle?.file?.webpath;
         }
+
+        Vue.prototype.$getParentFolder = function(){
+            return this.$getArticleWebpath().substring(0, this.$getArticleWebpath().lastIndexOf("/"));
+        }
+
+        Vue.prototype.$settings = SETTINGS;
     }
-}
+}