punkfairie/epiphany
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

menu switchin

Browse source
This commit is contained in:
Marley 2023-12-10 14:51:44 -08:00
parent 1e01ec9e41
commit 6e42a3ff20
8 changed files with 115 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
.eleventy.js
View file

@ -1,50 +1,50 @@
const fs = require('fs')
const postcss = require('postcss')
const postcssImportExtGlob = require('postcss-import-ext-glob')
const postcssImport = require('postcss-import')
const postcssPresetEnv = require('postcss-preset-env')
const cssnano = require('cssnano')
// const esbuild = require('esbuild')
const automaticNoopener = require('eleventy-plugin-automatic-noopener')
const fs = require("fs");
const postcss = require("postcss");
const postcssImportExtGlob = require("postcss-import-ext-glob");
const postcssImport = require("postcss-import");
const postcssPresetEnv = require("postcss-preset-env");
const cssnano = require("cssnano");
const esbuild = require("esbuild");
const automaticNoopener = require("eleventy-plugin-automatic-noopener");
module.exports = function (eleventyConfig) {
eleventyConfig.on('eleventy.before', async () => {
const cssSrc = './src/style/style.css'
const cssDest = './dist/style.css'
module.exports = function(eleventyConfig) {
eleventyConfig.on("eleventy.before", async () => {
const cssSrc = "./src/style/style.css";
const cssDest = "./dist/style.css";
fs.readFile(cssSrc, (err, css) => {
// noinspection JSCheckFunctionSignatures
postcss([
postcssImportExtGlob,
postcssImport,
postcssPresetEnv,
cssnano
])
.process(css, {from: cssSrc, to: cssDest})
.then(res => {
fs.writeFile(cssDest, res.css, () => true)
})
})
fs.readFile(cssSrc, (err, css) => {
// noinspection JSCheckFunctionSignatures
postcss([
postcssImportExtGlob,
postcssImport,
postcssPresetEnv,
cssnano
])
.process(css, { from: cssSrc, to: cssDest })
.then(res => {
fs.writeFile(cssDest, res.css, () => true);
});
});
// await esbuild.build({
// entryPoints: ['src/js/main.js'],
// bundle: true,
// minify: true,
// target: 'es2020',
// outfile: 'dist/main.js',
// })
// .then(() => console.log('🧳 esbuild done'))
// .catch(() => process.exit(1))
await esbuild.build({
entryPoints: ["src/js/main.js"],
bundle: true,
minify: true,
target: "es2020",
outfile: "dist/main.js"
})
.then(() => console.log("🧳 esbuild done"))
.catch(() => process.exit(1));
});
eleventyConfig.addWatchTarget('./src/style/')
eleventyConfig.addWatchTarget('./src/js/')
eleventyConfig.addWatchTarget("./src/style/");
eleventyConfig.addWatchTarget("./src/js/");
eleventyConfig.addPlugin(automaticNoopener, {
noreferrer: true,
})
eleventyConfig.addPlugin(automaticNoopener, {
noreferrer: true
});
eleventyConfig.addPassthroughCopy('./src/img/')
eleventyConfig.addPassthroughCopy("./src/img/");
return {dir: {input: 'src', output: 'dist'}}
}
return { dir: { input: "src", output: "dist" } };
};

21
node_modules/.package-lock.json generated vendored
View file

@ -1392,6 +1392,19 @@
"integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
"dev": true
},
"node_modules/@vue/reactivity": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
"integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
"dependencies": {
"@vue/shared": "3.1.5"
}
},
"node_modules/@vue/shared": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
"integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
},
"node_modules/a-sync-waterfall": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
@ -1426,6 +1439,14 @@
"url": "https://github.com/sponsors/epoberezkin"
}
},
"node_modules/alpinejs": {
"version": "3.13.3",
"resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.3.tgz",
"integrity": "sha512-WZ6WQjkAOl+WdW/jukzNHq9zHFDNKmkk/x6WF7WdyNDD6woinrfXCVsZXm0galjbco+pEpYmJLtwlZwcOfIVdg==",
"dependencies": {
"@vue/reactivity": "~3.1.1"
}
},
"node_modules/ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",

