nav and social, instructions
This commit is contained in:
madrilene
parent
a100068d30
commit
cf58231160
9 changed files with 108 additions and 23 deletions
14
readme.md
14
readme.md
|
|
@ -5,7 +5,8 @@ Very opiniated Eleventy starter based on the workflow suggested by Andy Bell's <
|
|||
- [Eleventy starter](#eleventy-starter)
|
||||
- [Preview](#preview)
|
||||
- [Features](#features)
|
||||
- [Using this](#using-this)
|
||||
- [First steps](#first-steps)
|
||||
- [Development](#development)
|
||||
- [Install dependencies](#install-dependencies)
|
||||
- [Working locally](#working-locally)
|
||||
- [Creating a production build](#creating-a-production-build)
|
||||
|
|
@ -23,21 +24,22 @@ https://eleventy-excellent.netlify.app/
|
|||
|
||||
This eleventy starter already includes:
|
||||
|
||||
- accessible site navigation, editable in \_data/navigation.js
|
||||
- Accessible site navigation, editable in \_data/navigation.js
|
||||
- Image optimisation with Eleventy-img
|
||||
- SEO (XML-sitemap, metadata)
|
||||
- dayjs handling dates & times
|
||||
- Many filters and shortcodes
|
||||
- The whole CSS workflow as suggested by buildexcellentwebsit.es
|
||||
- 301 redirects for netlify
|
||||
- all kind of markdown handling
|
||||
- bundling via esbuild
|
||||
- All kind of markdown handling
|
||||
- Bundling via esbuild
|
||||
|
||||
## Using this
|
||||
## First steps
|
||||
|
||||
- Search and replace 'eleventy-excellent.netlify.app' with your own domain.
|
||||
- Set your icons in assets/images/favicon
|
||||
- edit meta data in \_data/meta.js
|
||||
- edit your social media in \_data/social.js and \_includes/icons. Icons must be prefixed with "social-".
|
||||
- delete \_data/github.js and pages/github.njk, as they are just an example
|
||||
- changed routes:
|
||||
|
||||
|
|
@ -45,6 +47,8 @@ This eleventy starter already includes:
|
|||
redirectFrom: ['/old-route/', '/optionally-another-old-route/']
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
### Install dependencies
|
||||
|
||||
```
|
||||
|
|
|
|||
22
src/_data/navigation.js
Normal file
22
src/_data/navigation.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
module.exports = {
|
||||
top: [
|
||||
{
|
||||
text: 'Markdown',
|
||||
url: '/markdown/'
|
||||
},
|
||||
{
|
||||
text: 'Github Fetch',
|
||||
url: '/github/'
|
||||
}
|
||||
],
|
||||
bottom: [
|
||||
{
|
||||
text: 'Imprint',
|
||||
url: '/imprint/'
|
||||
},
|
||||
{
|
||||
text: 'Privacy',
|
||||
url: '/privacy/'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
{
|
||||
"items": [
|
||||
{
|
||||
"text": "Markdown",
|
||||
"url": "/markdown/"
|
||||
},
|
||||
{
|
||||
"text": "Github Fetch",
|
||||
"url": "/github/"
|
||||
}
|
||||
]
|
||||
}
|
||||
12
src/_data/social.json
Normal file
12
src/_data/social.json
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
[
|
||||
{
|
||||
"platform": "github",
|
||||
"url": "https://github.com/madrilene/eleventy-excellent",
|
||||
"icon": "github.svg"
|
||||
},
|
||||
{
|
||||
"platform": "twitter",
|
||||
"url": "https://twitter.com/lenesaile",
|
||||
"icon": "twitter.svg"
|
||||
}
|
||||
]
|
||||
18
src/_includes/icons/social-github.svg
Normal file
18
src/_includes/icons/social-github.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<path
|
||||
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
|
||||
></path>
|
||||
<path d="M9 18c-4.51 2-5-2-7-2"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 567 B |
15
src/_includes/icons/social-twitter.svg
Normal file
15
src/_includes/icons/social-twitter.svg
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<path
|
||||
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
|
||||
></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 385 B |
|
|
@ -1,10 +1,36 @@
|
|||
<footer class="site-foot" role="contentinfo">
|
||||
<div class="wrapper">
|
||||
<div class="site-foot__inner">
|
||||
© {% year %} {{ meta.siteName }}
|
||||
<a href="/imprint/"> Imprint </a>
|
||||
<nav id="footernav" class="site-foot__inner">
|
||||
<a href="/">© {% year %} {{ meta.siteName }}</a>
|
||||
|
||||
<a href="/privacy/"> Privacy </a><br />
|
||||
{% for item in navigation.bottom %}
|
||||
|
||||
<a
|
||||
href="{{ item.url }}"
|
||||
{{
|
||||
helpers.getLinkActiveState(item.url,
|
||||
page.url)
|
||||
|
|
||||
safe
|
||||
}}
|
||||
>{{ item.text }}</a
|
||||
>
|
||||
|
||||
{% endfor %}
|
||||
</nav>
|
||||
|
||||
<div id="social" class="site-foot__inner">
|
||||
{% for item in social %}
|
||||
<a href="{{ item.url }}">
|
||||
<span class="sr-only">{{ item.platform }}</span>
|
||||
<div aria-hidden="true">{% include 'icons/social-' + item.icon %}</div></a
|
||||
>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- lang menu -->
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
<nav id="mainnav" class="navbar">
|
||||
<ul>
|
||||
{% for item in navigation.items %}
|
||||
{% for item in navigation.top %}
|
||||
<li>
|
||||
<a
|
||||
class="nav"
|
||||
|
|
|
|||
|
|
@ -11,6 +11,6 @@
|
|||
}
|
||||
|
||||
.site-foot svg {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue