summaryrefslogtreecommitdiff
path: root/examples/blog/src
diff options
context:
space:
mode:
authorGravatar Nate Moore <natemoo-re@users.noreply.github.com> 2021-04-26 16:54:20 -0500
committerGravatar GitHub <noreply@github.com> 2021-04-26 15:54:20 -0600
commitdea1a6dfc9dec54034d2b872b4cd36c0174814c6 (patch)
tree49569a511201b4defc23b6654b475e458452596a /examples/blog/src
parent0ea4a986e207238bf0ac1db841b2a5d5b567d84d (diff)
downloadastro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.tar.gz
astro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.tar.zst
astro-dea1a6dfc9dec54034d2b872b4cd36c0174814c6.zip
Update defaults directory structure to `src` and `dist` (#132)
* chore: update defaults in docs * chore: update config defaults * test: update tests to config defaults * chore: update gitignore to new defaults * docs: update readme to new defaults * chore: update examples to new defaults * chore: update default exclude in lang server * chore: update tests * test: fix failing tests * chore: update www defaults
Diffstat (limited to 'examples/blog/src')
-rw-r--r--examples/blog/src/components/AuthorCard.astro31
-rw-r--r--examples/blog/src/components/Counter.jsx15
-rw-r--r--examples/blog/src/components/MainHead.astro32
-rw-r--r--examples/blog/src/components/Nav.astro44
-rw-r--r--examples/blog/src/components/Pagination.astro34
-rw-r--r--examples/blog/src/components/PostPreview.astro58
-rw-r--r--examples/blog/src/data/authors.json27
-rw-r--r--examples/blog/src/layouts/post.astro31
-rw-r--r--examples/blog/src/pages/$posts.astro59
-rw-r--r--examples/blog/src/pages/$tag.astro58
-rw-r--r--examples/blog/src/pages/index.astro39
-rw-r--r--examples/blog/src/pages/post/muppet-babies.md11
-rw-r--r--examples/blog/src/pages/post/muppet-treasure-island.md13
-rw-r--r--examples/blog/src/pages/post/muppets-from-space.md11
-rw-r--r--examples/blog/src/pages/post/muppets-most-wanted.md11
-rw-r--r--examples/blog/src/pages/post/the-muppet-christmas-carol.md11
-rw-r--r--examples/blog/src/pages/post/the-muppet-show.md11
-rw-r--r--examples/blog/src/pages/post/the-muppets.md11
18 files changed, 507 insertions, 0 deletions
diff --git a/examples/blog/src/components/AuthorCard.astro b/examples/blog/src/components/AuthorCard.astro
new file mode 100644
index 000000000..46ff504f7
--- /dev/null
+++ b/examples/blog/src/components/AuthorCard.astro
@@ -0,0 +1,31 @@
+---
+export let author;
+---
+
+<style lang="scss">
+.card {
+ display: flex;
+ align-items: center;
+}
+
+.avatar {
+ width: 1.5rem;
+ height: 1.5rem;
+ margin-right: 0.5rem;
+ object-fit: cover;
+ border-radius: 50%;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+}
+</style>
+
+<div class="card">
+ <div class="avatar">
+ <img class="avatar" src={author.img} alt={author.name} />
+ </div>
+ {author.name}
+</div>
diff --git a/examples/blog/src/components/Counter.jsx b/examples/blog/src/components/Counter.jsx
new file mode 100644
index 000000000..c9b27e1a7
--- /dev/null
+++ b/examples/blog/src/components/Counter.jsx
@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+// import confetti from 'canvas-confetti';
+
+export default function Counter() {
+ // Declare a new state variable, which we'll call "count"
+ const [count, setCount] = useState(0);
+ // console.log(confetti());
+
+ return (
+ <div>
+ <p>You clicked {count} times</p>
+ <button onClick={() => setCount(count + 1)}>Click me</button>
+ </div>
+ );
+}
diff --git a/examples/blog/src/components/MainHead.astro b/examples/blog/src/components/MainHead.astro
new file mode 100644
index 000000000..bff812b0c
--- /dev/null
+++ b/examples/blog/src/components/MainHead.astro
@@ -0,0 +1,32 @@
+---
+// props
+export let title: string;
+export let description: string;
+export let image: string | undefined;
+export let type: string | undefined;
+
+// internal data
+const OG_TYPES = {
+ 'movie': 'video.movie',
+ 'television': 'video.tv_show'
+}
+---
+
+<!-- Common -->
+<meta charset="UTF-8" />
+<title>{title}</title>
+<meta name="description" content={description} />
+<link rel="stylesheet" href="/global.css" />
+
+<!-- OpenGraph -->
+<meta property="og:title" content={title} />
+<meta property="og:description" content={description} />
+{image && (<meta property="og:image" content={image} />)}
+{OG_TYPES[type] && (<meta property="og:type" content={OG_TYPES[type]} />)}
+
+<!-- Twitter -->
+<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} />
+<meta name="twitter:site" content="@astro" />
+<meta name="twitter:title" content={title} />
+<meta name="twitter:description" content={description} />
+{image && (<meta name="twitter:image" content={image} />)}
diff --git a/examples/blog/src/components/Nav.astro b/examples/blog/src/components/Nav.astro
new file mode 100644
index 000000000..f1ac28c98
--- /dev/null
+++ b/examples/blog/src/components/Nav.astro
@@ -0,0 +1,44 @@
+<style lang="scss">
+.header {
+ display: flex;
+ align-items: center;
+ padding: 2rem;
+}
+
+.title {
+ margin: 0;
+ font-size: 1em;
+ margin-right: 2rem;
+}
+
+.nav {
+ display: flex;
+}
+
+ul {
+ display: flex;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+li {
+ margin: 0;
+}
+
+a {
+ display: block;
+ margin-left: 1rem;
+ margin-right: 1rem;
+}
+</style>
+
+<nav class="header">
+ <h1 class="title">Muppet Blog</h1>
+ <ul class="nav">
+ <li><a href="/">All Posts</a></li>
+ <li><a href="/tag/movie/1">Movies</a></li>
+ <li><a href="/tag/television/1">Television</a></li>
+ <li><a href="/about">About</a></li>
+ </ul>
+</nav>
diff --git a/examples/blog/src/components/Pagination.astro b/examples/blog/src/components/Pagination.astro
new file mode 100644
index 000000000..8e033c668
--- /dev/null
+++ b/examples/blog/src/components/Pagination.astro
@@ -0,0 +1,34 @@
+---
+export let prevUrl: string;
+export let nextUrl: string;
+---
+
+<style lang="scss">
+.nav {
+ display: flex;
+ max-width: 600px;
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: 2rem;
+ padding-right: 2rem;
+}
+
+.prev,
+.next {
+ display: block;
+}
+
+.prev {
+ margin-right: auto;
+}
+
+.next {
+ margin-left: auto;
+}
+</style>
+
+<nav class="nav">
+ <a class="prev" href={prevUrl || '#'}>Prev</a>
+ <a class="next" href={nextUrl || '#'}>Next</a>
+</nav>
diff --git a/examples/blog/src/components/PostPreview.astro b/examples/blog/src/components/PostPreview.astro
new file mode 100644
index 000000000..e4e39143a
--- /dev/null
+++ b/examples/blog/src/components/PostPreview.astro
@@ -0,0 +1,58 @@
+---
+export let post;
+export let author;
+
+import AuthorCard from './AuthorCard.astro';
+
+function formatDate(date) {
+ return new Date(date).toUTCString();
+}
+---
+
+<style lang="scss">
+.post {
+ display: grid;
+ grid-template-columns: 8rem auto;
+ grid-gap: 1.5rem;
+ margin-top: 1.5rem;
+ margin-bottom: 1.5rem;
+}
+
+.thumb {
+ width: 8rem;
+ height: 8rem;
+ object-fit: cover;
+ border-radius: 0.25rem;
+ overflow: hidden;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+}
+
+h1 {
+ font-weight: 700;
+ font-size: 1em;
+ margin-bottom: 0;
+}
+
+time {
+ display: block;
+ margin-top: 0.5em;
+ margin-bottom: 0.5em;
+}
+</style>
+
+<article class="post">
+ <div class="thumb">
+ <img src={post.image} alt={post.title} />
+ </div>
+ <div class="data">
+ <h1>{post.title}</h1>
+ <AuthorCard author={author} />
+ <time>{formatDate(post.date)}</time>
+ <p>{post.description}</p>
+ <a href={post.url}>Read</a>
+ </div>
+</article>
diff --git a/examples/blog/src/data/authors.json b/examples/blog/src/data/authors.json
new file mode 100644
index 000000000..c0f247e02
--- /dev/null
+++ b/examples/blog/src/data/authors.json
@@ -0,0 +1,27 @@
+{
+ "animal": {
+ "name": "Animal",
+ "email": "animal@muppets.co",
+ "img": "/images/animal.jpg"
+ },
+ "kermit": {
+ "name": "Kermit the Frog",
+ "email": "kermit@muppets.co",
+ "img": "/images/kermit.jpg"
+ },
+ "ms-piggy": {
+ "name": "Animal",
+ "email": "mspiggy@muppets.co",
+ "img": "/images/ms-piggy.jpg"
+ },
+ "gonzo": {
+ "name": "Gonzo",
+ "email": "thegonz@muppets.co",
+ "img": "/images/gonzo.jpg"
+ },
+ "rizzo": {
+ "name": "Rizzo the Rat",
+ "email": "rizzo@muppets.co",
+ "img": "/images/rizzo.jpg"
+ }
+}
diff --git a/examples/blog/src/layouts/post.astro b/examples/blog/src/layouts/post.astro
new file mode 100644
index 000000000..09e0fdbcd
--- /dev/null
+++ b/examples/blog/src/layouts/post.astro
@@ -0,0 +1,31 @@
+---
+import AuthorCard from '../components/AuthorCard.astro';
+import MainHead from '../components/MainHead.astro';
+import Nav from '../components/Nav.astro';
+
+export let content;
+
+import authorData from '../data/authors.json';
+---
+
+<html>
+ <head>
+ <title>{content.title}</title>
+ <MainHead title={content.title} description={content.description} image={content.image} />
+ </head>
+
+ <body>
+ <Nav />
+
+ <main class="wrapper">
+ <h1>{content.title}</h1>
+ <AuthorCard author={authorData[content.author]} />
+ <article>
+ <slot />
+ </article>
+ </main>
+
+ <footer>
+ </footer>
+ </body>
+</html>
diff --git a/examples/blog/src/pages/$posts.astro b/examples/blog/src/pages/$posts.astro
new file mode 100644
index 000000000..ebb20705d
--- /dev/null
+++ b/examples/blog/src/pages/$posts.astro
@@ -0,0 +1,59 @@
+---
+import MainHead from '../components/MainHead.astro';
+import Nav from '../components/Nav.astro';
+import PostPreview from '../components/PostPreview.astro';
+import Pagination from '../components/Pagination.astro';
+
+// page
+let title = 'Muppet Blog: Home';
+let description = 'An example blog on Astro';
+
+// collection
+import authorData from '../data/authors.json';
+export let collection: any;
+export async function createCollection() {
+ return {
+ async data() {
+ let allPosts = Astro.fetchContent('./post/*.md');
+ allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
+ return allPosts;
+ },
+ pageSize: 3,
+ rss: {
+ title: 'Muppet Blog',
+ description: 'An example blog on Astro',
+ customData: `<language>en-us</language>`,
+ item: (item) => ({
+ title: item.title,
+ description: item.description,
+ link: item.url,
+ pubDate: item.date,
+ }),
+ }
+ };
+}
+---
+
+<html>
+ <head>
+ <title>{title}</title>
+ <MainHead title={title} description={description} />
+ <link rel="canonical" href={'https://mysite.dev' + collection.url.current} />
+ {collection.url.next && <link rel="next" href={'https://mysite.dev' + collection.url.next} />}
+ {collection.url.prev && <link rel="prev" href={'https://mysite.dev' + collection.url.prev} />}
+ </head>
+
+ <body>
+ <Nav />
+
+ <main class="wrapper">
+ <h1>All Posts</h1>
+ <small>{collection.start + 1}–{collection.end + 1} of {collection.total}</small><br />
+ {collection.data.map((post) => <PostPreview post={post} author={authorData[post.author]} />)}
+ </main>
+
+ <footer>
+ <Pagination prevUrl={collection.url.prev} nextUrl={collection.url.next} />
+ </footer>
+ </body>
+</html>
diff --git a/examples/blog/src/pages/$tag.astro b/examples/blog/src/pages/$tag.astro
new file mode 100644
index 000000000..6eef913cf
--- /dev/null
+++ b/examples/blog/src/pages/$tag.astro
@@ -0,0 +1,58 @@
+---
+import MainHead from '../components/MainHead.astro';
+import Nav from '../components/Nav.astro';
+import PostPreview from '../components/PostPreview.astro';
+import Pagination from '../components/Pagination.astro';
+
+// page
+let title = 'Muppet Blog: Home';
+let description = 'An example blog on Astro';
+
+// collection
+import authorData from '../data/authors.json';
+export let collection: any;
+export async function createCollection() {
+ let allPosts = Astro.fetchContent('./post/*.md');
+ let allTags = new Set();
+ let routes = [];
+ for (const post of allPosts) {
+ if (!allTags.has(post.tag)) {
+ allTags.add(post.tag);
+ routes.push({ tag: post.tag });
+ }
+ }
+ return {
+ async data({ params }) {
+ allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
+ return allPosts.filter((post) => post.tag === params.tag);
+ },
+ routes,
+ permalink: ({ params }) => `/tag/${params.tag}`,
+ pageSize: 3
+ };
+}
+---
+
+<html>
+ <head>
+ <title>{title}</title>
+ <MainHead title={title} description={description} />
+ <link rel="canonical" href={'https://mysite.dev' + collection.url.current} />
+ {collection.url.next && <link rel="next" href={'https://mysite.dev' + collection.url.next} />}
+ {collection.url.prev && <link rel="prev" href={'https://mysite.dev' + collection.url.prev} />}
+ </head>
+
+ <body>
+ <Nav />
+
+ <main class="wrapper">
+ <h1>Tagged: {collection.params.tag}</h1>
+ <small>{collection.start + 1}–{collection.end + 1} of {collection.total}</small><br />
+ {collection.data.map((post) => <PostPreview post={post} author={authorData[post.author]} />)}
+ </main>
+
+ <footer>
+ <Pagination prevUrl={collection.url.prev} nextUrl={collection.url.next} />
+ </footer>
+ </body>
+</html>
diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro
new file mode 100644
index 000000000..2af3a1a03
--- /dev/null
+++ b/examples/blog/src/pages/index.astro
@@ -0,0 +1,39 @@
+---
+import MainHead from '../components/MainHead.astro';
+import Nav from '../components/Nav.astro';
+import PostPreview from '../components/PostPreview.astro';
+import Pagination from '../components/Pagination.astro';
+
+// page
+let title = 'Muppet Blog: Home';
+let description = 'An example blog on Astro';
+
+// collection
+// note: we want to show first 3 posts here, but we don’t want to paginate at /1, /2, /3, etc.
+// so we show a preview of posts here, but actually paginate from $posts.astro
+import authorData from '../data/authors.json';
+
+let allPosts = Astro.fetchContent('./post/*.md');
+allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
+let firstThree = allPosts.slice(0, 3);
+---
+
+<html>
+ <head>
+ <title>{title}</title>
+ <MainHead title={title} description={description} />
+ </head>
+
+ <body>
+ <Nav />
+
+ <main class="wrapper">
+ <h1>Recent posts</h1>
+ {firstThree.map((post) => <PostPreview post={post} author={authorData[post.author]} />)}
+ </main>
+
+ <footer>
+ <Pagination nextUrl="/posts/2" />
+ </footer>
+ </body>
+</html>
diff --git a/examples/blog/src/pages/post/muppet-babies.md b/examples/blog/src/pages/post/muppet-babies.md
new file mode 100644
index 000000000..53339cac1
--- /dev/null
+++ b/examples/blog/src/pages/post/muppet-babies.md
@@ -0,0 +1,11 @@
+---
+layout: ../../layouts/post.astro
+title: Muppet Babies
+tag: television
+date: 1984-09-15
+image: /images/muppet-babies.jpg
+author: ms-piggy
+description: Muppet Babies,is an American animated television series that aired from September 15, 1984, to November 2, 1991, on CBS.
+---
+
+Jim Henson's Muppet Babies, commonly known by the shortened title Muppet Babies, is an American animated television series that aired from September 15, 1984, to November 2, 1991, on CBS. The show portrays childhood versions of the Muppets living together in a nursery under the care of a human woman identified only as Nanny (the whereabouts of their parents are never addressed), who appears in almost every episode, but her face is never visible; only the babies' view of her pink skirt, purple sweater, and distinctive green and white striped socks is shown. The idea of presenting the Muppets as children first appeared in a dream sequence in The Muppets Take Manhattan (1984), released two months before Muppet Babies debuted, in which Miss Piggy imagined what it would be like if she and Kermit the Frog had grown up together.
diff --git a/examples/blog/src/pages/post/muppet-treasure-island.md b/examples/blog/src/pages/post/muppet-treasure-island.md
new file mode 100644
index 000000000..f193ff8ae
--- /dev/null
+++ b/examples/blog/src/pages/post/muppet-treasure-island.md
@@ -0,0 +1,13 @@
+---
+layout: ../../layouts/post.astro
+title: Muppet Treasure Island
+tag: movie
+date: 1996-02-16
+image: /images/muppet-treasure-island.png
+author: ms-piggy
+description: Muppet Treasure Island is a 1996 American musical adventure comedy film directed by Brian Henson.
+---
+
+Muppet Treasure Island is a 1996 American musical adventure comedy film directed by Brian Henson. It is the fifth theatrical film in The Muppets franchise.
+
+Adapted from the 1883 novel Treasure Island by Robert Louis Stevenson, similarly to its predecessor The Muppet Christmas Carol (1992), the key roles were played by live-action actors, with the Muppets in supporting roles. It stars Tim Curry as Long John Silver, and Kevin Bishop as Jim Hawkins alongside Muppet performers Dave Goelz, Steve Whitmire, Jerry Nelson, Kevin Clash, and Frank Oz portraying various roles.
diff --git a/examples/blog/src/pages/post/muppets-from-space.md b/examples/blog/src/pages/post/muppets-from-space.md
new file mode 100644
index 000000000..d4d9c521f
--- /dev/null
+++ b/examples/blog/src/pages/post/muppets-from-space.md
@@ -0,0 +1,11 @@
+---
+layout: ../../layouts/post.astro
+title: Muppets from Space
+tag: movie
+date: 1999-07-14
+image: /images/muppets-from-space.jpg
+author: rizzo
+description: Muppets from Space is a 1999 American science fiction comedy film directed by Tim Hill (in his feature directorial debut) and written by Jerry Juhl, Joseph Mazzarino, and Ken Kaufman.
+---
+
+Muppets from Space is a 1999 American science fiction comedy film directed by Tim Hill (in his feature directorial debut) and written by Jerry Juhl, Joseph Mazzarino, and Ken Kaufman. The sixth theatrical film in The Muppets franchise, it is the first Muppets film to not be a musical and the first film since the death of Muppets creator Jim Henson to have an original Muppets-focused plot. It stars Jeffrey Tambor, F. Murray Abraham, David Arquette, Pat Hingle, Rob Schneider, Andie MacDowell, Josh Charles, Hulk Hogan, and Ray Liotta, alongside Muppet performers Dave Goelz, Steve Whitmire, Bill Barretta, and Frank Oz. In the film, Gonzo attempts to discover his origins after having nightmares. After he and Rizzo the Rat are captured by government officials during his search, Kermit the Frog and the rest of the Muppet gang must save them.
diff --git a/examples/blog/src/pages/post/muppets-most-wanted.md b/examples/blog/src/pages/post/muppets-most-wanted.md
new file mode 100644
index 000000000..7d7f99dce
--- /dev/null
+++ b/examples/blog/src/pages/post/muppets-most-wanted.md
@@ -0,0 +1,11 @@
+---
+layout: ../../layouts/post.astro
+title: Muppets Most Wanted
+tag: movie
+date: 2014-03-11
+image: /images/muppets-most-wanted.jpg
+author: animal
+description: Muppets Most Wanted is a 2014 American musical crime comedy film and the eighth theatrical film featuring the Muppets.
+---
+
+Muppets Most Wanted is a 2014 American musical crime comedy film and the eighth theatrical film featuring the Muppets.[4] Directed by James Bobin and written by Bobin and Nicholas Stoller, the film is a direct sequel to The Muppets (2011) and stars Ricky Gervais, Ty Burrell and Tina Fey, as well as Muppets performers Steve Whitmire, Eric Jacobson, Dave Goelz, Bill Barretta, David Rudman, Matt Vogel and Peter Linz.[5] In the film, the Muppets become involved in an international crime caper perpetrated by Constantine, a criminal with a strong resemblance to Kermit, while on a world tour in Europe.[6] As of 2021, it is the most recent theatrical Muppets film.
diff --git a/examples/blog/src/pages/post/the-muppet-christmas-carol.md b/examples/blog/src/pages/post/the-muppet-christmas-carol.md
new file mode 100644
index 000000000..dc32fc66e
--- /dev/null
+++ b/examples/blog/src/pages/post/the-muppet-christmas-carol.md
@@ -0,0 +1,11 @@
+---
+layout: ../../layouts/post.astro
+title: The Muppet Christmas Carol
+tag: movie
+date: 1992-12-11
+image: /images/the-muppet-christmas-carol.jpg
+author: kermit
+description: The Muppet Christmas Carol is a 1992 American Christmas musical fantasy comedy drama film directed by Brian Henson (in his feature directorial debut) from a screenplay by Jerry Juhl.
+---
+
+The Muppet Christmas Carol is a 1992 American Christmas musical fantasy comedy drama film directed by Brian Henson (in his feature directorial debut) from a screenplay by Jerry Juhl. The fourth theatrical film in The Muppets franchise, it was the first film to be produced following the deaths of Muppets creator Jim Henson and performer Richard Hunt, with the film being dedicated to both of them. Adapted from the 1843 novella A Christmas Carol by Charles Dickens, it stars Michael Caine as Ebenezer Scrooge, alongside Muppet performers Dave Goelz, Steve Whitmire, Jerry Nelson, and Frank Oz portraying various roles. Although artistic license is taken to suit the aesthetic of the Muppets, The Muppet Christmas Carol otherwise follows Dickens's original story closely.[4]
diff --git a/examples/blog/src/pages/post/the-muppet-show.md b/examples/blog/src/pages/post/the-muppet-show.md
new file mode 100644
index 000000000..ebd2ca6dd
--- /dev/null
+++ b/examples/blog/src/pages/post/the-muppet-show.md
@@ -0,0 +1,11 @@
+---
+layout: ../../layouts/post.astro
+title: The Muppet Show
+tag: television
+date: 1976-09-13
+image: /images/the-muppet-show.jpg
+author: kermit
+description: The Muppet Show is a comedy television series created by Jim Henson and featuring the Muppets.
+---
+
+The Muppet Show is a comedy television series created by Jim Henson and featuring the Muppets. The series originated as two pilot episodes produced by Henson for ABC in 1974 and 1975, respectively. While neither episode was moved forward as a series and other networks in the United States rejected Henson's proposals, British producer Lew Grade expressed interest in the project and agreed to co-produce The Muppet Show for ATV. Five seasons, totalling 120 episodes, were broadcast on ATV and other ITV franchises in the United Kingdom and in first-run syndication through CBS in the US from 1976 to 1981. The programme was taped at Elstree Studios, England.
diff --git a/examples/blog/src/pages/post/the-muppets.md b/examples/blog/src/pages/post/the-muppets.md
new file mode 100644
index 000000000..0f3266170
--- /dev/null
+++ b/examples/blog/src/pages/post/the-muppets.md
@@ -0,0 +1,11 @@
+---
+layout: ../../layouts/post.astro
+title: The Muppets
+tag: movie
+date: 2011-11-04
+image: /images/the-muppets.jpg
+author: gonzo
+description: The Muppets is a 2011 American musical comedy film directed by James Bobin, written by Jason Segel and Nicholas Stoller, and the seventh theatrical film featuring the Muppets.
+---
+
+The Muppets is a 2011 American musical comedy film directed by James Bobin, written by Jason Segel and Nicholas Stoller, and the seventh theatrical film featuring the Muppets.[6] The film stars Segel, Amy Adams, Chris Cooper, and Rashida Jones, as well as Muppets performers Steve Whitmire, Eric Jacobson, Dave Goelz, Bill Barretta, David Rudman, Matt Vogel, and Peter Linz. Bret McKenzie served as music supervisor, writing four of the film's five original songs, while Christophe Beck composed the film's score.[7] In the film, devoted Muppet fan Walter, his human brother Gary and Gary's girlfriend Mary help Kermit the Frog reunite the disbanded Muppets, as they must raise $10 million to save the Muppet Theater from Tex Richman, a businessman who plans to demolish the studio to drill for oil.