Skip to content

N
node-sample
Commit 1292128e authored by Sébastien Chopin's avatar Sébastien Chopin
Browse files
Options

chore: no need for layouts

parent 54f871d7
Show whitespace changes
Inline Side-by-side
Showing with 111 additions and 133 deletions
README.md
View file @ 1292128e
...@@ -19,8 +19,6 @@ https://hn.nuxt.dev ...@@ -19,8 +19,6 @@ https://hn.nuxt.dev
## Performance ## Performance
- Lighthouse [100/100](https://pagespeed.web.dev/report?url=https%3A%2F%2Fhn.nuxt.dev%2Fnews%2F1) (Slow 4G / Mobile Moto G4) - Lighthouse [100/100](https://pagespeed.web.dev/report?url=https%3A%2F%2Fhn.nuxt.dev%2Fnews%2F1) (Slow 4G / Mobile Moto G4)
- Interactive: 1.4s
- Total Blocking Time: 30ms
## Features ## Features
......
app/app.vue
View file @ 1292128e
<script setup lang="ts"> <script setup lang="ts">
useServerHead({
htmlAttrs: {
lang: 'en',
},
})
useSeoMeta({ useSeoMeta({
titleTemplate: 'Nuxt HN | %s', titleTemplate: 'Nuxt HN | %s',
description: 'HackerNews clone built with Nuxt.', description: 'HackerNews clone built with Nuxt.',
...@@ -17,7 +12,116 @@ useSeoMeta({ ...@@ -17,7 +12,116 @@ useSeoMeta({
</script> </script>
<template> <template>
<NuxtLayout> <Html lang="en" />
<AppHeader />
<NuxtPage /> <NuxtPage />
</NuxtLayout>
</template> </template>
<style lang="postcss">
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 15px;
background-color: #F4F4F5;
margin: 0;
padding: 0;
color: #020420;
overflow-y: scroll;
}
a {
color: #020420;
text-decoration: none;
}
.header {
background-color: #020420;
z-index: 999;
height: 55px;
.inner {
max-width: 800px;
box-sizing: border-box;
margin: 0px auto;
padding: 12px 5px;
display: flex;
place-items: center;
}
& a {
color: #fff;
line-height: 24px;
transition: color 0.15s ease;
display: inline-block;
vertical-align: middle;
font-weight: 300;
letter-spacing: 0.075em;
margin-right: 1.8em;
&:hover {
color: #00DC82;
}
&.active {
color: #00DC82;
}
&:nth-child(6) {
margin-right: 0;
}
}
.github {
color: #fff;
font-size: 0.9em;
margin: auto;
text-align: right;
flex-grow: 1;
& a {
margin-right: 0;
}
}
}
.logo {
width: 30px;
height: 30px;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
}
.view {
max-width: 800px;
margin: 0 auto;
position: relative;
}
.appear-active {
transition: opacity 0.4s ease;
}
.appear {
opacity: 0;
}
@media (max-width: 860px) {
.header .inner {
padding: 15px 30px;
}
}
@media (max-width: 600px) {
.header {
.inner {
padding: 15px;
}
& a {
margin-right: 1em;
}
.github {
display: none;
}
}
}
</style>
app/layouts/default.vue → app/components/AppHeader.vue
View file @ 1292128e
<script setup lang="ts"> <script setup lang="ts">
import { feedsInfo } from '~~/utils/api' import { feedsInfo } from '~~/utils/api'
const route = useRoute()
const host = import.meta.server
? useRequestHeaders().host
: window.location.host
useHead({
link: [
// We use route.path since we don't use query parameters
{ rel: 'canonical', href: `https://${host}${route.path}` },
],
})
</script> </script>
<template> <template>
<div>
<header class="header"> <header class="header">
<nav <nav
class="inner" class="inner"
...@@ -56,115 +43,4 @@ useHead({ ...@@ -56,115 +43,4 @@ useHead({
</span> </span>
</nav> </nav>
</header> </header>
<slot role="main" />
</div>
</template> </template>
<style lang="postcss">
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 15px;
background-color: #F4F4F5;
margin: 0;
padding: 0;
color: #020420;
overflow-y: scroll;
}
a {
color: #020420;
text-decoration: none;
}
.header {
background-color: #020420;
z-index: 999;
height: 55px;
.inner {
max-width: 800px;
box-sizing: border-box;
margin: 0px auto;
padding: 12px 5px;
display: flex;
place-items: center;
}
& a {
color: #fff;
line-height: 24px;
transition: color 0.15s ease;
display: inline-block;
vertical-align: middle;
font-weight: 300;
letter-spacing: 0.075em;
margin-right: 1.8em;
&:hover {
color: #00DC82;
}
&.active {
color: #00DC82;
}
&:nth-child(6) {
margin-right: 0;
}
}
.github {
color: #fff;
font-size: 0.9em;
margin: auto;
text-align: right;
flex-grow: 1;
& a {
margin-right: 0;
}
}
}
.logo {
width: 30px;
height: 30px;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
}
.view {
max-width: 800px;
margin: 0 auto;
position: relative;
}
.appear-active {
transition: opacity 0.4s ease;
}
.appear {
opacity: 0;
}
@media (max-width: 860px) {
.header .inner {
padding: 15px 30px;
}
}
@media (max-width: 600px) {
.header {
.inner {
padding: 15px;
}
& a {
margin-right: 1em;
}
.github {
display: none;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment