feat: functions check, cleanup

astro.config.mjs

@@ -1,16 +1,6 @@
 export default {
-  // projectRoot: '.',     // Where to resolve all URLs relative to. Useful if you have a monorepo project.
-  // pages: './src/pages', // Path to Astro components, pages, and data
-  // dist: './dist',       // When running `astro build`, path to final static output
-  // public: './public',   // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
   buildOptions: {
-    // site: 'http://example.com',           // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
-    sitemap: true,         // Generate sitemap (set to "false" to disable)
+    sitemap: true,
   },
-  devOptions: {
-    // hostname: 'localhost',  // The hostname to run the dev server on.
-    // port: 3000,             // The port to run the dev server on.
-    // tailwindConfig: '',     // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
-  },
-  renderers: [],
+  renderers: ["@astrojs/renderer-preact"],
 };

netlify/functions/hello-world.js

@@ -0,0 +1,6 @@
+exports.handler = () => {
+  return {
+    statusCode: 200,
+    body: 'hello world!',
+  };
+};

public/_redirects

@@ -0,0 +1 @@
+/api/* /.netlify/functions/:splat 200

src/components/function-tester.jsx

@@ -0,0 +1,72 @@
+import { useState } from "preact/hooks";
+
+function ExerciseStart({ handleClick, output, children }) {
+  return (
+    <>
+      <h2>Create Your First Serverless Function</h2>
+      <p>
+        Create a new file at <code>/netlify/functions/hello-world.js</code> and
+        put the following inside:
+      </p>
+      {children}
+
+      <p>
+        Save it, then run <code>netlify dev</code> to test locally. Check your
+        work by clicking the button below!
+      </p>
+
+      {output && (
+        <div class="error">
+          <p>
+            There was a problem checking your function. The error message is:
+          </p>
+          <pre>{output}</pre>
+          <p>
+            Please check that the file exists in the right place and that the
+            code matches the sample above.
+          </p>
+        </div>
+      )}
+
+      <button onClick={handleClick} class="button">
+        Test Your Function
+      </button>
+    </>
+  );
+}
+
+function ExerciseFinish() {
+  return (
+    <>
+      <h2>You did it!</h2>
+      <p>
+        You’ve successfully created your first Netlify Function! Great work!
+      </p>
+    </>
+  );
+}
+
+export default function FunctionTester({ children }) {
+  const [output, setOutput] = useState();
+
+  function handleClick() {
+    fetch("/.netlify/functions/hello-world")
+      .then((res) => res.text())
+      .then((result) => setOutput(result))
+      .catch((err) => {
+        console.log(err);
+        setOutput(
+          `Please create your function and
+run \`netlify dev\` in your CLI.`
+        );
+      });
+  }
+
+  return output === "hello world!" ? (
+    <ExerciseFinish />
+  ) : (
+    <ExerciseStart handleClick={handleClick} output={output}>
+      {children}
+    </ExerciseStart>
+  );
+}

src/pages/functions.astro

@@ -0,0 +1,72 @@
+---
+import { Code } from 'astro/components';
+import Layout from '../components/layout.astro';
+import FunctionTester from '../components/function-tester.jsx';
+
+const functionCode = `
+exports.handler = () => {
+  return {
+    statusCode: 200,
+    body: 'hello world!',
+  };
+};
+`.trim();
+---
+
+<style>
+:global(.astro-code) {
+  border-radius: 0.25rem;
+  padding: 1rem;
+}
+
+:global(.error) {
+  background: hsl(0 85% 92%);
+  border: 1px solid hsl(0 85% 85%);
+  border-radius: 0.25rem;
+  color: hsl(0 55% 45%);
+  margin-bottom: 1rem;
+  padding: 1rem;
+}
+
+:global(.error) p {
+  margin: 0;
+}
+
+:global(.error) pre {
+  background: #fdfdfd;
+  color: hsl(0 25% 40%);
+  overflow-x: scroll;
+  padding: 0.25rem 0.5rem;
+}
+
+:global(.button) {
+  background: var(--primary);
+  border: 0;
+  border-radius: 4px;
+  color: var(--button);
+  display: inline-block;
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  margin-top: auto;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  width: max-content;
+}
+</style>
+
+<Layout
+  title="Netlify Functions"
+  description="Serverless functions are superpowers for web developers! Securely handle server-like requirements at any scale with no provisioning, scaling, or ops overhead."
+>
+  <main>
+    <FunctionTester client:visible>
+      <Code code={functionCode} lang="js" />
+    </FunctionTester>
+    <p>
+      <a href="https://docs.netlify.com/functions/configure-and-deploy/">
+        Learn about serverless functions in the Netlify docs.
+      </a>
+    </p>
+  </main>
+</Layout>