├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── app.html ├── assets ├── README.md ├── bx-search.svg ├── content.scss ├── deploy.svg └── grid.css ├── components ├── BaelFooter.vue ├── BaelGrid.vue ├── BaelHeader.vue ├── BaelPagination.vue ├── BaelSearch.vue ├── FeaturedImage.vue ├── FullGrid.vue ├── README.md ├── SendGrid.vue ├── SlideOut.vue └── SmoothReflow.vue ├── content ├── blog │ ├── 2018-02-13-hello-world.md │ ├── 2018-05-06-seattle.md │ ├── 2018-06-19-lorem-ipsum.md │ ├── 2018-06-19-top-10-reasons-why.md │ ├── 2018-07-07-markdown-test.md │ ├── 2018-07-08-14th-factory.md │ ├── 2018-07-08-email-newsletter-setup-instructions.md │ ├── 2018-07-08-menu-setup-—-pages-links.md │ ├── 2018-07-17-belief-defect-—-new-brvtalism-121-mix.md │ ├── 2018-07-17-my-house-title-sequence.md │ ├── 2018-07-17-nicolas-jaar-selected-network-sets.md │ ├── 2018-07-29-featured-in.md │ ├── 2019-03-28-0-1-3-update.md │ ├── 2019-05-26-0-2-1-update-new-alt-layout.md │ ├── 2019-07-18-mentioned-by.md │ └── 2020-09-06-rufus-du-sol-joshua-tree.md ├── category │ ├── art.json │ ├── design.json │ ├── internet.json │ ├── music.json │ ├── photography.json │ └── setup.json ├── page │ ├── about.md │ ├── changelog.md │ └── inspired-by.md └── setup │ ├── connect.json │ └── info.json ├── directives └── intersect.js ├── layouts ├── README.md └── default.vue ├── middleware ├── README.md └── title.js ├── netlify.toml ├── nuxt.config.js ├── package.json ├── pages ├── README.md ├── blog │ └── _slug.vue ├── categories.vue ├── category │ └── _slug.vue ├── index.vue ├── p │ └── _page.vue └── page │ └── _slug.vue ├── plugins ├── browser.js ├── dom-handlers.js ├── lazyload.js └── moment.js ├── src └── sendgrid │ └── app.js ├── static ├── README.md ├── _headers ├── admin │ ├── config.yml │ └── index.html ├── favicon.ico ├── icon.png ├── images │ └── uploads │ │ ├── 14th-factory-collage.jpg │ │ ├── 14th.jpg │ │ ├── bael-0.1.3update.jpg │ │ ├── bael-big.jpg │ │ ├── baeltype.png │ │ ├── belief.jpg │ │ ├── changelog.jpg │ │ ├── define.png │ │ ├── desert.jpg │ │ ├── email.png │ │ ├── fling.jpg │ │ ├── icon.png │ │ ├── img_2148.jpg │ │ ├── jake-peterson-1530918-unsplash.jpg │ │ ├── menu-animation-cropped.gif │ │ ├── menu-setup.jpg │ │ ├── menubackend.png │ │ ├── seattle.jpg │ │ ├── signup.png │ │ ├── turn-on-sendgrid.png │ │ └── twitter-glitched-7-18-2019-6-26-49-pm.png └── sw.js ├── store ├── README.md ├── browser.js └── index.js ├── yarn-error.log └── yarn.lock /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | .nuxt 9 | 10 | # Nuxt generate 11 | dist 12 | 13 | # Nuxt generate 14 | sw.* 15 | sw.js 16 | 17 | /static/sw.js 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 jake-101 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Bael Netlify CMS Template 2 | 3 | ![Bael](https://i.imgur.com/e1zmiB2.jpg "Bael CMS Blog Template") 4 | 5 | > Bael is a free template that gives you an easy way to start a blog that uses modern technologies like static-site JAMstack architecture, CSS grid layout, responsive design, and fuzzy search — all wrapped up in a brutalist aesthetic. 6 | 7 | ## Info 8 | 9 | Bael runs using [Nuxt.js](https://nuxtjs.org), [Vue.js](https://vuejs.org), [Netlify CMS](https://netlifycms.org), and is hosted by [Netlify](https://netlify.com). Bael requires an account with Netlify and Github/Bitbucket to deploy. Made by [Jake 101](https://jake101.com) 10 | 11 | ## Deploy to Netlify 12 | 13 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/jake-101/bael-template) 14 | 15 | 16 | ## Build Setup 17 | 18 | ``` bash 19 | # install dependencies 20 | $ npm install # Or yarn install 21 | 22 | # serve with hot reload at localhost:3000 23 | $ npm run dev 24 | 25 | # build for production and launch server 26 | $ npm run build 27 | $ npm start 28 | 29 | # generate static project 30 | $ npm run generate 31 | ``` 32 | 33 | ## Edit content 34 | 35 | Access `yourwebsite.com/admin`, e.g. `localhost:3000/admin`. 36 | 37 | ## Manage dynamic routes 38 | 39 | When you use Netlify CMS' `folder` type, you actually create dynamic routes. For example, when creating a blog, 40 | you render different content files with the same template. And for the blog to know which content to render, 41 | it looks at the url and gets the specific content file. That's a dynamic route. 42 | 43 | So If you create a `folder` type with Netlify CMS, add the folder as glob to the `dynamicRoutes` variable 44 | in the `nuxt.config.js`. 45 | 46 | MIT License 47 | 48 | -------------------------------------------------------------------------------- /app.html: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 | {{ HEAD }} 15 | 16 | 17 | 18 | 19 | {{ APP }} 20 | 21 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/assets#webpacked 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /assets/bx-search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/content.scss: -------------------------------------------------------------------------------- 1 | .post-content .nuxt-content { 2 | line-height: 1.85; 3 | 4 | @media print { 5 | *, 6 | *:before, 7 | *:after { 8 | background: transparent !important; 9 | color: #000 !important; 10 | box-shadow: none !important; 11 | text-shadow: none !important; 12 | } 13 | 14 | a, 15 | a:visited { 16 | text-decoration: underline; 17 | } 18 | 19 | a[href]:after { 20 | content: " (" attr(href) ")"; 21 | } 22 | 23 | abbr[title]:after { 24 | content: " (" attr(title) ")"; 25 | } 26 | 27 | a[href^="#"]:after, 28 | a[href^="javascript:"]:after { 29 | content: ""; 30 | } 31 | 32 | pre, 33 | blockquote { 34 | border: 1px solid #999; 35 | page-break-inside: avoid; 36 | } 37 | 38 | thead { 39 | display: table-header-group; 40 | } 41 | 42 | tr, 43 | img { 44 | page-break-inside: avoid; 45 | } 46 | 47 | img { 48 | max-width: 100% !important; 49 | } 50 | 51 | p, 52 | h2, 53 | h3 { 54 | orphans: 3; 55 | widows: 3; 56 | } 57 | 58 | h2, 59 | h3 { 60 | page-break-after: avoid; 61 | } 62 | } 63 | 64 | p, 65 | ul, 66 | ol { 67 | font-size: 1rem; 68 | margin-bottom: 1.3rem; 69 | } 70 | 71 | h1, 72 | h2, 73 | h3, 74 | h4 { 75 | margin: 1.618rem 0 1rem; 76 | font-weight: inherit; 77 | color: var(--textcolor); 78 | line-height: 1.1; 79 | letter-spacing: -0.15rem; 80 | } 81 | 82 | h1 { 83 | margin-top: 0; 84 | font-size: 2.827rem; 85 | } 86 | 87 | h2 { 88 | font-size: 2.827rem; 89 | } 90 | 91 | h3 { 92 | font-size: 1.999rem; 93 | } 94 | 95 | h4, 96 | .splendor-h4 { 97 | font-size: 1.414rem; 98 | } 99 | 100 | h5 { 101 | font-size: 1.121rem; 102 | } 103 | 104 | h6, 105 | .splendor-h6 { 106 | font-size: 0.88rem; 107 | } 108 | 109 | small { 110 | font-size: 0.707em; 111 | } 112 | 113 | /* https://github.com/mrmrs/fluidity */ 114 | 115 | img, 116 | canvas, 117 | iframe, 118 | video, 119 | svg, 120 | select, 121 | textarea { 122 | max-width: 100%; 123 | } 124 | 125 | div { 126 | width: 100%; 127 | } 128 | 129 | div img { 130 | width: 100%; 131 | } 132 | blockquote { 133 | padding: 0.5rem 1.5rem; 134 | } 135 | 136 | blockquote p { 137 | font-size: 1.5rem; 138 | font-style: italic; 139 | margin: 1rem auto 1rem; 140 | } 141 | 142 | li { 143 | margin-left: 0; 144 | } 145 | 146 | p { 147 | height: auto; 148 | line-height: 1.618; 149 | } 150 | 151 | pre, 152 | code { 153 | font-family: Menlo, Monaco, "Courier New", monospace; 154 | } 155 | 156 | pre { 157 | background-color: #fafafa; 158 | font-size: 0.8rem; 159 | overflow-x: auto; 160 | padding: 1.125em; 161 | } 162 | } 163 | -------------------------------------------------------------------------------- /assets/deploy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/grid.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --nav-height: 54px; 3 | --textcolor: #000; 4 | --hover-bg: #f1f1f1; 5 | --active-bg: #dbdbdb; 6 | font-size: calc(1rem + 0.2vw); 7 | } 8 | 9 | html, 10 | body { 11 | -moz-osx-font-smoothing: grayscale; 12 | -webkit-font-smoothing: antialiased; 13 | font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 14 | Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 15 | letter-spacing: -0.3px; 16 | text-rendering: optimizeLegibility; 17 | } 18 | .main-title { 19 | font-size: 3rem; 20 | font-size: clamp(3.75rem, 7vw, 5.5rem); 21 | font-family: "Inter", sans-serif; 22 | font-weight: 600; 23 | letter-spacing: calc(-0.2rem + -0.05vw); 24 | line-height: 1.1; 25 | max-width: 48rem; 26 | } 27 | 28 | .slide-left-enter, 29 | .slide-right-leave-active { 30 | transform: translate(50%, 0); 31 | opacity: 0; 32 | transition: all 0.25s; 33 | } 34 | .slide-left-leave-active, 35 | .slide-right-enter { 36 | transform: translate(-50%, 0); 37 | opacity: 0; 38 | transition: all 0.25s; 39 | } 40 | .slide-down-enter, 41 | .slide-up-leave-active { 42 | transform: translate(0, 50%); 43 | opacity: 1; 44 | transition: all 0.25s; 45 | } 46 | .slide-down-leave-active, 47 | .slide-up-enter { 48 | transform: translate(0, -50%); 49 | opacity: 1; 50 | transition: all 0.25s; 51 | } 52 | .fade-enter-active, 53 | .fade-leave-active { 54 | transition: opacity 0.5s; 55 | transition-delay: 0.3s; 56 | } 57 | .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { 58 | opacity: 0; 59 | } 60 | .post-content { 61 | max-width: 75ch; 62 | } 63 | 64 | .r { 65 | display: grid; 66 | grid-template-columns: repeat(12, 1fr); 67 | grid-gap: 10px; 68 | } 69 | .no-gap { 70 | grid-gap: 0 !important; 71 | } 72 | .bcg-item { 73 | grid-column: span 6; 74 | padding: 10px; 75 | } 76 | 77 | .full-item { 78 | grid-column: span 12; 79 | padding: 10px; 80 | } 81 | 82 | [class*="c-"] { 83 | grid-column: span 12; 84 | padding: 10px; 85 | } 86 | .cursor-pointer { 87 | cursor: pointer; 88 | } 89 | iframe { 90 | max-width: 100%; 91 | margin: 1rem auto; 92 | } 93 | 94 | /* 600px */ 95 | @media only screen and (min-width: 40rem) { 96 | .c-50 { 97 | grid-column: span 6; 98 | } 99 | .c-25 { 100 | grid-column: span 3; 101 | } 102 | .c-75 { 103 | grid-column: span 9; 104 | } 105 | .c-100 { 106 | grid-column: span 12; 107 | } 108 | 109 | .c-1 { 110 | grid-column: span 1; 111 | } 112 | 113 | .c-2 { 114 | grid-column: span 2; 115 | } 116 | 117 | .c-3 { 118 | grid-column: span 3; 119 | } 120 | 121 | .c-4, 122 | .bcg-item { 123 | grid-column: span 4; 124 | } 125 | 126 | .c-5 { 127 | grid-column: span 5; 128 | } 129 | 130 | .c-6 { 131 | grid-column: span 6; 132 | } 133 | 134 | .c-7 { 135 | grid-column: span 7; 136 | } 137 | 138 | .c-8 { 139 | grid-column: span 8; 140 | } 141 | 142 | .c-9 { 143 | grid-column: span 9; 144 | } 145 | 146 | .c-10 { 147 | grid-column: span 10; 148 | } 149 | 150 | .c-11 { 151 | grid-column: span 11; 152 | } 153 | 154 | .c-12 { 155 | grid-column: span 12; 156 | } 157 | } 158 | 159 | /* 600px - 800px */ 160 | 161 | @media only screen and (max-width: 52rem) and (min-width: 40rem) { 162 | .c-50 { 163 | grid-column: span 6; 164 | } 165 | .c-25 { 166 | grid-column: span 3; 167 | } 168 | .c-75 { 169 | grid-column: span 9; 170 | } 171 | .c-100 { 172 | grid-column: span 12; 173 | } 174 | } 175 | 176 | .feat-wrapper { 177 | width: 100vw; 178 | position: relative; 179 | left: 50%; 180 | right: 50%; 181 | margin-left: -50vw; 182 | margin-right: -50vw; 183 | } 184 | .featured-image { 185 | max-height: 55vh; 186 | border-bottom: 1px solid rgba(119, 119, 119, 0.4); 187 | width: 100%; 188 | object-fit: cover; 189 | object-position: 50% 50%; 190 | } 191 | .container { 192 | max-width: 100vw; 193 | overflow: hidden; 194 | } 195 | 196 | .single .bcg-item { 197 | padding-top: 0 !important; 198 | } 199 | .single { 200 | max-width: 1200px; 201 | margin: 0 auto; 202 | } 203 | .search:focus { 204 | outline: none; 205 | } 206 | .footer__heading { 207 | text-transform: uppercase; 208 | } 209 | 210 | nav .r { 211 | grid-gap: 0; 212 | } 213 | .r.full-height { 214 | grid-gap: 0; 215 | height: calc(100vh - var(--nav-height)); 216 | margin-top: var(--nav-height); 217 | } 218 | .paginated .r.full-height { 219 | grid-gap: 0; 220 | height: calc(100vh - var(--nav-height) - 70px); 221 | margin-top: var(--nav-height); 222 | } 223 | @media only screen and (max-width: 40rem) { 224 | :root { 225 | --nav-height: 104px; 226 | } 227 | 228 | .xs-collapse { 229 | visibility: hidden; 230 | visibility: collapse; 231 | border: 0 !important; 232 | border-color: none !important; 233 | padding: 0 !important; 234 | } 235 | .xs-visible { 236 | visibility: visible; 237 | } 238 | } 239 | -------------------------------------------------------------------------------- /components/BaelFooter.vue: -------------------------------------------------------------------------------- 1 | 63 | 64 | 95 | 96 | 119 | -------------------------------------------------------------------------------- /components/BaelGrid.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 44 | 45 | 55 | -------------------------------------------------------------------------------- /components/BaelHeader.vue: -------------------------------------------------------------------------------- 1 | 32 | 51 | -------------------------------------------------------------------------------- /components/BaelPagination.vue: -------------------------------------------------------------------------------- 1 | 55 | 70 | 71 | -------------------------------------------------------------------------------- /components/BaelSearch.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 52 | -------------------------------------------------------------------------------- /components/FeaturedImage.vue: -------------------------------------------------------------------------------- 1 | 8 | 13 | -------------------------------------------------------------------------------- /components/FullGrid.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 142 | 143 | 199 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | The components directory contains your Vue.js Components. 4 | Nuxt.js doesn't supercharge these components. 5 | 6 | **This directory is not required, you can delete it if you don't want to use it.** 7 | -------------------------------------------------------------------------------- /components/SendGrid.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | -------------------------------------------------------------------------------- /components/SlideOut.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 98 | 260 | -------------------------------------------------------------------------------- /components/SmoothReflow.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /content/blog/2018-02-13-hello-world.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Welcome to Bael, a free Nuxt / NetlifyCMS powered blog template 3 | date: Tuesday February 13th, 2018 4 | thumbnail: /images/uploads/bael-big.jpg 5 | --- 6 | **Bael is a free template that gives you an easy way to start a blog that uses modern technologies like static-site JAMstack architecture, CSS grid layout, responsive design, a serverless function that handles emails newsletter signup with Sendgrid, and fuzzy search — all wrapped up in a brutalist aesthetic.** 7 | 8 | Bael runs using [Nuxt.js](https://nuxtjs.org), [Vue.js](https://vuejs.org), [Netlify CMS](https://netlifycms.org), and is hosted by [Netlify](https://netlify.com). Bael requires an account with Netlify and Github/Gitlab to deploy. A free Sendgrid account and API key is needed to setup the email newsletter signup. 9 | 10 | Made by [jake101](https://jake101.com) 11 | -------------------------------------------------------------------------------- /content/blog/2018-05-06-seattle.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Seattle 3 | date: Sunday May 6th, 2018 4 | thumbnail: /images/uploads/seattle.jpg 5 | category: Photography 6 | --- 7 | 8 | It was fun visiting the Museum of Pop Culture. 9 | -------------------------------------------------------------------------------- /content/blog/2018-06-19-lorem-ipsum.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Lorem Ipsum 3 | date: Tuesday June 19th, 2018 4 | thumbnail: /images/uploads/img_2148.jpg 5 | --- 6 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida neque convallis a cras semper auctor neque. Mauris commodo quis imperdiet massa tincidunt. Sollicitudin tempor id eu nisl nunc mi. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. At urna condimentum mattis pellentesque id nibh tortor id aliquet. Quis enim lobortis scelerisque fermentum dui faucibus in ornare. Mauris commodo quis imperdiet massa tincidunt nunc. Venenatis cras sed felis eget velit. Amet aliquam id diam maecenas ultricies mi. 7 | 8 | ## Mauris nunc congue nisi vitae 9 | 10 | Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Eget felis eget nunc lobortis mattis aliquam. Metus aliquam eleifend mi in nulla posuere sollicitudin. Etiam erat velit scelerisque in dictum non consectetur. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Vitae aliquet nec ullamcorper sit amet risus nullam eget. Varius duis at consectetur lorem donec. Arcu non sodales neque sodales ut. Etiam tempor orci eu lobortis elementum nibh tellus molestie. 11 | 12 | > Duis convallis convallis tellus id interdum velit laoreet id donec ultrices tincidunt! 13 | 14 | Dictum at tempor commodo ullamcorper a lacus. Pellentesque adipiscing commodo elit at imperdiet dui accumsan sit. Vulputate enim nulla aliquet porttitor lacus. Ultricies integer quis auctor elit sed vulputate mi sit. Integer enim neque volutpat ac tincidunt. Odio morbi quis commodo odio aenean sed adipiscing diam donec. Mattis enim ut tellus elementum sagittis vitae et leo duis. Enim ut tellus elementum sagittis vitae et leo duis. Sed lectus vestibulum mattis ullamcorper velit. Malesuada fames ac turpis egestas. Euismod lacinia at quis risus sed vulputate odio. 15 | 16 | Ac tortor vitae purus faucibus ornare suspendisse. Congue nisi vitae suscipit tellus. Lorem ipsum dolor sit amet consectetur adipiscing elit duis. Viverra suspendisse potenti nullam ac tortor vitae purus. Pellentesque sit amet porttitor eget dolor morbi non arcu. Tincidunt id aliquet risus feugiat in. Nunc sed augue lacus viverra vitae congue eu. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Proin libero nunc consequat interdum varius sit amet mattis vulputate. Odio eu feugiat pretium nibh. Amet aliquam id diam maecenas ultricies mi. 17 | 18 | Odio ut sem nulla pharetra diam. Libero id faucibus nisl tincidunt eget nullam non nisi est. Id eu nisl nunc mi ipsum faucibus vitae aliquet. Tellus orci ac auctor augue. Feugiat in ante metus dictum at. Id diam maecenas ultricies mi eget mauris. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Et tortor at risus viverra adipiscing at in tellus. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Purus semper eget duis at tellus. Tortor aliquam nulla facilisi cras. Facilisis leo vel fringilla est ullamcorper eget. Sem viverra aliquet eget sit amet tellus. In hac habitasse platea dictumst. -------------------------------------------------------------------------------- /content/blog/2018-06-19-top-10-reasons-why.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Top 10 Reasons to Use This Theme 3 | date: Tuesday June 19th, 2018 4 | --- 5 | 6 | 1. **It's fast** — Bael runs as a static generated, single page application. After the first page loads, pages after that don't require a full page load. 7 | 8 | 2. **Progressive Web App** ([PWA](https://developers.google.com/web/progressive-web-apps/)) — Bael saves its CSS/JS/HTML and image assets for faster loading, a more reliable offline experience, and the ability to be installed on Android home screens. Bael scores a [perfect 100](https://pwa-directory.appspot.com/pwas/5710428913532928) on the Google Lighthouse PWA audit. 9 | 10 | 3. **Responsive** — The design resizes itself to any device display size using CSS media queries and grid layout. 11 | 12 | 4. **Built-in Search** — find any blog posts with ease. The live search finds misspelled words and instantly updates its results as you type. 13 | 14 | 5. **Email Signup Form** — Use a serverless [signup form](https://bael-theme.jake101.com/blog/2018-07-08-email-newsletter-setup-instructions) and collect emails for your newsletter. Powered by [Sendgrid](https://sendgrid.com) and [Netlify Functions](https://www.netlify.com/docs/functions/). 15 | 16 | 6. **JAMstack** — Better performance, cheap hosting, and higher security are just three of the benefits of building websites using [JAMstack](https://jamstack.org/), a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. 17 | 18 | 7. [**Install Bael**](https://app.netlify.com/start/deploy?repository=https://github.com/jake-101/bael-template) **in one click** — It is easy to have your own blog installed on [Netlify's hosting platform](https://www.netlify.com/features/). You need an account with Netlify and a code repository service like Github or Bitbucket. 19 | 20 | 8. **Customizable** — Set up your own site icon, footer menus, links, and other options in the admin section of your blog. Available as open source, you are free to modify the code for your own use or for everyone's benefit. 21 | 22 | 9. **Brutalist design** — Functional and minimal, Bael is a response to the overly friendly, and overdone trends in web design today. 23 | 24 | 10. **It's free** — Bael is 100% free to get started with. The theme is free, the [CMS](https://www.netlifycms.org/) is free, the web hosting from Netlify is free, Sendgrid is free up to 2,000 subscribers, and Github/Bitbucket offer generous free plans. [Try it out](https://app.netlify.com/start/deploy?repository=https://github.com/jake-101/bael-template) today. 25 | 26 | -------------------------------------------------------------------------------- /content/blog/2018-07-07-markdown-test.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown Test 3 | date: Saturday July 7th, 2018 4 | --- 5 | # An h1 header 6 | 7 | Paragraphs are separated by a blank line. 8 | 9 | 2nd paragraph. _Italic_, **bold**, and `monospace`. Itemized lists 10 | look like: 11 | 12 | * this one 13 | * that one 14 | * the other one 15 | 16 | Note that --- not considering the asterisk --- the actual text 17 | content starts at 4-columns in. 18 | 19 | > Block quotes are 20 | > written like so. 21 | > 22 | > They can span multiple paragraphs, 23 | > if you like. 24 | 25 | Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all 26 | in chapters 12--14"). Three dots ... will be converted to an ellipsis. 27 | Unicode is supported. ☺ 28 | 29 | ## An h2 header 30 | 31 | Here's a numbered list: 32 | 33 | 1. first item 34 | 2. second item 35 | 3. third item 36 | 37 | Note again how the actual text starts at 4 columns in (4 characters 38 | from the left side). Here's a code sample: 39 | 40 | ``` 41 | # Let me re-iterate ... 42 | for i in 1 .. 10 { do-something(i) } 43 | ``` 44 | 45 | As you probably guessed, indented 4 spaces. By the way, instead of 46 | indenting the block, you can use delimited blocks, if you like: 47 | 48 | ``` 49 | define foobar() { 50 | print "Welcome to flavor country!"; 51 | } 52 | ``` 53 | 54 | (which makes copying & pasting easier). You can optionally mark the 55 | delimited block for Pandoc to syntax highlight it: 56 | 57 | ```python 58 | import time 59 | # Quick, count to ten! 60 | for i in range(10): 61 | # (but not *too* quick) 62 | time.sleep(0.5) 63 | print i 64 | ``` 65 | 66 | ### An h3 header 67 | 68 | Now a nested list: 69 | 70 | 1. First, get these ingredients: 71 | * carrots 72 | * celery 73 | * lentils 74 | 2. Boil some water. 75 | 3. Dump everything in the pot and follow 76 | this algorithm: 77 | ``` 78 | find wooden spoon 79 | uncover pot 80 | stir 81 | cover pot 82 | balance wooden spoon precariously on pot handle 83 | wait 10 minutes 84 | goto first step (or shut off burner when done) 85 | ``` 86 | Do not bump wooden spoon or it will fall. 87 | 88 | Notice again how text always lines up on 4-space indents (including 89 | that last line which continues item 3 above). 90 | 91 | Here's a link to [a website](http://foo.bar), to a [local 92 | doc](local-doc.html), and to a [section heading in the current 93 | doc](#an-h2-header). Here's a footnote ""[^1]. 94 | 95 | ""[^1]: Footnote text goes here. 96 | 97 | Tables can look like this: 98 | 99 | size material color 100 | 101 | - - - 102 | 103 | 9 leather brown 104 | 10 hemp canvas natural 105 | 11 glass transparent 106 | 107 | Table: Shoes, their sizes, and what they're made of 108 | 109 | (The above is the caption for the table.) Pandoc also supports 110 | multi-line tables: 111 | 112 | - - - 113 | 114 | keyword text 115 | 116 | - - - 117 | 118 | red Sunsets, apples, and 119 | other red or reddish 120 | things. 121 | 122 | green Leaves, grass, frogs 123 | and other things it's 124 | not easy being. 125 | 126 | - - - 127 | 128 | A horizontal rule follows. 129 | 130 | - - - 131 | 132 | Here's a definition list: 133 | 134 | apples 135 | : Good for making applesauce. 136 | oranges 137 | : Citrus! 138 | tomatoes 139 | : There's no "e" in tomatoe. 140 | 141 | Again, text is indented 4 spaces. (Put a blank line between each 142 | term/definition pair to spread things out more.) 143 | 144 | Here's a "line block": 145 | 146 | ""| Line one 147 | | Line too 148 | | Line tree 149 | 150 | and images can be specified like so: 151 | 152 | ![example image](/images/uploads/14th-factory-collage.jpg) 153 | 154 | Inline math equations go in like so: $""omega = d""phi / dt$. Display 155 | math should get its own line and be put in in double-dollarsigns: 156 | 157 | $$I = ""int ""rho R^{2} dV$$ 158 | 159 | And note that you can backslash-escape any punctuation characters 160 | which you wish to be displayed literally, ex.: ""`foo""`, ""*bar""*, etc. -------------------------------------------------------------------------------- /content/blog/2018-07-08-14th-factory.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 14th Factory 3 | date: Sunday July 8th, 2018 4 | thumbnail: /images/uploads/14th.jpg 5 | category: Photography 6 | --- 7 | 8 | # [The 14th Factory LA](https://the14thfactory.com/) was a monumental, multiple-media, socially engaged art installation conceived by the Hong Kong-based British artist Simon Birch. 9 | 10 | ![14th Factory Collage](/images/uploads/14th-factory-collage.jpg) 11 | -------------------------------------------------------------------------------- /content/blog/2018-07-08-email-newsletter-setup-instructions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Email Newsletter Setup Instructions 3 | date: Sunday July 8th, 2018 4 | thumbnail: /images/uploads/email.png 5 | category: Setup 6 | --- 7 | # Using the Netlify Lambda Function for Sendgrid Mailing List 8 | 9 | A "ready to deploy" serverless mailing list subscription API endpoint using a Netlify function and the [Sendgrid](https://sendgrid.com) API. Collect emails and optionally, a welcome messages with a single `POST` HTTP request. Based on [code from ndethore](https://github.com/ndethore/lambda-sendgrid-mailinglist-api). 10 | 11 | ### Prerequisites 12 | 13 | * Sendgrid Account + Sendgrid API Key 14 | * Create a verified sender 15 | * (Optional) Create a welcome email template and get the ID for it 16 | 17 | The Deploy button will ask for your Sendgrid API keys and other settings upon installation or they can be entered in the Deploy Settings in your Netlify admin panel. Add the following environment variables for the function: 18 | 19 | 20 | 21 | ### Usage 22 | 23 | It is only mandatory to enter your Sendgrid API Key. If you would like to send a welcome email, then fill out the rest of the environment variables. Turn on the email newsletter signup box by going in the Netlify CMS backend and editing the Setup collection. Under Site Info, you will find a switch to turn it on. 24 | 25 | ![Turn on Sendgrid Email Signup](/images/uploads/turn-on-sendgrid.png) 26 | 27 | The signup box will be activated and you are all set! 28 | 29 | ![signup form box](/images/uploads/signup.png) 30 | 31 | Add the query parameter `?welcome_email=true` to email newly added recipients using the specified Sendgrid template ID. 32 | -------------------------------------------------------------------------------- /content/blog/2018-07-08-menu-setup-—-pages-links.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Menu Setup — Pages & Links 3 | date: Sunday July 8th, 2018 4 | thumbnail: /images/uploads/menu-setup.jpg 5 | category: Setup 6 | --- 7 | 8 | # The sidebar navigation in Bael displays the pages collection and the links list inside the Setup collection. 9 | 10 | ![Menu backend](/images/uploads/menubackend.png) 11 | 12 | **Fill these out in the Netlify CMS backend to populate your menu.** The site name is also populated via the Setup collection. 13 | 14 | ![menu animation example](/images/uploads/menu-animation-cropped.gif) -------------------------------------------------------------------------------- /content/blog/2018-07-17-belief-defect-—-new-brvtalism-121-mix.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Belief Defect — New Brvtalism 121 Mix 3 | date: Sunday July 15th, 2018 4 | thumbnail: /images/uploads/belief.jpg 5 | category: Music 6 | --- 7 | > Shrouded in mystery, the [Belief Defect](https://soundcloud.com/beliefdefect) project is hidden behind the idea of 'monothematic delusion', meaning a delusional state that concerns only one particular topic. Given this ideology it is no surprise that [their mix](http://thebrvtalist.com/newbrvtalism121/) is just as enigmatic as the project. 8 | 9 | -------------------------------------------------------------------------------- /content/blog/2018-07-17-my-house-title-sequence.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: My House Title Sequence 3 | date: Tuesday July 17th, 2018 4 | category: Design 5 | --- 6 | 7 | 8 | 9 |

