Skip to content

Commit b7608cc

Browse files
MortaroMortaro
committed
📌 unstable next nullstack
1 parent e28b8cd commit b7608cc

File tree

7 files changed

+47
-32
lines changed

7 files changed

+47
-32
lines changed

‎package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,21 @@
66
"license": "ISC",
77
"devDependencies": {
88
"autoprefixer": "^10.2.5",
9-
"nullstack": "^0.15.0",
9+
"nullstack": "github:nullstack/nullstack#unstable-next",
1010
"postcss": "^8.2.10",
1111
"tailwindcss": "^2.1.1"
1212
},
1313
"scripts": {
1414
"start": "npx nullstack start",
1515
"build": "npx nullstack build --mode=ssg --output=docs",
16+
"reinstall": "rm -rf .development .production package-lock.json node_modules && npm install",
17+
"spa": "npx nullstack build --mode=spa && cd spa && npx http-server --port 8080 -P http://localhost:8080?",
1618
"tailwind": "npx tailwindcss-cli build -o src/tailwind.css"
1719
},
1820
"dependencies": {
1921
"@tailwindcss/typography": "^0.4.0",
2022
"glob": "^8.0.1",
21-
"nullsheet": "~0.2.0",
22-
"nullstack-google-analytics": "^1.0.0",
23+
"nullstack-google-analytics": "github:Mortaro/nullstack-google-analytics#next",
2324
"poisonicon": "^0.1.1",
2425
"postcss-cli": "^8.3.1",
2526
"prismjs": "^1.22.0",
@@ -28,4 +29,4 @@
2829
"remarkable-meta": "^1.0.1",
2930
"yaml": "^1.10.0"
3031
}
31-
}
32+
}

‎src/Application.njs‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import Search from './Search.njs';
1313
import "./tailwind.css";
1414
import Waifu from './Waifu';
1515

