Code Monkey home page Code Monkey logo

shiocms / shio Goto Github PK

View Code? Open in Web Editor NEW
135.0 3.0 29.0 40.21 MB

:sparkles: :dna: Shio CMS - Model Content, Use GraphQL and Create Site using Javascript with Native Cache and Search.

Home Page: https://openviglet.github.io/shio

License: Apache License 2.0

JavaScript 8.99% Java 54.98% Dockerfile 0.06% HTML 13.33% CSS 19.17% TypeScript 3.39% SCSS 0.07% Procfile 0.01%
wcm content-management-system cms java spring-boot javascript angularjs nashorn viglet-shio graphql

shio's Introduction

Slack Docker Image Version (latest semver) downloads Build Security Rating codecov Twitter

shio_banner.png

Viglet Shio CMS - Model Content, use GraphQL and Create Site using Javascript with Native Cache and Search.

Shio (pronounced [strong/ʃiː/ weak/ʃɪ/ o])

If you'd like to contribute to Viglet Shio, be sure to review the contribution guidelines.

We use GitHub issues for tracking requests and bugs.

Installation

Pre-reqs

  1. Install Java 17
  2. Install Git Client
  3. Install NPM
  4. Install Angular CLI
$ npm install -g @angular/cli

Download

$ git clone https://github.com/ShioCMS/shio.git
$ cd shio

Deploy

1. Runtime

Use Gradle to execute Shio CMS, without generate jar file.

$ ./gradlew bootrun

2. Or Generate JAR File

Use Gradle to generate Shio CMS executable JAR file.

$ ./gradlew build

2.1 Run

To run Shio CMS executable JAR file, just execute the following line:

$ java -jar build/libs/viglet-shio.jar

Viglet Shio CMS

login/password: admin/admin

shio's People

Contributors

alegauss avatar dependabot[bot] avatar jborza 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

shio's Issues

Open graph support feature suggestion

The open graph meta tags allow better presentation when sharing a web page on social media. Also, adding this meta tags will improve SEO optimization of the page.

The basic meta tags are:

  • og:title -> the title of the page, or the content itself, e.g.:
    <meta property="og:title" content="The Rock" />

  • og:url -> canonical url of this page, e.g.:
    <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />

  • og:image -> url of an image of 1:1 or 1.91:1 aspect radio, ranging from 600x315 to 1200x1200. This image file will be shown as a thumbnail when sharing the page on social media, e.g:
    <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

  • og:type -> a list of possible types is available at http://ogp.me/#types. A first version of the implementation could limit this value to 'website' and 'article', e.g:

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2018-04-19T19:56:45+00:00" /> <!-- date time in ISO 8601 format -->
<meta property="article:modified_time" content="2018-04-19T19:56:45+00:00" /> <!-- date time in ISO 8601 format -->
<meta property="article:section" content="Technology" />  <!-- we could assume upper level channel of this content -->
<meta property="article:tag" content="technology,3d printing,etc" />  <!-- a list of tags for this article -->

<meta property="og:type" content="website" /> <!-- Home page and non article pages could have only this type tag -->

Open graph validation could be made here: https://developers.facebook.com/tools/debug/

Global JSON-LD meta tag inclusion feature suggestion

Schema.org is a standard to enhance websites with meta information. Search engines could read this information to automatically detect the content of a website.
One common form to write schema information is using JSON-LD format, where a script tag is inserted at the head tag of the page, like this:

<!-- Schema data -->
<script type="application/ld+json">
{
	"@context": "http://schema.org",
	"@type": "LegalService",
	"name": "Giane Marize Barroso",
	"url": "https://gmbarroso.adv.br",
	"image": "https://gmbarroso.adv.br/android-chrome-512x512.png",
	"contactPoint" : [
		{
			"@type" : "ContactPoint",
			"email" : "[email protected]",
			"telephone" : "+55 (11) 2847-4740",
			"contactType" : "customer service",
			"url": "https://gmbarroso.adv.br",
			"areaServed": ["BR"],
			"availableLanguage": ["Portuguese"]
		}
	]
}
</script>

A feature that allows the user to input a global JSON-LD tag content (as a string) will enhance SEO optimization for his/her website.
Due to the huge domain for schema.org, it would be almost impossible to insert JSON-LD in a form other than string.

Alias precedence

When it has a folder with same name of alias, the alias doesn´t work.

Site icon generation feature suggestion

I would like to suggest a site icon generation feature for Shiohara. Each browser handles site icon presentation its own way, therefore, its hard to manage all possibilities.

  • The most common icon declaration are:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

Where possible icon sizes are:
Recommended 16x16, 32x32, 48x48
Optimal 16x16, 24x24, 32x32, 64x64

  • Android and iOS can use more hi-res images, since a webpage could be added to the phone or tablet home screen. Several formats can be found at official documentations:
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128x128.png" sizes="128x128" />
  • For Windows 8 and newer versions, an website could be pinned to the start menu. Custom meta tags are required for this functionality:
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
  • In addition, for Windows 8 and newer versions, meta application-name will display the site's name on the tile, and also, its possible to choose a tile background color.
    In my opinion, a tile color select funcionality has low priority. Application name value could be the configurated site name at Shiohara's home screen:
<meta name="application-name" content=""/>
<meta name="msapplication-TileColor" content="#FFFFFF" />

To conclude, a single 310x310 image file could be used to generate a 64x64 .ico file and several png files according with the specs above. Also, the required link/meta tags could be generated automatically.
Developers usually rely on third-party applications to manage icon library and link/meta tags. It would be great if Shiohara had this functionality embedded to its core.

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.