added blog; removed netlify;
This commit is contained in:
Spencer Flagg
parent
94e6b59678
commit
a7d591dc80
40 changed files with 731 additions and 264 deletions
|
|
@ -5,7 +5,14 @@ const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
|
||||||
const i18n = require('eleventy-plugin-i18n');
|
const i18n = require('eleventy-plugin-i18n');
|
||||||
const translations = require('./src/_data/i18n');
|
const translations = require('./src/_data/i18n');
|
||||||
|
|
||||||
|
const markdownIt = require('markdown-it');
|
||||||
|
const markdownItVideo = require('markdown-it-video');
|
||||||
|
|
||||||
module.exports = function (eleventyConfig) {
|
module.exports = function (eleventyConfig) {
|
||||||
|
let markdownLibrary = markdownIt().use(markdownItVideo);
|
||||||
|
|
||||||
|
eleventyConfig.setLibrary('md', markdownLibrary);
|
||||||
|
|
||||||
// PLUGINS **************************************************************
|
// PLUGINS **************************************************************
|
||||||
|
|
||||||
eleventyConfig.addPlugin(syntaxHighlight);
|
eleventyConfig.addPlugin(syntaxHighlight);
|
||||||
|
|
|
||||||
189
README.md
189
README.md
|
|
@ -1,70 +1,18 @@
|
||||||
# Eleventy Starter Boilerplate
|
# Write a new Blog Post
|
||||||
|
|
||||||
<p align="center">
|
1. Create a new file in `/src/posts/`.
|
||||||
<a href="https://creativedesignsguru.com/demo/Eleventy-Starter-Boilerplate/eleventy-starter-boilerplate-presentation/"><img src="public/assets/images/eleventy-js-starter-boilerplate.png?raw=true" alt="Eleventy starter banner"></a>
|
- You can create it in the VSCode sidebar, or in the windows flie manager, or in the terminal. It doesn't matter.
|
||||||
</p>
|
- Give the file a name that follows this convention:`yyyy-mm-dd-post-name`.
|
||||||
|
- Choose a file extention of either `.md` for a markdown file, or `.html` for an HTML file.
|
||||||
|
- For example `2022-01-01-this-is-my-first-post.md`
|
||||||
|
2. Add Frontmatter to the beginning of the new file.
|
||||||
|
- it should be surrounded by `---` and should include the following properties: `title`,`description`,`date`, and `image`.
|
||||||
|
- `image` should correspond to the name of a file in `/src/assets/images/posts/`
|
||||||
|
|
||||||
🚀 Eleventy Starter Boilerplate is production-ready with SEO-friendly for quickly starting a blog. ⚡️ Built with [Eleventy](https://www.11ty.dev), [ESLint](https://eslint.org), [Prettier](https://prettier.io), [Webpack](https://webpack.js.org), [PostCSS](https://postcss.org), [Tailwind CSS](https://tailwindcss.com) and [Netlify CMS](https://www.netlifycms.org) (optional).
|
|
||||||
|
|
||||||
Clone this project and use it to create your own [Eleventy](https://www.11ty.dev) blog. You can check a [Eleventy templates demo](https://creativedesignsguru.com/demo/Eleventy-Starter-Boilerplate/eleventy-starter-boilerplate-presentation/).
|
# See changes quickly
|
||||||
|
|
||||||
### Features
|
If you run your site in development mode using the following command, your changes will appear in the browser whenever a file is saved.
|
||||||
|
|
||||||
Production-ready in mind:
|
|
||||||
|
|
||||||
- 🔥 [11ty](https://www.11ty.dev) for Static Site Generator
|
|
||||||
- 🎨 Integrate with [Tailwind CSS](https://tailwindcss.com) (with [PurgeCSS](https://purgecss.com), remove unused CSS)
|
|
||||||
- 💅 [PostCSS](https://postcss.org) for processing [Tailwind CSS](https://tailwindcss.com)
|
|
||||||
- ⚡️ Lazy load images with [lazysizes](https://github.com/aFarkas/lazysizes)
|
|
||||||
- ✨ Compress image with [Imagemin](https://github.com/imagemin/imagemin)
|
|
||||||
- 🎈 Syntax Highlighting with [Prism.js](https://prismjs.com)
|
|
||||||
- ☕ Minify HTML & CSS with [HTMLMinifier](https://www.npmjs.com/package/html-minifier) and [cssnano](https://cssnano.co)
|
|
||||||
- ✏️ Linter with [ESLint](https://eslint.org)
|
|
||||||
- 🛠 Code Formatter with [Prettier](https://prettier.io)
|
|
||||||
- 💨 Live reload
|
|
||||||
- 📦 Module Bundler with [Webpack](https://webpack.js.org)
|
|
||||||
- 🦊 Templating with [EJS](https://ejs.co)
|
|
||||||
- 🤖 SEO metadata and [Open Graph](https://ogp.me/) tags
|
|
||||||
- ⚙️ [JSON-LD](https://developers.google.com/search/docs/guides/intro-structured-data) for richer indexing
|
|
||||||
- 🗺 Sitemap.xml
|
|
||||||
- ⚠️ 404 page
|
|
||||||
- 📖 Pagination
|
|
||||||
- ✅ Cache busting
|
|
||||||
- 💯 Maximize lighthouse score
|
|
||||||
- 🌈 Include a FREE minimalist blog theme
|
|
||||||
- 🗒 Netlify CMS (optional)
|
|
||||||
|
|
||||||
### Philosophy
|
|
||||||
|
|
||||||
- Minimal code (HTML, CSS & JS). Add what you need
|
|
||||||
- SEO-friendly
|
|
||||||
- 🚀 Production-ready
|
|
||||||
|
|
||||||
### Requirements
|
|
||||||
|
|
||||||
- Node.js and npm
|
|
||||||
|
|
||||||
### Premium Themes ([Eleventy Themes](https://creativedesignsguru.com/category/eleventy/))
|
|
||||||
|
|
||||||
| [Blue Dark Eleventy Theme](https://creativedesignsguru.com/blue-dark-eleventy-theme/) | [Blue Eclatant Eleventy Theme](https://creativedesignsguru.com/blue-eclatant-eleventy-theme/) |
|
|
||||||
| --- | --- |
|
|
||||||
| [](https://creativedesignsguru.com/blue-dark-eleventy-theme/) | [](https://creativedesignsguru.com/blue-eclatant-eleventy-theme/) |
|
|
||||||
|
|
||||||
| [Blue Modern Eleventy Theme](https://creativedesignsguru.com/blue-modern-eleventy-theme/) | [Blue Minimalist Eleventy Theme](https://creativedesignsguru.com/blue-minimalist-eleventy-theme/) |
|
|
||||||
| --- | --- |
|
|
||||||
| [](https://creativedesignsguru.com/blue-modern-eleventy-theme/) | [](https://creativedesignsguru.com/blue-minimalist-eleventy-theme/) |
|
|
||||||
|
|
||||||
### Getting started
|
|
||||||
|
|
||||||
Run the following command on your local environment:
|
|
||||||
|
|
||||||
```
|
|
||||||
git clone --depth=1 https://github.com/ixartz/Eleventy-Starter-Boilerplate.git my-project-name
|
|
||||||
cd my-project-name
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
Then, you can run locally in development mode with live reload:
|
|
||||||
|
|
||||||
```
|
```
|
||||||
npm run dev
|
npm run dev
|
||||||
|
|
@ -72,7 +20,63 @@ npm run dev
|
||||||
|
|
||||||
Open http://localhost:8080 with your favorite browser to see your blog.
|
Open http://localhost:8080 with your favorite browser to see your blog.
|
||||||
|
|
||||||
### Project structure
|
|
||||||
|
# Deploy to production
|
||||||
|
|
||||||
|
When you are done making changes, use the following command. Your site will be built in production mode, and it will be served at a temporary local port so you can look at it in the browser.
|
||||||
|
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
Now, your blog is ready to be deployed. All generated files are located at `_site` folder, which you can deploy with any hosting service.
|
||||||
|
|
||||||
|
# Glossary of Terms
|
||||||
|
|
||||||
|
## Markdown
|
||||||
|
|
||||||
|
*Markdown* is text that is styled with special characters typed within the text.
|
||||||
|
https://www.markdownguide.org/cheat-sheet/
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
```
|
||||||
|
# Heading 1
|
||||||
|
## Heading 2
|
||||||
|
_italics_
|
||||||
|
**bold**
|
||||||
|
[link text](linkurl)
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## Markup
|
||||||
|
|
||||||
|
Markup is a system for structuring or formatting data. Notable examples include HTML (Hypertext Markup Language), XML, YAML, or KML. In web design, we mostly use the term as shorthand for HTML.
|
||||||
|
|
||||||
|
**Example of HTML:**
|
||||||
|
```
|
||||||
|
<h1>Heading 1</h1>
|
||||||
|
<h1>Heading 2</h1>
|
||||||
|
<em>italics</em>
|
||||||
|
<strong>bold</strong>
|
||||||
|
<a href="linkurl">link text</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Frontmatter
|
||||||
|
|
||||||
|
Frontmatter is the set of properties defined at the top of a blog page. When 11ty sees the front matter block at the top of the page, it will be processed as a special file. The front matter must be the first thing in the file and must take the form of valid YAML set between triple-dashed lines.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
```
|
||||||
|
---
|
||||||
|
title: 'abc'
|
||||||
|
description: 'xyz'
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Project structure
|
||||||
|
|
||||||
```
|
```
|
||||||
.
|
.
|
||||||
|
|
@ -90,60 +94,7 @@ Open http://localhost:8080 with your favorite browser to see your blog.
|
||||||
└── posts # Your blog posts
|
└── posts # Your blog posts
|
||||||
```
|
```
|
||||||
|
|
||||||
### Customization
|
|
||||||
|
|
||||||
You can easily configure Eleventy Starter Boilerplate. Please change the following file:
|
# Original Template
|
||||||
|
|
||||||
- `public/assets/images/logo.png`: your blog logo
|
https://github.com/ixartz/Eleventy-Starter-Boilerplate/
|
||||||
- `public/apple-touch-icon.png`, `public/favicon.ico`, `public/favicon-16x16.png` and `public/favicon-32x32.png`: your blog favicon, you can generate from https://favicon.io/favicon-converter/
|
|
||||||
- `src/_data/site.json`: your blog configuration
|
|
||||||
- `src/_includes/layouts`: your blog HTML layout
|
|
||||||
- `src/assets/styles/main.css`: your blog CSS file using Tailwind CSS
|
|
||||||
|
|
||||||
### Deploy to production
|
|
||||||
|
|
||||||
You can see the results locally in production mode with:
|
|
||||||
|
|
||||||
```
|
|
||||||
npm run serve
|
|
||||||
```
|
|
||||||
|
|
||||||
The generated HTML and CSS files are minified. It will also removed unused CSS from [Tailwind CSS](https://tailwindcss.com).
|
|
||||||
|
|
||||||
You can create an optimized production build with:
|
|
||||||
|
|
||||||
```
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
Now, your blog is ready to be deployed. All generated files are located at `_site` folder, which you can deploy with any hosting service.
|
|
||||||
|
|
||||||
### Deploy to Netlify
|
|
||||||
|
|
||||||
Clone this repository on own GitHub account and deploy to Netlify:
|
|
||||||
|
|
||||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/ixartz/Eleventy-Starter-Boilerplate&stack=cms)
|
|
||||||
|
|
||||||
### Remove Netlify files and Netlify CMS
|
|
||||||
|
|
||||||
If you don't use Netlify, you can easily remove all Netlify related files:
|
|
||||||
|
|
||||||
- `public/admin`, the entier folder
|
|
||||||
- `src/_includes/layouts/base.ejs`, the loaded script `netlify-identity-widget.js` and the inline script `if (window.netlifyIdentity) { ...`
|
|
||||||
- `netlify.toml`, the entire file
|
|
||||||
|
|
||||||
### Contributions
|
|
||||||
|
|
||||||
Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.
|
|
||||||
|
|
||||||
### License
|
|
||||||
|
|
||||||
Licensed under the MIT License, Copyright © 2020
|
|
||||||
|
|
||||||
See [LICENSE](LICENSE) for more information.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Made with ♥ by [CreativeDesignsGuru](https://creativedesignsguru.com)
|
|
||||||
|
|
||||||
[](https://www.buymeacoffee.com/ixartz)
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
[build]
|
|
||||||
publish = "_site"
|
|
||||||
command = "npm run build"
|
|
||||||
17
package-lock.json
generated
17
package-lock.json
generated
|
|
@ -1,18 +1,19 @@
|
||||||
{
|
{
|
||||||
"name": "my-blog",
|
"name": "visual-anatomy-3d",
|
||||||
"version": "1.0.5",
|
"version": "1.0.5",
|
||||||
"lockfileVersion": 2,
|
"lockfileVersion": 2,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "my-blog",
|
"name": "visual-anatomy-3d",
|
||||||
"version": "1.0.5",
|
"version": "1.0.5",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@glidejs/glide": "^3.4.1",
|
"@glidejs/glide": "^3.4.1",
|
||||||
"blueimp-md5": "^2.19.0",
|
"blueimp-md5": "^2.19.0",
|
||||||
"eleventy-plugin-i18n": "^0.1.3",
|
"eleventy-plugin-i18n": "^0.1.3",
|
||||||
"fast-glob": "^3.2.7"
|
"fast-glob": "^3.2.7",
|
||||||
|
"markdown-it-video": "^0.6.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@11ty/eleventy": "^0.12.1",
|
"@11ty/eleventy": "^0.12.1",
|
||||||
|
|
@ -8398,6 +8399,11 @@
|
||||||
"markdown-it": "bin/markdown-it.js"
|
"markdown-it": "bin/markdown-it.js"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/markdown-it-video": {
|
||||||
|
"version": "0.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/markdown-it-video/-/markdown-it-video-0.6.3.tgz",
|
||||||
|
"integrity": "sha512-T4th1kwy0OcvyWSN4u3rqPGxvbDclpucnVSSaH3ZacbGsAts964dxokx9s/I3GYsrDCJs4ogtEeEeVP18DQj0Q=="
|
||||||
|
},
|
||||||
"node_modules/markdown-it/node_modules/entities": {
|
"node_modules/markdown-it/node_modules/entities": {
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
|
||||||
|
|
@ -21821,6 +21827,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"markdown-it-video": {
|
||||||
|
"version": "0.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/markdown-it-video/-/markdown-it-video-0.6.3.tgz",
|
||||||
|
"integrity": "sha512-T4th1kwy0OcvyWSN4u3rqPGxvbDclpucnVSSaH3ZacbGsAts964dxokx9s/I3GYsrDCJs4ogtEeEeVP18DQj0Q=="
|
||||||
|
},
|
||||||
"maximatch": {
|
"maximatch": {
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,8 @@
|
||||||
"format:js": "prettier '**/*.js' --write && eslint '**/*.js' --fix",
|
"format:js": "prettier '**/*.js' --write && eslint '**/*.js' --fix",
|
||||||
"format:json": "prettier '**/*.json' --write",
|
"format:json": "prettier '**/*.json' --write",
|
||||||
"format": "run-s format:*",
|
"format": "run-s format:*",
|
||||||
"lint": "eslint --ext .js ."
|
"lint": "eslint --ext .js .",
|
||||||
|
"open-local": "xdg-open _site/index.html"
|
||||||
},
|
},
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
@ -70,6 +71,7 @@
|
||||||
"@glidejs/glide": "^3.4.1",
|
"@glidejs/glide": "^3.4.1",
|
||||||
"blueimp-md5": "^2.19.0",
|
"blueimp-md5": "^2.19.0",
|
||||||
"eleventy-plugin-i18n": "^0.1.3",
|
"eleventy-plugin-i18n": "^0.1.3",
|
||||||
"fast-glob": "^3.2.7"
|
"fast-glob": "^3.2.7",
|
||||||
|
"markdown-it-video": "^0.6.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
backend:
|
|
||||||
name: git-gateway
|
|
||||||
branch: master
|
|
||||||
|
|
||||||
# publish_mode: editorial_workflow
|
|
||||||
media_folder: 'src/assets/images' # Media files will be stored in the repo under src/assets/images/posts
|
|
||||||
public_folder: '/assets/images' # The src attribute for uploaded media will begin with assets/images/posts
|
|
||||||
|
|
||||||
# media_folder: 'src/assets/images/posts' # Media files will be stored in the repo under src/assets/images/posts
|
|
||||||
# public_folder: '/assets/images/posts' # The src attribute for uploaded media will begin with assets/images/posts
|
|
||||||
|
|
||||||
collections:
|
|
||||||
- name: "blog" # Used in routes, e.g., /admin/collections/blog
|
|
||||||
label: "Blog" # Used in the UI
|
|
||||||
folder: "src/posts" # The path to the folder where the documents are stored
|
|
||||||
create: true # Allow users to create new documents in this collection
|
|
||||||
slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
|
|
||||||
editor:
|
|
||||||
preview: false # Disable the editor preview and use instead 'preview links'
|
|
||||||
fields: # The fields for each document, usually in front matter
|
|
||||||
- { name: "title", label: "Title" }
|
|
||||||
- { name: "description", label: "Description" }
|
|
||||||
- { name: "date", label: "Date", widget: "datetime" }
|
|
||||||
- { name: "body", label: "Body", widget: "markdown" }
|
|
||||||
- name: "config"
|
|
||||||
label: "Configuration"
|
|
||||||
editor:
|
|
||||||
preview: false
|
|
||||||
files:
|
|
||||||
- name: "global"
|
|
||||||
label: "Global"
|
|
||||||
file: "src/_data/site.json"
|
|
||||||
fields:
|
|
||||||
- { name: "site_name", label: "Site name" }
|
|
||||||
- { name: "title", label: "Site title" }
|
|
||||||
- { name: "description", label: "Site description" }
|
|
||||||
- { name: "url", label: "Site url" }
|
|
||||||
- { name: "locale", label: "Language" }
|
|
||||||
- { name: "author", label: "Author" }
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Content Manager</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- Include the script that builds the page and powers Netlify CMS -->
|
|
||||||
<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
|
|
||||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,11 +1,13 @@
|
||||||
module.exports = [
|
module.exports = [
|
||||||
//{ slug: 'home', name: 'Home' },
|
// { slug: 'home', name: 'Home' },
|
||||||
{ slug: 'info', name: 'Info' },
|
{ slug: 'info', name: 'Info', inNav: false },
|
||||||
{ slug: 'screenshots', name: 'Screenshots' },
|
{ slug: 'screenshots', name: 'Screenshots', inNav: true },
|
||||||
{ slug: 'systems', name: 'Systems' },
|
{ slug: 'systems', name: 'Systems', inNav: true },
|
||||||
{ slug: 'pricing', name: 'Pricing' },
|
{ slug: 'pricing', name: 'Pricing', inNav: true },
|
||||||
{ slug: 'download', name: 'Download' },
|
{ slug: 'download', name: 'Download', inNav: true },
|
||||||
{ slug: 'reviews', name: 'Reviews' },
|
{ slug: 'reviews', name: 'Reviews', inNav: true },
|
||||||
{ slug: 'contact', name: 'Contact' }
|
{ slug: 'contact', name: 'Contact', inNav: true },
|
||||||
|
{
|
||||||
]
|
slug: 'blog', name: 'Blog', inNav: true, class: 'blog', external: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
|
||||||
|
|
@ -122,8 +122,8 @@
|
||||||
<line x1="8" y1="16" x2="12" y2="16" />
|
<line x1="8" y1="16" x2="12" y2="16" />
|
||||||
</svg>Terms of Use</a></li>
|
</svg>Terms of Use</a></li>
|
||||||
<% sections.forEach((link)=> { %>
|
<% sections.forEach((link)=> { %>
|
||||||
<li class="menu-item">
|
<li class="menu-item menu-item--<% link.class %>">
|
||||||
<a href="#<%= link.slug %>">
|
<a href="<% if (link.external) { %><%= link.slug %><% } else { %><%= `../#${link.slug}` %><% } %>">
|
||||||
<%= link.name %>
|
<%= link.name %>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" dir="ltr" style="--scrollbarWidth: 0px; --viewportWidth: calc(100vw - var(--scrollbarWidth));">
|
<html class="page--<%= pageName %>" lang="en" dir="ltr" style="--scrollbarWidth: 0px; --viewportWidth: calc(100vw - var(--scrollbarWidth));">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
|
|
@ -85,26 +85,15 @@
|
||||||
<% } %>
|
<% } %>
|
||||||
<%- include('webpack.ejs') %>
|
<%- include('webpack.ejs') %>
|
||||||
<% if (page.url=="/" ) { %>
|
<% if (page.url=="/" ) { %>
|
||||||
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
|
|
||||||
<script>
|
|
||||||
if (window.netlifyIdentity) {
|
|
||||||
window.netlifyIdentity.on('init', (user) => {
|
|
||||||
if (!user) {
|
|
||||||
window.netlifyIdentity.on('login', () => {
|
|
||||||
document.location.href = '/admin/';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<% } %>
|
<% } %>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="">
|
<body>
|
||||||
<div id="page" class="max-w-screen-lg mx-auto">
|
<div id="page" class="max-w-screen-lg mx-auto">
|
||||||
<header class="site-header ">
|
<header class="site-header ">
|
||||||
<img class="site-logo" src="<%= `./assets/images/logo.png` %>" alt="">
|
<a href="/"><img class="site-logo" src="<%= `/assets/images/logo.png` %>" alt=""></a>
|
||||||
<h1 class="site-title font-semibold text-3xl text-gray-800">
|
<h1 class="site-title">
|
||||||
<%= site.title %>
|
<%= site.title %>
|
||||||
</h1>
|
</h1>
|
||||||
<!-- <div class="text-xl"><%= site.description %></div> -->
|
<!-- <div class="text-xl"><%= site.description %></div> -->
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,29 @@
|
||||||
---
|
---
|
||||||
layout: layouts/base.ejs
|
layout: layouts/base.ejs
|
||||||
|
pageName: post
|
||||||
---
|
---
|
||||||
|
<% include /nav-blog %>
|
||||||
<article>
|
<article id="post">
|
||||||
<header>
|
<header class="post__header hero__wrapper">
|
||||||
<h1 class="text-center font-bold text-3xl text-gray-800"><%= site.title %></h1>
|
<img class="post__image" src="/assets/images/posts/<%= image %>" />
|
||||||
<div class="text-center text-sm mb-8">
|
<div class="hero__banner">
|
||||||
<%= this.dateFns.format(new Date(date), 'LLLL d, yyyy') %>
|
<svg class="banner-edge-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
|
||||||
</div>
|
<path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0.116947"
|
||||||
</header>
|
d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
|
||||||
|
</svg>
|
||||||
<section class="content"><%- content %></section>
|
<svg class="banner-edge-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
|
||||||
</article>
|
<path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0.116947"
|
||||||
|
d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
|
||||||
|
</svg>
|
||||||
|
<h1 class="">
|
||||||
|
<%= title %>
|
||||||
|
</h1>
|
||||||
|
<time class="">
|
||||||
|
<%= this.dateFns.format(new Date(date), 'yyyy.LL.dd' ) %>
|
||||||
|
</time>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section class="post__content">
|
||||||
|
<%- content %>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
29
src/_includes/nav-blog.ejs
Normal file
29
src/_includes/nav-blog.ejs
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<div class="nav__wrapper">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a class="nav-link" href="/blog/">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-left" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||||
|
<line x1="5" y1="12" x2="19" y2="12" />
|
||||||
|
<line x1="5" y1="12" x2="11" y2="18" />
|
||||||
|
<line x1="5" y1="12" x2="11" y2="6" />
|
||||||
|
</svg> see more posts
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="nav-link nav-link--blog" href="/">
|
||||||
|
home
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<svg class="nav-edge-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
|
||||||
|
<path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0"
|
||||||
|
d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
|
||||||
|
</svg>
|
||||||
|
<svg class="nav-edge-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
|
||||||
|
<path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0"
|
||||||
|
d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<div class="nav__wrapper">
|
<div class="nav__wrapper">
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<% sections.forEach((link)=> { %>
|
<% sections.filter((item)=>{ return item.inNav == true; }).forEach((link)=> { %>
|
||||||
<li class="">
|
<li>
|
||||||
<a class="nav-link" href="#<%= link.slug %>">
|
<a class="nav-link nav-link--<%= link.class %>" href="<% if (link.external) { %><%= link.slug %><% } else { %><%= `#${link.slug}` %><% } %>">
|
||||||
<%= link.name %>
|
<%= link.name %>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
BIN
src/assets/images/01.mp4
Normal file
BIN
src/assets/images/01.mp4
Normal file
Binary file not shown.
BIN
src/assets/images/posts/001.jpg
Normal file
BIN
src/assets/images/posts/001.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
src/assets/images/posts/002.jpg
Normal file
BIN
src/assets/images/posts/002.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
src/assets/images/posts/003.jpg
Normal file
BIN
src/assets/images/posts/003.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
src/assets/images/posts/004.jpg
Normal file
BIN
src/assets/images/posts/004.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
src/assets/images/posts/boobs/001.jpg
Normal file
BIN
src/assets/images/posts/boobs/001.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
62
src/assets/styles/_blog-list.css
Normal file
62
src/assets/styles/_blog-list.css
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
|
||||||
|
ul#blogs{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 2rem 0 8rem 0;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog {
|
||||||
|
width: max(25vw, 400px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog a {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog a article{
|
||||||
|
transition: all .2s;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog a:hover article {
|
||||||
|
transform: scale(1.02);
|
||||||
|
background-color: var(--c-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog a:hover time {
|
||||||
|
color: var(--c-bkg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.blog article {
|
||||||
|
background-color: var(--c-1);
|
||||||
|
border-radius: var(--r-1);
|
||||||
|
padding: 2rem;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog h1 {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog img{
|
||||||
|
border-radius: calc(var(--r-1) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog time {
|
||||||
|
color: var(--c-3);
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog p {
|
||||||
|
color: var(--c-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1300px) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
article.blurb__wrapper {
|
.page--home article.blurb__wrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
gap: 3rem;
|
gap: 3rem;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
.contact__wrapper {
|
.page--home .contact__wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
color: var(--c-bkg);
|
color: var(--c-bkg);
|
||||||
background: var(--c-3);
|
background: var(--c-3);
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.platform__wrapper {
|
.page--home .platform__wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,4 @@
|
||||||
.hero__wrapper {
|
|
||||||
--offset: 8rem;
|
|
||||||
margin-bottom: var(--offset);
|
|
||||||
padding: 0 2rem;
|
|
||||||
--weird-gap: 0.04rem;
|
|
||||||
z-index: 1; /* temp, to overlap slider */
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero__video {
|
.hero__video {
|
||||||
border-radius: var(--r-1);
|
border-radius: var(--r-1);
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
article.info__wrapper {
|
.page--home article.info__wrapper {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: 3rem;
|
gap: 3rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,9 @@
|
||||||
padding: 0.5rem var(--p-1) 1.5rem var(--p-1);
|
padding: 0.5rem var(--p-1) 1.5rem var(--p-1);
|
||||||
background: var(--c-bkg);
|
background: var(--c-bkg);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1;
|
z-index: 2;
|
||||||
|
|
||||||
--weird-gap: 0.04rem;
|
--weird-gap: 0.05rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul {
|
nav ul {
|
||||||
|
|
@ -46,7 +46,18 @@
|
||||||
.nav-link {
|
.nav-link {
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: all 0.15s ease-out;
|
transition: all 0.15s ease-out;
|
||||||
color: black;
|
color: var(--c-2);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link svg{
|
||||||
|
width: 1.2em;
|
||||||
|
margin-right: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link--blog{
|
||||||
|
color: var(--c-3);
|
||||||
}
|
}
|
||||||
.nav-link:before {
|
.nav-link:before {
|
||||||
content: "";
|
content: "";
|
||||||
|
|
|
||||||
212
src/assets/styles/_post.css
Normal file
212
src/assets/styles/_post.css
Normal file
|
|
@ -0,0 +1,212 @@
|
||||||
|
.page--post .page-content{
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page--post .page-content{
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page--post .nav__wrapper{
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page--post .hero__wrapper {
|
||||||
|
--height: calc( min(60rem, var(--viewportWidth)) / 2);
|
||||||
|
--diff: 5rem;
|
||||||
|
--weird-gap: 0.04rem;
|
||||||
|
--offset-from-top: calc(var(--height) - var(--diff) + var(--weird-gap));
|
||||||
|
}
|
||||||
|
|
||||||
|
.page--post .hero__wrapper svg{
|
||||||
|
bottom: auto;
|
||||||
|
top: calc(var(--diff) - var(--r-1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.page--post .hero__banner{
|
||||||
|
bottom: auto;
|
||||||
|
top: var(--offset-from-top);
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post{
|
||||||
|
font-size: 1rem;
|
||||||
|
width: min(60ch, var(--viewportWidth));
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post h1{
|
||||||
|
color: var(--c-3);
|
||||||
|
}
|
||||||
|
article#post > header{
|
||||||
|
gap: 0;
|
||||||
|
width: min(60rem, var(--viewportWidth));
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post time{
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__image{
|
||||||
|
border-radius: 2rem;
|
||||||
|
width: 100%;
|
||||||
|
height: var(--height);
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content a{
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content img{
|
||||||
|
width: 80%;
|
||||||
|
margin: 2rem 10%;
|
||||||
|
border-radius: var(--r-1);
|
||||||
|
background-color: var(--c-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content h1{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: var(--c-2);
|
||||||
|
width: auto;
|
||||||
|
margin: 2rem 0 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content h2{
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--c-2);
|
||||||
|
width: auto;
|
||||||
|
margin: 2em 0 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content h3{
|
||||||
|
font-size: 1.75rem;
|
||||||
|
color: var(--c-2);
|
||||||
|
width: auto;
|
||||||
|
margin: 2em 0 1em 0;
|
||||||
|
font-family: Bebas Neue;
|
||||||
|
line-height: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content h4{
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: var(--c-2);
|
||||||
|
width: auto;
|
||||||
|
margin: 2em 0 1em 0;
|
||||||
|
font-family: Bebas Neue;
|
||||||
|
line-height: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content h5{
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: var(--c-2);
|
||||||
|
width: auto;
|
||||||
|
margin: 2em 0 1em 0;
|
||||||
|
font-family: Bebas Neue;
|
||||||
|
line-height: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content h6{
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--c-2);
|
||||||
|
width: auto;
|
||||||
|
margin: 2em 0 1em 0;
|
||||||
|
font-family: Bebas Neue;
|
||||||
|
line-height: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content blockquote{
|
||||||
|
width: 120%;
|
||||||
|
margin-left: -10%;
|
||||||
|
background-color: var(--c-3);
|
||||||
|
color: var(--c-bkg);
|
||||||
|
font-size: 3rem;
|
||||||
|
font-style: italic;
|
||||||
|
padding: 2rem 4rem;
|
||||||
|
line-height: 1;
|
||||||
|
border-radius: 1rem 6rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content blockquote::before{
|
||||||
|
content: "\"";
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
left: 0rem;
|
||||||
|
font-size: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content blockquote::after{
|
||||||
|
content: "\"";
|
||||||
|
position: absolute;
|
||||||
|
bottom: -2rem;
|
||||||
|
right: 2rem;
|
||||||
|
font-size: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
article#post .post__content blockquote p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content p{
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content hr{
|
||||||
|
margin: 2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content th, article#post .post__content td{
|
||||||
|
padding: .5rem;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content code{
|
||||||
|
margin: 1em 0;
|
||||||
|
padding: 2rem;
|
||||||
|
background-color: var(--c-1);
|
||||||
|
display: block;
|
||||||
|
color: #666;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content pre{
|
||||||
|
margin: 1em 0;
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content pre code{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
article#post .post__content > ul, article#post .post__content > ol {
|
||||||
|
margin: 2rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
article#post .post__content ul {
|
||||||
|
list-style-type: disc;
|
||||||
|
list-style-position: inside;
|
||||||
|
}
|
||||||
|
article#post .post__content ol {
|
||||||
|
list-style-type: decimal;
|
||||||
|
list-style-position: inside;
|
||||||
|
}
|
||||||
|
article#post .post__content ul ul, article#post .post__content ul {
|
||||||
|
list-style-type: circle;
|
||||||
|
list-style-position: inside;
|
||||||
|
margin-left: 2rem;
|
||||||
|
}
|
||||||
|
article#post .post__content ol ol, ul ol {
|
||||||
|
list-style-type: lower-latin;
|
||||||
|
list-style-position: inside;
|
||||||
|
margin-left: 2rem;
|
||||||
|
}
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.level__wrapper {
|
.page--home .level__wrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 3rem auto 2.5rem;
|
grid-template-rows: 3rem auto 2.5rem;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
margin: 0 2rem;
|
margin: 0 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rating-wrapper {
|
.page--home .rating-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
grid-template-columns: 30rem auto;
|
grid-template-columns: 30rem auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.system__wrapper {
|
.page--home .system__wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -205,6 +205,8 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-content {
|
.page-content {
|
||||||
|
|
@ -223,7 +225,7 @@ a:hover, .btn:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
article {
|
.page--home article {
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -305,9 +307,23 @@ h2 {
|
||||||
line-height: 0.85;
|
line-height: 0.85;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blurb__wrapper {
|
h2.blog-header{
|
||||||
border-radius: var(--radius);
|
font-family: Nunito;
|
||||||
background: var(--c-bkg);
|
color: #fff;
|
||||||
|
letter-spacing: 1rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background: var(--c-3);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 0.4rem 0 0.4rem 1rem;
|
||||||
|
font-size: 2.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page--home .hero__wrapper {
|
||||||
|
--offset: 8rem;
|
||||||
|
margin-bottom: var(--offset);
|
||||||
|
padding: 0 2rem;
|
||||||
|
--weird-gap: 0.04rem;
|
||||||
|
z-index: 1; /* temp, to overlap slider */
|
||||||
}
|
}
|
||||||
|
|
||||||
@import '_nav.css';
|
@import '_nav.css';
|
||||||
|
|
@ -331,3 +347,7 @@ h2 {
|
||||||
@import '_contact.css';
|
@import '_contact.css';
|
||||||
|
|
||||||
@import '_footer.css';
|
@import '_footer.css';
|
||||||
|
|
||||||
|
@import '_post.css';
|
||||||
|
|
||||||
|
@import '_blog-list.css';
|
||||||
|
|
|
||||||
42
src/blog.ejs
Normal file
42
src/blog.ejs
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
---
|
||||||
|
pagination:
|
||||||
|
data: collections.posts
|
||||||
|
size: 20
|
||||||
|
alias: list
|
||||||
|
reverse: true
|
||||||
|
permalink: '<% if (pagination.pageNumber > 0) { %><%= `blog/page${pagination.pageNumber + 1}/index.html` %><% } else { %>blog/index.html<% } %>'
|
||||||
|
eleventyComputed:
|
||||||
|
title: '<% if (pagination.pageNumber > 0) { %><%= `Page ${pagination.pageNumber + 1} | ${site.title}` %><% } else { %><%= site.title %><% } %>'
|
||||||
|
pageName: blog
|
||||||
|
---
|
||||||
|
|
||||||
|
<h2 class="blog-header">
|
||||||
|
Blog
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<ul id="blogs">
|
||||||
|
<% list.forEach((post) => { %>
|
||||||
|
<li class="blog">
|
||||||
|
<a href="<%= post.url %>">
|
||||||
|
<article>
|
||||||
|
<img src="/assets/images/posts/<%= post.data.image %>" alt="">
|
||||||
|
<h1><%= post.data.title %></h1>
|
||||||
|
<time datetime="<%= new Date(post.data.date) %>"><%= this.dateFns.format(new Date(post.data.date), 'LLLL d, yyyy') %></time>
|
||||||
|
<p><%= post.data.description %></p>
|
||||||
|
</article>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<% }) %>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<% if (pagination.previous) { %>
|
||||||
|
<div>
|
||||||
|
<a href="<%= pagination.previous.replace(/index.html$/, "") %>">← Newer Posts</a>
|
||||||
|
</div>
|
||||||
|
<% } %> <% if (pagination.next) { %>
|
||||||
|
<div class="">
|
||||||
|
<a href="<%= pagination.next.replace(/index.html$/, "") %>">Older Posts →</a>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
</div>
|
||||||
|
|
@ -1,12 +1,7 @@
|
||||||
---
|
---
|
||||||
pagination:
|
title: '<%= site.title %>'
|
||||||
data: collections.posts
|
layout: layouts/base.ejs
|
||||||
size: 5
|
pageName: home
|
||||||
alias: list
|
|
||||||
reverse: true
|
|
||||||
permalink: '<% if (pagination.pageNumber > 0) { %><%= `page${pagination.pageNumber + 1}/index.html` %><% } else { %>index.html<% } %>'
|
|
||||||
eleventyComputed:
|
|
||||||
title: '<% if (pagination.pageNumber > 0) { %><%= `Page ${pagination.pageNumber + 1} | ${site.title}` %><% } else { %><%= site.title %><% } %>'
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<% include /hero %>
|
<% include /hero %>
|
||||||
|
|
|
||||||
14
src/posts/2002-01-01-abc.html
Normal file
14
src/posts/2002-01-01-abc.html
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
---
|
||||||
|
title: 'abc'
|
||||||
|
description: 'Watch here for my future blog.'
|
||||||
|
date: 2020-07-08T00:00:00Z
|
||||||
|
image: 004.jpg
|
||||||
|
---
|
||||||
|
|
||||||
|
<h1>header</h1>
|
||||||
|
|
||||||
|
<p>afsdfsd dfdfdfhfhdhdhdfh</p>
|
||||||
|
|
||||||
|
<iframe id="odysee-iframe" width="560" height="315" src="https://odysee.com/$/embed/@purism:8/introducing-pureboot-basic:d?r=B2sJWhwiPNQDy457RV1NjAYxDb6uiHGm" allowfullscreen></iframe>
|
||||||
|
|
||||||
|
|
||||||
136
src/posts/2002-01-01-cheatsheet.md
Normal file
136
src/posts/2002-01-01-cheatsheet.md
Normal file
|
|
@ -0,0 +1,136 @@
|
||||||
|
---
|
||||||
|
title: 'Cheatsheet'
|
||||||
|
description: 'Watch here for my future blog.'
|
||||||
|
date: 2022-09-08T00:00:00Z
|
||||||
|
image: 003.jpg
|
||||||
|
---
|
||||||
|
|
||||||
|
# h1 Heading
|
||||||
|
## h2 Heading
|
||||||
|
### h3 Heading
|
||||||
|
#### h4 Heading
|
||||||
|
##### h5 Heading
|
||||||
|
###### h6 Heading
|
||||||
|
|
||||||
|
|
||||||
|
## Horizontal Rules
|
||||||
|
|
||||||
|
___
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
***
|
||||||
|
|
||||||
|
|
||||||
|
## Emphasis
|
||||||
|
|
||||||
|
**This is bold text**
|
||||||
|
|
||||||
|
__This is bold text__
|
||||||
|
|
||||||
|
*This is italic text*
|
||||||
|
|
||||||
|
_This is italic text_
|
||||||
|
|
||||||
|
~~Strikethrough~~
|
||||||
|
|
||||||
|
|
||||||
|
## Blockquotes
|
||||||
|
|
||||||
|
|
||||||
|
> here is a pull-quote from somewhere in your article!
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Lists
|
||||||
|
|
||||||
|
### Unordered
|
||||||
|
|
||||||
|
+ Create a list by starting a line with +, -, or *
|
||||||
|
+ Sub-lists are made by indenting 2 spaces:
|
||||||
|
- Marker character change forces new list start:
|
||||||
|
* Ac tristique libero volutpat at
|
||||||
|
+ Facilisis in pretium nisl aliquet
|
||||||
|
- Nulla volutpat aliquam velit
|
||||||
|
+ Very easy!
|
||||||
|
|
||||||
|
### Ordered
|
||||||
|
|
||||||
|
1. Lorem ipsum dolor sit amet
|
||||||
|
2. Consectetur adipiscing elit
|
||||||
|
3. Integer molestie lorem at massa
|
||||||
|
1. You can use sequential numbers...
|
||||||
|
1. ...or keep all the numbers as 1.
|
||||||
|
|
||||||
|
Start numbering with offset:
|
||||||
|
|
||||||
|
57. foo
|
||||||
|
1. bar
|
||||||
|
|
||||||
|
|
||||||
|
## Code
|
||||||
|
|
||||||
|
Inline `<html></html>`
|
||||||
|
|
||||||
|
Indented code
|
||||||
|
|
||||||
|
// Some comments
|
||||||
|
line 1 of code
|
||||||
|
line 2 of code
|
||||||
|
line 3 of code
|
||||||
|
|
||||||
|
|
||||||
|
Block code "fences"
|
||||||
|
|
||||||
|
```
|
||||||
|
Sample text here...
|
||||||
|
```
|
||||||
|
|
||||||
|
Syntax highlighting
|
||||||
|
|
||||||
|
``` js
|
||||||
|
var foo = function (bar) {
|
||||||
|
return bar++;
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(foo(5));
|
||||||
|
```
|
||||||
|
|
||||||
|
## Tables
|
||||||
|
|
||||||
|
| Option | Description |
|
||||||
|
| ------ | ----------- |
|
||||||
|
| data | path to data files to supply the data that will be passed into templates. |
|
||||||
|
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||||
|
| ext | extension to be used for dest files. |
|
||||||
|
|
||||||
|
Right aligned columns
|
||||||
|
|
||||||
|
| Option | Description |
|
||||||
|
| ------:| -----------:|
|
||||||
|
| data | path to data files to supply the data that will be passed into templates. |
|
||||||
|
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||||
|
| ext | extension to be used for dest files. |
|
||||||
|
|
||||||
|
|
||||||
|
## Links
|
||||||
|
|
||||||
|
[link text](http://dev.nodeca.com)
|
||||||
|
|
||||||
|
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
|
||||||
|
|
||||||
|
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
|
||||||
|
|
||||||
|
|
||||||
|
## Images
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Like links, Images also have a footnote style syntax
|
||||||
|
|
||||||
|
![Alt text][id]
|
||||||
|
|
||||||
|
With a reference later in the document defining the URL location:
|
||||||
|
|
||||||
|
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||||
20
src/posts/2002-01-01-test-post.md
Normal file
20
src/posts/2002-01-01-test-post.md
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
---
|
||||||
|
title: 'test post'
|
||||||
|
description: 'Watch here for my future blog.'
|
||||||
|
date: 2020-28-08T00:00:00Z
|
||||||
|
image: 002.jpg
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Lorem ipsum
|
||||||
|
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do [eiusmod tempor incididunt]() ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
|
||||||
|
Lorem ipsum dolor sit amet, [consectetur]() adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||||
18
src/posts/2002-01-01-xyz.md
Normal file
18
src/posts/2002-01-01-xyz.md
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
---
|
||||||
|
title: 'xyz this is a test post with a long name'
|
||||||
|
description: 'Watch here for my future blog.'
|
||||||
|
date: 2021-03-08T00:00:00Z
|
||||||
|
image: 001.jpg
|
||||||
|
---
|
||||||
|
|
||||||
|
# this is a header
|
||||||
|
|
||||||
|
this is a **paragraph**.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@[odysee](https://odysee.com/@corbettreport:0/waggaman-russiaupdates:1?r=B2sJWhwiPNQDy457RV1NjAYxDb6uiHGm)
|
||||||
|
|
||||||
|
@[youtube](dQw4w9WgXcQ)
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
---
|
|
||||||
title: 'My first post'
|
|
||||||
description: 'Watch here for my future blog.'
|
|
||||||
date: 2020-08-08T00:00:00Z
|
|
||||||
---
|
|
||||||
|
|
||||||
Blog coming soon. :)
|
|
||||||
|
|
@ -99,18 +99,18 @@ module.exports = {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.(png|jpg|gif)$/i,
|
test: /\.(png|jpg|jpeg|gif)$/i,
|
||||||
use: [
|
use: [
|
||||||
{
|
{
|
||||||
loader: 'url-loader',
|
loader: 'url-loader',
|
||||||
options: {
|
options: {
|
||||||
name: 'images/[name].[ext]',
|
name: 'images/[name].[ext]',
|
||||||
limit: 10000,
|
limit: 10000,
|
||||||
esModule: false
|
esModule: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
]
|
],
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<%= htmlWebpackPlugin.files.css.map((css) => `<link
|
<%= htmlWebpackPlugin.files.css.map((css) => `<link
|
||||||
href="./assets${css}"
|
href="/assets${css}"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>`).join('') %>
|
/>`).join('') %>
|
||||||
<!-- needed to add ./ the href, or else the path was wrong on production -->
|
<!-- needed to add ./ the href, or else the path was wrong on production -->
|
||||||
Loading…
Reference in a new issue