docs(svelte-query): add docs directory

.eslintignore

@@ -1,6 +1,8 @@
 coverage/*
 config/*
 lib/*
+svelte/*
+scripts/*
 dist/*
 node_modules/*
 svelte.config.js

.gitignore

@@ -82,6 +82,7 @@ typings/
 .nuxt
 dist
 lib
+svelte
 
 # Gatsby files
 .cache/

.prettierignore

@@ -1,6 +1,8 @@
 coverage/*
 config/*
 lib/*
+svelte/*
+scripts/*
 dist/*
 node_modules/*
 svelte.config.js

README.md

@@ -1,3 +1,5 @@
+<img src="./docs/src/images/svelte-query-og.png" />
+
 # svelte-query
 
 Hooks for managing, caching and syncing asynchronous and remote data in Svelte
@@ -17,6 +19,16 @@ yarn storybook
 yarn test
 ```
 
+### Running the Docs
+
+```bash
+cd docs
+yarn
+yarn build
+yarn start
+```
+http://localhost:3000
+
 ### Build
 
 ```bash

docs/.gitignore

@@ -0,0 +1,8 @@
+.next
+.now
+.env
+.env.*
+node_modules
+*.log
+.DS_Store
+.vercel

docs/README.md

@@ -0,0 +1,30 @@
+# Svelte Query Docs
+
+This is source code to svelte-query.tanstack.com. It is forked from the [Formik](https://formik.org) docs and is built with:
+
+- Next.js
+- MDX
+- Tailwind
+- Algolia
+- Notion
+
+## Running locally
+
+```sh
+yarn install
+```
+
+At the moment, you need to signup for Notion, and [follow these instructions](https://github.com/ijjk/notion-blog#getting-blog-index-and-token) to get a token and create a blog in order to develop locally. Not ideal, but hopefully will fix soon.
+
+With tokens and page index in hand, rename `.sample.env` and `.sample.env.build` to just `.env` and `.env.build`. In each one, add respective parameters:
+
+```diff
+-NOTION_TOKEN=XXXX
++NOTION_TOKEN=<YOUR_TOKEN>
+-BLOG_INDEX_ID=XXXXX
++BLOG_INDEX_ID=<YOUR_BLOG_INDEX_ID>
+```
+
+Now it will work. Run `yarn dev` to get going.
+
+If you get stuck or need help, [send a DM to Jared](https://twitter.com/jaredpalmer) on Twitter.

docs/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./src"
+  }
+}

docs/next.config.js

@@ -0,0 +1,100 @@
+const path = require('path')
+const dotenvLoad = require('dotenv-load')
+const optimizedImages = require('next-optimized-images')
+dotenvLoad()
+
+const remarkPlugins = [
+  require('remark-slug'),
+  require('./src/lib/docs/remark-paragraph-alerts'),
+  [
+    require('remark-autolink-headings'),
+    {
+      behavior: 'append',
+      linkProperties: {
+        class: ['anchor'],
+        title: 'Direct link to heading',
+      },
+    },
+  ],
+
+  require('remark-emoji'),
+  require('remark-footnotes'),
+  require('remark-images'),
+  [
+    require('remark-github'),
+    { repository: 'https://github.com/TanStack/svelte-query' },
+  ],
+  require('remark-unwrap-images'),
+  [
+    require('remark-toc'),
+    {
+      skip: 'Reference',
+      maxDepth: 6,
+    },
+  ],
+]
+
+module.exports = optimizedImages({
+  pageExtensions: ['jsx', 'js', 'mdx', 'md'],
+  env: {
+    NEXT_PUBLIC_GA_TRACKING_ID: process.env.GA_TRACKING_ID || '',
+    SENTRY_RELEASE: process.env.VERCEL_GITHUB_COMMIT_SHA || '',
+  },
+  async redirects() {
+    return [
+      {
+        source: '/docs/:any*',
+        destination: '/:any*', // Matched parameters can be used in the destination
+        permanent: true,
+      },
+    ]
+  },
+  experimental: {
+    plugins: true,
+    modern: true,
+  },
+  webpack: (config, { dev, isServer, ...options }) => {
+    config.module.rules.push({
+      test: /.mdx?$/, // load both .md and .mdx files
+      use: [
+        options.defaultLoaders.babel,
+        {
+          loader: '@mdx-js/loader',
+          options: {
+            remarkPlugins,
+          },
+        },
+        path.join(__dirname, './src/lib/docs/md-loader'),
+      ],
+    })
+
+    // only compile build-rss in production server build
+    if (dev || !isServer) {
+      return config
+    }
+
+    // we're in build mode so enable shared caching for Notion data
+    process.env.USE_CACHE = 'true'
+
+    const originalEntry = config.entry
+    config.entry = async () => {
+      const entries = {
+        ...(await originalEntry()),
+      }
+      // entries['./scripts/build-rss.js'] = './src/lib/build-rss.js'
+      return entries
+    }
+
+    return config
+  },
+  optimizeImages: {
+    /* config for next-optimized-images */
+    mozjpeg: {
+      quality: 70,
+    },
+    optipng: {
+      optimizationLevel: 3,
+    },
+    optimizeImagesInDev: true,
+  },
+})