24
package-lock.json generated
View file

@ -9,7 +9,8 @@
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"@punkfairie/modern-css-reset": "^1.0.1"
"@punkfairie/modern-css-reset": "^1.0.1",
"alpinejs": "^3.13.3"
},
"devDependencies": {
"@11ty/eleventy": "^2.0.1",
@ -1749,6 +1750,19 @@
"integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
"dev": true
},
"node_modules/@vue/reactivity": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
"integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
"dependencies": {
"@vue/shared": "3.1.5"
}
},
"node_modules/@vue/shared": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
"integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
},
"node_modules/a-sync-waterfall": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
@ -1783,6 +1797,14 @@
"url": "https://github.com/sponsors/epoberezkin"
}
},
"node_modules/alpinejs": {
"version": "3.13.3",
"resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.3.tgz",
"integrity": "sha512-WZ6WQjkAOl+WdW/jukzNHq9zHFDNKmkk/x6WF7WdyNDD6woinrfXCVsZXm0galjbco+pEpYmJLtwlZwcOfIVdg==",
"dependencies": {
"@vue/reactivity": "~3.1.1"
}
},
"node_modules/ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",

3
package.json
View file

@ -24,6 +24,7 @@
"stylelint": "^15.11.0"
},
"dependencies": {
"@punkfairie/modern-css-reset": "^1.0.1"
"@punkfairie/modern-css-reset": "^1.0.1",
"alpinejs": "^3.13.3"
}
}

20
src/_includes/layout.liquid
View file

@ -8,16 +8,18 @@
<title>... Epiphany ... baby, it's cold outsite ...</title>
<!--suppress HtmlUnknownTarget -->
<link rel="stylesheet" href="/style.css">
<!--suppress HtmlUnknownTarget -->
<script src="/main.js" type="module"></script>
</head>
<body>
<div class="site">
<div class="site" x-data="{menu: 'index'}">
<header>
<h1>Epiphany</h1>
<nav class="main-nav">
<a href="/">index</a>
<a href="#">adoptions</a>
<a href="#">about</a>
<a href="#" x-on:click="menu = 'adoptions'">adoptions</a>
<a href="#" x-on:click="menu = 'about'">about</a>
</nav>
</header>
@ -25,7 +27,17 @@
{{ content }}
</main>
<nav class="secondary-nav"></nav>
<nav class="secondary-nav" id="index" x-show="menu === 'index'">
<img src="/img/petz/siren-2.png" alt="Siren">
</nav>
<nav class="secondary-nav" id="adoptions" x-show="menu === 'adoptions'">
adoptions menu
</nav>
<nav class="secondary-nav" id="about" x-show="menu === 'about'">
about menu
</nav>
</div>
</body>
</html>

BIN
src/img/petz/siren-2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

5
src/js/main.js Normal file
View file

@ -0,0 +1,5 @@
import Alpine from "alpinejs";
window.Alpine = Alpine;
Alpine.start();

11
src/style/layout.css
View file

@ -11,6 +11,8 @@
'. .' 1.5fr
'header header' 0.5fr
's-nav main' 2.5fr / 1fr 5fr;
grid-column-gap: var(--space-s);
width: 1024px;
height: 768px;
padding: var(--space-xs);
@ -31,15 +33,15 @@
column-gap: var(--space-m);
}
h1 {
}
.main-nav {
display: flex;
column-gap: var(--space-xs);
}
main, .secondary-nav {
background-color: rgba(255, 255, 255, 0.49);
}
main {
--flow-space: var(--space-xs);
@ -47,7 +49,6 @@
padding: var(--space-s);
overflow: auto;
text-align: center;
background-color: rgba(255, 255, 255, 0.49);
}
.secondary-nav {