diff --git a/.eleventy.js b/.eleventy.js index 9b4c14e..4741436 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -5,7 +5,14 @@ const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight'); const i18n = require('eleventy-plugin-i18n'); const translations = require('./src/_data/i18n'); +const markdownIt = require('markdown-it'); +const markdownItVideo = require('markdown-it-video'); + module.exports = function (eleventyConfig) { + let markdownLibrary = markdownIt().use(markdownItVideo); + + eleventyConfig.setLibrary('md', markdownLibrary); + // PLUGINS ************************************************************** eleventyConfig.addPlugin(syntaxHighlight); diff --git a/README.md b/README.md index f70b345..dd8ada2 100644 --- a/README.md +++ b/README.md @@ -1,70 +1,18 @@ -# Eleventy Starter Boilerplate +# Write a new Blog Post -

- Eleventy starter banner -

+1. Create a new file in `/src/posts/`. + - You can create it in the VSCode sidebar, or in the windows flie manager, or in the terminal. It doesn't matter. + - 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 - -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/) | -| --- | --- | -| [![Blue Dark Eleventy Theme premium](https://creativedesignsguru.com/assets/images/themes/blue-dark-mode-eleventy-theme-homepage-xs.png)](https://creativedesignsguru.com/blue-dark-eleventy-theme/) | [![Blue Eclatant Eleventy Theme premium](https://creativedesignsguru.com/assets/images/themes/eclatant-blue-eleventy-theme-homepage-xs.png)](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/) | -| --- | --- | -| [![Blue Modern Eleventy Theme premium](https://creativedesignsguru.com/assets/images/themes/modern-blue-eleventy-theme-homepage-xs.png)](https://creativedesignsguru.com/blue-modern-eleventy-theme/) | [![Blue Minimalist Eleventy Theme premium](https://creativedesignsguru.com/assets/images/themes/minimalist-blue-eleventy-theme-homepage-xs.png)](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: +If you run your site in development mode using the following command, your changes will appear in the browser whenever a file is saved. ``` npm run dev @@ -72,7 +20,63 @@ npm run dev 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:** +``` +

Heading 1

+

Heading 2

