elegantframework/elegant-cli

✨ Build SEO-friendly websites, super fast full-stack web applications, and much more with Elegant. 💜 Built with Next.js, TipTap, Tailwind CSS, and more.

elegant-cli's Issues

Elegant CMS -- As a developer, I would like to create a Header component for the admin area.

As a developer, I would like to create a Header component for the admin area.

• Combine current headers
• Keep current users picture
• Make header dark mode compatiable.

The unit test pre checks are not running and reporting their status back on PR's from contributors.

Describe the bug
The GitHub Action unit test pre checks are not running and reporting their status back on PR's from contributors.

To Reproduce
Steps to reproduce the behavior:

1. Submit a PR on the main branch.
2. Scroll down.
3. Status should post back within a few minutes at max.

Expected behavior
Post a passing or failing status from the GitHub Action.

Screenshots

Additional context
The GitHub Action that should run on a PR is found here: source\elegant\.github\workflows\jest.yml

As a developer, I would like to add an "arrow" to any external URL's; to signal to users that a url likes to an external website

As a developer, I would like to add an "arrow" to any external URL's; to signal to users that a url likes to an external website.

See Vercel's header with external links that open in a new page:

As a developer, I would like to have a `/config` directory to act as the center point of all Elegant configuration.

As a developer, I would like to have a /config directory to act as the center point of all Elegant configuration.

The /config namespace will take lead from the Laravel project: https://github.com/laravel/laravel/tree/10.x/config

• Create /config
• Create app.ts config file
• Update any env vars being referenced to just ref this file instead

As a content creator, I would like an Editor Panel to create new pages much more rapidly.

Background / Motivation

Currently if you want to create new pages or content within Elegant, you have to manually create new Markdown pages.

I, myself am planning on adding a basic CMS editor when some of the more basic v2.* features have been completed.

Having an editor editor panel will allow creators to create new pages much more rapidly, as well as opening the door up for non technical users to being using Elegant for their website needs.

@rabisnaqvi has also suggested including an admin panel/portal in #44.

Idea

Vercel already has a number of documented basic editor panels that can be integrated into Next.js, so I'd like to not recreate anything we don't have to.

Tina

Implementation 1:

Use an open source CMS panel, or create our own if we can't an existing solution.

Just use Tina if we can self host, not be attached to any of their services, and extend their existing code.

Other things

Can we build a simple CMS panel that can then be hosted easily and securly on Vercel or Netlify?

Do we need to include an auth provider like Firebase or Next-Auth?

Originally posted by @Bowens20832 in #49

I have an Idea that in package.json it should have node dependencies and others related to it like this so that it supports 14 to all updated versions of node, you can add a `>=` sign before it for e.g: `"@types/node": ">=14.17.3",`

I have an Idea that in package.json it should have node dependencies and others related to it like this so that it supports 14 to all updated versions of node, you can add a >= sign before it for e.g: "@types/node": ">=14.17.3",
??

Originally posted by @Shiv-2712 in #78 (reply in thread)

As a content creator, I want to include a Facebook(Meta) Pixel for user engangement insights and tracking.

As a content creator, I want to include a Facebook(Meta) Pixel for user engangement insights and tracking.

You can find a simple guide from Vercel on how to fully integrate the Meta Pixel within Next.js for event and page handling.

From my initial research, the "fb:app_id" rich snippet data point that is included in the Next-Seo component is no longer used by Facebook. This .env var and Next-SEO code should be removed.

• Delete reference to NEXT_PUBLIC_FACEBOOK_APP_ID in .env.example file
• Delete process.env.NEXT_PUBLIC_FACEBOOK_APP_ID code within Elegant.
• Remove Config('app.fb') from line 168 of source\elegant\src\pages_app.js
• Add the pixel .env var as mentioned in the guide.
• Add the complete pixel functionality as mentioned in the guide.

The Video component breaks the layout of the documentation on mobile.

Describe the bug
The new video player component breaks the layout on mobile devices. This is caused by the video player not scaling down in size on mobile.

To Reproduce
Steps to reproduce the behavior:

1. Go to Elegant Installation
2. Open Developer tools if not on a mobile device.
3. Scroll down to the video component
4. See how the mobile layout on the page is broken.

Expected behavior
The CSS should keep the video player within the mobile layout.

Screenshots

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
The fix is probably a simple Tailwind class on a mobile device.

Upgrade Next.js to version 13.

I would like to simply bump the current version of Next.js to the latest version.

I don't want to do anything related to the new server vs. client components.

The scope of this ticket will be to only upgrade to version 13, so that all of our dependencies are up to date.

Originally posted by @Bowens20832 in #112

Add Sitemap

Please add native sitemap support out of the box for SEO purposes.

As a developer, I would like the navigation and authors config to be under the '/config' namespace.

As a developer, I would like the navigation and authors config to be under the '/config' namespace.

The config namespace serves as the central configuration handler within Elegant.

• Create navigation.ts file
• Create authors type (Optional)
• Create authors.ts file
• Delete navs folder

As a developer, I would like to upgrade to React 18

As a developer, I would like to upgrade to React 18

• Upgrade tests to support React 18
• Upgrade to React 18

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Elegant CMS -- As a developer, I would like to remove the header from the log in page.

The current log in screen looks like below:

The desired log in page should be clean and simple like the one pictured below:

It should also include a like to return to the web applications main url as pictured in the screenshot.

As a developer or content creator, how would you describe Elegant in your own words?

Describe the bug
The top friction point and overall feedback I have received for the work that we have done with the Elegant project is that it still lacks overall documentation, and people don't understand what we have built from looking at the home page.

Expected behavior
I want to update the homepage content, and subsequent docs to be more clear of what we are building.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

As a developer or content creator, how would you describe this Elegant project in your own words to a friend or colleage?

Create Elegant-UI Package

The Elegant package is starting to get bloated with each release and update.

To reduce the bloat, I propose to break each core Elegant feature into separate package namespaces under the "packages" directory.

elegant-cli
├── .github
├── tests
├── packages
├── package.json
├── README.md
└── ...

Under packages would be:

packages
├── elegant-core
├── elegant-cms
├── elegant-docs
├── base-theme
├── docs-theme
├── blog-theme
├── resume-theme
├── portfolio-theme
├── event-theme

This change would migrate the existing code under source/elegant into packages/elegant.

Originally posted by @Bowens20832 in #124

The Elegant install script should automatically install package dependencies

The install script should run npm install before finishing. There isn't a reason why a user would need to run this themselves.

• Add npm install to init script.
• Update console output message to either say run npm run dev or npm run build.
• Update install documentation page to no longer include the npm install step,

As a developer, I want to include a `.env.test` file during the project creation.

As a developer, I want to include a .env.test file during the project creation.

This test environment file will be used by Jest during component unit testing.

As a content creator, I want my videos that I include on my pages to have rich snippet meta data.

As a content creator, I want to my videos that I include on pages to have rich snippet meta data.

• Include video metadata in Next-Seo

As a developer, I want to upgrade MDX-Loader from version 1, to version 2

As a developer, I would like to upgrade MDX-Loader from version 1, to version 2.

This package needs a major upgrade, which has a breaking change.

Resolving this major upgrade will allow us to also mirgate up to Node 18, Next 18, and React 18 :)

As a developer, I want to include a canonical meta like to our app url for optimal SEO results.

As I developer, I want to add a canonical SEO meta url tag to tell Google and other crawlers which url is the main app url. This helps Google to determine what is duplicate content, and what is not.

The meta seo canolical tag is not appearing in the head

The meta seo canolical tag is not appearing in the head as it should.

Remove the Remark and Rehype markdown loading utilities from next.config.mjs.

As part of the Elegant version migration, we will no longer need to use Remark and Rehype at build time.

Instead, we are loading content via a [slug] route, and converting the markdown to HTML on the server side.

This upgrade simplifies a number of things inside the core code, and should improve build times on large projects.

As a developer, I want to create a new Video component to be used on pages.

• Create a new Video component in Storybook using Video.js. https://videojs.com/
• Write Jest tests
• Create Video Json schema.org object for a video loaded in the video player. https://github.com/garmeeh/next-seo#video-1

As a content creator, I would like a "Brand" page, showing my logos and resources.

As a content creator, I would like a "Brand" page, showing my logos and resources.

• Create a "/brand" page.
• Add Assests Section
• Display all of Elegant's logo
• Offer simple links to download an image
• Link back to our trademark policy
• Fix Legal layout.. It breaks brand page

Good examples to follow:
https://vercel.com/design/brands
https://tailwindcss.com/brand

The newsletter signup form is not showing properly on blog posts

Update the documentation to reduce developer friction.

From a chat with an Elegant developer " I have a question question if I have to contribute into your project then I was supposed to fork your repo and clone it or I have to directly use npm i elegant-cli --tag innovators".

• Update contribution guide to really explain how to get started developing core Elegant features
• Update install docs to explain different ways of installing, and what their purpose is.

Create Elegant-CMS package

The Elegant package is starting to get bloated with each release and update.

To reduce the bloat, I propose to break each core Elegant feature into separate package namespaces under the "packages" directory.

elegant-cli
├── .github
├── tests
├── packages
├── package.json
├── README.md
└── ...

Under packages would be:

packages
├── elegant-core
├── elegant-cms
├── elegant-docs
├── base-theme
├── docs-theme
├── blog-theme
├── resume-theme
├── portfolio-theme
├── event-theme

This change would migrate the existing code under source/elegant into packages/elegant.

Originally posted by @Bowens20832 in #124

Elegant CMS -- Set all admin CMS pages to 'no-index'.

As a developer, I want to set all sensitive Admin panel pages to 'no-index'.

We don't want Google, or other crawlers attempting to index login pages, or admin only content.

• Set no-index using SEO components.

As a developer, I need an 'Admin' page layout component for a content creation portal.

I am actively R&Ding #49, and I have a solution.

The new content creation portal needs a different header that has different nav items for site admin users.

The current header and content portal do not jive.

Removing items and playing with Outstatic really seem to create something 'elegant'.

• Create admin page layout.

Add `thumbnailUrl` and `uploadDate` to Video component to fix Google Search Console error.

Describe the bug
The Video component is missing a thumbnail URL and upload date values within the schema data that throws an error in the Google Search Console.

Here is an example of a proper video item:

<html>
  <head>
    <title>Introducing the self-driving bicycle in the Netherlands</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "VideoObject",
      "name": "Introducing the self-driving bicycle in the Netherlands",
      "description": "This spring, Google is introducing the self-driving bicycle in Amsterdam, the world's premier cycling city. The Dutch cycle more than any other nation in the world, almost 900 kilometres per year per person, amounting to over 15 billion kilometres annually. The self-driving bicycle enables safe navigation through the city for Amsterdam residents, and furthers Google's ambition to improve urban mobility with technology. Google Netherlands takes enormous pride in the fact that a Dutch team worked on this innovation that will have great impact in their home country.",
      "thumbnailUrl": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "uploadDate": "2016-03-31T08:00:00+08:00",
      "duration": "PT1M54S",
      "contentUrl": "https://www.example.com/video/123/file.mp4",
      "embedUrl": "https://www.example.com/embed/123",
      "interactionStatistic": {
        "@type": "InteractionCounter",
        "interactionType": { "@type": "WatchAction" },
        "userInteractionCount": 5647018
      },
      "regionsAllowed": "US,NL"
    }
    </script>
  </head>
  <body>
  </body>
</html>

As a developer, I would like a config directory, along with config setting files.

As a developer, I would like a seperate /config directory under the root project. This config folder will serve as the center off all Elegant app configuration.

This directory, and the config files contained within it will serve as the bootstrap point for all config values set within .env files.

• Create /config folder
• Create app.ts file
• Create navigation.ts file
• Create authors type
• Create authors.ts file
• Update any existing process.env vars to use new config code.
• Refactor out the App config code from the utils folder.
• Migrate exisiting navigation config code to the config folder, from the navs folder
• Delete navs folder

Write a guide on changing the logo; and how to create an SVG logo using Figma

I would like to replace the svg paths for the letters 'elegant' at the top left of the screen:

This is defined in Logo.tsx as individual letters.

Is there a tool I can use to produce svg paths for letters of my own?

Originally posted by @keybits in #126

Storybook is not starting properly

Storybook is not starting properly after creating a new project with the init script.

• Fix Storybook Polyfill issue.

As a developer, I would like 3 columns with multiple navigation lists in the footer, cloning the function of Stripe.com's footer.

As a developer, I would like 3 columns with multiple navigation lists in the footer. The splash footer would be similar in function to Stripe.com's footer, and would allow stacking of multiple footer list items.

The current Elegant footer just uses a basic for loop to loop over each navigation list section, and will create a new column.

This was great for a starter app, but we are now pushing 20 public pages, and do not have clear navigation paths to the news pages. To solve this, we need to add more navigation content to the footer, but still maintaining the Elegant look.

• Refactor Splash Footer to accept column_one, column_two, and column_three props.
• Allow for each column to appect an object that contains multiple lists with an h2 title.
• Refactor code and types to accept this new style of creating navigation lists

As a developer, I would like to dynamically load Markdown files under the 'pages/blog/' route.

As part of the Elegant version 3 migration, I would like to move the content under 'pages/blog' to '_content/' and then dynamically load the markdown files on the 'pages/blog/[slug]' route.

As a developer I would like to rename the 'source' directory to 'packages'.

I want to rename the top-level source directory to packages. This naming convention will be consistent with other popular open-source frontend projects that developers are already familiar with.

From

elegant-cli
├── .github
├── integrations
├── scripts
├── source
└── ...

To

elegant-cli
├── .github
├── integrations
├── scripts
├── packages
└── ...

• Update any tests
• Update any scripts that depend on 'source'

As a developer, I want to create frontend components in isolation. Add Storybook JS

As a developer, I want to build and maintain frontend components in isolation from the frontend Next.js application.

Add Storybook JS to accomplish this.

As a developer, I want to upgrade Node from version 16, to version 18

As a developer, I want to upgrade Node from version 16, to version 18.

Upgrading to Node 18 will resolve the issues mentioned below : )

Hello,

I'm facing a problem where the terminal doesn't stop after executing the npx elegant-init command. As a result, the command-line interface (CLI) doesn't appear, preventing me from running subsequent commands.

Node.js Version - 18.16.0
Platform - Win 11

Originally posted by @Shiv-2712 in #78

Create a "Community" docs page

Create a "Community" docs page.

Running `npx elegant-init` not doing anything!

Hi,

I am trying to setup this CMS on my PC, but the command npx elegant-init doesn't do anything in terminal, just starts a new session or something, but I do not see anything created.

As a developer, I would like to store my CMS content under a '/_content' directory at the root level of my project.

I would like a '/_content' directory at the root level of my Elegant application.

The blog and documentation markdown content will live here; As opposed to the current '/src/page/docs/' and '/src/page/blog/' directories.

As a developer, I would like to dynamically load Markdown files under the 'pages/docs/' route.

As part of the Elegant version 3 migration, I would like to move the content under 'pages/docs' to '_content/' and then dynamically load the markdown files on the 'pages/docs/[slug]' route.

As a website owner, I would like to have a security.txt file included in my website.

As a website owner, I would like to have a security.txt file in the root of my application. This file is similar to the robots.txt file, and will serve as a landing point for security researchers and any other people who may stumble into a security issue.

The security.txt file will hold basic info about how someone may report a security issue.

This topic has come up recently alot online, and is now a requirement of all Dutch government website. Though the Dutch government may be a small market for Elegant currently, we have ambitions of being able to support any user who wish to uses Elegant, even if it is a government entity.

https://netherlands.postsen.com/trends/198695/Securitytxt-now-mandatory-for-Dutch-government-websites.html

This topic was futher encouraged for Elegant by users on Hacker News: https://news.ycombinator.com/item?id=36149004#36152473

• Create a ".well-known" directory under source/elegant/public/.well-known
• Create security.txt file
• Include link to Elegant's pgp key for secure communication.
• Include base app contact info, and/or the contact info of Elegant.

As a developer, I want to create a slim `.env.starter` file in the Elegant-cli project.

As a developer, I want to create a slim .env.starter file in the Elegant-cli project.

During the init step, the script should copy that file over, replacing the current method of copying the example file.

During the init step, we also want to copy the example file over, but have empty values and every env var possible so users can see all options.

As a content creator, I would like my web application to include a basic trademark policy page.

Add a console.log output message on the Elegant init script

When a user runs the elegant init script after downloading the Elegant project from NPM, no sort of indication is presented to the user letting them know that their project was created.

Resolve this.

This will also resolve: #12

As an Elegant user, I would like to have a "copy" command next to any code samples;

It would be beneficial to include a copy icon alongside the command displayed in the documentation. This allows users to conveniently copy the command with just a single click.

See this example for a reference:

Elegant CMS - Create an `admin.ts` configuration file under the /config directory.

Create an admin.ts configuration file under the /config directory.

MDX-JS is out of date and is breaking on React 18

MDX-JS is out of date and is breaking on React 18

Update MDX-JS to the latest version.

Add Google Analytics support

Please add Google Analytics support natively out of the box.