add boilerplate
This commit is contained in:
commit
80ee80e014
15
.eleventy.js
Normal file
15
.eleventy.js
Normal file
@ -0,0 +1,15 @@
|
||||
module.exports = function (eleventyConfig) {
|
||||
eleventyConfig.addPassthroughCopy("./src/css");
|
||||
eleventyConfig.addPassthroughCopy("./src/img");
|
||||
eleventyConfig.addPassthroughCopy("./src/fonts");
|
||||
eleventyConfig.addPassthroughCopy("./src/js");
|
||||
|
||||
return {
|
||||
passthroughFileCopy: true,
|
||||
dir: {
|
||||
input: "src",
|
||||
output: "public",
|
||||
includes: "_includes",
|
||||
},
|
||||
};
|
||||
};
|
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
# dependencies installed by npm
|
||||
|
||||
node_modules
|
||||
|
||||
# build artefacts
|
||||
|
||||
public
|
3670
package-lock.json
generated
Normal file
3670
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
16
package.json
Normal file
16
package.json
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "11ty-neocities",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "npx @11ty/eleventy --serve",
|
||||
"build": "npx @11ty/eleventy"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@11ty/eleventy": "^2.0.0"
|
||||
}
|
||||
}
|
18
src/_includes/layout/base.njk
Normal file
18
src/_includes/layout/base.njk
Normal file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="/css/styles.css" />
|
||||
<title>{{ title }}</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>{% include 'partials/header.njk' %}</header>
|
||||
<nav>{% include 'partials/navigation.njk' %}</nav>
|
||||
<main>
|
||||
<h1>{{ title }}</h1>
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
<footer>{% include 'partials/footer.njk' %}</footer>
|
||||
</body>
|
||||
</html>
|
5
src/_includes/layout/blog.njk
Normal file
5
src/_includes/layout/blog.njk
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: layout/base.njk
|
||||
---
|
||||
|
||||
<article>{{ content | safe}}</article>
|
1
src/_includes/partials/footer.njk
Normal file
1
src/_includes/partials/footer.njk
Normal file
@ -0,0 +1 @@
|
||||
<p>This is my footer | © 2022 Me.</p>
|
1
src/_includes/partials/header.njk
Normal file
1
src/_includes/partials/header.njk
Normal file
@ -0,0 +1 @@
|
||||
<h1>Welcome to my Homepage</h1>
|
7
src/_includes/partials/navigation.njk
Normal file
7
src/_includes/partials/navigation.njk
Normal file
@ -0,0 +1,7 @@
|
||||
<a href="/">Home</a>
|
||||
<a href="/about/">About</a>
|
||||
<a href="/links/">Links</a>
|
||||
<a href="/blog/">Blog</a>
|
||||
<a href="/contact/">Contact</a>
|
||||
|
||||
{#INFO: It's important to stucture your links with the slashes / on either side of the href /about/ to ensure the links are always from the root of the site.#}
|
6
src/about.html
Normal file
6
src/about.html
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
title: About Me
|
||||
layout: layout/base.njk
|
||||
---
|
||||
|
||||
<p>Heya 👋 this is my homepage.</p>
|
15
src/blog.html
Normal file
15
src/blog.html
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
title: This Is My Blog
|
||||
layout: layout/base.njk
|
||||
---
|
||||
|
||||
These are all of my amazing blog posts, enjoy!
|
||||
<ul>
|
||||
{% for post in collections.blog | reverse %}
|
||||
<li>
|
||||
<a href="{{ post.data.page.fileSlug }}">{{ post.data.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<!-- post.data contents are at https://github.com/11ty/eleventy/discussions/2284 -->
|
4
src/blog/blog.json
Normal file
4
src/blog/blog.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"layout": "layout/blog",
|
||||
"tags": "blog"
|
||||
}
|
5
src/blog/my-first-post.html
Normal file
5
src/blog/my-first-post.html
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
title: My First Blog Post
|
||||
---
|
||||
|
||||
<p>This is my first blog post</p>
|
5
src/blog/my-second-post.html
Normal file
5
src/blog/my-second-post.html
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
title: My Second Blog Post
|
||||
---
|
||||
|
||||
<p>This is my second blog post</p>
|
5
src/blog/my-third-post.html
Normal file
5
src/blog/my-third-post.html
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
title: My Third Blog Post
|
||||
---
|
||||
|
||||
<p>This is my third and final blog post</p>
|
6
src/contact.html
Normal file
6
src/contact.html
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Contact Me
|
||||
layout: layout/base.njk
|
||||
---
|
||||
|
||||
<p>Heya 👋 this is my contact page</p>
|
144
src/css/styles.css
Normal file
144
src/css/styles.css
Normal file
@ -0,0 +1,144 @@
|
||||
/* Global variables. */
|
||||
:root {
|
||||
/* Set sans-serif & mono fonts */
|
||||
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
|
||||
"Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica,
|
||||
"Helvetica Neue", sans-serif;
|
||||
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
|
||||
/* Default (light) theme */
|
||||
--bg: #fff;
|
||||
--accent-bg: #f5f7ff;
|
||||
--text: #333;
|
||||
--text-light: #585858;
|
||||
--border: #d8dae1;
|
||||
--accent: #0d47a1;
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #212121;
|
||||
--accent-bg: #2b2b2b;
|
||||
--text: #dcdcdc;
|
||||
--text-light: #ababab;
|
||||
--border: #666;
|
||||
--accent: #ffb300;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
/* Set the font globally */
|
||||
font-family: var(--sans-font);
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Make the body a nice central block */
|
||||
body {
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.5;
|
||||
margin: 0 auto;
|
||||
max-width: 40em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
body > header {
|
||||
text-align: center;
|
||||
padding: 0 0.5rem 2rem 0.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body > header h1 {
|
||||
max-width: 100%;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
/* Format navigation */
|
||||
nav {
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 1rem;
|
||||
line-height: 2;
|
||||
padding: 1rem 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
nav a {
|
||||
margin: 1rem 1rem 0 0;
|
||||
color: var(--text) !important;
|
||||
padding: 0.1rem 1rem;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: var(--accent) !important;
|
||||
}
|
||||
|
||||
nav a:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Reduce nav side on mobile */
|
||||
@media only screen and (max-width: 750px) {
|
||||
nav a {
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Add a little padding to ensure spacing is correct between content and nav */
|
||||
main {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
body > footer {
|
||||
margin-top: 4rem;
|
||||
padding: 2rem 1rem 1.5rem 1rem;
|
||||
color: var(--text-light);
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* Format headers */
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.6rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
/* Reduce header size on mobile */
|
||||
@media only screen and (max-width: 720px) {
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Format links */
|
||||
a,
|
||||
a:visited {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
22
src/index.html
Normal file
22
src/index.html
Normal file
@ -0,0 +1,22 @@
|
||||
---
|
||||
title: Hello World!
|
||||
layout: layout/base.njk
|
||||
comment: created with help from https://flamedfury.com/guides/11ty-homepage-neocities/
|
||||
---
|
||||
|
||||
<p>
|
||||
Check out your cool new static site built with
|
||||
<a href="https://11ty.dev">11ty</a> on
|
||||
<a href="https://neocities.org/">Neocities</a>.
|
||||
</p>
|
||||
|
||||
<p>This homepage template is perfect for:</p>
|
||||
|
||||
<ul>
|
||||
<li>Creating your own space on the web</li>
|
||||
<li>Expressing yourself</li>
|
||||
<li>Displaying all the gifs you've collected</li>
|
||||
</ul>
|
||||
|
||||
<h2>Why do you want a homepage?</h2>
|
||||
<p>The web was made for personal homepages, make this one yours</p>
|
12
src/links.html
Normal file
12
src/links.html
Normal file
@ -0,0 +1,12 @@
|
||||
---
|
||||
title: Links
|
||||
layout: layout/base.njk
|
||||
---
|
||||
|
||||
<p>These are some of my favourite websites 🔗</p>
|
||||
<ul>
|
||||
<li><a href="https://flamedfury.com">fLaMEdFury.com</a></li>
|
||||
<li><a href="https://11ty.dev">11ty</a></li>
|
||||
<li><a href="https://neocities.org">Neocities</a></li>
|
||||
<li><a href="https://yesterweb.org/">The Yesterweb</a></li>
|
||||
</ul>
|
Loading…
Reference in New Issue
Block a user