From 771f86710fff38d6bb15285ad0c4d8e9294f1e15 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Thu, 2 Sep 2021 10:26:04 +0200 Subject: [PATCH] Website content improvements --- docs/components/Docs/Markdown.tsx | 7 +++-- docs/components/Page/CTA.tsx | 9 ++++--- docs/components/Page/Features.tsx | 29 +++++++++++++++----- docs/components/Page/Generators.tsx | 10 ++++--- docs/components/Page/Hero.tsx | 40 ++++++++++++++++++++++++++++ docs/components/Page/Testimonial.tsx | 9 +++++++ docs/components/Page/index.ts | 8 ++++++ docs/constants/extension.ts | 8 +++--- docs/content/docs/getting-started.md | 1 + docs/locale/en.ts | 28 ++++++++++++++----- docs/pages/index.tsx | 7 +++-- package.json | 3 ++- 12 files changed, 128 insertions(+), 31 deletions(-) create mode 100644 docs/components/Page/Hero.tsx create mode 100644 docs/components/Page/Testimonial.tsx create mode 100644 docs/components/Page/index.ts diff --git a/docs/components/Docs/Markdown.tsx b/docs/components/Docs/Markdown.tsx index 35192cdd..e66593df 100644 --- a/docs/components/Docs/Markdown.tsx +++ b/docs/components/Docs/Markdown.tsx @@ -41,9 +41,12 @@ export const Markdown: React.FunctionComponent = ({content}: Rea components={{ a: ({node, ...props}) => { const url = props?.href || ""; + const vscodeUrl = props && (props as any)["data-vscode"] ? (props as any)["data-vscode"] : ""; const title = getTitle(props); - const elm = {title}; - return elm; + if (vscodeUrl) { + return {title}; + } + return {title}; }, h1: ({node, ...props}) => (

{getTitle(props)}

), h2: ({node, ...props}) => (

{getTitle(props)}

), diff --git a/docs/components/Page/CTA.tsx b/docs/components/Page/CTA.tsx index d3886d12..ebe22d1d 100644 --- a/docs/components/Page/CTA.tsx +++ b/docs/components/Page/CTA.tsx @@ -8,17 +8,18 @@ export const CTA: React.FunctionComponent = (props: React.PropsWithCh const { t: strings } = useTranslation(); return ( -
+
-

+

{Extension.name}{' '} {strings(`cta_title`)} + {strings(`cta_title_sr`)}

-

+

{strings(`cta_description`)} -

+

diff --git a/docs/components/Page/Features.tsx b/docs/components/Page/Features.tsx index e55c9885..51575af3 100644 --- a/docs/components/Page/Features.tsx +++ b/docs/components/Page/Features.tsx @@ -2,6 +2,8 @@ import * as React from 'react'; import { useTranslation } from 'react-i18next'; import { features } from '../../constants/features'; import { CheckIcon } from '@heroicons/react/outline'; +import Link from 'next/link'; +import { Extension } from '../../constants/extension'; export interface IFeaturesProps {} @@ -9,11 +11,11 @@ export const Features: React.FunctionComponent = (props: React.P const { t: strings } = useTranslation(); return ( -
-
+
+

{strings(`features_title`)}

-

+

{strings(`features_description`)}

@@ -21,13 +23,28 @@ export const Features: React.FunctionComponent = (props: React.P {features.map((feature) => (
-
-
{strings(feature.description)}
+
{strings(feature.description)}
))} + +
+

+ {strings(`features_cta_title`)} +

+

+ + + {strings(`features_cta_button`)} + + +

+
); diff --git a/docs/components/Page/Generators.tsx b/docs/components/Page/Generators.tsx index 2d0433c6..fe7e6143 100644 --- a/docs/components/Page/Generators.tsx +++ b/docs/components/Page/Generators.tsx @@ -8,10 +8,10 @@ export const Generators: React.FunctionComponent = (props: Rea return (
-
-

+

+

{strings(`generators_title`)} -

+

@@ -35,7 +35,9 @@ export const Generators: React.FunctionComponent = (props: Rea
-

and many more...

+

+ {strings(`generators_more`)} +

diff --git a/docs/components/Page/Hero.tsx b/docs/components/Page/Hero.tsx new file mode 100644 index 00000000..db921c87 --- /dev/null +++ b/docs/components/Page/Hero.tsx @@ -0,0 +1,40 @@ +import Link from 'next/link'; +import * as React from 'react'; +import { useTranslation } from 'react-i18next'; + +export interface IHeroProps {} + +export const Hero: React.FunctionComponent = (props: React.PropsWithChildren) => { + const { t: strings } = useTranslation(); + + return ( +
+
+
+

+ {strings(`hero_title`)} +

+

+ {strings(`hero_description`)} +

+

+ {strings(`hero_description_second`)} +

+ + + {strings(`hero_button_primary`)} + + +
+
+ +
+
+ Editor dashboard of your static site content +
+
+
+ ); +}; \ No newline at end of file diff --git a/docs/components/Page/Testimonial.tsx b/docs/components/Page/Testimonial.tsx new file mode 100644 index 00000000..d24f6386 --- /dev/null +++ b/docs/components/Page/Testimonial.tsx @@ -0,0 +1,9 @@ +import * as React from 'react'; + +export interface ITestimonialProps {} + +export const Testimonial: React.FunctionComponent = (props: React.PropsWithChildren) => { + return ( + null + ); +}; \ No newline at end of file diff --git a/docs/components/Page/index.ts b/docs/components/Page/index.ts new file mode 100644 index 00000000..1d134b03 --- /dev/null +++ b/docs/components/Page/index.ts @@ -0,0 +1,8 @@ +export * from './CTA'; +export * from './Features'; +export * from './Footer'; +export * from './Generators'; +export * from './Hero'; +export * from './Layout'; +export * from './Sponsors'; +export * from './Testimonial'; diff --git a/docs/constants/extension.ts b/docs/constants/extension.ts index 84910cbc..3cb6b797 100644 --- a/docs/constants/extension.ts +++ b/docs/constants/extension.ts @@ -1,8 +1,9 @@ +import { CodeAction } from "vscode" export const Extension = { name: `Front Matter`, - home: `The CMS running in VS Code`, - description: `Front Matter is an essential Visual Studio Code extension that simplifies working and managing your markdown articles. We created the extension to support many static-site generators like Hugo, Jekyll, Hexo, NextJs, Gatsby, and more.`, + home: `The CMS running in VS Code for your static sites`, + description: `Headless CMS running in Visual Studio Code that helps managing your static sites. Supports Hugo, Jekyll, Docusaurus, NextJs, Gatsby, and more.`, githubLink: "https://github.com/estruyf/vscode-front-matter", issueLink: "https://github.com/estruyf/vscode-front-matter/issues", @@ -10,5 +11,6 @@ export const Extension = { extensionLink: "https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter", reviewLink: "https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter&ssr=false#review-details", installLink: "vscode:extension/eliostruyf.vscode-front-matter", - showcaseLink: "https://github.com/estruyf/vscode-front-matter/issues/new?assignees=&labels=&template=showcase.md&title=Showcase: " + showcaseLink: "https://github.com/estruyf/vscode-front-matter/issues/new?assignees=&labels=&template=showcase.md&title=Showcase%3A+", + featureLink: "https://github.com/estruyf/vscode-front-matter/issues/new?assignees=&labels=&template=feature_request.md&title=Enhancement%3A+" } \ No newline at end of file diff --git a/docs/content/docs/getting-started.md b/docs/content/docs/getting-started.md index 28926afe..3e2e12d9 100644 --- a/docs/content/docs/getting-started.md +++ b/docs/content/docs/getting-started.md @@ -15,6 +15,7 @@ You can get the extension via: - The VS Code marketplace: [VS Code Marketplace - Front Matter](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter). - The extension CLI: `ext install eliostruyf.vscode-front-matter` +- Or by clicking on the following link: open extension in VS Code ## Welcome screen diff --git a/docs/locale/en.ts b/docs/locale/en.ts index 88755604..afdca493 100644 --- a/docs/locale/en.ts +++ b/docs/locale/en.ts @@ -3,26 +3,40 @@ import { Extension } from "../constants/extension"; export const strings = { // CTA - cta_title: "The headless CMS running in VS Code", - cta_description: "Create, edit, and preview your pages within Visual Studio Code. Front Matter allows you to keep control of your static site without any external tools.", + cta_title: "Headless CMS running in VS Code", + cta_title_sr: " that helps managing your static sites and Markdown based sites. Supports Hugo, Jekyll, Docusaurus, NextJs, Gatsby, and more.", + cta_description: "Why leave your editor if it can give you all power to manage your static sites? Front Matter is a headless CMS that lets you create, edit, and preview your Markdown based content straight within Visual Studio Code.", cta_button_primary: "Get the extension", cta_button_secondary: "Read our docs", // Generators generators_title: "Built for any static-site generator you might like", + generators_more: "and many more...", + + // Hero + hero_title: "Brining the CMS to your editor", + hero_description: "Why would you leave your editor when you can perform all tasks straight from within it?", + hero_description_second: "We at Front Matter believe that you should keep using what you like. For us, this is Visual Studio Code. Use the same editor you use to code, but with unique features to make it suitable for writing and managing your Markdown articles.", + hero_button_primary: "Get started", + + // Testimonials + testimonials_title: "What others are saying", + testimonials_description: "We love Front Matter and we're excited to share it with the world.", // Features features_title: "Features", features_description: "Check out our main features which help you manage your static-site", + features_cta_title: "Missing a feature?", + features_cta_button: "Tell us what you need", // Feature - feature_title_1: "Manage your site within VS Code", - feature_description_1: "A Content Management System built to run within Visual Studio Code. No dependencies on any website or API.", + feature_title_1: "Offline management", + feature_description_1: "A Content Management System built to run within Visual Studio Code. No dependencies on any website or API. Write wherever you are, commit when you are online.", - feature_title_2: "Preview", - feature_description_2: "Allow showing your page previews within Visual Studio Code.", + feature_title_2: "Full site/page preview", + feature_description_2: "Allow showing your site and page previews within Visual Studio Code without the need of opening a browser.", - feature_title_3: "Page dashboard", + feature_title_3: "Content dashboard", feature_description_3: "Our page dashboard allows you to search, filter, sort, and group all your static site pages.", feature_title_4: "SEO Checks", diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx index efc687ad..87ad3003 100644 --- a/docs/pages/index.tsx +++ b/docs/pages/index.tsx @@ -1,10 +1,7 @@ import type { NextPage } from 'next'; import React from 'react'; import { Description, OtherMeta, Title } from '../components/Meta'; -import { CTA } from '../components/Page/CTA'; -import { Features } from '../components/Page/Features'; -import { Generators } from '../components/Page/Generators'; -import { Layout } from '../components/Page/Layout'; +import { CTA, Features, Generators, Hero, Layout } from '../components/Page'; import { Extension } from '../constants/extension'; const Home: NextPage = () => { @@ -19,6 +16,8 @@ const Home: NextPage = () => { + + diff --git a/package.json b/package.json index 0ed2786e..ac6843f1 100644 --- a/package.json +++ b/package.json @@ -385,7 +385,8 @@ "build:ext": "webpack --mode development", "dev:ext": "webpack --mode development --watch", "test-compile": "tsc -p ./", - "clean": "rm -rf dist" + "clean": "rm -rf dist", + "start:site": "cd ./docs && npm run dev" }, "devDependencies": { "@bendera/vscode-webview-elements": "0.6.2",