├── .gitignore
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── SECURITY.md
├── SUPPORT.md
├── components
    ├── date.js
    ├── layout.js
    └── layout.module.css
├── lib
    ├── cosmos.js
    └── utils.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── api
    │   └── todos
    │   │   ├── [id].js
    │   │   ├── create.js
    │   │   ├── delete
    │   │       └── [id].js
    │   │   ├── list.js
    │   │   └── update
    │   │       └── [id].js
    └── index.js
├── public
    ├── favicon.ico
    └── images
    │   ├── cosmos-connection.png
    │   └── profile.jpg
├── sample.env
├── styles
    ├── global.css
    ├── public
    │   ├── favicon.ico
    │   └── images
    │   │   └── profile.jpg
    └── utils.module.css
└── vercel.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | .env*
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Microsoft Open Source Code of Conduct
 2 | 
 3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
 4 | 
 5 | Resources:
 6 | 
 7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
 8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
 9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns
10 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 |     MIT License
 2 | 
 3 |     Copyright (c) Microsoft Corporation.
 4 | 
 5 |     Permission is hereby granted, free of charge, to any person obtaining a copy
 6 |     of this software and associated documentation files (the "Software"), to deal
 7 |     in the Software without restriction, including without limitation the rights
 8 |     to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 |     copies of the Software, and to permit persons to whom the Software is
