Git Product home page Git Product logo

primocms / primo Goto Github PK

View Code? Open in Web Editor NEW
1.9K 20.0 438.0 46.25 MB

Primo is a visual CMS with a built-in code editor, Svelte blocks, and static site generator.

Home Page: https://primocms.org

License: MIT License

JavaScript 42.26% TypeScript 3.31% Svelte 44.77% HTML 0.61% CSS 1.62% PLpgSQL 7.43%
ide cms component-library static-site-generator wordpress primo svelte jamstack static-site css

primo's Introduction

Primo Primo

The modern monolithic CMS

Primo makes it a blast to build pages, update content, and edit code - one block at a time.

Primocms.orgDiscordDocsNewsletterYouTube

screenshot

⭐ Why Primo?

Traditional monolithic CMSs like WordPress, Drupal, and Joomla enable quick setup and easy content editing, but rely on antiquated and heavy development practices (often relying on plugins and third-party services to customize the site and add new components). Headless CMSs have popped up to modernize the view layer with modern development practices and frameworks, but have a poorer content editing experience due to their decoupling from the content layer.

Primo is a modern approach to the monolithic CMS that builds on the traditional monolith's benefits of a quick setup and easy content editing alongside the benefits of modern development (i.e. Svelte). These combine into a web publishing tool that is significantly easier and more fun to use for both technical and non-technical users and enables you to build faster, more secure, and more unique websites.

✨ Features

  • Visual, on-page content editing
  • Drag-and-drop page building with blocks
  • Integrated development environment for blocks and pages
  • Static site generation
  • Real-time page collaboration
  • Internationalization
  • Multisite (1 server = infinity sites)
  • Deploys to Github (i.e. any web host)

Read more in the Docs

How to self-host Primo

Primo depends on several [freemium] third-party services for easy hosting, authentication, database and storage, etc. Running your own Primo server is as easy as forking the Primo repo and deploying it on a static host like Vercel or Netlify, which should only take a few minutes.

Third-party services (all can be signed into with Github):

  • A modern web host like Vercel or Netlify to host the Primo application & published sites (note that Cloudflare Pages is currently unsupported for hosting Primo, but you can still use it for your sites).

  • A Supabase account to manage your server's authentication, database, and file storage.

  • A Github account to deploy your sites to (unless you plan on manually downloading/uploading your site files to a host).

Installation

  1. Ensure you have an account with all the services listed above.

  2. Create a new Supabase project, go to the SQL editor, add a new query and provision your project by copying the schema and pasting it into the editor.

  3. Fork the Primo repository.

  4. Go to your web host and create a new project from your new repository, inputting your Supabase details (go to the API settings) as environment variables.

    • PUBLIC_SUPABASE_URL

    • PUBLIC_SUPABASE_PUBLIC_KEY

    • PRIVATE_SUPABASE_PRIVATE_KEY

Environment Variables

  1. Publish the project and navigate to the Primo authentication screen.

  2. The user account you create will be the server owner. You can manage all your server's data from the Supabase project dashboard.

  3. Finally, go back to your Supabase project & set the Site URL to the URL of your Primo site (under Authentication > URL Configuration > Site URL).

Screenshot 2023-07-11 at 12 44 26 PM

For more details see this step-by-step installation video guide

Updating

You can merge upstream updates by clicking 'Sync fork' on your forked repository. Your updates will automatically deploy to your web host.

primo's People

Contributors

beamanator avatar carstenjaksch avatar cortamorris avatar dark-developer93 avatar desertfox94 avatar gledros avatar jwynveen avatar mateomorris avatar mjmurphy avatar mugi111 avatar rallisf1 avatar seandlg avatar visini avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

primo's Issues

Fix a11y build warnings

Plugin svelte: A11y: A form label must be associated with a control.
There's a bunch of these being caused by this:

      <label>
         <input />
      </label>

They'll all need to be changed to this:

      // const uid = getUniqueId()  
      <label for="{uid}" />
      <input id="{uid}" />

Tailwind Support

Hey there, first of all i am constantly checking this project out every few weeks and basically just wait before doing a project with it. i just tested it again and had a question in regards to tailwind support. i saw it was included but (i think) removed again. does it support it? i certainly understand that tailwind is not for everyone but even i as a super CSS nerd can see the benefits especially with a tool like primo, where i quickly want to hack together some components.

Show page changes on build

When building, it would be useful to see which pages have been changed. Later iterations could even show which specific content sections and components were changed, as well as a before/after view.

Add field id validation

Currently you may have two fields with same id. Which will work - CMS uses first found id, but dev may have a hard time to spot what's wrong with second field.

Site changes getting lost

When you edit a page and switch to different site, the changes on the original site are lost. There should at least be a warning to save first, but ideally you'd just be able to edit multiple sites without losing the changes.

List of built-in variables

It would be pretty nice to have a list of all built-in variables somwhere. I am currently aware of an "nav"-array with all page urls/titles, but it would be pretty sweet to have all of those listed somwhere. There isn't really a dedicated docs page, is there?

Mobile

