DEV Community: Anastasiia_Berest

[Sass]: Simple dot animation

Anastasiia_Berest — Sun, 24 Dec 2023 13:35:04 +0000

And I found my old pet project when I was interested in Sass. Well, this looks not very organic or rhythmic, not Brownian motion.

Pug:

- for (var x = 0; x < 11; x++)
  div.b

Sass:

.b
  width: 10vmin
  height: 10vmin
  border-radius: 50%
  position: absolute
  top: 0
  left: 0
  animation-iteration-count: infinite 
  animation-direction: alternate
  animation-timing-function: linear
  animation-fill-mode: backwards
@for $i from 1 through 15
  @keyframes anm#{$i}
    0% 
      left: 10vmin
      top: 10vmin
      opacity: 0
    100%
      left: random(250)+vmin
      top: random(250)+vmin
      transform: scale(random(3))
  .b:nth-child(#{$i})
    animation-name: anm#{$i}
    animation-duration: random(20)+s
    animation-delay: $i/10 +s 
    background: linear-gradient(45deg, rgb(random(255), random(255), random(255)), rgb(random(255), random(255), random(255)))

codepen_ex

[Hugo]: Strapi CMS And Hugo integration

Anastasiia_Berest — Fri, 14 Jul 2023 13:36:59 +0000

Hi there!
First, what you need to know is that you can fetch data from the Strapi API using JavaScript.

In this test project, we are using Render.com to deploy the Strapi database and Netlify.com to deploy the Hugo frontend.

[1] Create database in Render.com watch the video. For example:

Name: strapi-v0
Database: sample
User: admin
Region: Oregon
Datadog API Key: [nothing]
Instance Type: free
click button Create Database

[2] Install Strapi for example

npx create-strapi-app@4.11.4 my-project
- instalation type: Custom
- preferred language: JavaScript
- default database: postgres
and from render.com select your db data:
- database name: sample_5rhn
- host: dpg-cinr7slgkuvudif7bedg-a.frankfurt-postgres.render.com (External Database URL: value after @ and include last .com)
- port: 5432
- username: admin
- password: ahrhvB6JCLPXcZovPsIjXVd3Yl9q4Zdj (render password)
- enable ssl: true

Do cd my-project and run npn run develop and sign up.

[3] Add entries in Strapi admin:

Go to Settings > Internationalization and add other language > click save button.
Go to Content-type-builder and create Single Type like About and Term with field title (text) and content (rich text).

Click on Edit button near collection Name go to tab Advanced settings and checked Internationalization field.

Go to Settings > USERS & PERMISSIONS PLUGIN > Roles > Public > choose your Entries (About, Terms) and checked find input.
Go to Content Manager About and paste some text there. Check it like http://localhost:1337/api/about?locale=fr&populate=*

[4] Add Hugo template:
I use for this Dot Hugo Theme.

At first we need add to config.toml

[params]
# !!! The Strapi server URL !!!
StrapiServerURL = 'https://strapi-hugo-v1.onrender.com/api'

In layouts/partials add strapi-content.html and content-after.html

strapi-content.html

<!-- Partial to fetch content from Strapi. -->

{{ $endpoint := $.Param "endpoint" }}
{{ $data := dict "title" "" "content" "" }}

{{ if and $endpoint .Site.Params.StrapiServerURL }}

{{ $contentURL := printf "%s%s" .Site.Params.StrapiServerURL $endpoint }}
{{ $data = getJSON $contentURL }}

{{ end }}

{{ $data }}

{{ return $data }}

content-after.html

{{ $strapiData := partial "strapi-content" . }}

{{ if $strapiData }}
<article class="markdown">
  {{/*  <h1>{{ $strapiData.title }}</h1>  */}}

  <div class="mt-4">
    {{ $strapiData.data.attributes.content | markdownify }}
  </div>
</article>
{{  end }}

and add to /dot/layouts/partials/default.html or /layouts/_default/list.html

 {{ partial "content-after.html" . }}

Create in Content dot\content folrder about and folder terms with _index.en.md and _index.fr.md

---
title: "About Us EN"
endpoint: "/about?locale=en"
---

<br/>

in config.toml Check if languages added:

[5] Publick strapi folder with hugo theme folder inside to github.
[6] Choose your repository in render Create a new Web Service don't forgot your .env local variables

Add or .env like:

HOST=0.0.0.0
PORT=1337
APP_KEYS=Qou0bjHyhL/cOmRvQUCyrw==,9SwSrmPSfBsZFPYGGVH+Tw==,w9m8P+0A0r+Vq2bk7p93uw==,c5+P9PwXVgHiNAuOjT1Kog==
API_TOKEN_SALT=+LDbAS4rDx/lJ10uLWcxCw==
ADMIN_JWT_SECRET=+qIl5IOcV/44HYGCSHKi4A==
JWT_SECRET=P3pmatNaY0rFyK6xVSLl9w==
CLOUDINARY_KEY=523224738358411
CLOUDINARY_NAME=dzmcv05wy
CLOUDINARY_SECRET=-dZ793AJNiHbkTIRElvFmsjlHtk
DATABASE_CLIENT=postgres
DATABASE_HOST=dpg-cinr7slgkuvudif7bedg-a.frankfurt-postgres.render.com
DATABASE_NAME=sample_5rhn
DATABASE_PASSWORD=ahrhvB6JCLPXcZovPsIjXVd3Yl9q4Zdj
DATABASE_PORT=5432
DATABASE_SSL=true
DATABASE_USERNAME=admin
TRANSFER_TOKEN_SALT=qMa3hHbA1p1TrnzR3Q4dTQ==

[7] Add Hugo to Netlify.com with deploy command hugo --ignoreCache --gc --minify for my case:

all strapi there https://github.com/anastasiiaxfr/strapi-hugo-v1
Hugo there: folder dot and on Netlify I add dot folder there

[8] Add Netlify Build hook for Strapi update (read): go to Netlify Deployment Setting > Build Hooks and add then copy this hook to Strapi > Settings > Webhooks and save it. Reload About entry and look at demo on Hugo Netlify.

That's all)

Strapi:
admin

login: anastasiiaberest@gmail.com
password: Tg6x-ctg6x

Hugo:
about

Git:
strapi-hugo-v1

For cloudinary add my-project/config/plugin.js with:

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: "cloudinary",
      providerOptions: {
        cloud_name: env("CLOUDINARY_NAME"),
        api_key: env("CLOUDINARY_KEY"),
        api_secret: env("CLOUDINARY_SECRET"),
      },
      actionOptions: {
        upload: {},
        uploadStream: {},
        delete: {},
      },
    },
  },
});

