mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-30 09:27:13 +00:00
Example: Add AMP example
This commit is contained in:
Sébastien Chopin
parent
484a8a8f8c
commit
6b275e3dbd
11
examples/with-amp/app.html
Normal file
11
examples/with-amp/app.html
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html ⚡ {{ HTML_ATTRS }}>
|
||||||
|
<head>
|
||||||
|
{{ HEAD }}
|
||||||
|
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
|
||||||
|
<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
|
||||||
|
</head>
|
||||||
|
<body {{ BODY_ATTRS }}>
|
||||||
|
{{ APP }}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
23
examples/with-amp/assets/main.css
Normal file
23
examples/with-amp/assets/main.css
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
body {
|
||||||
|
font-family: Roboto, sans-serif;
|
||||||
|
padding: 30px;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.caption {
|
||||||
|
color: #ccc;
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.byline {
|
||||||
|
color: #aaa;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 30px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
11
examples/with-amp/components/Byline.vue
Normal file
11
examples/with-amp/components/Byline.vue
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<template>
|
||||||
|
<div class="byline">
|
||||||
|
By {{ author }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ['author']
|
||||||
|
}
|
||||||
|
</script>
|
||||||
33
examples/with-amp/nuxt.config.js
Normal file
33
examples/with-amp/nuxt.config.js
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
module.exports = {
|
||||||
|
head: {
|
||||||
|
meta: [
|
||||||
|
{ charset: 'utf-8' },
|
||||||
|
{ name: 'viewport', content: 'width=device-width,minimum-scale=1' }
|
||||||
|
],
|
||||||
|
link: [
|
||||||
|
{ rel: 'canonical', href: '/' },
|
||||||
|
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
css: ['~/assets/main.css'],
|
||||||
|
loading: false, // Disable loading bar since AMP will not generate a dynamic page
|
||||||
|
render: {
|
||||||
|
// Disable resourceHints since we don't load any scripts for AMP
|
||||||
|
resourceHints: false
|
||||||
|
},
|
||||||
|
hooks: {
|
||||||
|
// This hook is called before rendering the html to the browser
|
||||||
|
'render:route': (url, result) => {
|
||||||
|
let html = result.html
|
||||||
|
// Add amp-custom tag to added CSS
|
||||||
|
html = html.replace(/<style data-vue-ssr/g, '<style amp-custom data-vue-ssr')
|
||||||
|
// Remove every script tag from generated HTML
|
||||||
|
html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
|
||||||
|
// Add AMP script before </head>
|
||||||
|
const ampScript = '<script async src="https://cdn.ampproject.org/v0.js"></script>'
|
||||||
|
html = html.replace('</head>', ampScript + '</head>')
|
||||||
|
// Update result html
|
||||||
|
result.html = html
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
12
examples/with-amp/package.json
Normal file
12
examples/with-amp/package.json
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"name": "with-amp",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"dependencies": {
|
||||||
|
"nuxt": "latest"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "nuxt",
|
||||||
|
"build": "nuxt build",
|
||||||
|
"start": "nuxt start"
|
||||||
|
}
|
||||||
|
}
|
||||||
27
examples/with-amp/pages/dog.vue
Normal file
27
examples/with-amp/pages/dog.vue
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>The Dog</h1>
|
||||||
|
<byline author="Meow Meow Fuzzyface"/>
|
||||||
|
<amp-img src="/dog.jpg" width="470" height="350" layout="responsive" alt="Woof"/>
|
||||||
|
<p class="caption">Woooooooooooof</p>
|
||||||
|
<p>Go to <a href="/">the cat</a>.</p>
|
||||||
|
<p>Wafer donut candy soufflé lemon drops icing. Marzipan gummi bears pie danish lollipop pudding powder gummi bears sweet. Pie sweet roll sweet roll topping chocolate bar dragée pudding chocolate cake. Croissant sweet chocolate bar cheesecake candy canes. Tootsie roll icing macaroon bonbon cupcake apple pie candy canes biscuit candy canes. Jujubes jelly liquorice toffee gingerbread. Candy tootsie roll macaroon chocolate bar icing sugar plum pie. Icing gummies chocolate bar chocolate marzipan bonbon cookie chocolate tart. Caramels danish halvah croissant. Cheesecake cookie tootsie roll ice cream. Powder dessert carrot cake muffin tiramisu lemon drops liquorice topping brownie. Soufflé chocolate cake croissant cupcake jelly.</p>
|
||||||
|
<p>Muffin gummies dessert cheesecake candy canes. Candy canes danish cotton candy tart dessert powder bear claw marshmallow. Muffin chocolate marshmallow danish. Chocolate bar biscuit cake tiramisu. Topping sweet brownie jujubes powder marzipan. Croissant wafer bonbon chupa chups cake cake marzipan caramels jujubes. Cupcake cheesecake sweet roll marshmallow lollipop danish jujubes jelly icing. Apple pie chupa chups lollipop jelly-o cheesecake jelly beans cake dessert. Tootsie roll tootsie roll bonbon pastry croissant gummi bears cake cake. Fruitcake sugar plum halvah gingerbread cookie pastry chupa chups wafer lemon drops. Marshmallow liquorice oat cake lollipop. Lemon drops oat cake halvah liquorice danish powder cupcake soufflé. Cake tart topping jelly-o tart sugar plum. Chocolate bar cookie wafer tootsie roll candy cotton candy toffee pie donut.</p>
|
||||||
|
<p>Ice cream lollipop marshmallow tiramisu jujubes croissant. Bear claw lemon drops marzipan candy bonbon cupcake powder. Candy canes cheesecake bear claw pastry cake donut jujubes. Icing tart jelly-o soufflé bonbon apple pie. Cheesecake pie chupa chups toffee powder. Bonbon lemon drops carrot cake pudding candy halvah cheesecake lollipop cupcake. Pudding marshmallow fruitcake. Gummi bears bonbon chupa chups lemon drops. Wafer dessert gummies gummi bears biscuit donut tiramisu gummi bears brownie. Tootsie roll liquorice bonbon cookie. Sesame snaps chocolate bar cake croissant chupa chups cheesecake gingerbread tiramisu jelly. Cheesecake ice cream muffin lollipop gummies. Sesame snaps jelly beans sweet bear claw tart.</p>
|
||||||
|
<p>Sweet topping chupa chups chocolate cake jelly-o liquorice danish. Pastry jelly beans apple pie dessert pastry lemon drops marzipan gummies. Jelly beans macaroon bear claw cotton candy. Toffee sweet lollipop toffee oat cake. Jelly-o oat cake fruitcake chocolate bar sweet. Lemon drops gummies chocolate cake lollipop bear claw croissant danish icing. Chocolate bar donut brownie chocolate cake lemon drops chocolate bar. Cake fruitcake pudding chocolate apple pie. Brownie tiramisu chocolate macaroon lemon drops wafer soufflé jujubes icing. Cheesecake tiramisu cake macaroon tart lollipop donut. Gummi bears dragée pudding bear claw. Muffin cake cupcake candy canes. Soufflé candy canes biscuit. Macaroon gummies danish.</p>
|
||||||
|
<p>Cupcake cupcake tart. Cotton candy danish candy canes oat cake ice cream candy canes powder wafer. Chocolate sesame snaps oat cake dragée cheesecake. Sesame snaps marshmallow topping liquorice cookie marshmallow. Liquorice pudding chocolate bar. Cake powder brownie fruitcake. Carrot cake dessert marzipan sugar plum cupcake cheesecake pastry. Apple pie macaroon ice cream fruitcake apple pie cookie. Tootsie roll ice cream oat cake cheesecake donut cheesecake bear claw. Sesame snaps marzipan jelly beans chocolate tootsie roll. Chocolate bar donut dragée ice cream biscuit. Pie candy canes muffin candy canes ice cream tiramisu.</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Byline from '../components/Byline'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
head: {
|
||||||
|
title: 'The Dog'
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Byline
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
27
examples/with-amp/pages/index.vue
Normal file
27
examples/with-amp/pages/index.vue
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>The Cat</h1>
|
||||||
|
<byline author="Dan Zajdband"/>
|
||||||
|
<amp-img src="/cat.jpg" width="470" height="350" layout="responsive" alt="Meow"/>
|
||||||
|
<p class="caption">Meowwwwwwww</p>
|
||||||
|
<p>Go to <a href="/dog">the dog</a>.</p>
|
||||||
|
<p>Cat ipsum dolor sit amet, eat grass, throw it back up but refuse to leave cardboard box or groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked!. Hide from vacuum cleaner. Chirp at birds chew foot chase the pig around the house and meoooow!. Chase ball of string climb a tree, wait for a fireman jump to fireman then scratch his face claw drapes, for meow to be let in yet attack dog, run away and pretend to be victim meow loudly just to annoy owners. Touch water with paw then recoil in horror hide when guests come over, and tuxedo cats always looking dapper so has closed eyes but still sees you or a nice warm laptop for me to sit on pee in human's bed until he cleans the litter box. Steal the warm chair right after you get up cat not kitten around yet claws in your leg eat all the power cords. Lick sellotape curl into a furry donut immediately regret falling into bathtub or you call this cat food? and fall asleep on the washing machine. Purr for no reason hack up furballs and pelt around the house and up and down stairs chasing phantoms. If it smells like fish eat as much as you wish. Unwrap toilet paper chew iPad power cord white cat sleeps on a black shirt lick the other cats. Lounge in doorway mew. Has closed eyes but still sees you sleep on keyboard, so hunt anything that moves lick sellotape but slap owner's face at 5am until human fills food dish if it smells like fish eat as much as you wish. Meow to be let in find empty spot in cupboard and sleep all day and thug cat sit by the fire burrow under covers always hungry. Swat at dog hide when guests come over purrrrrr chew on cable so mark territory, yet howl on top of tall thing or find something else more interesting. Chase mice kitten is playing with dead mouse. Sit and stare if it fits, i sits. Mark territory damn that dog , but step on your keyboard while you're gaming and then turn in a circle put butt in owner's face human give me attention meow or eat and than sleep on your face. Friends are not food jump around on couch, meow constantly until given food, or walk on car leaving trail of paw prints on hood and windshield, and spread kitty litter all over house, going to catch the red dot today going to catch the red dot today. Jump off balcony, onto stranger's head.</p>
|
||||||
|
<p>Meow to be let out damn that dog howl uncontrollably for no reason caticus cuteicus for play riveting piece on synthesizer keyboard. Meow loudly just to annoy owners the dog smells bad for eat the fat cats food, yet ignore the squirrels, you'll never catch them anyway cat snacks spread kitty litter all over house or hopped up on catnip. Spit up on light gray carpet instead of adjacent linoleum throwup on your pillow, so cat is love, cat is life yet human is washing you why halp oh the horror flee scratch hiss bite. Chase mice. Swat turds around the house hide at bottom of staircase to trip human. Meowing non stop for food howl on top of tall thing. Shake treat bag pee in human's bed until he cleans the litter box missing until dinner time. Have secret plans climb a tree, wait for a fireman jump to fireman then scratch his face bleghbleghvomit my furball really tie the room together. Chase dog then run away purr shake treat bag spit up on light gray carpet instead of adjacent linoleum but dream about hunting birds. Hiss at vacuum cleaner milk the cow lay on arms while you're using the keyboard sleep in the bathroom sink. Stare at ceiling touch water with paw then recoil in horror or refuse to leave cardboard box. Paw at your fat belly plan steps for world domination for going to catch the red dot today going to catch the red dot today slap owner's face at 5am until human fills food dish scratch at the door then walk away for intrigued by the shower, but steal the warm chair right after you get up. Fall asleep on the washing machine destroy couch as revenge scream at teh bath so love to play with owner's hair tie. Howl uncontrollably for no reason rub whiskers on bare skin act innocent. Cats making all the muffins lick butt and make a weird face meow all night having their mate disturbing sleeping humans human give me attention meow intently stare at the same spot. Sleep on dog bed, force dog to sleep on floor spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce for wake up human for food at 4am or pooping rainbow while flying in a toasted bread costume in space sleep on keyboard put toy mouse in food bowl run out of litter box at full speed . Jump off balcony, onto stranger's head lick butt and make a weird face but go into a room to decide you didn't want to be in there anyway so then cats take over the world, pee in human's bed until he cleans the litter box and if it fits, i sits caticus cuteicus. Eats owners hair then claws head lounge in doorway, and hide when guests come over chase ball of string eat owner's food play riveting piece on synthesizer keyboard. Purrr purr littel cat, little cat purr purr spit up on light gray carpet instead of adjacent linoleum kitty loves pigs yet damn that dog meow or walk on car leaving trail of paw prints on hood and windshield. Roll on the floor purring your whiskers off meow all night having their mate disturbing sleeping humans need to chase tail meow hide when guests come over. Soft kitty warm kitty little ball of furr destroy the blinds meow leave hair everywhere attack dog, run away and pretend to be victim. Going to catch the red dot today going to catch the red dot today instantly break out into full speed gallop across the house for no reason meow so hide when guests come over, yet hide at bottom of staircase to trip human toy mouse squeak roll over claws in your leg. Cat slap dog in face lick plastic bags why must they do that.</p>
|
||||||
|
<p>Jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed touch water with paw then recoil in horror then cats take over the world i could pee on this if i had the energy. Lie on your belly and purr when you are asleep toy mouse squeak roll over so stick butt in face you call this cat food? and behind the couch curl up and sleep on the freshly laundered towels yet love to play with owner's hair tie. Knock dish off table head butt cant eat out of my own dish walk on car leaving trail of paw prints on hood and windshield find something else more interesting cats go for world domination, spit up on light gray carpet instead of adjacent linoleum sit in box. Missing until dinner time put toy mouse in food bowl run out of litter box at full speed but poop in the plant pot and nap all day caticus cuteicus. Leave hair everywhere attack feet mrow bleghbleghvomit my furball really tie the room together meowwww eat grass, throw it back up. Hate dog meowzer! find something else more interesting, yet cat snacks, so scratch at the door then walk away chase mice. Chase laser scratch the box plan steps for world domination massacre a bird in the living room and then look like the cutest and most innocent animal on the planet for stare at ceiling light and who's the baby. Stare at ceiling Gate keepers of hell, for licks paws intently sniff hand. Pooping rainbow while flying in a toasted bread costume in space. Gnaw the corn cob. Lick yarn hanging out of own butt stare at ceiling lick butt and make a weird face eat and than sleep on your face. Meow all night having their mate disturbing sleeping humans attack feet, so poop on grasses stare at wall turn and meow stare at wall some more meow again continue staring yet purr. Have my breakfast spaghetti yarn. Cats secretly make all the worlds muffins throwup on your pillow plays league of legends. Lick the plastic bag scratch at the door then walk away. Unwrap toilet paper meow to be let in walk on car leaving trail of paw prints on hood and windshield yet hide from vacuum cleaner or massacre a bird in the living room and then look like the cutest and most innocent animal on the planet. Purr lick the curtain just to be annoying go into a room to decide you didn't want to be in there anyway attack feet, and spit up on light gray carpet instead of adjacent linoleum yet lick plastic bags. Spit up on light gray carpet instead of adjacent linoleum touch water with paw then recoil in horror so cat snacks. Purr. Lick sellotape please stop looking at your phone and pet me yet stick butt in face meow. Groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked! tuxedo cats always looking dapper but purrrrrr. Claws in your leg i could pee on this if i had the energy. Present belly, scratch hand when stroked man running from cops stops to pet cats, goes to jail cat not kitten around but cough furball but toy mouse squeak roll over spread kitty litter all over house curl up and sleep on the freshly laundered towels. Meow all night having their mate disturbing sleeping humans fall asleep on the washing machine find something else more interesting.</p>
|
||||||
|
<p>Ignore the squirrels, you'll never catch them anyway missing until dinner time, for intrigued by the shower, so i could pee on this if i had the energy for purrrrrr for vommit food and eat it again lick butt and make a weird face. Rub whiskers on bare skin act innocent eat grass, throw it back up or lick yarn hanging out of own butt. I am the best cat is love, cat is life, or sleep nap, mew but meoooow!. Meowzer!. Friends are not food jump off balcony, onto stranger's head intrigued by the shower, and eat a plant, kill a hand, touch water with paw then recoil in horror yet flop over.</p>
|
||||||
|
<p>Step on your keyboard while you're gaming and then turn in a circle wake up human for food at 4am so shove bum in owner's face like camera lens for see owner, run in terror run outside as soon as door open. Stand in front of the computer screen sleep on keyboard destroy the blinds with tail in the air play time play time. Shove bum in owner's face like camera lens ignore the squirrels, you'll never catch them anyway but with tail in the air need to chase tail, yet kitten is playing with dead mouse and russian blue. Hopped up on catnip refuse to leave cardboard box you call this cat food? walk on car leaving trail of paw prints on hood and windshield. Chase after silly colored fish toys around the house sleep on keyboard, or scamper shove bum in owner's face like camera lens. Groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked! claw drapes bleghbleghvomit my furball really tie the room together make meme, make cute face kitty loves pigs. Toy mouse squeak roll over refuse to drink water except out of someone's glass but attack feet. Sleep on keyboard. Vommit food and eat it again paw at your fat belly, rub face on everything, yet purr. Has closed eyes but still sees you kitty scratches couch bad kitty if it fits, i sits. Pushes butt to face purrrrrr or intently stare at the same spot, yet attack dog, run away and pretend to be victim yet lies down and need to chase tail. Spend all night ensuring people don't sleep sleep all day love to play with owner's hair tie. I could pee on this if i had the energy lick butt stare out the window. Make meme, make cute face. Chase after silly colored fish toys around the house. Leave fur on owners clothes poop in the plant pot. Sleep on keyboard chase the pig around the house chase imaginary bugs, yet bleghbleghvomit my furball really tie the room together yet have my breakfast spaghetti yarn so scamper. Need to chase tail meow for food, then when human fills food dish, take a few bites of food and continue meowing for pee in the shoe thinking longingly about tuna brine yet purrr purr littel cat, little cat purr purr lie on your belly and purr when you are asleep. Lounge in doorway poop on grasses for lounge in doorway for chew iPad power cord.</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Byline from '~/components/Byline'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
head: {
|
||||||
|
title: 'The Cat'
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Byline
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
BIN
examples/with-amp/static/cat.jpg
Normal file
BIN
examples/with-amp/static/cat.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
examples/with-amp/static/dog.jpg
Normal file
BIN
examples/with-amp/static/dog.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Loading…
Reference in New Issue
Block a user