10 |     furnished to do so, subject to the following conditions:
11 | 
12 |     The above copyright notice and this permission notice shall be included in all
13 |     copies or substantial portions of the Software.
14 | 
15 |     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 |     IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 |     FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 |     AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 |     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 |     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 |     SOFTWARE
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Azure Cosmos DB Starter – Todo App
 2 | 
 3 | A simple Todo App built on [Next.js](https://nextjs.org/) and [Azure Cosmos DB](https://aka.ms/trycosmosdbvercel), deployed on [Vercel](https://vercel.com/) with the [Vercel + Azure Cosmos DB integration](https://vercel.com/integrations/azurecosmosdb).
 4 | 
 5 | ## Deployment Instructions
 6 | 
 7 | ### Pre requisites
 8 | 
 9 | Azure [Cosmos DB account](https://aka.ms/trycosmosdbvercel), database and container. Please make sure the [Partition Key](https://learn.microsoft.com/en-us/azure/cosmos-db/partitioning-overview) for container is '/id'.
10 | 
11 | ### Steps
12 | 
13 | - Install dependencies from the root folder - `npm install`
14 | 
15 | - Rename sample.env to .env and set appropriate variables.
16 | 
17 |   - COSMOSDB_CONNECTION_STRING : This is the connection string for Azure Cosmos DB.
18 |   - COSMOSDB_DATABASE_NAME : This is the name of the database to store todos.
19 |   - COSMOSDB_CONTAINER_NAME : This is the name of the container to store todos.
20 | 
21 | You can obtain the connection string by navigating to your Azure Cosmos DB account page's key blade, and select Primary connection string. Copy the value to use.
22 | 
23 | - Start the project - `npm run dev`
24 | 
25 | ## Demo
26 | 
27 | https://cosmosdb-vercel-starter.vercel.app/
28 | 
29 | ## Vercel + Azure Cosmos DB Integration
30 | 
31 | https://vercel.com/integrations/azurecosmosdb
32 | 


--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
 1 | <!-- BEGIN MICROSOFT SECURITY.MD V0.0.8 BLOCK -->
 2 | 
 3 | ## Security
 4 | 
 5 | Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
 6 | 
 7 | If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://aka.ms/opensource/security/definition), please report it to us as described below.
 8 | 
 9 | ## Reporting Security Issues
10 | 
11 | **Please do not report security vulnerabilities through public GitHub issues.**
12 | 
13 | Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://aka.ms/opensource/security/create-report).
14 | 
15 | If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com).  If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://aka.ms/opensource/security/pgpkey).
16 | 
17 | You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://aka.ms/opensource/security/msrc). 
18 | 
19 | Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
20 | 
21 |   * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
22 |   * Full paths of source file(s) related to the manifestation of the issue
23 |   * The location of the affected source code (tag/branch/commit or direct URL)
24 |   * Any special configuration required to reproduce the issue
25 |   * Step-by-step instructions to reproduce the issue
26 |   * Proof-of-concept or exploit code (if possible)
27 |   * Impact of the issue, including how an attacker might exploit the issue
28 | 
29 | This information will help us triage your report more quickly.
30 | 
31 | If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://aka.ms/opensource/security/bounty) page for more details about our active programs.
32 | 
33 | ## Preferred Languages
34 | 
35 | We prefer all communications to be in English.
36 | 
37 | ## Policy
38 | 
39 | Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://aka.ms/opensource/security/cvd).
40 | 
41 | <!-- END MICROSOFT SECURITY.MD BLOCK -->
42 | 


--------------------------------------------------------------------------------
/SUPPORT.md:
--------------------------------------------------------------------------------
 1 | # TODO: The maintainer of this repo has not yet edited this file
 2 | 
 3 | **REPO OWNER**: Do you want Customer Service & Support (CSS) support for this product/project?
 4 | 
 5 | - **No CSS support:** Fill out this template with information about how to file issues and get help.
 6 | - **Yes CSS support:** Fill out an intake form at [aka.ms/onboardsupport](https://aka.ms/onboardsupport). CSS will work with/help you to determine next steps.
 7 | - **Not sure?** Fill out an intake as though the answer were "Yes". CSS will help you decide.
 8 | 
 9 | *Then remove this first heading from this SUPPORT.MD file before publishing your repo.*
10 | 
11 | # Support
12 | 
13 | ## How to file issues and get help  
14 | 
15 | This project uses GitHub Issues to track bugs and feature requests. Please search the existing 
16 | issues before filing new issues to avoid duplicates.  For new issues, file your bug or 
17 | feature request as a new Issue.
18 | 
19 | For help and questions about using this project, please **REPO MAINTAINER: INSERT INSTRUCTIONS HERE 
20 | FOR HOW TO ENGAGE REPO OWNERS OR COMMUNITY FOR HELP. COULD BE A STACK OVERFLOW TAG OR OTHER
21 | CHANNEL. WHERE WILL YOU HELP PEOPLE?**.
22 | 
23 | ## Microsoft Support Policy  
24 | 
25 | Support for this **PROJECT or PRODUCT** is limited to the resources listed above.
26 | 


--------------------------------------------------------------------------------
/components/date.js:
--------------------------------------------------------------------------------
1 | import { parseISO, format } from 'date-fns'
2 | 
3 | export default function Date({ dateString }) {
4 |   const date = parseISO(dateString)
5 |   return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
6 | }
7 | 


--------------------------------------------------------------------------------
/components/layout.js:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | import Image from 'next/image'
 3 | import Script from 'next/script'
 4 | 
 5 | import styles from './layout.module.css'
 6 | import utilStyles from '../styles/utils.module.css'
 7 | import Link from 'next/link'
 8 | 
 9 | const name = '[Your Name]'
10 | export const siteTitle = 'Next.js Sample Website'
11 | 
12 | export default function Layout({ children, home }) {
13 |   return (
14 |     <div className={styles.container}>
15 |       <Head>
16 |         <link rel="icon" href="/favicon.ico" />
17 |         <meta
18 |           name="description"
19 |           content="Learn how to build a personal website using Next.js"
20 |         />
21 |         <meta
22 |           property="og:image"
23 |           content={`https://og-image.vercel.app/${encodeURI(
24 |             siteTitle
25 |           )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
26 |         />
27 |         <meta name="og:title" content={siteTitle} />
28 |         <meta name="twitter:card" content="summary_large_image" />
29 |       </Head>
30 |       <Script
31 |         src="https://connect.facebook.net/en_US/sdk.js"
32 |         strategy="lazyOnload"
33 |         onLoad={() =>
34 |           console.log(`script loaded correctly, window.FB has been populated`)
35 |         }
36 |       />
37 |       <header className={styles.header}>
38 |         {home ? (
39 |           <>
40 |             <Image
41 |               priority
42 |               src="/images/profile.jpg"
43 |               className={utilStyles.borderCircle}
44 |               height={144}
45 |               width={144}
46 |               alt={name}
47 |             />
48 |             <h1 className={utilStyles.heading2Xl}>{name}</h1>
49 |           </>
50 |         ) : (
51 |           <>
52 |             <Link href="/">
53 |               <Image
54 |                 priority
55 |                 src="/images/profile.jpg"
56 |                 className={utilStyles.borderCircle}
57 |                 height={108}
58 |                 width={108}
59 |                 alt={name}
60 |               />
61 |             </Link>
62 |             <h2 className={utilStyles.headingLg}>
63 |               <Link href="/" className={utilStyles.colorInherit}>
64 |                 {name}
65 |               </Link>
66 |             </h2>
67 |           </>
68 |         )}
69 |       </header>
70 |       <main>{children}</main>
71 |       {!home && (
72 |         <div className={styles.backToHome}>
73 |           <Link href="/">← Back to home</Link>
74 |         </div>
75 |       )}
76 |     </div>
77 |   )
78 | }
79 | 


--------------------------------------------------------------------------------
/components/layout.module.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   max-width: 36rem;
 3 |   padding: 0 1rem;
 4 |   margin: 3rem auto 6rem;
 5 | }
 6 | 
 7 | .header {
 8 |   display: flex;
 9 |   flex-direction: column;
10 |   align-items: center;
11 | }
12 | 
13 | .backToHome {
14 |   margin: 3rem 0 0;
15 | }
16 | 


--------------------------------------------------------------------------------
/lib/cosmos.js:
--------------------------------------------------------------------------------
 1 | import { CosmosClient } from "@azure/cosmos";
 2 | 
 3 | class CosmosSingleton {
 4 |   constructor() {
 5 |     this.database = null;
 6 |     this.container = null;
 7 |   }
 8 | 
 9 |   async initialize() {
10 |     if (!this.database || !this.container) {
11 |       const databaseName = process.env.COSMOSDB_DATABASE_NAME || "todos";
12 |       const containerName = process.env.COSMOSDB_CONTAINER_NAME || "todos";
13 |       const client = new CosmosClient(process.env.COSMOSDB_CONNECTION_STRING);
14 |       const database = client.database(databaseName);
15 |       const container = database.container(containerName);
16 |       await client.databases.createIfNotExists({
17 |         id: databaseName,
18 |       });
19 |       await database.containers.createIfNotExists({
20 |         id: containerName,
21 |         partitionKey: "/id"
22 |       });
23 |       this.database = database;
24 |       this.container = container;
25 |     }
26 |   }
27 | 
28 |   getDatabase() {
29 |     return this.database;
30 |   }
31 | 
32 |   getContainer() {
33 |     return this.container;
34 |   }
35 | }
36 | 
37 | const cosmosSingleton = new CosmosSingleton();
38 | export default cosmosSingleton;
39 | 


--------------------------------------------------------------------------------
/lib/utils.js:
--------------------------------------------------------------------------------
 1 | var Filter = require("bad-words");
 2 | 
 3 | const filter = new Filter();
 4 | 
 5 | export function clean(obj) {
 6 |   const str = JSON.stringify(obj);
 7 |   const cleaned = filter.clean(str);
 8 |   return JSON.parse(cleaned);
 9 | }
10 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | module.exports = {
3 |   reactStrictMode: true,
4 | }
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "azurecosmosdb-vercel-starter",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "@azure/cosmos": "^3.17.3",
12 |     "@chakra-ui/icons": "^2.0.19",
13 |     "@chakra-ui/react": "^2.7.0",
14 |     "@chakra-ui/theme": "^3.1.0",
15 |     "@emotion/react": "^11.11.1",
16 |     "@emotion/styled": "^11.11.0",
17 |     "bad-words": "^3.0.4",
18 |     "date-fns": "^2.29.3",
19 |     "dotenv": "^16.1.4",
20 |     "framer-motion": "^10.12.16",
21 |     "gray-matter": "^4.0.3",
22 |     "next": "latest",
23 |     "react": "18.2.0",
24 |     "react-dom": "18.2.0",
25 |     "remark": "^14.0.2",
26 |     "remark-html": "^15.0.1",
27 |     "uuid": "^9.0.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | // pages/_app.js
 2 | import * as React from "react";
 3 | import { ChakraProvider } from "@chakra-ui/react";
 4 | import theme from "@chakra-ui/theme";
 5 | 
 6 | function MyApp({ Component, pageProps }) {
 7 |   return (
 8 |     <ChakraProvider theme={theme}>
 9 |       <Component {...pageProps} />
10 |     </ChakraProvider>
11 |   );
12 | }
13 | 
14 | export default MyApp;
15 | 


--------------------------------------------------------------------------------
/pages/api/todos/[id].js:
--------------------------------------------------------------------------------
1 | export default async function handle(req, res) {
2 |     res.status(200).json({ message: "Hello World" });
3 | }


--------------------------------------------------------------------------------
/pages/api/todos/create.js:
--------------------------------------------------------------------------------
 1 | // api/createTodo.js
 2 | import { v4 as uuidv4 } from "uuid";
 3 | import cosmosSingleton from "../../../lib/cosmos";
 4 | import { clean } from "../../../lib/utils";
 5 | 
 6 | export default async function handler(req, res) {
 7 |   if (req.method === "POST") {
 8 |     await cosmosSingleton.initialize();
 9 |     const container = cosmosSingleton.getContainer();
10 |     const { title } = req.body;
11 |     const newTodo = { id: uuidv4(), title, completed: false };
12 |     const { resource: createdTodo } = await container.items.create(
13 |       clean(newTodo)
14 |     );
15 |     res.status(201).json(createdTodo);
16 |   } else {
17 |     res.status(405).end(); // Method Not Allowed
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/pages/api/todos/delete/[id].js:
--------------------------------------------------------------------------------
 1 | // api/deleteTodo.js
 2 | import cosmosSingleton from "../../../../lib/cosmos";
 3 | 
 4 | export default async function handler(req, res) {
 5 |   if (req.method === "DELETE") {
 6 |     await cosmosSingleton.initialize();
 7 |     const container = cosmosSingleton.getContainer();
 8 | 
 9 |     const { id } = req.query;
10 | 
11 |     const { resource: existingTodo } = await container.item(id, id).read();
12 | 
13 |     if (!existingTodo) {
14 |       res.status(404).json({ message: "Todo not found." });
15 |       return;
16 |     }
17 | 
18 |     await container.item(id, id).delete();
19 |     res.status(200).json({ message: "Todo deleted." });
20 |   } else {
21 |     res.status(405).end(); // Method Not Allowed
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/pages/api/todos/list.js:
--------------------------------------------------------------------------------
 1 | // api/todos.js
 2 | import cosmosSingleton from "../../../lib/cosmos";
 3 | 
 4 | export default async function handle(req, res) {
 5 |   console.log(`trying to get todos.`);
 6 |   await cosmosSingleton.initialize();
 7 |   const container = cosmosSingleton.getContainer();
 8 |   if (req.method === "GET") {
 9 |     const { resources: todos } = await container.items
10 |       .query("SELECT * from Todos")
11 |       .fetchAll();
12 |     res.status(200).json(todos);
13 |   } else {
14 |     res.status(405).end(); // Method Not Allowed
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/pages/api/todos/update/[id].js:
--------------------------------------------------------------------------------
 1 | // api/updateTodo.js
 2 | import cosmosSingleton from "../../../../lib/cosmos";
 3 | import { clean } from "../../../../lib/utils";
 4 | 
 5 | export default async function handle(req, res) {
 6 |   console.log(`atleast updating.`);
 7 |   if (req.method === "PUT") {
 8 |     await cosmosSingleton.initialize();
 9 |     const container = cosmosSingleton.getContainer();
10 |     const { id } = req.query;
11 |     const updatedTodo = req.body;
12 | 
13 |     const { resource: existingTodo } = await container.item(id, id).read();
14 | 
15 |     if (!existingTodo) {
16 |       res.status(404).json({ message: "Todo not found." });
17 |       return;
18 |     }
19 | 
20 |     await container.item(id, id).replace(clean(updatedTodo));
21 |     res.status(200).json(updatedTodo);
22 |   } else {
23 |     res.status(405).end(); // Method Not Allowed
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
  1 | // pages/index.js
  2 | import React, { useState, useEffect } from "react";
  3 | import {
  4 |   Box,
  5 |   Heading,
  6 |   VStack,
  7 |   Input,
  8 |   Button,
  9 |   IconButton,
 10 |   useToast,
 11 |   Checkbox,
 12 |   Spacer,
 13 |   HStack,
 14 | } from "@chakra-ui/react";
 15 | import { DeleteIcon } from "@chakra-ui/icons";
 16 | 
 17 | const fetchTodos = async () => {
 18 |   const res = await fetch("/api/todos/list");
 19 |   return await res.json();
 20 | };
 21 | 
 22 | const createTodo = async (title) => {
 23 |   const res = await fetch("/api/todos/create", {
 24 |     method: "POST",
 25 |     headers: { "Content-Type": "application/json" },
 26 |     body: JSON.stringify({ title }),
 27 |   });
 28 |   return await res.json();
 29 | };
 30 | 
 31 | const updateTodo = async (id, updatedTodo) => {
 32 |   await fetch(`/api/todos/update/${id}`, {
 33 |     method: "PUT",
 34 |     headers: { "Content-Type": "application/json" },
 35 |     body: JSON.stringify(updatedTodo),
 36 |   });
 37 | };
 38 | 
 39 | const deleteTodo = async (id) => {
 40 |   await fetch(`/api/todos/delete/${id}`, { method: "DELETE" });
 41 | };
 42 | 
 43 | export default function Home() {
 44 |   const [todos, setTodos] = useState([]);
 45 |   const [inputValue, setInputValue] = useState("");
 46 |   const toast = useToast();
 47 | 
 48 |   useEffect(() => {
 49 |     (async () => {
 50 |       const todos = await fetchTodos();
 51 |       setTodos(todos);
 52 |     })();
 53 |   }, []);
 54 | 
 55 |   const handleCreate = async () => {
 56 |     if (inputValue.trim()) {
 57 |       const newTodo = await createTodo(inputValue);
 58 |       setTodos([...todos, newTodo]);
 59 |       setInputValue("");
 60 |       toast({
 61 |         title: "Todo created.",
 62 |         status: "success",
 63 |         duration: 3000,
 64 |         isClosable: true,
 65 |       });
 66 |     }
 67 |   };
 68 | 
 69 |   const handleUpdate = async (id, completed) => {
 70 |     const updatedTodo = todos.find((todo) => todo.id === id);
 71 |     updatedTodo.completed = completed;
 72 |     await updateTodo(id, updatedTodo);
 73 |     setTodos([...todos]);
 74 |   };
 75 | 
 76 |   const handleDelete = async (id) => {
 77 |     await deleteTodo(id);
 78 |     setTodos(todos.filter((todo) => todo.id !== id));
 79 |   };
 80 | 
 81 |   return (
 82 |     <Box>
 83 |       <Heading mt={8} textAlign="center">
 84 |         Azure Cosmos DB Starter – Todo App
 85 |       </Heading>
 86 |       <VStack mt={4} spacing={4} mx="auto" maxW="md">
 87 |         <Input
 88 |           value={inputValue}
 89 |           onChange={(e) => setInputValue(e.target.value)}
 90 |           placeholder="Add a new task"
 91 |           onKeyDown={(e) => e.key === "Enter" && handleCreate()}
 92 |         />
 93 |         <Button onClick={handleCreate} colorScheme="blue">
 94 |           Add Todo
 95 |         </Button>
 96 |         {todos.map((todo) => (
 97 |           <HStack key={todo.id} w="100%">
 98 |             <Checkbox
 99 |               isChecked={todo.completed}
100 |               onChange={(e) => handleUpdate(todo.id, e.target.checked)}
101 |             >
102 |               {todo.title}
103 |             </Checkbox>
104 |             <Spacer />
105 |             <IconButton
106 |               aria-label="Delete todo"
107 |               icon={<DeleteIcon />}
108 |               onClick={() => handleDelete(todo.id)}
109 |               colorScheme="red"
110 |             />
111 |           </HStack>
112 |         ))}
113 |       </VStack>
114 |     </Box>
115 |   );
116 | }
117 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Azure/azurecosmosdb-vercel-starter/81a7ce5250ab757193ed1fd292c5316775be8a6a/public/favicon.ico


--------------------------------------------------------------------------------
/public/images/cosmos-connection.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Azure/azurecosmosdb-vercel-starter/81a7ce5250ab757193ed1fd292c5316775be8a6a/public/images/cosmos-connection.png


--------------------------------------------------------------------------------
/public/images/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Azure/azurecosmosdb-vercel-starter/81a7ce5250ab757193ed1fd292c5316775be8a6a/public/images/profile.jpg


--------------------------------------------------------------------------------
/sample.env:
--------------------------------------------------------------------------------
1 | COSMOSDB_CONNECTION_STRING=
2 | COSMOSDB_DATABASE_NAME=
3 | COSMOSDB_CONTAINER_NAME=


--------------------------------------------------------------------------------
/styles/global.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   padding: 0;
 4 |   margin: 0;
 5 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
 6 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 7 |   line-height: 1.6;
 8 |   font-size: 18px;
 9 | }
10 | 
11 | * {
12 |   box-sizing: border-box;
13 | }
14 | 
15 | a {
16 |   color: #0070f3;
17 |   text-decoration: none;
18 | }
19 | 
20 | a:hover {
21 |   text-decoration: underline;
22 | }
23 | 
24 | img {
25 |   max-width: 100%;
26 |   display: block;
27 | }
28 | 


--------------------------------------------------------------------------------
/styles/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Azure/azurecosmosdb-vercel-starter/81a7ce5250ab757193ed1fd292c5316775be8a6a/styles/public/favicon.ico


--------------------------------------------------------------------------------
/styles/public/images/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Azure/azurecosmosdb-vercel-starter/81a7ce5250ab757193ed1fd292c5316775be8a6a/styles/public/images/profile.jpg


--------------------------------------------------------------------------------
/styles/utils.module.css:
--------------------------------------------------------------------------------
 1 | .heading2Xl {
 2 |   font-size: 2.5rem;
 3 |   line-height: 1.2;
 4 |   font-weight: 800;
 5 |   letter-spacing: -0.05rem;
 6 |   margin: 1rem 0;
 7 | }
 8 | 
 9 | .headingXl {
10 |   font-size: 2rem;
11 |   line-height: 1.3;
12 |   font-weight: 800;
13 |   letter-spacing: -0.05rem;
14 |   margin: 1rem 0;
15 | }
16 | 
17 | .headingLg {
18 |   font-size: 1.5rem;
19 |   line-height: 1.4;
20 |   margin: 1rem 0;
21 | }
22 | 
23 | .headingMd {
24 |   font-size: 1.2rem;
25 |   line-height: 1.5;
26 | }
27 | 
28 | .borderCircle {
29 |   border-radius: 9999px;
30 | }
31 | 
32 | .colorInherit {
33 |   color: inherit;
34 | }
35 | 
36 | .padding1px {
37 |   padding-top: 1px;
38 | }
39 | 
40 | .list {
41 |   list-style: none;
42 |   padding: 0;
43 |   margin: 0;
44 | }
45 | 
46 | .listItem {
47 |   margin: 0 0 1.25rem;
48 | }
49 | 
50 | .lightText {
51 |   color: #666;
52 | }
53 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |   "version": 2,
3 |   "framework": "nextjs"
4 | }
5 | 


--------------------------------------------------------------------------------