The libraries we're using for code and content editing (ProseMirror, CodeMirror) works really well on mobile, so there isn't much we have to do to make primo usable on mobile. Right now you can publish a site, but some caveats:
[ ] Toolbar layout broken
[ ] Component CMS breaks app
[ ] Zooming difficult
[ ] Content section doesn't auto-focus

Symbols not getting hydrated on instantiation

Whenever a Symbol gets added to the page, its fields aren't being hydrated. For example, if a component contains {{page-title}}, and the page it's being used on has a field with the key of page-title, the symbol should be instantiated with the value of that page's page-title. At the moment, the workaround is to open up the symbol and change some code so it grabs the appropriate values.

Can this only be used for open source proyects?

Hey, I noticed that this project is GNU Affero General Public License v3.0.

Does this mean that any project created by it does also need to be open source?
Or does the license only apply to primo itself?

Documentation

I think primo needs some kind of documentation Page where features are described in detail. A lot of the more intricate things can be described there, maybe a coming soon and a known bugs list.

Other than that, I think there should be a discord server to get in touch much quicker and to give new potential users/contributers a place to introduce themselves

Installation issues

Following the README I'm hitting a series of installation issues on Ubuntu 20.04.

First the npm install included a complaint about my using node 15, and preferring v12. So I am using node v12.21.0 and npm v6.14.11.

npm run dev complained about missing compiler.js and the sever didn't run. This appeared to be due to this issue, so I updated rollup-plugin-svelte to "^6.1.1".

For npm run dev I then got errors for and fixed missing modules as follows:

npm install --save-dev rollup-plugin-delete
npm install --save-dev tailwindcss

Now I have File '@tsconfig/svelte/tsconfig.json' not found (full error below). I'm not sure if primo is servicable as is so opening this issue to see what the status of the project is, and if there's something I'm missing in my setup.

0] rollup v2.23.0
[0] bundles src/main.ts → public/build...
[0] (!) Plugin typescript: @rollup/plugin-typescript TS6053: File '@tsconfig/svelte/tsconfig.json' not found.
[0] [!] (plugin typescript) Error: @rollup/plugin-typescript: Couldn't process compiler options
[0] Error: @rollup/plugin-typescript: Couldn't process compiler options
[0]     at error (/home/mrh/src/safe/app-ideas/primo/node_modules/rollup/dist/shared/rollup.js:5174:30)
[0]     at throwPluginError (/home/mrh/src/safe/app-ideas/primo/node_modules/rollup/dist/shared/rollup.js:17452:12)
[0]     at Object.error (/home/mrh/src/safe/app-ideas/primo/node_modules/rollup/dist/shared/rollup.js:18071:24)
[0]     at emitParsedOptionsErrors (/home/mrh/src/safe/app-ideas/primo/node_modules/@rollup/plugin-typescript/dist/index.js:310:17)
[0]     at Object.buildStart (/home/mrh/src/safe/app-ideas/primo/node_modules/@rollup/plugin-typescript/dist/index.js:541:13)
[0]     at /home/mrh/src/safe/app-ideas/primo/node_modules/rollup/dist/shared/rollup.js:18269:25
[0]     at processTicksAndRejections (internal/process/task_queues.js:97:5)
[0]     at async Promise.all (index 3)
[0]     at Object.rollupInternal (/home/mrh/src/safe/app-ideas/primo/node_modules/rollup/dist/shared/rollup.js:19369:9)
[0]     at Task.run (/home/mrh/src/safe/app-ideas/primo/node_modules/rollup/dist/shared/watch.js:715:28)

Enhancements for bundle

Source

At the moment, the only enhancement that is made on the final bundle is instant.page. But there's no reason more couldn't be done, like Clayton suggests: "offline support, code splitting, smart preloading." These would probably all be options on the developer side, and include other things like: optimize images, append .html to relative links (for a static site), minify bundle, etc.

Conditionally render section

Conditionally render a section, so if there is no content in a field then the HTML that wraps it for styling and placement should not render. Like an if/else block wrapping it

Intellisense for Variables

This kinda links in with Issue #8, but it would be pretty nice to have all current variables with intellisense in the handlebars-templates. Especially if it would be possible to see

  • The Context (Component, Page, Site) since vars can be overwritten
  • The Title of the Variable (the thing visible in the cms)
  • The Type
  • The current Value (for simple variables like text/numbers/booleans

Field API

Break the field types out of ComponentEditor.svelte and create an API for adding new fields, then re-add the original fields using the API.

Headline Content Option/Markdown isn't doing anything

As the title suggests Markdown/The corrosponding buttons for headlines are not doing anything.

This is probably because the preflight resets from tailwind are removing heading styling. Maybe we should add a default style to the headlines, either in the sitewide CSS or the tailwind site config. To make that Feature actually useful.

I currently don't know if this also applies to any other Markdown / button function, since I didn't have time to test any of these options.

Head HTML not applied to Symbols

I tried to preview the font from the symbols by adding to the main html but it doesn't effect the symbols but after added symbols to the page it get applied.

Feature: Add Auto Save

When building a component, it does not save automatic locally which can cause to loose the code for the component anytime. So it would be a great idea to add a auto save feature to save locally the code.

Add dummy data

Especially for first time users it would be much easier to play with existing site, not blank canvas.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.