Features
- SSG with Nuxt v3 front-end in NuxtContent Markdown
- NuxtContent v3 Collection Implementation
- Custom Controls - NuxtContent and Vue
- Shared functions
- Tailwind CSS Prose, Grid, and DarkMode
- Git Deployment and Cookie-free Web Analytics
Definitions
- SSR Server Side Rendering - Server runs the JavaScript, fetches data, modifies the HTML document before sending to the browser to render.
- CSR Client Side Rendering - Server sends the HTML scaffold document and the JavaScript to the browser. The browser runs the JavaScript, fetches data, and renders the updated HTML document.
- Universal Render - (aka dynamic rendering, or hydrated rendering) is both SSR and CSR.
- SSG Static Site Generation - Generate the site and upload the pre-rendered site to a static web hosting service
- SPA Web Apps/Single Page Apps - single page app like Facebook, Twitter/X
- Hydration is making a static page interactive in the browser. You 'hydrate' a static page, when the client JavaScript is run and document re-rendered.
Folders
| Folder | Description |
|---|
/ | root folder |
/app | Nuxt.js client folder (v4 compatibility) |
/server | Nuxt.js server folder |
/app/pages | Nuxt.js client pages root folder |
/content | NuxtContent Markdown pages folder |
/app/layouts | Nuxt.js layouts folder |
/app/components | Vue.js custom components folder |
/app/components/content | NuxtContent components folder |
/public | Images and files served live |
/shared/utils | JavaScript shared (client&server) |
Files
| Options and Script Files | Description |
|---|
.gitignore | Git ignore options file |
nuxt.config.ts | Nuxt.js options file |
content.config.ts | NuxtContent options file |
tailwind.config.js | Tailwind CSS options |
package.json | NPM package dependency file |
buildspec.yml | AWS CodeBuild script |
tsconfig.json | Typescript options file (not used) |
LICENSE.txt | License file for repo |
README.md | README file for git repo |
| Site Files | Description |
|---|
error.vue | Vue page for ERRORS |
/app/app.vue | Vue.js application entry |
/app/pages/*.vue | Nuxt.js pages |
/content/*.md | NuxtContent Content pages |
/content/license.md | License page for website |
/app/layouts/*.vue | Nuxt.js layouts components |
/app/components/*.vue | Vue.js custom components |
/app/components/content | NuxtContent custom components |
/app/router.options.js | Vue.js router options file |
/shared/utils/*.[js,ts] | JavaScript shared (client&server) |
Content Pages
at /content
| Page | File | Description/Purpose |
|---|
| Home | /index.md | show code/pre blocks with styling |
| About | /about.md | no frills content page |
| Articles Home | /articles/index.md | longer form content |
| Articles | /articles/*.md | a set of articles |
| Git Repo | gitprojects.md | shows external API usage |
| Blog Home | blog/index.md | blog list |
| Blog Posts | blog/202x/*.md | a set of posts |
NuxtContent Controls
at /app/components/content
| Custom Control File | Description/Purpose |
|---|
CollectionList.vue | parent list of posts, used in both articles and blog |
FigureCaption.vue | A centered full-width block image with a caption |
GitList.vue | retrieves a list of GitHub repos |
MonkInset.vue | Floats an image or text with content flowing around it. |
TocLinks.vue | Creates a table of contents for page. |
Vue Controls
at /app/components
| Custom Control File | Description/Purpose |
|---|
ColorModeSelector.vue | control to toggle dark modes |
Footer.vue | bottom menu |
TopMenu.vue | top menu |
Dependencies
from /package.json
"dependencies": {
"@nuxt/content": "^3.1.1",
"@stefanobartoletti/nuxt-social-share": "^1.2.0",
"nuxt": "^3.6.0",
"nuxt-cloudflare-analytics": "^1.0.8",
"remark-unwrap-images": "^4.0.0",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@nuxt/devtools": "^0.0.1",
"@nuxtjs/color-mode": "^3.3.3",
"@nuxtjs/tailwindcss": "^6.11.4",
"@tailwindcss/typography": "^0.5.13"
}
}
Essentially, the dependencies are:
- Nuxt.js v3
- Nuxt Content v3
- Nuxt Devtools - (for debugging)
- Nuxt Color Mode - (for dark modes)
- Nuxt Tailwind CSS - style
- Tailwind Prose and Typography - Content Readability
- Nuxt Social Share buttons
- Nuxt CloudFlare Analytics - Cookie-free CloudFlare Analytics for static site
