finished page
This commit is contained in:
Philipp Klüter
@@ -5,7 +5,7 @@ module.exports = (config) => {
|
|||||||
config.addPassthroughCopy({ 'src/assets': 'assets' });
|
config.addPassthroughCopy({ 'src/assets': 'assets' });
|
||||||
config.setFrontMatterParsingOptions({
|
config.setFrontMatterParsingOptions({
|
||||||
excerpt: true,
|
excerpt: true,
|
||||||
excerpt_sperator: ' <!-- excerpt -->',
|
excerpt_separator: '<!-- excerpt -->',
|
||||||
});
|
});
|
||||||
config.setTemplateFormats(['jpg', 'png', 'webp', 'md', 'njk']);
|
config.setTemplateFormats(['jpg', 'png', 'webp', 'md', 'njk']);
|
||||||
config.setBrowserSyncConfig({
|
config.setBrowserSyncConfig({
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
"build:eleventy": "eleventy",
|
"build:eleventy": "eleventy",
|
||||||
"build:webpack": "webpack",
|
"build:webpack": "webpack",
|
||||||
"clean": "rm -rf dist",
|
"clean": "rm -rf dist",
|
||||||
"start": "npm-run-all clean -p build:* -p start:*",
|
"start": "cross-env NODE_ENV=development npm-run-all clean -p build:* -p start:*",
|
||||||
"start:eleventy": "eleventy --serve --quiet",
|
"start:eleventy": "eleventy --serve --quiet",
|
||||||
"start:webpack": "webpack --watch",
|
"start:webpack": "webpack --watch",
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
|||||||
15
src/_includes/footer.njk
Normal file
15
src/_includes/footer.njk
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<footer class="text-gray-700 bg-white border-t body-font">
|
||||||
|
<div>
|
||||||
|
<div class="container flex flex-col flex-wrap px-5 py-6 lg:px-20 sm:flex-row">
|
||||||
|
<div class="flex flex-wrap items-center justify-center text-base">
|
||||||
|
<p class="mr-5 text-sm text-center text-gray-200">James Perkins</p>
|
||||||
|
<a href="#" class="justify-center mr-5 text-sm text-center text-blueGray-200 hover:text-blue-700"> LINK </a>
|
||||||
|
<a href="#" class="justify-center mr-5 text-sm text-center text-blueGray-200 hover:text-blue-700"> LINK 2</a>
|
||||||
|
</div>
|
||||||
|
<span class="inline-flex justify-center mt-2 sm:ml-auto sm:mt-0 sm:justify-end">
|
||||||
|
<p class="mr-5 text-sm text-center text-gray-200">
|
||||||
|
Creating Turorials for you.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
31
src/_includes/header.njk
Normal file
31
src/_includes/header.njk
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
<header class="text-gray-700 bg-white border-t border-b body-font">
|
||||||
|
<div
|
||||||
|
class="
|
||||||
|
container
|
||||||
|
flex flex-col flex-wrap
|
||||||
|
p-5
|
||||||
|
mx-auto
|
||||||
|
md:items-center md:flex-row
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<nav
|
||||||
|
class="
|
||||||
|
flex flex-wrap
|
||||||
|
items-center
|
||||||
|
justify-center
|
||||||
|
text-base
|
||||||
|
md:ml-auto md:mr-auto
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<a href="/" class="mr-6 text-md font-semibold hover:text-gray-800"
|
||||||
|
>Home</a
|
||||||
|
>
|
||||||
|
<a href="/contact" class="mr-6 text-md font-semibold hover:text-gray-800"
|
||||||
|
>Contact</a
|
||||||
|
>
|
||||||
|
<a href="/about" class="mr-6 text-md font-semibold hover:text-gray-800"
|
||||||
|
>About</a
|
||||||
|
>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
@@ -1,17 +1,23 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="stylesheet" href="/assets/main.bundle.css">
|
<link rel="stylesheet" href="/assets/main.bundle.css" />
|
||||||
<link rel="stylesheet" href="https://upkg.com/prismjs@1.20.0/themes/prism-okaida.css">
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css"
|
||||||
|
/>
|
||||||
|
|
||||||
<script src="/assets/main.bundle.js" defer></script>
|
<script src="/assets/main.bundle.js" defer></script>
|
||||||
<title>{{title}}</title>
|
<title>{{ title }}</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="flex flex-col min-h-screen">
|
<body class="flex flex-col min-h-screen">
|
||||||
|
{% include 'header.njk' %}
|
||||||
<main class="container flex-grow py-8">
|
<main class="container flex-grow py-8">
|
||||||
{{content}}
|
{{ content | safe }}
|
||||||
</main>
|
</main>
|
||||||
|
{% include 'footer.njk' %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
10
src/_includes/post.njk
Normal file
10
src/_includes/post.njk
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
---
|
||||||
|
layout: layout.njk
|
||||||
|
---
|
||||||
|
|
||||||
|
<article class="prose prose-lg max-w-2xl px-8 mx-auto bg-white">
|
||||||
|
<h1 class="py-8"> {{title}}</h1>
|
||||||
|
|
||||||
|
{{content | safe}}
|
||||||
|
|
||||||
|
</article/>
|
||||||
53
src/about.njk
Normal file
53
src/about.njk
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
---
|
||||||
|
title: About Me
|
||||||
|
layout: layout.njk
|
||||||
|
---
|
||||||
|
|
||||||
|
<main class="container py-8">
|
||||||
|
<h1 class="text-center text-5xl">This is the {{ title }} page.</h1>
|
||||||
|
<section class="text-gray-700 body-font">
|
||||||
|
<div
|
||||||
|
class="
|
||||||
|
container
|
||||||
|
flex flex-col
|
||||||
|
items-center
|
||||||
|
px-5
|
||||||
|
py-16
|
||||||
|
mx-auto
|
||||||
|
lg:px-20 lg:py-36
|
||||||
|
md:flex-row
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="w-5/6 mb-10 lg:max-w-lg lg:w-full md:w-1/2 md:mb-0">
|
||||||
|
<img
|
||||||
|
class="object-center max-w-xs mb-6 rounded"
|
||||||
|
alt="hero"
|
||||||
|
src="/assets/person.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="
|
||||||
|
flex flex-col
|
||||||
|
items-center
|
||||||
|
text-center
|
||||||
|
lg:flex-grow
|
||||||
|
md:w-1/2
|
||||||
|
lg:pl-24
|
||||||
|
md:pl-16 md:items-start md:text-left
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
class="
|
||||||
|
mb-2
|
||||||
|
text-base
|
||||||
|
leading-relaxed
|
||||||
|
text-center text-gray-700
|
||||||
|
lg:text-left lg:text-xl
|
||||||
|
"
|
||||||
|
>
|
||||||
|
"Something something something."
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
BIN
src/assets/person.jpg
Normal file
BIN
src/assets/person.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 412 KiB |
BIN
src/blog/my-first-blog/doggo.jpg
Normal file
BIN
src/blog/my-first-blog/doggo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
69
src/blog/my-first-blog/index.md
Normal file
69
src/blog/my-first-blog/index.md
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
---
|
||||||
|
title: My First blog
|
||||||
|
layout: post.njk
|
||||||
|
featuredImage: ./doggo.jpg
|
||||||
|
pageTitle: This is my other Title
|
||||||
|
tags: ["post"]
|
||||||
|
---
|
||||||
|
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dictum felis eu pede mollis pretium. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
|
||||||
|
|
||||||
|
<!-- excerpt -->
|
||||||
|
|
||||||
|
```js
|
||||||
|
var s = "JavaScript syntax highlighting";
|
||||||
|
alert(s);
|
||||||
|
```
|
||||||
|
|
||||||
|
```python
|
||||||
|
s = "Python syntax highlighting"
|
||||||
|
print s
|
||||||
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
No language indicated, so no syntax highlighting.
|
||||||
|
But let's throw in a <b>tag</b>.
|
||||||
|
```
|
||||||
|
|
||||||
|
| Tables | Are | Cool |
|
||||||
|
| ------------- | :-----------: | ----: |
|
||||||
|
| col 3 is | right-aligned | $1600 |
|
||||||
|
| col 2 is | centered | $12 |
|
||||||
|
| zebra stripes | are neat | $1 |
|
||||||
|
|
||||||
|
> Blockquotes are very handy in email to emulate reply text.
|
||||||
|
> This line is part of the same quote.
|
||||||
|
|
||||||
|
Quote break.
|
||||||
|
|
||||||
|
> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can _put_ **Markdown** into a blockquote.
|
||||||
|
|
||||||
|
Three or more...
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Hyphens
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Asterisks
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Underscores
|
||||||
|
|
||||||
|
Aenean commodo ligula eget dolor. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Integer tincidunt.
|
||||||
|
|
||||||
|
Cras dapibus. Aenean vulputate eleifend tellus. Vivamus elementum semper nisi. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Donec vitae sapien ut libero venenatis faucibus. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
|
||||||
|
|
||||||
|
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
|
||||||
|
|
||||||
|
Maecenas nec odio et ante tincidunt tempus.
|
||||||
|
|
||||||
|
### h3
|
||||||
|
|
||||||
|
## h2
|
||||||
|
|
||||||
|
# h1
|
||||||
|
|
||||||
|
#### h4
|
||||||
71
src/blog/my-second-blog/index.md
Normal file
71
src/blog/my-second-blog/index.md
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
---
|
||||||
|
title: My Second blog
|
||||||
|
layout: post.njk
|
||||||
|
featuredImage: ./islands.jpg
|
||||||
|
pageTitle: This is my other Title
|
||||||
|
tags: ["post"]
|
||||||
|
---
|
||||||
|
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dictum felis eu pede mollis pretium. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
|
||||||
|
|
||||||
|
<!-- excerpt -->
|
||||||
|
|
||||||
|
```js
|
||||||
|
var s = "JavaScript syntax highlighting";
|
||||||
|
alert(s);
|
||||||
|
```
|
||||||
|
|
||||||
|
```python
|
||||||
|
s = "Python syntax highlighting"
|
||||||
|
print s
|
||||||
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
No language indicated, so no syntax highlighting.
|
||||||
|
But let's throw in a <b>tag</b>.
|
||||||
|
```
|
||||||
|
|
||||||
|
| Tables | Are | Cool |
|
||||||
|
| ------------- | :-----------: | ----: |
|
||||||
|
| col 3 is | right-aligned | $1600 |
|
||||||
|
| col 2 is | centered | $12 |
|
||||||
|
| zebra stripes | are neat | $1 |
|
||||||
|
|
||||||
|
> Blockquotes are very handy in email to emulate reply text.
|
||||||
|
> This line is part of the same quote.
|
||||||
|
|
||||||
|
Quote break.
|
||||||
|
|
||||||
|
> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can _put_ **Markdown** into a blockquote.
|
||||||
|
|
||||||
|
Three or more...
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Hyphens
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Asterisks
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Underscores
|
||||||
|
|
||||||
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dictum felis eu pede mollis pretium. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
|
||||||
|
|
||||||
|
Aenean commodo ligula eget dolor. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Integer tincidunt.
|
||||||
|
|
||||||
|
Cras dapibus. Aenean vulputate eleifend tellus. Vivamus elementum semper nisi. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Donec vitae sapien ut libero venenatis faucibus. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
|
||||||
|
|
||||||
|
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
|
||||||
|
|
||||||
|
Maecenas nec odio et ante tincidunt tempus.
|
||||||
|
|
||||||
|
### h3
|
||||||
|
|
||||||
|
## h2
|
||||||
|
|
||||||
|
# h1
|
||||||
|
|
||||||
|
#### h4
|
||||||
BIN
src/blog/my-second-blog/islands.jpg
Normal file
BIN
src/blog/my-second-blog/islands.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
@@ -1,8 +1,58 @@
|
|||||||
---
|
---
|
||||||
title: Homepage
|
title: Home
|
||||||
layout: layout.njk
|
layout: layout.njk
|
||||||
|
pagination:
|
||||||
|
data: collections.post
|
||||||
|
size: 6
|
||||||
|
reverse: true
|
||||||
|
alias: posts
|
||||||
---
|
---
|
||||||
|
|
||||||
<section>
|
<section class="text-gray-700 body-font">
|
||||||
<h1>Hello to our blog</h1>
|
<h1 class="text-5xl text-center">Welcome to our blog</h1>
|
||||||
|
<div class="container px-8 pt-24 mx-auto lg:px-4">
|
||||||
|
<div class="flex flex-wrap text-left">
|
||||||
|
{% for post in posts %}
|
||||||
|
{{ post.data.page | log }}
|
||||||
|
<div class="px-8 py-6 lg:w-1/3 md:w-full">
|
||||||
|
<div class="p-6 rounded-md bg-blueGray-200">
|
||||||
|
<img
|
||||||
|
class="object-cover object-center w-full h-40 mb-6 rounded"
|
||||||
|
src="{{ post.url }}{{ post.data.featuredImage }}"
|
||||||
|
alt="content"
|
||||||
|
/>
|
||||||
|
<h2
|
||||||
|
class="
|
||||||
|
mb-3
|
||||||
|
text-lg
|
||||||
|
font-semibold
|
||||||
|
text-gray-700
|
||||||
|
lg:text-2xl
|
||||||
|
title-font
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ post.data.title }}
|
||||||
|
</h2>
|
||||||
|
<p class="mb-4 text-base leading-relaxed">
|
||||||
|
{{ post.data.page.excerpt }}
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="{{ post.url | url }}"
|
||||||
|
class="
|
||||||
|
inline-flex
|
||||||
|
items-center
|
||||||
|
font-semibold
|
||||||
|
text-blue-700
|
||||||
|
md:mb-2
|
||||||
|
lg:mb-0
|
||||||
|
hover:text-blue-400
|
||||||
|
"
|
||||||
|
>
|
||||||
|
Read More
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new MiniCssExtractPlugin({
|
new MiniCssExtractPlugin({
|
||||||
filename: 'main.bulde.css',
|
filename: 'main.bundle.css',
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user