From b2e05adab67c9c20c43060c258e38dcf5511ae34 Mon Sep 17 00:00:00 2001 From: Philippe <44789132+PhilippeduPreez@users.noreply.github.com> Date: Mon, 6 Mar 2023 18:08:58 +0200 Subject: [PATCH] Updated features (#448) * [site/components][s]: Updated features --- site/components/Feature.jsx | 59 ++++++++++++++++++++++++++++++ site/components/Features.jsx | 71 ++++++++++++++++++++++++++++++++++++ site/content/index.md | 67 ++-------------------------------- 3 files changed, 133 insertions(+), 64 deletions(-) create mode 100644 site/components/Feature.jsx create mode 100644 site/components/Features.jsx diff --git a/site/components/Feature.jsx b/site/components/Feature.jsx new file mode 100644 index 000000000..ef678f35d --- /dev/null +++ b/site/components/Feature.jsx @@ -0,0 +1,59 @@ +export function Feature({ feature, index }) { + if (index % 2 == 0) { + return ( +
+
+
+

+ {feature.title} +

+

+ {feature.description} +

+
+ + Learn more + +
+
+
+ {feature.title} +
+ ); + } else { + return ( +
+
+
+

+ {feature.title} +

+

+ {feature.description} +

+
+ + Learn more + +
+
+
+ {feature.title} +
+ ); + } +} diff --git a/site/components/Features.jsx b/site/components/Features.jsx new file mode 100644 index 000000000..5cffc89e5 --- /dev/null +++ b/site/components/Features.jsx @@ -0,0 +1,71 @@ +import { Feature } from "./Feature"; + +const features = [ + { + title: "Custom dark and light themes", + description: + "Change the fonts and colors used throughout your website as well as switch between dark and light modes.", + link: "/docs/custom-theme", + imageSrc: "/assets/images/theme.png", + }, + { + title: "Table of contents", + description: + "You can add a table of contents to your markdown pages as well as adding a site-wide table of contents in a LHS sidebar to allow your users to easily navigate to other pages on your website.", + link: "/docs/site-wide-toc", + imageSrc: "/assets/images/toc.png", + }, + { + title: "Blog Support", + description: + "Blog document type for your blog posts. This way you'll be able to fetch and display them on any of your pages by using our BlogsList component (or you can create a custom one).", + link: "/docs/blog", + imageSrc: "/assets/images/blog.png", + }, + { + title: "Markdown, MDX syntax support", + description: + "Flowershow was designed with Obsidian users in mind, so it aims to fully support Obsidian syntax, including CommonMark, GitHub Flavoured Markdown and Obsidian extensions, like Wiki links. All of your Markdown files are parsed as MDX. This means you not only can write your content using good old Markdown, but also enrich it with dynamic visualizations, immersive user interactions and much more!", + link: "/docs/syntax", + imageSrc: "/assets/images/obs_dark.png", + }, + { + title: "Tailwind support", + description: + "Flowershow comes with built-in tailwind support on any markdown page for styling your content.", + link: "/docs/tailwind", + imageSrc: "/assets/images/tw.png", + }, + { + title: "Mermaid and MathJax support", + description: + "Display Mermaid diagrams within your notes as well as math exaptions, where you can use LaTeX notations to denote formulas.", + link: "/docs/mermaid", + imageSrc: "/assets/images/mermaid.png", + }, + { + title: "Full-text search", + description: + "Flowershow supports search functionality to deliver realtime results for content available on all your pages. Clicking the result will lead the user to the relevant page.", + link: "/docs/search", + imageSrc: "/assets/images/search.png", + }, +]; + +export function Features() { + return ( + <> +
+

Features

+

+ Here are some of the cool features that are currently supported by + Flowershow +

+
+ + {features.map((feature, index) => ( + + ))} + + ); +} diff --git a/site/content/index.md b/site/content/index.md index 4d9d29102..96610ff37 100644 --- a/site/content/index.md +++ b/site/content/index.md @@ -6,6 +6,7 @@ showSidebar: false import { Hero } from "components/custom/Hero.jsx" import { WhatIsFlowershow } from "components/custom/WhatIsFlowershow.jsx" +import { Features } from "components/custom/Features.jsx" @@ -130,71 +131,9 @@ import { WhatIsFlowershow } from "components/custom/WhatIsFlowershow.jsx" -{/** Features (tb replaced with something nicer) **/} +{/** Features **/} -
-
-

Features

- -Here are some of the cool features that are currently supported by Flowershow, and some that we're intensively working on. - -### Markdown - -Flowershow supports **CommonMark** and **GitHub Flavoured Markdown (GFM)** syntax, e.g. code blocks, blockquotes, lists, tasks lists and tables. - -[[docs/syntax|Learn more ➡]] - -### Obsidian wiki links - -Flowershow has been designed with Obsidian users in mind and so, currently, it supports internal links to other pages. Links to headings, blocks, and transclusions will also be supported in the future. - -[[docs/syntax|Learn more ➡]] - -### Custom page layouts and components - -You can customize and create new layouts for your pages. - -[[docs/layouts|Learn more ➡]] - -Also, thanks to MDX support, you can use custom React components within your markdown notes. - -[[docs/mdx|Learn more ➡]]. - -### Tailwind support - -Tailwind support makes it easy to style your in-markdown HTML and custom React components. - -[[docs/tailwind|Learn more ➡]] - -### Mermaid - -Displaying Mermaid diagrams within in your notes. - -[[docs/mermaid|Learn more ➡]] - -### Math - -MathJax math exaptions support. - -[[docs/math|Learn more ➡]] - -### SEO - -Support for meta tags for SEO and social sharing. - -[[docs/seo|Learn more ➡]] - -### CLI tool - -Our goal is to make using Flowershow as seamless as possible. To facilitate smooth bootstrapping and upgrading your website we're creating a CLI tool that will take care of all the intricacies related to the whole process of publishing your notes. - -[[publish-tutorial|Learn more ➡]] - - 👷 There is a lot of other exciting stuff we're working on. - Check our roadmap to learn more! - -
-
+ {/** Why the name? **/}