and my-project/config/middlewares.js

module.exports = [
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': ["'self'", 'data:', 'blob:', 'market-assets.strapi.io', 'res.cloudinary.com'],
          'media-src': [
            "'self'",
            'data:',
            'blob:',
            'market-assets.strapi.io',
            'res.cloudinary.com',
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

[HUGO]: How to use variables from .env

Anastasiia_Berest — Sat, 03 Jun 2023 21:27:33 +0000

The initial task you need to accomplish on Hugo is how to add variables from .env to JavaScript when building the site using hugo server or hugo --gc --minify after deploying on Netlify.
And what I understand after researching for this:

touch .env file and add variables with names that start with HUGO_PARAMS_ as required read
Add to config.toml

[security]
  enableInlineShortcodes = false
  [security.funcs]
    getenv = ['^HUGO_']

Add to Netlify Deploy Environment variables from .env
Add to \layouts_default\baseof.html something like this

<script>
const apiKey = "{{ getenv "HUGO_PARAMS_FIREBASE_API_KEY" }}";
//console.log('apiKey', apiKey);
</script>

Deploy that That's all, it will be a success.

To run it locally, you will need to write all the variables in the following format:

env HUGO_TITLE="Some Title" hugo server

(I couldn't find any other way, and it's terribly inconvenient)
read

Sources: 1 2 3 4

[Sass]: Font mixin

Anastasiia_Berest — Sun, 19 Mar 2023 10:26:17 +0000

Hi. Today I will show you my Sass mixin to generate a font and how to add it from the local assets folder.

[1]. For generate:

$ffBack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji","Segoe UI Symbol", "Noto Color Emoji"

=ft($fz, $lh: 16, $fw: inherit, $ff: null) 
  $lh: $lh/$fz
  $fz: $fz/16 + rem

  @if($ff) 
    $family: $ff, $ffBack
    font: $fw $fz/$lh $family

  @else 
    font-weight: $fw
    font-size: $fz
    line-height: $lh

And for usage, we just call it a mixin:

h1
  +ft(32, 38, 700)

h2
  +ft(28, 32, 700, "Inter")

Looks like this CSS.

[2]. Add font from local assets folder (compiled styles and font folders inside assets) [code]:

$fontSrc: '../fonts'

$fntName: (Montserrat-Black, 900), (Montserrat-Bold, 700), (Montserrat-SemiBold, 600), (Montserrat-Medium, 500), (Montserrat-Regular, 400), (Montserrat-Light, 300)

=font($fntName, $fntSrc)    
    @each $fnt, $fntw in $fntName
        @font-face 
            $fntFldr: 'Montserrat'
            font-family: '' + $fnt + ''
            font-style: normal
            font-weight: #{$fntw}
            font-display: swap
            src: local('' + $fnt + ''), local('' + $fnt + ''), url($fontSrc + '/' + $fntFldr + '/' +'#{$fnt}.woff') format('woff'), url($fontSrc + '/' + $fntFldr + '/' +'#{$fnt}.woff2') format('woff2'), url($fontSrc + '/' + $fntFldr + '/' +'#{$fnt}.ttf') format('ttf')

+font($fntName, $fontSrc)

It looks like this:

[Hugo]: Pagination

Anastasiia_Berest — Sat, 18 Mar 2023 15:53:39 +0000

Hi. Today I show you my Hugo SSG pagination template (go to /layouts/partials/_pagination.html):

<div>
 {{ $paginator := .Paginator }}
  <!-- Number of links either side of the current page. -->
  {{ $adjacent_links := 2 }}
  <!-- $max_links = ($adjacent_links * 2) + 1 -->
  {{ $max_links := (add (mul $adjacent_links 2) 1) }}
  <!-- $lower_limit = $adjacent_links + 1 -->
  {{ $lower_limit := (add $adjacent_links 1) }}
  <!-- $upper_limit = $paginator.TotalPages - $adjacent_links -->
  {{ $upper_limit := (sub $paginator.TotalPages $adjacent_links) }}
  <!-- If there's more than one page. -->
  {{ if gt $paginator.TotalPages 1 }}
  <nav aria-label="Page navigation">
    <ul class="pagination justify-content-center">
      <!-- First page. -->
      {{ if ne $paginator.PageNumber 1 }}
      <li class="page-item">
        <a class="page-link hover-ripple" href="{{ $paginator.First.URL }}">
          ««
        </a>
      </li>
      {{ end }}
      <!-- Previous page. -->
      {{ if $paginator.HasPrev }}
      <li class="page-item">
        <a href="{{ $paginator.Prev.URL }}" class="page-link hover-ripple">
          «
        </a>
      </li>
      {{ end }}
      <!-- Page numbers. -->
      {{ range $paginator.Pagers }}
      {{ $.Scratch.Set "page_number_flag" false }}
      <!-- Advanced page numbers. -->
      {{ if gt $paginator.TotalPages $max_links }}
      <!-- Lower limit pages. -->
      <!-- If the user is on a page which is in the lower limit.  -->
      {{ if le $paginator.PageNumber $lower_limit }}
      <!-- If the current loop page is less than max_links. -->
      {{ if le .PageNumber $max_links }}
      {{ $.Scratch.Set "page_number_flag" true }}
      {{ end }}
      <!-- Upper limit pages. -->
      <!-- If the user is on a page which is in the upper limit. -->
      {{ else if ge $paginator.PageNumber $upper_limit }}
      <!-- If the current loop page is greater than total pages minus $max_links -->
      {{ if gt .PageNumber (sub $paginator.TotalPages $max_links) }}
      {{ $.Scratch.Set "page_number_flag" true }}
      {{ end }}
      <!-- Middle pages. -->
      {{ else }}
      {{ if and ( ge .PageNumber (sub $paginator.PageNumber $adjacent_links) ) ( le .PageNumber (add $paginator.PageNumber $adjacent_links) ) }}
      {{ $.Scratch.Set "page_number_flag" true }}
      {{ end }}
      {{ end }}
      <!-- Simple page numbers. -->
      {{ else }}
      {{ $.Scratch.Set "page_number_flag" true }}
      {{ end }}
      <!-- Output page numbers. -->
      {{ if eq ($.Scratch.Get "page_number_flag") true }}
      <li class="page-item{{ if eq . $paginator }} page-item active {{ end }}">
        <a href="{{ .URL }}" class="page-link hover-ripple">
          {{ .PageNumber }}
        </a>
      </li>
      {{ end }}
      {{ end }}
      <!-- Next page. -->
      {{ if $paginator.HasNext }}
      <li class="page-item">
        <a href="{{ $paginator.Next.URL }}" class="page-link hover-ripple">
          »
        </a>
      </li>
      {{ end }}
      <!-- Last page. -->
      {{ if ne $paginator.PageNumber $paginator.TotalPages }}
      <li class="page-item">
        <a class="page-link hover-ripple" href="{{ $paginator.Last.URL }}">
          »»
        </a>
      </li>
      {{ end }}
    </ul>
  </nav>
  {{ end }}
</div>

Don't forget to include the count of posts that will be displayed per page in config.toml:

# post pagination
paginate = "8"

In folder layouts inside your collection type (section) in list.html, include our pagination template:

<div class="">

   <div class="">
    {{ $paginator := .Paginate .Data.Pages }}
    {{ range $paginator.Pages }}
    {{ "<!-- blog post -->" | safeHTML }}
    <article class="">
      {{ .Render "post"}}
    </article>
    {{ end }}
   </div>

   {{"<!-- pagination -->" | safeHTML }}
   {{- partial "_pagination.html" . -}}
   {{"<!-- /pagination -->" | safeHTML }}

</div>

Hugo SSG official documentation.

[Hugo]: Sitemap.xml

Anastasiia_Berest — Sat, 18 Mar 2023 15:25:49 +0000

Hi. Today I will show you my Hugo template for generation Sitemap.xml.

First what you must do is go to: layouts/_default and create sitemap.xml. The code inside look like this:

{{ printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\" ?>" | safeHTML }}
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:xhtml="http://www.w3.org/1999/xhtml">
  {{ range .Data.Pages }}
  <url>
    <loc>{{ .RelPermalink }}</loc>
    {{ if not .Lastmod.IsZero }}
    <lastmod>
    {{ safeHTML ( .Lastmod.Format "20018-01-02T15:04:05-07:00" ) }}
    </lastmod>
    {{ end }}

    {{ with .Sitemap.ChangeFreq }}
    <changefreq>{{ . }}</changefreq>
    {{ end }}

    {{ if ge .Sitemap.Priority 0.0 }}


    {{ if eq .RelPermalink .Site.BaseURL }}

    <priority> 1 </priority>

    {{ end }}


    {{ $urlCheck := .RelPermalink | relURL }}
    {{ $urlSub2 := findRE "([^/]+).*" .RelPermalink 1 }}

    {{ $urlSubFix := replaceRE "[^/]*?((?:/[^/]*?){2})$" "$1" .RelPermalink }}


    {{ if eq $urlCheck $urlSubFix  }}
    <priority> 0.8 </priority>
    {{ end }}


    {{ if not ( eq .RelPermalink .Site.BaseURL | or ( eq $urlCheck $urlSubFix )) }}
    <priority> 0.6 </priority>
    {{ end }}


    {{ end }}

    {{ if .IsTranslated }}{{ range .Translations }}
    <xhtml:link
      rel="alternate"
      hreflang="{{ .Lang }}"
      href="{{ .RelPermalink }}"
      />{{ end }}
      <xhtml:link
        rel="alternate"
        hreflang="{{ .Lang }}"
        href="{{ .RelPermalink }}"
        />{{ end }}
      </url>
      {{ end }}
    </urlset>

Don't forgot paste inside root folder in file config.toml this code:

[sitemap]
ChangeFreq = "daily"
Priority = 0.6
Weight = [["main", "1"], ["sub2", "0.8"], ["sub3", "0.6"]]
enableRobotsTXT = true

The result sitemap looks like this:

We have for main page priority index 1, for pages level 1, like /section/ - priority 0.8 and for pages level 2, like /section/posts - priority 0.6.
$urlSubFix - check url like /section/posts/ and save only /posts/ (priority 0.6) and for url like /section/ it saves /section/ (priority 0.8), it makes the pattern in $urlSubFix regexp.

Hugo SSG official documentation for sitemap.