Update docs

README.md

@@ -1,3 +1,14 @@
+
+<p align="center">
+    <img src="https://raw.githubusercontent.com/Riley19280/code-stencil/main/docs/static/img/splash.png" width="600" alt="Code Stencil">
+    <p align="center">
+        <a href="https://github.com/riley19280/code-stencil/actions"><img alt="GitHub Workflow Status (master)" src="https://img.shields.io/github/actions/workflow/status/riley19280/code-stencil/run-tests.yml?branch=main&label=Tests"></a>
+        <a href="https://packagist.org/packages/code-stencil/code-stencil"><img alt="Total Downloads" src="https://img.shields.io/packagist/dt/code-stencil/code-stencil"></a>
+        <a href="https://packagist.org/packages/code-stencil/code-stencil"><img alt="Latest Version" src="https://img.shields.io/packagist/v/code-stencil/code-stencil"></a>
+        <a href="https://packagist.org/packages/code-stencil/code-stencil"><img alt="License" src="https://img.shields.io/packagist/l/code-stencil/code-stencil"></a>
+    </p>
+</p>
+
 # Introduction
 
 Code Stencil provides an elegant, easy to read pattern that is great for generating stub files,

docs/docusaurus.config.js

@@ -51,12 +51,12 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       // Replace with your project's social card
-      image: 'img/docusaurus-social-card.jpg',
+      image: 'img/splash.png',
       navbar: {
         title: 'Code Stencil',
         logo: {
           alt: 'Code Stencil Logo',
-          src: 'img/logo.svg',
+          src: 'img/icon.png',
         },
         items: [
           {
@@ -79,7 +79,7 @@ const config = {
             title: 'Docs',
             items: [
               {
-                label: 'walkthrough',
+                label: 'Walkthrough',
                 to: '/docs/category/walkthrough',
               },
             ],

docs/src/components/HomepageFeatures/index.tsx

@@ -4,48 +4,41 @@ import styles from './styles.module.css';
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
   description: JSX.Element;
 };
 
 const FeatureList: FeatureItem[] = [
   {
     title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
+        Code Stencil provides an easy to use, intuitive interface to make creating templates a breeze!
       </>
     ),
   },
   {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    title: 'Readable',
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
+        Not just your source code is readable, it can also auto format the resulting code as well!
       </>
     ),
   },
   {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    title: 'Flexible',
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
+        Utilize variables and inline functions to create to create the most flexible stencils ever!
       </>
     ),
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({title, description}: FeatureItem) {
   return (
-    <div className={clsx('col col--4')}>
+    <div className={clsx('col col--4 padding-vert--lg')}>
       <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
+        {/*<Svg className={styles.featureSvg} role="img" />*/}
       </div>
       <div className="text--center padding-horiz--md">
         <h3>{title}</h3>

docs/src/css/custom.css

@@ -6,7 +6,7 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
+  --ifm-color-primary: rgb(89, 135, 104);
   --ifm-color-primary-dark: #29784c;
   --ifm-color-primary-darker: #277148;
   --ifm-color-primary-darkest: #205d3b;
@@ -19,7 +19,7 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary: rgb(89, 135, 104);
   --ifm-color-primary-dark: #21af90;
   --ifm-color-primary-darker: #1fa588;
   --ifm-color-primary-darkest: #1a8870;

docs/src/pages/index.tsx

@@ -13,13 +13,13 @@ function HomepageHeader() {
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
+        <h1 className="hero__title">{'Code Stencil'}</h1>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
             to="/docs/category/walkthrough">
-            Docusaurus Tutorial - 5min ⏱️
+            View Docs 📚
           </Link>
         </div>
       </div>
@@ -32,8 +32,8 @@ export default function Home(): JSX.Element {
   return (
       <MDXContent>
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      title={siteConfig.title}
+      description={siteConfig.tagline}>
       <HomepageHeader />
       <main>
         <HomepageFeatures />