-
Notifications
You must be signed in to change notification settings - Fork 102
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
3 changed files
with
133 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| export function Feature({ feature, index }) { | ||
| if (index % 2 == 0) { | ||
| return ( | ||
| <div className="overflow-hidden sm:grid sm:grid-cols-2 sm:items-center lg:p-8 xl:p-12"> | ||
| <div className="p-8"> | ||
| <div className="mx-auto max-w-xl text-center sm:text-left"> | ||
| <h2 className="text-2xl font-bold text-gray-900 dark:text-white md:text-3xl"> | ||
| {feature.title} | ||
| </h2> | ||
| <p className="hidden text-gray-500 dark:text-gray-400 md:mt-6 md:block"> | ||
| {feature.description} | ||
| </p> | ||
| <div className="mt-4 md:mt-10"> | ||
| <a | ||
| href={feature.link} | ||
| className="inline-block rounded bg-emerald-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-emerald-700 focus:outline-none focus:ring focus:ring-yellow-400" | ||
| > | ||
| Learn more | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <img | ||
| alt={feature.title} | ||
| src={feature.imageSrc} | ||
| className="lg:max-h-[25rem] lg:px-8 xl:px-12" | ||
| /> | ||
| </div> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <div className="overflow-hidden sm:grid sm:grid-cols-2 sm:items-center lg:p-8 xl:p-12"> | ||
| <div className="order-2 p-8"> | ||
| <div className="mx-auto max-w-xl text-center sm:text-left"> | ||
| <h2 className="text-2xl font-bold text-gray-900 dark:text-white md:text-3xl"> | ||
| {feature.title} | ||
| </h2> | ||
| <p className="hidden text-gray-500 dark:text-gray-400 md:mt-4 md:block"> | ||
| {feature.description} | ||
| </p> | ||
| <div className="mt-4 md:mt-8"> | ||
| <a | ||
| href={feature.link} | ||
| className="inline-block rounded bg-emerald-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-emerald-700 focus:outline-none focus:ring focus:ring-yellow-400" | ||
| > | ||
| Learn more | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <img | ||
| alt={feature.title} | ||
| src={feature.imageSrc} | ||
| className="order-1 lg:max-h-[25rem] lg:px-8 xl:px-12" | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <> | ||
| <div className="prose dark:prose-invert mx-auto max-w-screen-xl px-4 py-6 lg:flex lg:items-center text-center"> | ||
| <h2>Features</h2> | ||
| <p> | ||
| Here are some of the cool features that are currently supported by | ||
| Flowershow | ||
| </p> | ||
| </div> | ||
|
|
||
| {features.map((feature, index) => ( | ||
| <Feature key={feature.title} feature={feature} index={index} /> | ||
| ))} | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters