Init

Author: ferrucc-io

.env.example

@@ -0,0 +1,4 @@
+NEXT_PUBLIC_STRAPI_API_URL=https://your.herokuapp.com
+NEXT_PUBLIC_ASSETS_DOMAIN=example-s3-bucket.com
+NEXT_PUBLIC_APP_HOST=http://localhost:3000
+NEXT_PUBLIC_MARKETING_HOST=https://june.so

.eslintrc

@@ -0,0 +1,7 @@
+{
+  "rules": {
+    "react/react-in-jsx-scope": 0,
+    "jsx-a11y/anchor-is-valid": 0
+  },
+  "extends": ["react-app", "prettier"]
+}

.gitignore

@@ -0,0 +1,120 @@
+############################
+# OS X
+############################
+
+.DS_Store
+.AppleDouble
+.LSOverride
+.Spotlight-V100
+.Trashes
+._*
+
+
+############################
+# Linux
+############################
+
+*~
+
+
+############################
+# Windows
+############################
+
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+$RECYCLE.BIN/
+*.cab
+*.msi
+*.msm
+*.msp
+.env
+
+
+############################
+# Packages
+############################
+
+*.7z
+*.csv
+*.dat
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.seed
+*.so
+*.swo
+*.swp
+*.swn
+*.swm
+*.out
+*.pid
+
+
+############################
+# Logs and databases
+############################
+
+.tmp
+*.log
+*.sql
+*.sqlite
+*.sqlite3
+
+
+############################
+# Misc.
+############################
+
+*#
+ssl
+.idea
+nbproject
+public/uploads/*
+!public/uploads/.gitkeep
+
+############################
+# Node.js
+############################
+
+lib-cov
+lcov.info
+pids
+logs
+results
+node_modules
+.node_history
+
+
+############################
+# Tests
+############################
+
+testApp
+coverage
+
+############################
+# Strapi
+############################
+
+exports
+.cache
+build
+
+# Custom
+
+.vscode
+.next
+.env.*
+!.env.example
+
+frontend/out/*

.node-version

@@ -0,0 +1 @@
+12.19.0

.prettierrc

@@ -0,0 +1,15 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "singleAttributePerLine": false,
+  "bracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 100,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}

README.md

@@ -0,0 +1,87 @@
+# Weekly Changelog Blog
+
+Set-up a blog and share what you ship as easy as 1-2-3!
+
+![screenshot](/changelog.png)
+
+A Next.js blog starter project built with MDX and Chakra UI. Fully-customizable and open source, so don't hesitate to add new features and report bugs!
+
+## Features
+
+- A stylish changelog
+- Celebrate your team's achievements - with team credits on each post
+- Easy-to-use admin panel
+
+## Getting started
+
+The easiest way to try this starter is to run it locally on your computer.
+
+First, you'll need to create your own copy of this starter. You can do so by clicking the ["Use this template"](https://github.com/ferrucc-io/weekly-changelog/generate) button on GitHub and filling out the [form](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-from-a-template).
+
+Once you've cloned the repository, make sure you're in the `frontend` directory:
+
+```bash
+cd frontend
+```
+
+Install dependencies and start the Next.js server:
+
+```bash
+# Using yarn
+yarn install
+yarn dev
+
+# Using npm
+npm install
+npm run dev
+```
+
+If you want to change the default environment variables, create a `.env.local` file like this:
+
+```
+cp .env.local.example .env.local
+```
+
+## Routes
+
+- `/pages/:pageNumber` - displays paginated articles
+- `/` - redirects to `/pages/0`
+- `/changelogs/:id` - displays one article
+
+## File structure
+
+```bash
+frontend
+├─ bin             # Scripts
+├─ components      # Reusable components
+│  ├─ core
+│  ├─ mdx-layout.tsx
+│  └─ ...
+├─ lib              # Types, theme, utilities, services
+├─ pages
+│  ├─ changelogs    # MDX articles
+│  ├─ page
+│  │  └─ [page].tsx # Paginated articles
+│  ├─ _app.tsx
+│  └─ _middleware.ts
+└─ ...
+```
+
+## Writing articles
+
+To write a new blog post, create a new `.mdx` file in the `/pages/changelogs` directory.
+
+### Anatomy of an MDX article
+
+MDX is a superset of markdown that lets you write JSX directly in your markdown files. It is a powerful way to add dynamic interactivity, and embed components within your content, helping you to bring your pages to life.
+
+![mdx-preview](/mdx-preview.png)
+
+Learn more 👉 [Next.js: Using MDX](https://nextjs.org/docs/advanced-features/using-mdx), [Using MDX](https://mdxjs.com/docs/using-mdx/)
+
+## Branding customization
+
+Most of the branding elements can be found in `<Navbar>` and `<Footer>` components. To customize these components, update the code in these directories:
+
+- [`frontend/components/core/navbar/index.tsx`](https://github.com/juneHQ/weekly-changelog/tree/master/frontend/components/core/navbar)
+- [`frontend/components/core/footer/index.tsx`](https://github.com/juneHQ/weekly-changelog/tree/master/frontend/components/core/footer)

bin/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "bin",
+  "version": "1.0.0",
+  "description": "",
+  "main": "strapi-to-mdx.mjs",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node strapi-to-mdx.mjs"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "axios": "^1.2.1"
+  }
+}

bin/strapi-to-mdx.mjs

@@ -0,0 +1,81 @@
+import axios from "axios";
+import { exec } from "child_process";
+import fs from "fs";
+
+export const MDX_OUTPUT_FOLDER = `../pages/changelogs`; // in relative path
+
+/**
+ * Fetches articles from strapi and converts them to MDX files
+ *
+ * Usage:
+ * ```bash
+ * # Run the following in the terminal
+ * cd bin && node strapi-to-mdx.mjs
+ * ```
+ */
+async function strapiToMdx() {
+  const response = await axios.get(
+    "https://content.june.so/articles?status=published&_sort=publishedAt:DESC"
+  );
+
+  if (response.status === 200) {
+    const articles = response.data;
+
+    const promises = articles.map((article) => {
+      const meta = {
+        slug: article.slug,
+        publishedAt: article.publishedAt,
+        title: article.title,
+        headerImage: article.image.url,
+        authors: article.authors.map((author) => ({
+          name: author.name,
+          description: author.bio,
+          avatarUrl: author.picture.url,
+        })),
+      };
+
+      const content = [
+        'import { MdxLayout } from "components/mdx-layout.tsx";',
+        "",
+        `export const meta = ${JSON.stringify(meta)}`,
+        "",
+      ];
+
+      const markdown = article.content.replace(/<br>/gi, "");
+      content.push(markdown);
+      content.push("");
+      content.push(
+        "export default ({ children, ...rest }) => <MdxLayout meta={meta} {...rest}>{children}</MdxLayout>;"
+      );
+      content.push("");
+
+      if (!fs.existsSync(MDX_OUTPUT_FOLDER)) {
+        fs.mkdirSync(MDX_OUTPUT_FOLDER);
+      }
+
+      const outputPath = `${MDX_OUTPUT_FOLDER}/${article.slug}.mdx`;
+
+      return new Promise((resolve, reject) => {
+        fs.writeFile(outputPath, content.join("\n"), (error) => {
+          if (error) {
+            reject(`Failed to write ${article.slug} - ${error}`);
+          } else {
+            resolve(`Written ${article.slug}`);
+          }
+        });
+      });
+    });
+
+    const results = await Promise.allSettled(promises);
+    results.forEach((result) => {
+      console.log(`${result.status} - ${result.value}`);
+    });
+    console.log("\nDone!");
+    console.log("\nFormatting result with prettier...");
+    exec(`npx prettier --write ${MDX_OUTPUT_FOLDER}`, (error, stdout, stderr) => {
+      console.log(stdout);
+    });
+  }
+}
+
+strapiToMdx();