Merge pull request #3 from smngvlkz/my-setup-branch

Pull Request for Next.js Cape Software Community Blog Project

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/workflows/build_and_export.yml

@@ -0,0 +1,55 @@
+name: Next.js Capedev Site
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Clear npm cache
+        run: npm cache clean --force
+
+      - name: Install Dependencies
+        run: npm install --legacy-peer-deps
+
+      - name: Run ESLint
+        run: npm run lint
+        continue-on-error: true
+
+      - name: Build Next.js Site
+        run: npm run build
+
+      - name: Verify Build Output
+        run: ls -la out
+
+      - name: Print Directory Structure
+        run: find out
+
+      - name: Check HTML Files
+        run: cat out/index.html
+
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: out

.github/workflows/nextjs.yml

@@ -0,0 +1,92 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js 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: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        with:
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: |
+          if [ "${{ steps.detect-package-manager.outputs.manager }}" = "npm" ]; then
+            npm install --legacy-peer-deps
+          else
+            ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+          fi
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  # 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

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "editor.codeActionsOnSave": {
+        "source.organizeImports": "explicit"
+    }
+}

README.md

@@ -1 +1,88 @@
-# capedevs.github.io
+## Next.js Cape Software Community Blog Project
+
+This is a project aimed at migrating the Cape Software Community website to a static website. It is being built with [Next.js](https://nextjs.org/), a popular React framework for building web applications. The blog posts are written in Markdown and stored in the `content` directory.
+
+The design and layout of the project are intentionally kept simple and modular to make it easy for other contributors to add features of their own. Additionally, the use of Markdown for blog posts allows anyone to easily add new posts to the blog.
+
+## Features
+
+- Markdown to HTML conversion: Blog posts are written in Markdown, which is converted to HTML for display on the web page.
+- Static generation: The blog uses Next.js's static generation feature to generate the HTML at build time.
+- Styling: The blog uses Tailwind CSS for styling.
+
+## Getting Started
+
+To get started with this project, follow these steps:
+
+1. Clone the repository:
+
+```bash
+git clone https://github.com/yourusername/yourrepository.git# Next.js Blog Project
+```
+
+2. Navigate into the project directory:
+
+```bash
+cd capedevs
+```
+
+3. Install the dependencies:
+
+```bash
+npm install --legacy-peer-deps
+# or
+yarn install
+# or
+pnpm install
+# or
+bun install
+```
+
+4. Run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+5. Open http://localhost:3000 with your browser to see the result.
+   You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+## Adding a New Post
+
+To add a new post, create a new Markdown file in the `content` directory. The frontmatter of the file should contain a `posts` array with the `title`, `description`, `date`, and `content` of each post.
+
+
+## Customizing Styles
+
+To customize the styles of the blog posts, modify the CSS classes in the `pages` directory in `posts/[slug].js` 
+
+## Built With
+
+- Next.js
+- Tailwind CSS
+- gray-matter
+- unified
+- remark-parse
+- remark-html
+
+## TODO
+
+This project is still under development. Here are some features that are planned for future releases:
+
+- **Search Feature**: Implement a search feature to allow users to easily find specific posts.
+- **Authentication**: Set up user authentication to allow users to log in and interact with the blog in a personalized way.
+- **Subscription Feature**: Allow users to subscribe and unsubscribe to the blog to receive updates on new posts.
+- **And More**: More features and improvements are planned for future releases. Stay tuned!
+
+Contributions to help implement these features are welcome!
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE.md file for details.
+

components/Footer.js

@@ -0,0 +1,32 @@
+export default function Footer() {
+  return (
+    <footer className="w-full py-6 bg-white shadow-t-md mt-auto">
+      <div className="container mx-auto text-center px-4">
+        <div className="text-xl font-bold mb-2">Cape Software Community</div>
+        <p className="text-gray-600 mb-6">
+          The Cape Software Community hosts a monthly meetup in Cape Town, South
+          Africa
+        </p>
+        {/*<div className="flex justify-center mb-4">
+          <input
+            type="email"
+            placeholder="[email protected]"
+            className="px-4 py-2 border border-gray-300 rounded-l focus:outline-none"
+          />
+          <button className="px-4 py-2 bg-blue-500 text-white rounded-r">
+            <Image
+              src="/user-logo.png"
+              alt="User logo"
+              className="h-4 w-4 mr-2 inline-block align-middle"
+            />
+            Submit
+          </button>
+        </div>
+  */}
+        <p className="text-gray-500">
+          &copy; 2024 Cape Software Community. All rights reserved.
+        </p>
+      </div>
+    </footer>
+  );
+}