Add Next13, Nuxt3 website examples (#185)

directus-labs · Feb 22, 2023 · 8790e61 · 8790e61
1 parent 03a9347
commit 8790e61
Show file tree

Hide file tree

Showing 52 changed files with 15,453 additions and 0 deletions.
diff --git a/website-next13/.gitignore b/website-next13/.gitignore
@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
diff --git a/website-next13/README.md b/website-next13/README.md
@@ -0,0 +1,17 @@
+# Build a Website With Next 13 and the Directus JavaScript SDK 
+
+This is a [Next.js](https://nextjs.org) project demonstrating how to get started with the Directus JavaScript SDK. It accompanies [our guide in the documentation](https://docs.directus.io/use-cases/headless-cms/build-website-next-13).
+
+## Getting Started
+
+```
+git clone https://github.com/directus/examples
+cd examples/website-next13
+npm install
+```
+
+Update your URL in `lib/directus.js` and set up your collections as detailed in the guide and run the project with the following command:
+
+```
+npm run dev
+```
diff --git a/website-next13/app/[slug]/page.tsx b/website-next13/app/[slug]/page.tsx
@@ -0,0 +1,21 @@
+import directus from "lib/directus"
+import { notFound } from "next/navigation"
+
+async function getPage(slug) {
+ try {
+ const page = await directus.items('pages').readOne(slug)
+ return page
+ } catch(error) {
+ notFound()
+ }
+}
+
+export default async function DynamicPage({ params }) {
+ const page = await getPage(params.slug)
+ return (
+ <div>
+ <h1>{page.title}</h1>
+ <div dangerouslySetInnerHTML={{ __html: page.content }}></div>
+ </div>
+ )
+}
diff --git a/website-next13/app/blog/[slug]/page.tsx b/website-next13/app/blog/[slug]/page.tsx
@@ -0,0 +1,24 @@
+import directus from "lib/directus"
+import { notFound } from "next/navigation"
+
+async function getPost(slug) {
+ try {
+ const post = await directus.items('posts').readOne(slug, {
+ fields: ['*.*']
+ })
+ return post
+ } catch(error) {
+ notFound()
+ }
+}
+
+export default async function DynamicPage({ params }) {
+ const post = await getPost(params.slug)
+ return (
+ <>
+ <img src={`${directus.url}assets/${post.image.filename_disk}?width=600`} alt="" />
+ <h1>{post.title}</h1>
+ <div dangerouslySetInnerHTML={{ __html: post.content }}></div>
+ </>
+ )
+}
diff --git a/website-next13/app/blog/page.tsx b/website-next13/app/blog/page.tsx
@@ -0,0 +1,30 @@
+import directus from "lib/directus"
+
+async function getPosts() {
+ const posts = await directus.items('posts').readByQuery({
+ fields: ['slug', 'title', 'publish_date', 'author.name'],
+ sort: ['-publish_date']
+ })
+ return posts.data
+}
+
+export default async function DynamicPage() {
+ const posts = await getPosts()
+ return (
+ <div>
+ <h1>Blog</h1>
+ <ul>
+ {posts.map(post => {
+ return (
+ <li key={post.slug}>
+ <a href={`/blog/${post.slug}`}>
+ <h2>{post.title}</h2>
+ </a>
+ <span>{post.publish_date} &bull; {post.author.name}</span>
+ </li>
+ )
+ })}
+ </ul>
+ </div>
+ )
+}
diff --git a/website-next13/app/head.tsx b/website-next13/app/head.tsx
@@ -0,0 +1,9 @@
+export default function Head() {
+ return (
+ <>
+ <title></title>
+ <meta content="width=device-width, initial-scale=1" name="viewport" />
+ <link rel="icon" href="/favicon.ico" />
+ </>
+ )
+}
diff --git a/website-next13/app/layout.tsx b/website-next13/app/layout.tsx
@@ -0,0 +1,22 @@
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+ <html>
+ <head />
+ <body>
+ <nav>
+ <a href="/">Home</a>
+ <a href="/about">About</a> 
+ <a href="/conduct">Code of Conduct</a>
+ <a href="/privacy">Privacy Policy</a>
+ <a href="/blog">Blog</a>
+ </nav>
+
+ {children}
+ </body>
+ </html>
+ )
+}
diff --git a/website-next13/app/page.tsx b/website-next13/app/page.tsx
@@ -0,0 +1,16 @@
+import directus from "lib/directus";
+
+async function getGlobals() {
+ const { data } = await directus.items('global').readByQuery()
+ return data
+}
+
+export default async function HomePage() {
+ const global = await getGlobals()
+ return (
+ <div>
+ <h1>{global.title}</h1>
+ <p>{global.description}</p>
+ </div>
+ )
+}
diff --git a/website-next13/demo-data/pages/about.md b/website-next13/demo-data/pages/about.md
@@ -0,0 +1,11 @@
+<!-- Title: About Us -->
+<!-- Add this in the WYSIWYG Source Code Pane -->
+<p>Directus is an Open Data Platform purpose-built for democratizing the world's data. By staying small and agile, we remain completely focused on the product itself, avoiding the financial trap that often comes with taking on capital too early and concentrating solely on sales and rapid expansion. We believe in stable, informed growth, with every decision based on real-world usage and research.</p>
+<h2>A team of passionate creators</h2>
+<p>We are a team of developers, designers, innovators, and entrepreneurs, all laser-focused on building something truly amazing.</p>
+<h2>An all-remote team</h2>
+<p>Our team is 100% remote, with flexible working hours, asynchronous communication, and the freedom to work from anywhere that has a reliable internet connection.</p>
+<h2>International by design</h2>
+<p>To build a global platform, you need a global team. It's no accident that our talented, diverse, and multilingual team is distributed around the entire world.</p>
+<h2>Contributor-first hiring</h2>
+<p>Many of our hires start off as contributors, so they are already familiar with our codebase, understand the pull request flow, and are engaged in open-source.</p>
diff --git a/website-next13/demo-data/pages/conduct.md b/website-next13/demo-data/pages/conduct.md
@@ -0,0 +1,48 @@
+<!-- Title: Code of Conduct -->
+<!-- Add this in the WYSIWYG Source Code Pane -->
+<h2 id="our-pledge">Our Pledge</h2>
+<p>We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation.</p>
+<p>We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.</p>
+<h2 id="our-standards">Our Standards</h2>
+<p>Examples of behavior that contributes to a positive environment for our community include:</p>
+<ul>
+<li>Demonstrating empathy and kindness toward other people</li>
+<li>Being respectful of differing opinions, viewpoints, and experiences</li>
+<li>Giving and gracefully accepting constructive feedback</li>
+<li>Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience</li>
+<li>Focusing on what is best not just for us as individuals, but for the overall community</li>
+</ul>
+<p>Examples of unacceptable behavior include:</p>
+<ul>
+<li>The use of sexualized language or imagery, and sexual attention or advances of any kind</li>
+<li>Trolling, insulting or derogatory comments, and personal or political attacks</li>
+<li>Public or private harassment</li>
+<li>Publishing others&rsquo; private information, such as a physical or email address, without their explicit permission</li>
+<li>Other conduct which could reasonably be considered inappropriate in a professional setting</li>
+</ul>
+<h2 id="enforcement-responsibilities">Enforcement Responsibilities</h2>
+<p>Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.</p>
+<p>Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.</p>
+<h2 id="scope">Scope</h2>
+<p>This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.</p>
+<h2 id="enforcement">Enforcement</h2>
+<p>Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at [INSERT CONTACT METHOD]. All complaints will be reviewed and investigated promptly and fairly.</p>
+<p>All community leaders are obligated to respect the privacy and security of the reporter of any incident.</p>
+<h2 id="enforcement-guidelines">Enforcement Guidelines</h2>
+<p>Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:</p>
+<h3 id="1-correction">1. Correction</h3>
+<p><strong>Community Impact</strong>: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.</p>
+<p><strong>Consequence</strong>: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.</p>
+<h3 id="2-warning">2. Warning</h3>
+<p><strong>Community Impact</strong>: A violation through a single incident or series of actions.</p>
+<p><strong>Consequence</strong>: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.</p>
+<h3 id="3-temporary-ban">3. Temporary Ban</h3>
+<p><strong>Community Impact</strong>: A serious violation of community standards, including sustained inappropriate behavior.</p>
+<p><strong>Consequence</strong>: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.</p>
+<h3 id="4-permanent-ban">4. Permanent Ban</h3>
+<p><strong>Community Impact</strong>: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.</p>
+<p><strong>Consequence</strong>: A permanent ban from any sort of public interaction within the community.</p>
+<h2 id="attribution">Attribution</h2>
+<p>This Code of Conduct is adapted from the <a href="https://www.contributor-covenant.org">Contributor Covenant</a>, version 2.1, available at <a href="https://www.contributor-covenant.org/version/2/1/code_of_conduct.html">https://www.contributor-covenant.org/version/2/1/code_of_conduct.html</a>.</p>
+<p>Community Impact Guidelines were inspired by <a href="https://github.com/mozilla/diversity">Mozilla&rsquo;s code of conduct enforcement ladder</a>.</p>
+<p>For answers to common questions about this code of conduct, see the FAQ at <a href="https://www.contributor-covenant.org/faq">https://www.contributor-covenant.org/faq</a>. Translations are available at <a href="https://www.contributor-covenant.org/translations">https://www.contributor-covenant.org/translations</a>.</p>
diff --git a/website-next13/demo-data/pages/privacy.md b/website-next13/demo-data/pages/privacy.md
@@ -0,0 +1,21 @@
+<!-- Title: Privacy Policy -->
+<!-- Note: this is a generic policy from the internet, not Directus' -->
+<!-- Add this in the WYSIWYG Source Code Pane -->
+<h2>Information that is gathered from visitors</h2>
+<p>In common with other websites, log files are stored on the web server saving details such as the visitor's IP address, browser type, referring page and time of visit.</p>
+<p>Cookies may be used to remember visitor preferences when interacting with the website.</p>
+<p>Where registration is required, the visitor's email and a username will be stored on the server.</p>
+<h2>How the Information is used</h2>
+<p>The information is used to enhance the vistor's experience when using the website to display personalised content and possibly advertising.</p>
+<p>E-mail addresses will not be sold, rented or leased to 3rd parties.</p>
+<p>E-mail may be sent to inform you of news of our services or offers by us or our affiliates.</p>
+<h2>Visitor Options</h2>
+<p>If you have subscribed to one of our services, you may unsubscribe by following the instructions which are included in e-mail that you receive.</p>
+<p>You may be able to block cookies via your browser settings but this may prevent you from access to certain features of the website.</p>
+<h2>Cookies</h2>
+<p>Cookies are small digital signature files that are stored by your web browser that allow your preferences to be recorded when visiting the website. Also they may be used to track your return visits to the website.</p>
+<p>3rd party advertising companies may also use cookies for tracking purposes.</p>
+<h2>Google Ads</h2>
+<p>Google, as a third party vendor, uses cookies to serve ads.</p>
+<p>Google's use of the DART cookie enables it to serve ads to visitors based on their visit to sites they visit on the Internet.</p>
+<p>Website visitors may opt out of the use of the DART cookie by visiting the Google ad and content network privacy policy.</p>
diff --git a/website-next13/demo-data/posts/becoming-a-productive-rabbit.jpeg b/website-next13/demo-data/posts/becoming-a-productive-rabbit.jpeg
diff --git a/website-next13/demo-data/posts/becoming-a-productive-rabbit.md b/website-next13/demo-data/posts/becoming-a-productive-rabbit.md
@@ -0,0 +1,21 @@
+<!-- Title: How To Become A Very Productive Rabbit -->
+<!-- Add this in the WYSIWYG Source Code Pane -->
+<p>Rabbits are known for their quickness and agility, but did you know they can also be incredibly productive? Here are a few tips to help you become the most productive rabbit you can be:</p>
+<ol>
+<li>
+<p>Set clear goals. Determine what you want to achieve and make a plan to reach your goals.</p>
+</li>
+<li>
+<p>Use your natural abilities. Rabbits are quick, so use that speed to your advantage by completing tasks quickly and efficiently.</p>
+</li>
+<li>
+<p>Stay organized. Keep your burrow neat and tidy so you can quickly find what you need when you need it.</p>
+</li>
+<li>
+<p>Take breaks. Despite their reputation for being quick, rabbits need breaks too. Take short hops to stretch your legs and rest your mind.</p>
+</li>
+<li>
+<p>Surround yourself with positive influences. Make friends with other productive rabbits and learn from their habits.</p>
+</li>
+</ol>
+<p>By following these tips, you'll be well on your way to becoming the most productive rabbit you can be. So, get hopping and get things done!</p>
diff --git a/website-next13/demo-data/posts/rabbit-facts.jpeg b/website-next13/demo-data/posts/rabbit-facts.jpeg
diff --git a/website-next13/demo-data/posts/rabbit-facts.md b/website-next13/demo-data/posts/rabbit-facts.md
@@ -0,0 +1,7 @@
+<!-- Title: Rabbits Facts That Will Blow Your Mind -->
+<!-- Add this in the WYSIWYG Source Code Pane -->
+<p>Rabbits are not just cute and cuddly, they are also talented singers! These furry creatures have a unique vocalization that is surprisingly melodic. When they're happy, they'll belt out a series of melodic trills that will make even the least musical person want to join in.</p>
+<p>Another mind-blowing fact about rabbits is that they are incredibly fast runners. They can reach speeds of up to 45 miles per hour, which is faster than most people can run! This makes them excellent at escaping danger and ensuring their survival.</p>
+<p>Did you know that rabbits have excellent eyesight? They have 360-degree vision, which allows them to see predators coming from any direction. This is why it's so hard to sneak up on a rabbit in the wild!</p>
+<p>Rabbits are also incredibly clean animals. They spend hours grooming themselves, and they'll even clean their friends to show them affection. This behavior not only helps them stay clean, but it also strengthens their bonds with one another.</p>
+<p>These are just a few of the many amazing facts about rabbits. If you're a fan of these cute and cuddly creatures, be sure to share these fun facts with your friends</p>
diff --git a/website-next13/demo-data/posts/steampunk-rabbits.jpeg b/website-next13/demo-data/posts/steampunk-rabbits.jpeg
diff --git a/website-next13/demo-data/posts/steampunk-rabbits.md b/website-next13/demo-data/posts/steampunk-rabbits.md
@@ -0,0 +1,7 @@
+<!-- Title: Why Steampunk Rabbits Are The Future Of Work -->
+<!-- Add this in the WYSIWYG Source Code Pane -->
+<p>Steampunk rabbits, with their blend of mechanical and organic abilities, are the perfect representation of the future of work. In a world where automation and technology are constantly advancing, these unique creatures embody the perfect balance between human and machine. They possess a level of dexterity, intelligence, and problem-solving skills that allow them to take on tasks previously only performed by humans.</p>
+<p>Not only do steampunk rabbits have the ability to work tirelessly without rest, but they also possess a level of creativity and innovation that is unmatched by traditional machines. Their unique design, combined with their adaptability and resourcefulness, make them the ideal candidate for a wide range of industries.</p>
+<p>From manufacturing to finance, steampunk rabbits are already making a big impact in the world of work. They have the ability to learn new skills quickly and can easily adapt to new tasks and environments. They are also able to work in hazardous conditions that would be too dangerous for humans.</p>
+<p>In addition to their practical benefits, steampunk rabbits also bring a level of excitement and novelty to the workplace. Their unique appearance and mechanical abilities have already captured the hearts of many and are sure to continue to do so in the future.</p>
+<p>So, why are steampunk rabbits the future of work? Simply put, they offer a perfect balance of efficiency, adaptability, and creativity that is unmatched by any other form of technology. If you haven't already, it's time to embrace this unique and exciting new breed of worker.</p>
diff --git a/website-next13/jsconfig.json b/website-next13/jsconfig.json
@@ -0,0 +1,8 @@
+{
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./*"]
+ }
+ }
+}
diff --git a/website-next13/lib/directus.js b/website-next13/lib/directus.js
@@ -0,0 +1,3 @@
+import { Directus } from "@directus/sdk"
+const directus = new Directus('https://CHANGE-THIS.directus.app/')
+export default directus
diff --git a/website-next13/next-env.d.ts b/website-next13/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/website-next13/next.config.js b/website-next13/next.config.js
@@ -0,0 +1,8 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+ experimental: {
+ appDir: true,
+ },
+}
+
+module.exports = nextConfig