adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-08-08 09:53:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Website content improvements

Browse Source
This commit is contained in:
Elio Struyf
2021-09-02 10:26:04 +02:00
parent dc55cedb0d
commit 771f86710f
12 changed files with 128 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/Docs/Markdown.tsx
+5 -2
View File
@@ -41,9 +41,12 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({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 = <Link key={url as string} href={url as string}><a title={title}>{title}</a></Link>;
return elm;
if (vscodeUrl) {
return <Link key={vscodeUrl as string} href={vscodeUrl as string}><a title={title}>{title}</a></Link>;
}
return <Link key={url as string} href={url as string}><a title={title}>{title}</a></Link>;
},
h1: ({node, ...props}) => (<h1 id={generateId(props)}>{getTitle(props)}</h1>),
h2: ({node, ...props}) => (<h2 id={generateId(props)}>{getTitle(props)}</h2>),
docs/components/Page/CTA.tsx
+5 -4
View File
@@ -8,17 +8,18 @@ export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithCh
const { t: strings } = useTranslation();
return (
<div className="px-4 sm:px-0 pt-8 overflow-hidden sm:pt-12 lg:relative lg:py-48">
<div className="px-4 sm:px-0 pt-8 overflow-hidden sm:py-16 lg:relative lg:py-48">
<div className="mx-auto sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl lg:grid lg:grid-cols-2 lg:gap-24">
<div className={`my-4 sm:my-5 lg:my-6`}>
<h1 className="text-5xl tracking-tight font-extrabold sm:leading-none lg:text-5xl xl:text-6xl">
<h1 className="text-5xl lg:text-5xl xl:text-6xl tracking-tight font-extrabold sm:leading-none">
<span className="text-teal-500 md:block">{Extension.name}</span>{' '}
<span className="md:block">{strings(`cta_title`)}</span>
<span className={`sr-only`}>{strings(`cta_title_sr`)}</span>
</h1>
<p className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
<h2 className="mt-3 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
{strings(`cta_description`)}
</p>
</h2>
<div className="mt-10 max-w-sm mx-auto sm:max-w-none">
<div className="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
docs/components/Page/Features.tsx
+23 -6
View File
@@ -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<IFeaturesProps> = (props: React.P
const { t: strings } = useTranslation();
return (
<div className={``}>
<div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
<div className={`bg-whisper-500 text-vulcan-500`}>
<div className="max-w-7xl mx-auto py-12 sm:py-16 px-4 sm:px-6 lg:px-8">
<div className="max-w-3xl mx-auto text-center">
<h2 className="text-3xl font-extrabold">{strings(`features_title`)}</h2>
<p className="mt-4 text-lg text-whisper-700">
<p className="mt-4 text-lg text-vulcan-300">
{strings(`features_description`)}
</p>
</div>
@@ -21,13 +23,28 @@ export const Features: React.FunctionComponent<IFeaturesProps> = (props: React.P
{features.map((feature) => (
<div key={feature.name} className="relative">
<dt>
<CheckIcon className="absolute h-6 w-6 text-teal-500" aria-hidden="true" />
<p className="ml-9 text-lg leading-6 font-medium text-whisper-500">{strings(feature.name)}</p>
<CheckIcon className="absolute h-6 w-6 text-teal-800" aria-hidden="true" />
<p className="ml-9 text-lg leading-6 font-medium text-vulcan-320">{strings(feature.name)}</p>
</dt>
<dd className="mt-2 ml-9 text-base text-whisper-800">{strings(feature.description)}</dd>
<dd className="mt-2 ml-9 text-base text-vulcan-100">{strings(feature.description)}</dd>
</div>
))}
</dl>
<div className="mt-6 flex flex-col justify-center items-center">
<p className={`text-xl tracking-tight font-bold sm:leading-none text-vulcan-50`}>
{strings(`features_cta_title`)}
</p>
<p className="mt-4">
<Link href={Extension.featureLink} >
<a className={`inline-block px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-vulcan-50 hover:bg-opacity-70 sm:px-8`}
target={`_blank`}
rel={`noopener noreferrer`}>
{strings(`features_cta_button`)}
</a>
</Link>
</p>
</div>
</div>
</div>
);
docs/components/Page/Generators.tsx
+6 -4
View File
@@ -8,10 +8,10 @@ export const Generators: React.FunctionComponent<IGeneratorsProps> = (props: Rea
return (
<div className="bg-whisper-100">
<div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
<p className="text-center text-sm font-semibold uppercase text-vulcan-500 tracking-wide">
<div className="max-w-7xl mx-auto py-12 sm:py-16 px-4 sm:px-6 lg:px-8">
<h2 className="text-center text-sm font-semibold uppercase text-vulcan-500 tracking-wide">
{strings(`generators_title`)}
</p>
</h2>
<div className="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6">
<div className="col-span-1 flex justify-center">
@@ -35,7 +35,9 @@ export const Generators: React.FunctionComponent<IGeneratorsProps> = (props: Rea
</div>
<div className="mt-6 flex justify-center">
<p className={`text-2xl tracking-tight font-bold sm:leading-none text-vulcan-500`}>and many more...</p>
<p className={`text-2xl tracking-tight font-bold sm:leading-none text-vulcan-500`}>
{strings(`generators_more`)}
</p>
</div>
</div>
</div>
docs/components/Page/Hero.tsx
+40
View File
@@ -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<IHeroProps> = (props: React.PropsWithChildren<IHeroProps>) => {
const { t: strings } = useTranslation();
return (
<div className="px-4 sm:px-0 pt-8 py-12 sm:py-16 lg:relative lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
<div className="px-4 max-w-3xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
<div>
<h2 className="text-3xl lg:text-3xl xl:text-4xl tracking-tight font-extrabold sm:leading-none">
{strings(`hero_title`)}
</h2>
<p className="my-6 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
{strings(`hero_description`)}
</p>
<p className="my-6 text-base text-whisper-700 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
{strings(`hero_description_second`)}
</p>
<Link href={`/docs/getting-started`} >
<a className={`inline-block px-4 py-3 border border-transparent text-base font-medium shadow-sm text-white bg-teal-500 hover:bg-opacity-70 sm:px-8`}>
{strings(`hero_button_primary`)}
</a>
</Link>
</div>
</div>
<div className="sm:mx-auto sm:max-w-3xl sm:px-6 lg:mx-0 lg:max-w-none mt-12 sm:mt-16 lg:mt-0 lg:col-start-1">
<div className="lg:pr-6 lg:-ml-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
<img className="w-full rounded-xl lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none"
src="/assets/dashboard.png"
alt="Editor dashboard of your static site content" />
</div>
</div>
</div>
);
};
docs/components/Page/Testimonial.tsx
+9
View File
@@ -0,0 +1,9 @@
import * as React from 'react';
export interface ITestimonialProps {}
export const Testimonial: React.FunctionComponent<ITestimonialProps> = (props: React.PropsWithChildren<ITestimonialProps>) => {
return (
null
);
};
docs/components/Page/index.ts
+8
View File
@@ -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';
docs/constants/extension.ts
+5 -3
View File
@@ -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+"
}
docs/content/docs/getting-started.md
+1
View File
@@ -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: <a href="" title="open extension in VS Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter">open extension in VS Code</a>
## Welcome screen
docs/locale/en.ts
+21 -7
View File
@@ -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",
docs/pages/index.tsx
+3 -4
View File
@@ -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 = () => {
<Generators />
<Hero />
<Features />
</Layout>
</>
package.json
+2 -1
View File
@@ -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",