My House Title Sequence from VICE VISUAL STUDIO on Vimeo.

10 | -------------------------------------------------------------------------------- /content/blog/2018-07-17-nicolas-jaar-selected-network-sets.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Nicolas Jaar - Selected Network Sets 3 | date: Tuesday July 17th, 2018 4 | thumbnail: /images/uploads/define.png 5 | category: Music 6 | --- 7 | 8 | ## A playlist of live recordings from Nicolas Jaar. 9 | 10 | 11 | -------------------------------------------------------------------------------- /content/blog/2018-07-29-featured-in.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Featured In 3 | date: Sunday July 29th, 2018 4 | --- 5 | 6 | Thanks to the following websites and newsletters for featuring Bael. If you have a blog using this theme, send me a DM on [Twitter](https://twitter.com/jasperketone) and I'll add you to this page too. 7 | 8 | * [Brutalist Websites](http://brutalistwebsites.com/bael-theme.jake101.com/) 9 | * [Netlify Templates](https://templates.netlify.com/template/nuxt-bael-blog-template/) 10 | * [Web Tools Weekly](https://mailchi.mp/webtoolsweekly/web-tools-262?e=e97afdd3cb) 11 | * [VueJS Feed](https://madewithvuejs.com/bael-blog-template-for-netlify-cms) 12 | -------------------------------------------------------------------------------- /content/blog/2019-03-28-0-1-3-update.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 0.1.3 Update 3 | date: Thursday March 28th, 2019 4 | thumbnail: /images/uploads/bael-0.1.3update.jpg 5 | category: Setup 6 | --- 7 | **Bael has been upgraded to use NetlifyCMS 2.0+, Nuxt 2.5.1, and has other small fixes.** Check the [changelog](https://bael-theme.jake101.com/page/changelog) for more info. 8 | 9 | It's been awhile since I've put some work into the theme and thanks to [BRS999](https://github.com/BRS999) and [andresmrm](https://github.com/andresmrm) for their contributions. 10 | -------------------------------------------------------------------------------- /content/blog/2019-05-26-0-2-1-update-new-alt-layout.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 0.2.1 Update - New Alt Layout 3 | date: Sunday May 26th, 2019 4 | thumbnail: /images/uploads/jake-peterson-1530918-unsplash.jpg 5 | category: Setup 6 | --- 7 | **It has been requested a few times to add a full-page, featured image layout to the theme.** Version 0.2.1 adds this in and the setting for it is in the `Setup>Site Info` section in the `/admin` panel. I've setup an example blog, [Bael Alt](https://bael-template-alt-layout.netlify.com/), to showcase how it looks. It mostly uses photographs from my [Unsplash page](https://unsplash.com/@jake101) but there are a couple from my recent trip to Tokyo too. 8 | 9 | ## What's New 10 | 11 | * Upgrade to Nuxt 2.7.1 12 | * Added Full Page "Alt" Layout (In the `/admin` panel, go to `Setup>Site Info` and set 'Full Page Alt Layout' to true to turn it on.) 13 | * Pagination fix 14 | * Fixed security vulnerability with webpack analyzer 15 | -------------------------------------------------------------------------------- /content/blog/2019-07-18-mentioned-by.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mentioned by 3 | date: Thursday July 18th, 2019 4 | thumbnail: /images/uploads/twitter-glitched-7-18-2019-6-26-49-pm.png 5 | category: Internet 6 | --- 7 | [Post a tweet](http://twitter.com/home?status=Bael%20Theme%20is%20a%20great%20theme%20for%20%40netlifycms%20https%3A%2F%2Fbael-theme.jake101.com%20via%20@jasperketone) about Bael if you use it and like it. 8 | 9 | 11 | 12 | 14 | -------------------------------------------------------------------------------- /content/blog/2020-09-06-rufus-du-sol-joshua-tree.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Rufus Du Sol Live in Joshua Tree 3 | date: Sunday September 6th, 2020 4 | thumbnail: /images/uploads/desert.jpg 5 | category: Music 6 | --- 7 | 8 | -------------------------------------------------------------------------------- /content/category/art.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Art" 3 | } -------------------------------------------------------------------------------- /content/category/design.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Design" 3 | } -------------------------------------------------------------------------------- /content/category/internet.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Internet" 3 | } -------------------------------------------------------------------------------- /content/category/music.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Music" 3 | } -------------------------------------------------------------------------------- /content/category/photography.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Photography", 3 | "description": "A visual log of experiences, emotions, and memories" 4 | } -------------------------------------------------------------------------------- /content/category/setup.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Setup" 3 | } -------------------------------------------------------------------------------- /content/page/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | date: 2018-07-07T03:00:50-07:00 4 | thumbnail: /images/uploads/bael-big.jpg 5 | --- 6 | # Bael is a free blogging theme to use with Netlify CMS. It has a utilitarian, brutalist design that lends itself to written content and full width images. 7 | 8 | Available on [Github](https://github.com/jake-101/bael-template) 9 | MIT Open Source License -------------------------------------------------------------------------------- /content/page/changelog.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Changelog 3 | date: 2019-03-28T21:15:57.000Z 4 | thumbnail: /images/uploads/changelog.jpg 5 | --- 6 | 7 | ## 1.0 beta - September 2020 8 | 9 | #### New Features 10 | 11 | * Upgraded to Nuxt 2.14.4 and [@nuxt/content](https://content.nuxtjs.org/) module. Static deployment, automatically imported components, and use of new fetch hook. 12 | * Responsive text using root font size inspired by [Every Layout](https://every-layout.dev/rudiments/units/). 13 | * Much easier to read and better functioning code 14 | * Improved Component Structure 15 | * Use of CSS variables instead of JS/CSS workarounds 16 | * Site search engine now uses built-in Loki.js DB from @nuxt/content and no longer uses Fuse.js 17 | * Improvements to content area styling 18 | * [Inter](https://rsms.me/inter) is now the default font 19 | * Content can be edited by using @nuxt/content's built-in editor in dev env and not use NetlifyCMS at all. 20 | * Intersection Observer mix-in available for use + polyfill 21 | * Full-width featured image with no margins 22 | 23 | #### Breaking Changes 24 | 25 | * Blog and Page content are no longer JSON files and have been converted into Markdown. 26 | 27 | ## 0.2.1 - May 24, 2018 28 | 29 | #### New Features 30 | 31 | * Added Full Page "Alt" Layout (In the /admin panel, go to Setup>Site Info and set 'Full Page Alt Layout' to true to turn it on.) Check out the [example blog](https://bael-template-alt-layout.netlify.com/) to see how it looks. 32 | 33 | #### Fixes 34 | 35 | * Upgrade to Nuxt 2.7.1 36 | * Pagination fix 37 | * Removed Webpack Bundle Analyzer due to security vulnerability 38 | 39 | - - - 40 | 41 | ## 0.1.3 - March 28, 2019 42 | 43 | #### Fixes 44 | 45 | * Upgrade to [Nuxt 2.5.1](https://github.com/nuxt/nuxt.js/releases/tag/v2.5.1) 46 | * Upgrade to [NetlifyCMS 2.0](https://www.netlifycms.org/docs/update-the-cms-version/) 47 | * Removed hard coded Yarn version requirement 48 | * Added API_URL build var to netlify.toml to fix issue [with help from BRS999 ](https://github.com/jake-101/bael-template/issues/2) 49 | * Change Node 10 requirement to 9 50 | * Changed npm in package.json to use yarn 51 | * Updated packages 52 | 53 | - - - 54 | 55 | ## 0.1.2 - July 16, 2018 56 | 57 | #### New Features 58 | 59 | * Categories 60 | * Pagination 61 | * Loading State w/ SVG spinner 62 | * Show Icon in Menu 63 | 64 | #### Fixes 65 | 66 | * Breadcrumb flexbox fix 67 | * Upgraded dependencies 68 | * Compressed included images 69 | * Blockquote appearance 70 | * Paragraph margin-bottom 71 | 72 | - - - 73 | 74 | ## 0.1.1 - Initial Version 75 | 76 | * CSS Grid based layout 77 | * Responsive design 78 | * Featured Image 79 | * Blog collection type 80 | * Page collection type 81 | * Client-side fuzzy search 82 | * Newsletter signup Netlify Function 83 | 84 | - - - 85 | 86 | ## Roadmap 87 | 88 | * Different sorting options 89 | * More styling settings 90 | * Deploy with Vercel 91 | * More CSS Variables 92 | * Dark Mode 93 | * RSS Feed 94 | * Share buttons 95 | * New starter content for blank template 96 | * and more? -------------------------------------------------------------------------------- /content/page/inspired-by.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Inspired By 3 | date: 2018-07-07T03:02:10-07:00 4 | --- 5 | 6 | [Ghostly](https://ghostly.com/) 7 | [Balenciaga](https://www.balenciaga.com/us) 8 | [Ssense](https://www.ssense.com/) 9 | [Brutalism is Back](https://www.nytimes.com/2016/10/06/t-magazine/design/brutalist-architecture-revival.html) 10 | [The Ten: Nike Air Presto x Off-White](https://www.nike.com/us/en_us/c/go/the-ten) 11 | [Mostyn Griffith](http://www.mostyngriffith.com/) 12 | [Are.na](http://are.na/) 13 | [Fuzzco Nuxt Template](https://github.com/fuzzco/fuzznuxt) 14 | [Every Layout](https://every-layout.dev/) 15 | [Inter](https://rsms.me/inter) 16 | -------------------------------------------------------------------------------- /content/setup/connect.json: -------------------------------------------------------------------------------- 1 | { 2 | "connectlinks": [ 3 | { 4 | "name": "Twitter", 5 | "url": "https://twitter.com/jasperketone" 6 | }, 7 | { 8 | "name": "LinkedIn", 9 | "url": "https://www.linkedin.com/in/jake-peterson-101/" 10 | }, 11 | { 12 | "name": "Github", 13 | "url": "https://github.com/jake-101" 14 | }, 15 | { 16 | "name": "Unsplash", 17 | "url": "https://unsplash.com/@jake101" 18 | } 19 | ] 20 | } -------------------------------------------------------------------------------- /content/setup/info.json: -------------------------------------------------------------------------------- 1 | { 2 | "sitename": "Bael", 3 | "sitedescription": "A fashionable brutalist blog template using Netlify CMS and Nuxt.js.", 4 | "siteicon": "/images/uploads/icon.png", 5 | "showmenu": true, 6 | "emailsignup": true, 7 | "altlayout": false, 8 | "menu": [ 9 | { 10 | "name": "jake101", 11 | "position": "1", 12 | "link": "https://www.jake101.com/" 13 | }, 14 | { 15 | "name": "Nuxt.js", 16 | "position": "2", 17 | "link": "https://www.nuxtjs.org/" 18 | }, 19 | { 20 | "name": "Netlify", 21 | "position": "3", 22 | "link": "https://www.netlify.com/" 23 | } 24 | ] 25 | } -------------------------------------------------------------------------------- /directives/intersect.js: -------------------------------------------------------------------------------- 1 | import _throttle from 'lodash/throttle' 2 | 3 | // throttled call handler for stagger 4 | const classHandler = (entries) => { 5 | entries.forEach((entry) => { 6 | if (entry.isIntersecting) { 7 | entry.target.classList.add('intersected') 8 | } 9 | }) 10 | } 11 | const throttledHandler = _throttle(classHandler, 200) 12 | 13 | function inserted(el, binding) { 14 | const modifiers = binding.modifiers || {} 15 | const value = binding.value 16 | const { handler, options } = 17 | typeof value === 'object' ? value : { handler: value, options: {} } 18 | 19 | const observer = new IntersectionObserver((entries = [], observer) => { 20 | if (!el._observe) return // Just in case, should never fire) 21 | 22 | // If is not quiet or has already been 23 | // initted, invoke the user callback 24 | if (!modifiers.quiet || el._observe.init) { 25 | const isIntersecting = Boolean( 26 | entries.find((entry) => entry.isIntersecting) 27 | ) 28 | 29 | if (handler) { 30 | handler(entries, observer, isIntersecting) 31 | } else { 32 | classHandler(entries) 33 | } 34 | } 35 | 36 | // If has already been initted and 37 | // has the once modifier, unbind 38 | if (el._observe.init && modifiers.once) unbind(el) 39 | // Otherwise, mark the observer as initted 40 | else el._observe.init = true 41 | }, options) 42 | 43 | el._observe = { init: false, observer } 44 | 45 | el.classList.add('wiv') 46 | observer.observe(el) 47 | } 48 | 49 | function unbind(el) { 50 | if (!el._observe) return 51 | 52 | el._observe.observer.unobserve(el) 53 | delete el._observe 54 | } 55 | 56 | export const Intersect = { 57 | inserted, 58 | unbind, 59 | } 60 | 61 | export default Intersect 62 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | This directory contains your Application Layouts. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/views#layouts 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 9 | 21 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | -------------------------------------------------------------------------------- /middleware/title.js: -------------------------------------------------------------------------------- 1 | export default function ({ store }) { 2 | store.commit('SET_CURRENT', {}) 3 | store.commit('SET_PAGINATION', {}) 4 | if (store.state.menuIsActive === !false) { 5 | console.log('menu') 6 | 7 | 8 | store.commit('setMenuState', false) 9 | } 10 | 11 | } -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "dist" 3 | command = "yarn run generate && yarn run build:api" 4 | functions = "./functions" 5 | [build.environment] 6 | NODE_VERSION = "12" 7 | YARN_FLAGS = "--no-ignore-optional" 8 | [template.environment] 9 | API_URL = "https://bael-theme.jake101.com" 10 | SENDGRID_API_KEY = "Your Sendgrid API Key (required for newsletter signup box)" 11 | SENDGRID_WELCOME_SENDER_EMAIL = "Sendgrid Welcome Sender Email" 12 | SENDGRID_WELCOME_SENDER_NAME = "Sendgrid Welcome Sender Name" 13 | SENDGRID_WELCOME_TEMPLATE_ID = "Sendgrid Welcome Email Template ID" -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | const siteInfo = require('./content/setup/info.json'); 2 | const pkginfo = require('./package.json') 3 | const webpack = require('webpack') 4 | 5 | module.exports = { 6 | target: 'static', 7 | components: true, 8 | mode: "universal", 9 | /* 10 | ** Headers of the page 11 | */ 12 | transition: { mode: "in-out" }, 13 | env: { 14 | API_URL: process.env.API_URL, 15 | BAEL_VERSION: pkginfo.version 16 | }, 17 | head: { 18 | title: siteInfo.sitename, 19 | meta: [ 20 | { charset: 'utf-8' }, 21 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 22 | { hid: 'description', name: 'description', content: siteInfo.sitedescription } 23 | 24 | ], 25 | link: [ 26 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, 27 | { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@200;400;600;700;800&display=swap' } 28 | ] 29 | }, 30 | css: ["@/assets/grid.css", "@/assets/content.scss", "bf-solid/dist/solid.latest.css"], 31 | // icon: { 32 | // iconSrc: `${siteInfo.siteicon}` 33 | // }, 34 | /* 35 | ** Customize the progress bar color 36 | */ 37 | loading: { color: '#3B8070' }, 38 | modules: ['@nuxt/content', '@nuxtjs/pwa', '@nuxtjs/axios'], 39 | content: { 40 | fullTextSearchFields: ['title', 'description', 'category'] 41 | }, 42 | manifest: { 43 | name: siteInfo.sitename, 44 | short_name: siteInfo.sitename, 45 | description: siteInfo.sitedescription, 46 | lang: 'en' 47 | }, 48 | workbox: { 49 | runtimeCaching: [ 50 | { 51 | urlPattern: '/images/uploads/.*', 52 | handler: 'cacheFirst', 53 | strategyOptions: { 54 | cacheName: 'image-cache', 55 | cacheExpiration: { 56 | maxEntries: 100, 57 | maxAgeSeconds: 86400 58 | } 59 | } 60 | } 61 | ] 62 | }, 63 | 64 | /* 65 | ** Route config for pre-rendering 66 | */ 67 | router: { 68 | scrollBehavior: function (to, from, savedPosition) { 69 | return { x: 0, y: 0 } 70 | }, 71 | middleware: ['title'] 72 | }, 73 | plugins: [ 74 | { 75 | src: "~/plugins/browser", 76 | mode: 'client' 77 | }, { 78 | src: "~/plugins/moment", 79 | mode: 'client' 80 | }, { 81 | src: "~/plugins/lazyload", 82 | mode: 'client' 83 | } 84 | ], 85 | /* 86 | ** Build configuration 87 | */ 88 | 89 | build: { 90 | extractCSS: false, 91 | html: { 92 | minify: { 93 | minifyCSS: false, 94 | minifyJS: false 95 | } 96 | }, 97 | plugins: [ 98 | new webpack.ProvidePlugin({ 99 | _get: 'lodash/get', 100 | }) 101 | ], 102 | /** Uncomment this if you need to use the full Vue build */ 103 | // extend(config) { 104 | // config.resolve.alias['vue'] = 'vue/dist/vue.common' 105 | // } 106 | }, 107 | } 108 | 109 | 110 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bael-cms-template", 3 | "version": "1.0 dev", 4 | "description": "A fashionable brutalist blog template using Netlify CMS and Nuxt.js", 5 | "author": "jake101 ", 6 | "scripts": { 7 | "dev": "nuxt", 8 | "serve": "nuxt", 9 | "build": "nuxt build --no-lock", 10 | "build:api": "netlify-lambda build src/sendgrid", 11 | "start": "nuxt start", 12 | "generate": "nuxt generate --no-lock", 13 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 14 | "precommit": "npm run lint" 15 | }, 16 | "dependencies": { 17 | "@nuxt/content": "^1.8.1", 18 | "@nuxtjs/axios": "^5.3.1", 19 | "@nuxtjs/pwa": "^3.0.2", 20 | "bf-solid": "^2.10.6", 21 | "intersection-observer": "^0.11.0", 22 | "lodash": "^4.17.20", 23 | "netlify-lambda": "^2.0.0", 24 | "node-sass": "^4.9.2", 25 | "nuxt": "^2.0.0", 26 | "vue-lazyload": "^1.3.0", 27 | "vue-moment": "^4.0.0", 28 | "vue-smooth-reflow": "^0.1.12" 29 | }, 30 | "devDependencies": { 31 | "@sendgrid/client": "^6.3.0", 32 | "string.prototype.includes": "^2.0.0", 33 | "sass-loader": "^7.0.0", 34 | "babel-eslint": "^8.2.6", 35 | "eslint": "^4.15.0", 36 | "eslint-friendly-formatter": "^3.0.0", 37 | "eslint-loader": "^1.7.1", 38 | "eslint-plugin-vue": "^4.7.0", 39 | "prettier": "^2.1.1" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the .vue files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing 8 | -------------------------------------------------------------------------------- /pages/blog/_slug.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 39 | 40 | 83 | -------------------------------------------------------------------------------- /pages/categories.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 37 | 38 | 67 | -------------------------------------------------------------------------------- /pages/category/_slug.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 38 | 39 | 68 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 55 | 56 | 85 | -------------------------------------------------------------------------------- /pages/p/_page.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 59 | 60 | 89 | -------------------------------------------------------------------------------- /pages/page/_slug.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 25 | 26 | 69 | -------------------------------------------------------------------------------- /plugins/browser.js: -------------------------------------------------------------------------------- 1 | import { resizeHandler, mutationHandler, addObserverIfNavBarAvailable } from '~/plugins/dom-handlers' 2 | import Intersect from '~/directives/intersect' 3 | import _throttle from 'lodash/throttle' 4 | import Vue from 'vue' 5 | 6 | // plugin 7 | export default async ({ store, route }, inject) => { 8 | 9 | require('intersection-observer') 10 | require('string.prototype.includes') 11 | 12 | Vue.directive('intersect', Intersect) 13 | 14 | // setup dom listeners 15 | // ~16ms is 60fps 16 | window.addEventListener( 17 | 'resize', 18 | _throttle(() => resizeHandler(store), 16) 19 | ) 20 | 21 | // setup navigation mutation observer 22 | // @link: https://stackoverflow.com/questions/40398054/observe-on-mutationobserver-parameter-1-is-not-of-type-node 23 | 24 | let mutObserver = new MutationObserver(mCallback); 25 | 26 | function mCallback(mutations) { 27 | for (let mutation of mutations) { 28 | mutationHandler(store, mutation) 29 | } 30 | } 31 | 32 | // start 33 | resizeHandler(store) 34 | addObserverIfNavBarAvailable(mutObserver) 35 | 36 | 37 | 38 | } 39 | -------------------------------------------------------------------------------- /plugins/dom-handlers.js: -------------------------------------------------------------------------------- 1 | // window resize handler 2 | export const resizeHandler = store => { 3 | const navbar = document.getElementById('navbar'); 4 | const navHeight = navbar.clientHeight; 5 | store.commit('browser/SET_NAVHEIGHT', navHeight) 6 | document.documentElement.style.setProperty('--nav-height', store.state.browser.navHeight + "px"); 7 | 8 | store.commit('browser/SET_WIN_WIDTH', window.innerWidth) 9 | store.commit('browser/SET_WIN_HEIGHT', window.innerHeight) 10 | 11 | const docHeight = Math.max( 12 | document.body.scrollHeight, 13 | document.body.offsetHeight, 14 | document.documentElement.clientHeight, 15 | document.documentElement.scrollHeight, 16 | document.documentElement.offsetHeight 17 | ) 18 | store.commit('browser/SET_DOC_HEIGHT', docHeight) 19 | } 20 | 21 | export const mutationHandler = (store, mutation) => { 22 | const navHeight = mutation.target.clientHeight; 23 | store.commit('browser/SET_NAVHEIGHT', navHeight) 24 | 25 | document.documentElement.style.setProperty('--nav-height', store.state.browser.navHeight + "px"); 26 | 27 | } 28 | 29 | export const addObserverIfNavBarAvailable = mutObserver => { 30 | const node = document.getElementById('navbar'); 31 | if (!node) { 32 | //The node we need does not exist yet. 33 | //Wait 400ms and try again 34 | window.setTimeout(addObserverIfNavBarAvailable, 400); 35 | return; 36 | } 37 | 38 | const mutOptions = { 39 | attributes: true, 40 | childList: true, 41 | } 42 | mutObserver.observe(node, mutOptions); 43 | } 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /plugins/lazyload.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueLazyload from 'vue-lazyload' 3 | 4 | Vue.use(VueLazyload) 5 | -------------------------------------------------------------------------------- /plugins/moment.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | Vue.use(require('vue-moment')) -------------------------------------------------------------------------------- /src/sendgrid/app.js: -------------------------------------------------------------------------------- 1 | const client = require("@sendgrid/client"); 2 | 3 | function addSendgridRecipient(client, email) { 4 | return new Promise((fulfill, reject) => { 5 | const data = [ 6 | { 7 | email: email } 8 | ]; 9 | const request = { 10 | method: "POST", 11 | url: "/v3/contactdb/recipients", 12 | body: data 13 | }; 14 | 15 | client 16 | .request(request) 17 | .then(([response, body]) => { 18 | console.log(response.statusCode); 19 | console.log(body); 20 | fulfill(response); 21 | // cb(null, response); 22 | }) 23 | .catch(error => reject(error)); 24 | }); 25 | } 26 | 27 | function sendWelcomeEmail(client, email, senderEmail, senderName, templateID) { 28 | return new Promise((fulfill, reject) => { 29 | const data = { 30 | from: { 31 | email: senderEmail, 32 | name: senderName 33 | }, 34 | reply_to: { 35 | email: senderEmail 36 | }, 37 | personalizations: [ 38 | { 39 | to: [ 40 | { 41 | email: email 42 | } 43 | ] 44 | } 45 | ], 46 | template_id: templateID 47 | }; 48 | 49 | const request = { 50 | method: "POST", 51 | url: "/v3/mail/send", 52 | body: data 53 | }; 54 | 55 | client 56 | .request(request) 57 | .then(([response, body]) => { 58 | console.log(response.statusCode); 59 | console.log(body); 60 | fulfill(response); 61 | }) 62 | .catch(error => reject(error)); 63 | }); 64 | } 65 | 66 | exports.handler = function(event, context, callback) { 67 | const { 68 | SENDGRID_API_KEY, 69 | SENDGRID_WELCOME_SENDER_EMAIL, 70 | SENDGRID_WELCOME_SENDER_NAME, 71 | SENDGRID_WELCOME_TEMPLATE_ID 72 | } = process.env; 73 | const body = JSON.parse(event.body); 74 | const email = body.email; 75 | const welcomeEmail = event.queryStringParameters.welcome_email === "true"; 76 | 77 | client.setApiKey(SENDGRID_API_KEY); 78 | addSendgridRecipient(client, email) 79 | .then((response, body) => { 80 | if (welcomeEmail) { 81 | sendWelcomeEmail( 82 | client, 83 | email, 84 | SENDGRID_WELCOME_SENDER_EMAIL, 85 | SENDGRID_WELCOME_SENDER_NAME, 86 | SENDGRID_WELCOME_TEMPLATE_ID 87 | ) 88 | .then(response => callback(null, { statusCode: response.statusCode, body: email + " added" }) ) 89 | .catch(err => callback(err, null)); 90 | } else { 91 | callback(null, { statusCode: response.statusCode, body: "" }); 92 | } 93 | }) 94 | .catch(err => callback(err, null)); 95 | }; -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | This directory contains your static files. 4 | Each file inside this directory is mapped to /. 5 | 6 | Example: /static/robots.txt is mapped as /robots.txt. 7 | 8 | More information about the usage of this directory in the documentation: 9 | https://nuxtjs.org/guide/assets#static 10 | 11 | **This directory is not required, you can delete it if you don't want to use it.** 12 | -------------------------------------------------------------------------------- /static/_headers: -------------------------------------------------------------------------------- 1 | /sw.js 2 | Cache-Control: no-cache 3 | /images/* 4 | Cache-Control: public, max-age=3600000 5 | /favicon.ico 6 | Cache-Control: public, max-age=3600000 7 | /icon.png 8 | Cache-Control: public, max-age=3600000 9 | /_nuxt/* 10 | Cache-Control: public, immutable, max-age=36000000 -------------------------------------------------------------------------------- /static/admin/config.yml: -------------------------------------------------------------------------------- 1 | backend: 2 | name: git-gateway 3 | accept_roles: #optional - accepts all users if left out 4 | - admin 5 | - editor 6 | media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads 7 | public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads 8 | collections: 9 | - name: "blog" # Used in routes, e.g., /admin/collections/blog 10 | label: "Blog" # Used in the UI 11 | folder: "content/blog" # The path to the folder where the documents are stored 12 | create: true # Allow users to create new documents in this collection 13 | slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md 14 | format: 'frontmatter' 15 | sort: "date:desc" # Default is title:asc 16 | fields: # The fields for each document, usually in front matter 17 | - {label: "Title", name: "title", widget: "string"} 18 | - {label: "Publish Date", name: "date", widget: "datetime", format: "dddd MMMM Do, YYYY"} 19 | - {label: "Featured Image", name: "thumbnail", widget: "image", required: false} 20 | - {label: "Category", name: "category", widget: "relation", collection: "blogcategories", searchFields: ["title"], valueField: "title", displayFields: ["title"], required: false} 21 | - {label: "Body", name: "body", widget: "markdown"} 22 | - name: "page" # Used in routes, e.g., /admin/collections/blog 23 | label: "Pages" # Used in the UI 24 | folder: "content/page" # The path to the folder where the documents are stored 25 | create: true # Allow users to create new documents in this collection 26 | slug: "{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md 27 | format: 'frontmatter' 28 | fields: # The fields for each document, usually in front matter 29 | - {label: "Title", name: "title", widget: "string"} 30 | - {label: "Publish Date", name: "date", widget: "datetime"} 31 | - {label: "Featured Image", name: "thumbnail", widget: "image", required: false} 32 | - {label: "Body", name: "body", widget: "markdown"} 33 | - label: "Setup" 34 | name: "setup" 35 | files: 36 | - label: "Site Info" 37 | name: "info" 38 | format: 'json' 39 | file: "content/setup/info.json" 40 | fields: 41 | - {label: Site Name, name: sitename, widget: string} 42 | - {label: Site Description, name: sitedescription, widget: string} 43 | - {label: Site Icon (Must be 512x512 or larger square PNG), name: siteicon, widget: image,default: "/icon.png"} 44 | - {label: Show Icon in Menu, name: showmenu, widget: boolean} 45 | - {label: Email Newsletter Signup, name: emailsignup, widget: boolean} 46 | - {label: Full Page Alt Layout, name: altlayout, widget: boolean} 47 | - {label: Link Color, name: linkcolor, widget: color} 48 | - label: Menu Links 49 | name: menu 50 | widget: list 51 | fields: 52 | - {label: Name, name: name, widget: string} 53 | - {label: Position, name: position, widget: string} 54 | - {label: Link, name: link, widget: string} 55 | - label: "Connect" 56 | name: "connect" 57 | format: 'json' 58 | file: "content/setup/connect.json" 59 | fields: 60 | - label: 'Links' 61 | name: 'connectlinks' 62 | widget: 'list' 63 | fields: 64 | - {label: Link Name, name: name, widget: string} 65 | - {label: URL, name: url, widget: string} 66 | - label: 'Categories' 67 | name: 'blogcategories' 68 | folder: "content/category" # The path to the folder where the documents are stored 69 | create: true # Allow users to create new documents in this collection 70 | slug: "{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md 71 | format: 'json' 72 | fields: 73 | - {label: Title, name: title, widget: string} 74 | - {label: Position, name: position, widget: string} 75 | - {label: Description, name: description, widget: string, required: false} 76 | -------------------------------------------------------------------------------- /static/admin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Content Manager 7 | 8 | 9 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/favicon.ico -------------------------------------------------------------------------------- /static/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/icon.png -------------------------------------------------------------------------------- /static/images/uploads/14th-factory-collage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/14th-factory-collage.jpg -------------------------------------------------------------------------------- /static/images/uploads/14th.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/14th.jpg -------------------------------------------------------------------------------- /static/images/uploads/bael-0.1.3update.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/bael-0.1.3update.jpg -------------------------------------------------------------------------------- /static/images/uploads/bael-big.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/bael-big.jpg -------------------------------------------------------------------------------- /static/images/uploads/baeltype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/baeltype.png -------------------------------------------------------------------------------- /static/images/uploads/belief.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/belief.jpg -------------------------------------------------------------------------------- /static/images/uploads/changelog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/changelog.jpg -------------------------------------------------------------------------------- /static/images/uploads/define.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/define.png -------------------------------------------------------------------------------- /static/images/uploads/desert.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/desert.jpg -------------------------------------------------------------------------------- /static/images/uploads/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/email.png -------------------------------------------------------------------------------- /static/images/uploads/fling.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/fling.jpg -------------------------------------------------------------------------------- /static/images/uploads/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/icon.png -------------------------------------------------------------------------------- /static/images/uploads/img_2148.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/img_2148.jpg -------------------------------------------------------------------------------- /static/images/uploads/jake-peterson-1530918-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/jake-peterson-1530918-unsplash.jpg -------------------------------------------------------------------------------- /static/images/uploads/menu-animation-cropped.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/menu-animation-cropped.gif -------------------------------------------------------------------------------- /static/images/uploads/menu-setup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/menu-setup.jpg -------------------------------------------------------------------------------- /static/images/uploads/menubackend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/menubackend.png -------------------------------------------------------------------------------- /static/images/uploads/seattle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/seattle.jpg -------------------------------------------------------------------------------- /static/images/uploads/signup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/signup.png -------------------------------------------------------------------------------- /static/images/uploads/turn-on-sendgrid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/turn-on-sendgrid.png -------------------------------------------------------------------------------- /static/images/uploads/twitter-glitched-7-18-2019-6-26-49-pm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jake-101/bael-template/105620c6e5ea6fdd9268a8fcaa201dc7c865d832/static/images/uploads/twitter-glitched-7-18-2019-6-26-49-pm.png -------------------------------------------------------------------------------- /static/sw.js: -------------------------------------------------------------------------------- 1 | // THIS FILE SHOULD NOT BE VERSION CONTROLLED 2 | 3 | // https://github.com/NekR/self-destroying-sw 4 | 5 | self.addEventListener('install', function (e) { 6 | self.skipWaiting() 7 | }) 8 | 9 | self.addEventListener('activate', function (e) { 10 | self.registration.unregister() 11 | .then(function () { 12 | return self.clients.matchAll() 13 | }) 14 | .then(function (clients) { 15 | clients.forEach(client => client.navigate(client.url)) 16 | }) 17 | }) 18 | -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | This directory contains your Vuex Store files. 4 | Vuex Store option is implemented in the Nuxt.js framework. 5 | Creating a index.js file in this directory activate the option in the framework automatically. 6 | 7 | More information about the usage of this directory in the documentation: 8 | https://nuxtjs.org/guide/vuex-store 9 | 10 | **This directory is not required, you can delete it if you don't want to use it.** 11 | -------------------------------------------------------------------------------- /store/browser.js: -------------------------------------------------------------------------------- 1 | 2 | export const state = () => { 3 | return { 4 | docHeight: 675, 5 | navHeight: 54, 6 | winHeight: 1080, 7 | winWidth: 1920 8 | } 9 | } 10 | 11 | export const mutations = { 12 | SET_WIN_HEIGHT: (state, height) => { 13 | state.winHeight = height 14 | }, 15 | SET_NAVHEIGHT: (state, height) => { 16 | state.navHeight = height 17 | }, 18 | SET_WIN_WIDTH: (state, width) => { 19 | state.winWidth = width 20 | }, 21 | SET_DOC_HEIGHT: (state, height) => { 22 | state.docHeight = height 23 | } 24 | } 25 | 26 | export const actions = { 27 | 28 | } 29 | 30 | export const getters = { 31 | breakpoint(state) { 32 | if (state.winWidth <= 750) return 'mobile' 33 | return 'desktop' 34 | }, 35 | } 36 | -------------------------------------------------------------------------------- /store/index.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | export const state = () => { 4 | return { 5 | menuIsActive: false, 6 | menuInitial: true, 7 | info: {}, 8 | current: {}, 9 | categories: [], 10 | pagination: false, 11 | totalPages: null, 12 | settings: {}, 13 | 14 | } 15 | } 16 | export const actions = { 17 | 18 | async fetchInfo({ commit }, $content) { 19 | try { 20 | const info = await $content("setup", "info").fetch(); 21 | const connect = await $content("setup", "connect").fetch(); 22 | const categories = await $content("category").fetch(); 23 | commit('SET_INFO', info) 24 | commit('SET_CONNECT', connect.connectlinks) 25 | commit('SET_CATEGORIES', categories) 26 | } catch (e) { 27 | const error = 'Initial Setup Error: ' + e.message + e 28 | console.warning(error) 29 | commit('SET_ERROR', error); 30 | } 31 | } 32 | 33 | 34 | 35 | 36 | 37 | } 38 | 39 | export const mutations = { 40 | // NEW MUTATIONS 41 | SET_INFO(state, info) { 42 | state.info = info 43 | }, 44 | SET_ERROR(state, error) { 45 | state.info = error 46 | }, 47 | SET_CONNECT(state, data) { 48 | state.connect = data 49 | }, 50 | SET_CURRENT(state, data) { 51 | state.current = data 52 | }, 53 | SET_CATEGORIES(state, data) { 54 | state.categories = data 55 | }, 56 | SET_PAGINATION(state, data) { 57 | state.pagination = data 58 | }, 59 | SET_TOTALPAGES(state, data) { 60 | state.totalPages = data 61 | }, 62 | 63 | setMenuState(state, menuIsActive) { 64 | state.menuIsActive = menuIsActive 65 | }, 66 | 67 | toggleMenuState(state) { 68 | state.menuIsActive = !state.menuIsActive 69 | }, 70 | 71 | } 72 | 73 | 74 | 75 | 76 | --------------------------------------------------------------------------------