Create Blog “test-1”

content/blog/3-tech-challenges-to-face-when-you-build-mental-health-app.md

@@ -26,15 +26,15 @@ Probably no public health system will be able to respond to those needs. Therefo
 
 As software developers specializing in building apps for depression, anxiety, and other mental disorders we have distinguished **3 challenges that every emotional support app team will likely face**.
 
-<div className="image">![Software developers Bright Inventions](../../static/images/blog_dawid_dominik_slawek.png "Software developers Bright Inventions")</div>
+<div className="image">![Software developers Bright Inventions](/images/blog_dawid_dominik_slawek.png "Software developers Bright Inventions")</div>
 
 ## Data security and privacy
 
 **Dominik, Frontend Developer at Bright Inventions:**
 
 Privacy of personal information has always been a serious topic in [software development](/our-areas/custom-software-development). Yet it is especially important in the case of data connected to personal health. Every **data leak is a potential complete loss of trust in a company**. 
 
-<div className="image">![Dominik's quote on data leak](../../static/images/dominik_quote_mental_app.png "Dominik's quote")</div>
+<div className="image">![Dominik's quote on data leak](/images/dominik_quote_mental_app.png "Dominik's quote")</div>
 
 Moreover, it can be extra catastrophic when taking into account the fact that in many countries **health information privacy is protected by law**. 
 
@@ -70,15 +70,15 @@ We should **be open about the data we collect about the users**. You can be even
 
 **Providing various methods so the user can reach support easier if he/she is in need**. Support contact information hidden between thousand of subpages is one of the worst things I can think of. By showing users a clear indication of where they should click, either by some chat widget or highlighted link, we show that we care about them and that they matter. Thus we build a bond between the brand and the customers.
 
-<div className="image">![Dawid's quote on support contact info](../../static/images/dawid_quote_mental_app.png "Dawid's quote")</div>
+<div className="image">![Dawid's quote on support contact info](/images/dawid_quote_mental_app.png "Dawid's quote")</div>
 
 ## Designing inclusive UI
 
 **Sławek, Fullstack Developer at Bright Inventions:**
 
 A clear, uncomplicated graphical user interface is one of the key factors of mental health applications. It is not so difficult to imagine that **even tech-savvy users might have issues with the app especially being overwhelmed with their personal issues**. It is also important to remember that users won’t expect advanced animations, complex features, or modern designs. They will focus on receiving the help they need.
 
-<div className="image">![Slawek's quote on mental health app users](../../static/images/slawek_quote_mental_app.png "Slawek's quote")</div>
+<div className="image">![Slawek's quote on mental health app users](/images/slawek_quote_mental_app.png "Slawek's quote")</div>
 
 Overcomplicated design can even be an obstacle for less technical users to receive the professional help they look for.
 

content/blog/5-web-development-rules-from-dont-make-me-think-book.md

@@ -15,7 +15,7 @@ language: en
 ---
 **Over 20 years have passed since the first edition of Steve Krug’s book “Don’t Make Me Think” and we can all agree that this is a classic book on web development and UX design. During these two decades the web pages have changed but lots of principles from this book have remained as actual and powerful as they used to be in 2000. I chose the top 5 things that still make me think about the “Don’t Make Me Think” book.** 
 
-![Book "Don't Make Me Think"](../../static/images/blog_post_krug.png "")
+![Book "Don't Make Me Think"](/images/blog_post_krug.png)
 
 ## 1. People don't read – they scan your website
 
@@ -47,4 +47,4 @@ Kruk wrote that in 2000 and it is still the crucial rule of [web development](/o
 
 ## “Don’t Make Me Think” Book Summary
 
-Krug’s book shows how to conquer the chaos that were websites at the turn of the 20th and 21st centuries. **The book is still amazingly up to date because Steve Krug actually built the whole ground for web development and usability testing.** We are where we are thanks to the books like “Don’t Make Me Think”. I still recommend it even if the included screens from various web pages are old, and so cringe. 😉 But Krug's statements are not old at all. Reading this book is like a journey to the past with many timeless stops on the way. Every web developer, product designer, copywriter and marketing specialist should read it.
+Krug’s book shows how to conquer the chaos that were websites at the turn of the 20th and 21st centuries. **The book is still amazingly up to date because Steve Krug actually built the whole ground for web development and usability testing.** We are where we are thanks to the books like “Don’t Make Me Think”. I still recommend it even if the included screens from various web pages are old, and so cringe. 😉 But Krug's statements are not old at all. Reading this book is like a journey to the past with many timeless stops on the way. Every web developer, product designer, copywriter and marketing specialist should read it.

content/blog/img-test-2.md

@@ -0,0 +1,15 @@
+---
+author: krystian
+date: 2024-04-11T10:54:25.709Z
+meaningfullyUpdatedAt: 2024-04-11T10:54:25.729Z
+title: "img test 2 "
+layout: post
+image: /images/miini-charts-in-main-statistics.png
+hidden: false
+comments: true
+published: true
+language: en
+---
+<div className="image">![](/images/order-new-preparing-delivering-ratio-idea.webp "")</div>
+
+<div className="image">![](/images/extra-column-on-bigger-resolutions.jpeg "")</div>

content/blog/img-test.md

@@ -0,0 +1,13 @@
+---
+author: krystian
+date: 2024-04-10T12:31:54.147Z
+meaningfullyUpdatedAt: 2024-04-10T12:31:54.167Z
+title: img test
+layout: post
+image: /images/baltic.jpg
+hidden: false
+comments: true
+published: true
+language: en
+---
+<div className="image">![](/images/baltic.jpg "")</div>

content/blog/test-1.md

@@ -0,0 +1,17 @@
+---
+author: izabela
+tags:
+  - HealthTech
+date: 2024-04-12T11:09:50.564Z
+meaningfullyUpdatedAt: 2024-04-12T11:09:50.605Z
+title: test
+layout: post
+image: /images/2012_tech_news_blog_cover.png
+hidden: false
+comments: true
+published: true
+language: en
+---
+<div className="image">![h](/images/tomasz_valentine-s_day-1-.png "")</div>
+
+<div className="image">![](/images/1665996904048.jpg "h")</div>

gatsby-config.ts

@@ -75,8 +75,8 @@ const gatsbyConfig: GatsbyConfig = {
     {
       resolve: 'gatsby-plugin-manifest',
       options: {
-        name: 'gatsby-starter-default',
-        short_name: 'starter',
+        name: 'bright inventions',
+        short_name: 'bright inventions',
         start_url: '/',
         background_color: '#fff',
         theme_color: '#fff',

package.json

@@ -16,7 +16,7 @@
     "gatsby": "^5.12.4",
     "gatsby-plugin-disqus": "^1.2.6",
     "gatsby-plugin-feed": "^5.12.0",
-    "gatsby-plugin-image": "^3.12.0",
+    "gatsby-plugin-image": "^3.13.1",
     "gatsby-plugin-json-pages": "^1.0.0",
     "gatsby-plugin-manifest": "^5.12.0",
     "gatsby-plugin-mdx": "^5.13.1",

src/cms/hiddenImageConfig.tsx

@@ -2,16 +2,6 @@ import { EditorComponentField, EditorComponentOptions, PreviewTemplateComponentP
 import React from 'react'
 import { List, Map } from 'immutable'
 
-function srcFromSourceMarkdownToRelative(src: string | undefined) {
-  const updated = (src?.startsWith('/') ? src : src?.replace('../../static', '')) ?? ''
-  console.log('srcFromSourceMarkdownToRelative', src , '->', updated)
-  return updated;
-}
-
-function srcFromPreviewToRelativeInMarkdown(src: string | undefined) {
-  return (src?.startsWith('/') ? `../../static${src}` : src) ?? ''
-}
-
 interface ImageFieldData {
   src: string
   alt: string
@@ -66,16 +56,15 @@ export const hiddenImageConfig: EditorComponentOptionsOf<ImageFieldData> = {
   //
   // Additionally, it's recommended that you use non-greedy capturing groups (e.g.
   // `(.*?)` vs `(.*)`), especially if matching against newline characters.
-  pattern: /^<div\s+className="(.*?)">\s*!\[(.*?)]\((.*?)\s*("(.*?)")?\)<\/div>$/s,
+  pattern: /^<div\s+className="(.*?)">\s*!\[(.*?)]\((.*?)\s*("(.*?)")?\)<\/div>$/sm,
   // Given a RegExp Match object
   // (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match#return_value),
   // return an object with one property for each field defined in `fields`.
   //
   // This is used to populate the custom widget in the markdown editor in the CMS.
   fromBlock: function (match: any[]) {
-    const src: string = match[3]
     return {
-      src: srcFromSourceMarkdownToRelative(src),
+      src: match[3],
       alt: match[2],
       title: match[5],
       hideOnMobile: match[1] == 'hide-on-mobile',
@@ -90,7 +79,7 @@ export const hiddenImageConfig: EditorComponentOptionsOf<ImageFieldData> = {
     const className = data.hideOnMobile ? 'hide-on-mobile' : 'image'
     return `<div className="${className}">![${
       data.alt ?? ''
-    }](${srcFromPreviewToRelativeInMarkdown(data.src)} "${data.title ?? ''}")</div>`
+    }](${data.src} "${data.title ?? ''}")</div>`
   },
   // Preview output for this component. Can either be a string or a React component
   // (component gives better render performance)

src/cms/mdx-preview.tsx

@@ -8,21 +8,30 @@ import {
 import styled from 'styled-components'
 import { ErrorBoundary } from './error-boundary'
 import { mdxOptionsForPreviewOnly } from '../gatsby-mdx-options'
+import { CmsWidgetPreviewProps } from 'netlify-cms-core'
+
+export type GetAssetFunction = (asset: string) => {
+  url: string;
+  path: string;
+  field?: any;
+  fileObj: File;
+};
 
 interface MdxPreviewProps {
   value: string // actual mdx
+  getAsset: GetAssetFunction
 }
 
 const Error = styled.div`
   color: red;
 `
 
-export const MdxPreview = ({ value }: MdxPreviewProps) => {
+export const MdxPreview = ({ value, getAsset }: CmsWidgetPreviewProps) => {
   const [compiledResult, setCompiledResult] = useState<MDXCompiledContentOrError | null>(null)
 
   useEffect(() => {
-    compileMDXToReactComponentSafely(value, mdxOptionsForPreviewOnly).then(setCompiledResult)
-  }, [value])
+    compileMDXToReactComponentSafely(value, mdxOptionsForPreviewOnly(getAsset)).then(setCompiledResult)
+  }, [value, getAsset])
 
   const error = compiledResult?.error
   const Component = compiledResult?.Component

src/gatsby-mdx-options.ts

@@ -5,6 +5,7 @@ import remarkMath from 'remark-math'
 import rehypeMathJax from 'rehype-mathjax'
 import { BaseProcessorOptions } from '@mdx-js/mdx/lib/core'
 import { replaceImageUrlPrefix } from './replace-image-url-prefix'
+import { GetAssetFunction } from './cms/mdx-preview'
 
 export type MdxOptions = Pick<BaseProcessorOptions, 'remarkPlugins' | 'rehypePlugins'>
 export const mdxOptions: MdxOptions = {
@@ -17,7 +18,7 @@ export const mdxOptions: MdxOptions = {
     rehypeMathJax
   ]
 }
-export const mdxOptionsForPreviewOnly: MdxOptions = {
+export const mdxOptionsForPreviewOnly = (getAsset: GetAssetFunction): MdxOptions => ({
   remarkPlugins: [
     // gatsby-remark-image
     // in SSR it only picks up relative paths e.g. ../../static/image/something.png
@@ -26,13 +27,13 @@ export const mdxOptionsForPreviewOnly: MdxOptions = {
     // however, in preview i.e. in browser, gatsby-remark-image doesn't work (or at least I don't know how to make it work there)
     // and the /static/image/... path doesn't load anything
     // so when in preview, we replace ../../static/image/something.png with /image/something.png
-    [replaceImageUrlPrefix, { prefix: '../../static' }],
+    [replaceImageUrlPrefix, { getAsset }],
     ...mdxOptions.remarkPlugins!
   ],
   rehypePlugins: [
     ...mdxOptions.rehypePlugins!
   ]
-}
+})
 
 export const gatsbyMdxOptions = {
   extensions: [`.md`, `.mdx`],

src/replace-image-url-prefix.ts

@@ -1,13 +1,16 @@
 import { Plugin } from 'unified'
 import {visit} from 'unist-util-visit'
+import { GetAssetFunction } from './cms/mdx-preview'
 
-export const replaceImageUrlPrefix: Plugin<[{ prefix: string }]> = ({ prefix }) => {
+export const replaceImageUrlPrefix: Plugin<[{ prefix: string, getAsset: GetAssetFunction }]> = ({ prefix, getAsset }) => {
   return function (tree) {
     visit(tree, 'image', (node) => {
       const image = node as {url?: string}
-      if(image.url?.startsWith(prefix)){
-        image.url = image.url?.replace(prefix, "")
-      }
+      // if(image.url?.startsWith(prefix)){
+      //   image.url = image.url?.replace(prefix, "")
+      // }
+
+      image.url = image.url ? getAsset(image.url).url : ''
     })
   }
 }

static/admin/config.tsx

@@ -17,7 +17,7 @@ const config = {
   backend: {
     name: 'github',
     repo: 'bright/new-www',
-    branch: 'gatsby',
+    branch: 'staging',
     base_url: 'https://github-auth.brightinventions.pl',
   },
   publish_mode: 'editorial_workflow',

yarn.lock

@@ -7521,7 +7521,7 @@ __metadata:
     gatsby: ^5.12.4
     gatsby-plugin-disqus: ^1.2.6
     gatsby-plugin-feed: ^5.12.0
-    gatsby-plugin-image: ^3.12.0
+    gatsby-plugin-image: ^3.13.1
     gatsby-plugin-json-pages: ^1.0.0
     gatsby-plugin-manifest: ^5.12.0
     gatsby-plugin-mdx: ^5.13.1
@@ -11696,7 +11696,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gatsby-plugin-image@npm:^3.12.0":
+"gatsby-plugin-image@npm:^3.13.1":
   version: 3.13.1
   resolution: "gatsby-plugin-image@npm:3.13.1"
   dependencies: