Update news

package.json

@@ -204,6 +204,7 @@
   },
   "devDependencies": {
     "@electron/notarize": "^2.1.0",
+    "@tailwindcss/typography": "^0.5.10",
     "@types/node": "^18.15.12",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
@@ -229,10 +230,13 @@
     "electron-settings": "^4.0.2",
     "electron-updater": "^6.1.4",
     "firebase": "^10.3.0",
+    "gray-matter": "^4.0.3",
     "jotai": "^2.2.2",
     "react-compare-slider": "^2.2.0",
+    "react-markdown": "^9.0.1",
     "react-select": "^5.7.4",
     "react-tooltip": "^5.18.1",
+    "remark-gfm": "^4.0.0",
     "sharp": "^0.32.6",
     "tailwind-scrollbar": "^3.0.4",
     "theme-change": "^2.5.0"

renderer/atoms/newsAtom.ts

@@ -1,4 +1,5 @@
+import { GrayMatterFile } from "gray-matter";
 import { atomWithStorage } from "jotai/utils";
 
-export const newsSeenAtom = atomWithStorage("newsSeen", false);
-export const newsAtom = atomWithStorage("news", []);
+export const showNewsModalAtom = atomWithStorage("showNewsModal", false);
+export const newsAtom = atomWithStorage<GrayMatterFile<string>>("news", null);

renderer/components/NewsModal.tsx

@@ -1,12 +1,20 @@
+import { GrayMatterFile } from "gray-matter";
 import React from "react";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 
-export const NewsModal = ({ show, setShow, news }) => {
-  console.log("🚀 => file: NewsModal.tsx:4 => news:", news);
-
+export const NewsModal = ({
+  show,
+  setShow,
+  news,
+}: {
+  show: boolean;
+  setShow: React.Dispatch<React.SetStateAction<boolean>>;
+  news: GrayMatterFile<string>;
+}) => {
   return (
     <dialog className={`modal ${show && "modal-open"}`}>
       <div className="modal-box flex flex-col text-center items-center gap-4">
-        <button onClick={() => setShow(false)}>Don't show again</button>
         <button
           className="absolute top-2 right-4 btn btn-circle"
           onClick={() => setShow(false)}>
@@ -33,8 +41,12 @@ export const NewsModal = ({ show, setShow, news }) => {
           </svg>
         </button>
 
-        <div className="h-80">
-          <h2 className="text-2xl font-bold text-center">{news.title}</h2>
+        <div>
+          {news && (
+            <Markdown remarkPlugins={[remarkGfm]} className="prose">
+              {news.content}
+            </Markdown>
+          )}
         </div>
       </div>
 

renderer/pages/index.tsx

@@ -31,7 +31,8 @@ import {
   ImageUpscaylPayload,
 } from "@common/types/types";
 import { NewsModal } from "@/components/NewsModal";
-import { newsAtom, newsSeenAtom } from "@/atoms/newsAtom";
+import { newsAtom, showNewsModalAtom } from "@/atoms/newsAtom";
+import matter from "gray-matter";
 
 const Home = () => {
   const allowedFileTypes = ["png", "jpg", "jpeg", "webp"];
@@ -58,7 +59,6 @@ const Home = () => {
   const [selectedTab, setSelectedTab] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
   const [showCloudModal, setShowCloudModal] = useState(false);
-  const [showNewsModal, setShowNewsModal] = useState(false);
 
   // ATOMIC STATES
   const [outputPath, setOutputPath] = useAtom(outputPathAtom);
@@ -72,8 +72,8 @@ const Home = () => {
     dontShowCloudModalAtom
   );
   const noImageProcessing = useAtomValue(noImageProcessingAtom);
-  const [newsSeen, setNewsSeen] = useAtom(newsSeenAtom);
   const [news, setNews] = useAtom(newsAtom);
+  const [showNewsModal, setShowNewsModal] = useAtom(showNewsModalAtom);
 
   const { logit } = useLog();
 
@@ -219,23 +219,31 @@ const Home = () => {
 
   // FETCH NEWS
   useEffect(() => {
-    fetch("/news.json")
+    fetch("/news.md")
       .then((res) => {
         return res.blob();
       })
       .then(async (data) => {
-        const currentVersion = navigator?.userAgent?.match(
-          /Upscayl\/([\d\.]+\d+)/
-        )[1];
-        const newsData = JSON.parse(await data.text());
-        if (newsSeen === true) {
-          setShowNewsModal(false);
-          return;
+        const newsData = await data.text();
+        const markdownData = matter(newsData);
+        console.log("🚀 => file: index.tsx:229 => markdownData:", markdownData);
+        console.log("🚀 => file: index.tsx:229 => news:", news);
+
+        if (
+          markdownData &&
+          news &&
+          markdownData?.data?.version === news?.data?.version
+        ) {
+          console.log("📰 News is up to date");
+          if (showNewsModal === false) {
+            setShowNewsModal(false);
+          }
+        } else if (markdownData && news) {
+          setNews(matter(newsData));
+          setShowNewsModal(true);
         }
-        setNews(newsData);
-        setShowNewsModal(true);
       });
-  }, []);
+  }, [news]);
 
   // CONFIGURE SAVED OUTPUT PATH
   useEffect(() => {

renderer/public/news.json

@@ -1 +0,0 @@
-{}

renderer/public/news.md

@@ -0,0 +1,252 @@
+---
+title: News
+version: 2023.11.28
+---
+
+# Upscayl News! 🎉
+
+---
+__Advertisement :)__
+
+- __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image
+  resize in browser.
+- __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly
+  i18n with plurals support and easy syntax.
+
+You will like those projects!
+
+---
+
+# h1 Heading 8-)
+## h2 Heading
+### h3 Heading
+#### h4 Heading
+##### h5 Heading
+###### h6 Heading
+
+
+## Horizontal Rules
+
+___
+
+---
+
+***
+
+
+## Typographic replacements
+
+Enable typographer option to see result.
+
+(c) (C) (r) (R) (tm) (TM) (p) (P) +-
+
+test.. test... test..... test?..... test!....
+
+!!!!!! ???? ,,  -- ---
+
+"Smartypants, double quotes" and 'single quotes'
+
+
+## Emphasis
+
+**This is bold text**
+
+__This is bold text__
+
+*This is italic text*
+
+_This is italic text_
+
+~~Strikethrough~~
+
+
+## Blockquotes
+
+
+> Blockquotes can also be nested...
+>> ...by using additional greater-than signs right next to each other...
+> > > ...or with spaces between arrows.
+
+
+## Lists
+
+Unordered
+
++ Create a list by starting a line with `+`, `-`, or `*`
++ Sub-lists are made by indenting 2 spaces:
+  - Marker character change forces new list start:
+    * Ac tristique libero volutpat at
+    + Facilisis in pretium nisl aliquet
+    - Nulla volutpat aliquam velit
++ Very easy!
+
+Ordered
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+
+
+1. You can use sequential numbers...
+1. ...or keep all the numbers as `1.`
+
+Start numbering with offset:
+
+57. foo
+1. bar
+
+
+## Code
+
+Inline `code`
+
+Indented code
+
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+
+
+Block code "fences"
+
+```
+Sample text here...
+```
+
+Syntax highlighting
+
+``` js
+var foo = function (bar) {
+  return bar++;
+};
+
+console.log(foo(5));
+```
+
+## Tables
+
+| Option | Description |
+| ------ | ----------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+Right aligned columns
+
+| Option | Description |
+| ------:| -----------:|
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+
+## Links
+
+[link text](http://dev.nodeca.com)
+
+[link with title](http://nodeca.github.io/pica/demo/ "title text!")
+
+Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
+
+
+## Images
+
+![Minion](https://octodex.github.com/images/minion.png)
+![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
+
+Like links, Images also have a footnote style syntax
+
+![Alt text][id]
+
+With a reference later in the document defining the URL location:
+
+[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
+
+
+## Plugins
+
+The killer feature of `markdown-it` is very effective support of
+[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
+
+
+### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
+
+> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
+>
+> Shortcuts (emoticons): :-) :-( 8-) ;)
+
+see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
+
+
+### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
+
+- 19^th^
+- H~2~O
+
+
+### [\<ins>](https://github.com/markdown-it/markdown-it-ins)
+
+++Inserted text++
+
+
+### [\<mark>](https://github.com/markdown-it/markdown-it-mark)
+
+==Marked text==
+
+
+### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
+
+Footnote 1 link[^first].
+
+Footnote 2 link[^second].
+
+Inline footnote^[Text of inline footnote] definition.
+
+Duplicated footnote reference[^second].
+
+[^first]: Footnote **can have markup**
+
+    and multiple paragraphs.
+
+[^second]: Footnote text.
+
+
+### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
+
+Term 1
+
+:   Definition 1
+with lazy continuation.
+
+Term 2 with *inline markup*
+
+:   Definition 2
+
+        { some code, part of Definition 2 }
+
+    Third paragraph of definition 2.
+
+_Compact style:_
+
+Term 1
+  ~ Definition 1
+
+Term 2
+  ~ Definition 2a
+  ~ Definition 2b
+
+
+### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
+
+This is HTML abbreviation example.
+
+It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
+
+*[HTML]: Hyper Text Markup Language
+
+### [Custom containers](https://github.com/markdown-it/markdown-it-container)
+
+::: warning
+*here be dragons*
+:::

tailwind.config.js

@@ -17,7 +17,11 @@ module.exports = {
       },
     },
   },
-  plugins: [require("daisyui"), require("tailwind-scrollbar")],
+  plugins: [
+    require("daisyui"),
+    require("tailwind-scrollbar"),
+    require("@tailwindcss/typography"),
+  ],
   daisyui: {
     darkTheme: "upscayl",
     themes: [