+italics +bold +link text +``` + +## 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 ``` -### Customization -You can easily configure Eleventy Starter Boilerplate. Please change the following file: +# Original Template -- `public/assets/images/logo.png`: your blog logo -- `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: - -[![Netlify Deploy button](https://www.netlify.com/img/deploy/button.svg)](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) - -[![Sponsor Next JS Boilerplate](https://cdn.buymeacoffee.com/buttons/default-red.png)](https://www.buymeacoffee.com/ixartz) +https://github.com/ixartz/Eleventy-Starter-Boilerplate/ \ No newline at end of file diff --git a/netlify.toml b/netlify.toml deleted file mode 100644 index 182a663..0000000 --- a/netlify.toml +++ /dev/null @@ -1,3 +0,0 @@ -[build] - publish = "_site" - command = "npm run build" diff --git a/package-lock.json b/package-lock.json index 801fd1a..cb8f37f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,18 +1,19 @@ { - "name": "my-blog", + "name": "visual-anatomy-3d", "version": "1.0.5", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "my-blog", + "name": "visual-anatomy-3d", "version": "1.0.5", "license": "ISC", "dependencies": { "@glidejs/glide": "^3.4.1", "blueimp-md5": "^2.19.0", "eleventy-plugin-i18n": "^0.1.3", - "fast-glob": "^3.2.7" + "fast-glob": "^3.2.7", + "markdown-it-video": "^0.6.3" }, "devDependencies": { "@11ty/eleventy": "^0.12.1", @@ -8398,6 +8399,11 @@ "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": { "version": "2.0.3", "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": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz", diff --git a/package.json b/package.json index f3ad5fe..06e247c 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "format:js": "prettier '**/*.js' --write && eslint '**/*.js' --fix", "format:json": "prettier '**/*.json' --write", "format": "run-s format:*", - "lint": "eslint --ext .js ." + "lint": "eslint --ext .js .", + "open-local": "xdg-open _site/index.html" }, "license": "ISC", "devDependencies": { @@ -70,6 +71,7 @@ "@glidejs/glide": "^3.4.1", "blueimp-md5": "^2.19.0", "eleventy-plugin-i18n": "^0.1.3", - "fast-glob": "^3.2.7" + "fast-glob": "^3.2.7", + "markdown-it-video": "^0.6.3" } } diff --git a/public/admin/config.yml b/public/admin/config.yml deleted file mode 100644 index f849427..0000000 --- a/public/admin/config.yml +++ /dev/null @@ -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" } diff --git a/public/admin/index.html b/public/admin/index.html deleted file mode 100644 index 74afc63..0000000 --- a/public/admin/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - Content Manager - - - - - - - - diff --git a/src/_data/sections.js b/src/_data/sections.js index ac8cd03..d5ad80d 100644 --- a/src/_data/sections.js +++ b/src/_data/sections.js @@ -1,11 +1,13 @@ -module.exports = [ - //{ slug: 'home', name: 'Home' }, - { slug: 'info', name: 'Info' }, - { slug: 'screenshots', name: 'Screenshots' }, - { slug: 'systems', name: 'Systems' }, - { slug: 'pricing', name: 'Pricing' }, - { slug: 'download', name: 'Download' }, - { slug: 'reviews', name: 'Reviews' }, - { slug: 'contact', name: 'Contact' } - -] \ No newline at end of file +module.exports = [ + // { slug: 'home', name: 'Home' }, + { slug: 'info', name: 'Info', inNav: false }, + { slug: 'screenshots', name: 'Screenshots', inNav: true }, + { slug: 'systems', name: 'Systems', inNav: true }, + { slug: 'pricing', name: 'Pricing', inNav: true }, + { slug: 'download', name: 'Download', inNav: true }, + { slug: 'reviews', name: 'Reviews', inNav: true }, + { slug: 'contact', name: 'Contact', inNav: true }, + { + slug: 'blog', name: 'Blog', inNav: true, class: 'blog', external: true, + }, +]; diff --git a/src/_includes/footer.ejs b/src/_includes/footer.ejs index b103a45..e263035 100644 --- a/src/_includes/footer.ejs +++ b/src/_includes/footer.ejs @@ -122,8 +122,8 @@ Terms of Use <% sections.forEach((link)=> { %> -
  • - +
  • + <%= link.name %>
    • diff --git a/src/_includes/layouts/base.ejs b/src/_includes/layouts/base.ejs index 8c70363..654b111 100644 --- a/src/_includes/layouts/base.ejs +++ b/src/_includes/layouts/base.ejs @@ -1,5 +1,5 @@ - + @@ -85,26 +85,15 @@ <% } %> <%- include('webpack.ejs') %> <% if (page.url=="/" ) { %> - - + <% } %> - +
    - -

    + +

    <%= site.title %>

    diff --git a/src/_includes/layouts/post.ejs b/src/_includes/layouts/post.ejs index 247aaa0..5361d28 100644 --- a/src/_includes/layouts/post.ejs +++ b/src/_includes/layouts/post.ejs @@ -1,14 +1,29 @@ --- layout: layouts/base.ejs +pageName: post --- - -
    -
    -

    <%= site.title %>

    -
    - <%= this.dateFns.format(new Date(date), 'LLLL d, yyyy') %> -
    -
    - -
    <%- content %>
    -
    +<% include /nav-blog %> +
    +
    + +
    + + +

    + <%= title %> +

    + +
    +
    +
    + <%- content %> +
    +
    \ No newline at end of file diff --git a/src/_includes/nav-blog.ejs b/src/_includes/nav-blog.ejs new file mode 100644 index 0000000..158f4c1 --- /dev/null +++ b/src/_includes/nav-blog.ejs @@ -0,0 +1,29 @@ +
    + + + + + + + +
    \ No newline at end of file diff --git a/src/_includes/nav.ejs b/src/_includes/nav.ejs index b08e592..09be956 100644 --- a/src/_includes/nav.ejs +++ b/src/_includes/nav.ejs @@ -1,9 +1,9 @@