Create nuxtjs.yml

Update nuxtjs.yml

Update Vue component

Move Vuejs Application to Nuxt + style

Move Vuejs Application to Nuxt + style

Remove page

Cache

Delete cache

Update style

Update favicon

Added Markdown + Start of article

Added syntax highlight for python and bash

First article

Remove Log

Remove draft

Change build artefact

Remove cache + unused info

Restore cache

Test prerender

SSR true

Test prerender

Prerender /

Test with pages

Test pages articles

Added prerender route

Added prerender route

Test articles

SSR false

Test preset github_pages

Update CI

Debug CI

Fix npm install

.github/workflows/nuxtjs.yml

@@ -0,0 +1,59 @@
+# Sample workflow for building and deploying a Nuxt site to GitHub Pages
+#
+# To get started with Nuxt see: https://nuxtjs.org/docs/get-started/installation
+#
+name: Deploy Nuxt site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      - name: Install dependencies
+        run: npm install 
+      - name: Debug
+        run: ls -al
+      - name: Static HTML export with Nuxt
+        run: npm run build -- --preset github_pages
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./.output/public
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -33,3 +33,14 @@ test-results/
 playwright-report/
 
 .vscode/*
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Logs
+logs
+*.log

README.md

@@ -1,64 +1,75 @@
-# vue-tailwind
+# Nuxt 3 Minimal Starter
 
-This template should help get you started developing with Vue 3 in Vite.
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 
-## Recommended IDE Setup
+## Setup
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+Make sure to install the dependencies:
 
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
+```bash
+# npm
+npm install
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
+# pnpm
+pnpm install
 
-## Project Setup
+# yarn
+yarn install
 
-```sh
-npm install
+# bun
+bun install
 ```
 
-### Compile and Hot-Reload for Development
+## Development Server
 
-```sh
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
 npm run dev
-```
 
-### Type-Check, Compile and Minify for Production
+# pnpm
+pnpm run dev
 
-```sh
-npm run build
-```
+# yarn
+yarn dev
 
-### Run Unit Tests with [Vitest](https://vitest.dev/)
-
-```sh
-npm run test:unit
+# bun
+bun run dev
 ```
 
-### Run End-to-End Tests with [Playwright](https://playwright.dev)
+## Production
 
-```sh
-# Install browsers for the first run
-npx playwright install
+Build the application for production:
 
-# When testing on CI, must build the project first
+```bash
+# npm
 npm run build
 
-# Runs the end-to-end tests
-npm run test:e2e
-# Runs the tests only on Chromium
-npm run test:e2e -- --project=chromium
-# Runs the tests of a specific file
-npm run test:e2e -- tests/example.spec.ts
-# Runs the tests in debug mode
-npm run test:e2e -- --debug
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
 ```
 
-### Lint with [ESLint](https://eslint.org/)
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
 
-```sh
-npm run lint
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
 ```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <Head>
+        <title>.: Hackandpwned :.</title>
+        <Meta http-equiv="cache-control" content="no-cache" />
+        <Meta http-equiv="expires" content="0" />
+        <Meta http-equiv="pragma" content="no-cache" />
+    </Head>
+    <NuxtLayout>
+        <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>
+<style>
+@import url("~/assets/css/main.css");
+</style>

assets/css/main.css

@@ -0,0 +1,130 @@
+/* Basic Layout and Background */
+body, html {
+    height: 100%;
+    margin: 0;
+    background-color: #000;
+    color: #fff;
+    font-family: 'Courier New', monospace;
+    background-size: 100% 2px, 3px 100%;
+}
+
+/* Text and Link Styling */
+a {
+    color: #ccc;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #fff;
+    border-bottom: 1px solid #fff;
+}
+
+/* Header and Navigation Styling */
+header {
+    padding: 10px 20px;
+    background-color: #000; /* maintain the background across all major elements */
+    text-align: center;
+}
+
+nav ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+nav ul li {
+    display: inline;
+    margin-right: 10px;
+}
+
+/* Nav for mobile Hamburger */
+@media (max-width: 850px) {
+    nav ul {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    nav ul li {
+        display: block;
+        margin: 5px 0;
+    }
+}
+
+/* Main Content Area */
+main {
+    margin: 20px auto;
+    max-width: 850px;
+}
+
+/* Main for mobile */
+@media (max-width: 850px) {
+    main {
+        margin: 1.5em;
+    }
+}
+
+/* Article and Text Styling */
+article {
+    margin: 20px 0;
+    padding: 10px;
+    border-bottom: 1px solid #fff;
+}
+
+article h1::before {
+    content: '.| ';
+}
+
+article h1::after {
+    content: ' |.';
+}
+
+article h3::before {
+    content: '> ';
+}
+
+article h2::before {
+    content: '// '; 
+}
+
+article h4::before {
+    content: '>> ';
+}
+
+h1 {
+    font-size: 1.5em;
+}
+
+h2 {
+    font-size: 1.25em;
+}
+
+/* Footer Styling */
+footer {
+    text-align: center;
+    box-sizing: border-box;
+    padding: 10px 20px;
+    background-color: #000;
+    color: #fff;
+    width: 100%;
+}
+
+/* Blinking Cursor Effect */
+@keyframes blink {
+    50% {
+        border-color: transparent;
+    }
+}
+
+input[type="text"] {
+    font-family: 'Courier New', monospace;
+    font-size: 1em;
+    color: #fff;
+    background: none;
+    border: none;
+    border-bottom: 2px solid #fff;
+    animation: blink 1s step-end infinite;
+}
+
+:not(pre) > code {
+    color: #0BF40F;
+}

components/AppFooter.vue

@@ -0,0 +1,5 @@
+<template>
+    <footer>
+        <p>&copy; 2024 Hackandpwned. All rights reserved.</p>
+    </footer>
+</template>