docs/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "fdocs3",
+  "version": "1.0.0",
+  "main": "index.js",
+  "author": "Jared Palmer <jared@palmer.net>",
+  "license": "MIT",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "index-docs": "node ./.next/serverless/scripts/index-docs.js"
+  },
+  "dependencies": {
+    "@babel/preset-typescript": "^7.10.4",
+    "@docsearch/react": "1.0.0-alpha.14",
+    "@mdx-js/loader": "^1.6.18",
+    "@mdx-js/mdx": "^1.6.18",
+    "@mdx-js/react": "^1.6.18",
+    "@mdx-js/tag": "^0.20.3",
+    "@next/mdx": "^9.5.3",
+    "@next/plugin-google-analytics": "^9.5.3",
+    "@reactions/component": "^2.0.2",
+    "@zeit/fetch": "^6.0.0",
+    "@zeit/react-jsx-parser": "^2.0.0",
+    "async-sema": "^3.1.0",
+    "body-scroll-lock": "^3.1.5",
+    "classnames": "^2.2.6",
+    "copy-to-clipboard": "^3.3.1",
+    "date-fns": "^2.16.1",
+    "docsearch.js": "^2.6.3",
+    "framer-motion": "^1.11.1",
+    "gray-matter": "^4.0.2",
+    "imagemin-mozjpeg": "^9.0.0",
+    "imagemin-optipng": "^8.0.0",
+    "intersection-observer": "^0.10.0",
+    "isomorphic-unfetch": "^3.0.0",
+    "next": "^9.5.3",
+    "next-images": "^1.5.0",
+    "next-optimized-images": "^2.6.2",
+    "node-fetch": "^2.6.1",
+    "prism-svelte": "^0.4.7",
+    "prismjs": "^1.21.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-icons": "^3.11.0",
+    "react-live": "^2.2.2",
+    "rehype-format": "^3.0.1",
+    "rehype-stringify": "^7.0.0",
+    "remark": "^12.0.1",
+    "remark-autolink-headings": "^6.0.0",
+    "remark-emoji": "^2.1.0",
+    "remark-footnotes": "^1.0.0",
+    "remark-github": "^9.0.0",
+    "remark-images": "^2.0.0",
+    "remark-slug": "^6.0.0",
+    "remark-toc": "^7.0.0",
+    "remark-unwrap-images": "^2.0.0",
+    "scroll-into-view-if-needed": "^2.2.26",
+    "semver-regex": "^3.1.1",
+    "unist-util-visit": "^2.0.3"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.11.6",
+    "@babel/core": "^7.11.6",
+    "@babel/plugin-transform-typescript": "^7.11.0",
+    "@babel/preset-react": "^7.10.4",
+    "@tailwindcss/ui": "^0.3.0",
+    "algoliasearch": "3.35.1",
+    "babel-preset-react-app": "^9.1.2",
+    "dotenv-load": "^2.0.0",
+    "github-slugger": "^1.3.0",
+    "md5": "^2.3.0",
+    "mdast-util-to-string": "^1.1.0",
+    "postcss-preset-env": "^6.7.0",
+    "remark-parse": "^8.0.3",
+    "tailwindcss": "^1.8.10",
+    "unified": "^9.2.0",
+    "webp-loader": "^0.6.0"
+  },
+  "engines": {
+    "node": ">=12.x"
+  }
+}

docs/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ['tailwindcss', 'postcss-preset-env'],
+};

docs/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

docs/src/components/ArrowRight.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export function ArrowRight({
+  fill = '#718096',
+  width = 6,
+  height = 10
+}) {
+  return <svg width={width} height={height} viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M1.4 8.56L4.67 5M1.4 1.23L4.66 4.7" stroke={fill} strokeLinecap="square" />
+    </svg>;
+}

docs/src/components/Banner.js

@@ -0,0 +1,12 @@
+export function Banner() {
+  return null; // return (
+  //   <div className="bg-gray-900">
+  //     <div className="container mx-auto py-2 flex items-center justify-between">
+  //       <img src="/logo.png" alt="formium" width="150px" className="-ml-3" />
+  //       <div className="text-white font-bold flex items-center">
+  //         Hassle-free form storage for static sites →
+  //       </div>
+  //     </div>
+  //   </div>
+  // );
+}