Add prisma & planetscale (#1)

CHANGELOG.md

@@ -1,4 +1,4 @@
-# The TAPP Stack
+# The Tap stack
 
 ## v1.0.0
 

CONTRIBUTING.md

@@ -4,7 +4,7 @@ I would love your help to improve this project! Here are a few ways to contribut
 
 ## 🐛 Issues
 
-If you come across any bugs or something that doesn't seem right, please [open an issue](https://github.com/codiume/the-tapp-stack/issues). Also, if you have an idea for the project, open an issue to start the discussion.
+If you come across any bugs or something that doesn't seem right, please [open an issue](https://github.com/codiume/the-tap-stack/issues). Also, if you have an idea for the project, open an issue to start the discussion.
 
 When possible, please include a link to a `git` repository or a CodeSandbox which illustrates the problem you're facing. This is especially important when you find a bug.
 

README.md

@@ -1,15 +1,23 @@
-# The TAPP Stack
+# The TAP Stack
 
 ```bash
-npm init astro -- --template minimal
+git clone git@github.com:codiume/the-tap-stack.git
 ```
 
+## Deployed Demo
+
+- **Vercel**: [https://the-tap-stack.vercel.app]
+- **Netlify**: [https://the-tap-stack.netlify.app]
+- **Cloudflare Pages**: [https://the-tap-stack.pages.dev]
+
 ## 🚀 Project Structure
 
 Inside of your Astro project, you'll see the following folders and files:
 
 ```txt
 /
+├── prisma/
+│   └── schema.prisma
 ├── public/
 ├── src/
 │   └── pages/
@@ -19,6 +27,12 @@ Inside of your Astro project, you'll see the following folders and files:
 └── package.json
 ```
 
+## Running locally
+
+1. Create a database on PlanetScale
+2. Edit your prisma schema
+3. Push changed to db `npx prisma db push`
+
 ## 🧞 Commands
 
 All commands are run from the root of the project, from a terminal:

SECURITY.md

@@ -8,6 +8,6 @@
 
 ## Reporting a Vulnerability
 
-Found a bug? Do you have general questions or suggestions for improving the package? Feel free to [create an issue on GitHub](https://github.com/codiume/the-tapp-stack/issues), we'll try to address it as soon as possible.
+Found a bug? Do you have general questions or suggestions for improving the package? Feel free to [create an issue on GitHub](https://github.com/codiume/the-tap-stack/issues), we'll try to address it as soon as possible.
 
 If you discover any security related issues, please email us at issue@codiume.com instead of using the issue tracker.

astro.config.mjs

@@ -4,6 +4,6 @@ import tailwind from '@astrojs/tailwind';
 
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://the.tapp.stack',
+  site: 'https://the-tap-stack.vercel.app',
   integrations: [tailwind(), sitemap()]
 });

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "the-tapp-stack",
+  "name": "the-tap-stack",
   "version": "1.0.0",
   "private": true,
   "scripts": {
@@ -13,6 +13,8 @@
     "@astrojs/sitemap": "^1.0.0",
     "@astrojs/tailwind": "^1.0.0",
     "astro": "^1.0.6",
-    "astro-seo-meta": "^0.0.2"
+    "astro-seo-meta": "^0.0.2",
+    "prisma": "^4.2.1",
+    "@prisma/client": "^4.2.1"
   }
 }

prisma/schema.prisma

@@ -0,0 +1,20 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider        = "prisma-client-js"
+  previewFeatures = ["referentialIntegrity"]
+}
+
+datasource db {
+  provider             = "mysql"
+  url                  = env("DATABASE_URL")
+  referentialIntegrity = "prisma"
+}
+
+model Article {
+  id      Int       @id @default(autoincrement())
+  title   String
+  summary String
+  date    DateTime
+}

src/loaders/index.ts

@@ -0,0 +1,18 @@
+import { PrismaClient } from '@prisma/client';
+
+// get articles from database
+const prisma = new PrismaClient();
+
+export const articlesLoader = async () => {
+  return await prisma.article.findMany({
+    select: {
+      id: true,
+      title: true,
+      summary: true,
+      date: true
+    },
+    orderBy: {
+      date: 'asc'
+    }
+  });
+};

src/pages/index.astro

@@ -1,7 +1,10 @@
 ---
 import { Seo } from 'astro-seo-meta';
 
+import { articlesLoader } from '../loaders';
 import Article from '../components/Article.astro';
+
+const articles = await articlesLoader();
 ---
 
 <html lang="en">
@@ -10,8 +13,8 @@ import Article from '../components/Article.astro';
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
     <Seo
-      title="The Tapp stack"
-      description="Opiniated stack for those who want to live on the dege"
+      title="The Tap stack"
+      description="An opinionated stack for those who want to live on the edge (Typescript + Astro + Prisma + Planet scale)"
       icon="favicon.ico"
     />
   </head>
@@ -26,21 +29,15 @@ import Article from '../components/Article.astro';
       </div>
 
       <div class="space-y-6">
-        <Article
-          title="Astro 1.0 is out now!"
-          summary="We are thrilled to announce Astro v1.0: a web framework for building fast, content-focused websites."
-          date="August 09, 2022"
-        />
-        <Article
-          title="Astro 1.0 Release Update"
-          summary="Astro v1.0.0 has a new release date! We're pushing back our v1.0.0 release to late July in order to make some final developer experience improvements to Astro."
-          date="June 06, 2022"
-        />
-        <Article
-          title="Astro on Netlify Edge Functions"
-          summary="With edge rendering you bring SSR closer to your users, getting those first bytes to the browser, faster. Combined with serving static assets at the edge"
-          date="May 19, 2022"
-        />
+        {
+          articles.map((article) => (
+            <Article
+              title={article.title}
+              summary={article.summary}
+              date={article.date.toISOString()}
+            />
+          ))
+        }
       </div>
     </section>
   </body>