docs: theme improvements (#59)

packages/docs/docs/200-query-language/index.md

@@ -1,12 +1,13 @@
 # Query language
 
 ## Introduction
+
 Learn the basics of the SynthQL query language. [Read more](./query-language/introduction).
 
 ## Examples
+
 Looking for examples? Checkout the [examples section](./query-language/examples).
 
 ## Query composition
-SynthQL let's you build bigger queries from smaller ones. Learn about [query composition](./query-language/composition).
-
 
+SynthQL let's you build bigger queries from smaller ones. Learn about [query composition](./query-language/composition).

packages/docs/docs/700-generating-types.md

@@ -25,7 +25,7 @@ You can also get help by running `npx @synthql/cli generate --help`.
 
 ## synthql.config.json
 
-You can also generate types from a configuration file by running 
+You can also generate types from a configuration file by running
 
 ```bash
 npx @synthql/cli generate --configFile ./synthql.config.json --url DATABASE_URL

packages/docs/src/css/custom.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:[email protected]&family=Noto+sans:ital,wght@0,100..900;1,100..900&display=swap');
+
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to
@@ -6,6 +8,9 @@
 
 /* You can override the default Infima variables here. */
 :root {
+    --ifm-font-family-base: 'Noto Sans', sans-serif;
+    --ifm-font-family-monospace: 'Inconsolata', monospace;
+
     --ifm-container-width: 1000px;
     --ifm-container-width-xl: 1000px;
     --ifm-color-primary: #2e8555;
@@ -15,10 +20,17 @@
     --ifm-color-primary-light: #33925d;
     --ifm-color-primary-lighter: #359962;
     --ifm-color-primary-lightest: #3cad6e;
+    --ifm-background-color: #fafafa;
     --ifm-code-font-size: 95%;
+    --ifm-font-size-base: 15px;
     --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
+/* Menu */
+.menu {
+    padding: 0.5rem !important;
+}
+
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
     --ifm-color-primary: #25c2a0;

packages/docs/src/pages/index.tsx

@@ -93,15 +93,15 @@ export default function Home(): JSX.Element {
                             <CodeBlock language="typescript">
                                 {[
                                     `const q = from('movies')`,
-                                    `  .columns('id', 'title', 'release_date')`,
+                                    `  .columns('id', 'title')`,
                                     `  .filter({ id: 1 })`,
                                     `  .take(10);`,
                                     ``,
                                     `// Execute the query`,
                                     `const { data: movies } = useSynthql(q);`,
                                     ``,
-                                    `// movies is now an array of movies with id, title and release_date`,
-                                    `// properties`,
+                                    `// movies is now `,
+                                    `// Array<{id: string, title:string}> `,
                                     `console.log(movies[0].id)`,
                                 ].join('\n')}
                             </CodeBlock>
@@ -219,7 +219,6 @@ const features: Array<{
     },
     {
         title: 'Built-in pagination & streaming',
-        link: '/docs/pagination',
         code: [
             `
 const query = from('users')
@@ -240,7 +239,7 @@ const {data, fetchNextPage} = useSynthql(query)`,
             'In the following example, we use a lazy query to load a store and its products separately. This means the store can load quickly and the products can load in the background.',
             'This is especially useful when the products are not immediately visible on the page.',
         ].join('\n'),
-        link: '/docs/lazy-queries',
+        link: '/docs/deferred-queries',
         code: `
 const products = from('products')
     .column('id', 'name', 'price')
@@ -291,7 +290,7 @@ const findPersonByIds = (ids) => {
 
     {
         title: 'Custom query providers',
-        link: '/docs/custom-query-executors',
+        link: '/docs/custom-providers',
         description:
             'Not all data comes from the database. Use custom providers to join your DB tables with data from 3rd party APIs using a predictable performance model.',
         code: `