16-
1716
class Application extends Nullstack {
1817

1918
renderPreloader() {
@@ -54,7 +53,7 @@ class Application extends Nullstack {
5453
render({ router, mode }) {
5554
const locale = router.url.startsWith('/pt-br') ? 'pt-BR' : 'en-US';
5655
return (
57-
<main class={mode}>
56+
<body class={mode}>
5857
<div class="dark:bg-gray-900 dark:text-white">
5958
<Header locale={locale} />
6059
<HiringBanner />
@@ -85,7 +84,7 @@ class Application extends Nullstack {
8584

8685
<Footer locale={locale} />
8786
</div>
88-
</main>
87+
</body>
8988
)
9089
}
9190

‎src/Article.njs‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { existsSync, readFileSync } from 'fs';
1+
import { readFileSync } from 'fs';
22
import Translatable from './Translatable';
33
import YAML from 'yaml';
44
import Arrow from '../icons/Arrow';
@@ -49,7 +49,13 @@ class Article extends Translatable {
4949
renderLink({ title, href, router }) {
5050
const active = router.url === href;
5151
return (
52-
<a href={href} class={`${active ? 'text-pink-500 dark:text-pink-500' : 'text-gray-500 dark:text-gray-300'} hover:text-pink-600 dark:hover:text-pink-400 block w-full`} onclick={{ expanded: true }}> {title} </a>
52+
<a
53+
href={href}
54+
class={[active ? 'text-pink-500 dark:text-pink-500' : 'text-gray-500 dark:text-gray-300', 'hover:text-pink-600 dark:hover:text-pink-400 block w-full']}
55+
onclick={{ expanded: true }}
56+
>
57+
{title}
58+
</a>
5359
)
5460
}
5561

@@ -70,10 +76,13 @@ class Article extends Translatable {
7076
<section class="max-w-screen-xl mx-auto px-4 flex flex-wrap sm:flex-nowrap py-12 sm:py-24">
7177
<button
7278
onclick={{ expanded: !this.expanded }}
73-
class={`transition delay-300 fixed bottom-10 right-10 bg-pink-600 text-white shadow-xl rounded-full py-2 px-4 z-50 md:hidden ring-0 transform ${this.expanded ? 'rotate-180 transform' : ''}`}>
79+
class={['transition delay-300 fixed bottom-10 right-10 bg-pink-600 text-white shadow-xl rounded-full py-2 px-4 z-50 md:hidden ring-0 transform', this.expanded && 'rotate-180 transform']}>
7480
<Arrow size={20} />
7581
</button>
76-
<aside class={`w-full md:w-3/12 fixed top-0 left-0 md:relative z-40 md:z-auto bg-white dark:bg-gray-900 h-screen md:h-auto p-4 overflow-y-auto md:p-0 md:pr-4 transform pb-24 sm:pb-0 transition sm:transition-none delay-500 delay-0 ${this.expanded ? 'translate-y-0' : 'translate-y-full md:translate-y-0'}`}>
82+
<aside class={[
83+
'w-full md:w-3/12 fixed top-0 left-0 md:relative z-40 md:z-auto bg-white dark:bg-gray-900 h-screen md:h-auto p-4 overflow-y-auto md:p-0 md:pr-4 transform pb-24 sm:pb-0 transition sm:transition-none delay-500 delay-0',
84+
this.expanded ? 'translate-y-0' : 'translate-y-full md:translate-y-0'
85+
]}>
7786
{this.topics?.map((topic) => <Topic {...topic} />)}
7887
</aside>
7988
<article class="w-full md:w-9/12 pb-24">

‎src/Footer.njs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ class Footer extends Translatable {
2222
}
2323

2424
render() {
25+
if (!this.i18n) return false
2526
return (
2627
<footer class="flex flex-wrap w-full justify-center relative">
2728
<div class="w-full relative flex justify-center h-80 bg-70 hover:bg-100 bg-bottom bg-no-repeat" style="background-image: url(/stars.webp); transition: background-size 3s;">

‎src/Header.njs‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ class Header extends Translatable {
2020
href={href}
2121
target={target}
2222
onclick={onclick || { expanded: false }}
23-
class={`w-full sm:w-auto border-b sm:border-0 border-gray-100 dark:border-gray-800 p-2 font-lg hover:text-pink-600 items-center flex font-light ${mobile ? 'sm:hidden' : ''}`}
23+
class={['w-full sm:w-auto border-b sm:border-0 border-gray-100 dark:border-gray-800 p-2 font-lg hover:text-pink-600 items-center flex font-light', mobile && 'sm:hidden']}
2424
>
2525
{title}
2626
</element>
@@ -55,7 +55,7 @@ class Header extends Translatable {
5555
render({ mode, oppositeMode, locale }) {
5656
if (!this.i18n) return false;
5757
return (
58-
<>
58+
<div class="h-20">
5959
<header class="fixed w-full bg-white dark:bg-gray-900 shadow top-0 left-0 z-20 md:h-20 flex items-center">
6060
<div class="max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap py-4 w-full">
6161
<div class="w-full sm:w-auto justify-between sm:justify-self-start sm:px-0 items-center flex">
@@ -75,17 +75,12 @@ class Header extends Translatable {
7575
</button>
7676
</div>
7777
</div>
78-
<nav
79-
class={`flex items-center flex-wrap sm:px-0 mt-2 sm:mt-0 ${!this.expanded && "hidden sm:flex"
80-
}`}
81-
>
82-
{this.i18n.links.map((link) => (
83-
<Link {...link} />
84-
))}
78+
<nav class={['flex items-center flex-wrap sm:px-0 mt-2 sm:mt-0', !this.expanded && 'hidden sm:flex']}>
79+
{this.i18n.links.map((link) => <Link {...link} />)}
8580
<Link href={this.i18n.language.href} title={this.i18n.language.title} mobile />
8681
<Link onclick={this.toggleMode} title={this.i18n.mode[oppositeMode]} mobile />
8782
</nav>
88-
<div class={`flex w-full sm:w-auto mt-4 sm:mt-0 sm:space-x-2 items-center ${!this.expanded && "hidden sm:flex"}`}>
83+
<div class={['flex w-full sm:w-auto mt-4 sm:mt-0 sm:space-x-2 items-center', !this.expanded && 'hidden sm:flex']}>
8984
<button onclick={this.toggleSearch} title={this.i18n.search.title} class="hidden sm:flex text-pink-600 h-10 w-10 items-center justify-center">
9085
<Search size={25} />
9186
</button>
@@ -101,8 +96,7 @@ class Header extends Translatable {
10196
</div>
10297
</div>
10398
</header>
104-
<div class="h-20" />
105-
</>
99+
</div>
106100
);
107101
}
108102

‎src/Search.njs‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,10 @@ class Search extends Translatable {
4747
this.searching = false
4848
}
4949

50-
open({ self }) {
50+
open() {
5151
this.term = ''
5252
this.results = []
5353
this.searching = true
54-
setTimeout(() => {
55-
self.element.querySelector('[type="search"]').focus()
56-
}, 400)
5754
}
5855

5956
goToFirst({ router, event }) {
@@ -63,6 +60,10 @@ class Search extends Translatable {
6360
}
6461
}
6562

63+
focusSearchInput({ element }) {
64+
element.focus()
65+
}
66+
6667
render() {
6768
if (!this.i18n || !this.searching) return false;
6869
return (
@@ -72,7 +73,16 @@ class Search extends Translatable {
7273
<span> {this.i18n.title} </span>
7374
<button class="text-gray-400" onclick={this.close}> {this.i18n.close} </button>
7475
</div>
75-
<input bind={this.term} oninput={this.search} onkeydown={this.goToFirst} default type="search" class="text-gray-900 dark:text-white w-full bg-gray-100 dark:bg-gray-900 p-4" placeholder={this.i18n.placeholder} />
76+
<input
77+
bind={this.term}
78+
oninput={this.search}
79+
onkeydown={this.goToFirst}
80+
default
81+
type="search"
82+
class="text-gray-900 dark:text-white w-full bg-gray-100 dark:bg-gray-900 p-4"
83+
placeholder={this.i18n.placeholder}
84+
ref={this.focusSearchInput}
85+
/>
7686
{this.results.length > 0 &&
7787
<ul class="mt-4 space-y-4 divide-y divide-gray-200 dark:divide-gray-900">
7888
{this.results.map((result) => (

‎src/Waifu.njs‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,12 @@ class Waifu extends Translatable {
8080
>
8181
@{name}
8282
</a>
83-
</div>)
83+
</div>
84+
)
8485
}
8586

86-
renderFanarts({ self }) {
87-
if (!self.hydrated) return false
87+
renderFanarts() {
88+
if (!this.hydrated) return false
8889
return (
8990
<section class="max-w-screen-xl mx-auto px-4 flex justify-between items-center flex-wrap pb-12 sm:pb-24">
9091
<h2 class="w-full text-pink-600 text-4xl sm:text-6xl font-light block sm:mb-3">
@@ -100,7 +101,7 @@ class Waifu extends Translatable {
100101
)
101102
}
102103

103-
render({ }) {
104+
render() {
104105
if (!this.i18n) return false;
105106
return (
106107
<div>

0 commit comments

Comments
 (0)